/* Family shop: promotions, products, fansclub. Tokens come from shell.css. */
.display-page.promotions-page, .display-page.products-page, .display-page.fansclub-page {max-width:1600px; margin-inline:auto; overflow-x:clip;}

/* ---- shared: banner shown whole, copy in a readable column below ---- */
.display-page.products-page #page-top, .display-page.fansclub-page #page-top {display:grid; grid-template-columns:minmax(0,1fr); gap:0; padding:0; min-height:0;}
.display-page.products-page #page-top-center-bg, .display-page.fansclub-page #page-top-center-bg {display:none;}
.display-page.products-page #page-top .desktop, .display-page.fansclub-page #page-top .desktop {display:block !important; grid-column:1; grid-row:1; position:relative; min-width:0;}
.display-page.products-page #page-top-banners, .display-page.fansclub-page #page-top-banners {position:relative; inset:auto; display:block; width:100%; height:auto; aspect-ratio:1920/347; background-size:contain; background-repeat:no-repeat; background-position:center; min-height:0;}
.display-page.products-page #page-top-inner, .display-page.fansclub-page #page-top-inner {grid-column:1; grid-row:2; width:100%; max-width:60rem; margin:0 auto; padding:var(--space-5) var(--space-3) var(--space-6); box-sizing:border-box;}
.display-page.products-page #page-top-left, .display-page.fansclub-page #page-top-left {width:auto; max-width:none; margin:0;}
.display-page #page-top-left h1 {margin:0; font-size:clamp(1.9rem,4.4vw,3.2rem); line-height:1.2; text-wrap:balance; color:var(--ink);}
.display-page #page-top-left-line {width:64px; height:4px; background:var(--cyan); margin:var(--space-3) 0 var(--space-4);}
.display-page #page-top-left-desc {font-size:1.0625rem; line-height:1.8; color:var(--ink);}
.display-page #page-top-left-desc p {margin:0 0 var(--space-3);}
.display-page #page-top-left-desc p:empty, .display-page #page-top-left-desc p:has(> br:only-child) {display:none;}
.display-page #page-top-left-desc h2 {margin:0; font-size:clamp(1.4rem,2.8vw,2.1rem); line-height:1.3; color:var(--cyan-ink); text-wrap:balance;}
.products-page #page-top-left-desc h2 {margin-bottom:var(--space-3);}
.display-page .empty-state {max-width:60rem; margin:0 auto; padding:var(--space-4) var(--space-3); font-size:1rem; color:var(--muted); font-weight:500;}
.display-page .demo-note, .display-page .excluded-action {max-width:60rem; margin:0 auto; padding:var(--space-2) var(--space-3); font-size:.8125rem; color:#555; line-height:1.6;}

/* ---- fansclub: text and bottle photo as separate columns ---- */
.fansclub-page #page-top-left-desc {display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-3) var(--space-6); align-items:start;}
.fansclub-page #page-top-left-desc p:nth-of-type(1) {font-size:1.125rem;}
.fansclub-page #page-top-left-desc p:nth-of-type(2) {font-size:.875rem; color:var(--muted);}
.fansclub-page #page-top-left-desc p:nth-of-type(2) span {font-size:inherit !important; color:var(--muted) !important;}
.fansclub-page #page-top-left-desc .clear {display:none;}
.fansclub-page .member-figure {margin:var(--space-3) 0 0; overflow-x:auto; max-width:100%; border:1px solid var(--pink); border-radius:12px; background:var(--white); box-shadow:var(--shadow-1);}
.fansclub-page .member-figure table {width:100%; min-width:20rem; height:auto !important; table-layout:auto; border-collapse:collapse;}
.fansclub-page .member-figure td {display:table-cell; width:auto; padding:var(--space-3); vertical-align:middle; box-sizing:border-box;}
.fansclub-page .member-figure td:first-child {width:8.5rem; min-width:7rem;}
.fansclub-page .member-figure td:last-child {min-width:8em; overflow-wrap:normal; word-break:keep-all;}
.fansclub-page .member-figure td img {display:block; width:100%; min-width:6rem; max-width:7.5rem; height:auto; margin:auto;}
.fansclub-page .member-figure td p {display:none;}
.fansclub-page .member-figure h2 {font-size:1.25rem; line-height:1.4; white-space:normal;}
.fansclub-page .member-figure figcaption {padding:0 var(--space-3) var(--space-3); margin:0; color:var(--muted); font-size:.875rem; line-height:1.6;}
.fansclub-page .member-figure figcaption p {margin:0;}
@media (min-width:900px) {
  .fansclub-page #page-top-inner {max-width:72rem; padding-inline:var(--space-4);}
  .fansclub-page #page-top-left-desc {grid-template-columns:minmax(0,1.1fr) minmax(18rem,.9fr);}
  .fansclub-page #page-top-left-desc > p {grid-column:1;}
  .fansclub-page .member-figure {grid-column:2; grid-row:1 / span 3; margin:0; min-width:0;}
}

/* ---- promotions: offer cards in the home promo-card motif ---- */
.promotions-page #page-top-banners {max-width:1600px; margin:0 auto;}
.promotions-page .image-transcription {max-width:72rem; margin:var(--space-5) auto var(--space-4); padding:0 var(--space-3); box-sizing:border-box; font-size:clamp(1.9rem,4.4vw,3.2rem); line-height:1.2; color:var(--coral-ink); text-wrap:balance;}
.promotions-page #data-form-container {max-width:72rem; margin:0 auto; padding:0 var(--space-3) var(--space-4); box-sizing:border-box;}
.promotions-page .promo-list {display:grid; gap:var(--space-6);}
.promotions-page .promo-offer {display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4); padding:var(--space-4); border:1px solid var(--pink); border-radius:12px; background:var(--white); transition:border-color 180ms var(--ease-out);}
.promotions-page .promo-offer:hover, .promotions-page .promo-offer:focus-within {border-color:var(--coral);}
.promotions-page .promo-media, .promotions-page .promo-body {min-width:0;}
.promotions-page .promo-media figure, .promotions-page .promo-body figure {margin:0; max-width:100%;}
.promotions-page .promo-media .promotion-picture, .promotions-page .promo-body .promotion-picture {text-align:center;}
.promotions-page .promo-media img.promo-thumb {display:block; width:auto; max-width:100%; height:auto; max-height:480px; object-fit:contain; margin:0 auto; border-radius:12px;}
.promotions-page .promo-body figure img {display:block; width:auto; max-width:100%; height:auto; max-height:480px; object-fit:contain; margin:0 auto;}
.promotions-page .promo-body figcaption, .promotions-page .promo-media figcaption {margin:var(--space-2) 0 0; color:var(--muted); font-size:.875rem; line-height:1.6; text-align:left;}
.promotions-page .promo-body figcaption p, .promotions-page .promo-media figcaption p {margin:0;}
.promotions-page .promo-inner {color:var(--ink); line-height:1.6;}
.promotions-page .promo-inner > h2 {margin:0 0 var(--space-3); font-size:clamp(1.4rem,2.8vw,2.1rem); line-height:1.3; color:var(--coral-ink); text-wrap:balance;}
.promotions-page .promo-inner hr {border:0; border-top:1px solid var(--line); margin:var(--space-3) 0;}
.promotions-page .promo-inner p {margin:0 0 var(--space-2); font-size:1.0625rem;}
.promotions-page .promo-inner p:empty, .promotions-page .promo-inner p:has(> br:only-child) {display:none;}
.promotions-page .promo-inner br:first-child {display:none;}
.promotions-page .promo-inner strong {font-weight:700;}
.promotions-page .promo-inner > div:first-of-type {font-size:.9375rem; color:var(--muted);}
.promotions-page .promo-inner > div:first-of-type strong {font-size:1.25rem; font-weight:700; color:var(--cyan-ink);}
.promotions-page .promo-hl {color:var(--coral-ink); font-size:inherit;}
.promotions-page .promo-price {display:inline-block; font-size:clamp(2.75rem,7vw,4.5rem); font-weight:700; line-height:1.1; color:var(--coral); letter-spacing:0; vertical-align:baseline;}
.promotions-page .promo-bonus {display:block; margin:var(--space-3) 0 var(--space-2); font-size:1.25rem; font-weight:700; color:var(--cyan-ink);}
.promotions-page .promo-gift {margin:0 0 var(--space-2); font-size:1.0625rem; font-weight:700; line-height:1.6;}
.promotions-page .promo-gift:empty {display:none;}
.promotions-page .promo-tag {color:var(--coral-ink);}
.promotions-page .promo-tick {display:inline-block; vertical-align:-1px; margin-left:4px;}
.promotions-page .promo-pay {margin:var(--space-3) 0; padding:var(--space-3) 0; border-radius:0; border-block:1px solid var(--line); background:none; color:var(--cyan-ink); font-weight:500; font-size:.9375rem;}
.promotions-page .promo-pay span {font-size:1em !important; color:inherit !important;}
.promotions-page .promo-pay > div:first-child {font-weight:700; margin-bottom:var(--space-1);}
.promotions-page .promo-body div:has(> figure + figure) {display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:flex-start; margin:var(--space-3) 0;}
.promotions-page .promo-body div:has(> figure + figure) > figure {flex:1 1 11rem; min-width:0;}
.promotions-page .promo-note {margin:var(--space-3) 0 0; font-size:.8125rem; color:var(--muted); line-height:1.6;}
.promotions-page .promo-inner, .promotions-page .promo-inner * {max-width:100%; overflow-wrap:anywhere;}
.promotions-page .promo-inner [dir="auto"], .promotions-page .promo-inner > div {text-align:left;}
@media (min-width:900px) {
  .promotions-page .promo-offer {grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--space-3) var(--space-6); padding:var(--space-5); align-items:start;}
  .promotions-page .promo-offer-flip {grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
  .promotions-page .promo-media {grid-column:1; grid-row:1;}
  .promotions-page .promo-body {grid-column:2; grid-row:1;}
  .promotions-page .promo-offer-flip .promo-media {grid-column:2;}
  .promotions-page .promo-offer-flip .promo-body {grid-column:1;}
  .promotions-page .promo-media {align-self:start;}
}
@media (prefers-reduced-motion:reduce) {.promotions-page .promo-offer {transition:none;}}
.promotions-page .promo-body .promotion-picture-small {display:none;}
.promotions-page .promo-body .promotion-picture-large {display:block;}
@media (max-width:768px) {.promotions-page .promo-body .promotion-picture-large {display:none;} .promotions-page .promo-body .promotion-picture-small {display:block;}}
.promotions-page #page-top, .promotions-page #page-top .desktop, .promotions-page #page-top-banners {width:100%; max-width:1600px; margin-inline:auto;}
.promotions-page > .image-figure {max-width:1600px; margin:0 auto;}
.promotions-page > .image-figure > figcaption {max-width:72rem; margin:var(--space-2) auto var(--space-5); text-align:center; padding:0 var(--space-3); box-sizing:border-box; color:var(--muted); font-size:.875rem;}
.promotions-page > .image-figure > figcaption p {margin:0;}
/* pictures: one responsive copy shown at every width inside the thumb column */
.promotions-page .promo-media .promotion-picture-small {display:block;}
@media (max-width:768px) {
  .promotions-page .promo-offer {padding:var(--space-3);}
  .promotions-page .promo-inner > div:first-of-type {text-align:left;}
}
.promotions-page #page-top {position:static; display:block; width:100%; max-width:1600px; margin:0 auto; padding:0; min-height:0; float:none;}
.promotions-page #page-top-right-bg {display:none;}
.promotions-page #page-top-banners {position:static; inset:auto; display:block; width:100%; height:auto;}
.promotions-page #page-top-banners picture, .promotions-page #page-top-banners img {display:block; width:100%; height:auto;}

/* words kept in the page for the archive record, hidden from view (same words appear once in the card) */
.promotions-page .promo-head, .promotions-page .promo-emoji, .promotions-page .promo-extra .pitem-mobile-prices, .promotions-page .promo-dup-price, .promotions-page .promo-fine .pitem-discount2, .promotions-page .promo-media .promotion-picture-large {display:none;}
.promotions-page .promo-extra .pitem-mobile-prices.pitem-mobile-prices {display:none;}
.promotions-page .promo-fine {margin:0; font-size:.8125rem; line-height:1.6;}
.promotions-page .promo-fine .pitem-col-2-inner, .promotions-page .promo-fine .pitem-col-2-inner div {color:var(--muted) !important; font-size:.8125rem;}
.promotions-page .promo-extra {min-width:0;}
@media (min-width:900px) {.promotions-page .promo-extra {grid-column:1 / -1;}}

.products-page #page-top-left-desc h2 + p {display:none;}
