/*
 * A Caixa (box) variant styles — ported from prototypes/variants/box.html (SD-019).
 * Loaded AFTER main.css; shared design tokens come from main.css, box-local
 * tokens (--card, --ctt, --pay-yellow, etc.) are defined here.
 */
:root{
  --paper:#F5EDDE; --paper-shade:#ECE1C8; --paper-soft:#FBF5E8;
  --ink:#1F1814; --ink-soft:#5C4F45; --ink-mute:#8C7B6B;
  --border:#D6C8AE; --accent:#7E2E2E; --accent-ink:#A83A3A;
  --leaf:#6B7F4E; --success:#4A6B3A; --pay-yellow:#F4C430; --pay-ink:#1A1A1A; --ctt:#F5C000;
  /* kraft cardboard tones */
  --kraft:#C49A6C; --kraft-lo:#A87B49; --kraft-hi:#D9B488; --kraft-edge:#8A6438;
  --kraft-flap:#BB8E5E; --tape:#E8D9B0;
  --font-d:"Fraunces",Georgia,serif;
  --font-b:"Plus Jakarta Sans",system-ui,sans-serif;
  --font-m:"JetBrains Mono",ui-monospace,monospace;
  --font-h:"Caveat",cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-b); color:var(--ink); background:var(--paper);
  line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(126,46,46,.05), transparent 38%),
    radial-gradient(circle at 88% 80%, rgba(107,127,78,.06), transparent 42%);
}
/* paper grain overlay */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{max-width:430px;margin:0 auto;padding:0 18px 60px;position:relative}

/* ============ HEADER (compact — get the box into the fold) ============ */
header{padding:16px 0 4px;text-align:center}
.eyebrow{
  font-family:var(--font-m); font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-mute); display:flex; align-items:center; justify-content:center; gap:9px;
}
.eyebrow::before,.eyebrow::after{content:"";height:1px;width:24px;background:var(--border)}
h1{
  font-family:var(--font-d); font-weight:600; font-size:clamp(30px,8.4vw,38px);
  line-height:1.02; letter-spacing:-.02em; margin:11px 0 6px;
  font-optical-sizing:auto;
}
h1 em{font-style:italic;color:var(--accent)}

/* ===== slim scarcity strip (replaces the tall edition plate) ===== */
.scarcity{
  margin:12px auto 0; max-width:340px; display:flex; align-items:center; gap:10px;
  font-family:var(--font-m); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-mute);
}
.sc-no{color:var(--ink);font-weight:700;white-space:nowrap}
.sc-no i{color:var(--ink-mute);font-style:normal;font-weight:500}
.sc-bar{flex:1;height:3px;border-radius:3px;background:var(--paper-shade);overflow:hidden}
.sc-bar i{display:block;height:100%;width:92.7%;border-radius:3px;background:linear-gradient(90deg,var(--leaf),var(--accent))}
.sc-rest{white-space:nowrap}
.sc-rest b{color:var(--accent-ink);font-weight:700}

/* ============ THE BENCH (packing station) ============ */
.bench{
  position:relative; margin:16px 0 0; padding:22px 12px 26px; border-radius:18px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.018) 0 2px, transparent 2px 30px),
    linear-gradient(180deg,#8B5A2B,#7A4E24);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.12), inset 0 -10px 24px rgba(0,0,0,.28), 0 14px 30px rgba(40,24,10,.22);
  border:1px solid #5e3b1a;
}
.bench::before{ /* wood grain streaks */
  content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none; opacity:.4; mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(91deg, rgba(255,255,255,.05) 0 1px, transparent 1px 7px, rgba(0,0,0,.06) 7px 8px, transparent 8px 22px);
}
.bench-tag{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  font-family:var(--font-m); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  background:var(--ink); color:var(--paper-soft); padding:4px 14px 7px; border-radius:20px; white-space:nowrap;
  box-shadow:0 4px 10px rgba(0,0,0,.3); overflow:hidden;
}
/* momentum: thin packing-progress hairline along the bench tag */
.bench-tag .pack-bar{
  position:absolute; left:0; bottom:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--leaf),var(--pay-yellow));
  transition:width .4s cubic-bezier(.22,1,.36,1);
}
/* instruction caption under the tag */
.bench-cap{
  text-align:center; font-family:var(--font-m); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.62); margin:2px 0 14px;
}
.bench-cap b{color:var(--pay-yellow);font-weight:700}

