/* HEBÉA product page — the whole of assets/css/product.css without the mock-up's stand-ins, generated by wp/tools/build_pdp.py (the single source is assets/css/product.css) */
/* HEBÉA single product page — v2 "Couture" (Ivo, 3.11.2026: "more Dior"): Rose Gold Oil / Rose Gold Nectar, the Nectar palette (light, tone dawn).
   Shares assets/css/site.css with the homepage (tokens, fonts, buttons, the bar, the mega menu, the dock, the product cards, the quick look,
   the footer); this file holds only what the product page adds. What makes it couture, measured against dior.com's own product page (3.11):
   the photograph leads (the full height of the screen, edge to edge), the buy column is narrow, centred and quiet (the name ~2.3rem, not 3.9),
   the price lives in the button, the express buttons are monochrome, the sections below are editorial (centred statements, one large picture
   each, hairlines, no cards), and the page uses four type sizes. The animations are always on (Ivo, the live rule): product.html carries
   html.motion-on, product.js lifts HB.env.reduce. v1 is frozen as product-v1.html. */

:root{
  --pdp-line:rgb(143 98 70 / .2); --pdp-photo:#f8ede8; --pdp-narrow:44rem;
  --pdp-step:70svh;      /* desktop: the scroll that carries one photograph to the next (the homepage hero's walk on phones: 70svh a panel) */
  --pdp-air:clamp(5rem,13vh,9rem);                                             /* the space between two sections */
  --t-display:300 clamp(2rem,1.62rem + 1.05vw,2.55rem)/1.12 var(--display);   /* the name, every section title */
  --t-serif:300 1.2rem/1.62 var(--display);                                     /* the story, the steps, the summaries, the qualities */
  --t-text:400 .95rem/1.7 var(--body);                                          /* the sentences */
  --t-label:500 .66rem/1.3 var(--body);                                         /* the labels, in capitals */
  interpolate-size:allow-keywords;
}
body.pdp{--page-bg:var(--navy)}
.pdp main{background:var(--ivory);color:var(--ink)}
.pdp main a:hover{color:var(--gold-deep)}
.pdp .eyebrow{font:var(--t-label);letter-spacing:.24em;color:var(--gold-deep);margin:0 0 1.25rem}
.pdp-h2{font:var(--t-display);color:var(--navy);margin:0;text-wrap:balance}
.pdp-sec{padding:var(--pdp-air) var(--gutter)}
.pdp-narrow{max-width:var(--pdp-narrow);margin:0 auto;text-align:center}
.buy__what,.story__text,.qualities__d,.steps__t,.oils__role,.acc__body p,.review__text,.buy__ship{text-wrap:pretty}

/* ---------- the bar, option "light": navy marks over a light top, no band (the photograph runs under it) ---------- */
.nav[data-bar="light"] .nav__bar{background:transparent}
.nav[data-bar="light"] .nav__link{color:var(--navy)}
.nav[data-bar="light"] .nav__link:hover{color:var(--gold-deep)}
.nav[data-bar="light"] .nav__link::after{background:var(--gold-deep)}
.nav[data-bar="light"] .ico{stroke:var(--gold-deep)}
.nav[data-bar="light"] .nav__count{border-color:var(--gold-deep);color:var(--gold-deep)}
.nav[data-bar="light"] .nav__burger span{background:var(--navy)}
.nav[data-bar="light"].is-open .nav__bar{background:rgb(var(--navy-rgb) / .96)}
.nav[data-bar="light"].is-open .nav__link{color:var(--ivory)}
.nav[data-bar="light"].is-open .nav__link:hover{color:var(--gold-hover)}
.nav[data-bar="light"].is-open .nav__link::after{background:var(--gold)}
.nav[data-bar="light"].is-open .ico{stroke:var(--gold)}
.nav[data-bar="light"].is-open .nav__count{border-color:var(--gold);color:var(--gold)}
.nav[data-bar="light"].is-open .nav__burger span{background:var(--ivory)}

