/* Ramsha — Winter Drop 2026. The interface stays navy and white, as the customer asked; the colour comes from the photographs
   (terracotta studio for winter, Sidi Bou Said blue for summer, the campaign on location). The cut line is the page's spine. */
:root {
  --navy: #0a1328;
  --navy-2: #121f40;
  --fabric: #16264a;
  --ecru: #f2f0ea;
  --ecru-2: #e7e3d8;
  --ice: #9db4d6;
  --ink: #0a1328;
  --ink-soft: rgba(10, 19, 40, 0.62);
  --pad: clamp(16px, 3.4vw, 48px);
  /* One family for everything, as in every shadcnspace block measured (referencias/tipografia): Google Sans at 400 for
     display, 500 for UI. Emphasis is colour, never a second face or an italic. */
  --sans: 'Google Sans', system-ui, sans-serif;
  --display: 'Google Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--navy); }
body { font-family: var(--sans); color: var(--ink); background: var(--ecru); -webkit-font-smoothing: antialiased; overflow-x: clip; }
html.opening, html.opening body { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* The opening: the knit lies over everything until it has been cut and opened. */
#fabric { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 50; pointer-events: none; }
#cover { position: fixed; inset: 0; z-index: 51; background: var(--fabric); transition: opacity 200ms; }

.announce { background: var(--navy); color: var(--ecru); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  height: 34px; display: grid; place-items: center; }
.nav { position: relative; z-index: 40; height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--pad); }
.burger { display: none; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; place-items: center; margin-left: -10px; }
.burger i { display: block; width: 18px; height: 1.5px; background: var(--ink); margin: 2.5px 0; }
.tools { display: flex; gap: 4px; align-items: center; justify-self: end; }
.icon-btn { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; transition: background 160ms var(--ease-ui); }
.icon-btn:hover { background: rgba(10, 19, 40, 0.07); }
.menu-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; position: relative; }
.menu-btn svg { transition: transform 200ms var(--ease-ui); }
.menu-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; background: var(--ecru); border-top: 1px solid rgba(10, 19, 40, 0.08); border-bottom: 1px solid rgba(10, 19, 40, 0.08);
  padding: 24px var(--pad) 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; box-shadow: 0 24px 60px rgba(10, 19, 40, 0.14); animation: mega-in 380ms var(--ease-spring) both; }
@keyframes mega-in { from { opacity: 0; transform: translateY(-8px); } }
.mega-card { display: grid; gap: 8px; align-content: start; }
.mi { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--ecru-2); }
.mi img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 900ms var(--ease-spring); }
.mega-card:hover .mi img { transform: scale(1.05); }
.mega-card b { font-weight: 500; font-size: 15px; }
.mega-card small { font-size: 13px; color: var(--ink-soft); }
.mega-card.all { align-content: center; justify-items: start; padding: 20px; background: var(--navy); color: var(--ecru); border-radius: 4px; transition: transform 200ms var(--ease-ui); }
.mega-card.all:hover { transform: translateY(-2px); }
.mega-card.all small { color: rgba(242, 240, 234, 0.6); }
.mega-card.all svg { margin-top: 10px; transition: transform 300ms var(--ease-spring); }
.mega-card.all:hover svg { transform: translateX(4px); }
.wordmark { font-family: var(--display); font-weight: 500; font-size: 20px; letter-spacing: 0.02em; }
.nav ul { display: flex; gap: 32px; list-style: none; padding: 0; font-size: 14px; font-weight: 500; }
.nav ul a, .nav .menu-btn { position: relative; }
.nav ul a::after, .nav .menu-btn::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 300ms var(--ease-ui); }
.nav ul a:hover::after, .nav .menu-btn:hover::after, .nav .menu-btn[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: left; }
.cart { height: 40px; padding: 0 6px 0 12px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 500; display: flex; gap: 8px; align-items: center; cursor: pointer; transition: background 160ms var(--ease-ui); }
.cart:hover { background: rgba(10, 19, 40, 0.07); }
.cart b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 11px; background: var(--ink); color: var(--ecru); font-size: 11px; }