/* ============ THE BOX ============ */
.stage{ perspective:1100px; }
.box{
  position:relative; width:100%; max-width:330px; margin:0 auto;
  transform-style:preserve-3d; transform:rotateX(7deg);
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
/* when a field inside is focused, flatten so the caret sits correctly + "lift to write" feel */
.box.flat{transform:rotateX(0deg)}
/* back/top flaps that fold shut on ship */
.flap{
  position:absolute; left:6%; width:88%; height:40px; z-index:5;
  background:linear-gradient(180deg,var(--kraft-flap),var(--kraft-lo));
  border:1px solid var(--kraft-edge); transform-origin:top center;
  box-shadow:inset 0 4px 8px rgba(0,0,0,.12);
  transform:rotateX(-128deg); opacity:0;
}
.flap.left{top:-6px;left:6%;width:44%;border-right:none}
.flap.right{top:-6px;left:50%;width:44%;border-left:none}
.flap b{ /* corrugation cut edge */
  position:absolute;bottom:-1px;left:0;right:0;height:5px;
  background:repeating-linear-gradient(90deg,var(--kraft-edge) 0 2px,var(--kraft-lo) 2px 5px);
}
/* box face */
.face{
  position:relative; z-index:2; border-radius:9px; padding:18px 16px 20px;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.025) 0 1px, transparent 1px 4px),
    linear-gradient(155deg,var(--kraft-hi),var(--kraft) 55%,var(--kraft-lo));
  border:1px solid var(--kraft-edge);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 -16px 26px rgba(90,60,28,.32),
    inset 14px 0 22px rgba(90,60,28,.12),
    0 18px 30px rgba(60,38,16,.34);
}
/* corrugated open-top edge */
.face::before{
  content:""; position:absolute; top:-7px; left:6px; right:6px; height:8px; border-radius:3px 3px 0 0;
  background:repeating-linear-gradient(90deg,var(--kraft-edge) 0 2.5px,var(--kraft-lo) 2.5px 5px,var(--kraft-hi) 5px 7.5px);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.25);
}
/* packing tape down the seam */
.tape{
  position:absolute; z-index:8; top:-12px; left:50%; transform:translateX(-50%) scaleY(0);
  transform-origin:top center; width:62px; height:0;
  background:linear-gradient(90deg,rgba(232,217,176,.55),rgba(232,217,176,.92),rgba(232,217,176,.55));
  border-left:1px solid rgba(255,255,255,.5); border-right:1px solid rgba(180,160,120,.5);
  box-shadow:0 2px 5px rgba(0,0,0,.12); transition:height .5s ease, transform .45s ease;
  pointer-events:none;
}
.tape::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent 0 9px,rgba(255,255,255,.22) 9px 10px)}

/* stamps row on box */
.stamps{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:10px}
.stamp{
  font-family:var(--font-m); text-transform:uppercase; text-align:center; line-height:1.15;
  border:2px solid var(--accent); color:var(--accent); padding:5px 8px; border-radius:3px;
  transform:rotate(-6deg); opacity:.82; letter-spacing:.05em;
  box-shadow:0 0 0 2px rgba(126,46,46,.08);
}
.stamp.fragil{font-size:11px;font-weight:700}
.stamp.fragil small{display:block;font-size:8px;letter-spacing:.18em;margin-top:1px}
.stamp.edition{
  transform:rotate(5deg); border-color:var(--ink); color:var(--ink); font-weight:700; font-size:10px;
  border-radius:50px; padding:7px 9px; box-shadow:0 0 0 2px rgba(31,24,20,.06);
}
.stamp.edition small{display:block;font-size:7.5px;letter-spacing:.16em;opacity:.7;font-weight:500}
.content-line{
  font-family:var(--font-m); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); text-align:center; padding:5px 0; margin-bottom:12px; white-space:nowrap;
  border-top:1px dashed rgba(31,24,20,.45); border-bottom:1px dashed rgba(31,24,20,.45);
}
/* ============ REACTIVE TURNIP MASCOT (shared rig) ============ */
.mascot{width:120px;height:120px;display:block;position:relative;z-index:5;cursor:pointer;
  filter:drop-shadow(0 14px 16px rgba(31,24,20,.20));will-change:transform}
