/* ============================================================
   ARDEN Color-Me — Kids Club & School prototype
   Premium customizable kids club bandanas. B2B catalog.
   Tokens carried from the approved ARDEN flagship system.
   Product is a finished premium bandana. No activity-craft concepts.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Baloo+2:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=Caveat:wght@600;700&display=swap');

:root{
  --purple:#721E7E; --purple-deep:#571F69;
  --gold:#F0D200; --gold-deep:#C77F00;
  --cream:#FDF4E3; --lavender:#EBD6F7;
  --charcoal:#2E1F35;
  --turquoise:#00B8A9; --coral:#F0533D; --green:#6DBE45; --sky:#2E8FD4; --sun:#FFC93C;
  --serif:'Fraunces', serif; --playful:'Baloo 2', sans-serif; --sans:'Inter', sans-serif; --script:'Caveat', cursive;
  --line: rgba(46,31,53,.12);
  --ink-soft:#5a4a62; --ink-mute:#7a6a82;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
/* Anchor scroll offset: keeps the target section's heading clear of the
   sticky header (measured ~119px on desktop, ~67px on the single-row
   mobile header used below 900px since the hamburger-nav fix). Extra
   buffer added beyond the raw header height since smooth-scroll's
   resting position can land a few px short of the exact scroll-padding
   value. Native scroll-padding-top only, no JS, no header or layout
   change. */
html{scroll-padding-top:145px;}
@media (max-width:900px){
  html{scroll-padding-top:92px;}
}
body{font-family:var(--sans); color:var(--charcoal); background:var(--cream); -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit;}
.wrap{max-width:1320px; margin:0 auto; padding:0 5vw;}

/* ---------------- header ---------------- */
header{position:sticky; top:0; z-index:150; background:rgba(253,244,227,.93); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
.hbar{display:flex; align-items:center; gap:24px; padding:15px 0;}
.logo{font-family:var(--serif); font-weight:600; font-size:20px; color:var(--purple-deep); line-height:1; white-space:nowrap;}
.logo .mark{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--gold); margin-right:7px; vertical-align:middle;}
.mainnav{display:flex; gap:20px; margin-left:auto; align-items:center; flex-wrap:wrap;}
.mainnav a{font-size:13.5px; font-weight:500; color:var(--ink-soft); white-space:nowrap;}
.mainnav a:hover,.mainnav a.current{color:var(--purple);}
.mainnav a.soon{opacity:.45; cursor:default;}
.nav-cta{font-family:var(--sans); font-weight:700; font-size:12.5px; letter-spacing:.04em; background:var(--gold); color:var(--purple-deep); padding:10px 18px; border-radius:4px; white-space:nowrap;}

/* ---------------- top strip ---------------- */
.top-strip{background:var(--purple-deep); color:#fff; text-align:center; padding:9px 5vw; font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.09em; text-transform:uppercase;}

/* ---------------- breadcrumb ---------------- */
.crumb{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12.5px; color:var(--ink-mute); padding:22px 0 0;}
.crumb a{border-bottom:1px solid var(--line);}
.crumb a:hover{color:var(--purple); border-color:var(--purple);}
.crumb .sep{opacity:.4;}
.crumb .current{font-weight:600; color:var(--purple-deep);}

/* ---------------- section heads ---------------- */
.pad{padding:44px 0 92px;}
.section-head{max-width:760px; margin-bottom:38px;}
.kick{font-family:var(--sans); font-weight:700; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep);}
.section-head h1,.section-head h2{font-family:var(--serif); font-weight:600; letter-spacing:-.015em; font-size:clamp(29px,3.5vw,46px); color:var(--purple-deep); margin-top:10px; line-height:1.1;}
.section-head p{font-size:15.5px; color:var(--ink-soft); margin-top:15px; line-height:1.7;}

/* ---------------- buttons ---------------- */
.btn{font-family:var(--sans); font-weight:700; font-size:13.5px; letter-spacing:.03em; border-radius:4px; padding:15px 30px; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform .25s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-gold{background:var(--gold); color:var(--purple-deep); box-shadow:0 12px 26px -10px rgba(240,162,2,.55);}
.btn-purple{background:var(--purple); color:#fff; box-shadow:0 12px 26px -10px rgba(124,45,150,.5);}
.btn-ghost{background:#fff; color:var(--purple-deep); box-shadow:inset 0 0 0 1.5px var(--line);}
.btn-block{width:100%;}

/* ============================================================
   COLLECTION PATH NAVIGATION
   Ready Collection · Ready-to-Custom · Signature · Holiday
   ============================================================ */
.pathnav{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:46px;}

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.coll-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:start;}

/* size block — inches primary, cm secondary */
.sizeblock{margin-top:16px; padding:12px 14px; background:var(--cream); border-radius:13px;}
.sizeblock .in{font-family:var(--playful); font-weight:800; font-size:17px; color:var(--purple-deep); line-height:1;}
.sizeblock .cm{font-size:11.5px; color:var(--ink-mute); margin-top:5px;}

/* ============================================================
   THREE QUANTITY OPTIONS — identical width, height, hierarchy
   ============================================================ */
/* Structural/layout scaffolding only — every visual property (color,
   border, radius, background, hover/active state, card width) for the
   ARDEN sales-list card lives in ONE place: the "THE ARDEN SALES LIST"
   block further down this file. Nothing here re-declares a value that
   block also sets, so there is exactly one place to change how a
   .qopt looks. */
.qopts{display:grid; gap:10px; margin-top:18px;}
.qopt{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  min-height:96px; padding:14px 6px; transition:transform .2s ease, box-shadow .2s ease;}
.qopt .qn{font-family:var(--sans); font-weight:700; font-size:23px; line-height:1;}
.qopt .ql{font-size:9.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-mute); margin-top:5px;}
.qopt .qp{font-size:12.5px; font-weight:700; margin-top:9px; line-height:1.3;}
.qopt .qt{font-size:11px; color:var(--ink-mute); margin-top:4px; line-height:1.3;}
.qopts-lg .qopt .qt{font-size:11.5px;}
.qopt.is-best{box-shadow:inset 0 0 0 1.5px var(--gold);}

/* ============================================================
   SIZE SELECTOR — four official sizes, inches dominant
   ============================================================ */
.szgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:11px;}
.szcard{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center; min-height:132px; padding:16px 8px 14px; border-radius:16px; background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--line); transition:transform .2s ease, box-shadow .2s ease;}
.szcard:hover{transform:translateY(-2px);}
.szcard.is-active{box-shadow:0 0 0 2.5px var(--purple); background:#FBF7FD;}
.szcard .szname{font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); line-height:1.3;}
.szcard .szin{font-family:var(--playful); font-weight:800; font-size:19px; color:var(--purple-deep); margin-top:8px; line-height:1;}
.szcard .szcm{font-size:10.5px; color:var(--ink-mute); margin-top:5px;}
.szcard .sznote{font-size:10px; color:var(--ink-mute); margin-top:8px; line-height:1.4; opacity:.85;}
.szcard .szflag{position:absolute; top:-9px; left:50%; transform:translateX(-50%); background:var(--gold); color:var(--purple-deep);
  font-size:8px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:999px; white-space:nowrap;}
.szcard.is-popular{box-shadow:inset 0 0 0 1.5px var(--gold);}
.szcard.is-popular.is-active{box-shadow:0 0 0 2.5px var(--purple);}

/* quantity stepper — MOQ is a floor, step is 1 */
/* .qtyrow / .qtybox and children are defined once, further down — this was
   a dead, fully-superseded duplicate (identical selectors, later block
   always won) removed rather than left to shadow future edits. */
.qtyhint{font-size:12.5px; color:var(--ink-mute); line-height:1.5;}

.qopt.is-best.is-active{box-shadow:0 0 0 2.5px var(--purple);}
.qopt .qbadge{position:absolute; top:-9px; left:50%; transform:translateX(-50%); background:var(--gold); color:var(--purple-deep); font-size:8.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:999px; white-space:nowrap;}
.qopt{position:relative;}

/* ============================================================
   COLLECTION FAMILY CARDS
   Design collections — never mixed with shopping paths.
   ============================================================ */
.famgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}

/* honest future slots — never fake products */
.slot-soon{border-radius:26px; border:1.5px dashed rgba(46,31,53,.18); background:rgba(255,255,255,.5); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:38px 26px; min-height:360px;}

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pdp{display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:start;}
/* grid items default to min-width:auto, which lets a wide child push the whole
   track past the viewport. Reset to 0 so overflow stays inside its owner. */
.pdp > *{min-width:0;}
.gal-thumbs > *{min-width:0;}

/* PDP MAIN IMAGE FRAME — 2026-09-03: replaced the purple/lavender gradient
   frame with the same restrained editorial frame language already
   established for the "Why ARDEN for business" showcase card
   (arden-corporate-bandanas.html's .corp-frame): a thin, translucent gold
   outline set outside the frame edge (not a solid border), a soft,
   diffused elevation shadow, and a small, controlled radius — no thick
   inner padding/border color. One rule, unscoped, so every PDP (Corporate
   and Kids alike) gets the identical frame; do not reintroduce a
   page-local .gal-main override. */
.gal-main{position:relative; border-radius:6px; overflow:hidden; background:#fff;
  box-shadow:0 24px 60px -34px rgba(22,41,60,.75);
  outline:1px solid rgba(240,162,2,.35); outline-offset:6px;}
