/* Geschenkseite (page-templates/page-geschenke.php) v2 – plain CSS, no LESS build needed. Phone first (375 px).
   Uses the theme's tokens: #191919 text, #EDEBE8 page, #D3CDC5 accent, Anton + Open Sans. */

.jm-gifts {
  --jm-ink: #191919;
  --jm-sand: #D3CDC5;
  --jm-page: #EDEBE8;
  --jm-paper: #ffffff;
  --jm-soft: #f7f5f2;
  --jm-muted: #55524e;
  --jm-focus: #1f5fbf;
  max-width: 1360px;
  margin: 0 auto;
  padding: 16px 16px 64px;
  color: var(--jm-ink);
  font-family: 'Open Sans', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  box-sizing: border-box;
}

.jm-gifts *,
.jm-gifts *::before,
.jm-gifts *::after {
  box-sizing: border-box;
}

@media only screen and (min-width: 834px) {
  .jm-gifts {
    padding: 24px 81px 96px;
  }
}

.jm-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Headings & buttons ---------------------------------------------------- */

.jm-gifts__title,
.jm-gifts__heading,
.jm-gifts__card-title,
.jm-tabs__panel-title {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
}

.jm-gifts__heading {
  font-size: 30px;
  line-height: 1.15;
  margin-bottom: 12px;
  text-align: center;
}

.jm-gifts__section-intro {
  max-width: 620px;
  margin: 0 auto 20px;
  text-align: center;
  font-size: 17px;
}

.jm-gifts__heading + .jm-tabs,
.jm-gifts__heading + .jm-gifts__grid,
.jm-gifts__heading + .jm-gifts__table-wrap,
.jm-gifts__heading + .jm-gifts__facts-grid {
  margin-top: 20px;
}

@media only screen and (min-width: 834px) {
  .jm-gifts__heading {
    font-size: 44px;
    margin-bottom: 16px;
  }

  .jm-gifts__heading + .jm-tabs,
  .jm-gifts__heading + .jm-gifts__grid,
  .jm-gifts__heading + .jm-gifts__table-wrap,
  .jm-gifts__heading + .jm-gifts__facts-grid {
    margin-top: 32px;
  }
}

.jm-gifts__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  min-width: 220px;
  padding: 12px 24px;
  border-radius: 6px;
  background: var(--jm-ink);
  color: #fff !important;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  text-align: center;
  text-decoration: none !important;
  transition: opacity .15s ease;
}

.jm-gifts__button:hover {
  opacity: .85;
}

.jm-gifts a:focus-visible,
.jm-gifts__button:focus-visible {
  outline: 3px solid var(--jm-focus);
  outline-offset: 2px;
}

.jm-gifts__button.is-disabled {
  background: var(--jm-sand);
  color: var(--jm-ink) !important;
  cursor: not-allowed;
}

.jm-gifts section + section {
  margin-top: 56px;
}

@media only screen and (min-width: 834px) {
  .jm-gifts section + section {
    margin-top: 96px;
  }
}

.jm-gifts__editor-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px dashed #b07d00;
  border-radius: 6px;
  background: #fff8e1;
  color: #4d3700;
  font-size: 14px;
  line-height: 1.45;
}

.jm-gifts__proposal {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 3px;
  background: #fff3cd;
  color: #5c4300;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  vertical-align: 1px;
}

/* Promotion bar / benefits (top of the page) ------------------------------ */

.jm-gifts__promo {
  margin: 0 0 20px;
  padding: 10px 14px;
  border: 1px solid var(--jm-sand);
  border-radius: 8px;
  background: var(--jm-soft);
  text-align: center;
}

.jm-gifts__promo-text {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.jm-gifts__promo-text a {
  color: inherit;
  margin-left: 4px;
}

.jm-gifts__promo-note {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--jm-muted);
}

/* Phones: compact pills with the titles only, so the hero stays the focus. */
.jm-gifts__benefits {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
}

.jm-gifts__benefits li {
  margin: 0;
  padding: 6px 10px 6px 26px;
  position: relative;
  border-radius: 999px;
  background: var(--jm-paper);
  font-size: 14px;
  line-height: 1.35;
  color: var(--jm-muted);
}

.jm-gifts__benefits li::before {
  content: '✓';
  position: absolute;
  left: 10px;
  top: 6px;
  font-weight: 700;
  color: var(--jm-ink);
}

