/* Shared shop polish. One file, not eight inline <style> blocks per page.
 *
 * WHY THIS EXISTS
 * The Golden Pigmentation Duo page ended 9 Sep 2026 carrying twelve <style>
 * blocks, eight of them added that day and several with no id. Repeating that
 * on 26 product pages plus the index would be unmaintainable, and it is exactly
 * how the !important collisions on that page happened in the first place.
 *
 * MEASURED PROBLEMS ON /shop, 9 Sep 2026
 *   14 distinct text colours, the most common being #6E6350 on 72 elements
 *      against only 48 at #1F1F1F. Body copy was the washed-out one.
 *   5 of 16 sections had padding-bottom of exactly 0, which is what made the
 *      gaps read as cramped and uneven.
 *   Section rules drawn in #D9C8BD, a harsh cream, on 3 sections.
 *
 * ★ The reading measure is applied to TEXT sections only. Constraining the
 *   product grid to 790px would break the shop's whole purpose, which is
 *   showing 26 products. Grid sections keep their width deliberately.
 */

/* ── colour ─────────────────────────────────────────────────────────────── */
.shop-polish main p,
.shop-polish main li,
.shop-polish main dd,
.shop-polish main .shp-body,
.shop-polish main .spec-row .v { color: #1F1F1F; }
.shop-polish main .spec-row .k { color: #26221C; font-weight: 600; }
/* genuine de-emphasis stays de-emphasised, but readable */
.shop-polish main .text-ink-faint,
.shop-polish main .shp-note { color: #5A5347; }

/* ── rules ──────────────────────────────────────────────────────────────── */
.shop-polish main section { border-top-color: rgba(156,142,119,.35) !important;
                            border-bottom-color: rgba(156,142,119,.35) !important; }
.shop-polish main .spec-list { border-top: 1px solid rgba(156,142,119,.34); }
.shop-polish main .spec-row  { border-bottom: 1px solid rgba(156,142,119,.24);
                               padding: 18px 0; align-items: baseline; }

/* ── vertical rhythm ────────────────────────────────────────────────────── */
/* shop.html declares .shp-sec{padding:56px 20px 0}. That literal 0 is where
   every cramped gap came from; five sections shipped with no bottom padding at
   all. */
/* Five sections were shipping padding-bottom:0. Give every section a floor and
   let the ones that already declare more keep it. */
.shop-polish main > section { padding-bottom: max(var(--shop-rhythm, 4rem), 0px); }
.shop-polish main > section.shp-sec { padding-top: var(--shop-rhythm, 4rem);
                                      padding-bottom: var(--shop-rhythm, 4rem); }
@media (min-width: 1024px) { .shop-polish { --shop-rhythm: 5rem; } }

/* ── reading measure, text sections only ────────────────────────────────── */
.shop-polish main .shp-prose,
.shop-polish main .shp-sec > .shp-intro,
.shop-polish main section > div > p { max-width: 790px; }
.shop-polish main .shp-sec > div > h2 + p { max-width: 790px; }

/* ── card text a buyer actually reads ───────────────────────────────────── */
/* Of the 71 elements still at #6E6350 after the pass above, most are correct:
   eyebrows, badges and chips are meant to recede. These two are not. They are
   the value line and the link on every product card, so 48 elements of real
   reading matter were sitting at the washed-out tone. */
.shop-polish main .mlt-value-line { color: #4A443C; }
.shop-polish main .prod-detail-link { color: #26221C; }
.shop-polish main .prod-detail-link:hover { color: #6E6350; }

/* ── product media column, all product pages ────────────────────────────── */
/* Surveyed 9 Sep 2026 across 24 product pages: the media tile is 548px tall
   beside a details column averaging 1,156px, so an average of 608px of the page
   scrolled past an empty left half (enlighten-gold: 1,375px). Every tile sat on
   --mlt-panel #F7F2E9, which against a white ESK bottle at RGB(228,228,230) is
   a 1.14:1 contrast, so the product dissolved into its ground.

   shop-product.css sets both of these with !important:
     .prod-thumb-lg{background:var(--mlt-panel)!important}
     .prod-thumb-lg img{filter:none!important}
   so these rules match on specificity AND carry !important, or they are inert.
   That is not a guess; two earlier fixes on the duo were silently defeated by
   exactly this. */
.shop-polish .prod-thumb-lg {
  background: #FFFFFF !important;
  border: 1px solid #E7DECB;
}
.shop-polish .prod-thumb-lg img {
  filter: drop-shadow(0 1px 1px rgba(60,45,25,.28))
          drop-shadow(0 4px 8px rgba(60,45,25,.18))
          drop-shadow(0 18px 30px rgba(60,45,25,.16)) !important;
}
/* 16 Sep 2026: the padding and drop shadow above are for transparent cutouts.
   The gallery thumbnails only swap the hero's src, so a full-bleed photo
   (texture swatch, model shot) kept 6% padding plus the shadow and sat as a
   smaller floating square inside the frame, over the ESK tag. Every gallery
   photo matches its frame's aspect (square, or 4:5 on the duo), so it fills
   edge to edge with no crop. Keyed on src, so it follows every thumbnail click.
   The ID keeps it above the duo's .pdp-ground padding rule (0,3,1). */
.shop-polish .prod-thumb-lg #mainProdImg[src*="gallery"] {
  padding: 0 !important;
  object-fit: cover !important;
  filter: none !important;
}
.shop-polish .prod-thumb-lg .brandtag { z-index: 1; }
/* Pin the media column so it travels with the reader instead of ending early.
   Every product grid already declares align-items:flex-start, which is the
   precondition: a stretched grid item fills the row and has nothing to stick
   within. Desktop only; the columns stack on mobile. */
@media (min-width: 1024px) {
  .shop-polish:not(.pdp-duo):not(.pdp-v2) .prod-thumb-lg { position: sticky; top: 88px; }
  /* gallery rail sits under the tile and must travel with it */
  .shop-polish:not(.pdp-duo):not(.pdp-v2) .prod-thumb-lg + .prod-gallery { position: sticky; top: calc(88px + 548px + 12px); }
}

/* ── Golden Pigmentation Duo, page-specific ─────────────────────────────── */
/* Consolidated 9 Sep 2026 from ten inline <style> blocks the duo page had
   accumulated that day. Every selector is scoped to body.pdp-duo, so nothing
   here can reach another product page.
   16 Sep 2026: the Duo became the range template, so the layout rules now also
   match body.pdp-v2 (first page: Hydroxy Cleanser). :is() takes the specificity
   of its strongest argument, a single class either way, so the Duo's cascade is
   unchanged. Two rules stay Duo-only: the 4:5 frame (v2 photos are square) and
   the nth-of-type widths, which count the Duo's own sections. Parity with the inline version was
   verified by diffing 30 computed-style metrics before and after. */
:is(.pdp-duo,.pdp-v2) .mlt-acc>summary::-webkit-details-marker{display:none}
:is(.pdp-duo,.pdp-v2) .mlt-acc>summary::marker{content:""}
:is(.pdp-duo,.pdp-v2) .mlt-acc[open]>summary span[aria-hidden]{transform:rotate(45deg)}
:is(.pdp-duo,.pdp-v2) .mlt-acc>summary span[aria-hidden]{transition:transform .18s ease}
:is(.pdp-duo,.pdp-v2) .mlt-acc>summary:hover span:first-child{color:#6E6350}
@media (min-width:1024px){:is(.pdp-duo,.pdp-v2) .pdp-sticky-media{position:sticky;top:88px;}}
:is(.pdp-duo,.pdp-v2) .prod-thumb-lg.pdp-ground{background:#FFFFFF!important;border:1px solid #E7DECB;}
:is(.pdp-duo,.pdp-v2) .prod-thumb-lg.pdp-ground img{filter:none!important;padding:2%!important;}
:is(.pdp-duo,.pdp-v2) #mlt-quickfacts .spec-list{border-top:1px solid rgba(156,142,119,.34);}
:is(.pdp-duo,.pdp-v2) #mlt-quickfacts .spec-row{border-bottom:1px solid rgba(156,142,119,.24);align-items:baseline;}
:is(.pdp-duo,.pdp-v2) #mlt-quickfacts .spec-row .k{flex:0 0 148px;color:#26221C;font-weight:600;letter-spacing:.01em;font-size:13px;}
:is(.pdp-duo,.pdp-v2) #mlt-quickfacts .spec-row .v{color:#1F1F1F;font-weight:400;font-size:14px;line-height:1.65;}
:is(.pdp-duo,.pdp-v2) #mlt-quickfacts .spec-row .v strong{font-weight:600;color:#1F1F1F;}
@media (max-width:640px){:is(.pdp-duo,.pdp-v2) #mlt-quickfacts .spec-row{flex-direction:column;gap:3px;}
:is(.pdp-duo,.pdp-v2) #mlt-quickfacts .spec-row .k{flex:none;}}
:is(.pdp-duo,.pdp-v2) .pdp-band{border-top:0 !important;padding-top:clamp(3.25rem,5.5vw,4.75rem);padding-bottom:clamp(3.25rem,5.5vw,4.75rem);}
:is(.pdp-duo,.pdp-v2) .pdp-band + .pdp-band{border-top:1px solid rgba(156,142,119,.22) !important;}
:is(.pdp-duo,.pdp-v2) .pdp-band > div{max-width:790px;}
:is(.pdp-duo,.pdp-v2) .pdp-band h2{margin-top:0;margin-bottom:1.4rem;line-height:1.2;}
:is(.pdp-duo,.pdp-v2) .pdp-band > div > .eyebrow{margin-bottom:1.6rem;}
:is(.pdp-duo,.pdp-v2) .pdp-band p, :is(.pdp-duo,.pdp-v2) .pdp-band li, :is(.pdp-duo,.pdp-v2) .pdp-band .spec-row .v{color:#1F1F1F;}
:is(.pdp-duo,.pdp-v2) .pdp-band p{line-height:1.7;}
:is(.pdp-duo,.pdp-v2) .pdp-band .text-ink-faint{color:#5A5347;}
:is(.pdp-duo,.pdp-v2) #mlt-quickfacts .spec-list, :is(.pdp-duo,.pdp-v2) .pdp-band .spec-list{border-top:1px solid rgba(156,142,119,.30);}
:is(.pdp-duo,.pdp-v2) #mlt-quickfacts .spec-row, :is(.pdp-duo,.pdp-v2) .pdp-band .spec-row{padding:19px 0;border-bottom:1px solid rgba(156,142,119,.22);align-items:baseline;}
:is(.pdp-duo,.pdp-v2) .pdp-band .spec-row .k{color:#26221C;font-weight:600;}
:is(.pdp-duo,.pdp-v2) .pdp-band .mlt-acc > summary{padding:19px 0 !important;align-items:center;}
:is(.pdp-duo,.pdp-v2) .pdp-band .mlt-acc > summary > span[aria-hidden]{width:20px;text-align:center;line-height:1;}
:is(.pdp-duo,.pdp-v2) .pdp-band .mlt-acc + .mlt-acc > summary{border-top:1px solid rgba(156,142,119,.22);}
:is(.pdp-duo,.pdp-v2) .pdp-band details.mlt-acc:first-of-type > summary{border-top:1px solid rgba(156,142,119,.30);}
:is(.pdp-duo,.pdp-v2) .pdp-band .mlt-acc[open] > summary{border-bottom:0;}
:is(.pdp-duo,.pdp-v2) .pdp-band details.border-b{padding:14px 0;border-bottom:1px solid rgba(156,142,119,.22) !important;}
@media (max-width:640px){:is(.pdp-duo,.pdp-v2) .pdp-band{padding-left:1.25rem;padding-right:1.25rem;}
:is(.pdp-duo,.pdp-v2) .pdp-band .spec-row{flex-direction:column;gap:4px;padding:15px 0;}
:is(.pdp-duo,.pdp-v2) .pdp-band .spec-row .k{flex:none;}}
:is(.pdp-duo,.pdp-v2) main > section:first-of-type{padding-top:clamp(2.5rem,4vw,3.5rem);padding-bottom:clamp(3rem,4.5vw,4rem);}
:is(.pdp-duo,.pdp-v2) main > section:not(.pdp-band):not(:first-of-type){padding-top:clamp(3.25rem,5.5vw,4.75rem) !important;
  padding-bottom:clamp(3.25rem,5.5vw,4.75rem) !important;}
:is(.pdp-duo,.pdp-v2) main > section{border-top-color:rgba(156,142,119,.22) !important;}
:is(.pdp-duo,.pdp-v2) main .spec-row .v, :is(.pdp-duo,.pdp-v2) main .mlt-benefits li, :is(.pdp-duo,.pdp-v2) main .mlt-award p:not(:first-child){color:#1F1F1F !important;}
:is(.pdp-duo,.pdp-v2) main .spec-row{padding:19px 0 !important;border-bottom:1px solid rgba(156,142,119,.22) !important;}
:is(.pdp-duo,.pdp-v2) main .spec-list{border-top:1px solid rgba(156,142,119,.30) !important;}
:is(.pdp-duo,.pdp-v2) main .spec-row .k{color:#26221C !important;font-weight:600 !important;}
:is(.pdp-duo,.pdp-v2) main .text-ink-faint{color:#5A5347 !important;}
:is(.pdp-duo,.pdp-v2) main > section:first-of-type .text-ink-soft{color:#1F1F1F !important;}
.pdp-duo main > section:nth-of-type(7) > div, .pdp-duo main > section:nth-of-type(8) > div{max-width:790px;}
:is(.pdp-duo,.pdp-v2) .mlt-acc>summary{transition:background .16s ease,padding-left .16s ease;border-radius:4px;}
:is(.pdp-duo,.pdp-v2) .mlt-acc>summary:hover{background:rgba(156,142,119,.10);padding-left:8px;}
:is(.pdp-duo,.pdp-v2) .mlt-acc>summary:focus-visible{outline:2px solid #9C8E77;outline-offset:2px;}
:is(.pdp-duo,.pdp-v2) .mlt-acc[open]>summary{background:rgba(156,142,119,.07);}
:is(.pdp-duo,.pdp-v2) .mlt-acc[open]>summary span:first-child{font-weight:500;}
:is(.pdp-duo,.pdp-v2) .prod-gallery{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap;justify-content:center;}
:is(.pdp-duo,.pdp-v2) .prod-gallery button{width:62px;height:62px;border:1px solid #E4D8BE;border-radius:8px;background:#fff;
  padding:5px;cursor:pointer;flex:none;transition:border-color .15s,box-shadow .15s;}
:is(.pdp-duo,.pdp-v2) .prod-gallery button:hover{border-color:#6E6350;}
:is(.pdp-duo,.pdp-v2) .prod-gallery button img{width:100%;height:100%;object-fit:contain;}
:is(.pdp-duo,.pdp-v2) .prod-dots{display:flex;gap:7px;justify-content:center;margin-top:12px;}
:is(.pdp-duo,.pdp-v2) .prod-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(156,142,119,.45);transition:background .15s;}
:is(.pdp-duo,.pdp-v2) .prod-thumb-lg{position:relative;}
:is(.pdp-duo,.pdp-v2) .prod-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;
  border:1px solid #E7DECB;background:rgba(255,255,255,.92);color:#26221C;display:flex;align-items:center;
  justify-content:center;cursor:pointer;opacity:0;transition:opacity .18s,border-color .15s;z-index:2;}
:is(.pdp-duo,.pdp-v2) .prod-thumb-lg:hover .prod-arrow, :is(.pdp-duo,.pdp-v2) .prod-arrow:focus-visible{opacity:1;}
:is(.pdp-duo,.pdp-v2) .prod-arrow:hover{border-color:#6E6350;}
:is(.pdp-duo,.pdp-v2) .prod-arrow-prev{left:12px;}
:is(.pdp-duo,.pdp-v2) .prod-arrow-next{right:12px;}
@media (hover:none){:is(.pdp-duo,.pdp-v2) .prod-arrow{opacity:.9;}}
@media (min-width:1024px){:is(.pdp-duo,.pdp-v2) .pdp-sticky-media{display:grid;grid-template-columns:74px 1fr;gap:14px;align-items:start;}
:is(.pdp-duo,.pdp-v2) .pdp-sticky-media > .prod-thumb-lg{grid-column:2;grid-row:1;}
:is(.pdp-duo,.pdp-v2) .prod-gallery{grid-column:1;grid-row:1;flex-direction:column;margin-top:0;flex-wrap:nowrap;}
:is(.pdp-duo,.pdp-v2) .pdp-sticky-media > p{grid-column:2;}
:is(.pdp-duo,.pdp-v2) .prod-dots{display:none;}}
:is(.pdp-duo,.pdp-v2) .pdp-value{margin:0 0 14px;padding:15px 17px;background:#FFFFFF;border:1px solid #E7DECB;
  border-left:3px solid #9C8E77;border-radius:8px;}
:is(.pdp-duo,.pdp-v2) .pdp-value-lead{margin:0 0 5px;font-size:15px;line-height:1.3;color:#1F1F1F;font-weight:400;}
:is(.pdp-duo,.pdp-v2) .pdp-value-lead strong{font-weight:600;}
:is(.pdp-duo,.pdp-v2) .pdp-value-body{margin:0;font-size:12.5px;line-height:1.6;color:#4A443C;}
:is(.pdp-duo,.pdp-v2) .pdp-value-body strong{color:#1F1F1F;font-weight:600;}
.pdp-duo .prod-thumb-lg.pdp-ground{aspect-ratio:4/5 !important;}
.pdp-duo .prod-gallery button{aspect-ratio:4/5;height:auto;}
/* 16 Sep 2026: the routine subheads ("Morning", "Night", "Face and neck") carry
   text-[15px], but body.ds h3 {font-size:28px} (design system, 0,1,2) outranks
   that utility, so on the live Duo they rendered at 28px, bigger than the
   accordion title they sit under. Two classes beat it on specificity. */
:is(.pdp-duo,.pdp-v2) .mlt-acc h3{font-size:15px;line-height:1.4;font-weight:500;}