/* Wrap theme, shop pages: the offer world. Offers are gift tags hung on a coral cord; products and
   membership are single paper cards with their own photograph. */
/* Products and membership are not offers: their cords stay cyan (the member gift card turns coral via world.css). */

/* Page names: light, tracked, a coral cord above. */
main .shop-title {position:relative; margin:0; padding-top:30px; font-size:clamp(1.875rem,4vw,2.75rem) !important; font-weight:300 !important; letter-spacing:.22em; line-height:1.4 !important; color:var(--ink) !important;}
main .shop-title::before {content:""; position:absolute; top:0; left:0; width:72px; height:7px; background:var(--cord-lines);}

/* ---------------------------------------------------------------- promotions */
/* Two offer sections, one under the other: words on the left, that offer's own photographs on the right. */
.promotions-page > .shop-title {width:min(1176px, 100% - 48px); margin:40px auto 0;}
.promotions-page #data-form-container {max-width:1224px; margin:0 auto; padding:20px 24px 24px;}
.promotions-page #data-form-container > .tag-condition {margin:0 0 28px; font-size:.875rem; letter-spacing:.08em; line-height:1.7; color:var(--ink-soft);}
.promotions-page .offer-table {position:relative; display:flex; flex-direction:column; gap:0 !important; padding-top:22px;}
.promotions-page .offer-table::before {content:""; position:absolute; top:0; left:0; right:0; height:7px; background:var(--cord-lines);}
.promotions-page .gift-tag {display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:'summary' 'gifts' 'pics'; align-items:start; min-width:0;}
.promotions-page .gift-tag > * {min-width:0; overflow-wrap:anywhere;}
.promotions-page .gift-tag + .gift-tag {position:relative; margin-top:56px; padding-top:30px;}
.promotions-page .gift-tag + .gift-tag::before {content:""; position:absolute; top:0; left:0; width:72px; height:7px; background:var(--cord-lines);}
.gift-tag > .tag-summary {grid-area:summary;} .gift-tag > .tag-gifts {grid-area:gifts;} .gift-tag > .tag-pictures {grid-area:pics; align-self:start;}

.tag-head h2 {margin:0 !important; padding:0 !important; font-size:.8125rem !important; font-weight:500 !important; letter-spacing:.14em !important; color:var(--coral-ink) !important; text-align:left; line-height:1.6 !important;}
.tag-head h2::before {display:none !important;}
.tag-name {margin-top:12px;}
.tag-name p {margin:0; font-size:clamp(1.0625rem,2.4vw,1.75rem); font-weight:300; letter-spacing:.06em; line-height:1.45; color:var(--ink);}
.tag-name p strong {font-weight:300;}
.tag-name .promo-hl {color:var(--coral-ink);}
.tag-name .tag-session {margin-top:6px; font-size:.8125rem; letter-spacing:.04em; color:var(--ink-soft);}

.tag-price {display:flex; align-items:baseline; margin:16px 0 0; font-size:.875rem;}
.tag-price strong {display:inline-flex; align-items:baseline; gap:.2em; white-space:nowrap; font-weight:400; letter-spacing:.14em; color:var(--ink-soft);}
.tag-price .promo-price {display:inline-block; margin:0 .14em 0 .08em; font-family:var(--numeral); font-size:clamp(2.75rem,8vw,5.5rem) !important; font-weight:400 !important; line-height:1; letter-spacing:-.01em; color:var(--coral) !important; font-variant-numeric:lining-nums;}

.tag-specs {display:grid; gap:6px; max-width:22em; margin:14px 0 0; padding:0;}
.tag-spec {display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:12px;}
.tag-spec dt {font-size:.8125rem; letter-spacing:.06em; color:var(--ink-soft);}
.tag-spec dd {margin:0; font-family:var(--numeral); font-size:1.25rem; line-height:1.2; color:var(--ink); font-variant-numeric:lining-nums;}