.jm-gifts__benefits strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--jm-ink);
}

.jm-gifts__benefits span {
  display: none;
}

@media only screen and (min-width: 834px) {
  .jm-gifts__benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: column;
    gap: 12px;
  }

  .jm-gifts__benefits li {
    padding: 10px 14px 10px 34px;
    border-radius: 8px;
  }

  .jm-gifts__benefits li::before {
    left: 14px;
    top: 10px;
  }

  .jm-gifts__benefits strong {
    display: block;
    font-size: 15px;
  }

  .jm-gifts__benefits span {
    display: block;
    font-size: 14px;
  }
}

/* Hero ------------------------------------------------------------------ */

.jm-gifts__hero {
  display: grid;
  gap: 24px;
  align-items: center;
  text-align: center;
}

.jm-gifts__kicker {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.jm-gifts__title {
  font-size: 40px;
  line-height: 1.1;
}

.jm-gifts__intro {
  font-size: 17px;
  line-height: 1.6;
  max-width: 560px;
  margin: 16px auto 0;
}

.jm-gifts__hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

.jm-gifts__button--main {
  width: 100%;
  max-width: 420px;
  min-height: 56px;
  font-size: 17px;
}

.jm-gifts__hero-link {
  color: var(--jm-ink) !important;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.jm-gifts__order-by {
  display: inline-block;
  margin: 18px 0 0;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--jm-paper);
  font-size: 15px;
  font-weight: 600;
}

.jm-gifts__hero-media {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

.jm-gifts__hero-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 45%;
  border-radius: 12px;
}

.jm-gifts__video-file {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  background: var(--jm-ink);
  object-fit: cover;
}

.jm-gifts__video-embed iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 12px;
}

@media only screen and (min-width: 834px) {
  .jm-gifts__title {
    font-size: 64px;
  }
}

@media only screen and (min-width: 1024px) {
  .jm-gifts__hero.has-media {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: 56px;
    text-align: left;
  }

  .jm-gifts__hero.has-media .jm-gifts__intro {
    margin-left: 0;
  }

  .jm-gifts__hero.has-media .jm-gifts__hero-actions {
    align-items: flex-start;
  }

  .jm-gifts__hero.has-media .jm-gifts__button--main {
    width: auto;
    padding-left: 40px;
    padding-right: 40px;
  }

  .jm-gifts__hero-media {
    max-width: 440px;
  }

  .jm-gifts__hero-image {
    aspect-ratio: 4 / 5;
  }
}

@media only screen and (min-width: 1194px) {
  .jm-gifts__title {
    font-size: 80px;
  }
}

/* Tabs (experience entries and budget tiles) – radio buttons, no JavaScript ---------- */

.jm-tabs {
  position: relative;
}

