/* WD Aroma product page - 1:1 port of the approved local draft
   Project_02_产品单页草稿/draft/wd-2410-alloy-draft.html

   Every rule below is the draft rule, scoped under .wda so it can never leak
   into another page. Do not "tidy" values here: they are the signed-off
   design system numbers and the draft is the reference render. */

.wda{
  --bg:#FFFDF9; --surface:#F4EEDD; --surface2:#E8D4B0; --border:#EFEAD9;
  --brand:#D5AB7C; --brandDeep:#A37A4E; --ink:#2A1F17; --ink2:#5A4A3C;
  --muted:#7A6A55; --dark:#1F1813; --onDark:#FFFDF9; --darkMuted:rgba(255,253,249,.62);
  --rCard:18px; --rImg:24px; --rPill:999px; --maxW:1240px;
  --gap:clamp(64px,9vw,112px);
  --shadowCard:0 6px 24px rgba(42,31,23,.08),0 2px 6px rgba(42,31,23,.05);
  --shadowBtn:0 6px 18px rgba(213,171,124,.32);
}
.wda *{box-sizing:border-box}
.wda{margin:0;background:var(--bg);color:var(--ink2);
  font:400 16px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}

/* The draft is a standalone document, so its bands run edge to edge.
   Astra wraps us in .ast-container (max-width + 20px padding), which would
   letterbox the dark RFQ section. body.wda-page is added in PHP rather than
   using :has(), so the rule is deterministic in every browser. The inner
   .wrap still does the 1240px centring exactly as the draft does. */
.wda-page #content .ast-container,
.wda-page #primary,
.wda-page #content .site-content > .ast-container{max-width:none;padding-left:0;padding-right:0;width:100%}
.wda-page #content{padding:0}
.wda-page .ast-single-post-order,
.wda-page .entry-header,
.wda-page .ast-woocommerce-container{padding:0;margin:0}
.wda,.wda-scope{
  --bg:#FFFDF9; --surface:#F4EEDD; --surface2:#E8D4B0; --border:#EFEAD9;
  --brand:#D5AB7C; --brandDeep:#A37A4E; --ink:#2A1F17; --ink2:#5A4A3C;
  --muted:#7A6A55; --dark:#1F1813; --onDark:#FFFDF9; --darkMuted:rgba(255,253,249,.62);
  --rCard:18px; --rImg:24px; --rPill:999px; --maxW:1240px;
  --gap:clamp(64px,9vw,112px);
  --shadowCard:0 6px 24px rgba(42,31,23,.08),0 2px 6px rgba(42,31,23,.05);
  --shadowBtn:0 6px 18px rgba(213,171,124,.32);
}
.wda .wrap{max-width:var(--maxW);margin:0 auto;padding:0 24px}
.wda h1,.wda h2,.wda h3,.wda h4{color:var(--ink);margin:0;font-family:Manrope,system-ui,sans-serif}
.wda h1{font-weight:800;font-size:clamp(34px,5.2vw,72px);line-height:1.08;letter-spacing:-.02em}
.wda h2{font-weight:700;font-size:clamp(28px,3.6vw,44px);line-height:1.15;letter-spacing:-.01em}
.wda h3{font-weight:700;font-size:22px;line-height:1.3}
.wda h4{font-weight:600;font-size:17px;line-height:1.35}
.wda p{margin:0 0 14px}
.wda a{color:var(--brandDeep);text-decoration:none}
.wda a:hover{text-decoration:underline}
.wda .eyebrow{font:600 12px/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.18em;color:var(--brandDeep)}
.wda .mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500}
.wda .muted{color:var(--muted)}
.wda .btn{display:inline-flex;align-items:center;gap:9px;border-radius:var(--rPill);
  font:600 14.5px/1 Manrope,sans-serif;padding:15px 27px;border:1px solid transparent;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.wda .btn:hover{transform:translateY(-1px);text-decoration:none}
.wda .btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadowBtn)}
.wda .btn-primary:hover{background:var(--brandDeep)}
.wda .btn-ghost{background:transparent;color:var(--ink);border-color:var(--border)}
.wda .btn-ghost:hover{background:var(--surface);border-color:var(--surface2)}
.wda .btn:focus-visible,.wda a:focus-visible,.wda summary:focus-visible,.wda .tab:focus-visible,.wda .thumb:focus-visible{
  outline:3px solid var(--brandDeep);outline-offset:2px}