.tag-gifts {margin-top:22px;}
.tag-gifts > p {position:relative; margin:0 0 4px; padding-top:14px; font-size:.875rem; font-weight:500; letter-spacing:.1em; color:var(--coral-ink);}
.tag-gifts > p::before {content:""; position:absolute; top:0; left:0; width:40px; height:7px; background:var(--cord-lines);}
.tag-gifts .promo-bonus {display:inline; margin:0 !important; font-size:inherit !important; font-weight:inherit !important; color:inherit !important;}
.promotions-page .tag-gifts .promo-gift {margin:0; padding:5px 0; border:0; font-size:.875rem; font-weight:400; line-height:1.6; color:var(--ink);}
.tag-gifts .promo-gift .promo-tag {display:inline-block; margin-right:8px; padding:0 6px 1px; background:var(--coral-ink); color:var(--paper) !important; font-size:.6875rem; letter-spacing:.1em; vertical-align:1px;}
.tag-gifts .promo-gift > span > span:not(.promo-tag) {font-size:.75rem; color:var(--ink-soft);}
/* A gift line with its own picture(s): compact image-and-text rows. */
.gift-row {margin:0; padding:6px 0 10px; border-bottom:1px solid var(--blush);}
.gift-row-pics {display:grid; gap:8px; margin-top:4px;}
.gift-row-pics figure {display:grid; grid-template-columns:72px minmax(0,1fr); gap:0 14px; align-items:center; margin:0; min-width:0;}
.gift-row-pics .promotion-picture-small {display:block !important;}
.gift-row-pics .promotion-picture {display:block; margin:0; padding:0;}
.gift-row-pics img {display:block; width:72px !important; max-width:72px !important; height:72px !important; aspect-ratio:1; margin:0 !important; padding:6px; box-sizing:border-box; object-fit:contain !important; background:var(--blush); border-radius:0 !important;}
.gift-row-pics .img-text {margin:0; padding:0; border:0; background:none; font-size:.75rem !important; line-height:1.55 !important; letter-spacing:.02em; color:var(--ink-soft) !important;}

/* Each offer's pictures sit under its own gifts: product shots as a small grid, photographs wide. */
.tag-pictures {display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:24px;}
.tag-pictures figure {margin:0; min-width:0;}
.tag-pictures .promotion-picture, .tag-pictures .promo-media {display:block; margin:0; padding:0; text-align:left;}
.tag-pictures .promotion-picture-small {display:block !important;}
.tag-pictures img {display:block; width:100% !important; max-width:100% !important; height:auto !important; max-height:none !important; margin:0 !important; border-radius:0 !important;}
.tag-pictures .tag-pic-wide img {max-width:400px !important; object-fit:contain !important;}

.promotions-page .promo-terms {display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 32px; margin:28px 0 0; padding:0;}
.promotions-page .promo-terms .promo-pay {margin:0; padding:0; border:0; background:none; color:var(--ink-soft); font-size:.875rem; font-weight:400; letter-spacing:.04em;}
.promotions-page .promo-terms .promo-pay > div {display:inline;}
.promotions-page .promo-terms .promo-pay > div:first-child {margin-right:12px; font-weight:500; letter-spacing:.12em; color:var(--ink);}
.promotions-page .promo-tick {color:var(--coral-ink);}
.tag-fine {margin:0; font-size:.875rem; letter-spacing:.04em; color:var(--ink-soft);}

/* The diploma: the proof behind both offers, a compact row after them. */
.promotions-page .promo-proof {display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin:48px 0 0 !important; padding:0;}
.promotions-page .promo-proof #page-top, .promotions-page .promo-proof #page-top .desktop, .promotions-page .promo-proof #page-top-banners {width:auto; max-width:none; margin:0; padding:0; min-height:0;}
.promotions-page .promo-proof #page-top-banners img {display:block; width:min(220px, 60vw) !important; max-width:none; height:auto; aspect-ratio:515 / 485; object-fit:cover; object-position:47.2% 0;}
.promotions-page .promo-proof > figcaption {flex:1 1 200px; width:auto; max-width:none; margin:0 !important; padding:0 !important; border:0 !important; background:none !important; font-size:.9375rem !important; letter-spacing:.06em; color:var(--ink-soft) !important;}