.jm-tabs__radio {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.jm-tabs__choices {
  display: grid;
  gap: 8px;
}

.jm-tabs__choice {
  position: relative;
  display: block;
  margin: 0;
  padding: 14px 16px 14px 48px;
  border: 2px solid var(--jm-ink);
  border-radius: 8px;
  background: var(--jm-paper);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.jm-tabs--personas .jm-tabs__choice::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border: 2px solid var(--jm-ink);
  border-radius: 50%;
  background: var(--jm-paper);
}

@media only screen and (min-width: 834px) {
  .jm-tabs--personas .jm-tabs__choices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

.jm-tabs__panels {
  margin-top: 16px;
}

.jm-tabs__panel {
  display: none;
}

.jm-tabs__panel-intro {
  margin: 0 0 14px;
  font-size: 17px;
  text-align: center;
}

.jm-tabs__panel-title {
  font-size: 24px;
  line-height: 1.2;
  margin-bottom: 14px;
  text-align: center;
}

/* Active choice + visible panel, for up to 6 entries per group. */
.jm-tabs__radio:nth-of-type(1):checked ~ .jm-tabs__panels > .jm-tabs__panel:nth-child(1),
.jm-tabs__radio:nth-of-type(2):checked ~ .jm-tabs__panels > .jm-tabs__panel:nth-child(2),
.jm-tabs__radio:nth-of-type(3):checked ~ .jm-tabs__panels > .jm-tabs__panel:nth-child(3),
.jm-tabs__radio:nth-of-type(4):checked ~ .jm-tabs__panels > .jm-tabs__panel:nth-child(4),
.jm-tabs__radio:nth-of-type(5):checked ~ .jm-tabs__panels > .jm-tabs__panel:nth-child(5),
.jm-tabs__radio:nth-of-type(6):checked ~ .jm-tabs__panels > .jm-tabs__panel:nth-child(6) {
  display: block;
}

.jm-tabs__radio:nth-of-type(1):checked ~ .jm-tabs__choices > .jm-tabs__choice:nth-child(1),
.jm-tabs__radio:nth-of-type(2):checked ~ .jm-tabs__choices > .jm-tabs__choice:nth-child(2),
.jm-tabs__radio:nth-of-type(3):checked ~ .jm-tabs__choices > .jm-tabs__choice:nth-child(3),
.jm-tabs__radio:nth-of-type(4):checked ~ .jm-tabs__choices > .jm-tabs__choice:nth-child(4),
.jm-tabs__radio:nth-of-type(5):checked ~ .jm-tabs__choices > .jm-tabs__choice:nth-child(5),
.jm-tabs__radio:nth-of-type(6):checked ~ .jm-tabs__choices > .jm-tabs__choice:nth-child(6) {
  background: var(--jm-ink);
  color: #fff;
}

.jm-tabs--personas .jm-tabs__radio:nth-of-type(1):checked ~ .jm-tabs__choices > .jm-tabs__choice:nth-child(1)::before,
.jm-tabs--personas .jm-tabs__radio:nth-of-type(2):checked ~ .jm-tabs__choices > .jm-tabs__choice:nth-child(2)::before,
.jm-tabs--personas .jm-tabs__radio:nth-of-type(3):checked ~ .jm-tabs__choices > .jm-tabs__choice:nth-child(3)::before,
.jm-tabs--personas .jm-tabs__radio:nth-of-type(4):checked ~ .jm-tabs__choices > .jm-tabs__choice:nth-child(4)::before,
.jm-tabs--personas .jm-tabs__radio:nth-of-type(5):checked ~ .jm-tabs__choices > .jm-tabs__choice:nth-child(5)::before,
.jm-tabs--personas .jm-tabs__radio:nth-of-type(6):checked ~ .jm-tabs__choices > .jm-tabs__choice:nth-child(6)::before {
  border-color: #fff;
  background: radial-gradient(circle, #fff 0 4px, var(--jm-ink) 5px);
}

.jm-tabs__radio:nth-of-type(1):focus-visible ~ .jm-tabs__choices > .jm-tabs__choice:nth-child(1),
.jm-tabs__radio:nth-of-type(2):focus-visible ~ .jm-tabs__choices > .jm-tabs__choice:nth-child(2),
.jm-tabs__radio:nth-of-type(3):focus-visible ~ .jm-tabs__choices > .jm-tabs__choice:nth-child(3),
.jm-tabs__radio:nth-of-type(4):focus-visible ~ .jm-tabs__choices > .jm-tabs__choice:nth-child(4),
.jm-tabs__radio:nth-of-type(5):focus-visible ~ .jm-tabs__choices > .jm-tabs__choice:nth-child(5),
.jm-tabs__radio:nth-of-type(6):focus-visible ~ .jm-tabs__choices > .jm-tabs__choice:nth-child(6) {
  outline: 3px solid var(--jm-focus);
  outline-offset: 2px;
}

/* Budget tiles ------------------------------------------------------------ */

.jm-budget-tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media only screen and (min-width: 834px) {
  .jm-budget-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

.jm-tabs__choice.jm-budget-tile {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-color: transparent;
  border-radius: 12px;
  text-align: left;
}

.jm-budget-tile__image {
  order: -1;
  display: block;
  aspect-ratio: 1 / 1;
  background: #f4f2ef;
}

.jm-budget-tile__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jm-budget-tile__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 12px;
}

.jm-budget-tile__label {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  text-transform: uppercase;
}

.jm-budget-tile__subtitle {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.jm-budget-tile__meta {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  opacity: .8;
}

.jm-tabs__choice.jm-budget-tile:hover {
  border-color: var(--jm-sand);
}

@media only screen and (min-width: 834px) {
  .jm-budget-tile__label {
    font-size: 26px;
  }
}

/* Product picks (finder) -------------------------------------------------- */

.jm-picks {
  display: grid;
  gap: 12px;
}

@media only screen and (min-width: 640px) {
  .jm-picks {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
  }

  .jm-tabs--personas .jm-picks {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    max-width: 1100px;
    margin: 0 auto;
  }
}

.jm-pick {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  padding: 14px;
  border-radius: 12px;
  background: var(--jm-paper);
}

/* Phones: photo and head (title, stars) side by side, quote, price and button below over the full card width.
   From 640px: photo on top, title right below it, quote, then price block and button at the bottom of every card
   (cards of a row have the same height, the free space sits between quote and price). */
.jm-pick__image {
  grid-column: 1;
  grid-row: 1;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: #f4f2ef;
}

.jm-pick__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jm-pick__head {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.jm-pick__body {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* title like the shop cards (Anton, uppercase) */
.jm-pick__title {
  margin: 0;
  font-family: 'Anton', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.jm-pick__title a {
  color: inherit;
  text-decoration: none;
}

.jm-pick__rating,
.jm-gifts__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 15px;
}

/* below the review threshold one real review instead of stars and count – only on cards without Jo's sentence
   (one quote per card); same compact look as Jo's sentence, at most 3 lines */
.jm-gifts__review {
  display: block;
  flex: 1 1 100%;
  padding-left: 10px;
  border-left: 2px solid var(--jm-sand);
  font-size: 14px;
  line-height: 1.45;
}

.jm-gifts__review-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.jm-gifts__review-by {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--jm-muted);
}

.jm-pick__price {
  margin-top: auto;
  padding-top: 12px;
}

.jm-pick__amount {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

/* price block: price large, below it small "Einzeln … · du sparst …" (sets only) and the grey price note */
.jm-pick__saving,
.jm-gifts__saving {
  display: block;
  margin-top: 1px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.jm-pick__info,
.jm-gifts__price-info {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--jm-muted);
}

.jm-pick__info a,
.jm-gifts__price-info a {
  color: inherit;
}

.jm-pick__button {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin-top: 12px;
  padding: 10px 14px;
}

@media only screen and (min-width: 640px) {
  .jm-pick {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 16px;
    overflow: hidden;
  }

  .jm-pick__image {
    flex: none;
    aspect-ratio: 4 / 3;
    border-radius: 0;
  }

  .jm-pick__head {
    padding: 14px 16px 0;
  }

  .jm-pick__body {
    flex: 1 1 auto;
    padding: 0 16px;
  }

  .jm-pick__title {
    font-size: 19px;
    line-height: 1.15;
  }
}

/* Jo's sentence: normal weight, compact; on the small cards at most 3 lines */

.jm-quote {
  margin: 12px 0 0;
  padding: 0 0 0 10px;
  border-left: 2px solid var(--jm-sand);
}

.jm-quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  quotes: none;
}

.jm-quote blockquote::before,
.jm-quote blockquote::after {
  content: none;
}

.jm-quote p {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
}

.jm-pick .jm-quote p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-size: 14px;
}

.jm-quote figcaption {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--jm-muted);
}

/* Set cards --------------------------------------------------------------- */

.jm-gifts__grid {
  display: grid;
  gap: 20px;
}

@media only screen and (min-width: 834px) {
  .jm-gifts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

@media only screen and (min-width: 1194px) {
  .jm-gifts__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.jm-gifts__card {
  display: flex;
  flex-direction: column;
  background: var(--jm-paper);
  border-radius: 12px;
  overflow: hidden;
  scroll-margin-top: 110px;
}

.jm-gifts__card.is-highlight {
  box-shadow: 0 0 0 2px var(--jm-ink);
}

.jm-gifts__card-image {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: #f4f2ef;
}

.jm-gifts__card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jm-gifts__card.is-out-of-stock .jm-gifts__card-image img {
  opacity: .5;
}

.jm-gifts__card-image .badges {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jm-gifts__card-image .badge {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03rem;
  border-radius: 2px;
  padding: 5px 8px;
  text-transform: uppercase;
  color: var(--jm-ink);
  background: var(--jm-sand);
}

.jm-gifts__card-image .badge.featured {
  color: #fff;
  background: #000;
}

.jm-gifts__card-image .badge.jm-gifts__badge-draft {
  color: #fff;
  background: #b3261e;
}

.jm-gifts__card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 16px 20px;
}

@media only screen and (min-width: 834px) {
  .jm-gifts__card-body {
    padding: 20px;
  }
}

.jm-gifts__label {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 2px;
  background: var(--jm-page);
  margin-bottom: 12px;
}

.jm-gifts__card-title {
  font-size: 28px;
  line-height: 1.15;
}

.jm-gifts__card-title a {
  color: inherit;
  text-decoration: none;
}

.jm-gifts__product-name {
  font-size: 15px;
  color: var(--jm-muted);
  margin-top: 4px;
}

.jm-gifts__subheading {
  margin: 18px 0 4px;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
}

.jm-gifts__card-text {
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
}

.jm-gifts__card-text + .jm-gifts__card-text {
  margin-top: 8px;
}

.jm-gifts__contents {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 1.45;
}

.jm-gifts__contents li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 6px;
}

.jm-gifts__contents li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

.jm-gifts__price {
  margin-top: auto;
  padding-top: 20px;
}

.jm-gifts__amount {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.jm-gifts__card-body > .jm-gifts__button {
  margin-top: 16px;
  min-width: 0;
  width: 100%;
}

/* Star rating (same look as the shop cards) ------------------------------- */

.jm-gifts .star-rating {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 106px;
  height: 1em;
  line-height: 1;
  font-size: 17px;
  letter-spacing: 4px;
  font-family: star;
  color: #000;
  vertical-align: middle;
}

.jm-gifts .star-rating::before {
  content: '\73\73\73\73\73';
  opacity: .25;
  position: absolute;
  top: 0;
  left: 0;
}

.jm-gifts .star-rating span {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.jm-gifts .star-rating span::before {
  content: '\53\53\53\53\53';
  position: absolute;
  top: 0;
  left: 0;
}

.jm-gifts .rating-count {
  font-size: 15px;
}

.jm-gifts .rating-count.no-reviews {
  color: var(--jm-muted);
}

/* Comparison table -------------------------------------------------------- */

/* Shadow on the right edge while more columns can be scrolled into view (phones). */
.jm-gifts__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  background:
    linear-gradient(to left, var(--jm-paper) 40%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0)) right center / 16px 100% no-repeat scroll,
    var(--jm-paper);
}

.jm-gifts__table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
}

.jm-gifts__table th,
.jm-gifts__table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--jm-page);
  text-align: center;
  vertical-align: middle;
}

.jm-gifts__table thead th {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: 15px;
  text-transform: uppercase;
  line-height: 1.2;
}

@media only screen and (min-width: 834px) {
  .jm-gifts__table th,
  .jm-gifts__table td {
    padding: 14px 16px;
  }

  .jm-gifts__table thead th {
    font-size: 17px;
  }
}

.jm-gifts__table thead th a {
  color: inherit;
  text-decoration: none;
}

.jm-gifts__table tbody th {
  text-align: left;
  font-weight: 600;
  position: sticky;
  left: 0;
  background: var(--jm-paper);
  min-width: 128px;
  padding-left: 14px;
}

.jm-gifts__check {
  font-weight: 700;
  font-size: 17px;
}

.jm-gifts__none {
  color: #8a857f;
}

.jm-gifts__table-price th,
.jm-gifts__table-price td {
  font-weight: 700;
  border-bottom: 0;
}

/* Facts ------------------------------------------------------------------- */

.jm-gifts__facts-grid {
  display: grid;
  gap: 12px;
}

@media only screen and (min-width: 834px) {
  .jm-gifts__facts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media only screen and (min-width: 1194px) {
  .jm-gifts__facts-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.jm-gifts__fact {
  background: var(--jm-paper);
  border-radius: 12px;
  padding: 18px 20px;
}

.jm-gifts__fact h3 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 6px;
}

.jm-gifts__fact p {
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
}

.jm-gifts__facts-link {
  text-align: center;
  margin: 20px 0 0;
  font-size: 15px;
}

.jm-gifts__facts-link a {
  color: inherit;
}

/* Free content & outro ---------------------------------------------------- */

.jm-gifts__content {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  font-size: 17px;
  line-height: 1.6;
}

.jm-gifts__outro {
  text-align: center;
}

.jm-gifts__outro .jm-gifts__heading {
  margin-bottom: 20px;
}

/* Shop teaser (below "Finde deinen Einstieg" on /shop/) -------------------- */

.jm-gift-teaser {
  margin: 24px 16px 8px;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
}

@media only screen and (min-width: 834px) {
  .jm-gift-teaser {
    margin: 32px 81px 16px;
  }
}

.jm-gift-teaser *,
.jm-gift-teaser *::before,
.jm-gift-teaser *::after {
  box-sizing: border-box;
}

.jm-gift-teaser__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 24px 20px;
  border-radius: 12px;
  background: #191919;
  display: grid;
  gap: 20px;
}

@media only screen and (min-width: 1194px) {
  .jm-gift-teaser__inner {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    align-items: center;
    gap: 40px;
    padding: 32px 40px;
  }
}

.jm-gift-teaser__kicker {
  font-size: 13px;
  line-height: 18px; /* = "normal" of Open Sans Bold here; fixed so the teaser keeps its height while the font loads (CLS) */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #D3CDC5;
}

.jm-gift-teaser__title {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 32px;
  line-height: 1.1;
  margin: 6px 0 8px;
  color: #fff;
}

@media only screen and (min-width: 834px) {
  .jm-gift-teaser__title {
    font-size: 40px;
  }
}

.jm-gift-teaser__intro {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 16px;
  color: #EDEBE8;
}

.jm-gift-teaser__button {
  display: inline-block;
  line-height: 22px; /* = "normal" of Open Sans Bold here; fixed so the teaser keeps its height while the font loads (CLS) */
  padding: 14px 20px;
  border-radius: 6px;
  background: #fff;
  color: #191919 !important;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none !important;
}

.jm-gift-teaser__button:hover,
.jm-gift-teaser__button:focus-visible {
  background: #D3CDC5;
}

.jm-gift-teaser__tiles {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(140px, 1fr);
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.jm-gift-teaser__tiles li {
  scroll-snap-align: start;
}

.jm-gift-teaser__tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  color: #191919 !important;
  text-decoration: none !important;
}

.jm-gift-teaser__image {
  display: block;
  aspect-ratio: 1 / 1;
  background: #f4f2ef;
}

.jm-gift-teaser__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jm-gift-teaser__name {
  display: block;
  padding: 10px 12px 2px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 1.2;
}

.jm-gift-teaser__price {
  display: block;
  padding: 0 12px 12px;
  line-height: 20px; /* = "normal" of Open Sans Bold here; fixed so the teaser keeps its height while the font loads (CLS) */
  font-size: 15px;
  font-weight: 700;
}

.jm-gift-teaser__tile:hover .jm-gift-teaser__name,
.jm-gift-teaser__tile:focus-visible .jm-gift-teaser__name {
  text-decoration: underline;
}

/* Phone check 2026-11-12 (phones only, desktop unchanged) ----------------------------------------------------
   Shorter photos (4:3) so photo, title and price come closer together; bigger tap areas (padding on inline links
   widens the tap area without moving anything); swipe rows and the table without scrollbars; the shop teaser
   row runs to the edge of its dark box so the next tile peeks in. */
@media only screen and (max-width: 833.98px) {
  .jm-gifts__hero-image {
    aspect-ratio: 4 / 3;
  }

  .jm-gifts__hero-link {
    margin: -10px 0;
    padding: 10px 0;
  }

  .jm-pick__title a {
    padding: 11px 0;
  }

  .jm-pick__info a,
  .jm-gifts__price-info a,
  .jm-gifts__facts-link a {
    padding: 12px 0;
  }

  .jm-gifts__card-title a {
    padding: 6px 0;
  }

  .jm-gifts__card-image {
    aspect-ratio: 4 / 3;
  }

  .jm-gifts__card-image img {
    height: auto;
    aspect-ratio: 4 / 3;
    object-position: 50% 10%;
  }

  .jm-gifts__table-wrap {
    scrollbar-width: none;
  }

  .jm-gifts__table-wrap::-webkit-scrollbar {
    display: none;
  }

  .jm-gift-teaser__tiles {
    margin: -6px -20px 0;
    padding: 6px 20px 8px;
    scroll-padding: 0 20px;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .jm-gift-teaser__tiles::-webkit-scrollbar {
    display: none;
  }

  .jm-gift-teaser__price {
    margin-top: auto;
  }
}