/* ---------- the first screen: the photographs ---------- */
.gallery{position:relative;background:var(--pdp-photo)}
.gallery__view{position:relative}
.gallery__track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;outline-offset:-3px}
.gallery__track::-webkit-scrollbar{display:none}
.gallery__slide{position:relative;flex:0 0 100%;aspect-ratio:4/5;margin:0;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;background:var(--pdp-photo)}
.gallery__open{display:block;width:100%;height:100%;cursor:zoom-in}
.gallery__open:focus-visible{outline-offset:-3px}
.gallery__slide picture,.gallery__slide img{display:block;width:100%;height:100%;object-fit:cover}
.gallery__slide img{transform:scale(1.03);transition:transform 1.6s var(--ease-out)}
.gallery__slide.is-on img{transform:none}   /* the photo in view settles (the homepage's still language, r38: kept by Ivo for its life) */
.gallery__slide--mood img{object-position:50% 40%}
.gallery__hint{position:absolute;right:var(--gutter);bottom:.6rem;width:2.25rem;height:2.25rem;display:grid;place-items:center;pointer-events:none;opacity:.85;transition:opacity .4s}
.gallery__hint svg{width:1.05rem;height:1.05rem;fill:none;stroke:var(--navy);stroke-width:1.4;stroke-linecap:round}
.gallery[data-on="2"] .gallery__hint svg{stroke:var(--ivory)}
/* the bars under the photographs (Ivo, 3.11): one per photo; the dark part travels with the photo in view — a finger, the scroll or a click
   (product.js writes --f, the fill, and --o, the side it grows from); without the script the current one is full */
.gallery__bars{display:flex;justify-content:center;padding:.125rem 0 0}
.gallery__bars button{width:2.75rem;height:2.75rem;display:grid;place-items:center}   /* 44 px for a finger; the bar inside is 2rem */
.gallery__bars button span{position:relative;display:block;width:2rem;height:2px;overflow:hidden;background:rgb(var(--navy-rgb) / .16);transition:background .3s}
.gallery__bars button span::after{content:"";position:absolute;inset:0;background:var(--navy);transform:scaleX(var(--f,0));transform-origin:var(--o,0 50%)}
.gallery__bars button[aria-current="true"] span{--f:1}
.gallery__bars button:hover span{background:rgb(var(--navy-rgb) / .32)}
/* the rail (v3.1, Ivo 3.11: "останалите като thumbnails вляво — максимално дизайнерско"): a desktop shows the photos after the second as thumbnails
   in a column of their own at the left, numbered on from the bars (03 …) — a 4:5 window, a frame that unfolds from its corner, the photo leaning in,
   the full screen on a click; a phone keeps every photo under the finger */
.gallery__thumbs{display:none}
.gallery__thumb{position:relative;display:flex;flex-direction:column;align-items:center;gap:.7rem;width:4.75rem;cursor:zoom-in;color:var(--ink-2)}
.gallery__thumb-img{position:relative;display:block;width:100%}
.gallery__thumb-img picture{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--pdp-photo);box-shadow:0 1rem 1.75rem -1.1rem rgb(var(--navy-rgb) / .45)}
.gallery__thumb-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform 1.3s var(--ease-out)}
.gallery__thumb-img::after{content:"";position:absolute;inset:-.3rem;border:1px solid var(--gold-deep);clip-path:inset(0 100% 100% 0);transition:clip-path .75s var(--ease-out);pointer-events:none}
.gallery__thumb:hover .gallery__thumb-img::after,.gallery__thumb:focus-visible .gallery__thumb-img::after{clip-path:inset(0)}
.gallery__thumb:hover img,.gallery__thumb:focus-visible img{transform:scale(1.09)}
.gallery__thumb-n{font:300 1rem/1 var(--display);letter-spacing:.06em;transition:color .4s}   /* ink-2 on the blush: gold-deep there is 4.4:1 */
.gallery__thumb:hover .gallery__thumb-n{color:var(--navy)}
.pdp main .gallery__thumb:hover{color:var(--ink-2)}

/* ---------- the buy column: narrow, centred, quiet ---------- */
.buy__col{position:relative;padding:1.375rem var(--gutter) 0}
.buy__box{max-width:24rem;margin:0 auto;text-align:center}
.buy__eyebrow a{color:inherit;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px;display:inline-block;padding:1.5em 0;margin:-1.5em 0}   /* the line's link replaces the breadcrumb (the JSON-LD keeps it) */
.buy__title{font:var(--t-display);color:var(--navy);margin:0 0 .35rem;text-wrap:balance}
.buy__legend{font:400 1.2rem/1.3 var(--display);font-style:italic;color:var(--gold-deep);margin:0 0 1.15rem}   /* v3 (Ivo, 3.11): under the name — small caps, the name, the italic: small, large, small */
.buy__what{font:var(--t-text);color:var(--ink-2);margin:0 auto 1.4rem;max-width:23rem}
.buy__size{font:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--navy);margin:0 0 .55rem}
.buy__facts{display:flex;flex-wrap:wrap;justify-content:center;font:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 2rem}
.buy__facts li + li::before{content:"·" / "";margin:0 .6em}
.cart{margin:0}
.cta--navy{background:var(--navy-3);color:var(--ivory);border-color:var(--navy-3);-webkit-backdrop-filter:none;backdrop-filter:none}
.cta--navy:hover,.pdp main .cta--navy:hover{background:var(--navy);color:var(--gold);border-color:var(--navy-3)}   /* r59: every button hovers navy / gold with the comet in its frame */
.cart__add{width:100%;min-width:0;min-height:3.375rem;transition:background .3s,color .3s,border-color .3s,opacity .35s var(--ease),visibility 0s linear 0s}
html.pill-below .cart__add{opacity:0;visibility:hidden;transition:background .3s,color .3s,border-color .3s,opacity .35s var(--ease),visibility 0s linear .35s}   /* the pill carries it while the button sits at or under the screen's foot (no navy sliver under the pill) */
.cart__sep{width:1px;height:1.1em;background:currentColor;opacity:.4}
.cart__price{font-variant-numeric:tabular-nums}
.cart__done{display:none}
.cart__add.is-added .cart__label,.cart__add.is-added .cart__sep,.cart__add.is-added .cart__price{display:none}
.cart__add.is-added .cart__done{display:inline}