/* Phones: both offers' name, sessions, price and payment first, stacked tightly; then each offer's gifts and pictures. */
@media (max-width:699px) {
  .promotions-page .gift-tag {display:contents;}
  .promotions-page .gift-tag + .gift-tag {margin-top:0; padding-top:0;}
  .promotions-page .gift-tag + .gift-tag::before {display:none;}
  .promotions-page .gift-tag > .tag-summary {position:relative; padding-bottom:22px;}
  .promotions-page .gift-tag + .gift-tag > .tag-summary {padding-top:26px;}
  .promotions-page .gift-tag + .gift-tag > .tag-summary::before {content:""; position:absolute; top:0; left:0; width:72px; height:7px; background:var(--cord-lines);}
  .promotions-page .gift-tag:nth-child(1) > .tag-summary {order:1;} .promotions-page .gift-tag:nth-child(2) > .tag-summary {order:2;}
  .promotions-page .gift-tag:nth-child(1) > .tag-gifts {order:3;} .promotions-page .gift-tag:nth-child(1) > .tag-pictures {order:4;}
  .promotions-page .gift-tag:nth-child(2) > .tag-gifts {order:5;} .promotions-page .gift-tag:nth-child(2) > .tag-pictures {order:6;}
  .promotions-page .gift-tag > .tag-gifts {margin-top:8px; padding-top:22px; border-top:1px solid var(--blush);}
  .tag-name p {font-size:1.375rem;}
}

@media (min-width:700px) {
  .promotions-page .gift-tag {grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:'summary pics' 'gifts pics'; grid-template-rows:auto 1fr; column-gap:64px;}
  .promotions-page .gift-tag > .tag-pictures {margin-top:0; max-width:400px;}
  .tag-head h2 {font-size:1rem !important; letter-spacing:.2em !important;}
  .tag-name p {letter-spacing:.12em;}
  .tag-spec dt, .tag-gifts .promo-gift, .tag-gifts > p {font-size:.9375rem;}
  .tag-spec dd {font-size:1.375rem;}
}

/* ---------------------------------------------------------------- products and membership */
.display-page .shop-card {width:min(1176px, 100% - 48px); margin:40px auto 32px; padding:0; box-sizing:border-box;}
.shop-visual {background-repeat:no-repeat; background-color:var(--sky);}
/* The empty-shelf notice is a small muted note after the main content, not a heading. */
.display-page .shop-card .shelf-tag {display:block; max-width:none; margin:20px 0 0; padding:0; border:0; background:none; font-size:.8125rem !important; font-weight:400 !important; letter-spacing:.06em; line-height:1.6; color:var(--ink-soft) !important; opacity:.85;}
.display-page .shop-card .shelf-tag::before {display:none !important;}

/* Products: the words and the bottles photograph are one block; the empty line sits small beneath it. */
.product-card {display:grid; grid-template-columns:minmax(0,1fr); gap:28px 0;}
.product-card > .shop-title {margin-bottom:0 !important;}
.product-block {display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:start;}
.product-block .shop-visual {order:-1; aspect-ratio:16 / 9; background-size:cover; background-position:82% 40%;}
.product-card .shelf-tag {margin-top:-8px;}
.product-card .shop-card-copy h2 {position:relative; margin:0 0 16px; padding-top:18px; font-size:1.25rem; font-weight:400; letter-spacing:.12em; color:var(--cyan-ink);}
.product-card .shop-card-copy h2::before {content:""; position:absolute; top:0; left:0; width:40px; height:7px; background:var(--cord-lines);}
.product-card .shop-card-copy p {max-width:26em; margin:0; font-size:1rem; letter-spacing:.02em; line-height:1.7; color:var(--ink);}