.wda .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rCard);padding:32px 28px}
.wda .card-plain{background:var(--bg);border:1px solid var(--border);border-radius:var(--rCard);padding:32px 28px}
.wda section{padding-block:var(--gap)}
.wda .icon{width:19px;height:19px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.wda .crumb{background:var(--surface);border-bottom:1px solid var(--border);padding:13px 0;font-size:14px}
.wda .crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;align-items:center}
.wda .crumb li{display:flex;gap:8px;align-items:center;color:var(--muted)}
.wda .crumb li[aria-current]{color:var(--ink);font-weight:600}
.wda .hero{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:56px;padding-block:56px}
.wda .hero>*{min-width:0}
.wda .gal{position:sticky;top:96px;align-self:start}
.wda .stage{position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--rImg);overflow:hidden;aspect-ratio:1/1}
.wda .stage img,.wda .stage iframe{width:100%;height:100%;object-fit:cover;display:block;border:0}
.wda .stage>figure{display:none;margin:0;height:100%}
.wda .stage>figure.on{display:block}
.wda .badge{position:absolute;top:18px;left:18px;z-index:2;background:rgba(31,24,19,.86);
  color:var(--onDark);border-radius:var(--rPill);padding:8px 15px;font:600 12px/1 Inter,sans-serif;
  letter-spacing:.1em;text-transform:uppercase}
