/* =============================================================
   Snappalm — Checkout (standalone)
   Tokens copied verbatim from the live /preview/colors_and_type.css
   so this page renders native to the site. Roca self-hosted locally;
   Inter / Manrope / JetBrains Mono via Google Fonts (same as the site).
   Payment IS wired (Square, 2026-07-17). Read DEPLOY-PROTOCOL.md before deploying.
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap");

@font-face { font-family:"Roca"; font-weight:400; font-style:normal; font-display:swap; src:url("assets/fonts/Roca-Regular.otf") format("opentype"); }
@font-face { font-family:"Roca"; font-weight:700; font-style:normal; font-display:swap; src:url("assets/fonts/Roca-Bold.otf") format("opentype"); }
@font-face { font-family:"Roca"; font-weight:900; font-style:normal; font-display:swap; src:url("assets/fonts/Roca-Black.otf") format("opentype"); }

:root{
  /* Colors — HEX is the brand */
  --sp-tetsukon:#1B2A34; --sp-ainezu:#5A6E73; --sp-asagi:#4E9BA6; --sp-asagi-dark:#2E6A78;
  --sp-usuao:#A3C6CC; --sp-mizu:#BCE2E8; --sp-kinsusutake:#7A4A2E;
  --sp-shironeri:#F5F2EC; --sp-kinari:#ECE7DD; --sp-white:#FFFFFF; --sp-sumi:#0E1418;
  --sp-tetsukon-70:#455663; --sp-tetsukon-50:#6B7A84; --sp-tetsukon-30:#A9B2B9;
  --sp-tetsukon-15:#D4D9DD; --sp-tetsukon-06:#ECEEF0;
  --sp-bg:var(--sp-shironeri); --sp-fg:var(--sp-tetsukon); --sp-fg-muted:var(--sp-tetsukon-70);
  --sp-fg-subtle:var(--sp-tetsukon-50); --sp-rule:var(--sp-tetsukon-15);
  --sp-accent:var(--sp-asagi); --sp-cta:var(--sp-asagi-dark);
  --sp-gradient-asagi-mizu:linear-gradient(180deg,var(--sp-asagi) 0%,var(--sp-mizu) 100%);
  /* Type */
  --sp-font-display:"Roca","Recoleta",Georgia,serif;
  --sp-font-sans:Inter,system-ui,-apple-system,sans-serif;
  --sp-font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sp-font-alt:"Manrope","Inter",system-ui,sans-serif;
  --sp-tracking-tight:-0.035em; --sp-tracking-eyebrow:0.22em;
  --sp-leading-body:1.55;
  /* Spacing / radii / shadow / motion */
  --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --sp-radius-sm:6px; --sp-radius-md:12px; --sp-radius-lg:18px; --sp-radius-btn:14px; --sp-radius-pill:999px;
  --sp-shadow-1:0 1px 0 rgba(27,42,52,0.06);
  --sp-shadow-2:0 8px 24px -12px rgba(27,42,52,0.18);
  --sp-ease-glide:cubic-bezier(0.4,0,0.2,1); --sp-dur-1:120ms; --sp-dur-2:220ms;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--sp-bg); color:var(--sp-fg);
  font-family:var(--sp-font-sans); font-size:17px; line-height:var(--sp-leading-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* NOTE: do NOT put overflow:clip/hidden on html, body, OR <main> — each is an
   ancestor of the Square card iframe (and Square's helper iframe lives on <body>),
   and clipping that chain makes card() throw "UnexpectedError" (verified
   2026-07-17). If the mobile page-slide returns, clip the specific overflowing
   element (e.g. .thumbs / .media) instead — never the card's ancestor chain. */
img{max-width:100%; display:block; -webkit-user-drag:none; user-select:none;}
a{color:var(--sp-asagi); text-decoration:none;}
a:hover{color:var(--sp-tetsukon);}

.wrap{max-width:1200px; margin:0 auto; padding:0 24px;}

/* ---------- Header ---------- */
.site-head{border-bottom:1px solid var(--sp-rule); background:var(--sp-white);}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; height:64px;}
.site-head img{height:40px; width:auto;}
.site-head .head-note{
  font-family:var(--sp-font-sans); font-size:11px; font-weight:500;
  letter-spacing:var(--sp-tracking-eyebrow); text-transform:uppercase; color:var(--sp-fg-subtle);
}

/* ---------- Product layout ---------- */
.product{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  grid-template-areas:"media buy";
  column-gap:56px; padding:48px 0 40px; align-items:start;
}

/* Media column */
.buy{grid-area:buy;}
.media{grid-area:media; position:sticky; top:24px;}
.hero-frame{
  position:relative;
  border:1px solid var(--sp-rule); border-radius:var(--sp-radius-lg); overflow:hidden;
  background:var(--sp-white); box-shadow:var(--sp-shadow-2);
}
.hero-frame img{aspect-ratio:1/1; object-fit:cover; width:100%; height:auto; display:block;}

/* Size label — editable HTML overlay, top-left of the product hero. Replaces
   the old label that was baked into the quarter-14/16 JPGs (removed 2026-07-17).
   Shown only on the product (quarter) view; hidden on lifestyle/gallery shots
   where dark text over a busy photo wouldn't read. */
.hero-label{
  position:absolute; top:clamp(36px,6.5%,64px); left:clamp(36px,6.5%,64px); z-index:2;
  display:flex; flex-direction:column; gap:12px; pointer-events:none;
}
.hero-label.is-off{display:none;}
.hero-label__name{
  /* Manrope ExtraBold — same face the original baked "14-inch" label used. */
  font-family:var(--sp-font-alt); font-weight:800;
  font-size:26.6px; line-height:1.0;
  letter-spacing:-0.01em; color:var(--sp-fg);
}
.hero-label__fit{
  font-family:var(--sp-font-sans); font-weight:500; font-size:12.5px;
  line-height:1.2; text-align-last: justify; letter-spacing:0.01em; color:var(--sp-fg-muted);
}
.thumbs{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}
.thumb{
  width:68px; height:68px; border-radius:10px; overflow:hidden; padding:0; cursor:pointer;
  border:1px solid var(--sp-rule); background:var(--sp-white);
  transition:border-color var(--sp-dur-1) var(--sp-ease-glide), box-shadow var(--sp-dur-1) var(--sp-ease-glide);
}
.thumb img{width:100%; height:100%; object-fit:cover;}
.thumb:hover{border-color:var(--sp-usuao);}
.thumb.is-active{border-color:var(--sp-asagi); box-shadow:0 0 0 1px var(--sp-asagi);}

/* Info column */
.buy{padding-top:4px;}
.desc{
  font-family:var(--sp-font-sans); font-weight:400; font-size:15px; line-height:1.6;
  color:var(--sp-fg-muted); margin:0 0 24px;
}

/* Price */
.price-row{display:flex; align-items:baseline; gap:12px; margin:0 0 6px;}
.price{font-family:var(--sp-font-alt); font-weight:800; font-size:2rem; color:var(--sp-fg); font-variant-numeric:tabular-nums; letter-spacing:-0.01em;}
.price-was{font-family:var(--sp-font-sans); font-size:1.2rem; color:var(--sp-fg-subtle); text-decoration:line-through;}
.price-tag{
  display:inline-block; font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--sp-asagi-dark); background:var(--sp-mizu); border-radius:var(--sp-radius-pill);
  padding:5px 12px; margin:0 0 10px;
}
.stock-left{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sp-font-sans); font-size:13px; font-weight:600; color:var(--sp-asagi-dark);
  margin:0 0 22px;
}
.stock-left:empty{display:none;}
.stock-left::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--sp-asagi-dark);
  box-shadow:0 0 0 3px rgba(46,106,120,0.16);
}