/* express checkout — the plugin's own buttons, measured on the live page (3.11.2026): PayPal Payments 4.1.3's Web SDK v6 stacks <paypal-button
   class="paypal-gold"> and Google Pay's button.gpay-button (black) in #ppc-button-ppcp-gateway-v6, both 48 px pills; Safari adds Apple Pay. Their
   colours stay the plugin's (Ivo, 3.11: three buttons that look alike would not tell themselves apart). One row, always two (Ivo, 3.11): where
   Apple Pay shows it takes PayPal's place — Apple Pay + Google Pay; elsewhere PayPal + Google Pay; with no Google Pay PayPal stays beside Apple Pay */
.express{margin:1.25rem 0 0}
.express__label{display:flex;align-items:center;gap:1rem;font:var(--t-label);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);margin:0 0 .8rem}
.express__label::before,.express__label::after{content:"";flex:1;height:1px;background:var(--pdp-line)}
.ppc-button-wrapper #ppc-button-ppcp-gateway-v6{display:flex;flex-direction:row;gap:.5rem}
#ppc-button-ppcp-gateway-v6 > *{flex:1 1 0;min-width:0;margin:0}
.ppc-button-wrapper:has(apple-pay-button):has(.gpay-button) paypal-button{display:none}
#ppc-button-ppcp-gateway-v6 > :has(apple-pay-button){order:-1}
.buy__ship{margin:1.5rem 0 0;font:400 .8rem/1.65 var(--body);color:var(--ink-2)}
.buy__ship a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:.2em;display:inline-block;padding:1em 0;margin:-1em 0}   /* a 46 px target, the line unmoved */

/* WooCommerce's notices (v3, Ivo: "дизайнерски — Awwwards + Couture + Dior"): woocommerce_before_single_product prints .woocommerce-notices-wrapper
   at the top of the buy box — WooCommerce's own markup (.woocommerce-message with its "View cart" a.button first, ul.woocommerce-error, .woocommerce-info),
   styled as one quiet line between hairlines: a mark in a thin ring (the check for "added", an "i", a garnet "!" for an error), the sentence, the
   action as the page's underlined label; it unfolds as the page opens and folds away when dismissed (product.js adds the ×) */
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-notices-wrapper{margin:0 0 1.9rem}
.woocommerce-message,.woocommerce-info,.woocommerce-error{--n:var(--gold-deep);position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35rem .7rem;margin:0;padding:1rem 2.75rem;
  list-style:none;border-top:1px solid var(--pdp-line);border-bottom:1px solid var(--pdp-line);font:400 .9rem/1.55 var(--body);color:var(--navy);text-align:center;text-wrap:pretty;
  animation:pdpNotice .8s var(--ease-out) both;transition:opacity .35s var(--ease),height .5s var(--ease),padding .5s var(--ease),border-width .5s step-end}
