/* ============================================================
   SUPANOVA POLISH LAYER  (loaded last)
   Applies the TRANSFERABLE premium-quality principles from
   uxjoseph/supanova-design-skill to the approved "Editorial Pop"
   system — adapted for English + warm/light + WordPress (NOT the
   skill's Korean/dark/Tailwind/Pretendard defaults, which would
   break the approved direction).
   Goal: balanced & premium, never cramped (Henry 2026-06-09).
   ============================================================ */

/* ---- 1. Typography polish: kill orphans, keep numerals tabular ---- */
h1, h2, h3, h4 { text-wrap: balance; }
.lead, .psub, p { text-wrap: pretty; }
.num, .amt, .priceline, .price, .woocommerce-Price-amount,
.scorechip, .hero-price-chip .val { font-variant-numeric: tabular-nums; }

/* ---- 2. Warm-tinted shadows (carry the brand hue, not gray-black) ---- */
:root{
  --shadow: 0 1px 2px rgba(46,18,32,.05), 0 12px 32px -16px rgba(46,18,32,.17);
  --shadow-lift: 0 3px 6px rgba(46,18,32,.07), 0 24px 54px -20px rgba(240,53,106,.30);
}

/* ---- 3. Generous, balanced spacing (more air; never cramped) ---- */
.sec { padding-bottom: clamp(58px, 8.5vw, 104px); }
.sec-head { margin-bottom: clamp(28px, 4vw, 44px); }
.hero { padding-bottom: clamp(40px, 6vw, 74px); }
.note-band { margin-bottom: clamp(40px, 6vw, 60px); }
.prose > * + * { margin-top: 1.05em; }
.prose h2, .prose h3 { margin-top: 1.7em; }

/* ---- 4. Magnetic / spring interactive states (premium "alive" feel) ---- */
.btn { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background .2s ease, color .2s ease; }
.btn-primary:hover, .single_add_to_cart_button:hover,
.woo-wrap .button:hover, .woocommerce #place_order:hover { transform: translateY(-2px) scale(1.015); }
.btn-line:hover { transform: translateY(-2px); }
.btn:active, .single_add_to_cart_button:active { transform: translateY(0) scale(.985); }
.pcard, .prod, .r-card, .relcard, .card, .fork a, .r-card { transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; }
.fork a:hover { transform: translateY(-3px); }

/* ---- 5. Glass header refraction (inner highlight + soft tinted drop) ---- */
header.top, header.site {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 0 var(--line), 0 8px 28px -20px rgba(46,18,32,.30);
}

/* ---- 6. Focus-visible polish ---- */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible { outline-offset: 4px; }

/* ---- 7. Gentle float on decorative KIMO (reduced-motion safe, transform-only) ---- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ke-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  .hero-kimo, .hero-art .kimo, .companion img { animation: ke-float 5.6s ease-in-out infinite; will-change: transform; }
  .chat-fab { animation: ke-float 6.4s ease-in-out infinite; }
}

/* ---- 8. CTA size confidence (dominant primary action) ---- */
.btn-lg { padding: 1.05em 1.75em; font-size: 1.06rem; }

/* ---- 9. Smooth anchor scrolling ---- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ============================================================
   AUDIT FIXES (Wave 3.5) — responsive overflow + tap targets
   ============================================================ */
/* belt-and-suspenders: no horizontal scroll anywhere.
   overflow-x:clip (not hidden) clips horizontal overflow WITHOUT creating a
   scroll container, so the position:sticky site header keeps sticking. */
html{overflow-x:clip;}
.marquee{overflow:hidden;max-width:100vw;}
/* plan grids must wrap before overflow (auto-fit minmax, never fixed repeat(3,1fr)) */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(14px,2vw,24px);}
@media(max-width:620px){ .plans{grid-template-columns:1fr;} }
/* segment-fork + lanes wrap too */
.fork{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));}
/* tap targets >= 40px (mobile a11y) */
.chip,.lbtn{min-height:40px;display:inline-flex;align-items:center;}
@media(max-width:880px){ .chip,.opt,.vseg button{min-height:44px;} }