/* Size selector */
.field-label{font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--sp-fg-muted); margin:0 0 10px;}
.sizes{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 8px;}
.size-opt{
  position:relative; border:1.5px solid var(--sp-rule); border-radius:var(--sp-radius-md);
  background:var(--sp-white); padding:16px 18px; cursor:pointer; text-align:left;
  transition:border-color var(--sp-dur-1) var(--sp-ease-glide), background var(--sp-dur-1) var(--sp-ease-glide);
  font-family:var(--sp-font-sans);
}
.size-opt:hover{border-color:var(--sp-usuao);}
.size-opt.is-active{border-color:var(--sp-asagi); background:rgba(188,226,232,0.22);}
.size-opt .so-name{font-family:var(--sp-font-alt); font-weight:700; font-size:1.2rem; color:var(--sp-fg); display:block;}
.size-opt .so-sub{font-size:13px; color:var(--sp-fg-subtle); display:block; margin-top:2px;}
.size-opt .so-check{
  position:absolute; top:12px; right:12px; width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--sp-tetsukon-30); background:var(--sp-white); transition:all var(--sp-dur-1);
}
.size-opt.is-active .so-check{border-color:var(--sp-asagi); background:var(--sp-asagi);}
.size-opt.is-active .so-check::after{content:""; position:absolute; inset:4px; border-radius:50%; background:var(--sp-white);}
.fit-note{font-size:13px; color:var(--sp-fg-subtle); margin:0 0 20px;}

