/* ════════════════════════════════════════════════════════════════════════════
   BOCOEUR — homepage styles (ported 1:1 from the Claude Design file)
   Layout-critical styles live inline in index.html exactly as in the design;
   this file holds the shared/base rules, grids, drawers and card styles.
   ══════════════════════════════════════════════════════════════════════════ */

/* DM Mono, self-hosted — only weights 300/400/500 exist (no bold). */
@font-face{ font-family:'DM Mono'; font-style:normal; font-weight:300; font-display:swap; src:url('../assets/fonts/DMMono-Light.ttf') format('truetype'); }
@font-face{ font-family:'DM Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/DMMono-Regular.ttf') format('truetype'); }
@font-face{ font-family:'DM Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/DMMono-Medium.ttf') format('truetype'); }

:root{ font-family:'DM Mono', ui-monospace, monospace; --page-bg:#FFFFFF; --ink:#111111; --fill:#111111; --on-fill:#FFFFFF; }
html.ink-green{ --ink:#4b9b6d; --fill:#4b9b6d; }
html.ink-green footer{ background:#4b9b6d !important; }
html.ink-green footer, html.ink-green footer *{ color:#FFFFFF !important; }
html.ink-green footer .footer-logo{ background-color:#FFFFFF !important; }
*{ box-sizing:border-box; }
.uppercase-titles h1, .uppercase-titles h2{ text-transform:uppercase !important; letter-spacing:0.03em !important; }
/* Whole-word wrapping only — never split a word or hyphenate in a heading/button/link/badge. */
h1,h2,h3,h4,button,a,.scg-navlink,.scg-viewall,.scg-flink,[data-product-badge]{ word-break:normal; overflow-wrap:normal; hyphens:none; }
main h2{ text-wrap:balance; }
/* overflow-x:clip (not hidden) — prevents horizontal overflow WITHOUT turning
   body into a scroll container, so window scrolling keeps working. */
html,body{ margin:0; padding:0; overflow-x:clip; max-width:100%; }
body{ background:var(--page-bg); }
img{ display:block; max-width:100%; }
::selection{ background:var(--fill); color:#fff; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
[hidden]{ display:none !important; }

/* minmax(0,1fr) = truly equal columns that ignore content min-width, so cards
   are identical and can never push a column past the viewport edge. */
.scg-pgrid{ display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.scg-pgrid > *{ min-width:0; }
@media(min-width:768px){ .scg-pgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px 16px; } }
.scg-bs-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.scg-bs-grid > *{ min-width:0; }
.scg-bs-media{ grid-column:1 / span 2; aspect-ratio:1 / 1; }
@media(min-width:768px){ .scg-bs-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px 16px; } .scg-bs-media{ grid-column:1 / span 2; grid-row:2 / span 2; aspect-ratio:auto; } }
.scg-print-grid{ display:grid; gap:10px; grid-template-columns:1fr; }
@media(min-width:768px){ .scg-print-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } }
.scg-footer-grid{ display:grid; gap:34px 24px; grid-template-columns:1fr 1fr; }
.scg-footer-grid > *{ min-width:0; }
@media(min-width:768px){ .scg-footer-grid{ grid-template-columns:2.2fr 1fr 1fr 1fr; gap:24px; } }
@media(max-width:479px){ .scg-footer-grid{ grid-template-columns:1fr; } }

/* notch / safe-area insets (viewport-fit=cover) */
.scg-navbar{ top:calc(12px + env(safe-area-inset-top,0px)) !important; }
.scg-drawer{ padding-left:calc(20px + env(safe-area-inset-left,0px)) !important; padding-bottom:calc(18px + env(safe-area-inset-bottom,0px)) !important; }
.scg-cart-scroll{ padding-bottom:calc(14px + env(safe-area-inset-bottom,0px)) !important; }
footer{ padding-bottom:env(safe-area-inset-bottom,0px); }

/* Campaign banner — wide on desktop, tall/portrait on phones so the image reads. */
.scg-campaign-media{ aspect-ratio:1920/1000; }
@media(max-width:767px){ .scg-campaign-media{ aspect-ratio:4/5; } }

/* Hero — full-bleed landscape on desktop, tall immersive portrait on phones. */
.scg-hero-mobile{ display:none; }
@media(max-width:767px){ .scg-hero-desktop{ display:none; } .scg-hero-mobile{ display:block; } }

/* Instagram — seamless RTL auto-scroll marquee. Two identical halves; translateX(-50%)
   loops with no seam; the inter-tile gap lives inside each cell so the wrap is exact. */
.scg-insta-marquee{ width:100%; overflow:hidden; }
.scg-insta-track{ display:flex; width:max-content; will-change:transform; animation:scgInsta 52s linear infinite; }
.scg-insta-track:hover{ animation-play-state:paused; }
.scg-ig-cell{ flex:0 0 auto; width:clamp(150px,24vw,236px); padding-right:8px; }
@keyframes scgInsta{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* floating nav bar */
.scg-navbar{ width:calc(100% - 20px); }
@media(min-width:640px){ .scg-navbar{ width:calc(100% - 40px); } }
.scg-nav-desktop{ display:none; }
@media(min-width:1024px){ .scg-nav-desktop{ display:flex; } }
.scg-burger{ display:inline-flex; }
@media(min-width:1024px){ .scg-burger{ display:none; } }
.scg-deskonly-flex{ display:none!important; }
@media(min-width:1024px){ .scg-deskonly-flex{ display:inline-flex!important; } }
.scg-navlink:hover{ font-weight:500; }
.scg-navlink[aria-current="page"], .scg-drawerlink[aria-current="page"]{ text-decoration:underline; text-underline-offset:5px; }
.scg-util:hover{ opacity:.55; }

/* marquee */
@keyframes scgMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.scg-marquee{ animation:scgMarquee 38s linear infinite; }
.scg-marquee:hover{ animation-play-state:paused; }

.scg-flink:hover{ text-decoration:underline; }
.scg-viewall:hover{ text-decoration:underline; }
.scg-look-row{ scrollbar-width:none; -ms-overflow-style:none; }
.scg-look-row::-webkit-scrollbar{ display:none; }
/* Shop the Look — fluid tile basis so N tiles always fill 100% of the row width */
.scg-look-tile{ flex:0 0 calc((100% - 5*12px)/6); }
@media(max-width:1600px){ .scg-look-tile{ flex-basis:calc((100% - 4*12px)/5); } }
@media(max-width:1200px){ .scg-look-tile{ flex-basis:calc((100% - 3*12px)/4); } }
@media(max-width:900px){ .scg-look-tile{ flex-basis:calc((100% - 2*12px)/3); } }
@media(max-width:600px){ .scg-look-tile{ flex-basis:calc((100% - 1*12px)/2); } }
.scg-arrows{ display:none; }
@media(min-width:768px){ .scg-arrows{ display:inline-flex; } }

/* mobile drawer */
.scg-drawer{ transform:translateX(-100%); }
.scg-drawer.is-open{ transform:translateX(0)!important; }
.scg-backdrop.is-open{ opacity:1!important; pointer-events:auto!important; }
.scg-drawerlink:hover{ opacity:.55; }

/* cart drawer */
.scg-cart-backdrop{ opacity:0; pointer-events:none; transition:opacity .25s ease; }
.scg-cart-backdrop.is-open{ opacity:1; pointer-events:auto; }
.scg-cart-panel{ transform:translateX(112%); transition:transform .26s cubic-bezier(.3,.7,.2,1); pointer-events:none; }
.scg-cart-panel.is-open{ transform:translateX(0); pointer-events:auto; }
.scg-qlink:hover{ background:#E8E1D5!important; }
.scg-icon-btn:hover{ opacity:.5; }
.scg-step-btn:hover{ background:#F1F1F1; }
.scg-rec-img-0,.scg-rec-img-1{ transition:opacity .18s ease; }
.scg-rec-img-1{ opacity:0; }
/* in-card swap removed — hover shows the shared floating preview */
@keyframes scgQtyPulse{ 0%{ transform:scale(1);} 42%{ transform:scale(1.22);} 100%{ transform:scale(1);} }
.scg-qty-pulse{ animation:scgQtyPulse .28s ease; }

/* reveal */
.scg-print-img{ transition:transform .4s cubic-bezier(.2,.6,.2,1); }
@media(hover:hover){ .scg-print:hover .scg-print-img{ transform:scale(1.05); mix-blend-mode:multiply; } }
.scg-ig:hover .scg-ig-ov{ opacity:1; }
.scg-reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.scg-reveal.is-visible{ opacity:1; transform:none; }
.scg-btn:hover{ opacity:.85; }

/* ── ProductCard (ported from ProductCard.dc.html) ─────────────────────── */
.scg-card-img-0,.scg-card-img-1{ transition:opacity .15s ease; }
.scg-card-img-1{ opacity:0; }
/* in-card swap removed — hover shows a shared large floating preview */
.scg-quickadd{ display:none; }
.scg-plus{ display:flex; }
@media (min-width:1024px){
  .scg-card[data-qa="sizes"] .scg-quickadd{ display:flex; opacity:0; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease; pointer-events:none; }
  .scg-card[data-qa="sizes"] .scg-plus{ display:none; }
  .scg-card[data-qa="sizes"]:hover .scg-quickadd{ opacity:1; transform:translateY(0); pointer-events:auto; }
}
.scg-size[data-dis="1"]{ opacity:.3; pointer-events:none; text-decoration:line-through; }
.scg-size:hover{ background:var(--fill)!important; color:#fff!important; border-color:var(--ink)!important; }
.scg-card[data-sold="1"]{ opacity:.5; }
.scg-bm:hover{ opacity:.55; }

/* ── a11y utilities ────────────────────────────────────────────────────── */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{ position:fixed; top:-100px; left:12px; z-index:200; padding:12px 18px; background:var(--fill); color:#fff; border-radius:8px; font-family:'DM Mono',ui-monospace,monospace; font-size:12px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; transition:top .15s ease; }
.skip-link:focus-visible{ top:12px; }
/* pause moving strips for keyboard users too (hover-pause already exists) */
.scg-marquee:focus-within, .scg-insta-track:focus-within, .scg-story-track:focus-within{ animation-play-state:paused; }
/* reveal the desktop quick-add when its size pills receive keyboard focus */
@media (min-width:1024px){
  .scg-card[data-qa="sizes"]:focus-within .scg-quickadd{ opacity:1; transform:translateY(0); pointer-events:auto; }
}
/* touch devices: lift small controls to a ≥44px effective tap target */
@media (pointer:coarse){
  .scg-step-btn{ width:44px !important; height:44px !important; }
  .scg-icon-btn{ min-width:44px; min-height:44px; }
  .scg-wish-size, .scg-size{ min-height:40px; }
  .scg-faq-q{ min-height:44px; }
  .scg-pdp-dot{ width:32px !important; height:32px !important; }
}

/* wishlist drawer */
.scg-wish-atc{ transition:background .15s ease, color .15s ease, opacity .18s ease; }
.scg-wish-atc:not([disabled]):hover{ background:var(--fill); color:#fff; }
.scg-wish-remove:hover{ color:var(--ink); }

/* ── production additions ──────────────────────────────────────────────── */
/* media dropped into a slot via the IMAGES config */
.scg-slot-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* dashed placeholder template (shared look for all empty slots) */
.scg-slot-empty{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; background:#F5F5F5; border:1px dashed #C9C9C9; color:#737373; text-align:center; padding:12px; font-family:'DM Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; }
.scg-slot-empty small{ font-size:9.5px; color:#9b9b9b; letter-spacing:.03em; }

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  .scg-marquee, .scg-insta-track{ animation:none!important; }
  .scg-reveal{ opacity:1!important; transform:none!important; }
}

/* ── meta strip (BRU clock · cart count): desktop-only ──
   fx-pack shows it with `html.twk-e2 [data-fx-meta]{display:flex !important}`
   from a runtime-injected <style>, so this override needs BOTH !important and
   higher specificity (the doubled attribute selector) to win on phones. */
@media (max-width: 767px) {
  html.twk-e2 [data-fx-meta][data-fx-meta] { display: none !important; }
}