.woocommerce-error{--n:#9b2c3a;flex-direction:column;gap:.3rem}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{content:"";flex:0 0 auto;width:1.5rem;height:1.5rem;border:1px solid var(--n);border-radius:50%;background:var(--mark) center/64% no-repeat}
.woocommerce-message{--mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%238f6246' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.woocommerce-info{--mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 10.5v7M12 6.6v.2' fill='none' stroke='%238f6246' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}
.woocommerce-error{--mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6.5v7M12 17.4v.2' fill='none' stroke='%239b2c3a' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}
.woocommerce-error li{display:block}
.woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{order:2;display:inline-block;padding:.9em 0;margin:-.9em 0;font:var(--t-label);letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:1px}
.woocommerce-notices-wrapper a:not(.button){color:var(--gold-deep);text-decoration:underline;text-underline-offset:.2em}
.notice__close{position:absolute;right:0;top:50%;width:2.75rem;height:2.75rem;margin-top:-1.375rem;display:grid;place-items:center;border-radius:50%;color:var(--ink-2);transition:color .3s}
.notice__close:hover{color:var(--navy)}
.notice__close svg{width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.woocommerce-notices-wrapper .is-gone{opacity:0;height:0;padding-block:0;border-width:0;overflow:hidden}
@keyframes pdpNotice{from{opacity:0;transform:translateY(-.5rem)}}

/* ---------- the buy pill: the dock's shape at the bottom (product.js: whenever Add to Cart is not on screen) ---------- */
.buypill{position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:48;display:flex;align-items:center;gap:1.5rem;padding:.375rem .375rem .375rem 1.6rem;
  background:rgb(var(--navy-rgb) / .97);color:var(--ivory);border-radius:3rem;box-shadow:0 1.25rem 2.75rem -1rem rgb(var(--navy-rgb) / .55);
  outline:1px solid rgb(214 171 145 / .3);outline-offset:-1px;   /* a gold hairline: the pill keeps its edge over the navy legend (the Xiaomi, 3.11) */
  transform:translate(-50%,calc(100% + 2rem));opacity:0;transition:transform .6s var(--ease),opacity .45s var(--ease)}
.buypill.is-on{transform:translate(-50%,0);opacity:1}
html.menu-open .buypill,html.zoom-open .buypill{transform:translate(-50%,calc(100% + 2rem));opacity:0}
.buypill__txt{display:flex;align-items:baseline;gap:.9rem;white-space:nowrap}
.buypill__name{font:400 1.05rem/1.2 var(--display)}
.buypill__price{font:500 .85rem/1 var(--body);color:var(--gold);font-variant-numeric:tabular-nums}
.buypill .cta{min-width:9.5rem;min-height:2.75rem;padding:.8em 1.6em;border-radius:3rem;border-color:var(--gold);font-size:.72rem}
/* v3 (Ivo, 3.11): the pill answers its own tap — "Added" with a check for 2.4 s (on a phone the cart count sits hidden under the dock) */
.buypill__done{display:none;align-items:center;gap:.45em}
.buypill__done svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.buypill.is-added .buypill__label{display:none}
.buypill.is-added .buypill__done{display:inline-flex;animation:pdpPop .45s var(--ease-out)}
@keyframes pdpPop{from{opacity:0;transform:scale(.85)}}
html.sheet-open .buypill{transform:translate(-50%,calc(100% + 2rem));opacity:0}
@media (hover:none){.pdp .cta--solid:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}.pdp .cta--navy:hover,.pdp main .cta--navy:hover{background:var(--navy-3);color:var(--ivory);border-color:var(--navy-3)}.pdp .cta--line:hover{background:none;color:var(--gold-deep);border-color:var(--gold-deep)}}


/* the full-screen photo (native <dialog>: Esc closes, the focus comes back to the photo) */
.zoom{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--pdp-photo);color:var(--navy);opacity:0;transition:opacity .35s var(--ease),display .35s allow-discrete,overlay .35s allow-discrete}
.zoom[open]{opacity:1}
@starting-style{.zoom[open]{opacity:0}}
.zoom::backdrop{background:var(--pdp-photo)}
.zoom__img{position:absolute;inset:4.5rem 0;display:flex;align-items:center;justify-content:center}
.zoom__img picture{display:contents}
.zoom__img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}   /* v3.1: the whole photo inside the screen (v2's 100 % of a grid's auto row let a 1360 px photo run off it); a tap beside it closes */
.zoom__close,.zoom__prev,.zoom__next{position:absolute;width:3rem;height:3rem;display:grid;place-items:center;border-radius:50%;background:rgb(247 238 233 / .85);border:1px solid var(--pdp-line);transition:background .3s,border-color .3s}
.zoom__close:hover,.zoom__prev:hover,.zoom__next:hover{background:var(--navy);border-color:var(--navy-3)}
.zoom__close:hover .ico,.zoom__prev:hover .ico,.zoom__next:hover .ico{stroke:var(--gold)}
.zoom .ico{stroke:var(--navy)}
.zoom__close{top:calc(1rem + env(safe-area-inset-top));right:var(--gutter)}
.zoom__prev,.zoom__next{top:50%;margin-top:-1.5rem}
.zoom__prev{left:var(--gutter)}.zoom__next{right:var(--gutter)}
.zoom__count{position:absolute;left:0;right:0;bottom:calc(1.25rem + env(safe-area-inset-bottom));text-align:center;font:var(--t-label);letter-spacing:.22em;color:var(--ink-2)}
html.zoom-open,html.zoom-open body{overflow:hidden}

/* ---------- the cart sheet (v3, Ivo: "допада ми като идея — нека го видя на живо"): after Add to Cart the page stays and the sheet answers —
   a native modal <dialog> (Esc and the veil close it, the focus stays inside and comes back to the button), from the right on a desktop,
   from the bottom on a phone; the item, the subtotal, Checkout first, the cart second ---------- */