/* Quantity */
.qty{display:inline-flex; align-items:center; border:1.5px solid var(--sp-rule); border-radius:var(--sp-radius-md); overflow:hidden; background:var(--sp-white); margin:0 0 10px;}
.qty-btn{width:44px; height:44px; border:0; background:var(--sp-white); color:var(--sp-fg); font-family:var(--sp-font-alt); font-size:1.35rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background var(--sp-dur-1) var(--sp-ease-glide);}
.qty-btn:hover:not(:disabled){background:var(--sp-tetsukon-06);}
.qty-btn:disabled{color:var(--sp-tetsukon-30); cursor:not-allowed;}
.qty-val{width:54px; height:44px; border:0; border-left:1.5px solid var(--sp-rule); border-right:1.5px solid var(--sp-rule); text-align:center; font-family:var(--sp-font-alt); font-weight:700; font-size:1.2rem; color:var(--sp-fg); background:var(--sp-white); padding:0;}
.qty-val:focus{outline:none;}
.qty-note{font-size:12.5px; color:var(--sp-fg-subtle); line-height:1.5; margin:0 0 26px;}
.qty-note b{color:var(--sp-fg-muted); font-weight:600;}

/* Selectable size options — pure selectors (qty lives in the order summary).
   is-active = the size you're viewing; has-qty shows an "In order" badge. */
.sku-model::before{content:"·"; margin:0 6px; color:var(--sp-tetsukon-30);}
.so-badge{
  display:none; position:absolute; top:11px; right:14px;
  font-family:var(--sp-font-sans); font-size:10px; font-weight:700;
  letter-spacing:0.07em; text-transform:uppercase; color:var(--sp-asagi-dark);
}
.size-opt.has-qty .so-badge{display:inline;}

/* Add to order — outline button; the Checkout CTA below is the solid primary */
.add-btn{
  width:100%; border:1.5px solid var(--sp-cta); border-radius:var(--sp-radius-btn);
  background:var(--sp-white); color:var(--sp-cta); font-family:var(--sp-font-alt);
  font-weight:700; font-size:1rem; padding:14px 20px; cursor:pointer; margin:0 0 20px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  transition:background var(--sp-dur-1) var(--sp-ease-glide), color var(--sp-dur-1) var(--sp-ease-glide);
}
.add-btn:hover{background:var(--sp-cta); color:var(--sp-white);}
.add-btn .add-plus,.add-btn .add-check,.add-btn .add-remove{width:15px; height:15px; flex:0 0 auto;}
.add-btn .add-check,.add-btn .add-remove{display:none;}
.add-btn.is-added .add-plus{display:none;}
.add-btn.is-added .add-remove{display:inline;}
/* In-order state — a clickable "Remove order" (neutral outline, soft-red on hover) */
.add-btn.is-added{border-color:var(--sp-rule); background:var(--sp-white); color:var(--sp-fg-muted); cursor:pointer;}
.add-btn.is-added:hover{border-color:#C6534A; background:#FBEEEC; color:#C6534A;}

/* Benefits */
.benefits{list-style:none; margin:0 0 26px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px;}
.benefits li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--sp-fg-muted); line-height:1.45;}
.benefits li b{color:var(--sp-fg); font-weight:600;}
.benefits .tick{flex:0 0 auto; width:16px; height:16px; margin-top:3px;}
.trust-list li span{color:var(--sp-fg); font-weight:500;}