.wda .sample-line{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.wda .sample-line .muted{font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.wda .smp{display:flex;align-items:center;gap:14px;padding:10px 16px;border:1.5px solid var(--border);border-radius:var(--rPill);background:var(--surface);cursor:pointer;font:600 14px/1 Manrope,sans-serif;color:var(--ink);transition:all .18s}
.wda .smp span{font:500 13px/1 Inter,sans-serif;color:var(--ink2)}
.wda .smp b{font:800 17px/1 Manrope,sans-serif;color:var(--brand)}
.wda .smp:hover{border-color:var(--brand);transform:translateY(-1px)}
.wda .smp[aria-pressed="true"]{border-color:var(--brand);background:var(--brand);color:#fff}
.wda .smp[aria-pressed="true"] span,.wda .smp[aria-pressed="true"] b{color:#fff}
.wda .thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin-top:14px}
.wda .thumb{padding:0;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;
  overflow:hidden;cursor:pointer;aspect-ratio:1/1;position:relative;transition:border-color .18s}
.wda .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.wda .thumb[aria-selected="true"]{border-color:var(--brand);box-shadow:var(--shadowBtn)}
.wda .thumb .vid{position:absolute;inset:0;display:grid;place-items:center;background:rgba(31,24,19,.5);color:#fff}
.wda .pricebox{background:var(--surface);border:1px solid var(--border);border-radius:var(--rCard);
  padding:22px 24px;margin:22px 0}
.wda .pricerow{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.wda .price{font:800 44px/1 Manrope,sans-serif;color:var(--brandDeep);letter-spacing:-.02em}
.wda .price sup{font-size:20px;font-weight:700;top:-.7em}
.wda .tiers{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.wda .tier{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:11px 15px;flex:1 1 118px}
.wda .tier b{display:block;color:var(--ink);font:700 15px/1.2 Manrope,sans-serif;margin-top:3px}
.wda .pricebox .tier span{font:600 11px/1 Inter,sans-serif;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted)}

/* Floor-area helper. Buyers ask for square metres; we publish cubic metres.
   The .tier pill was already in the draft stylesheet, so this block only adds
   the pressed state and the read-out line - no new colour, no new font. */
.wda .ceilbox{border:1px solid var(--border);background:#fff;border-radius:var(--rCard);padding:20px 22px;margin:22px 0}
.wda .ceils{display:flex;gap:9px;flex-wrap:wrap}
.wda .ceils .tier{appearance:none;cursor:pointer;text-align:left;flex:1 1 92px;
  border:1.5px solid var(--border);background:var(--bg);border-radius:12px;padding:10px 13px;transition:.16s ease}
.wda .ceils .tier span{display:block;font:600 11px/1 Inter,sans-serif;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted)}
.wda .ceils .tier b{display:block;color:var(--ink);font:500 15px/1.2 "JetBrains Mono",ui-monospace,monospace;margin-top:5px}
.wda .ceils .tier:hover{border-color:var(--brand)}
.wda .ceils .tier[aria-pressed="true"]{background:var(--surface);border-color:var(--brand)}
.wda .ceils .tier[aria-pressed="true"] span{color:var(--brandDeep)}
.wda .ceilout{display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap;
  border-top:1px solid var(--border);margin:16px 0 0;padding-top:14px}
.wda .ceilout strong{font:800 30px/1 Manrope,system-ui,sans-serif;color:var(--ink)}
.wda .ceilout span{font:500 13px/1 "JetBrains Mono",ui-monospace,monospace;color:var(--muted)}
.wda .ceilsrc{color:var(--brandDeep)}
.wda .ceilfine{margin:12px 0 0;font:400 13px/1.55 Inter,sans-serif;color:var(--muted)}
.wda .spec-quick{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin:22px 0}
.wda .sq{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:13px 15px}
.wda .sq span{display:block;font:600 11px/1 Inter,sans-serif;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted);margin-bottom:6px}
.wda .sq b{color:var(--ink);font:500 15px/1.3 "JetBrains Mono",monospace}
.wda .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.wda .trust{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px;padding-top:20px;border-top:1px solid var(--border)}
.wda .trust div{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.wda .trust svg{color:var(--brandDeep)}
.wda .tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:2px}
.wda .tab{background:transparent;border:1px solid transparent;border-radius:var(--rPill) var(--rPill) 0 0;
  padding:14px 22px;font:600 14.5px/1 Manrope,sans-serif;color:var(--muted);cursor:pointer;
  transition:color .18s,background .18s}
.wda .tab:hover{color:var(--ink);background:var(--surface)}
.wda .tab[aria-selected="true"]{color:var(--ink);background:var(--surface);
  border-color:var(--border);border-bottom-color:var(--surface)}
.wda .panel{display:none;padding-top:34px}
.wda .panel.on{display:block}
.wda table{width:100%;border-collapse:collapse;font-size:15px}
.wda caption{text-align:left;color:var(--muted);font-size:13.5px;padding-bottom:11px}
.wda th,.wda td{text-align:left;padding:13px 15px;border-bottom:1px solid var(--border);vertical-align:top}
.wda thead th{background:var(--surface);color:var(--ink);font:600 13px/1 Inter,sans-serif;
  text-transform:uppercase;letter-spacing:.1em}
.wda tbody th{font:600 15px/1.4 Inter,sans-serif;color:var(--ink);width:30%}
.wda td.mono{font-family:"JetBrains Mono",monospace;font-weight:500;color:var(--ink2)}
.wda tbody tr:hover{background:rgba(244,238,221,.5)}
.wda .g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.wda .g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.wda .g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.wda .g2>*,.wda .g3>*,.wda .g4>*{min-width:0}
.wda .det img{width:100%;border-radius:var(--rImg);border:1px solid var(--border);display:block}
.wda .det figcaption{color:var(--muted);font-size:13.5px;margin-top:10px}
.wda .det figure.det-wide{grid-column:1/-1}
.wda .cert{display:flex;gap:12px;flex-wrap:wrap}
.wda .chip{display:inline-flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--surface2);border-radius:var(--rPill);padding:11px 18px;
  font:600 13.5px/1 Manrope,sans-serif;color:var(--ink)}
.wda .chip svg{color:var(--brandDeep)}
.wda details{background:var(--bg);border:1px solid var(--border);border-radius:14px;
  padding:0;margin-bottom:11px;overflow:hidden}
.wda details[open]{border-color:var(--surface2)}
.wda summary{cursor:pointer;padding:19px 22px;font:600 17px/1.35 Manrope,sans-serif;color:var(--ink);
  list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.wda summary::-webkit-details-marker{display:none}
.wda summary::after{content:"+";font:500 22px/1 "JetBrains Mono",monospace;color:var(--brandDeep);flex:0 0 auto}
.wda details[open] summary::after{content:"-"}
.wda details .body{padding:0 22px 20px;font-size:15.5px}
.wda details .body p:last-child{margin-bottom:0}
.wda .rel{display:block;background:var(--bg);border:1px solid var(--border);border-radius:var(--rCard);
  overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}
.wda .rel:hover{box-shadow:var(--shadowCard);transform:translateY(-2px);text-decoration:none}
.wda .rel img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--surface)}
.wda .rel .b{padding:18px}
.wda .rel h4{margin-bottom:7px}
.wda .rel .p{font:500 15px/1 "JetBrains Mono",monospace;color:var(--brandDeep);margin-top:9px}
.wda .rfq{background:var(--dark);color:var(--onDark)}
.wda .rfq h2,.wda .rfq h3,.wda .rfq h4{color:var(--onDark)}
.wda .rfq p{color:var(--darkMuted)}
.wda .rfq .eyebrow{color:var(--brand)}
.wda .rfq-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:52px;align-items:start}
.wda .rfq-grid>*{min-width:0}
.wda .rfq a{color:var(--brand)}
.wda .rfq ul{margin:0;padding-left:19px}
.wda .rfq li{color:var(--darkMuted);margin-bottom:9px}
.wda .rfq li a{font-weight:600}
.wda form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wda label{display:block;font:600 13px/1 Inter,sans-serif;text-transform:uppercase;
  letter-spacing:.1em;color:var(--brand);margin:0 0 8px}
.wda input,.wda select,.wda textarea{width:100%;background:rgba(255,253,249,.06);color:var(--onDark);
  border:1px solid rgba(255,253,249,.18);border-radius:12px;padding:14px 15px;
  font:400 15px/1.4 Inter,sans-serif;margin-bottom:15px}
.wda input::placeholder,.wda textarea::placeholder{color:rgba(255,253,249,.4)}
.wda input:focus,.wda select:focus,.wda textarea:focus{outline:none;border-color:var(--brand)}
.wda select option{color:var(--ink)}
.wda .note{background:var(--surface);border-left:3px solid var(--brand);border-radius:0 12px 12px 0;
  padding:15px 19px;font-size:14.5px;color:var(--ink2);margin:20px 0}
.wda .tbc{display:inline-block;background:var(--surface2);border-radius:6px;padding:2px 8px;
  font:600 12px/1.5 Inter,sans-serif;color:var(--brandDeep)}
.wda .drafttag{background:var(--brandDeep);color:var(--onDark);text-align:center;
  padding:9px 16px;font:600 12.5px/1.4 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.wda .vslot{background:var(--surface);display:none;place-items:center;text-align:center;padding:30px}
.wda .stage>figure.vslot.on{display:grid}
.wda .vslot-in{color:var(--ink2)}
.wda .vslot svg{color:var(--brandDeep);stroke-width:1.5}
.wda .tblscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.wda .tblscroll table{min-width:560px}
@media(max-width:600px){.wda .ceils .tier{flex:1 1 44%}}
@media(max-width:960px){.wda .hero,.wda .rfq-grid{grid-template-columns:1fr;gap:34px}.wda .g3,.wda .g2,.wda .g4{grid-template-columns:1fr}.wda .spec-quick{grid-template-columns:1fr 1fr}.wda form .row{grid-template-columns:1fr}.wda .thumbs{grid-template-columns:repeat(4,1fr)}}
@media(prefers-reduced-motion:reduce){}
.wda .optbox{border:1px solid var(--border);background:#fff;border-radius:var(--rCard);padding:26px 24px;margin-top:22px}
.wda .optrow{margin-bottom:20px}
.wda .optrow:last-of-type{margin-bottom:0}
.wda .optlab{display:flex;align-items:baseline;gap:10px;margin-bottom:11px}
.wda .optlab .eyebrow{margin:0}
.wda .optlab .pick{font:500 13px/1 "JetBrains Mono",ui-monospace,monospace;color:var(--ink)}
.wda .opts{display:flex;flex-wrap:wrap;gap:10px}
.wda .opt{appearance:none;cursor:pointer;border:1.5px solid var(--border);background:var(--bg);
  color:var(--ink2);border-radius:var(--rPill);padding:11px 18px;
  font:600 14.5px/1 Manrope,system-ui,sans-serif;transition:.16s ease}
.wda .opt:hover{border-color:var(--brand);color:var(--ink)}
.wda .opt[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:var(--shadowBtn)}
.wda .opt .d{display:block;font:500 11.5px/1 "JetBrains Mono",ui-monospace,monospace;opacity:.72;margin-top:6px}
.wda .optsum{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  border-top:1px solid var(--border);margin-top:22px;padding-top:18px}
.wda .optsum .sku{font:500 13px/1 "JetBrains Mono",ui-monospace,monospace;color:var(--muted)}
.wda .optsum .now{font:800 30px/1 Manrope,system-ui,sans-serif;color:var(--ink)}
.wda .optsum .now sup{font-size:.5em;top:-.75em;position:relative;color:var(--brandDeep)}
.wda .optsum .addon{font:500 13px/1 "JetBrains Mono",ui-monospace,monospace;color:var(--brandDeep)}
.wda .optsum .addon:empty{display:none}
.wda .swatches{display:flex;flex-wrap:wrap;gap:9px}
.wda .sw{width:30px;height:30px;border-radius:var(--rPill);border:1.5px solid var(--border);
  cursor:pointer;padding:0;position:relative}
.wda .sw[aria-pressed="true"]{outline:2px solid var(--brandDeep);outline-offset:2px}
.wda .sw span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wda .altbox{border:1px dashed var(--brand);background:var(--surface);border-radius:var(--rCard);
  padding:20px 22px;margin-top:24px}
.wda .altbox a{font-weight:600}

/* Astra's .ast-container is display:flex, so #wda sits as a flex item sized to
   its content column instead of the full 1440. Without this the dark RFQ band
   and the breadcrumb strip stop short of the viewport edge. */
.wda-page #content .ast-container > .wda{flex:1 1 100%;width:100%;max-width:none}

/* Astra sets letter-spacing:-0.6px on button, input, select and .button.
   The draft never sets it, so every pill and tab came out ~7px narrower.
   Reset it on our controls only. */
.wda button,.wda input,.wda select,.wda textarea,.wda .btn,.wda summary{letter-spacing:normal}

/* Buttons do not inherit the page font by default, which left .thumb and .sw
   rendering in Arial 13.3px. Only the icon-only controls need the inherited
   stack; the typed controls keep the explicit fonts declared above. */
.wda .thumb,.wda .sw{font:inherit;color:inherit}

/* The draft hard-codes the description rhythm with inline styles on each
   heading. the_content() cannot carry those, so the same numbers live here
   and the editor stays free of presentational markup. */
.wda #p-desc .g2>div>h2+p{margin-top:18px}
.wda #p-desc .g2>div>h3{margin-top:34px}
.wda #p-desc .g2>div>h3+p{margin-top:14px}

/* Astra / Woo bleed-through guards. The draft has no theme around it; the
   live page does, so these neutralise what would otherwise show through. */
.wda .wda-hide{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wda a:where(:not(.btn)):hover{text-decoration:underline}
.wda button{font-family:inherit}
.wda img{max-width:100%;height:auto}
.wda table{margin:0;border:0}
.wda sup{vertical-align:super;line-height:inherit;font-size:smaller;position:static}
.wda th,.wda td{border-width:0 0 1px;border-style:solid}
.wda ol,.wda ul{margin:0}
.wda .cta .btn{text-decoration:none}
.wda details summary{cursor:pointer;list-style:none}

/* ---- Added: extra option rows, YouTube facade, RFQ form states ---------- */

/* Hint line under the readout / version pickers. Hidden when empty so an
   unfilled hint never leaves a gap in the picker. */
.wda .opthint{margin:11px 0 0;font:400 13px/1.5 Inter,sans-serif;color:var(--muted)}
.wda .opthint:empty{display:none}

/* YouTube facade. Only the poster ships with the page; the iframe is injected
   on click, so the third-party player never costs us LCP. */
.wda .stage>figure.vfr{display:none;height:100%}
.wda .stage>figure.vfr.on{display:block}
.wda .vfr .ytplay{display:block;width:100%;height:100%;padding:0;border:0;background:var(--surface);
  cursor:pointer;position:relative}
.wda .vfr .ytplay img{width:100%;height:100%;object-fit:cover;display:block}
.wda .vfr .ytbtn{position:absolute;inset:0;display:grid;place-items:center;color:#fff;
  background:rgba(31,24,19,.34);transition:background .18s ease}
.wda .vfr .ytplay:hover .ytbtn{background:rgba(31,24,19,.5)}
.wda .vfr iframe{width:100%;height:100%;border:0;display:block}
.wda .vloc video{width:100%;height:100%;object-fit:cover;display:block;background:#111;min-width:0;min-height:0}

/* Required marker and inline field hints inside the dark RFQ band. */
.wda .rfq .req{color:var(--brand);margin-left:3px}
.wda .fhint{display:block;margin:7px 0 0;font:400 12.5px/1.45 Inter,sans-serif;color:var(--darkMuted);
  text-transform:none;letter-spacing:normal}
.wda .rfq-fine{color:var(--darkMuted);font-size:13px;margin:14px 0 0}
.wda .rfq-fine a{color:var(--brand)}

/* Client-side validation feedback. Only shown after a submit attempt, so the
   form is never red before the buyer has done anything. */
.wda .wda-rfq-form.was-checked input:invalid,
.wda .wda-rfq-form.was-checked select:invalid,
.wda .wda-rfq-form.was-checked textarea:invalid{border-color:#8C3A32}
.wda .rfq .ferr{display:block;margin:7px 0 0;font:600 12.5px/1.45 Inter,sans-serif;color:#E0B4B4;
  text-transform:none;letter-spacing:normal}
.wda .rfq .fnotice{margin:0 0 18px;padding:13px 16px;border-radius:12px;
  background:rgba(224,180,180,.12);border:1px solid rgba(224,180,180,.4);
  color:var(--onDark);font:400 14px/1.5 Inter,sans-serif}
.wda .wda-rfq-form.is-sending button[type=submit]{opacity:.6;pointer-events:none}

/* ---- Thank-you page ----------------------------------------------------- */
.wda-thanks .thanks-hero{padding:clamp(48px,7vw,88px) 0 clamp(56px,8vw,104px);max-width:96ch}
.wda-thanks h1{margin:14px 0 0}
.wda-thanks .thanks-lead{font-size:17.5px;margin:20px 0 0;max-width:72ch}
.wda-thanks .thanks-cards{margin-top:clamp(34px,4vw,52px)}
.wda-thanks .thanks-cards h4{margin:10px 0 9px}
.wda-thanks .thanks-cards p{font-size:15px;margin:0}
.wda-thanks .thanks-mail{margin:30px 0 0;font-size:15.5px}
.wda-thanks .thanks-cta{margin-top:30px}
.wda-thanks .thanks-links{margin-top:clamp(34px,4vw,50px);padding-top:26px;border-top:1px solid var(--border)}
.wda-thanks .thanks-links h4{margin:0 0 13px}
.wda-thanks .thanks-links ul{margin:0;padding-left:19px}
.wda-thanks .thanks-links li{margin-bottom:9px;font-size:15px;color:var(--ink2)}
.wda-thanks .thanks-links a{color:var(--brandDeep);font-weight:600}


/* ---- Order quantity ------------------------------------------------------
   Quantity is a priced option, not a cart control: one sample or whole cartons
   only, so the presets are the same pill as every other picker row and the
   numeric field steps by one carton. No new colour, no new font. */
.wda .qtyrow .opt.qt{text-align:left}
.wda .qtystep{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-top:14px}
.wda .qtystep label{font:600 11px/1 Inter,sans-serif;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted)}
.wda .qtyfield{display:inline-flex;align-items:stretch;border:1.5px solid var(--border);
  background:var(--bg);border-radius:var(--rPill);overflow:hidden}
.wda .qtyfield input{width:104px;border:0;background:transparent;text-align:center;
  font:500 15px/1 "JetBrains Mono",ui-monospace,monospace;color:var(--ink);padding:10px 4px;
  -moz-appearance:textfield}
.wda .qtyfield input::-webkit-outer-spin-button,
.wda .qtyfield input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.wda .qtyfield input:focus{outline:2px solid var(--brand);outline-offset:-2px}
.wda .qstep{border:0;background:var(--surface);color:var(--brandDeep);cursor:pointer;
  width:38px;font:600 17px/1 Manrope,system-ui,sans-serif;transition:.16s ease}
.wda .qstep:hover{background:var(--surface2)}
.wda .qtyunit{font:500 13px/1 "JetBrains Mono",ui-monospace,monospace;color:var(--muted)}
.wda .optsum .tot{font:500 13px/1 "JetBrains Mono",ui-monospace,monospace;color:var(--ink2)}
.wda .optsum .tot:empty{display:none}