.sheet{position:fixed;inset:0 0 0 auto;width:min(27rem,100vw);height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;border-left:1px solid var(--pdp-line);overflow:auto;
  background:var(--ivory);color:var(--ink);box-shadow:-1.5rem 0 3.5rem -1rem rgb(var(--navy-rgb) / .3);overscroll-behavior:contain;
  transform:translateX(100%);transition:transform .65s var(--ease-out),display .65s allow-discrete,overlay .65s allow-discrete}
.sheet[open]{transform:none}
@starting-style{.sheet[open]{transform:translateX(100%)}}
.sheet::backdrop{background:rgb(var(--navy-rgb) / 0);transition:background .65s var(--ease),display .65s allow-discrete,overlay .65s allow-discrete}
.sheet[open]::backdrop{background:rgb(var(--navy-rgb) / .4)}
@starting-style{.sheet[open]::backdrop{background:rgb(var(--navy-rgb) / 0)}}
.sheet__in{position:relative;display:flex;flex-direction:column;min-height:100%;padding:2rem 2.25rem calc(1.5rem + env(safe-area-inset-bottom))}
.sheet__label{display:flex;align-items:center;gap:.7rem;min-height:2.75rem;margin:0 0 2.25rem;padding-right:3rem;font:var(--t-label);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
.sheet__label svg{flex:0 0 auto;width:1.5rem;height:1.5rem;padding:.25rem;border:1px solid currentColor;border-radius:50%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sheet[open] .sheet__label svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:pdpTick .7s var(--ease-out) .35s forwards}   /* the check draws itself as the sheet arrives */
@keyframes pdpTick{to{stroke-dashoffset:0}}
.sheet__close{position:absolute;top:2rem;right:1.5rem;width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:50%;transition:background .3s}
.sheet__close:hover{background:rgb(var(--navy-rgb) / .06)}
.sheet__close .ico{stroke:var(--navy)}
.sheet__item{display:grid;grid-template-columns:5.5rem minmax(0,1fr) auto;gap:1.25rem;align-items:center;padding:0 0 1.6rem;border-bottom:1px solid var(--pdp-line)}
.sheet__img{aspect-ratio:1;overflow:hidden;background:var(--pdp-photo)}
.sheet__img img{width:100%;height:100%;object-fit:cover}
.sheet__name{font:300 1.4rem/1.15 var(--display);color:var(--navy);margin:0}
.sheet__legend{font:400 1rem/1.3 var(--display);font-style:italic;color:var(--gold-deep);margin:.2rem 0 .5rem}
.sheet__size{font:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin:0}
.sheet__price{align-self:start;margin:.2rem 0 0;font:500 .95rem/1 var(--body);font-variant-numeric:tabular-nums;color:var(--navy)}
.sheet__total{display:flex;justify-content:space-between;align-items:baseline;margin:1.3rem 0 1.9rem;font:400 .88rem/1.4 var(--body);color:var(--ink-2)}
/* the free-delivery line under the subtotal (Cart & Checkout Stage 1, 5.11.2026 — Ivo: „в количката и в листа“, „Трябва да е динамично“): the
   threshold is the sheet's data-free-from (the port prints WooCommerce's free_shipping min_amount; none → no line) */
.sheet__free{display:flex;align-items:center;gap:.55rem;margin:-1.3rem 0 1.6rem;font:400 .8rem/1.45 var(--body);color:var(--ink-2)}
.sheet__free b{font-weight:500;color:var(--navy);font-variant-numeric:tabular-nums}
.sheet__free svg{flex:0 0 auto;width:1.3rem;height:1.3rem;padding:.2rem;border:1px solid var(--gold-deep);border-radius:50%;fill:none;stroke:var(--gold-deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sheet__free:not(.is-free) svg{display:none}
.sheet__free.is-free{color:var(--gold-deep)}
.sheet__free[hidden]{display:none}
.sheet__sum{font:500 1.05rem/1 var(--body);font-variant-numeric:tabular-nums;color:var(--navy)}
.sheet__actions{display:grid;gap:.65rem}
.sheet__actions .cta{width:100%;min-width:0}
.sheet__note{margin:1.4rem 0 0;font:400 .8rem/1.6 var(--body);color:var(--ink-2);text-align:center}
.sheet__continue{display:block;min-height:2.75rem;margin:.6rem auto 0;padding:.75rem 0 0;font:var(--t-label);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:1px}
html.sheet-open,html.sheet-open body{overflow:hidden}

/* ---------- the legend: navy, edge to edge, with air above it (Ivo, 3.11) ---------- */
.story{display:grid;grid-template-columns:minmax(0,1fr);margin-top:var(--pdp-air);background:var(--navy);color:var(--ivory)}
.story__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--navy-2)}
.story__media picture,.story__media img,.story__clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.story__media img{transform:scale(1.04);transition:transform 1.8s var(--ease-out)}
.story.is-in .story__media img{transform:none}
.story__clip{opacity:0;transition:opacity 1.2s var(--ease)}
.story__clip.is-playing{opacity:1}
.story__body{padding:clamp(3.5rem,9vh,5rem) var(--gutter) clamp(4rem,10vh,5.5rem);text-align:center}
.story .eyebrow{color:var(--gold)}
.story__title{font:var(--t-display);color:var(--ivory);margin:0 0 1.75rem}
.story__text{font:var(--t-serif);font-size:clamp(1.15rem,1.05rem + .3vw,1.3rem);max-width:29rem;margin:0 auto;color:var(--ivory)}

/* ---------- what it does: one sentence, four qualities between hairlines ---------- */
/* v3: every row holds any count (the other 24 products have 2–4 qualities, 1–3 steps, 3–4 cards): the items keep their width and the row centres */
.qualities{list-style:none;margin:clamp(3rem,7vh,4.5rem) auto 0;padding:0;max-width:74rem;display:flex;flex-wrap:wrap;justify-content:center}
.qualities li{flex:0 0 50%;padding:1.75rem 1rem;text-align:center;border-top:1px solid var(--pdp-line)}
.qualities li:nth-child(odd):not(:last-child){border-right:1px solid var(--pdp-line)}
.qualities__t{font:300 1.35rem/1.2 var(--display);color:var(--navy);margin:0 0 .65rem}
.qualities__d{font:400 .85rem/1.6 var(--body);color:var(--ink-2);max-width:14rem;margin:0 auto}

/* ---------- the ritual: the dusk drop that becomes the medallion as the page moves (scrub.js, data-svs-pass: no pin), three steps ---------- */
.ritual__media{margin:clamp(2.75rem,7vh,4.5rem) auto 0;width:min(100%,30rem);aspect-ratio:4/5;overflow:hidden;background:var(--navy-2)}
.ritual__media.svs,.ritual__media.svs.is-static{height:auto}   /* site.css gives a chapter its scroll length; this one is a 4:5 frame in the flow */
.svs--pass .svs__stage{position:absolute;inset:0;height:auto}
.svs--pass .svs__loader{display:none}   /* the still is there all the while: no spinner over it */
.steps{list-style:none;margin:clamp(2.75rem,7vh,4.5rem) auto 0;padding:0;max-width:66rem;display:flex;flex-direction:column;align-items:center;gap:2.25rem}
.steps li{text-align:center}
.steps__n{display:block;font:300 2.5rem/1 var(--display);color:var(--gold-deep);margin:0 0 .8rem}
.steps__t{display:block;font:var(--t-serif);color:var(--navy);max-width:16rem;margin:0 auto}
.ritual__tip{margin:clamp(2.75rem,7vh,4rem) auto 0;max-width:28rem;text-align:center;font:400 1.1rem/1.55 var(--display);font-style:italic;color:var(--ink-2)}

/* ---------- inside the bottle: the rose in its oil, the six oils ---------- */
.inside__inner{max-width:76rem;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:3.25rem;align-items:center}
.inside__media{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--navy-2)}
.inside__media img{width:100%;height:100%;object-fit:cover;object-position:50% 36%;transform:scale(1.04);transition:transform 1.8s var(--ease-out)}
.inside.is-in .inside__media img{transform:none}
.inside__body{text-align:center}
.oils{list-style:none;margin:2.5rem auto 0;padding:0;max-width:27rem}
.oils li{padding:1.05rem 0;border-top:1px solid var(--pdp-line)}
.oils li:last-child{border-bottom:1px solid var(--pdp-line)}
.oils__name{display:block;font:300 1.3rem/1.25 var(--display);color:var(--navy)}
.oils__name i{font-size:.82em;color:var(--gold-deep);margin-left:.3em}
.oils__role{display:block;font:400 .86rem/1.6 var(--body);color:var(--ink-2);margin-top:.2rem}
.inside__more{margin:1.75rem 0 0;font:var(--t-label);letter-spacing:.22em;text-transform:uppercase}
.inside__more a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:1px;display:inline-block;padding:1.5em 0;margin:-1.5em 0}   /* 45 px for a finger */