/* Hero: the cut runs between the word and the garment. */
.hero { position: relative; min-height: calc(100svh - 106px); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px;
  padding: clamp(24px, 4vh, 56px) var(--pad) clamp(32px, 6vh, 72px); align-items: end; }
.hero-copy { grid-column: 1 / span 6; align-self: center; display: flex; flex-direction: column; gap: 28px; padding-bottom: 8px; }
.label { font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.label i { display: none; }
.hero h1 { font-weight: 500; line-height: 1; }
/* shadcnspace heroes, measured on 57 blocks: 72px (p10 48, p90 96), weight 500, line-height 1, tracking -0.025em. */
.hero h1 .cut, .hero h1 .soft { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(48px, 5vw, 72px); letter-spacing: -0.025em; }
.hero h1 .soft { color: var(--ink-soft); }
.actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
/* Their buttons: 42px tall, 20px across, 14px at 500, pill (42 of 56 hero buttons). */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: var(--ecru);
  font-weight: 500; font-size: 14px; transition: transform 200ms var(--ease-ui), background 200ms var(--ease-ui); }
.btn:hover { transform: translateY(-2px); background: var(--fabric); }
.btn svg { transition: transform 300ms var(--ease-spring); }
.btn:hover svg { transform: translateX(4px); }
.link { font-size: 14px; font-weight: 500; border-bottom: 1px solid rgba(10, 19, 40, 0.3); padding-bottom: 2px; }
.hero-media { grid-column: 8 / span 5; align-self: stretch; display: flex; flex-direction: column; gap: 14px; justify-content: end; }
.hero-media .frame { position: relative; aspect-ratio: 3 / 4; height: min(calc(100svh - 250px), 760px); width: auto; max-width: 100%; margin-left: auto; overflow: hidden; border-radius: 4px; background: var(--fabric); }
.pz, .slides { position: absolute; inset: 0; }
.slides { transition: transform 700ms var(--ease-ui); will-change: transform; }
.slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.slides img.on { opacity: 1; }
.cutline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cutline line { stroke: var(--ecru); stroke-width: 2; stroke-dasharray: 1000; stroke-dashoffset: 1000; opacity: 0; }
.hotspot { position: absolute; z-index: 3; width: 44px; height: 44px; border: 0; padding: 0; background: transparent; cursor: pointer; transform: translate(-50%, -50%); transition: margin 600ms var(--ease-ui); }
.hotspot i { display: block; width: 14px; height: 14px; margin: 15px; border-radius: 50%; background: var(--ecru); box-shadow: 0 0 0 2px rgba(10, 19, 40, 0.35), 0 0 0 7px rgba(242, 240, 234, 0.28); animation: pulse 2.4s var(--ease-ui) infinite; transition: transform 300ms var(--ease-spring); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(10, 19, 40, 0.35), 0 0 0 6px rgba(242, 240, 234, 0.3); } 50% { box-shadow: 0 0 0 2px rgba(10, 19, 40, 0.35), 0 0 0 14px rgba(242, 240, 234, 0); } }
.hotspot:hover i, .hotspot:focus-visible i, .hotspot.lit i { transform: scale(1.35); animation: none; }
.hotspot .tag { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 4px); background: var(--ecru); color: var(--ink); padding: 10px 12px; border-radius: 6px; white-space: nowrap; display: grid; gap: 2px; text-align: left;
  font-size: 13px; opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease-ui), transform 320ms var(--ease-spring); box-shadow: 0 10px 30px rgba(10, 19, 40, 0.25); }