/* lives INSIDE the box, peeking over the postcard (Box-variant placement) */
.mascot.in-box{position:absolute;right:8px;top:30px;width:70px;height:70px;z-index:6;filter:drop-shadow(0 5px 6px rgba(60,40,18,.34))}
.mascot.in-box #shadow{display:none}
#lean{transform-box:fill-box;transform-origin:50% 100%;transition:transform .35s cubic-bezier(.3,1,.4,1)}
.mascot.reading #lean{transform:translateY(1px) rotate(-1.5deg)}
.mascot.smug    #lean{transform:rotate(1.5deg)}
.mascot.gleeful #lean{transform:translateY(-1px)}
.sway{transform-origin:50% 96%;transform-box:fill-box;animation:m-sway 5.6s ease-in-out infinite}
@keyframes m-sway{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}}
.bob{transform-box:fill-box;animation:m-bob 4.4s ease-in-out infinite}
@keyframes m-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.4px)}}
.breathe{transform-origin:50% 92%;transform-box:fill-box;animation:m-breathe 4.4s ease-in-out infinite}
@keyframes m-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.leaves{transform-origin:50% 100%;transform-box:fill-box;transition:transform .3s ease}
.leafwave{transform-origin:50% 100%;transform-box:fill-box;animation:m-leafwave 4.8s ease-in-out infinite}
@keyframes m-leafwave{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.eyelid{transform-origin:center;transform-box:fill-box;animation:m-blink 5s ease-in-out infinite}
@keyframes m-blink{0%,90%,100%{transform:scaleY(1)}93%,95%{transform:scaleY(.08)}}
#pupils{transform-box:fill-box}
#eyesNormal{transform-box:fill-box;transform-origin:center;transition:transform .25s ease,opacity .18s ease}
.mascot.reading #eyesNormal{transform:translateY(2.2px)}
.mascot.smug    #eyesNormal{transform:translateY(1.4px) scaleY(.8)}
.mascot.eager   #eyesNormal{transform:translateY(-1.4px)}
#eyesHappy{opacity:0;transition:opacity .18s ease}
#grin{opacity:0;transition:opacity .16s ease}
.mascot.gleeful #eyesNormal{opacity:0}
.mascot.gleeful #eyesHappy{opacity:1}
.mascot.gleeful #mouth{opacity:0}
.mascot.gleeful #grin{opacity:1}
#cheeks{opacity:.4;transition:opacity .25s ease}
.mascot.smug    #cheeks{opacity:.7}
.mascot.gleeful #cheeks,.mascot.eager #cheeks{opacity:.92}
#sparkle{opacity:0;transform-box:fill-box;transform-origin:center}
.mascot.smug #sparkle,.mascot.gleeful #sparkle,.mascot.eager #sparkle{opacity:1;animation:m-twinkle 1.4s ease-in-out infinite}
@keyframes m-twinkle{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
.mascot.burst #sparkle{opacity:1;animation:m-burst .6s ease-out}
@keyframes m-burst{0%{opacity:0;transform:scale(.3) rotate(-20deg)}45%{opacity:1;transform:scale(1.45) rotate(8deg)}100%{opacity:0;transform:scale(1) rotate(0)}}
.mascot.gleeful .leaves,.mascot.eager .leaves{transform:translateY(-2px) scale(1.06)}
.mascot.gleeful .leafwave,.mascot.eager .leafwave{animation:m-leafexcited .42s ease-in-out infinite}
@keyframes m-leafexcited{0%,100%{transform:rotate(-11deg)}50%{transform:rotate(11deg)}}
.mascot.gleeful .bob{animation:m-laugh .4s ease-in-out infinite}
@keyframes m-laugh{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-2.6px) rotate(1deg)}}
.mascot.eager .bob{animation:m-eagerbounce .66s cubic-bezier(.3,.8,.4,1) infinite}
@keyframes m-eagerbounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}70%{transform:translateY(0)}}
@keyframes m-pop{0%{transform:scale(1)}30%{transform:scale(1.16)}55%{transform:scale(.96)}100%{transform:scale(1)}}
.mascot.pop{animation:m-pop .5s cubic-bezier(.3,1.45,.5,1)}
@keyframes m-boing{0%{transform:scale(1) rotate(0)}18%{transform:scale(1.2) rotate(-7deg)}42%{transform:scale(.92) rotate(6deg)}66%{transform:scale(1.07) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}
.mascot.boing{animation:m-boing .62s cubic-bezier(.3,1.3,.5,1)}
#blep{opacity:0;transform-box:fill-box;transform-origin:50% 0%}
.mascot.boing #blep{opacity:1;animation:m-blep .62s ease}
@keyframes m-blep{0%{transform:scaleY(0)}30%{transform:scaleY(1)}80%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes m-nudge{0%{transform:translateY(0)}50%{transform:translateY(-3px)}100%{transform:translateY(0)}}
.mascot.nudge .breathe{animation:m-nudge .2s ease}
/* sly wink / waggle / lick (kept — it's still a cheeky nabo) */
.mascot.wink #lidR{animation:m-wink .56s ease}
@keyframes m-wink{0%,100%{transform:scaleY(1)}24%,56%{transform:scaleY(.08)}}
.mascot.waggle #browL,.mascot.waggle #browR{opacity:1 !important;animation:m-waggle .5s ease}
@keyframes m-waggle{0%,100%{transform:translateY(0)}25%{transform:translateY(-2.6px)}50%{transform:translateY(0)}75%{transform:translateY(-2.6px)}}
.mascot.lick #blep{opacity:1;animation:m-lick .6s ease}
@keyframes m-lick{0%{opacity:0;transform:translateY(-2px) scaleY(.2)}30%{opacity:1;transform:translateY(0) scaleY(1)}68%{opacity:1;transform:translate(4px,0) scaleY(.95)}100%{opacity:0;transform:translate(-3px,0) scaleY(.2)}}
.mascot.tilt #lean{transform:rotate(-9deg) translateY(1px) !important}
.mascot.nod .bob{animation:m-nod .55s ease}
@keyframes m-nod{0%,100%{transform:translateY(0)}28%{transform:translateY(4px)}62%{transform:translateY(-1px)}}
.mascot.doubletake{animation:m-doubletake .62s ease}
@keyframes m-doubletake{0%{transform:scale(1) rotate(0)}14%{transform:scale(1.13) translateY(-4px) rotate(-4deg)}34%{transform:scale(.95) rotate(3deg)}60%{transform:scale(1.05) rotate(-1deg)}100%{transform:scale(1) rotate(0)}}
.mascot.doubletake #browL,.mascot.doubletake #browR,.mascot.whoa #browL,.mascot.whoa #browR{opacity:1 !important}
.mascot.doubletake #eyesNormal,.mascot.whoa #eyesNormal{transform:scale(1.2) translateY(-1px) !important}
.mascot.spin{animation:m-spin .72s cubic-bezier(.4,0,.3,1)}
@keyframes m-spin{0%{transform:rotate(0) scale(1)}55%{transform:rotate(280deg) scale(.9)}100%{transform:rotate(360deg) scale(1)}}

/* ===== BOX-NATIVE TWISTS (what sets A · A Caixa apart from C · O Postal) ===== */
/* peekaboo — ducks down into the box, then pops back up (its idle signature) */
.mascot.peek{animation:m-peek 1.15s cubic-bezier(.4,0,.3,1)}
@keyframes m-peek{0%{transform:translateY(0)}38%{transform:translateY(40px)}62%{transform:translateY(40px)}100%{transform:translateY(0)}}
/* travel-ready: bigger eager bounce once the parcel is fully packed */
.mascot.ready .bob{animation:m-ready .7s cubic-bezier(.3,.7,.4,1) infinite}
@keyframes m-ready{0%,100%{transform:translateY(0)}45%{transform:translateY(-7px)}}

/* ===== DOCKED MINI TURNIP (floats top-left once you scroll past) ===== */
.mascot.dock{position:fixed;top:10px;left:10px;width:58px;height:58px;margin:0;z-index:9998;
  opacity:0;transform:translateX(-150%) scale(.7);pointer-events:auto;
  filter:drop-shadow(0 6px 11px rgba(31,24,20,.30));
  transition:opacity .35s ease, transform .45s cubic-bezier(.3,1.25,.5,1)}
.mascot.dock.show{opacity:1;transform:translateX(0) scale(1)}

/* ============ POSTCARD inside the box (now directly writable) ============ */
.postcard{
  position:relative; z-index:3; background:linear-gradient(165deg,var(--paper-soft),var(--paper));
  border:1px solid var(--border); border-radius:5px; padding:13px 14px 11px;
  box-shadow:0 6px 12px rgba(60,40,18,.25), inset 0 0 0 3px rgba(255,255,255,.4);
  transform:rotate(-1.2deg);
}
.postcard:focus-within{box-shadow:0 6px 12px rgba(60,40,18,.25), inset 0 0 0 3px rgba(255,255,255,.4), 0 0 0 2px var(--leaf)}
.postcard::after{ /* perforated stamp corner */
  content:"NABO"; position:absolute; top:7px; right:7px; width:26px; height:30px;
  font-family:var(--font-m); font-size:6.5px; font-weight:700; color:var(--leaf);
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:3px;
  border:1.5px dashed var(--leaf); border-radius:2px; opacity:.6; pointer-events:none;
}
.pc-label{font-family:var(--font-m);font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:4px}
/* #message.pc-msg specificity (1,1,0) beats main.css's #message (1,0,0), which
   otherwise forces 18px/1.25 and breaks alignment with the 28px ruled lines. */
#message.pc-msg{
  display:block; width:100%; resize:none; border:none; outline:none; overflow:hidden;
  font-family:var(--font-h); font-size:24px; line-height:28px; font-weight:600;
  color:var(--ink); background:transparent; caret-color:var(--accent);
  min-height:56px; padding:12px 30px 0 2px;
  background-image:repeating-linear-gradient(transparent 0 27px, rgba(140,123,107,.28) 27px 28px);
  background-position:0 8px;
}
.pc-msg::placeholder{color:var(--ink-mute);opacity:.55}
.pc-sign-in{
  display:block; margin-left:auto; width:62%; text-align:right;
  font-family:var(--font-h); font-size:18px; font-weight:600; color:var(--accent);
  background:transparent; border:none; outline:none; margin-top:5px; padding:2px 2px 2px 0;
}
.pc-sign-in::placeholder{color:var(--ink-mute);opacity:.5}
.msg-row{display:flex;justify-content:space-between;align-items:center;margin-top:7px;gap:8px}
.msg-hint{font-size:10.5px;color:var(--ink)}
.counter{font-family:var(--font-m);font-size:11px;font-weight:500;color:var(--ink-soft)}
.counter.warn{color:var(--accent-ink)}

/* ============ CTT ADDRESS LABEL — now the address form ============ */
.label{
  position:relative; z-index:4; margin-top:14px; background:#fff; color:#1A1A1A;
  border-radius:3px; padding:0; overflow:hidden; transform:rotate(.6deg);
  box-shadow:0 5px 12px rgba(60,40,18,.28), 0 0 0 1px rgba(0,0,0,.08);
  font-family:var(--font-m);
}
.label:focus-within{box-shadow:0 5px 12px rgba(60,40,18,.28), 0 0 0 2px var(--leaf)}

/* Staged vertical reveal (SD-023) — single page, progressive expansion. The
   address (.label) and payment (.manifest) sections carry the `hidden`
   attribute on first paint; JS removes it (and adds `.is-revealing`) one-way as
   the buyer progresses: typing the message reveals the address, typing the
   address reveals payment. Each freshly-revealed section fades + slides in.
   Never re-hidden, so nothing can appear to collapse. */
.label.is-revealing,
.manifest.is-revealing{ animation: sectionReveal .42s cubic-bezier(.3,1,.4,1) both; }
@keyframes sectionReveal{
  from{ opacity:0; transform:translateY(-8px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .label.is-revealing,.manifest.is-revealing{ animation:none; }
}
.label::before{ /* tape corners */
  content:""; position:absolute; top:-8px; left:14px; width:34px; height:18px;
  background:rgba(232,217,176,.7); transform:rotate(-8deg); box-shadow:0 1px 2px rgba(0,0,0,.1); z-index:6;
}
.label::after{content:"";position:absolute;top:-8px;right:14px;width:34px;height:18px;background:rgba(232,217,176,.7);transform:rotate(7deg);box-shadow:0 1px 2px rgba(0,0,0,.1);z-index:6}
.label-top{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--ctt); padding:5px 9px; border-bottom:2px solid #1A1A1A;
}
.ctt-logo{font-family:var(--font-d);font-weight:700;font-size:15px;letter-spacing:-.01em;color:#1A1A1A}
.ctt-svc{font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-align:right;line-height:1.15}
.label-body{padding:8px 10px 8px}
.lbl-field{display:block;margin-bottom:5px}
.lbl-k{
  font-size:7.5px;letter-spacing:.18em;color:#9a8e7a;text-transform:uppercase;
  display:flex;align-items:baseline;gap:6px;margin-bottom:1px;
}
/* editable label fields — the label IS the form */
.lbl-in{
  width:100%; font-family:var(--font-m); font-size:16px; color:#1A1A1A; font-weight:500;
  background:transparent; border:none; border-bottom:1.5px dashed #d9d2c2;
  padding:3px 2px 5px; line-height:1.25; min-height:30px; border-radius:0;
}
.lbl-in::placeholder{color:#c2bbab;font-weight:400}
.lbl-in:focus{outline:none;border-bottom-color:var(--leaf);background:rgba(107,127,78,.06)}
.lbl-in.in-err{border-bottom-color:var(--accent);background:rgba(126,46,46,.06)}
.lbl-in[inputmode="numeric"]{letter-spacing:.06em}
.lbl-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:0 10px}
.lbl-msg{
  font-family:var(--font-m); font-size:9.5px; letter-spacing:.03em; line-height:1.3;
  min-height:13px; margin:1px 0 4px; color:#9a8e7a;
}
.lbl-msg.err{color:var(--accent);font-weight:700}
.lbl-msg.ok{color:var(--success);font-weight:700}
.lbl-from{
  border-top:1px dashed #ccc; margin-top:3px; padding-top:6px;
  font-size:9px; color:#555;
}
.lbl-from b{color:#1A1A1A;font-weight:700;letter-spacing:.1em;font-size:8px}
.barcode{
  margin-top:8px; height:34px; width:100%;
  background:repeating-linear-gradient(90deg,#1A1A1A 0 2px,#fff 2px 3px,#1A1A1A 3px 4px,#fff 4px 7px,#1A1A1A 7px 8px,#fff 8px 11px,#1A1A1A 11px 14px,#fff 14px 15px);
  background-size:23px 100%;
}
.barcode-no{font-size:8px;letter-spacing:.32em;text-align:center;color:#1A1A1A;margin-top:3px;font-weight:500}

/* ============ FINISH PANEL (email + pay only) ============ */
.manifest{
  margin-top:22px; background:var(--paper-soft); border:1px solid var(--border); border-radius:14px;
  padding:16px 15px 18px; box-shadow:0 4px 14px rgba(60,40,18,.06);
}
.manifest h2{
  font-family:var(--font-m); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:3px; display:flex; align-items:center; gap:7px;
}
.manifest h2::after{content:"";flex:1;height:1px;background:var(--border)}
.mhint{font-size:11.5px;color:var(--ink-soft);margin-bottom:14px}
.field{margin-bottom:13px}
label.fl{
  display:block; font-family:var(--font-m); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:5px;
}
label.fl .opt{color:var(--ink-mute);text-transform:none;letter-spacing:0;font-family:var(--font-b);font-size:10px}
.field input{
  width:100%; font-family:var(--font-b); font-size:16px; color:var(--ink);
  background:#fff; border:1.5px solid var(--border); border-radius:9px; padding:11px 12px;
  transition:border-color .18s, box-shadow .18s; min-height:44px;
}
.field input::placeholder{color:var(--ink-mute);opacity:.6}
.field input:focus{outline:none;border-color:var(--leaf);box-shadow:0 0 0 3px rgba(107,127,78,.16)}
.field input.in-err{border-color:var(--accent);box-shadow:0 0 0 3px rgba(126,46,46,.14)}
.field-msg{font-size:11px;margin-top:5px;min-height:14px;color:var(--ink-mute)}
.field-msg.err{color:var(--accent-ink);font-weight:500}
.field-msg.ok{color:var(--success)}

/* ============ PAY ============ */
.pay{margin-top:4px}
/* value line near price — confident, justifies €18 */
.pay-value{
  display:flex; align-items:center; gap:8px; justify-content:center; text-align:center;
  font-size:12px; color:var(--ink-soft); line-height:1.35; margin-bottom:11px;
  padding:9px 11px; background:#fff; border:1px solid var(--border); border-radius:10px;
}
.pay-value b{color:var(--ink);font-weight:600}
.pay-value .leaf{flex:none;color:var(--leaf)}
.pay-methods{
  display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:12px;
  font-family:var(--font-m);font-size:9px;letter-spacing:.06em;color:var(--ink-mute);text-transform:uppercase;
}
.pay-methods span{border:1px solid var(--border);border-radius:6px;padding:4px 8px;background:#fff}
.btn-pay{
  width:100%; min-height:54px; border:none; border-radius:12px; cursor:pointer;
  background:var(--pay-yellow); color:var(--pay-ink);
  font-family:var(--font-d); font-weight:600; font-size:19px; letter-spacing:.01em;
  display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 5px 0 #cfa216, 0 10px 18px rgba(244,196,48,.28);
  transition:transform .1s, box-shadow .1s;
}
.btn-pay:active{transform:translateY(4px);box-shadow:0 1px 0 #cfa216,0 4px 10px rgba(244,196,48,.28)}
.btn-pay .btn-label{display:inline-flex;align-items:center;gap:7px}
.btn-pay .euro{font-family:var(--font-m);font-weight:700;background:rgba(0,0,0,.08);padding:3px 9px;border-radius:7px;font-size:16px}
.btn-pay .arrow{font-size:17px;line-height:1;opacity:.7;transition:transform .2s}
.btn-pay:active .arrow{transform:translateX(3px)}
.btn-pay:disabled{opacity:.55;cursor:not-allowed;box-shadow:0 5px 0 #cfa216}
.secure{
  text-align:center;font-family:var(--font-m);font-size:9.5px;letter-spacing:.1em;
  color:var(--ink-mute);margin-top:11px;text-transform:uppercase;
}
.secure svg{vertical-align:-2px;margin-right:3px}

footer{text-align:center;margin-top:26px;font-family:var(--font-d);font-style:italic;font-size:13px;color:var(--ink-mute)}

/* O Arquivo Público do Nabo (SD-030) — compact, centred carimbo + the two real
   outbound anchors on the box's tight single-strip footer. Shared layout lives
   in main.css (.footer-archive); this re-centres it for the box idiom. */
.footer-archive--compact{align-items:center;margin-top:14px;gap:8px}
.footer-archive--compact .carimbo{width:108px;max-width:70%}
.footer-archive--compact .footer-archive__copy{text-align:center;font-size:12px}

/* ============ SHIP OVERLAY ============ */
.ship{
  position:fixed; inset:0; z-index:10000; background:linear-gradient(180deg,#2a1d12,#19110a);
  display:none; flex-direction:column; align-items:center; justify-content:center; overflow:hidden;
  padding:28px;
}
.ship.show{display:flex}
.ship-scene{position:relative;width:230px;height:230px;margin-bottom:6px}
/* CTT van */
.van{position:absolute;left:50%;bottom:30px;transform:translateX(-50%) translateX(-180px);opacity:0;width:178px}
.van.go{animation:vanIn 1s cubic-bezier(.2,.7,.3,1) .2s forwards}
@keyframes vanIn{to{transform:translateX(-50%) translateX(0);opacity:1}}
/* parcel flies into the van */
.parcel{position:absolute;left:50%;top:-10px;transform:translateX(-50%) translateY(-40px) scale(.6);opacity:0;width:74px}
.parcel.go{animation:parcelDrop .8s cubic-bezier(.45,0,.55,1) 1s forwards}
@keyframes parcelDrop{
  0%{transform:translateX(-50%) translateY(-40px) scale(.6) rotate(-8deg);opacity:0}
  35%{opacity:1}
  70%{transform:translateX(-50%) translateY(70px) scale(.9) rotate(6deg);opacity:1}
  100%{transform:translateX(-50%) translateY(96px) scale(.5) rotate(0);opacity:0}
}
/* roller shutter rolls down */
.shutter{position:absolute;left:50%;bottom:62px;transform:translateX(-50%);width:96px;height:0;overflow:hidden;border-radius:2px 2px 0 0;
  background:repeating-linear-gradient(180deg,#e9b400 0 4px,#c79600 4px 5px);box-shadow:0 1px 2px rgba(0,0,0,.35)}
.shutter.go{animation:shut .5s ease 1.7s forwards}
@keyframes shut{to{height:62px}}
.van-drive.go{animation:drive 1.1s cubic-bezier(.4,0,.2,1) 2.3s forwards}
@keyframes drive{to{transform:translateX(-50%) translateX(320px);opacity:0}}

.ship-card{
  text-align:center; max-width:340px; opacity:0; transform:translateY(14px);
}
.ship-card.go{animation:cardUp .6s cubic-bezier(.22,1,.36,1) 2.6s forwards}
@keyframes cardUp{to{opacity:1;transform:none}}
.ship-mark{font-family:var(--font-m);font-size:10px;letter-spacing:.3em;color:var(--ctt);text-transform:uppercase;margin-bottom:10px}
.ship-h{font-family:var(--font-d);font-weight:600;font-size:33px;color:var(--paper-soft);line-height:1.05;margin-bottom:10px}
.ship-h em{font-style:italic;color:var(--pay-yellow)}
.ship-sub{font-size:14.5px;color:#d9c9b0;margin-bottom:20px;line-height:1.4}
.ship-sub b{color:var(--paper-soft)}
.track{
  display:inline-block; font-family:var(--font-m); font-size:13px; letter-spacing:.16em;
  color:#1A1A1A; background:var(--ctt); padding:9px 16px; border-radius:8px; font-weight:700;
  box-shadow:0 4px 12px rgba(245,192,0,.3);
}
.track small{display:block;font-size:8px;letter-spacing:.22em;color:#5c4a00;margin-bottom:2px;font-weight:500}
.ship-edition{margin-top:18px;font-family:var(--font-m);font-size:10px;letter-spacing:.2em;color:var(--ink-mute);text-transform:uppercase}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  .van,.parcel,.shutter,.ship-card{opacity:1!important;transform:translateX(-50%)!important}
  .van{transform:translateX(-50%) translateX(0)!important}
  .parcel{display:none}
  .shutter{height:62px!important}
  .ship-card{transform:none!important}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ===== SD-025 merge: proof block · O exemplar · seguro · veto ===== */
.proof-hero{ max-width:520px; margin:18px auto 6px; }
.proof-hero img{ width:100%; height:auto; display:block; border-radius:6px; box-shadow:0 14px 32px -18px rgba(31,24,20,.6); }
.proof-caption{ font-family:var(--font-d); font-weight:600; text-align:center; margin:14px 0 2px; color:var(--ink); }
.proof-detail{ text-align:center; font-size:.8rem; color:var(--ink-mute); margin:0 0 18px; }

.specimens{ border:0; padding:0 0 14px; margin:0 0 6px; text-align:center; }
.spec-kicker{ font-family:var(--font-b); font-size:.66rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); padding:0 0 10px; margin-inline:auto; }
.spec-row{ display:flex; gap:6px; justify-content:center; }
.spec{ flex:1; max-width:130px; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 3px; background:var(--paper-soft); border:1px solid var(--border); border-radius:4px; cursor:pointer; color:var(--ink); }
.spec input{ position:absolute; opacity:0; pointer-events:none; }
.spec-photo{ display:block; width:100%; max-width:104px; aspect-ratio:1; height:auto; object-fit:contain; margin-inline:auto; }
.spec-name{ font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.spec-note{ font-family:var(--font-d); font-style:italic; font-size:.72rem; line-height:1.3; color:var(--ink-soft); hyphens:auto; overflow-wrap:break-word; }
.spec:has(input:checked){ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); transform:translateY(-2px); }
.spec:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }
.spec-foot{ margin:12px 0 0; font-size:.72rem; color:var(--ink-soft); }
@media (max-width: 379px){
  .spec-row{ gap:5px; }
  .spec{ padding:10px 4px 8px; }
  .spec-name{ letter-spacing:.08em; }
}

.seguro{ display:flex; gap:10px; align-items:flex-start; margin:14px 2px 12px; cursor:pointer; }
.seguro input{ margin-top:2px; accent-color:var(--accent); }
.seg-text{ font-size:.74rem; color:var(--ink-soft); line-height:1.45; }
.seg-text strong{ display:block; font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin-bottom:2px; }

/* the mascot's veto reaction — brows-down shake, dedicated class (rig internals untouched) */
@keyframes veto-shake{ 0%,100%{ transform:translateX(0) } 25%{ transform:translateX(-3px) rotate(-2deg) } 75%{ transform:translateX(3px) rotate(2deg) } }
.mascot.veto{ animation:veto-shake .42s ease-in-out 2; }
.mascot.veto #browL, .mascot.veto #browR{ opacity:1; }
@keyframes mascot-picked{ 0%{ transform:scale(1) } 40%{ transform:scale(1.1) } 100%{ transform:scale(1) } }
.mascot.picked{ animation:mascot-picked .5s ease-out; }
@media (prefers-reduced-motion: reduce){
  .mascot.veto{ animation:none; }
  .mascot.picked{ animation:none; }
  .spec:has(input:checked){ transform:none; }
}
@media (forced-colors: active){
  .spec input{ position:static; opacity:1; pointer-events:auto; }
}