/* ---------- good to know: one quiet column of answers ---------- */
.know__title{margin-bottom:2rem}
.acc{border-top:1px solid var(--pdp-line);text-align:left}
.acc details{border-bottom:1px solid var(--pdp-line)}
.acc details::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
.acc details[open]::details-content{block-size:auto}
.acc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.75rem;padding:.9rem 0;cursor:pointer;font:var(--t-serif);color:var(--navy);transition:color .3s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--gold-deep)}
.acc summary::after{content:"";flex:0 0 .7rem;height:.7rem;background:linear-gradient(var(--gold-deep),var(--gold-deep)) center/100% 1px no-repeat,linear-gradient(var(--gold-deep),var(--gold-deep)) center/1px 100% no-repeat;transition:transform .45s var(--ease)}
.acc details[open] summary::after{transform:rotate(135deg)}
.acc__body{padding:0 0 1.4rem;font:var(--t-text);color:var(--ink-2)}
.acc__body p + p{margin-top:.75em}
.acc__body a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:.2em}
.acc__body dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.5rem;margin:0}
.acc__body dt{font-weight:500;color:var(--navy)}
.acc__body dd{margin:0}
.reviews__score{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.9rem;margin:1.75rem 0 0}
.reviews__avg{font:300 3rem/1 var(--display);color:var(--navy)}
.reviews__count{font:400 .85rem/1.4 var(--body);color:var(--ink-2)}
.stars{display:inline-flex;gap:.2rem}
.stars svg{width:.9rem;height:.9rem;fill:var(--gold-deep)}
.stars svg.is-off{fill:none;stroke:var(--gold-deep);stroke-width:1.2}
.reviews__list{list-style:none;margin:2.75rem 0 0;padding:0;text-align:left;border-top:1px solid var(--pdp-line)}
.review{display:grid;gap:.7rem;padding:2rem 0;border-bottom:1px solid var(--pdp-line)}
.review__title{font:400 1.25rem/1.25 var(--display);color:var(--navy);margin:0}
.review__text{font:var(--t-text);color:var(--ink-2)}
.review__by{font:400 .8rem/1.4 var(--body);color:var(--ink-2)}
.review__by b{font-weight:500;color:var(--navy)}
.review__ok{color:var(--gold-deep)}
.reviews__foot{margin:2.75rem 0 0}