/* Membership: benefits, then the photograph with the member gift card, then the small print, then the empty line. */
.member-layout {display:grid; grid-template-columns:minmax(0,1fr); gap:32px;}
.member-copy > p {max-width:30em; margin:0 0 18px; font-size:1rem; letter-spacing:.02em; line-height:1.8; color:var(--ink);}
/* The free treatment leads; the birthday benefit follows as its own line. */
.member-copy > p:first-child {position:relative; margin-bottom:0; padding-top:22px; --c1:var(--coral); --c2:var(--pink);}
.member-copy > p:first-child::before {content:""; position:absolute; top:0; left:0; width:52px; height:7px; background:linear-gradient(var(--coral),var(--coral)) 0 0/100% 1px no-repeat, linear-gradient(var(--pink),var(--pink)) 0 3px/100% 1px no-repeat, linear-gradient(var(--coral),var(--coral)) 0 6px/100% 1px no-repeat;}
.member-copy > p:first-child > span {display:block;}
.member-copy > p:first-child > span:first-child {font-size:1.125rem; font-weight:500; line-height:1.75;}
.member-copy > p:first-child > span + span {margin-top:12px;}
.member-copy > p span {color:inherit !important; font-family:inherit !important; font-size:inherit !important;}
.member-notes > .member-fine {max-width:30em; margin:0; font-size:.875rem; letter-spacing:.06em; line-height:1.9; color:var(--ink-soft);}
.member-notes > .member-fine span {display:block;}
.member-stage {display:grid; grid-template-columns:minmax(0,1fr);}
.member-stage .shop-photo {grid-area:1 / 1; display:block; width:100%; height:280px; object-fit:cover; object-position:71% 0; background:var(--sky);}
.fansclub-page .member-stage .member-card {position:relative; grid-area:2 / 1; justify-self:center; width:calc(100% - 32px); min-width:0; margin:-28px 0 0 !important; padding:20px 20px 16px; overflow:visible; border:1px solid var(--pink) !important; border-radius:2px !important; background:var(--paper); box-shadow:0 12px 26px -20px rgba(28,42,50,.45) !important;}
.member-card-face {display:grid; grid-template-columns:84px minmax(0,1fr); gap:16px; align-items:center;}
.member-card-face img {grid-column:1; grid-row:1; display:block; width:84px; height:auto;}
.member-card-face h2 {grid-column:2; grid-row:1;}
.fansclub-page .member-card h2 {margin:0; padding:0; font-size:1.0625rem !important; font-weight:400; letter-spacing:.12em; line-height:1.6; color:var(--ink);}
.fansclub-page .member-card figcaption {margin:14px 0 0 !important; padding:10px 0 0 !important; border:0 !important; border-top:1px solid var(--pink) !important; background:none !important; font-size:.75rem !important; letter-spacing:.2em; color:var(--coral-ink) !important;}
.member-layout > .shop-title {margin-bottom:-8px !important;}
.member-notes .shelf-tag {justify-self:start; margin-top:20px;}

@media (min-width:1000px) {
  /* Products: words on the left, the bottles photograph on the right, as one block. */
  .product-card {margin-top:56px; gap:32px 0;}
  .product-block {grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:0 56px; align-items:start;}
  .product-block .shop-visual {order:0; aspect-ratio:auto; min-height:420px; background-position:80% 50%;}
  .product-card .shelf-tag {margin-top:0;}

  /* Membership: benefits and photograph side by side directly under the heading, tops aligned. */
  .member-layout {grid-template-columns:minmax(0,5fr) minmax(0,6fr); grid-template-rows:auto auto 1fr; column-gap:64px; row-gap:0; align-items:start; margin-top:56px;}
  .member-layout > .shop-title {grid-column:1 / -1; margin-bottom:36px !important;}
  .member-copy {grid-column:1; grid-row:2;}
  .member-stage {grid-column:2; grid-row:2 / span 2;}
  .member-notes {grid-column:1; grid-row:3; margin-top:32px;}
  .member-stage .shop-photo {height:360px; object-position:71% 0;}
  .fansclub-page .member-stage .member-card {grid-area:2 / 1; justify-self:end; width:min(380px, 88%); margin:-48px 24px 0 0 !important;}
}