.hotspot:hover .tag, .hotspot:focus-visible .tag { opacity: 1; transform: translate(-50%, 12px); }
.hotspot .tag b { font-weight: 500; } .hotspot .tag em { font-style: normal; } .hotspot .tag s { color: var(--ink-soft); margin-left: 6px; }
.hotspot .tag u { font-size: 12px; color: var(--ink-soft); }
.hotspot.small { width: 36px; height: 36px; } .hotspot.small i { width: 12px; height: 12px; margin: 12px; }
.slide-ui { position: absolute; z-index: 3; right: 12px; bottom: 12px; display: flex; gap: 2px; align-items: center; background: rgba(10, 19, 40, 0.5); backdrop-filter: blur(10px); color: var(--ecru); border-radius: 999px; padding: 3px; }
.round { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; transition: background 160ms var(--ease-ui); }
.round:hover { background: rgba(242, 240, 234, 0.18); }
.count { font-size: 12px; font-variant-numeric: tabular-nums; padding: 0 6px; letter-spacing: 0.06em; }
.caption { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.caption s { color: var(--ink-soft); margin-left: 8px; }
.cap-name { background: none; border: 0; font: inherit; color: inherit; padding: 0 0 1px; cursor: pointer; border-bottom: 1px solid transparent; transition: border-color 160ms var(--ease-ui); }
.cap-name:hover { border-color: currentColor; }
.bars { display: flex; gap: 6px; }
.bars button { position: relative; flex: 1; height: 14px; border: 0; background: transparent; padding: 0; cursor: pointer; }
.bars button::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: rgba(10, 19, 40, 0.14); }
.bars button i { position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; }

/* Marquee */
.marquee { background: var(--navy); color: var(--ecru); overflow: hidden; padding: 22px 0; border-top: 1px solid rgba(242, 240, 234, 0.08); }
.marquee .track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee span { font-family: var(--display); font-weight: 500; font-size: clamp(36px, 5vw, 72px); letter-spacing: -0.025em; white-space: nowrap; padding-right: 0.4em; }
.marquee span em { font-style: normal; color: var(--ice); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Drops */
.drop { background: var(--navy); color: var(--ecru); padding: clamp(64px, 10vh, 120px) var(--pad) clamp(80px, 12vh, 140px); }
.drop.light { background: var(--ecru); color: var(--ink); }
.drop-head { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 24px; margin-bottom: clamp(36px, 6vh, 64px); }
/* Their section headings: 48px at 500 (feature, pricing, portfolio medians); 30-36px on a phone. */
.drop-head h2 { font-family: var(--display); font-weight: 500; font-size: clamp(32px, 3.4vw, 48px); letter-spacing: -0.025em; line-height: 1.1; }
.drop-head h2 em { font-style: normal; opacity: 0.5; }
.drop-head p { justify-self: end; font-size: 14px; opacity: 0.7; text-align: right; }
.filters { display: flex; gap: 8px; justify-self: end; flex-wrap: wrap; }
.chip { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(242, 240, 234, 0.25); background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 160ms var(--ease-ui), color 160ms var(--ease-ui), border-color 160ms var(--ease-ui); }
.chip span { opacity: 0.55; margin-left: 4px; font-variant-numeric: tabular-nums; }
.chip:hover:not([aria-pressed="true"]) { border-color: rgba(242, 240, 234, 0.7); }
.chip[aria-pressed="true"] { background: var(--ecru); color: var(--ink); border-color: var(--ecru); }
.drop-note { font-size: 14px; opacity: 0.7; margin: calc(-1 * clamp(36px, 6vh, 64px) + 16px) 0 32px; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 28px; row-gap: 56px; }
/* Two pieces: one large portrait each side of the seam, a column of air outside them. */
.grid.two { grid-template-columns: repeat(12, 1fr); }
.grid.two .card:nth-child(1) { grid-column: 2 / span 5; }
.grid.two .card:nth-child(2) { grid-column: 7 / span 5; }
.card { position: relative; display: flex; flex-direction: column; gap: 12px; }
.card .ph { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; background: var(--fabric); }
.drop.light .card .ph { background: var(--ecru-2); }
.drop.light .chip { border-color: rgba(10, 19, 40, 0.2); }
.drop.light .chip[aria-pressed="true"] { background: var(--ink); color: var(--ecru); border-color: var(--ink); }
.ph-btn { display: block; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; }
.card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-spring); }
.card:hover .ph img { transform: scale(1.04); }
.copy-link { position: absolute; top: 12px; right: 12px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(242, 240, 234, 0.92); color: var(--ink); display: grid; place-items: center;
  opacity: 0; transform: translateY(-6px); transition: opacity 200ms var(--ease-ui), transform 250ms var(--ease-spring), background 160ms var(--ease-ui); cursor: copy; }