/* ---------- more from Nectar (the homepage's product cards: legend → name → price, the box photo, the quick look on desktop) ---------- */
.more .products{max-width:76rem;margin:clamp(2.75rem,7vh,4rem) auto 0;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.more .product picture{background:var(--pdp-photo)}
.more .product__price{display:block}   /* the homepage shows the price on phones only (the quick look carries it on desktop, r35); next to a product the comparison is the point */
.more__dots{display:none;justify-content:center;gap:.625rem;margin:1.25rem 0 0}
.more__dots span{width:.375rem;height:.375rem;border-radius:50%;background:rgb(var(--navy-rgb) / .22);transition:background .3s,transform .3s}
.more__dots span.is-on{background:var(--gold-deep);transform:scale(1.35)}
.more__foot{margin:clamp(2.75rem,7vh,3.75rem) 0 0;text-align:center}
@media (min-width:900px){.buy__stage{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);height:100svh;min-height:30rem}.gallery{display:flex;flex-direction:column;min-height:0}.gallery__view{flex:1 1 auto;min-height:0}.gallery__track{height:100%}.gallery__slide{aspect-ratio:auto;height:100%}.gallery__slide:not(.gallery__slide--mood) img{object-fit:contain;   /* the square photo in a cell that may be wider than tall: whole, its four edges melting into the same blush */
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(transparent,#000 5%,#000 94%,transparent);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(transparent,#000 5%,#000 94%,transparent);mask-composite:intersect}.gallery__slide--mood img{object-position:50% 46%}.gallery__hint{display:none}.gallery__bars{flex:0 0 auto;height:4.5rem;align-items:center;padding:0}.gallery__slide:nth-child(n+3),.gallery__bars button:nth-child(n+3){display:none}.gallery:has(.gallery__thumbs){display:grid;grid-template-columns:clamp(5.75rem,7vw,7.5rem) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}.gallery:has(.gallery__thumbs) .gallery__view,.gallery:has(.gallery__thumbs) .gallery__bars{grid-column:2}.gallery__thumbs{grid-row:1 / span 2;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.75rem;padding:calc(var(--nav-h) + 3rem) 0 4.5rem;
    opacity:0;transform:translateX(-.75rem);transition:opacity 1s var(--ease) .5s,transform 1.3s var(--ease-out) .5s}html.is-loaded .gallery__thumbs{opacity:1;transform:none}.buy.is-pinned{height:calc(100svh + (var(--pdp-photos,3) - 1) * var(--pdp-step))}.buy.is-pinned .buy__stage{position:sticky;top:0}.buy.is-pinned .gallery__track{overflow:clip;scroll-snap-type:none}.buy.is-pinned .gallery__slide{transform:translate3d(calc(var(--gx,0) * -100%),0,0);will-change:transform}.buy.is-pinned .gallery__slide + .gallery__slide img{transform:none}.buy__col{display:flex;align-items:center;justify-content:center;padding:calc(var(--nav-h) + var(--nav-offset) + .5rem) clamp(3.5rem,5vw,6rem) 2rem}.buy__box{width:100%}.story{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100svh}.story__media{aspect-ratio:auto}.story__body{align-self:center;padding:7rem clamp(3rem,7vw,8rem)}.qualities{flex-wrap:nowrap}.qualities li,.qualities li:nth-child(odd):not(:last-child){flex:0 1 18.5rem;border-top:0;border-right:1px solid var(--pdp-line);padding:.75rem 1.75rem}.qualities li:last-child{border-right:0}.steps{flex-direction:row;justify-content:center;align-items:flex-start;gap:3rem}.steps li{flex:0 1 20rem}.more .products{display:flex;justify-content:center}.more .product{flex:0 1 calc((100% - 3 * .75rem) / 4)}.inside__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(3.5rem,8vw,9rem)}.reviews__list{margin-top:3rem}}