/* Order summary */
.summary{
  background:#F8F6F3; border:1px solid var(--sp-rule); border-radius:var(--sp-radius-md);
  padding:20px 22px; margin:0 0 20px;
}
.summary h2{font-family:var(--sp-font-alt); font-weight:700; font-size:0.95rem; letter-spacing:0.02em; margin:0 0 14px; color:var(--sp-fg);}

/* Per-size line items (each with its own qty stepper) */
.sum-line{
  display:grid; grid-template-columns:1fr auto; gap:2px 12px;
  padding:0 0 14px; margin:0 0 14px; border-bottom:1px solid var(--sp-rule);
}
.sum-line[hidden]{display:none;}
.sl-main{display:flex; flex-direction:column; gap:1px; min-width:0;}
.sl-name{font-family:var(--sp-font-alt); font-weight:700; font-size:1rem; color:var(--sp-fg);}
/* The "(14\" MacBook Pro)" qualifier: inline on desktop, its OWN LINE on mobile
   (Mark 2026-07-27). The block rule already existed here but the markup never used
   the .sl-fit span, so it never applied. */
.sl-name .sl-fit{display:inline; font-family:var(--sp-font-sans); font-weight:400; font-size:13px; color:var(--sp-fg-subtle);}
@media (max-width:860px){ .sl-name .sl-fit{display:block; margin-top:2px;} }
.sl-unit{font-size:12.5px; color:var(--sp-fg-subtle);}
.sl-val{font-family:var(--sp-font-alt); font-weight:700; font-variant-numeric:tabular-nums; color:var(--sp-fg); text-align:right; align-self:start;}
.sl-qty{grid-column:1 / -1; justify-self:start; margin:10px 0 0;}
.sl-qty .qty-btn{width:36px; height:36px; font-size:1.2rem;}
.sl-qty .qty-val{width:44px; height:36px; font-size:1rem;}
.sum-row{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:7px 0; font-size:15px; color:var(--sp-fg-muted);}
.sum-row[hidden]{display:none;}
.sum-row .val{font-variant-numeric:tabular-nums; color:var(--sp-fg);}
.sum-row .free{color:var(--sp-asagi-dark); font-weight:600;}
.sum-row .disc{color:var(--sp-asagi-dark); font-weight:600;}
.sum-total{border-top:1px solid var(--sp-rule); margin-top:6px; padding-top:14px; font-size:1.2rem;}
.sum-total .lbl{font-family:var(--sp-font-alt); font-weight:700; color:var(--sp-fg);}
.sum-total .val{font-family:var(--sp-font-alt); font-weight:800; font-size:1.35rem; color:var(--sp-fg);}
.tax-note{font-size:11.5px; color:var(--sp-fg-subtle); margin:12px 0 0; line-height:1.5;}