.card:hover .copy-link, .card:focus-within .copy-link { opacity: 1; transform: none; }
.copy-link.copied { background: var(--ink); color: var(--ecru); }
.card h3 button { all: unset; cursor: pointer; }
.card h3 button:hover { text-decoration: underline; text-underline-offset: 3px; }
.card .badge { position: absolute; top: 14px; left: 14px; z-index: 2; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 5px 9px; border-radius: 999px; background: var(--ecru); color: var(--ink); }
.card .sizes { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; display: grid; gap: 6px; opacity: 0; transform: translateY(8px); transition: opacity 250ms var(--ease-ui), transform 250ms var(--ease-ui); }
.card:hover .sizes, .card:focus-within .sizes { opacity: 1; transform: none; }
.sizes-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ecru); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); }
.sizes-row { display: flex; gap: 6px; }
.sizes-row button { flex: 1; height: 36px; border: 0; border-radius: 3px; background: rgba(242, 240, 234, 0.92); color: var(--ink); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: background 160ms var(--ease-ui), transform 200ms var(--ease-spring), color 160ms var(--ease-ui); }
.sizes-row button:hover { background: var(--ecru); transform: translateY(-2px); }
.sizes-row button.added { background: var(--ink); color: var(--ecru); }
.sizes-row button.added::after { content: ' ✓'; }
.sizes.inline { position: static; opacity: 1; transform: none; margin-top: 8px; }
.sizes.inline .sizes-label { color: inherit; text-shadow: none; opacity: 0.6; }
.sizes.inline .sizes-row button { flex: 0 0 auto; min-width: 42px; padding: 0 10px; height: 32px; background: rgba(10, 19, 40, 0.06); }
.sizes.inline .sizes-row button:hover { background: rgba(10, 19, 40, 0.12); }
.card h3 { font-size: 15px; font-weight: 500; letter-spacing: 0; }
.card .price { display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 2px; font-size: 14px; font-variant-numeric: tabular-nums; }
.card .price > * { white-space: nowrap; }
.card .price s { opacity: 0.5; }
.stitch { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: visible; }

/* Campaign bands: full bleed, drifting slightly inside their frame as they pass. The chalk band is cropped so its
   chalk line sits exactly on the page's centre, where the seam runs. */
.band { margin: 0; position: relative; overflow: hidden; background: var(--navy); }
.band img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); will-change: transform; }
.band.chalk { aspect-ratio: 1524 / 864; max-height: 92vh; }
.band.duo { aspect-ratio: 16 / 9; max-height: 92vh; }
.card.edit .ph { aspect-ratio: 3 / 4; }