@media (min-width:900px) and (max-height:760px){.buy__col{padding-top:calc(var(--nav-h) + var(--nav-offset))}.buy__title{font-size:2rem;margin-bottom:.25rem}.buy__legend{font-size:1.05rem;margin-bottom:.85rem}.buy__what{font-size:.9rem;line-height:1.6;margin-bottom:1rem}.buy__facts{margin-bottom:1.4rem}.cart__add{min-height:3rem}.express{margin-top:.9rem}.express__label{margin-bottom:.6rem}.buy__ship{margin-top:1rem}.woocommerce-notices-wrapper{margin-bottom:1.1rem}.woocommerce-message,.woocommerce-info,.woocommerce-error{padding-block:.7rem}}

@media (max-width:899px){.buypill{left:.75rem;right:.75rem;transform:translateY(calc(100% + 2rem));justify-content:space-between;padding-left:1.4rem}.buypill.is-on{transform:none}html.menu-open .buypill,html.zoom-open .buypill,html.sheet-open .buypill{transform:translateY(calc(100% + 2rem))}.zoom__prev,.zoom__next{top:auto;bottom:calc(.75rem + env(safe-area-inset-bottom));margin-top:0}.more .products{display:flex;margin:2.25rem calc(-1 * var(--gutter)) 0;padding:0 var(--gutter)}.more__dots.has-dots{display:flex}.more .cta--line,.reviews .cta--line{display:flex}.inside__media{margin:0 calc(-1 * var(--gutter))}.ritual__media{width:auto;margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}.sheet{inset:auto 0 0 0;width:100%;height:auto;max-height:88svh;border-left:0;border-radius:1.5rem 1.5rem 0 0;box-shadow:0 -1.25rem 3rem -1rem rgb(var(--navy-rgb) / .4);transform:translateY(100%)}.sheet[open]{transform:none}@starting-style{.sheet[open]{transform:translateY(100%)}}.sheet__in{min-height:0;padding:1.4rem 1.25rem calc(1.1rem + env(safe-area-inset-bottom))}.sheet__label{margin-bottom:1.4rem}.sheet__close{top:1.4rem;right:.75rem}.sheet__item{grid-template-columns:4.5rem minmax(0,1fr) auto;gap:1rem;padding-bottom:1.3rem}.sheet__total{margin:1.1rem 0 1.4rem}.sheet__free{margin:-.85rem 0 1.25rem}.sheet__note{margin-top:1rem}.sheet__continue{margin-top:.25rem;padding-top:.75rem}}

@media (max-width:899px) and (min-width:600px){.ritual__media{width:min(100%,30rem);margin-left:auto;margin-right:auto}.inside__media{margin:0}}

@media (max-width:359px){.ppc-button-wrapper #ppc-button-ppcp-gateway-v6{flex-direction:column}#ppc-button-ppcp-gateway-v6 > *{flex:none}}
   /* two half buttons would be under Google Pay's 152 px: one above the other, each its own height */

/* ---------- the port (Stage 4): long names in the buy pill ---------- */
.buypill__txt{min-width:0;flex-wrap:wrap;row-gap:.15rem;align-content:center}
.buypill__name{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.buypill__price,.buypill .cta{flex:none}
@media (max-width:899px){.buypill.is-long .buypill__name{font-size:.9rem}.buypill.is-longer .buypill__name{font-size:.82rem}}
/* the plugin's PayPal button keeps its focus inside its own shadow tree, out of reach of the page's :focus-visible ring (measured on the
   live page, 3.11.2026: no ring on Tab) — the ring is drawn on the button itself, in navy beside PayPal's gold */
#ppc-button-ppcp-gateway-v6 paypal-button:focus-within{outline:2px solid var(--navy);outline-offset:3px;border-radius:24px}