.gal-stage{border-radius:6px; overflow:hidden; background:#fff; aspect-ratio:1; display:flex; align-items:center; justify-content:center;}
.gal-stage img{width:100%; height:100%; object-fit:contain; background:#fff;}
.gal-caption{margin-top:12px; font-size:12px; color:var(--ink-mute); text-align:center;}
.gal-thumbs{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:15px;}
.thumb{position:relative; border-radius:13px; overflow:hidden; aspect-ratio:1; background:#fff; box-shadow:inset 0 0 0 1px var(--line); cursor:pointer; transition:box-shadow .2s ease, transform .2s ease;}
.thumb img{width:100%; height:100%; object-fit:cover;}
.thumb:hover{transform:translateY(-2px);}
.thumb.is-active{box-shadow:0 0 0 2.5px var(--purple);}
.thumb .num{position:absolute; top:5px; left:6px; font-size:9px; font-weight:700; color:var(--ink-mute); background:rgba(255,255,255,.88); border-radius:4px; padding:1px 4px; z-index:2;}

/* reserved image slot — production ready, clearly awaiting real photography */
.ph-slot{width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px;
  background:repeating-linear-gradient(135deg,#FBF7FD 0 12px,#F4ECF8 12px 24px); color:#a595b1; padding:10px;}
.ph-slot .pi{font-size:19px; opacity:.55;}
.ph-slot .pt{font-family:var(--sans); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; line-height:1.5;}
.gal-stage .ph-slot .pt{font-size:12px;}

/* video */
.video-mod{margin-top:32px; border-radius:26px; overflow:hidden; background:linear-gradient(140deg,var(--purple) 0%,var(--purple-deep) 100%); color:#fff; padding:30px;}

/* purchase panel */
.buy .eyebrow{font-family:var(--playful); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep);}
.buy h1{font-family:var(--serif); font-weight:600; font-size:clamp(28px,3.4vw,44px); color:var(--purple-deep); line-height:1.08; margin-top:10px;}
.buy .lede{font-size:15px; color:var(--ink-soft); margin-top:16px; line-height:1.75;}

.step{margin-top:30px;}
.step-label{display:flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:700; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:13px;}
.step-label .n{width:20px; height:20px; border-radius:50%; background:var(--purple); color:#fff; font-size:10.5px; display:flex; align-items:center; justify-content:center; flex:0 0 20px;}

/* spec rows */
.specs{background:#fff; border-radius:20px; padding:20px 22px; box-shadow:0 16px 34px -30px rgba(46,31,53,.4);}
.specrow{display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--line);}
.specrow:last-child{border-bottom:none;}
.specrow .k{font-size:12.5px; color:var(--ink-mute);}
.specrow .v{font-size:13.5px; font-weight:700; color:var(--purple-deep); text-align:right;}
.specrow .v small{display:block; font-size:11.5px; font-weight:400; color:var(--ink-mute); margin-top:3px;}

/* order summary */
.priceblock{margin-top:24px; background:#fff; border-radius:22px; padding:22px 24px; box-shadow:0 18px 38px -30px rgba(46,31,53,.45);}

.buy-actions{margin-top:20px; display:flex; flex-direction:column; gap:10px;}

/* three commercial paths, explained */
.paths{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}

.paths .pathblock:nth-child(1) .pi{background:#EFE4F6;}
.paths .pathblock:nth-child(2) .pi{background:#FBEBC8;}
.paths .pathblock:nth-child(3) .pi{background:#D6F2EE;}

/* benefits */
.benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.ben{background:#fff; border-radius:22px; padding:26px 24px; box-shadow:0 16px 36px -30px rgba(46,31,53,.4);}
.ben .bi{width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:16px; margin-bottom:12px;}
.ben:nth-child(1) .bi{background:#EFE4F6;}
.ben:nth-child(2) .bi{background:#FBEBC8;}
.ben:nth-child(3) .bi{background:#F7DDD6;}
.ben:nth-child(4) .bi{background:#E4EEF9;}
.ben:nth-child(5) .bi{background:#D6F2EE;}
.ben:nth-child(6) .bi{background:#E8F3DF;}
.ben h4{font-family:var(--playful); font-weight:700; font-size:15.5px; color:var(--purple-deep);}
.ben p{font-size:13.5px; color:var(--ink-soft); margin-top:7px; line-height:1.6;}

/* editorial band */
.band{background:linear-gradient(120deg,var(--purple),var(--purple-deep)); color:#fff; text-align:center; padding:60px 5vw;}
.band p{font-family:var(--serif); font-weight:600; font-size:clamp(22px,2.9vw,34px); max-width:820px; margin:0 auto; line-height:1.3;}
.band span{display:block; font-family:var(--sans); font-weight:400; font-size:14.5px; color:rgba(255,255,255,.8); margin-top:14px;}

/* footer */
footer{background:#2E1F35; color:#cfc3d6; padding:54px 0 28px;}
.fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;}
footer h5{font-family:var(--sans); font-weight:700; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:12px;}
footer a,footer p{font-size:13.5px; line-height:2; color:#cfc3d6;}
footer a:hover{color:#fff;}
.fbottom{border-top:1px solid rgba(255,255,255,.12); margin-top:32px; padding-top:18px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12px; color:#9d8fa6;}
.flogo{font-family:var(--serif); font-size:19px; color:#fff;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .pdp{grid-template-columns:1fr 1fr; gap:34px;}

  .fgrid{grid-template-columns:1fr 1fr;}
  .buy h1{font-size:clamp(25px,4.3vw,34px);}
  .gal-thumbs{gap:8px;}
}
@media (max-width:900px){
  .pdp{grid-template-columns:1fr; gap:36px;}
  .pdp > section:first-child{max-width:560px; margin:0 auto; width:100%;}

  .paths,.benefits{grid-template-columns:repeat(2,1fr);}
  .mainnav{display:none;}
  .hbar{justify-content:space-between;}
  .nav-cta{margin-left:auto;}
  .pad{padding:30px 0 68px;}
}
@media (max-width:900px){

}
@media (max-width:600px){

  /* four sizes become a clean 2x2 grid rather than four cramped columns */
  .szgrid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .szcard{min-height:124px;}
  .qtybox input{width:66px;}
  .paths,.benefits{grid-template-columns:1fr;}
  .fgrid{grid-template-columns:1fr;}
  .gal-thumbs{gap:6px;}
  .thumb .num{display:none;}
  /* at thumbnail scale the slot label no longer fits — the icon carries it */
  .thumb .ph-slot .pt{display:none;}

  /* three quantity options stay a single row of three — the B2B comparison
     only reads correctly side by side */
  .qopts{gap:7px;}
  .qopt{min-height:88px; padding:12px 4px;}
  .qopt .qn{font-size:19px;}
  .qopt .ql{font-size:8.5px; letter-spacing:.07em;}
  .qopt .qp{font-size:11px; margin-top:7px;}
  .qopts-lg .qopt{min-height:100px;}
  .qopts-lg .qopt .qn{font-size:22px;}
  .qopts-lg .qopt .qp{font-size:12px;}
}

/* pricing card labels */
.qopt .qrole{font-size:8.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); margin-top:4px;}

/* ============================================================
   SMART QUOTE ASSISTANT
   ============================================================ */
.qa-overlay{position:fixed; inset:0; z-index:200; background:rgba(46,31,53,.55); backdrop-filter:blur(4px);
  display:none; align-items:flex-start; justify-content:center; padding:24px 16px; overflow-y:auto;}
.qa-overlay.open{display:flex;}
.qa-panel{width:100%; max-width:640px; background:var(--cream); border-radius:26px; overflow:hidden; box-shadow:0 40px 90px -40px rgba(0,0,0,.6); margin:auto;}
.qa-head{padding:22px 26px 18px; background:#fff; border-bottom:1px solid var(--line); position:relative;}
.qa-head h3{font-family:var(--playful); font-weight:800; font-size:19px; color:var(--purple-deep);}
.qa-head p{font-size:12.5px; color:var(--ink-mute); margin-top:4px;}
.qa-close{position:absolute; top:18px; right:20px; width:32px; height:32px; border-radius:50%; font-size:17px; color:var(--ink-mute);}
.qa-close:hover{background:var(--lavender); color:var(--purple-deep);}

.qa-body{padding:24px 26px;}
.qa-trust{display:flex; flex-direction:column; gap:8px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--line);}
.qa-trust span{display:flex; align-items:center; gap:8px; font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.01em; color:var(--purple-deep);}
.qa-trust svg{width:15px; height:15px; flex:none; color:var(--gold-deep);}
#qaShipWrap{border-top:1px solid var(--line); margin-top:2px; padding-top:14px;}

/* Payment instructions (wire transfer) + post-purchase "add your branding"
   upload CTA on the order success screen. Base (Signature/default) look —
   Corporate+Kids override this entire section below, scoped, so Signature
   keeps exactly this look, untouched by the 2026-09-03 unification. */
.qa-payment{margin-top:18px; background:#fff; border-radius:14px; padding:18px 20px;
  box-shadow:inset 0 0 0 1.5px var(--line); text-align:left;}
.qa-payment-h{display:flex; align-items:center; gap:8px; font-family:var(--playful);
  font-weight:800; font-size:14px; color:var(--purple-deep);}
.qa-payment-h svg{width:17px; height:17px; flex:none; color:var(--turquoise);}
.qa-payment p{font-size:13px; color:var(--ink-soft); margin-top:6px; line-height:1.6;}
.qa-payment-details{margin-top:12px; display:grid; gap:8px;}
.qa-payment-details div{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px;
  padding:8px 0; border-top:1px solid var(--line); font-size:12.5px;}
.qa-payment-details div:first-child{border-top:0;}
.qa-payment-details span{color:var(--ink-mute);}
.qa-payment-details b{font-family:var(--playful); font-weight:700; color:var(--purple-deep); text-align:right;}
.qa-payment-subhead{font-family:var(--playful); font-weight:700; font-size:12.5px; color:var(--purple-deep); margin-top:14px;}
/* Currency toggle (Pay in USD / Pay in EUR) — a two-button segmented
   control so only the chosen account's details show at once. */
.qa-currency-toggle{display:flex; gap:8px; margin-top:14px;}
.qa-currency-btn{flex:1; font-family:var(--playful); font-weight:700; font-size:12.5px; color:var(--purple-deep);
  background:#fff; box-shadow:inset 0 0 0 1.5px var(--line); border-radius:8px; padding:9px 10px; cursor:pointer; transition:box-shadow .15s ease, background .15s ease;}
.qa-currency-btn:hover{box-shadow:inset 0 0 0 1.5px var(--purple-deep);}
.qa-currency-btn.active{background:var(--purple-deep); color:#fff; box-shadow:none;}
.qa-payment-legal{font-size:11.5px !important; color:var(--ink-mute) !important; margin-top:12px !important;
  background:var(--cream); border-radius:10px; padding:10px 12px; line-height:1.6 !important;}
.qa-payment-note{font-size:11.5px !important; color:var(--ink-mute) !important; margin-top:10px !important;}
.qa-upload-cta{margin-top:18px; background:var(--lavender); border-radius:14px; padding:18px 20px; text-align:left;}
.qa-upload-h{font-family:var(--playful); font-weight:800; font-size:14px; color:var(--purple-deep);}
.qa-upload-cta p{font-size:13px; color:var(--ink-soft); margin-top:6px; line-height:1.6;}
.qa-upload-cta .btn{margin-top:12px; font-size:13.5px; padding:11px 20px;}

.qa-field{margin-bottom:14px;}
.qa-field label{display:block; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:6px;}
.qa-field label .req{color:var(--coral);}
.qa-field input,.qa-field select,.qa-field textarea{width:100%; padding:12px 13px; border-radius:12px; border:none; outline:none;
  background:#fff; box-shadow:inset 0 0 0 1.5px var(--line); font-family:var(--sans); font-size:14px; color:var(--charcoal);}
.qa-field textarea{min-height:82px; resize:vertical;}
.qa-field input:focus,.qa-field select:focus,.qa-field textarea:focus{box-shadow:inset 0 0 0 2px var(--purple);}
.qa-field input.err{box-shadow:inset 0 0 0 2px var(--coral);}
.qa-two{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.qa-err{font-size:12px; color:var(--coral); font-weight:600; margin-top:-6px; margin-bottom:12px; display:none;}
.qa-err.show{display:block;}
.qa-info{font-size:12.5px; line-height:1.6; color:var(--purple-deep); background:var(--lavender);
  border-radius:12px; padding:12px 14px; margin-bottom:14px;}

/* path choice cards */
.qa-paths{display:grid; gap:10px;}

/* summary */
.qa-sum{background:#fff; border-radius:16px; padding:18px 20px; box-shadow:inset 0 0 0 1.5px var(--line);}
.qa-sumrow{display:flex; justify-content:space-between; gap:14px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
.qa-sumrow:last-child{border-bottom:none;}
.qa-sumrow .sk{color:var(--ink-mute); flex:0 0 42%;}
.qa-sumrow .sv{font-weight:700; color:var(--purple-deep); text-align:right;}

.qa-foot{display:flex; justify-content:space-between; gap:12px; padding:18px 26px 24px; background:var(--cream);}
.qa-foot .btn{font-size:14px; padding:13px 24px;}
.qa-ghost{background:none; color:var(--ink-mute); font-family:var(--playful); font-weight:700; font-size:13.5px;}
.qa-ghost:hover{color:var(--purple-deep);}

/* delivery state — never claims an email was sent */
.qa-done{text-align:center; padding:8px 0 4px;}
.qa-done .dt{font-family:var(--playful); font-weight:800; font-size:17px; color:var(--purple-deep);}
.qa-ordernum{display:inline-block; margin-top:10px; font-family:var(--playful); font-weight:700;
  font-size:13px; color:var(--purple-deep); background:#FBEBC8;
  border-radius:999px; padding:6px 16px;}
.qa-ordernum b{font-weight:800; letter-spacing:.02em;}
.qa-done p{font-size:13.5px; color:var(--ink-soft); margin-top:8px; line-height:1.65;}
.qa-payload{margin-top:16px; text-align:left; background:#2E1F35; color:#d9cfe0; border-radius:14px; padding:14px 16px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px; line-height:1.6; max-height:210px; overflow:auto; white-space:pre-wrap; word-break:break-word;}

@media (max-width:600px){
  .qa-two{grid-template-columns:1fr;}
  .qa-panel{border-radius:20px;}
  .qa-body{padding:20px 18px;}
  .qa-head{padding:18px 20px 16px;}
  .qa-foot{padding:16px 18px 20px;}
}

/* ============================================================
   ARDEN CHECKOUT MODAL — CORPORATE + KIDS OVERRIDE
   2026-09-03 unification: Corporate and Kids share one identical
   checkout-modal visual system, consolidated here (previously ~90 lines
   duplicated in each of the 8 Corporate PDP files' own <style> block).
   Applied via the .qa-corporate class, which ArdenQuote.build() now adds
   whenever ARDEN.usesCorporateFlow() is true (Corporate OR Kids) — never
   for Signature, which keeps the base look immediately above, completely
   unaffected by this block. "Corporate" is only the CSS class's name
   (kept to avoid an unrelated mass-rename); the ruleset itself is what
   both Corporate and Kids render, identically — not a Corporate-only
   style with a Kids exception.
   ============================================================ */
.qa-panel.qa-corporate{border-radius:8px; background:var(--cream);}
.qa-corporate .qa-head{background:#fff; border-bottom:1px solid var(--line); padding:30px 34px 22px;}
.qa-corporate .qa-head h3{font-family:var(--serif); font-weight:600; font-size:23px; color:var(--purple-deep); letter-spacing:-.01em;}
.qa-corporate .qa-head p{font-family:var(--sans); font-size:13px; color:var(--ink-soft); margin-top:6px;}
.qa-corporate .qa-close{border-radius:4px; color:var(--ink-mute);}
.qa-corporate .qa-close:hover{background:var(--cream); color:var(--purple-deep);}
.qa-corporate .qa-body{padding:28px 34px;}

.qa-corporate .qa-trust{flex-direction:column; gap:10px; padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid var(--line);}
.qa-corporate .qa-trust span{font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:0; color:var(--ink-soft);}
.qa-corporate .qa-trust svg{color:var(--gold-deep);}

/* Pre-submit read-only order recap (qaCorpSummary) and the equivalent
   post-submit "Your Order" recap inside the confirmation (.qa-corp-order)
   — same .qcs-row label/value pattern, two different containers. Neither
   base class exists outside this override, so these stay unscoped by
   name (nothing in the base/Signature markup ever renders them). */
.qa-corp-summary{background:#fff; box-shadow:inset 0 0 0 1px var(--line); border-radius:6px;
  padding:16px 18px; margin-bottom:22px; display:grid; gap:9px;}
.qa-corp-summary .qcs-row{display:flex; justify-content:space-between; align-items:baseline; gap:14px;}
.qa-corp-summary .qcs-row span:first-child{font-family:var(--sans); font-weight:700; font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute);}
.qa-corp-summary .qcs-row span:last-child{font-family:var(--sans); font-weight:600; font-size:13.5px; color:var(--purple-deep); text-align:right;}
.qa-corp-summary .qcs-total{padding-top:9px; border-top:1px solid var(--line);}
.qa-corp-summary .qcs-total span:last-child{font-family:var(--serif); font-weight:600; font-size:17px;}
.qa-corp-order .qcs-row{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:6px 0; border-top:1px solid var(--line);}
.qa-corp-order .qcs-row:first-child{border-top:0; padding-top:0;}
.qa-corp-order .qcs-row span:first-child{font-family:var(--sans); font-weight:700; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute);}
.qa-corp-order .qcs-row span:last-child{font-family:var(--sans); font-weight:600; font-size:13.5px; color:var(--purple-deep); text-align:right;}

.qa-corporate .qa-field label{font-family:var(--sans); font-weight:600; font-size:10.5px; letter-spacing:.05em; color:var(--ink-mute);}
.qa-corporate .qa-field input,
.qa-corporate .qa-field select,
.qa-corporate .qa-field textarea{border-radius:4px; box-shadow:inset 0 0 0 1px var(--line); background:#fff; font-family:var(--sans); color:var(--ink);}
.qa-corporate .qa-field input:focus,
.qa-corporate .qa-field select:focus,
.qa-corporate .qa-field textarea:focus{box-shadow:inset 0 0 0 1.5px var(--purple-deep);}
.qa-corporate .qa-info{background:#fff; box-shadow:inset 0 0 0 1px var(--line); color:var(--ink-soft); border-radius:4px; font-family:var(--sans);}

.qa-corporate .qa-foot{background:#fff; border-top:1px solid var(--line); padding:20px 34px;}
.qa-corporate .qa-foot .btn{font-family:var(--sans); font-weight:600; letter-spacing:.02em;}
.qa-corporate .qa-ghost{font-family:var(--sans); font-weight:600;}

.qa-corporate .qa-eyebrow{display:block; font-family:var(--sans); font-weight:700; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:8px;}
.qa-corporate .qa-corp-h{font-family:var(--serif); font-weight:600; font-size:16px; color:var(--purple-deep); margin-bottom:14px;}

.qa-corporate .qa-corp-block{margin-top:22px;}
.qa-corporate .qa-corp-block:first-child{margin-top:0;}
.qa-corporate .qa-corp-block p{font-family:var(--sans); font-size:13px; color:var(--ink-soft); margin-top:4px;}

.qa-corporate .qa-ordernum{display:inline-block; margin-top:6px; padding:10px 16px; background:#fff;
  box-shadow:inset 0 0 0 1px var(--line); border-radius:4px; font-family:var(--serif); font-weight:600;
  font-size:18px; letter-spacing:.01em; color:var(--purple-deep);}
.qa-corporate .qa-ordernum-sm{font-size:15px; padding:8px 14px;}

.qa-corporate .qa-payment{margin-top:22px; background:#fff; box-shadow:inset 0 0 0 1px var(--line);
  border-radius:6px; padding:20px 22px;}
.qa-corporate .qa-payment:first-of-type{margin-top:0;}
.qa-corporate .qa-payment-details{margin-top:0; display:grid; gap:9px;}
.qa-corporate .qa-payment-details div{padding:9px 0 0; border-top:1px solid var(--line);}
.qa-corporate .qa-payment-details div:first-child{border-top:0; padding-top:0;}
.qa-corporate .qa-payment-details span{font-family:var(--sans); font-size:12px; color:var(--ink-mute);}
.qa-corporate .qa-payment-details b{font-family:var(--sans); font-weight:700; color:var(--purple-deep);}
.qa-corporate .qa-payment-subhead{font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-mute); margin-top:16px;}
.qa-corporate .qa-currency-btn{font-family:var(--sans); font-size:11.5px;}
.qa-corporate .qa-corp-legal p{margin-top:6px;}
.qa-corporate .qa-corp-legal b{color:var(--purple-deep);}
.qa-corporate .qa-corp-note{font-size:12px !important; color:var(--ink-mute) !important; margin-top:8px !important;}

.qa-corporate .qa-upload-cta{margin-top:22px; background:#fff; box-shadow:inset 0 0 0 1px var(--line);
  border-radius:6px; padding:20px 22px; text-align:left;}
.qa-corporate .qa-upload-h{font-family:var(--serif); font-weight:600; font-size:15px; color:var(--purple-deep);}
.qa-corporate .qa-upload-cta p{font-family:var(--sans); font-size:13px; color:var(--ink-soft); margin-top:6px;}
.qa-corporate .qa-upload-cta .btn{margin-top:14px; font-family:var(--sans); font-weight:600;}
.qa-corp-btn-outline{background:#fff; color:var(--purple-deep); box-shadow:inset 0 0 0 1.5px var(--purple-deep);}
.qa-corp-btn-outline:hover{background:var(--cream);}

.qa-corporate .qa-payment .btn{margin-top:14px; font-family:var(--sans); font-weight:600;}

/* Three-slot branding upload (Logo / Photo / Mascot), opened by
   collectBrandingThen() before the order/quote step. Only ever reached on
   a usesCorporateFlow() page (Signature's own "personalized" path never
   calls collectBrandingThen — see init()), so these are safe unscoped by
   name, same reasoning as .qa-corp-summary above. */
.qa-upload-slots{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px;}
.qa-upload-slot{background:#fff; box-shadow:inset 0 0 0 1px var(--line); border-radius:6px; padding:16px 12px; text-align:center;}
.qus-n{display:block; font-family:var(--sans); font-weight:700; font-size:10px; letter-spacing:.1em; color:var(--gold-deep);}
.qus-label{font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.02em; text-transform:uppercase; color:var(--purple-deep); margin-top:6px;}
.qus-sub{font-family:var(--sans); font-size:10.5px; color:var(--ink-mute); line-height:1.4; margin-top:4px; min-height:28px;}
.qus-upload{display:block; margin-top:12px; padding:9px 4px; border-radius:4px; box-shadow:inset 0 0 0 1px var(--line);
  font-family:var(--sans); font-weight:600; font-size:11px; color:var(--purple-deep); cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:box-shadow .15s ease;}
.qus-upload:hover{box-shadow:inset 0 0 0 1.5px var(--purple-deep);}
.qus-upload.has-file{box-shadow:inset 0 0 0 1.5px var(--gold-deep); color:var(--gold-deep);}
@media (max-width:600px){
  .qa-upload-slots{grid-template-columns:1fr; gap:10px;}
  .qus-sub{min-height:0;}
}

@media (max-width:600px){
  .qa-corporate .qa-head{padding:22px 20px 18px;}
  .qa-corporate .qa-body{padding:22px 20px;}
  .qa-corporate .qa-foot{padding:16px 20px;}
}

/* ============================================================
   ORDER TYPE — the first purchasing decision
   ============================================================ */
.otypes{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.otype{text-align:left; background:#fff; border-radius:18px; padding:18px 20px; box-shadow:inset 0 0 0 1.5px var(--line); transition:transform .2s ease, box-shadow .2s ease;}
.otype:hover{transform:translateY(-2px);}
.otype.is-active{box-shadow:0 0 0 2.5px var(--purple); background:#FBF7FD;}
.otype .ot-name{font-family:var(--serif); font-weight:600; font-size:15.5px; color:var(--purple-deep);}
.otype .ot-desc{font-size:12.5px; color:var(--ink-mute); margin-top:6px; line-height:1.55;}

/* the calculation panel used to be followed by two full yellow disclosure
   paragraphs explaining tier pricing in prose. The panel itself already
   states the exact figures, and the volume buttons above it carry the
   same facts in a few words each, so this is one plain reassurance line,
   not a callout - no background colour, nothing competing with the total. */
.osum-note{font-size:11.5px; color:var(--ink-mute); line-height:1.6; margin-top:10px; text-align:center;}

/* quantity */
.qtyrow{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.qtybox{display:flex; align-items:center; background:#fff; border-radius:999px; box-shadow:inset 0 0 0 1.5px var(--line); overflow:hidden;}
.qtybox button{width:48px; height:52px; font-size:21px; color:var(--purple-deep);}
.qtybox button:hover{background:var(--lavender);}
.qtybox input{width:88px; height:52px; text-align:center; border:none; outline:none; background:transparent;
  font-family:var(--sans); font-weight:700; font-size:19px; color:var(--purple-deep);}
.qty-min{font-size:12.5px; color:var(--ink-mute);}
.qty-hint{font-size:12.5px; color:var(--gold-deep); font-weight:700; margin-top:12px;}

/* compact volume pricing */
.vtable{background:#fff; border-radius:18px; padding:6px 20px; box-shadow:inset 0 0 0 1.5px var(--line);}
.vrow{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
.vrow:last-child{border-bottom:none;}
.vrow .vq{color:var(--ink-mute);}
.vrow .vp{font-family:var(--playful); font-weight:700; color:var(--purple-deep);}
.vrow.is-active .vq{color:var(--purple-deep); font-weight:600;}
.vrow.is-active .vp{color:var(--purple);}
.vrow.is-active{position:relative;}
.vrow.is-active::before{content:''; position:absolute; left:-20px; top:8px; bottom:8px; width:3px; border-radius:999px; background:var(--purple);}

/* order summary */
.osum{background:#fff; border-radius:22px; padding:24px 26px; box-shadow:0 20px 44px -32px rgba(46,31,53,.5);}
.osum h3{font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:16px;}
.osum-top{font-family:var(--serif); font-weight:600; font-size:17px; color:var(--purple-deep); line-height:1.4;}
.osum-top span{display:block; font-family:var(--sans); font-weight:400; font-size:13.5px; color:var(--ink-mute); margin-top:3px;}
.osum-lines{margin-top:18px;}
.oline{display:flex; justify-content:space-between; gap:14px; padding:9px 0; font-size:14px; color:var(--ink-soft);}
.oline .ov{font-weight:700; color:var(--purple-deep);}
.oline.is-muted{opacity:.5;}
.oline.is-included .ov{color:var(--turquoise);}
.ototal{display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-top:14px; padding-top:16px; border-top:2px solid var(--line);}
.ototal .tl{font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute);}
.ototal .tv{font-family:var(--sans); font-weight:700; font-size:clamp(28px,3.4vw,36px); color:var(--purple-deep); line-height:1;}

/* personalization workflow */
.pnote{display:none; margin-top:16px; padding:16px 18px; border-radius:16px; background:#F6F0FA; box-shadow:inset 0 0 0 1.5px rgba(124,45,150,.16);}

/* secondary quote card */
.quotecard{margin-top:30px; background:#fff; border-radius:20px; padding:22px 24px; box-shadow:inset 0 0 0 1.5px var(--line);}
.quotecard .qc-t{font-family:var(--playful); font-weight:800; font-size:14.5px; color:var(--purple-deep);}
.quotecard p{font-size:13px; color:var(--ink-mute); margin-top:6px; line-height:1.6;}
.quotecard a{display:inline-block; margin-top:12px; font-family:var(--playful); font-weight:700; font-size:13.5px; color:var(--purple); border-bottom:2px solid var(--gold); padding-bottom:2px;}

@media (max-width:600px){
  .otypes{grid-template-columns:1fr;}
  .osum{padding:20px 18px;}
}

/* design-fee tiers, shown inside the Personalized option */
.feetiers{margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}

/* Secondary, plain-text benefit line — not a badge. Only Corporate's
   Add Your Branding card uses this class today; Kids' otype cards never
   include it, so this rule has no effect there. */
.otype .ot-revision{display:block; font-size:11px; font-weight:600; color:var(--ink-mute); margin-top:6px;}
.otype .ot-fee{display:inline-block; margin-top:9px; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px;}
.otype .ot-fee.none{background:#E4F3EE; color:#0A5C52;}
.otype .ot-fee.applies{background:#FBEBC8; color:var(--gold-deep);}

/* your price line */
.yourprice{margin-top:16px; padding:16px 18px; border-radius:16px; background:#F6F0FA;}
.yourprice .yp-l{font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-mute);}
.yourprice .yp-v{font-family:var(--sans); font-weight:700; font-size:24px; color:var(--purple-deep); margin-top:4px; line-height:1;}
.yourprice .yp-m{font-size:13px; color:var(--ink-soft); margin-top:7px;}

/* how personalization works */
.howsteps{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}

/* quote card only becomes prominent at 50+ */
.quotecard{display:none;}
.quotecard.show{display:block;}

@media (max-width:900px){ .howsteps{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .howsteps{grid-template-columns:1fr;} }

/* trust line: taxes + shipping */
.trustline{margin-top:14px; padding-top:14px; border-top:1px solid var(--line);}
.trustrow{display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--ink-soft); padding:5px 0;}
.trustrow .tv2{font-weight:700; color:var(--turquoise);}
/* fee disclosure in the intro */
.feedisclose{margin-top:14px; padding:13px 16px; border-radius:14px; background:#FBEBC8; font-size:13px; color:#6b5636; line-height:1.6;}

/* vertical product video */
.video-vert{margin-top:32px; border-radius:26px; overflow:hidden; background:linear-gradient(140deg,var(--purple),var(--purple-deep)); color:#fff; padding:26px;}
.video-vert h3{font-family:var(--playful); font-weight:800; font-size:17px;}
.video-vert p{font-size:13px; color:rgba(255,255,255,.8); margin-top:5px; line-height:1.6;}
.video-frame{margin:16px auto 0; width:min(260px,72%); aspect-ratio:9/16; border-radius:20px; background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;}
.video-frame .play{width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center; font-size:17px;}
.video-frame .vt{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.75); text-align:center; padding:0 14px; line-height:1.5;}
/* faq */
.faqlist{max-width:820px;}
.faqitem{background:#fff; border-radius:16px; padding:18px 22px; margin-bottom:10px; box-shadow:inset 0 0 0 1.5px var(--line);}
.faqitem .fq{font-family:var(--serif); font-weight:600; font-size:14.5px; color:var(--purple-deep);}
.faqitem .fa{font-size:13.5px; color:var(--ink-soft); margin-top:6px; line-height:1.65;}
/* signature card emphasis */
.pathblock.sig{background:linear-gradient(150deg,#fff,#F6F0FA);}

/* ============================================================
   RESPONSIVE REFINEMENT — approved desktop design unchanged
   ============================================================ */
@media (max-width:900px){
  /* readable hierarchy instead of uniformly shrunken desktop type */
  .buy h1{font-size:clamp(28px,7.4vw,32px); line-height:1.12;}
  .section-head h1,.section-head h2{font-size:clamp(21px,5.6vw,24px);}
  .buy .lede{font-size:16px; line-height:1.65;}
  .otype .ot-desc,.pathblock p,.ben p,.faqitem .fa{font-size:14px;}
  .szcard .sznote,.qty-min,.qtyhint{font-size:13px;}
  .oline{font-size:15px;}
  .ototal .tv{font-size:32px;}
  .trustrow{font-size:14px;}

  /* comfortable touch targets */
  .btn{min-height:52px; font-size:16px;}
  .otype{min-height:0; padding:18px;}
  .szcard{min-height:118px;}
  .qtybox button{width:54px; height:56px; font-size:24px;}
  .qtybox input{height:56px; width:96px; font-size:20px;}
  .faqitem{padding:16px 18px;}

  /* gallery: hero first, tappable thumbs */
  .gal-thumbs{grid-template-columns:repeat(5,1fr); gap:8px;}
  .thumb{border-radius:12px;}
  .thumb .num{display:block; font-size:8.5px; padding:1px 3px;}
}

@media (max-width:520px){
  /* thumbs become a swipe rail so each stays finger-sized */
  .gal-thumbs{display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; padding-bottom:4px; scrollbar-width:none;}
  .gal-thumbs::-webkit-scrollbar{display:none;}
  .gal-thumbs .thumb{flex:0 0 74px; width:74px; scroll-snap-align:start;}
  .thumb .ph-slot .pt{display:none;}

  /* vertical video keeps its 9:16 composition without dominating */
  .video-frame{width:min(220px,64%);}

  /* volume cards stay side by side but never clip */
  .qopts{gap:6px;}
  .qopt{min-height:0; padding:12px 4px;}
  .qopt .qn{font-size:20px;}
  .qopt .ql{font-size:8px; letter-spacing:.06em;}
  .qopt .qp{font-size:11px; margin-top:6px;}
  .qopt .qrole{font-size:8px;}
  /* .qt now carries the design-fee/shipping advantage per tier — it must
     stay visible at mobile widths, where most buyers will see this page.
     It used to be hidden here when the line was unused; shrunk instead. */
  .qopt .qt{display:block; font-size:8.5px; line-height:1.35; margin-top:4px;}

  /* room for the sticky bar */
  body.has-stickybar{padding-bottom:96px;}
}

/* sticky purchase bar — mobile only, respects safe area */
.stickybar{position:fixed; left:0; right:0; bottom:0; z-index:80; display:none;
  background:rgba(255,255,255,.97); backdrop-filter:blur(12px); border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -8px 26px -18px rgba(46,31,53,.5);}
.stickybar .sb-in{display:flex; align-items:center; gap:12px; max-width:640px; margin:0 auto;}
.stickybar .sb-info{flex:1; min-width:0;}
.stickybar .sb-q{font-size:11.5px; color:var(--ink-mute); line-height:1.3;}
.stickybar .sb-t{font-family:var(--playful); font-weight:800; font-size:19px; color:var(--purple-deep); line-height:1.15;}
.stickybar .btn{flex:0 0 auto; min-height:48px; padding:12px 22px; font-size:15px;}
@media (max-width:820px){ .stickybar{display:block;} }

@media (max-width:400px){
  /* header must never be the widest thing on the page */
  .hbar{gap:10px; padding:12px 0;}
  .logo{font-size:16px;}
  .nav-cta{font-size:11.5px; padding:9px 13px;}
  .wrap{padding:0 4vw;}
  /* the thumb rail scrolls inside itself; keep it inside the gutter */
  .gal-thumbs{margin-left:0; margin-right:0;}
  .gal-thumbs .thumb{flex:0 0 64px; width:64px;}
}

/* ---- responsive QA fixes ---- */
/* 2x2 size grid: note text of differing length made rows unequal */
.szgrid{grid-auto-rows:1fr;}
.szcard{height:100%;}
/* the reserved-video caption must wrap inside the 9:16 frame at small widths */
.video-frame .vt{max-width:100%; word-break:break-word; overflow-wrap:anywhere;}

/* reserved design slot on a collection page */
.pcard.is-soon{opacity:.72;}

/* collection design slots must read as three equal slots */
.coll-grid{align-items:stretch; grid-auto-rows:1fr;}

/* ============================================================
   SHOP-ALL COLLECTIONS — every design with pricing, one page
   ============================================================ */
.shopfilter{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;}

.shopnote{font-size:13px; color:var(--ink-mute); line-height:1.7; margin-bottom:24px;}

/* pricing-at-a-glance table */
.ptable-wrap{background:#fff; border-radius:20px; padding:8px 22px; box-shadow:0 16px 34px -30px rgba(46,31,53,.4); overflow-x:auto;}

@media (max-width:1100px){ .shopgrid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:820px){ .shopgrid{grid-template-columns:repeat(2,1fr); gap:16px;} }
@media (max-width:600px){

}

/* ---- Collections dropdown (main nav) ---- */
.navdrop{position:relative; display:inline-flex; align-items:center;}
.navdrop .dd{position:absolute; right:0; top:100%; margin-top:14px;
  background:#fff; border:1px solid var(--line); border-radius:6px;
  box-shadow:0 26px 60px -30px rgba(26,18,32,.45);
  min-width:300px; padding:10px; opacity:0; visibility:hidden;
  transform:translateY(6px); transition:.2s; z-index:70;}
.navdrop:hover .dd,.navdrop:focus-within .dd{opacity:1; visibility:visible; transform:translateY(0);}
.navdrop .dd a{display:block; padding:10px 13px; border-radius:4px; transition:background .2s;}
.navdrop .dd a:hover{background:var(--paper-2);}
.navdrop .dd b{display:block; font-family:var(--serif); font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.3;}
.navdrop .dd small{display:block; font-size:11.5px; color:var(--ink-soft); margin-top:2px; line-height:1.5;}
.navdrop .dd .dd-viewall{margin-top:4px; padding-top:12px; border-top:1px solid var(--line);}
.navdrop .dd .dd-viewall b{color:var(--purple-deep);}
@media (max-width:900px){

}
/* (verbatim duplicate of this whole block removed — identical selectors,
   identical values, no visual effect either way) */

/* ---- Hero facts strip (single-page) ---- */
.herofacts{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:30px;}
.herofacts .hf{background:#fff; border-radius:16px; padding:16px 18px;
  box-shadow:0 14px 30px -26px rgba(46,31,53,.5); min-width:0;}
.herofacts .hf b{display:block; font-family:var(--sans); font-weight:800; font-size:19px; color:var(--purple-deep); line-height:1.15;}
.herofacts .hf span{display:block; font-size:12px; color:var(--ink-mute); margin-top:4px;}
@media (max-width:820px){ .herofacts{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .herofacts{gap:10px;} .herofacts .hf{padding:13px 14px;} .herofacts .hf b{font-size:16.5px;} }

/* ============================================================
   KIDS COLLECTIONS HUB — collection sections + product cards
   Reuses the existing .scard product-card language.
   ============================================================ */

/* jump nav — one line per collection, not a paragraph */
.colnav{display:flex; flex-wrap:wrap; gap:8px; margin:38px 0 8px;}

/* collection section */
.colsec{margin-top:56px; scroll-margin-top:24px;}
.colsec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px;
  padding-bottom:14px; border-bottom:1.5px solid var(--line);}
.colsec-head .ch-l{min-width:0;}
.colsec-head h2{font-family:var(--playful); font-weight:800; font-size:clamp(20px,2.2vw,27px);
  color:var(--purple-deep); line-height:1.15; letter-spacing:-.01em;}
.colsec-head p{font-size:13.5px; color:var(--ink-mute); margin-top:6px; line-height:1.6;}

/* three-up product grid inside a collection */
.shopgrid.is-3{grid-template-columns:repeat(3,1fr);}

/* honest empty slot — never looks like a real product */
.scard.is-empty{box-shadow:inset 0 0 0 1.5px var(--line); background:transparent;}

/* collections with no products yet — real names, honest state, stable anchors */
.soongrid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}

/* one quiet link out of the hub */
.hublink{margin-top:52px; text-align:center;}
.hublink a{font-family:var(--playful); font-weight:700; font-size:14px; color:var(--purple);
  border-bottom:2px solid var(--gold); padding-bottom:3px;}

@media (max-width:1100px){ .soongrid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:820px){

}
@media (max-width:600px){
  .colsec{margin-top:44px;}
  .colsec-head{flex-direction:column; align-items:flex-start; gap:10px;}

}
@media (max-width:400px){

}

/* ============================================================
   READY-TO-CUSTOM — three states of one bandana
   Ported from the corporate page; same design language.
   .rtc-art (studio backdrop) and .rtc-bandana (the product) are
   identical in all three windows; only .rtc-brandzone changes.
   ============================================================ */
.miy{margin-top:56px;}

.photo-frame{padding:14px; border-radius:32px; width:100%;
  background:linear-gradient(135deg, #F5C9DD, #EFA9C8);}
.photo-frame.pf-turq{background:linear-gradient(135deg, #A8E8E0, #5FCFC0);}
.photo-frame .frame-inner{border-radius:22px; width:100%; aspect-ratio:4/3;}

@media (max-width:900px){

}
@media (max-width:600px){

  .photo-frame{padding:11px; border-radius:26px;}

}

/* ---- READY-TO-CUSTOM · mobile: compact side-by-side steps ----
   Stacked full-width frames cost ~1.8 screens of scrolling on a phone.
   Below 600px each step becomes one readable row: frame left, text right.
   No content is hidden — every sentence stays. */
@media (max-width:600px){

  /* the branding area must stay readable at a quarter of the size */
  .rtc-bandana{border-radius:9px;}

}
@media (max-width:360px){

}

/* ============================================================
   MOBILE RULE — every interactive element must be tappable.
   Minimum touch target 44px (Apple HIG / WCAG 2.5.5 AAA is 44,
   Material is 48dp). Below 900px every control is padded up to it.
   Body text never drops below 11.5px.
   ============================================================ */
@media (max-width:900px){
  .nav-cta,
  .colnav a,
  .fchip,
  .btn,
  .scard-cta,
  .mainnav a,
  .crumb a,
  .ch-all,
  .hublink a,
  .pcard-cta{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .scard-cta,.ch-all,.hublink a,.pcard-cta{justify-content:flex-start;}

  .nav-cta{padding-left:18px; padding-right:18px;}
  .mainnav a,.crumb a{padding-left:2px; padding-right:2px;}
  /* whole product card is the tap target — keep the label from stealing height */
  .scard-cta{min-height:auto; padding-top:8px;}

  /* readable floor */
  .rtc-note{font-size:11.5px;}
}
@media (max-width:600px){

}
@media (max-width:900px){
  .logo{min-height:44px; display:inline-flex; align-items:center;}

}
@media (max-width:900px){
  .quotecard a,
  footer a,
  .faqitem a,
  .shopnote a{min-height:44px; display:inline-flex; align-items:center;}
}

/* ============================================================
   LEVEL 1 — MAIN COMMERCIAL COLLECTIONS
   Eight commercial worlds. Visual first, minimal copy.
   ============================================================ */
.catgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:stretch; grid-auto-rows:1fr;}

.cat-art{aspect-ratio:4/3; background:linear-gradient(135deg,#EFE4F6,#DCC9EA); display:flex;
  align-items:center; justify-content:center; padding:14px; overflow:hidden;}
.cat-art img{width:100%; height:100%; object-fit:cover; border-radius:16px; background:#fff;}
.cat-art .ci{font-size:34px; color:var(--purple); opacity:.42;}

.cat-body{padding:18px 19px 21px; display:flex; flex-direction:column; flex:1;}
.cat-flag{font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-mute);}
.cat-flag.is-live{color:var(--gold-deep);}
.cat-body h3{font-family:var(--playful); font-weight:800; font-size:17px; color:var(--purple-deep);
  margin-top:7px; line-height:1.22;}
.cat-body p{font-size:12.5px; color:var(--ink-soft); margin-top:8px; line-height:1.6; flex:1;}
.cat-cta{margin-top:15px; font-family:var(--playful); font-weight:700; font-size:12.5px; color:var(--purple);
  border-bottom:2px solid var(--gold); padding-bottom:2px; align-self:flex-start;}

@media (max-width:1100px){ .catgrid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:900px){  .catgrid{grid-template-columns:repeat(2,1fr); gap:16px;} }
@media (max-width:520px){

  .cat-art{flex:0 0 38%; aspect-ratio:1; padding:10px;}
  .cat-body{padding:14px 15px 15px;}
  .cat-body p{font-size:12px;}
}

/* ---- 320px: longer commercial CTA labels must not push the header wide ---- */
@media (max-width:400px){
  .hbar{flex-wrap:wrap; row-gap:8px;}
  .nav-cta{font-size:11px; padding:0 12px; max-width:100%; white-space:nowrap;}
  .logo{font-size:16px;}
}

/* ============================================================
   ARDEN EDITORIAL SYSTEM — ported from the approved
   arden-resort-kids-clubs.html / arden-corporate-bandanas.html
   Same tokens, same rhythm. Nothing reinterpreted.
   ============================================================ */

/* scroll reveal */
[data-reveal]{opacity:0; transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);}
[data-reveal].in-view{opacity:1; transform:none;}
[data-reveal="delay1"]{transition-delay:.1s;} [data-reveal="delay2"]{transition-delay:.2s;}
@media (prefers-reduced-motion:reduce){ [data-reveal]{opacity:1; transform:none; transition:none;} }

/* the ARDEN frame family — turquoise / coral / gold / mint, rotated */
.photo-frame.pf-gold{background:linear-gradient(135deg,#FBE0A8,#F0C05A);}
.photo-frame.pf-coral{background:linear-gradient(135deg,#F5B8A8,#E88264);}
.photo-frame.pf-mint{background:linear-gradient(135deg,#C5E8C0,#8FCF80);}
.photo-frame.pf-sand{background:linear-gradient(135deg,#F3E7D3,#E0CBA8);}
.photo-frame.pf-navy{background:linear-gradient(135deg,#A9C2DE,#5E82AC);}

/* professional photography drop zone — swap the src, keep the layout */
.placeholder-box{background:var(--cream); position:relative; display:flex; align-items:center;
  justify-content:center; box-shadow:inset 0 0 0 1px rgba(46,31,53,.1); overflow:hidden;}
.placeholder-box .label{font-family:var(--sans); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:#b8a8c4; text-align:center; padding:0 10%; line-height:1.6;}
.placeholder-box img{width:100%; height:100%; object-fit:cover; display:block;}

/* editorial separator band */
.emo-break{padding:74px 0; text-align:center; position:relative; overflow:hidden; margin-top:64px;}
.emo-break p{font-family:var(--script); font-size:clamp(26px,3.2vw,40px); color:#fff;
  position:relative; z-index:1; max-width:700px; margin:0 auto; line-height:1.25;}
.emo-break.turq{background:linear-gradient(120deg, var(--turquoise), #0A6F64);}
.emo-break.coral{background:linear-gradient(120deg, var(--coral), #8F2E1E);}
.emo-break.sun{background:linear-gradient(120deg, var(--gold), #C77F00);}
.emo-break.sun p{color:var(--charcoal);}
.emo-break.mint{background:linear-gradient(120deg,#7FCFA8,#3F9C74);}

/* section closing link */
.section-cta{display:block; text-align:center; margin-top:40px; font-family:var(--serif);
  font-style:italic; font-size:16px; color:var(--purple-deep);
  border-bottom:1px solid transparent; transition:border-color .2s ease; width:fit-content;
  margin-left:auto; margin-right:auto;}
.section-cta:hover{border-bottom-color:var(--gold-deep);}

/* collection card with photo veil — the approved Kids treatment */
.coll-card{display:block; border-radius:24px; overflow:hidden; position:relative;
  box-shadow:0 18px 36px -26px rgba(46,31,53,.35); transition:transform .35s ease;}
.coll-card:hover{transform:translateY(-5px);}
.coll-card .ph{position:relative; overflow:hidden; aspect-ratio:4/5;}
.coll-card .veil{position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 30%, rgba(15,50,50,.85) 100%);}
.coll-card .content{position:absolute; bottom:0; left:0; right:0; padding:18px; z-index:2; color:#fff;}
.coll-card .c-name{font-family:var(--serif); font-weight:600; font-size:16px; line-height:1.2;}
.coll-card .c-tag{font-size:10.5px; opacity:.88; margin-top:3px;}
.coll-card .c-count{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gold); margin-top:8px;}

/* ---- collection card grid inside a bandana category page ---- */
.collgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:stretch;}

.coll-card-in{border-radius:20px; overflow:hidden; position:relative; aspect-ratio:4/5;}
.coll-card-media{position:absolute; inset:0; display:block;}
.coll-card-media .ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.coll-card-media .veil{position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 34%, rgba(15,40,50,.88) 100%);}
.coll-card-media .content{position:absolute; bottom:0; left:0; right:0; padding:15px 15px 16px; z-index:2; color:#fff; display:block;}
.coll-card-media .c-name{display:block; font-family:var(--serif); font-weight:600; font-size:16px; line-height:1.22;}
.coll-card-media .c-tag{display:block; font-size:11.5px; opacity:.9; margin-top:4px; line-height:1.4;}
.coll-card-media .c-count{display:block; font-size:10px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--gold); margin-top:8px;}

@media (max-width:1100px){ .collgrid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:820px){  .collgrid{grid-template-columns:repeat(2,1fr); gap:14px;} }
@media (max-width:400px){  .collgrid{grid-template-columns:repeat(2,1fr); gap:10px;}

  .coll-card-media .c-name{font-size:13px;} .coll-card-media .c-tag{font-size:10.5px;} }
/* portrait editorial proportion — the approved Kids coll-card ratio */
.collwrap .photo-frame .frame-inner.coll-card-in{aspect-ratio:4/5;}
@media (max-width:520px){ .collwrap .photo-frame .frame-inner.coll-card-in{aspect-ratio:1/1;} }
@media (max-width:900px){
  .section-cta{min-height:44px; display:flex; align-items:center; justify-content:center; text-align:center;}
}

/* ============================================================
   PRODUCT WINDOWS — the commercial unit.
   Collection heading, then four bandana windows directly below.
   ============================================================ */
.pcol{margin-top:62px; scroll-margin-top:20px;}
.pcol-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  margin-bottom:22px; padding-bottom:14px; border-bottom:1.5px solid var(--line);}
.pcol-head h2{font-family:var(--playful); font-weight:800; font-size:clamp(19px,2.1vw,26px);
  color:var(--purple-deep); line-height:1.15; letter-spacing:-.01em;}
.pcol-head p{font-size:13px; color:var(--ink-mute); margin-top:6px; line-height:1.55;}
.coll-all{flex:0 0 auto; font-family:var(--playful); font-weight:700; font-size:12.5px;
  color:var(--purple); border-bottom:2px solid var(--gold); padding-bottom:2px; white-space:nowrap;}

.pwingrid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; align-items:stretch; grid-auto-rows:1fr;}
.pwingrid + .pwingrid{margin-top:38px;}
.pwin{display:flex; flex-direction:column; min-width:0;}
/* --- UNIVERSAL SALES-LIST CARD — the approved Corporate catalog card
   (site-prototype/corporate-brand-promotions.html) is the one master
   component for every product listing on the site: Corporate, Kids,
   Sports, Celebrations, Holiday, Hospitality. Flat ivory/paper frame,
   6px radius, thin gold-tinted hairline, no colored per-collection mat
   — the .pf-turq/.pf-gold/.pf-coral/.pf-mint/.pf-sand/.pf-navy gradient
   variants (still used elsewhere on these pages for editorial photography,
   e.g. Kids' "Signature Rayon Satin" section) are neutralized specifically
   inside .pwin so the card itself never carries a collection color. Only
   the product photo, product name and (for Kids) the finish-variation
   control tell one collection apart from another — never the card UI. --- */
.pwin .photo-frame,
.pwin .photo-frame.pf-turq,
.pwin .photo-frame.pf-gold,
.pwin .photo-frame.pf-coral,
.pwin .photo-frame.pf-mint,
.pwin .photo-frame.pf-sand,
.pwin .photo-frame.pf-navy{
  background:var(--corp-paper); padding:0; border-radius:6px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.pwin .photo-frame .frame-inner{border-radius:6px;}
a.pwin:hover .photo-frame{transform:none; box-shadow:0 14px 26px -18px rgba(46,31,53,.4);}
a.pwin:hover .pwin-art{box-shadow:inset 0 0 0 1px var(--gold-deep);}
.pwin-art{border-radius:6px; overflow:hidden; aspect-ratio:1; background:#fff;
  box-shadow:inset 0 0 0 1px var(--corp-hairline);}
.pwin-art img{width:100%; height:100%; object-fit:cover; display:block;}
.pwin-art .placeholder-box{width:100%; height:100%;}
.pwin-body{padding:14px 4px 0; display:flex; flex-direction:column; flex:1;}
/* pwin-name/size/price/moq/cta typography lives once, in the FINAL
   COMMERCIAL CARD SYSTEM block below — this earlier set of declarations
   was a fully-superseded duplicate (same selectors, same specificity,
   this one always lost to the later block) removed rather than left to
   shadow future edits, exactly like the .pwin-tiers dupe removed here
   previously. */
/* reserved-position treatment (.pwin.is-reserved, .pwin-res) lives in the
   FINAL COMMERCIAL CARD SYSTEM block below — this was its superseded
   predecessor, removed to stop shadowing it. */

@media (max-width:1100px){ .pwingrid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:900px){  .pwingrid{grid-template-columns:repeat(2,1fr); gap:16px;}
  .pcol-head{flex-direction:column; align-items:flex-start; gap:10px;} }
@media (max-width:400px){  .pwingrid{grid-template-columns:1fr; gap:18px;}
  .pcol{margin-top:44px;} }
@media (max-width:900px){
  .coll-all,.pwin-cta{min-height:44px; display:inline-flex; align-items:center;}
}
/* full Owl commercial system inside a product window */
/* .pwin-tiers and its children are defined once, in the FINAL COMMERCIAL
   CARD SYSTEM block below — this was a dead, fully-superseded duplicate
   (same selectors, same specificity, this one always lost to the later
   block) removed rather than left to shadow future edits. */

/* "Four, then 2x2, then one" is already implemented above (the @1100px/
   @900px/@400px rules at line ~1082) — this used to be a second, later
   @1100px rule that locked the grid at 2 columns for everything ≤1100px
   and silently shadowed the @400px single-column stage. Removed. */
/* a reserved position fills its cell like a real product — never a short stub */
.pwin{height:100%;}
.pwin .photo-frame{display:flex; flex-direction:column;}
.pwin.is-reserved .photo-frame{flex:1;}
.pwin.is-reserved .pwin-art{flex:1; aspect-ratio:auto; min-height:180px;}
.pwin.is-reserved .pwin-body{justify-content:flex-start;}

/* ============================================================
   MOBILE NAVIGATION — same hamburger pattern as index.html.
   Below 900px the desktop nav and CTA hide behind a details/summary
   toggle (.mnav/.mpanel) instead of the old horizontal scroll-strip,
   so every destination stays reachable without an undiscoverable
   off-screen swipe.
   ============================================================ */
.mnav{display:none; margin-left:auto; position:relative;}
.mnav summary{list-style:none; cursor:pointer; display:flex; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center;}
.mnav summary::-webkit-details-marker{display:none;}
.mnav summary span{display:block; width:22px; height:2px; background:var(--purple); border-radius:2px;}
.mnav .mpanel{position:absolute; right:0; top:52px; background:#fff; border:1px solid var(--line); box-shadow:0 26px 60px -28px rgba(46,31,53,.35); width:min(86vw,330px); padding:10px; max-height:76vh; overflow:auto; z-index:70;}
.mnav .mpanel a{display:block; padding:14px; font-size:15px; color:var(--charcoal); min-height:48px;}
.mnav .mpanel a:hover{background:var(--cream);}
.mnav .mpanel .mcta{background:var(--purple); color:#fff; text-align:center; font-weight:600; margin-top:8px; border-radius:4px;}
@media (max-width:900px){
  .hbar{justify-content:space-between;}
  .mainnav{display:none;}
  .nav-cta{display:none !important;}
  .mnav{display:block;}
}

/* ---- longer commercial menu labels need the pill row sooner ---- */
@media (min-width:901px) and (max-width:1040px){
  .hbar{flex-wrap:wrap; row-gap:10px; justify-content:space-between;}
  .mainnav{
    order:3; width:100%; margin-left:0;
    gap:6px; flex-wrap:nowrap;
    overflow-x:auto; scrollbar-width:none; padding-bottom:2px;
  }
  .mainnav::-webkit-scrollbar{display:none;}
  .mainnav > a,
  .mainnav > .navdrop > a{
    flex:0 0 auto; min-height:40px; display:inline-flex; align-items:center;
    padding:0 13px; border-radius:999px;
    background:#fff; box-shadow:inset 0 0 0 1.5px var(--line);
    font-family:var(--playful); font-weight:700; font-size:12.5px; color:var(--purple-deep);
  }
  .mainnav > .navdrop{flex:0 0 auto;}
  .mainnav > .navdrop > a.current{box-shadow:inset 0 0 0 1.5px var(--purple);}
}

/* ============================================================
   COMMERCIAL HIERARCHY — a real bandana never looks like a
   reserved position, and a reserved position never looks broken.
   ============================================================ */

/* --- REAL PRODUCT: the strongest object on the page --- */
.pwin.is-real .photo-frame{box-shadow:0 10px 20px -16px rgba(46,31,53,.32);}
.pwin-flag{display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-family:var(--sans); font-weight:700; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--corp-aubergine); background:var(--corp-ivory);
  padding:6px 10px 6px 8px; border-radius:2px; margin-bottom:9px;
  box-shadow:0 4px 10px -6px rgba(46,31,53,.3);}
.pwin-flag::before{content:''; width:14px; height:2px; border-radius:0; background:var(--gold-deep);}
.pwin-coll{font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:5px;}

/* editorial line that gathers the reserved positions */
.pcol-soon{font-family:var(--serif); font-style:italic; font-size:14px; color:var(--ink-mute);
  margin:-4px 0 16px;}

/* ============================================================
   CATEGORY PERSONALITY — one ARDEN system, seven characters
   ============================================================ */

/* KIDS — the one page (besides Home's own Kids section) allowed to keep
   ARDEN's playful/Baloo identity. Everything else in this shared stylesheet
   now defaults to the mature corporate register (serif headings, sans
   buttons/labels) — these rules restore the playful voice for Kids only. */
.tone-kids .pcol-head h2{font-family:var(--playful); font-weight:800;}
.tone-kids .pcol-head{border-bottom-color:rgba(0,184,169,.28);}
.tone-kids .pcol{margin-top:58px;}
.tone-kids .section-head h1{letter-spacing:-.015em;}
.tone-kids .kick,.tone-kids .section-head h1,.tone-kids .section-head h2,
.tone-kids .btn,.tone-kids .top-strip{font-family:var(--playful);}
.tone-kids .herofacts .hf b,.tone-kids .pwin-res{font-family:var(--playful);}
.tone-kids .section-head h1,.tone-kids .section-head h2{font-weight:800; letter-spacing:normal;}
.tone-kids .btn{font-weight:700; letter-spacing:normal; border-radius:999px;}
/* .nav-cta is intentionally excluded: it is already unified sitewide (dark
   aubergine + gold, !important, see the "PRIMARY B2B CTA" rule) as the one
   conversion button that stays consistent everywhere, Kids included. */

/* CORPORATE — premium + sophisticated + branded: more air, tighter grid */
.tone-corp .pcol{margin-top:88px;}
.tone-corp .pcol-head{border-bottom-color:rgba(94,130,172,.34); padding-bottom:18px;}
.tone-corp .pcol-head h2{font-family:var(--serif); font-weight:600; letter-spacing:.005em;
  font-size:clamp(20px,2.2vw,28px);}
.tone-corp .pcol-head p{font-size:13.5px; letter-spacing:.01em;}
/* .pwingrid gap and .pwin-name size used to be set here — both are now
   the universal card-system default (see the sales-card rules above),
   so the Corporate-only duplicates were removed. */
.tone-corp .pad{padding-bottom:96px;}

/* HOLIDAY — seasonal + celebratory. Serif, not playful: this page serves
   corporate holiday gifting as much as Kids Club workshops, and per brand
   rule, playful typography is restricted to the dedicated Kids page and
   Home's Kids section only. */
.tone-holiday .pcol-head{border-bottom-color:rgba(240,83,61,.3);}
.tone-holiday .pcol-head h2{font-family:var(--serif); font-weight:600;}

/* BIRTHDAY & PARTY — celebratory + giftable, but adult-hosted occasions
   (weddings, bridal showers) share this tone class — serif, not playful. */
.tone-party .pcol-head{border-bottom-color:rgba(240,162,2,.34);}
.tone-party .pcol-head h2{font-family:var(--serif); font-weight:600;}

/* WEDDING & BRIDAL — elegant + refined */
.tone-wedding .pcol{margin-top:78px;}
.tone-wedding .pcol-head{border-bottom-color:rgba(224,203,168,.75);}
.tone-wedding .pcol-head h2{font-family:var(--serif); font-weight:600; letter-spacing:.02em;}
.tone-wedding .pwin-name{font-family:var(--serif); font-weight:600;}

/* FESTIVAL — energetic + event-scale (not currently applied to any page,
   kept consistent with the corporate-identity default regardless). */
.tone-festival .pcol-head{border-bottom-color:rgba(0,184,169,.34);}
.tone-festival .pcol-head h2{font-family:var(--serif); font-weight:600; letter-spacing:-.01em;}

/* SIGNATURE — bespoke */
.tone-signature .pcol-head{border-bottom-color:rgba(240,162,2,.4);}
.tone-signature .pcol-head h2{font-family:var(--serif); font-weight:600;}

/* ============================================================
   FINAL COMMERCIAL CARD SYSTEM
   One geometry. Two states. Never rebuilt when a product lands.
   ============================================================ */

/* --- badge sits ON the artwork, never costs vertical space --- */
.pwin-art{position:relative;}
.pwin .pwin-flag{position:absolute; top:10px; left:10px; z-index:3; margin:0;
  box-shadow:0 4px 10px -6px rgba(46,31,53,.3);}

/* --- sub-heading for a named group of cards inside one larger pcol section
   (e.g. "Halloween" inside a combined "Holiday Collections" section) --- */
.holiday-sub{font-family:var(--serif); font-weight:600; font-size:clamp(17px,2vw,21px);
  color:var(--purple-deep); margin:38px 0 16px;}
.holiday-sub:first-of-type{margin-top:26px;}

/* --- ported from arden-resort-kids-clubs.html's Holiday teaser cards, so any
   site-prototype page can show a playful, non-priced "explore this collection"
   tile grid using the same visual language --- */
.holiday-exp-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.holiday-exp-card{border-radius:24px; overflow:hidden; position:relative; box-shadow:0 18px 36px -26px rgba(46,31,53,.35); transition:transform .3s ease;}
.holiday-exp-card:hover{transform:translateY(-5px);}
.holiday-exp-card .ph{aspect-ratio:3/4;}
.holiday-exp-card .veil{position:absolute; inset:0; background:linear-gradient(180deg, transparent 25%, rgba(15,50,50,.86) 100%); z-index:1;}
.holiday-exp-card .content{position:absolute; bottom:0; left:0; right:0; padding:20px; z-index:2; color:#fff; text-align:center;}
.holiday-exp-card .emoji{font-size:34px; margin-bottom:6px;}
.holiday-exp-card h4{font-family:var(--playful); font-weight:700; font-size:16px; margin-bottom:12px;}
.holiday-exp-card .explore-btn{display:inline-block; background:var(--sun); color:var(--charcoal); font-family:var(--playful); font-weight:700; font-size:11.5px; padding:8px 16px; border-radius:999px;}
.holiday-exp-grid .holiday-exp-card{border:3px solid var(--turquoise);}
.holiday-exp-grid .holiday-exp-card:nth-child(2){border-color:var(--coral);}
.holiday-exp-grid .holiday-exp-card:nth-child(3){border-color:var(--gold);}
.holiday-exp-grid .holiday-exp-card:nth-child(4){border-color:var(--purple);}

/* --- ported from arden-corporate-bandanas.html's on-page section bar, so any
   site-prototype page can offer a capped, sticky jump-menu the same way --- */
.secbar{position:sticky; top:0; z-index:100; background:rgba(253,252,251,.94);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid rgba(26,18,32,.09);}
.secbar-in{max-width:1360px; margin:0 auto; padding:0 6vw; display:flex; align-items:center; gap:26px;
  height:52px; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none;}
.secbar-in::-webkit-scrollbar{display:none;}
.secbar a{font-family:var(--sans),'Inter',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:#5C5062; white-space:nowrap;
  padding:6px 0; border-bottom:2px solid transparent; transition:.2s; min-height:40px;
  display:inline-flex; align-items:center;}
.secbar a:hover, .secbar a.is-active{color:var(--purple,#721E7E); border-bottom-color:var(--gold,#F0D200);}
@media (max-width:700px){
  .secbar-in{gap:20px; height:48px; padding:0 5vw;}
  .secbar a{font-size:11.5px; letter-spacing:.1em;}
}
@media (max-width:900px){ .holiday-exp-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .holiday-exp-grid{grid-template-columns:1fr;} }

/* --- Level 2-8: commercial hierarchy. This is the approved Corporate
   typography (site-prototype/corporate-brand-promotions.html) — status →
   image → collection → name → size → cm → four-size system → one
   starting price → MOQ → CTA — now the ONE card typography for every
   sales listing on the site, not a Corporate-only override. --- */
.pwin-coll{font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold-deep); margin:0 0 5px;}
.pwin-name{font-family:var(--serif); font-weight:600; font-size:16px; line-height:1.18;
  color:var(--purple-deep); letter-spacing:-.01em;}
.pwin-model{font-family:var(--sans); font-weight:700; font-size:.72em; letter-spacing:.06em;
  color:var(--ink-mute); white-space:nowrap; margin-left:3px;}
/* One line of inches ("14 × 14, 18 × 18, 22 × 22, 27 × 27 in"). The card is a
   size container, so the row scales with the card and never wraps. */
.pwin{container-type:inline-size;}
.pwin-size{font-family:var(--sans); font-weight:600; font-size:min(13px,4.7cqw); color:var(--corp-aubergine);
  letter-spacing:0; margin-top:8px; white-space:nowrap;}
.pwin-unit{font-size:10.5px; font-weight:500; color:var(--ink-mute); text-transform:lowercase; margin-left:1px;}
.pwin-price{font-family:var(--sans); font-weight:700; font-size:22px; line-height:1;
  color:var(--purple-deep); margin-top:auto; padding-top:14px;}
.pwin-price span{font-family:var(--sans); font-weight:400; font-size:12px; color:var(--ink-mute);}

/* Empty-state guard: .pwin-price starts with this fallback in the markup
   so a slow/blocked/failed cards.js load never leaves a blank gap in the
   card. cards.js replaces it via .innerHTML on load, which fully
   overwrites this node rather than appending beside it. .pwin-tiers (the
   old boxed 3-tier pricing grid) has been fully retired — no page writes
   that element into a card any more — so its ruleset was removed rather
   than left as dead weight. */
.loading-price{display:inline-block; font-family:var(--sans); font-style:italic;
  font-size:11.5px; font-weight:600; color:var(--ink-mute); opacity:.7;}

.pwin-cta{margin-top:12px; font-family:var(--sans); font-weight:700; font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--corp-aubergine);
  border-bottom:2px solid var(--gold-deep); padding-bottom:2px; align-self:flex-start;}
/* Reserved ("In Development") cards are not clickable — the CTA must not
   borrow the live-link affordance that .pwin-cta uses everywhere else. */
.pwin-cta.pwin-cta-soon{color:var(--ink-mute); font-weight:600; border-bottom-color:transparent; cursor:default;}

/* --- RESERVED: identical geometry, restrained confidence — a flat ivory
   typographic preview (category name in muted aubergine) instead of a
   faded ghost box or a bright per-collection gradient. --- */
.pwin.is-reserved .photo-frame{background:var(--corp-paper); box-shadow:none;}
.pwin.is-reserved .pwin-art{background:var(--corp-ivory); box-shadow:inset 0 0 0 1px var(--corp-hairline);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:10px; padding:22px;}
.pwin-soon-flag{position:absolute; top:10px; left:10px; z-index:3;
  font-family:var(--sans); font-weight:700; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--corp-aubergine); background:var(--corp-ivory);
  padding:5px 10px; border-radius:2px; box-shadow:0 4px 10px -6px rgba(46,31,53,.22);}
.pwin-soon-mark{color:var(--gold-deep); font-size:13px; line-height:1; opacity:.75;}
.pwin-soon-cat{font-family:var(--serif); font-weight:600; font-style:normal; letter-spacing:.02em;
  font-size:16.5px; line-height:1.32; color:var(--corp-aubergine); text-shadow:none;}
.pwin.is-reserved .pwin-body{opacity:1; padding-top:14px;}
.pwin-res{font-family:var(--sans); font-weight:700; font-size:11.5px;
  color:var(--ink-mute); letter-spacing:.02em; line-height:1.3;}
.pwin-resmeta{font-size:10.5px; color:var(--ink-mute); opacity:.7; margin-top:5px;}

/* --- Kids: organic interruption, not another banner --- */
.veil-break{position:relative; margin:74px 0; padding:52px 0; text-align:center; overflow:hidden;}
.veil-break .vb-shape{position:absolute; left:50%; top:50%; width:min(560px,86%); height:230px;
  transform:translate(-50%,-50%) rotate(-3deg); z-index:0;
  border-radius:63% 37% 54% 46% / 43% 37% 63% 57%;
  background:linear-gradient(125deg, rgba(168,232,224,.55), rgba(245,184,168,.45));}
.veil-break p{position:relative; z-index:1; font-family:var(--script);
  font-size:clamp(24px,3vw,34px); color:var(--purple-deep); max-width:620px; margin:0 auto; line-height:1.25;}

/* --- a deliberate pause: whitespace doing the work --- */
.air-break{padding:64px 0 8px; text-align:center;}
@media (max-width:600px){ .veil-break{margin:52px 0; padding:40px 0;} .air-break{padding:40px 0 4px;} }

/* --- Corporate B2B signal strip --- */
.b2bstrip{display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center;
  margin-top:30px; padding:16px 20px; border-radius:16px; background:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(94,130,172,.22);}
.b2bstrip span{font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--purple-deep); white-space:nowrap;}
.b2bstrip span + span::before{content:'·'; margin-right:26px; color:rgba(94,130,172,.5);}
@media (max-width:600px){
  .b2bstrip{gap:8px 0; flex-direction:column; align-items:flex-start; padding:14px 16px;}
  .b2bstrip span + span::before{display:none;}
}

/* ============================================================
   GEOMETRY LOCK — real and reserved must never diverge.
   .photo-frame .frame-inner{aspect-ratio:4/3} (line ~795) was
   out-specifying .pwin-art{aspect-ratio:1}, and the reserved
   card was additionally set to aspect-ratio:auto + flex:1.
   That is two different geometries — the failure condition.
   ============================================================ */
.pwin .photo-frame{flex:0 0 auto;}
.pwin .photo-frame .frame-inner.pwin-art{aspect-ratio:1; height:auto; min-height:0; flex:0 0 auto;}
.pwin.is-reserved .photo-frame{flex:0 0 auto;}
.pwin.is-reserved .pwin-art{aspect-ratio:1; height:auto; min-height:0; flex:0 0 auto;}

/* --- HOSPITALITY & TRAVEL: warm B2B, sand-led --- */
.tone-hosp .pcol{margin-top:78px;}
.tone-hosp .pcol-head{border-bottom-color:rgba(224,203,168,.8);}
.tone-hosp .pcol-head h2{font-family:var(--serif); font-weight:600; letter-spacing:.01em;}
/* .pwin-name used to be bumped to 18px here — the sales card now uses
   the universal 16px size everywhere, so this override was removed. */

/* --- SPORTS & SCHOOL SPIRIT: energetic but disciplined --- */
.tone-sport .pcol{margin-top:66px;}
.tone-sport .pcol-head{border-bottom-color:rgba(94,130,172,.34);}
.tone-sport .pcol-head h2{font-family:var(--serif); font-weight:600; letter-spacing:-.01em;
  text-transform:uppercase; font-size:clamp(18px,2vw,24px);}

/* ============================================================
   COLLECTIONS DROPDOWN — its own colour identity, so it never
   reads as page text. Gold trigger, warm panel, gold-on-hover.
   ============================================================ */
.navdrop > a{color:var(--gold-deep) !important; font-weight:600;}

/* ============================================================
   FIX 1 — the purple ring now means "you are on this page".
   It was permanently stuck on the Collections trigger, so no
   page could ever show which one you were actually viewing.
   ============================================================ */
.mainnav > a.current,
.mainnav > .navdrop > a.current{color:var(--purple) !important; font-weight:700;}

/* ============================================================
   FIX 2 — category card: the centred "BANDANA PHOTOGRAPHY
   COMING SOON" label collided with the card's own title block
   on narrow screens. The card already states its name, tag and
   design count, so the label is redundant inside it.
   ============================================================ */
.coll-card-media .placeholder-box .label{display:none;}
/* A card with a photo shows its image; an empty card shows its own frame
   color. A flat cream panel looked foreign next to a photographed card. */
.coll-card-media .ph.placeholder-box{background:rgba(255,255,255,.58);}

/* ============================================================
   QA FINDING - 1024px (iPad landscape / small laptop)
   Measured: 12 of 12 pages FAIL at 1024.
   Cause 1: pill menu was 40px tall; the touch target must be 44px.
   Cause 2: the 44px rules applied only at <=900px, so 1024 - a touch
            width - fell outside their scope.
   Cause 3: the grid dropped to 2 columns at 1024 - KIDS 13.2 screen,
            HOSPITALITY 10 screens. The home page also broke into 3+3+2 instead of 4x2.
   ============================================================ */

/* 1 — dokunma hedefleri 1040px'e kadar 44px */
@media (max-width:1040px){
  .mainnav > a,
  .mainnav > .navdrop > a{min-height:44px;}
  .nav-cta,.fchip,.btn,.scard-cta,.crumb a,.ch-all,.hublink a,.pcard-cta,
  .coll-all,.pwin-cta,.section-cta,.quotecard a,footer a,.faqitem a,.shopnote a,
  .logo{min-height:44px; display:inline-flex; align-items:center;}

}

/* 2 - four columns at 1024: the page halves in height and home stays 4x2 */
@media (min-width:1001px){
  .pwingrid{grid-template-columns:repeat(4,1fr); gap:20px;}

}
@media (min-width:901px) and (max-width:1000px){
  .pwingrid{grid-template-columns:repeat(2,1fr); gap:18px;}

}

/* ==================================================================
   ARDEN SITE UNIFICATION LAYER
   Purpose: make every page read as one designer's work by aligning the
   frame that appears on all of them - top strip, header, navigation,
   primary CTA and footer - to the language established on the home page.

   Rules observed:
   - Restyle only. No page HTML is rewritten, so no layout can break.
   - Existing class names are reused exactly as they already appear.
   - The Kids Club flagship and the Owl product listing are untouched;
     they carry their own inline styles and do not read this layer.
   - Colors are the authenticated master-logo values already in :root.
   ================================================================== */

/* ---------- top strip: quieter, editorial, not a shouting band ------ */
.top-strip{
  background:var(--purple); color:#fff;
  font-family:var(--sans); font-weight:600; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; padding:11px 5vw;
}

/* ---------- header: paper ground + hairline, matching home ---------- */
header{
  background:rgba(253,252,251,.93);
  border-bottom:1px solid rgba(26,18,32,.08);
}
.hbar{padding:0; min-height:82px; gap:28px;}

/* the single dot becomes the real four-square glyph, drawn in CSS
   from one existing element - no markup change required */
.logo{
  font-family:var(--serif); font-weight:600; font-size:19px;
  letter-spacing:.16em; color:var(--purple); display:inline-flex;
  align-items:center; gap:11px;
}
.logo .mark{
  width:20px; height:20px; border-radius:0; margin-right:0; flex:0 0 auto;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><rect x='0' y='0' width='18' height='18' fill='%23721E7E'/><path d='M4 13 L13 4 M7 15 L15 7' stroke='%23fff' stroke-width='1.4'/><rect x='22' y='0' width='18' height='18' fill='%23F0D200'/><rect x='0' y='22' width='18' height='18' fill='%23F0D200'/><rect x='22' y='22' width='18' height='18' fill='%23721E7E'/><path d='M26 35 L35 26 M29 37 L37 29' stroke='%23fff' stroke-width='1.4'/></svg>") center/contain no-repeat;
}

/* ============================================================
   BRAND SIGNATURE DIVIDER — sitewide component (added 2026-09-09)
   A minimalist, single-tone, outlined rendering of the ARDEN 4-square
   mark above (.logo .mark) — same geometry, reused not redrawn — used
   as a small centered section-transition device. Originally built
   page-local to custom-signature.html as .sig-brandmark; promoted here
   so every page shares one definition instead of duplicating the CSS.
   Two size variants: .section (a full section break) and .compact (a
   tighter break directly under an eyebrow/heading, above body copy).
   Color is #8A6216, not the brighter --gold-deep — measured contrast:
   --gold-deep is ~3:1 on cream/white (fails the 4.5:1 small-text AA
   floor); #8A6216 measures ~5:1+ on both. Markup (repeat verbatim):
     <div class="brand-divider [section|compact]" aria-hidden="true">
       <span class="ln"></span>
       <svg viewBox="0 0 40 40" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.6">
         <rect x="1" y="1" width="16" height="16"/>
         <path d="M4 13 L13 4 M7 15 L15 7" stroke-width="1.1"/>
         <rect x="23" y="1" width="16" height="16"/>
         <rect x="1" y="23" width="16" height="16"/>
         <rect x="23" y="23" width="16" height="16"/>
         <path d="M26 35 L35 26 M29 37 L37 29" stroke-width="1.1"/>
       </svg>
       <span class="ln"></span>
     </div>
   ============================================================ */
.brand-divider{display:flex; align-items:center; justify-content:center; gap:18px;
  max-width:480px; margin:0 auto; color:#8A6216;}
.brand-divider .ln{flex:1 1 auto; height:1px; background:currentColor; opacity:.4;}
.brand-divider svg{flex:none; display:block;}
.brand-divider.section{margin:64px auto;}
/* .emo-break already supplies its own 64px margin-top + 74px padding-top
   sitewide — cancel just the margin so a divider placed right before one
   doesn't stack two full section gaps into one oversized whitespace jump. */
.brand-divider+.emo-break{margin-top:0;}
.brand-divider.compact{gap:12px; max-width:220px; margin:14px auto;}
@media (max-width:640px){ .brand-divider.compact{margin-top:10px; max-width:180px;} }

/* ---------- navigation: same type and gold underline as home -------- */
.mainnav{gap:25px;}
.mainnav a{
  font-family:var(--sans); font-size:12.5px; font-weight:500;
  color:var(--ink-soft); padding-bottom:3px;
  border-bottom:1px solid transparent; transition:color .25s, border-color .25s;
}
.mainnav a:hover{color:var(--purple); border-bottom-color:var(--gold);}
.mainnav a.current{color:var(--purple); border-bottom-color:var(--gold);}
/* 2026-09-09: "Signature Collection" as a plain nav link, not a padded
   pill — a pill sitting inline among plain text links broke row alignment
   (different height, its own underline at a different y-position than
   Home's). Inherits the exact same font-size/padding/border-bottom box
   as every other .mainnav a, so it lines up perfectly; bold + gold is
   what marks it as the featured destination instead. */
.mainnav a.nav-signature{font-weight:800; color:var(--gold-deep);}
.mainnav a.nav-signature:hover,
.mainnav a.nav-signature.current{color:var(--purple); border-bottom-color:var(--gold);}

/* .nav-cta is deliberately not styled in this layer: the "PRIMARY B2B CTA"
   block further down (search !important) re-declares every property this
   selector would set, with !important, so it is the one that actually
   renders. A dead .nav-cta{...}/.nav-cta:hover{...} pair used to sit here. */

/* ---------- footer: the home footer, applied site-wide -------------- */
footer{background:#2A0E31; color:rgba(253,252,251,.7); padding:clamp(38px,5vw,66px) 0 28px;}
footer h5{
  font-family:var(--sans); font-weight:700; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:13px;
}
footer a,footer p{font-family:var(--sans); font-size:13.5px; line-height:1.9; color:rgba(253,252,251,.7);}
footer a{transition:color .2s;}
footer a:hover{color:#fff;}
.flogo{
  font-family:var(--serif); font-weight:600; font-size:21px;
  letter-spacing:.2em; color:#fff;
}
.fbottom{
  border-top:1px solid rgba(253,252,251,.13); margin-top:30px; padding-top:18px;
  font-size:12px; color:rgba(253,252,251,.48);
}
/* Brand column: tagline + full legal imprint, folded into the 4-column
   footer grid (column 1) instead of a separate line below it. */
.ftag{font-size:12px; color:var(--gold); text-transform:uppercase; letter-spacing:.1em; margin-top:8px;}
.fimprint-col{font-size:11px; line-height:1.7; color:rgba(253,252,251,.4); margin-top:14px; max-width:280px;}
/* Legal Policies column note — the explicit non-refundable callout. */
.fpolicy-note{
  margin-top:12px; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); line-height:1.5;
}

/* ---------- shared button family, aligned to home ------------------- */
.btn-gold{background:var(--gold); color:#241726;}
.btn-gold:hover{background:#fff;}

/* ---------- mobile: keep the frame legible ------------------------- */
@media (max-width:900px){
  .hbar{min-height:66px;}
  .logo{font-size:17px; letter-spacing:.13em;}
  .logo .mark{width:18px; height:18px;}
  .top-strip{font-size:10px; letter-spacing:.16em; padding:9px 5vw;}
}

/* ===== PRIMARY B2B CTA - one label, one shape, one colour system =====
   "Start Your Project" is the single conversion action site-wide.
   Adult/corporate surfaces use the deep aubergine ground with gold type. */
.nav-cta{
  background:#2A0E31 !important; color:var(--gold) !important;
  border-radius:0 !important; padding:13px 22px !important;
  font-family:var(--sans) !important; font-weight:700 !important;
  font-size:11.5px !important; letter-spacing:.13em !important;
  text-transform:uppercase !important; transition:background .25s, color .25s !important;
}

/* ============================================================
   CORPORATE-MASTER DESIGN TOKENS — used universally by the sales-card
   system above (not Corporate-only any more) and by the Corporate PDP
   size-selector below.
   ============================================================ */
:root{
  --corp-ivory:#FDFBF6;
  --corp-paper:#F6F1E6;
  --corp-aubergine:#4A1252;
  --corp-hairline: rgba(143,115,0,.32);
}

/* ============================================================
   FINISH VARIATION CONTROL — the one allowed Kids-specific addition to
   the universal sales card. Not a separate Kids card design: a single
   compact line ("FINISH  Half-Painted | Full-Color") added under the
   product name on the one live Owl Adventure Bandana card. Everything
   else about that card (frame, typography, price, MOQ, CTA) is the
   same shared component used by every other listing on the site. Real
   finish selection continues to happen only on the PDP, untouched. --- */
.pwin-variant{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; margin-top:8px;}
.pwin-variant-label{font-family:var(--sans); font-weight:700; font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute); margin-right:2px;}
.pwin-variant-opt{font-family:var(--sans); font-weight:600; font-size:11.5px; color:var(--ink-mute);}
.pwin-variant-opt.is-active{color:var(--corp-aubergine); font-weight:700;
  border-bottom:1.5px solid var(--gold-deep); padding-bottom:1px;}
.pwin-variant-sep{color:var(--line); font-size:11px;}

.nav-cta:hover{ background:var(--purple) !important; color:#fff !important; }
.nav-cta:active{ background:#2A0E31 !important; color:var(--gold) !important; }
/* Current-page featured-navigation state — 2026-09-09, addresses "the
   Customization Studio menu item doesn't attract enough attention on its
   own page." Pages that are themselves the Customization Studio
   destination mark their own .nav-cta with .is-current directly in their
   header markup (no sitewide route-detection introduced, no second
   navigation system) so it reads as ARDEN purple + a thin gold underline —
   more prominent than a passing :hover (plain purple, no underline, reverts
   on mouse-out) without turning the nav item into a loud CTA button. */
.nav-cta.is-current{ background:var(--purple) !important; color:#fff !important;
  box-shadow:inset 0 -3px 0 var(--gold) !important; }
.nav-cta.is-current:active{ background:#2A0E31 !important; color:var(--gold) !important;
  box-shadow:none !important; }

/* ============================================================
   UNIVERSAL PDP SIZE SELECTOR — S · M · L · XL, inches only.
   .szcard is the shared size-picker used by every PDP. Originally
   restrained-only for the 8 Corporate PDPs (body[data-tone="corporate"]);
   extended to Kids' owl-bandana.html (body[data-tone="kids"]) so the
   Kids PDP's buying panel is the same component as Corporate's, per the
   site-wide "one sales template" direction — same principle already
   applied to the catalog-card system above. custom-signature.html has
   no [data-tone] attribute and is deliberately NOT included here, so
   its own configurator keeps its original look untouched.
   ============================================================ */
body[data-tone="corporate"] .szcard,
body[data-tone="kids"] .szcard{
  border-radius:6px; min-height:0; padding:16px 8px 14px;
  box-shadow:inset 0 0 0 1px var(--corp-hairline); background:var(--corp-ivory);
}
body[data-tone="corporate"] .szcard:hover,
body[data-tone="kids"] .szcard:hover{transform:none; box-shadow:inset 0 0 0 1px var(--gold-deep);}
body[data-tone="corporate"] .szcard.is-active,
body[data-tone="kids"] .szcard.is-active{
  box-shadow:0 0 0 2px var(--corp-aubergine); background:#fff;
}
body[data-tone="corporate"] .szcard .szname,
body[data-tone="kids"] .szcard .szname{color:var(--ink-mute);}
body[data-tone="corporate"] .szcard .szin,
body[data-tone="kids"] .szcard .szin{
  font-family:var(--sans); font-weight:700; font-size:16px; color:var(--corp-aubergine); margin-top:9px;
}
body[data-tone="corporate"] .szcard .szunit,
body[data-tone="kids"] .szcard .szunit{
  font-family:var(--sans); font-weight:500; font-size:10.5px; color:var(--ink-mute);
  text-transform:lowercase; margin-left:2px;
}
/* .sznote (the audience note) is removed from the Corporate markup
   entirely — see the 8 PDP files and the PDP template — and from Kids'
   owl-bandana.html markup in this same pass. .szcm (the metric
   equivalent) sits directly beneath the inch line — small and bold, not
   the plain small text the un-scoped default still uses elsewhere. */
body[data-tone="corporate"] .szcard .szcm,
body[data-tone="kids"] .szcard .szcm{
  display:block; font-family:var(--sans); font-weight:700; font-size:10px;
  color:var(--ink-mute); margin-top:3px;
}
body[data-tone="corporate"] .szcard .szflag,
body[data-tone="kids"] .szcard .szflag{
  background:var(--gold-deep); color:#fff; font-family:var(--sans);
  border-radius:2px; padding:4px 9px;
}
body[data-tone="corporate"] .szcard.is-popular,
body[data-tone="kids"] .szcard.is-popular{box-shadow:inset 0 0 0 1px var(--gold-deep);}
body[data-tone="corporate"] .szcard.is-popular.is-active,
body[data-tone="kids"] .szcard.is-popular.is-active{box-shadow:0 0 0 2px var(--corp-aubergine);}

/* ============================================================
   THE ARDEN SALES LIST — the .qopt/.vrow quantity-tier cards inside a
   PDP's "Volume Pricing" section. One universal component for every
   product on every world's PDP: unscoped, tone-agnostic rules, not a
   Corporate style with a Kids exception layered on top. Rendered
   exclusively by ardenRenderVolumeTiers() in js/arden.js from that
   product's own tier data (ARDEN.salesTiersFor()) — a page never
   hand-authors its own .qopt markup.

   grid-template-columns is a fixed design constant (4 tracks), not a
   number tied to any one product's own tier count — it is simply the
   ARDEN sales-list system's card width at this breakpoint. A product
   with fewer tiers renders fewer cards at that identical fixed width;
   the unused grid tracks are left empty (no box is painted there —
   nothing distinguishes it from the container's own background), never
   stretched into and never padded with a placeholder card. Do not
   reintroduce a page-local override for this property, and do not
   reintroduce a Corporate/Kids branch here — a future product world
   with its own tier count still reads this same unscoped rule. */
.qopts{grid-template-columns:repeat(4,1fr);}
.qopt{
  border-radius:6px; background:var(--corp-ivory);
  box-shadow:inset 0 0 0 1px var(--corp-hairline);
}
.qopt:hover{transform:none; box-shadow:inset 0 0 0 1px var(--gold-deep);}
.qopt.is-active{box-shadow:0 0 0 2px var(--corp-aubergine); background:#fff;}
.qopt .qn{font-family:var(--sans); color:var(--corp-aubergine);}
.qopt .qp{color:var(--gold-deep);}
.qopt.is-active .qn,
.qopt.is-active .qp{color:var(--corp-aubergine);}
.qopt.is-quoted .qp{color:var(--ink-mute);}
.qopt .qrole{color:var(--gold-deep); margin-top:9px;}
/* Cards show quantity / price / program label only (the design-fee and
   DDP tooltip line that used to live inside each card moved to
   .corp-program-services, shown once below) — more whitespace, stronger
   price hierarchy, easier to scan at a glance. */
.qopts-lg .qopt{min-height:108px; padding:22px 10px;}
.qopts-lg .qopt .qn{font-size:27px;}
.qopts-lg .qopt .qp{margin-top:11px; font-size:14px;}
@media (max-width:900px){
  .qopts{grid-template-columns:repeat(2,1fr);}
}

/* PROGRAM SERVICES — design-fee and DDP rules, stated once, beneath the
   pricing cards, instead of repeated inside all four. Restrained editorial
   register: thin gold hairline, no rounded promotional box. Extended to
   Kids' owl-bandana.html, which now carries the same block with its own
   real design-fee/DDP figures. */
body[data-tone="corporate"] .corp-program-services,
body[data-tone="kids"] .corp-program-services{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--corp-hairline);
}
body[data-tone="corporate"] .cps-t,
body[data-tone="kids"] .cps-t{
  font-family:var(--sans); font-weight:700; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-deep); margin-bottom:10px;
}
body[data-tone="corporate"] .cps-row,
body[data-tone="kids"] .cps-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:9px 0; border-bottom:1px solid var(--corp-hairline);
}
body[data-tone="corporate"] .cps-row:last-child,
body[data-tone="kids"] .cps-row:last-child{border-bottom:none;}
body[data-tone="corporate"] .cps-row b,
body[data-tone="kids"] .cps-row b{
  font-family:var(--sans); font-weight:600; font-size:12.5px; color:var(--corp-aubergine);
  white-space:nowrap;
}
body[data-tone="corporate"] .cps-row span,
body[data-tone="kids"] .cps-row span{
  font-family:var(--sans); font-size:11.5px; color:var(--ink-mute); text-align:right;
}
@media (max-width:520px){
  body[data-tone="corporate"] .cps-row,
  body[data-tone="kids"] .cps-row{flex-direction:column; gap:3px;}
  body[data-tone="corporate"] .cps-row span,
  body[data-tone="kids"] .cps-row span{text-align:left;}
}

/* ============================================================
   ARDEN CONCIERGE — premium B2B guided-recommendation flow.
   Reuses the same overlay/panel mechanics as .qa-overlay/.qa-panel
   (fixed backdrop, cream rounded panel, .btn CTAs) rather than a new
   modal system — a distinct visual vocabulary (.concierge-*) inside
   the same established shell so it reads as ARDEN, not a bolted-on
   generic chat widget. No chat bubbles, no avatar, no emoji — a card-
   based consultation, matching the "premium editorial consultation"
   brief, not a support widget.
   ============================================================ */
/* floating sitewide trigger — the ARDEN brand mark itself, cropped to
   just the four-square glyph via background-position (see the exact
   crop math in concierge.js's build comment); never a chat/robot icon.
   Sits below the overlay's z-index so opening the panel visually covers
   it, and lifts above js/arden.js's dynamically-injected .stickybar
   (PDP order bar) on the rare page where both could appear together. */
.concierge-fab{position:fixed; right:22px; bottom:22px; z-index:190; width:60px; height:60px; border-radius:50%;
  background:var(--cream); box-shadow:0 14px 30px -12px rgba(46,31,53,.45), inset 0 0 0 1.5px var(--line);
  display:flex; align-items:center; justify-content:center; padding:0; transition:transform .25s ease, box-shadow .25s ease;}
.concierge-fab:hover{transform:translateY(-3px); box-shadow:0 18px 34px -12px rgba(46,31,53,.5), inset 0 0 0 1.5px var(--line);}
.concierge-fab:focus-visible{outline:2px solid var(--purple); outline-offset:3px;}
.concierge-fab-mark{width:100%; height:100%; border-radius:50%; background-repeat:no-repeat;
  background-image:url('https://ardencolorme.com/wp-content/uploads/2026/09/ARDEN_LOGOLARseffaf.png');
  background-size:283px 200px; background-position:-112px -33px;}
body.has-stickybar .concierge-fab{bottom:calc(22px + 64px);}
@media (max-width:600px){
  .concierge-fab{right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); width:52px; height:52px;}
  .concierge-fab-mark{background-size:244px 173px; background-position:-97px -29px;}
  body.has-stickybar .concierge-fab{bottom:calc(16px + env(safe-area-inset-bottom,0px) + 64px);}
}

.concierge-overlay{position:fixed; inset:0; z-index:210; background:rgba(46,31,53,.55); backdrop-filter:blur(4px);
  display:none; align-items:flex-start; justify-content:center; padding:24px 16px; overflow-y:auto;}
.concierge-overlay.open{display:flex;}
.concierge-panel{width:100%; max-width:560px; background:var(--cream); border-radius:20px; overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.6); margin:auto 0;}
.concierge-head{padding:24px 28px 20px; background:#fff; border-bottom:1px solid var(--line); position:relative;}
.concierge-eyebrow{font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep);}
.concierge-head h3{font-family:var(--serif); font-weight:600; font-size:21px; color:var(--purple-deep); letter-spacing:-.01em; margin-top:6px; line-height:1.25;}
.concierge-head p{font-family:var(--sans); font-size:13px; color:var(--ink-soft); margin-top:6px; line-height:1.55;}
.concierge-close{position:absolute; top:20px; right:22px; width:32px; height:32px; border-radius:50%; font-size:16px; color:var(--ink-mute);}
.concierge-close:hover{background:var(--lavender); color:var(--purple-deep);}
.concierge-back{display:inline-flex; align-items:center; gap:5px; font-family:var(--sans); font-weight:700; font-size:12px;
  color:var(--ink-mute); margin-bottom:14px;}
.concierge-back:hover{color:var(--purple-deep);}

.concierge-body{padding:26px 28px;}
.concierge-progress{display:flex; gap:5px; margin-bottom:18px;}
.concierge-progress span{flex:1; height:3px; border-radius:3px; background:var(--line);}
.concierge-progress span.is-done{background:var(--gold-deep);}

.concierge-note{font-size:13px; line-height:1.6; color:var(--purple-deep); background:var(--lavender);
  border-radius:12px; padding:12px 14px; margin-bottom:16px;}
.concierge-story{font-family:var(--serif); font-size:16px; line-height:1.65; color:var(--charcoal); margin-bottom:18px;}
.concierge-story + .concierge-credline{margin-top:-10px;}
.concierge-credline{font-family:var(--sans); font-size:12px; color:var(--ink-mute); margin-bottom:18px; line-height:1.6;}

.concierge-q{font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:12px;}
.concierge-opts{display:grid; gap:10px;}
.concierge-opt{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left;
  padding:14px 16px; border-radius:12px; background:#fff; box-shadow:inset 0 0 0 1.5px var(--line);
  font-family:var(--sans); font-weight:600; font-size:14px; color:var(--charcoal); transition:box-shadow .2s ease;}
.concierge-opt:hover{box-shadow:inset 0 0 0 1.5px var(--purple);}
.concierge-opt.is-active{box-shadow:inset 0 0 0 2px var(--purple); background:var(--lavender);}
.concierge-opt .co-arrow{flex:none; color:var(--gold-deep); font-size:15px;}

.concierge-foot{display:flex; justify-content:space-between; gap:12px;}
.concierge-foot:empty{display:none;}
/* Self-contained CTA — deliberately NOT reusing the host page's own
   .btn/.btn-purple naming, since that convention differs page to page
   (index.html's own inline stylesheet uses .btn-primary, not .btn-purple
   — see the bug this avoided). Keeps the whole component portable to
   any page regardless of that page's own button-class convention. */
.concierge-cta{display:flex; align-items:center; justify-content:center; width:100%;
  font-family:var(--sans); font-weight:700; font-size:14px; letter-spacing:.03em;
  color:#fff; background:var(--purple); border-radius:4px; padding:15px 24px;
  box-shadow:0 12px 26px -10px rgba(124,45,150,.5); transition:transform .25s ease; text-align:center;}
.concierge-cta:hover{transform:translateY(-2px);}
.concierge-cta[hidden]{display:none;}
.concierge-ghost{background:none; color:var(--ink-mute); font-family:var(--sans); font-weight:700; font-size:13px; display:inline-block;}
.concierge-ghost:hover{color:var(--purple-deep);}
.concierge-ask-link{display:block; text-align:center; font-family:var(--sans); font-weight:600; font-size:12.5px;
  color:var(--ink-mute); margin-top:16px;}
.concierge-ask-link:hover{color:var(--purple-deep);}
.concierge-cta:disabled{opacity:.45; pointer-events:none; cursor:default;}

/* compact supporting-detail chips (Direction screen, Ask screen) —
   deliberately lighter-weight than .concierge-opt, which stays
   reserved for the two primary decisions (Purpose, Priority). */
.concierge-chip-label{font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:8px;}
.concierge-chip-group{display:flex; flex-wrap:wrap; gap:8px;}
.concierge-chip-group[hidden]{display:none;}
.concierge-chip{padding:9px 14px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1.5px var(--line);
  font-family:var(--sans); font-weight:600; font-size:13px; color:var(--charcoal); transition:box-shadow .2s ease;}
.concierge-chip:hover{box-shadow:inset 0 0 0 1.5px var(--purple);}
.concierge-chip.is-active{box-shadow:inset 0 0 0 2px var(--purple); background:var(--lavender); color:var(--purple-deep);}
.concierge-chip-ghost{background:none; box-shadow:none; color:var(--ink-mute); text-decoration:underline; padding:9px 4px;}

/* recommendation card */
.concierge-rec{background:#fff; border-radius:14px; padding:20px 22px; box-shadow:inset 0 0 0 1.5px var(--line); margin-bottom:16px;}
.concierge-rec-eyebrow{font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep);}
.concierge-rec-title{font-family:var(--serif); font-weight:600; font-size:19px; color:var(--purple-deep); margin-top:6px;}
.concierge-rec-list{margin-top:12px; display:grid; gap:6px;}
.concierge-rec-row{display:flex; align-items:baseline; gap:8px; font-family:var(--sans); font-size:13.5px; color:var(--charcoal);}
.concierge-rec-row .ra{color:var(--gold-deep); flex:none;}
.concierge-rec-why{margin-top:14px; padding-top:14px; border-top:1px solid var(--line);}
.concierge-rec-why-label{font-family:var(--sans); font-weight:700; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:5px;}
.concierge-rec-why p{margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-soft);}
.concierge-rec-link{display:inline-block; margin-top:12px; font-family:var(--sans); font-weight:700; font-size:13px;
  color:var(--purple-deep); border-bottom:1.5px solid var(--gold-deep); padding-bottom:1px;}
.concierge-rec-link:hover{color:var(--gold-deep);}

.concierge-contact{display:grid; gap:12px; margin-top:4px;}
.concierge-field label{display:block; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:6px;}
.concierge-field input,.concierge-field textarea{width:100%; padding:12px 13px; border-radius:12px; border:none; outline:none;
  background:#fff; box-shadow:inset 0 0 0 1.5px var(--line); font-family:var(--sans); font-size:14px; color:var(--charcoal);}
.concierge-field textarea{min-height:64px; resize:vertical;}
.concierge-field input:focus,.concierge-field textarea:focus{box-shadow:inset 0 0 0 2px var(--purple);}
.concierge-field input.err{box-shadow:inset 0 0 0 2px var(--coral);}
.concierge-two{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.concierge-sent-note{font-size:12.5px; color:var(--ink-mute); margin-top:10px; line-height:1.55;}
.concierge-transparency{font-size:11.5px; color:var(--ink-mute); margin-top:8px; line-height:1.5;}

@media (max-width:600px){
  .concierge-panel{border-radius:16px;}
  .concierge-two{grid-template-columns:1fr;}
  .concierge-head{padding:20px 20px 16px;}
  .concierge-body{padding:20px 20px;}
  .concierge-foot{padding:16px 20px 20px;}
}

/* homepage entry point — a restrained editorial card, not a chatbot ad */
.concierge-entry-sec{background:var(--cream);}
.concierge-entry{background:#fff; border-radius:18px; box-shadow:inset 0 0 0 1.5px var(--line);
  padding:clamp(28px,4vw,44px) clamp(24px,4vw,52px); display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px,4vw,40px); flex-wrap:wrap;}
.concierge-entry-copy{max-width:52ch;}
.concierge-entry-eyebrow{font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep);}
.concierge-entry-copy h2{font-family:var(--serif); font-weight:500; letter-spacing:-.01em; line-height:1.2;
  font-size:clamp(21px,2.6vw,28px); color:var(--purple-deep); margin-top:10px;}
.concierge-entry-copy p{font-family:var(--sans); font-size:14px; line-height:1.65; color:var(--ink-soft); margin-top:10px;}
.concierge-entry-cta{flex:none;}
.concierge-entry-cta .btn{white-space:nowrap;}
@media (max-width:700px){
  .concierge-entry{flex-direction:column; align-items:stretch; text-align:left;}
  .concierge-entry-cta .btn{width:100%;}
}

/* ============================================================
   ARDEN PROJECT GUIDE — post-purchase project handoff (site-
   prototype/js/project-guide.js). A separate component from the
   pre-sale Concierge above: same brand tokens (purple/gold/cream/
   serif+sans), same modal-shell proportions, deliberately distinct
   class prefix (.pg-) so nothing here can collide with .concierge-*,
   and positioned at the opposite corner (left, not right) so the two
   floating triggers can never overlap on a page that has both (e.g.
   custom-signature.html, which loads both scripts).
   ============================================================ */
.pg-fab{position:fixed; left:22px; bottom:22px; z-index:190; width:60px; height:60px; border-radius:50%;
  background:var(--cream); box-shadow:0 14px 30px -12px rgba(46,31,53,.45), inset 0 0 0 1.5px var(--gold-deep);
  display:flex; align-items:center; justify-content:center; padding:0; transition:transform .25s ease, box-shadow .25s ease;}
.pg-fab[hidden]{display:none;}
.pg-fab:hover{transform:translateY(-3px); box-shadow:0 18px 34px -12px rgba(46,31,53,.5), inset 0 0 0 1.5px var(--gold-deep);}
.pg-fab:focus-visible{outline:2px solid var(--purple); outline-offset:3px;}
.pg-fab-mark{width:100%; height:100%; border-radius:50%; background-repeat:no-repeat;
  background-image:url('https://ardencolorme.com/wp-content/uploads/2026/09/ARDEN_LOGOLARseffaf.png');
  background-size:283px 200px; background-position:-112px -33px;}
@media (max-width:600px){
  .pg-fab{left:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); width:52px; height:52px;}
  .pg-fab-mark{background-size:244px 173px; background-position:-97px -29px;}
}

.pg-overlay{position:fixed; inset:0; z-index:210; background:rgba(46,31,53,.55); backdrop-filter:blur(4px);
  display:none; align-items:flex-start; justify-content:center; padding:24px 16px; overflow-y:auto;}
.pg-overlay.open{display:flex;}
.pg-panel{width:100%; max-width:560px; background:var(--cream); border-radius:20px; overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.6); margin:auto 0;}
.pg-head{padding:24px 28px 20px; background:#fff; border-bottom:1px solid var(--line); position:relative;}
.pg-eyebrow{font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep);}
.pg-head h3{font-family:var(--serif); font-weight:600; font-size:21px; color:var(--purple-deep); letter-spacing:-.01em; margin-top:6px; line-height:1.25;}
.pg-head p{font-family:var(--sans); font-size:13px; color:var(--ink-soft); margin-top:6px; line-height:1.55;}
.pg-close{position:absolute; top:20px; right:22px; width:32px; height:32px; border-radius:50%; font-size:16px; color:var(--ink-mute);}
.pg-close:hover{background:var(--lavender); color:var(--purple-deep);}
.pg-back{display:inline-flex; align-items:center; gap:5px; font-family:var(--sans); font-weight:700; font-size:12px;
  color:var(--ink-mute); margin-bottom:14px;}
.pg-back:hover{color:var(--purple-deep);}

.pg-body{padding:26px 28px;}

/* read-only order context — a project brief header, not an editable form */
.pg-context{background:#fff; border-radius:14px; padding:18px 20px; box-shadow:inset 0 0 0 1.5px var(--line); margin-bottom:18px;}
.pg-context-label{font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:10px;}
.pg-context-grid{display:grid; gap:7px;}
.pg-context-row{display:flex; justify-content:space-between; gap:12px; font-family:var(--sans); font-size:13.5px; color:var(--charcoal);}
.pg-context-row span:first-child{color:var(--ink-mute);}
.pg-context-row span:last-child{font-weight:600; text-align:right;}

.pg-note{font-size:13px; line-height:1.6; color:var(--purple-deep); background:var(--lavender);
  border-radius:12px; padding:12px 14px; margin-bottom:16px;}

/* read-only stage timeline (Ready-to-Order's Order Received/Production/
   Delivery; the "here's what happens next" screens for the two custom
   routes) — informational rows, never a live/animated progress tracker,
   since no backend exists to report real status. */
.pg-timeline{display:grid; gap:16px; margin-bottom:6px;}
.pg-stage{padding-top:14px; border-top:1px solid var(--line);}
.pg-stage:first-child{padding-top:0; border-top:none;}
.pg-stage-label{font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:5px;}
.pg-stage p{margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-soft);}

.pg-field{margin-bottom:14px;}
.pg-field label{display:block; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:6px;}
.pg-field-helper{font-size:12px; color:var(--ink-mute); margin-top:5px; line-height:1.5;}
.pg-field textarea,.pg-field input[type="text"]{width:100%; padding:12px 13px; border-radius:12px; border:none; outline:none;
  background:#fff; box-shadow:inset 0 0 0 1.5px var(--line); font-family:var(--sans); font-size:14px; color:var(--charcoal);}
.pg-field textarea{min-height:64px; resize:vertical;}
.pg-field textarea:focus,.pg-field input:focus{box-shadow:inset 0 0 0 2px var(--purple);}
.pg-field textarea.err{box-shadow:inset 0 0 0 2px var(--coral);}
.pg-field input[type="file"]{width:100%; font-family:var(--sans); font-size:12.5px; color:var(--ink-soft);}
.pg-err{font-size:12px; color:var(--coral); font-weight:600; margin:-8px 0 14px;}

.pg-cta{display:flex; align-items:center; justify-content:center; width:100%;
  font-family:var(--sans); font-weight:700; font-size:14px; letter-spacing:.03em;
  color:#fff; background:var(--purple); border-radius:4px; padding:15px 24px; border:none;
  box-shadow:0 12px 26px -10px rgba(124,45,150,.5); transition:transform .25s ease; text-align:center; cursor:pointer;}
.pg-cta:hover{transform:translateY(-2px);}
.pg-cta[hidden]{display:none;}
.pg-ghost{background:none; color:var(--ink-mute); font-family:var(--sans); font-weight:700; font-size:13px; display:inline-block; cursor:pointer;}
.pg-ghost:hover{color:var(--purple-deep);}
.pg-transparency{font-size:11.5px; color:var(--ink-mute); margin-top:10px; line-height:1.5;}

@media (max-width:600px){
  .pg-panel{border-radius:16px;}
  .pg-head{padding:20px 20px 16px;}
  .pg-body{padding:20px 20px;}
}

/* Card photo carousel (cards.js): click the photo for the next gallery image. */
.pwin-art img{transition:opacity .28s ease;}
.pwin-dots{position:absolute; left:0; right:0; bottom:10px; z-index:3; display:flex; justify-content:center; gap:6px; pointer-events:none;}
.pwin-dots i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.5); box-shadow:0 0 0 1px rgba(46,31,53,.28);}
.pwin-dots i.on{background:#fff; box-shadow:0 0 0 1px rgba(46,31,53,.4);}
.pwin-next{position:absolute; right:10px; top:50%; transform:translateY(-50%); z-index:3; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.86); color:var(--purple-deep); font-size:22px; line-height:27px; text-align:center;
  box-shadow:0 2px 8px rgba(46,31,53,.25); opacity:0; transition:opacity .2s; pointer-events:none;}
.pwin:hover .pwin-next, .pwin:focus-visible .pwin-next{opacity:1;}
@media (hover:none){ .pwin-next{opacity:.9;} }