/* Shop the look */
.look { background: var(--ecru); color: var(--ink); padding: clamp(64px, 10vh, 120px) var(--pad); }
.look-head { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 24px; margin-bottom: clamp(32px, 5vh, 48px); }
.look-head h2 { font-family: var(--display); font-weight: 500; font-size: clamp(32px, 3.4vw, 48px); letter-spacing: -0.025em; line-height: 1.1; }
.look-head h2 em { font-style: normal; opacity: 0.5; }
.look-head p { justify-self: end; font-size: 14px; color: var(--ink-soft); text-align: right; }
.look-body { display: grid; grid-template-columns: 7fr 5fr; gap: 28px; align-items: stretch; }
.look-photo { position: relative; border-radius: 4px; overflow: hidden; background: var(--ecru-2); aspect-ratio: 16 / 9; }
.look-photo img { width: 100%; height: 100%; object-fit: cover; }
.look-list { display: grid; gap: 10px; align-content: center; }
.look-item { display: grid; grid-template-columns: 88px 1fr; gap: 14px; padding: 10px; border-radius: 6px; transition: background 200ms var(--ease-ui); }
.look-item.lit, .look-item:hover { background: rgba(10, 19, 40, 0.05); }
.look-ph { border: 0; padding: 0; background: var(--ecru-2); border-radius: 4px; overflow: hidden; aspect-ratio: 3 / 4; cursor: pointer; }
.look-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-spring); }
.look-item:hover .look-ph img, .look-item.lit .look-ph img { transform: scale(1.05); }
.look-info { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.look-info b button { all: unset; cursor: pointer; font-weight: 500; }
.look-info b button:hover { text-decoration: underline; text-underline-offset: 3px; }
.look-info .price { display: flex; gap: 10px; } .look-info .price s { opacity: 0.5; }

/* About */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; background: var(--navy); color: var(--ecru); padding: clamp(64px, 10vh, 120px) var(--pad); align-items: center; }
.about-photo { overflow: hidden; border-radius: 4px; aspect-ratio: 16 / 10; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-copy { display: flex; flex-direction: column; gap: 20px; max-width: 520px; }
.about-copy .label { color: rgba(242, 240, 234, 0.6); }
.about-copy h2 { font-family: var(--display); font-size: clamp(32px, 3.4vw, 48px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; }
.about-copy p { font-size: 16px; line-height: 1.55; opacity: 0.85; }
.about-links { display: flex; gap: 24px; flex-wrap: wrap; }
.about-links .link { background: none; border: 0; border-bottom: 1px solid rgba(242, 240, 234, 0.4); color: inherit; font: inherit; font-size: 14px; font-weight: 500; padding: 0 0 2px; cursor: pointer; }

/* Newsletter */
.news { background: var(--ecru-2); padding: clamp(64px, 10vh, 120px) var(--pad); text-align: center; }
.news-inner { max-width: 560px; margin: 0 auto; display: grid; gap: 14px; justify-items: center; }
.news h2 { font-family: var(--display); font-size: clamp(28px, 3vw, 40px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; }
.news-inner > p { font-size: 15px; color: var(--ink-soft); }
.news-form { width: 100%; max-width: 480px; display: grid; gap: 8px; text-align: left; margin-top: 12px; }
.news-form label { font-size: 13px; font-weight: 500; }
.field { display: flex; gap: 8px; }
.field input { flex: 1; min-width: 0; height: 44px; border: 1px solid rgba(10, 19, 40, 0.2); border-radius: 999px; padding: 0 18px; font: inherit; font-size: 15px; background: var(--ecru); color: var(--ink); }
.field input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.news-form .btn { position: relative; height: 44px; }
.news-msg { font-size: 14px; min-height: 20px; color: var(--ink-soft); }

/* Footer: the thread ends in a knot above the signature. */
.foot { background: var(--navy); color: var(--ecru); padding: clamp(96px, 16vh, 180px) var(--pad) 32px; text-align: center; position: relative; }
.foot .knot-space { height: 240px; }
.foot .sign { font-family: var(--display); font-weight: 500; font-size: clamp(88px, 21vw, 340px); letter-spacing: -0.04em; line-height: 0.8; margin-top: 24px; }
.foot .ship { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
.foot-nav { display: flex; justify-content: space-between; gap: 24px; margin-top: 56px; font-size: 13px; opacity: 0.75; }
.foot-nav ul { display: flex; gap: 20px; list-style: none; padding: 0; flex-wrap: wrap; justify-content: flex-end; }
.foot-nav button { all: unset; cursor: pointer; }
.foot-nav a:hover, .foot-nav button:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Cart */
.ship-bar { padding: 0 24px 12px; }
.ship-bar p { font-size: 13px; margin-bottom: 8px; }
.ship-bar .track { display: block; height: 3px; background: rgba(10, 19, 40, 0.1); border-radius: 2px; overflow: hidden; }
.ship-bar .track i { display: block; height: 100%; background: var(--ink); width: 0; transition: width 600ms var(--ease-spring); }
.ship-bar .track.full i { background: #1d7a4a; }
.line { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(10, 19, 40, 0.08); }
.line-ph { border: 0; padding: 0; border-radius: 3px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--ecru-2); cursor: pointer; }
.line-ph img { width: 100%; height: 100%; object-fit: cover; }
.line-info { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.line-info span { color: var(--ink-soft); font-size: 13px; }
.qty { display: inline-flex; align-items: center; border: 1px solid rgba(10, 19, 40, 0.2); border-radius: 999px; margin-top: 6px; width: max-content; }
.qty button { width: 30px; height: 30px; border: 0; background: transparent; cursor: pointer; font-size: 16px; color: inherit; }
.qty output { min-width: 24px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.line-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-size: 14px; }
.rm { all: unset; cursor: pointer; font-size: 12px; color: var(--ink-soft); border-bottom: 1px solid currentColor; }
.cart-empty { padding: 24px 0 16px; color: var(--ink-soft); }
.sum { display: flex; justify-content: space-between; font-size: 15px; }
.sheet-foot .link { text-align: center; background: none; border: 0; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; color: var(--ink-soft); }

/* Quick view */
.qv { width: min(1040px, 94vw); height: min(720px, 92dvh); margin: auto; display: grid; grid-template-columns: 1.15fr 1fr; border-radius: 6px; overflow: hidden; }
.qv-gallery { position: relative; background: var(--ecru-2); }
.qv-main { position: absolute; inset: 0 0 76px 0; overflow: hidden; }
.qv-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qv-thumbs { position: absolute; left: 0; right: 0; bottom: 0; height: 76px; display: flex; gap: 6px; padding: 8px; background: rgba(242, 240, 234, 0.9); backdrop-filter: blur(8px); }
.qv-thumbs button { width: 46px; border: 2px solid transparent; border-radius: 3px; overflow: hidden; padding: 0; background: var(--ecru-2); cursor: pointer; transition: border-color 160ms var(--ease-ui); }
.qv-thumbs button[aria-current="true"] { border-color: var(--ink); }
.qv-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.qv-prev, .qv-next { position: absolute; top: 45%; background: rgba(242, 240, 234, 0.9); color: var(--ink); }
.qv-prev:hover, .qv-next:hover { background: var(--ecru); }
.qv-prev { left: 12px; } .qv-next { right: 12px; }
.qv-info { position: relative; padding: 36px 32px 28px; display: flex; flex-direction: column; gap: 14px; overflow: auto; }
.qv-info .x { position: absolute; top: 12px; right: 12px; }
.qv-info h2 { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.qv-price { font-size: 16px; display: flex; gap: 10px; align-items: baseline; }
.qv-price s { color: var(--ink-soft); }
.qv-price em { font-style: normal; font-size: 12px; font-weight: 700; background: var(--ink); color: var(--ecru); padding: 3px 7px; border-radius: 999px; }
.qv-desc { font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.pick { border: 0; padding: 0; margin: 4px 0 0; }
.pick legend { font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.pick-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pick-row button { min-width: 48px; height: 40px; padding: 0 12px; border: 1px solid rgba(10, 19, 40, 0.25); border-radius: 3px; background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 160ms var(--ease-ui), color 160ms var(--ease-ui), border-color 160ms var(--ease-ui); }
.pick-row button:hover { border-color: var(--ink); }
.pick-row button[aria-checked="true"] { background: var(--ink); color: var(--ecru); border-color: var(--ink); }
.err { color: #b4322e; font-size: 13px; }
#qv-add.done { background: #1d7a4a; }
.copy { all: unset; display: inline-flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 500; cursor: copy; color: var(--ink-soft); }
.copy:hover { color: var(--ink); } .copy.copied { color: #1d7a4a; }
.acc { border-top: 1px solid rgba(10, 19, 40, 0.1); padding: 12px 0; }
.acc summary { cursor: pointer; font-size: 14px; font-weight: 500; list-style: none; display: flex; justify-content: space-between; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '+'; } .acc[open] summary::after { content: '−'; }
.acc p, .acc div { font-size: 13px; color: var(--ink-soft); padding-top: 8px; line-height: 1.5; }
.size-table table, .prose table { width: 100%; border-collapse: collapse; font-size: 13px; }
.size-table th, .size-table td, .prose th, .prose td { text-align: left; padding: 6px 0; border-bottom: 1px solid rgba(10, 19, 40, 0.08); }
.muted { color: var(--ink-soft); font-size: 13px; }

/* Search */
.search { width: min(680px, 94vw); margin: 10vh auto auto; border-radius: 8px; overflow: hidden; max-height: 80dvh; display: flex; flex-direction: column; }
.search-box { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid rgba(10, 19, 40, 0.1); }
.search-box input { flex: 1; min-width: 0; border: 0; font: inherit; font-size: 18px; background: transparent; color: inherit; outline: none; }
.search-hint { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); padding: 14px 16px 6px; }
.search-results { list-style: none; padding: 0 8px 8px; margin: 0; overflow: auto; }
.search-results button { all: unset; display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; width: 100%; box-sizing: border-box; padding: 8px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.search-results button:hover, .search-results button:focus-visible { background: rgba(10, 19, 40, 0.06); }
.search-results img { width: 44px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; }
.search-results span { display: flex; flex-direction: column; }
.search-results small { color: var(--ink-soft); font-size: 12px; }
.search-results em { font-style: normal; font-variant-numeric: tabular-nums; }

/* Panels */
.prose h3 { font-size: 15px; font-weight: 500; margin: 20px 0 6px; }
.prose h4 { font-size: 13px; font-weight: 500; margin: 12px 0 4px; color: var(--ink-soft); }
.prose p { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.menu-list { list-style: none; padding: 0; display: grid; }
.menu-list a, .menu-list button { all: unset; display: block; padding: 14px 0; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; cursor: pointer; border-bottom: 1px solid rgba(10, 19, 40, 0.08); width: 100%; box-sizing: border-box; }
.panel-form { display: grid; gap: 12px; margin-top: 12px; }
.panel-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; }
.panel-form input, .panel-form textarea { font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid rgba(10, 19, 40, 0.2); border-radius: 6px; background: var(--ecru); color: var(--ink); }
.panel-form input:focus, .panel-form textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.panel-form .btn { position: relative; justify-content: center; }
.order-sum { display: grid; gap: 8px; font-size: 14px; padding: 8px 0 16px; border-bottom: 1px solid rgba(10, 19, 40, 0.1); }
.order-sum > div { display: flex; justify-content: space-between; gap: 12px; }
.order-total { font-size: 15px; padding-top: 8px; border-top: 1px solid rgba(10, 19, 40, 0.1); }

/* The seam: one thread from the cut to the knot. Difference blend keeps it legible on navy and on écru. */
#seam { position: absolute; left: 0; top: 0; width: 100%; z-index: 30; pointer-events: none; mix-blend-mode: difference; overflow: visible; }

@media (max-width: 760px) {
  .nav { grid-template-columns: auto 1fr auto; gap: 8px; }
  .burger { display: grid; }
  .primary { display: none; }
  .cart span { display: none; }
  .hero-media .frame { height: auto; width: 100%; }
  .look-body, .about { grid-template-columns: 1fr; }
  .look-head { grid-template-columns: 1fr; } .look-head p { justify-self: start; text-align: left; }
  .look-list { grid-template-columns: 1fr 1fr; gap: 6px; }
  .look-item { grid-template-columns: 1fr; padding: 6px; }
  .sizes.inline .sizes-row { flex-wrap: wrap; }
  .filters { justify-self: start; }
  .drop-note { margin-top: 8px; }
  .qv { grid-template-columns: 1fr; grid-template-rows: 52% 1fr; width: 100vw; height: 100dvh; border-radius: 0; }
  .qv-info { padding: 24px 20px; }
  .mega { grid-template-columns: 1fr 1fr; }
  .field { flex-direction: column; }
  .field input, .news-form .btn { width: 100%; justify-content: center; }
  .sheet { width: 100vw; }
  .foot-nav { flex-direction: column; align-items: center; } .foot-nav ul { justify-content: center; }
  .hero { grid-template-columns: 1fr; align-items: start; row-gap: 28px; min-height: auto; }
  .hero-copy, .hero-media { grid-column: 1; }
  .hero h1 .cut, .hero h1 .soft { font-size: 44px; }
  .hero-media .frame { max-height: none; }
  .drop-head { grid-template-columns: 1fr; }
  .drop-head p { justify-self: start; text-align: left; }
  .grid, .grid.two { grid-template-columns: repeat(2, 1fr); column-gap: 14px; row-gap: 36px; }
  .grid.two .card:nth-child(1), .grid.two .card:nth-child(2) { grid-column: auto; }
  .card .sizes { display: none; }
  .band.chalk, .band.duo { aspect-ratio: auto; height: 62svh; }
  .foot nav { flex-direction: column; gap: 16px; align-items: center; }
}

/* ---------- The world (core/world.js): the canvas is the page's floor; the document sits on it. ---------- */
#fabric { z-index: 0; }
html.opening #fabric { z-index: 50; }
main, .marquee, .foot { position: relative; z-index: 1; }
html.world .foot { background: transparent; }
html.world .foot .sign { transition: color 600ms var(--ease-ui); }
html.world.closing .foot .sign { color: var(--ecru); }

/* The campaign: a tall stretch of page whose stage stays put while the frame fills up. */
.camp { position: relative; height: 340vh; }
.camp .stage { position: sticky; top: 0; height: 100vh; display: grid; grid-template-rows: auto 1fr auto; padding: 100px var(--pad) 40px; pointer-events: none; }
.camp-label { display: flex; gap: 10px; align-items: baseline; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.camp-label span { color: var(--ink); font-weight: 500; }
.camp-label b { margin-left: auto; font-family: var(--display); font-weight: 500; font-size: 28px; letter-spacing: -0.02em; color: var(--ink); text-transform: none; }
.camp-label i { font-style: normal; font-size: 13px; }
.camp-caps { list-style: none; margin: 0; padding: 0; align-self: end; position: relative; height: 2.6em; font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -0.02em; }
.camp-caps li { position: absolute; left: 0; bottom: 0; opacity: 0; transform: translateY(14px); transition: opacity 420ms var(--ease-ui), transform 520ms var(--ease-spring); }
.camp-caps li b { font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: 0.06em; margin-right: 14px; vertical-align: middle; color: var(--ink-soft); }
.camp-caps li.on { opacity: 1; transform: none; }
.camp-hint { font-size: 13px; color: var(--ink-soft); transition: opacity 320ms var(--ease-ui); }
.camp-hint.off { opacity: 0; }
.camp-fallback { display: none; }
html:not(.world) .camp { height: auto; }
html:not(.world) .camp .stage { position: static; height: auto; display: block; }
html:not(.world) .camp-fallback { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; }
html:not(.world) .camp-fallback img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; }
html:not(.world) .camp-caps { display: none; }
html:not(.world) .camp-hint { display: none; }
@media (max-width: 720px) { .camp { height: 300vh; } .camp .stage { padding-top: 84px; } html:not(.world) .camp-fallback { grid-template-columns: 1fr 1fr; } }