/* Promo code field (in the order summary) */
.promo{margin:14px 0 0; border-top:1px solid var(--sp-rule); padding-top:14px;}
.promo-toggle{display:inline-flex; align-items:center; gap:7px; background:none; border:0; padding:0; cursor:pointer; font-family:var(--sp-font-sans); font-size:13.5px; font-weight:600; color:var(--sp-asagi-dark);}
.promo-toggle:hover{color:var(--sp-tetsukon);}
.promo-toggle .promo-tag{width:14px; height:14px; flex:0 0 auto;}
.promo-body{margin:12px 0 0;}
.promo-row{display:flex; gap:8px; align-items:stretch;}
.promo-row input{flex:1 1 auto; min-width:0; font-family:var(--sp-font-sans); font-size:16px; color:var(--sp-fg); background:var(--sp-white); border:1.5px solid var(--sp-rule); border-radius:10px; padding:10px 12px; text-transform:uppercase; letter-spacing:0.02em; transition:border-color var(--sp-dur-1) var(--sp-ease-glide);}
.promo-row input::placeholder{text-transform:none; letter-spacing:0; color:var(--sp-tetsukon-30);}
.promo-row input:focus{outline:none; border-color:var(--sp-asagi); box-shadow:0 0 0 1px var(--sp-asagi);}
.promo-row input:disabled{background:#F1F4F4; color:var(--sp-fg-muted); border-color:var(--sp-rule);}
.promo-apply{flex:0 0 auto; border:1.5px solid var(--sp-cta); background:var(--sp-white); color:var(--sp-cta); font-family:var(--sp-font-alt); font-weight:700; font-size:0.9rem; padding:0 18px; border-radius:10px; cursor:pointer; transition:background var(--sp-dur-1) var(--sp-ease-glide), color var(--sp-dur-1) var(--sp-ease-glide);}
.promo-apply:hover{background:var(--sp-cta); color:var(--sp-white);}
.promo-msg{font-size:13px; margin:9px 0 0; line-height:1.45;}
.promo-msg:empty{margin:0;}
.promo-msg.ok{color:var(--sp-asagi-dark); font-weight:600;}
.promo-msg.err{color:#C6534A;}
.promo-note{font-size:11.5px; color:var(--sp-fg-subtle); margin:8px 0 0; line-height:1.5;}
.promo-note[hidden]{display:none;}

/* CTA */
.cta{
  width:100%; border:0; border-radius:var(--sp-radius-btn); cursor:pointer;
  background:var(--sp-cta); color:var(--sp-white); font-family:var(--sp-font-alt);
  font-weight:700; font-size:1.2rem; padding:16px 20px; letter-spacing:0.01em;
  display:flex; align-items:center; justify-content:center; gap:9px;
  opacity:1; transition:opacity var(--sp-dur-2) var(--sp-ease-glide);
}
.cta[disabled]{opacity:0.55; cursor:not-allowed; pointer-events:none;}
/* REQUIRED, not belt-and-braces — same trap as .bill-grid below: .cta's author-level
   `display:flex` outranks the UA stylesheet's `[hidden]{display:none}`, so setting the
   hidden attribute in JS left the button on screen wearing its [disabled] styling.
   Reported by Mark 2026-08-15 ("im seeing it greyed out only"). Any element in this
   file with an author `display` needs its own [hidden] rule. */
.cta[hidden]{display:none;}

/* ---------- Checkout payment panel ---------- */
.pay{margin:6px 0 4px; padding:22px; border:1px solid var(--sp-rule); border-radius:var(--sp-radius-md); background:var(--sp-white); box-shadow:var(--sp-shadow-2);}
.pay-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 16px;}
.pay-head h2{font-family:var(--sp-font-alt); font-weight:700; font-size:1.2rem; margin:0; color:var(--sp-fg);}
.env-badge{font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#9a6a00; background:#fdf3d6; border:1px solid #e8cf8a; border-radius:var(--sp-radius-pill); padding:4px 10px; white-space:nowrap;}
.pay-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.pay-row3{grid-column:1 / -1; display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px;}
.fld{display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:600; letter-spacing:0.01em; color:var(--sp-fg-muted);}
.fld.fld-wide{grid-column:1 / -1;}
.fld em{font-weight:400; font-style:normal; color:var(--sp-fg-subtle);}
.fld input{font-family:var(--sp-font-sans); font-size:16px; font-weight:400; color:var(--sp-fg); background:var(--sp-white); border:1.5px solid var(--sp-rule); border-radius:10px; padding:11px 12px; width:100%; transition:border-color var(--sp-dur-1) var(--sp-ease-glide);}
.fld input:focus{outline:none; border-color:var(--sp-asagi); box-shadow:0 0 0 1px var(--sp-asagi);}
/* Billing "same as shipping" toggle + the block it reveals. Reads as a quiet control that
   belongs to the card, not a second form the shopper has to reckon with — checked is the
   path of least resistance, so most buyers never see the fields. 44px min tap target. */
.bill-same{display:flex; align-items:center; gap:9px; margin:14px 0 0; min-height:44px; font-size:13px; font-weight:500; color:var(--sp-fg-muted); cursor:pointer; -webkit-tap-highlight-color:transparent;}
.bill-same input{flex:0 0 auto; width:17px; height:17px; margin:0; accent-color:var(--sp-asagi); cursor:pointer;}
.bill-same span{line-height:1.35;}
.bill-grid{margin:2px 0 0;}
/* REQUIRED, not belt-and-braces: .bill-grid also carries .pay-grid, whose author-level
   `display:grid` outranks the UA stylesheet's `[hidden]{display:none}`. Without this the
   billing fields render even while the element is hidden — caught on the live page
   2026-07-24 after a DOM-only test (which asserted .hidden, not computed style) passed. */
.bill-grid[hidden]{display:none;}
.pay-card{margin:14px 0 2px;}
.fld-lbl{display:block; font-size:12px; font-weight:600; color:var(--sp-fg-muted); margin:0 0 5px;}
#card-container{min-height:46px;}
/* Apple Pay express button (native) — shown only when Apple Pay is available */
.ap-wrap{margin:6px 0 0;}
.apple-pay-button{
  -webkit-appearance:-apple-pay-button; appearance:-apple-pay-button;
  -apple-pay-button-type:buy; -apple-pay-button-style:black;
  display:block; width:100%; height:48px; border-radius:var(--sp-radius-btn); cursor:pointer;
}
.pay-or{display:flex; align-items:center; gap:12px; margin:16px 0 12px; color:var(--sp-fg-subtle); font-size:12px; text-transform:uppercase; letter-spacing:0.04em;}
.pay-or::before,.pay-or::after{content:""; flex:1; height:1px; background:var(--sp-rule);}
.pay-btn{margin-top:16px;}
.pay-btn:disabled{opacity:0.55; cursor:progress;}
.pay-msg{font-size:13px; line-height:1.5; margin:12px 0 0; color:var(--sp-fg-muted);}
.pay-msg.err{color:#c0392b;}
.pay-secure{font-size:11.5px; color:var(--sp-fg-subtle); margin:10px 0 0; line-height:1.5;}
.pay-done{margin:14px 0 4px; padding:28px 22px; border:1px solid var(--sp-asagi); border-radius:var(--sp-radius-md); background:rgba(188,226,232,0.16); text-align:center;}
.pay-done .done-check{width:44px; height:44px; margin:0 auto 12px; border-radius:50%; background:var(--sp-asagi-dark); color:#fff; font-size:22px; line-height:44px; font-weight:700;}
.pay-done h2{font-family:var(--sp-font-alt); font-weight:800; font-size:1.3rem; margin:0 0 8px; color:var(--sp-fg);}
.pay-done p{font-size:14px; color:var(--sp-fg-muted); margin:6px 0; line-height:1.55;}
.pay-done .done-amt{font-weight:600; color:var(--sp-fg);}
.pay-done .done-note{font-size:12.5px; color:var(--sp-fg-subtle);}
.cta .lock{width:15px; height:15px;}
.cta-note{font-size:12.5px; color:var(--sp-fg-subtle); text-align:center; margin:11px 0 0; line-height:1.5;}
.trust{font-size:13px; color:var(--sp-fg-subtle); text-align:center; margin:18px 0 0; line-height:1.6;}
.trust .dot{color:var(--sp-tetsukon-30); margin:0 8px;}

/* ---------- Footer ---------- */
.site-foot{border-top:1px solid var(--sp-rule); margin-top:40px; background:var(--sp-white);}
.site-foot .wrap{display:flex; align-items:center; justify-content:space-between; height:60px; gap:16px;}
.site-foot .fmark{height:40px; width:auto; opacity:0.75;}
.site-foot .fcopy{font-size:12.5px; color:var(--sp-fg-subtle);}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .product{grid-template-columns:1fr; grid-template-areas:"media" "buy"; column-gap:0; padding:28px 0 32px;}
  .media{position:static; max-width:520px; margin:0 auto 24px;}
  /* Mobile: match the "Choose your size" option cards — name = .so-name
     (Manrope 700 · 1.05rem), fit = .so-sub (13px · subtle). */
  .hero-label{ top:24px; left:24px; gap:4px; }
  .hero-label__name{font-weight:700; font-size:1.2rem; line-height:1.1;}
  .hero-label__fit{font-size:11.5px; color:var(--sp-fg-subtle); text-align-last:left; text-align:left; letter-spacing:0;}
  .buy{max-width:560px; margin:0 auto; width:100%;}
  /* thumbnails fill the full image width, flush left + right */
  .thumbs{display:grid; grid-template-columns:repeat(5,1fr); gap:8px;}
  .thumb{width:auto; height:auto; aspect-ratio:1;}
}
@media (max-width:520px){
  body{font-size:16px;}
  .wrap{padding:0 20px 0 16px;}
  .title{white-space:normal;}
  .stock-left{display:flex;}
  .sku-model{display:block;}
  .sku-model::before{content:none;}
  .benefits{grid-template-columns:1fr;}
  /* size options stay 2-up on mobile; compact the "In order" badge to a check
     so it never crowds the name in the narrower card */
  .sizes{grid-template-columns:1fr 1fr;}
  .so-badge{font-size:0; top:10px; right:11px;}
  .so-badge::before{content:"\2713"; font-size:13px; letter-spacing:0;}
  .price{font-size:1.75rem;}
  .site-foot .wrap{flex-direction:column; height:auto; padding-top:16px; padding-bottom:16px; gap:8px;}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important;} }

/* ---- Info accordions (description / shipping / returns) ---- */
.acc{border-bottom:1px solid var(--sp-rule);}

.acc-group{margin-top:var(--sp-4);}
.acc-group .acc:first-child{border-top:1px solid var(--sp-rule);}
.acc-group .acc:last-child{border-bottom:none;}
.acc summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:13px 0; cursor:pointer; list-style:none;
  font-family:var(--sp-font-sans); font-size:14px; font-weight:600; color:var(--sp-fg);
  -webkit-user-select:none; user-select:none;
}
.acc summary::-webkit-details-marker{display:none;}
.acc summary::marker{content:"";}
.acc .acc-caret{width:14px; height:14px; flex:0 0 auto; color:var(--sp-fg-subtle); transition:transform var(--sp-dur-2) var(--sp-ease-glide);}
.acc[open] .acc-caret{transform:rotate(180deg);}
.acc summary:hover .acc-caret{color:var(--sp-accent);}
.acc .acc-body{padding:0 0 var(--sp-4);}
.acc .acc-body p{margin:0 0 10px; font-size:14.5px; color:var(--sp-fg-muted); line-height:var(--sp-leading-body);}
.acc .acc-body p:last-child{margin-bottom:0;}
.acc-desc .acc-body .desc{margin:0; padding:0; border:0;}

/* ---- Shipping-address autocomplete dropdown (address-autocomplete.js, 2026-07-17) ----
   Enhancement layer over the existing #f-line1 input. Palette + radius match .fld input. */
.addr-ac{
  position:absolute; top:100%; left:0; right:0; z-index:40;
  margin:6px 0 0; padding:5px; list-style:none;
  background:var(--sp-white); border:1.5px solid var(--sp-rule);
  border-radius:10px; box-shadow:0 8px 24px rgba(27,42,52,0.12);
  max-height:264px; overflow-y:auto; display:none;
}
.addr-ac.is-open{display:block;}
.addr-ac__item{
  display:flex; flex-direction:column; gap:1px;
  padding:9px 10px; border-radius:7px; cursor:pointer;
  font-family:var(--sp-font-sans); color:var(--sp-fg);
}
.addr-ac__item:hover,.addr-ac__item.is-active{background:var(--sp-tetsukon-06);}
.addr-ac__main{font-size:14px; font-weight:500; line-height:1.25;}
.addr-ac__sec{font-size:12px; font-weight:400; color:var(--sp-fg-subtle); line-height:1.2;}

/* ── Mobile: kill dead scroll-space below the footer after the pay form inits ──
   Square injects a HIDDEN helper iframe as a direct child of <body> (see the note
   at the top of this file). On mobile Safari it can pick up layout height and leave
   empty scrollable space below the footer once the payment form has initialized.
   Zero the height of any hidden body-level iframe so it can't affect page height.
   The VISIBLE 3DS/SCA challenge iframe (visibility:visible) is intentionally NOT
   matched — card verification is untouched. (2026-07-23, Leonardo) */
@media (max-width: 860px) {
  body > iframe[style*="visibility: hidden"],
  body > iframe[style*="visibility:hidden"] { height: 0 !important; }
}