/* ═══ pdp-rail.css (v383, 18 Sep 2026) — PDP rail additions, trust row, legal/shipping accordions,
   Epos preorder state. SWARM-PLAN §A.3 / §B / §C / §D.2. Linked from every PDP after mobile.css.
   Dark studio rail is the default; html.mzlight mirrors light.css. ═══ */

/* ── §A.3 rail additions ── */
.pv-tax{font-family:'Inter',sans-serif;font-size:.6rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,240,233,.55);margin-top:-.35rem}
.pv-reveal.pv-v2 .pv-tax{position:absolute;top:4.2rem;right:0}          /* under the absolute priceline (plan said 3.2rem: that cut through the 2.2rem digits) */
.pv-buynow2{font-family:'Inter',sans-serif;width:100%;padding:.85rem 1rem;background:transparent;color:#F4F0E9;border:.0625rem solid #2A2A2A;font-weight:800;font-size:.72rem;letter-spacing:.24em;cursor:pointer;transition:border-color .2s,transform .15s}
.pv-buynow2:hover{border-color:var(--h2)} .pv-buynow2:active{transform:translateY(1px)}
.pv-deliver{display:flex;flex-direction:column;gap:.45rem;margin-top:.4rem;font-family:'Inter',sans-serif}
.pv-dl-l{font-size:.58rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,240,233,.65)}
.pv-dl-row{display:flex;gap:.5rem}
.pv-dl-in{flex:1;min-width:0;padding:.7rem .9rem;background:#0A0A0A;border:.0625rem solid #2A2A2A;color:#F4F0E9;font-family:'Inter',sans-serif;font-size:.8rem;letter-spacing:.08em}
.pv-dl-in:focus{outline:none;border-color:var(--h2)}
.pv-dl-btn{text-transform:uppercase;padding:0 1.1rem;background:#0A0A0A;color:#F4F0E9;border:.0625rem solid #2A2A2A;font-family:'Inter',sans-serif;font-size:.62rem;font-weight:800;letter-spacing:.22em;cursor:pointer;min-height:2.75rem}
.pv-dl-btn:hover{border-color:var(--h2)}
.pv-dl-out{margin:0;font-size:.74rem;line-height:1.6;color:rgba(244,240,233,.8);min-height:1.2em}
.pv-dl-out.err{color:#E07A6B}
.pv-assure{list-style:none;margin:.6rem 0 0;padding:.8rem 0 0;border-top:.0625rem solid #2A2A2A;display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.pv-assure li{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;font-family:'Inter',sans-serif;font-size:.55rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,240,233,.7);line-height:1.3}
.pv-assure svg{width:1.25rem;height:1.25rem;color:#F4F0E9;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pv-links{display:flex;align-items:center;gap:.7rem;margin-top:1rem;font-family:'Inter',sans-serif}
.pv-link{background:none;border:0;padding:0;cursor:pointer;color:rgba(244,240,233,.75);font-family:'Inter',sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border-bottom:.0625rem solid transparent}
.pv-link:hover{color:#F4F0E9;border-bottom-color:var(--h2)}
.pv-link-sep{color:rgba(244,240,233,.35)}
/* light mode */
html.mzlight .pv-reveal .pv-tax,html.mzlight .pv-reveal .pv-dl-l,html.mzlight .pv-reveal .pv-assure li,html.mzlight .pv-reveal .pv-link,html.mzlight .pv-reveal .pv-stockline,html.mzlight .pv-reveal .pv-dl-pre{color:color-mix(in srgb,var(--h2) 70%,#333)}
html.mzlight .pv-reveal .pv-buynow2{color:var(--h2);border-color:color-mix(in srgb,var(--h2) 45%,transparent)}
html.mzlight .pv-reveal .pv-dl-in,html.mzlight .pv-reveal .pv-dl-btn{background:#FFF;color:var(--h2);border-color:color-mix(in srgb,var(--h2) 45%,transparent)}
html.mzlight .pv-reveal .pv-dl-out{color:color-mix(in srgb,var(--h2) 80%,#222)}
html.mzlight .pv-reveal .pv-assure{border-top-color:color-mix(in srgb,var(--h2) 25%,transparent)}
html.mzlight .pv-reveal .pv-assure svg{color:var(--h2)}
html.mzlight .pv-reveal .pv-link-sep{color:color-mix(in srgb,var(--h2) 40%,transparent)}
@media (max-width:60rem){
  .pv-reveal.pv-v2 .pv-tax{position:static;margin-top:-.2rem}
  .pv-assure li{font-size:9.5px;letter-spacing:.08em}    /* px on purpose: root is 13px at 390 */
  .pv-reveal .pv-stockline,.pv-tax,.pv-coll{font-size:10px;letter-spacing:.18em}   /* rem put these under 8px at 390; .pv-reveal outranks the base .pv-stockline below */
  .pv-dl-btn,.pv-buynow2,.pv-link{min-height:44px}
  .pv-link{display:inline-flex;align-items:center}
  /* the page's own v380 block asks 2.75rem = 36px at the 13px root; tap targets are 44px (mobile.css law) */
  .pv-buy .pv-sizes button,.pv-buy .pv-acc-h,.pv-buy .pv-acc2-h,.pv-buy .step-btn{min-height:44px}
}
@media (prefers-reduced-motion:reduce){.pv-buynow2,.pv-dl-btn{transition:none}}

/* ── §C accordions ── */
.pv-tbc{font-style:normal;color:#C9A227;font-weight:700}
.pv-legal p{font-size:.74rem;line-height:1.75}
.pv-reveal.pv-v2 .pv-acc-inner a{color:inherit;text-decoration:underline;text-underline-offset:.2em}

/* ── §D.2 Epos preorder state — the ONE switch is body[data-stock="preorder"] ── */
.pv-stockline{font-family:'Inter',sans-serif;font-size:.58rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,240,233,.6);margin-top:.9rem}
.pv-dl-pre{margin:.7rem 0 0;font-family:'Inter',sans-serif;font-size:.74rem;line-height:1.6;color:rgba(244,240,233,.8)}
body:not([data-stock="preorder"]) .pv-stockline,
body:not([data-stock="preorder"]) .pv-dl-pre,
body:not([data-stock="preorder"]) .pv-buy .pre-form,
body:not([data-stock="preorder"]) .pv-buy .pre-done,
body:not([data-stock="preorder"]) .pv-buy .pre-wait,
body:not([data-stock="preorder"]) .cta-pre{display:none}
body[data-stock="preorder"] .pv-reveal .pv-stepper,
body[data-stock="preorder"] .pv-buynow2,
body[data-stock="preorder"] .pv-deliver,
body[data-stock="preorder"] .cta-buy{display:none}
/* folding / opening / [hidden] of the in-place form: css/preorder.css (W-EPOS). v391: the deposit line sits
   between the CTA and the form, so it stays in view when the form opens */

/* ── §B trust row v388: 13 frameless line icons, 7 over 6 like brickwork (build-trust.py is the source) ── */
.trustrow{--tr-ease:cubic-bezier(.23,1,.32,1);list-style:none;margin:0;padding:1.9rem var(--pad-x) 1.7rem;display:flex;flex-wrap:wrap;justify-content:center;row-gap:1.9rem;/* inverted (Faiz 19 Sep): the perfume colour as the field, icons in white; dark mode deepens it so white stays legible */background:color-mix(in srgb,var(--deep,var(--vibrant,var(--h2,#141414))) 86%,#000);position:relative;z-index:2;
  box-shadow:0 -1px 16px -4px rgba(251,255,255,.7),0 1px 16px -4px rgba(251,255,255,.7)}   /* same glow as the marquee it replaces */
.tr-b{flex:0 0 calc(100% / 7);padding:0 .35rem;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:.7rem;min-width:0;text-align:center;font-family:'Inter',sans-serif;font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#FFF;line-height:1.3}
.tr-ic{width:2.35rem;height:2.35rem;flex:none;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.225;stroke-linecap:round;stroke-linejoin:round}
.tr-ic .d{transform-box:fill-box;stroke-dasharray:1}
html.mzlight .trustrow{background:var(--h2,#141414);box-shadow:0 -1px 16px -4px color-mix(in srgb,var(--h2,#141414) 45%,transparent),0 1px 16px -4px color-mix(in srgb,var(--h2,#141414) 45%,transparent)}
/* reveal: rise + the strokes draw themselves in, staggered (only once JS has armed the row) */
.trustrow.tr-js .tr-b{opacity:0;transform:translateY(.6rem);transition:opacity .5s var(--tr-ease) calc(var(--i)*45ms),transform .7s var(--tr-ease) calc(var(--i)*45ms)}
.trustrow.tr-js .tr-ic *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--tr-ease) calc(var(--i)*45ms + 150ms)}
.trustrow.in .tr-b{opacity:1;transform:none}
.trustrow.in .tr-ic *{stroke-dashoffset:0}
/* hover: the icon does its own thing (mouse only - touch fires false hovers) */
@media (hover:hover) and (pointer:fine){
  .tr-b{cursor:default}
  .tr-b span{transition:opacity .25s ease}
  .trustrow:hover .tr-b:not(:hover) span{opacity:.55}
  .tr-b:hover .tr-ic{animation:trPop .6s var(--tr-ease)}
  .tr-pin:hover .tr-ic{animation:trHop .7s var(--tr-ease)}
  .tr-rosette:hover .tr-ic{animation:trWiggle .7s var(--tr-ease)}
  .tr-leaf:hover .tr-ic{animation:trSway .8s var(--tr-ease);transform-origin:25% 85%}
  .tr-truck:hover .tr-ic{animation:trDrive .8s var(--tr-ease)}
  .tr-gift:hover .d{animation:trLid .7s var(--tr-ease)}
  .tr-bag:hover .tr-ic,.tr-bottle:hover .tr-ic{animation:trLift .6s var(--tr-ease)}
  .tr-rosette:hover .d,.tr-drop:hover .d,.tr-factory:hover .d{animation:trDraw .6s var(--tr-ease) .1s both}
  .tr-rabbit:hover .d{animation:trTwitch .6s var(--tr-ease);transform-origin:50% 100%}
  .tr-flask:hover .d{animation:trSlosh .8s var(--tr-ease)}
  .tr-bottle:hover .d{animation:trMist .7s ease-out}
  .tr-globe:hover .d{animation:trTurn .9s cubic-bezier(.77,0,.175,1);transform-origin:50% 50%}
  .tr-lock:hover .d{animation:trClick .5s var(--tr-ease)}
}
@keyframes trPop{40%{transform:translateY(-3px) scale(1.08)}}
@keyframes trHop{30%{transform:translateY(-6px)}55%{transform:none}72%{transform:translateY(-2px)}}
@keyframes trWiggle{25%{transform:rotate(-10deg) scale(1.06)}55%{transform:rotate(7deg)}80%{transform:rotate(-3deg)}}
@keyframes trSway{35%{transform:rotate(-12deg)}70%{transform:rotate(5deg)}}
@keyframes trDrive{40%{transform:translateX(7px)}41%{transform:translateX(7px);opacity:0}42%{transform:translateX(-7px);opacity:0}60%{opacity:1}}
@keyframes trLift{40%{transform:translateY(-4px) scale(1.05)}}
@keyframes trDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes trTwitch{25%{transform:rotate(-9deg)}50%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}}
@keyframes trSlosh{25%{transform:translateX(-1.5px)}50%{transform:translateX(1.5px)}75%{transform:translateX(-.6px)}}
@keyframes trMist{0%{opacity:0;transform:translateX(-2px)}50%{opacity:1}100%{opacity:1;transform:none}}
@keyframes trTurn{50%{transform:scaleX(.12)}}
@keyframes trLid{40%{transform:translateY(-2.5px) rotate(-7deg)}70%{transform:translateY(-.5px) rotate(2deg)}}
@keyframes trClick{45%{transform:translateY(1.6px)}}
@media (prefers-reduced-motion:reduce){
  .trustrow.tr-js .tr-b{transform:none;transition:opacity .3s ease}
  .trustrow.tr-js .tr-ic *{stroke-dashoffset:0;transition:none}
  .tr-b:hover .tr-ic,.tr-b:hover .d{animation:none!important}
}
@media (max-width:60rem){.trustrow{row-gap:1.3rem;padding:1.3rem .5rem 1.2rem}.tr-b{padding:0 .15rem;gap:.5rem;font-size:8px;letter-spacing:.06em}.tr-ic{width:28px;height:28px}}
@media (max-width:24rem){.tr-b{font-size:7.5px}}

/* ── desktop fold: the rail grows, the fold follows ──
   The rail was absolute and bottom-anchored in a fixed 80rem, overflow:hidden fold, so anything that
   made it taller (an open accordion, now the in-place preorder form: +600px) pushed its top above the
   page and out of reach (measured at 1440: rail top -497px with the form open). Same resting place
   as before (rail base = bottle base = 21.4vh + 3.7rem up), but in flow: once the rail outgrows the
   fold, the fold grows downward. The bottle keeps its 86%-of-80rem height so it never rescales. */
@media (min-width:60.0625rem){
  /* v413: the fold is viewport-bound, never a fixed 80rem - on a short laptop the old fixed height pushed the photo
     below the fold and overflow:hidden cut it (Saad, 100% zoom). height:auto still lets the rail grow it when needed. */
  .pv-reveal.pv-v2{box-sizing:border-box;height:auto;min-height:min(80rem,max(52rem,100svh));display:flex;flex-direction:column;
    justify-content:flex-end;padding:clamp(9.4rem,12vh,12rem) 0 7.75rem}   /* v402: trust bar gap = the bento -> 'The mechanic' gap (7.75rem), above and below */   /* 12rem: the .pv-donut box (115px above the rail) clears the 73px fixed header */
  .pv-reveal.pv-v2 .pv-buy{position:relative;top:auto;right:auto;bottom:auto;align-self:flex-end;margin-right:7%}
  .pv-reveal.pv-v2 .pv-bottle:not(.set){height:min(68.8rem,86svh)}   /* v413: scales down with the screen; the Discovery case is sized by its own fit script */
}
/* v398 preorder stock counter under the deposit/balance line */
.pv-left{margin:.35rem 0 0;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--h2,#2F6396)}
.pv-left b{font-weight:800;font-variant-numeric:tabular-nums}


/* v402: the same 7.75rem below the trust bar (site: the bento follows it; theme: the next section) */
.trustrow ~ .vbento,.mz-trust-section + .shopify-section .vbento{padding-top:7.75rem}