/*!
 * Luma – Fashion E-commerce HTML Template
 * Copyright (c) 2026 DesignVersa. All rights reserved. https://designversa.com
 */
:root {
    --bg: #f2eee7;
    --paper: #faf8f4;
    --sand: #e7e0d4;
    --taupe: #a39583;
    --taupe-d: #6f6457;
    --ink: #151412;
    --text: #2e2b27;
    --muted: #756e66;
    --line: #d9d1c4;
    --line-2: #c6bcad;
    --accent: #2f45ff;
    --accent-d: #1f32d6;
    --on-accent: #fff;
    --sale: #b3452a;
    --display: "Syne", "Helvetica Neue", Arial, sans-serif;
    --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ease: cubic-bezier(.2, .7, .2, 1);
}
[data-theme="dark"] {
    --bg: #121110;
    --paper: #1a1917;
    --sand: #24221f;
    --taupe: #8b7f71;
    --taupe-d: #b3a797;
    --ink: #f3efe8;
    --text: #d9d3ca;
    --muted: #9b948a;
    --line: #34312c;
    --line-2: #4a4640;
    --accent: #6f7dff;
    --accent-d: #8d98ff;
    --sale: #e07657;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); color: var(--text); background: var(--bg); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); line-height: 1.02; margin: 0 0 14px; font-weight: 700; letter-spacing: -.035em; }
p { margin: 0 0 16px; }
::selection { background: var(--accent); color: #fff; }
.container { width: min(1360px, 100% - 64px); margin-inline: auto; }
.section { padding: 110px 0; }
.section.tight { padding: 70px 0; }
.paper { background: var(--paper); }
.sand { background: var(--sand); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }
.eyebrow.plain::before { display: none; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
em.it { font-family: var(--sans); font-style: italic; font-weight: 400; letter-spacing: -.04em; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 44px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.sec-head h2 { font-size: clamp(34px, 4.4vw, 64px); margin: 12px 0 0; }
.sec-head p { max-width: 420px; color: var(--muted); margin: 0; }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 4px; white-space: nowrap; transition: gap .3s var(--ease), color .2s, border-color .2s; }
.link-arrow::after { content: "→"; }
.link-arrow:hover { gap: 16px; color: var(--accent); border-color: var(--accent); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 30px; border: 1px solid transparent; border-radius: 0; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease); white-space: nowrap; }
.btn-dark { background: var(--ink); color: var(--bg); }
.btn-dark:hover { background: var(--accent); color: #fff; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-d); }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: var(--bg); }
.btn-light { background: #f2eee7; color: #151412; }
.btn-light:hover { background: var(--accent); color: #fff; }
.btn-sm { height: 42px; padding: 0 18px; font-size: 12px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* Top bar + header */
.topbar { background: var(--ink); color: var(--bg); font-size: 12px; letter-spacing: .06em; }
.topbar-in { display: flex; justify-content: space-between; gap: 20px; height: 38px; align-items: center; }
.topbar a { border-bottom: 1px solid currentColor; }
.header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px; gap: 24px; }
.nav-links { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; font-size: 14px; font-weight: 500; }
.nav-links a { position: relative; padding: 6px 0; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right .35s var(--ease); }
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }
.nav-links a.active { color: var(--ink); font-weight: 600; }
.logo { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: .02em; color: var(--ink); display: inline-flex; align-items: flex-start; gap: 3px; line-height: 1; }
.logo i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 2px; }
.nav-right { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.icon-btn { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink); cursor: pointer; transition: color .2s; }
.icon-btn:hover { color: var(--accent); }
.badge { position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; font-style: normal; line-height: 1; }
.badge.empty { background: var(--line-2); color: var(--ink); }
.menu-toggle { display: none; }
.mobile-menu { display: none; }
.searchbar { display: none; border-top: 1px solid var(--line); background: var(--paper); }
.searchbar.open { display: block; }
.searchbar-in { display: flex; align-items: center; gap: 14px; height: 70px; color: var(--muted); }
.searchbar input { flex: 1; border: 0; background: transparent; font: inherit; font-family: var(--display); font-size: 24px; color: var(--ink); outline: none; min-width: 0; }
.searchbar-hint { font-size: 13px; }
.searchbar-hint a { margin-left: 10px; color: var(--ink); border-bottom: 1px solid var(--line-2); }

/* ------------------------------------------------------------------
   Product "photography": tonal backdrop + garment silhouette.
   Swap any .ph element for an <img> when you have real photos.
------------------------------------------------------------------- */
.ph { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; --t: #e3dbcf; --c: #23211f;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        radial-gradient(120% 80% at 50% 30%, rgba(255, 255, 255, .5), transparent 62%),
        linear-gradient(180deg, transparent 72%, rgba(0, 0, 0, .06) 72.2%, rgba(0, 0, 0, .02)),
        var(--t); }
.ph::before { content: ""; position: absolute; left: 24%; right: 24%; bottom: 7%; height: 5%; border-radius: 50%; background: radial-gradient(closest-side, rgba(30, 25, 20, .3), transparent); filter: blur(4px); }
.ph::after { content: ""; position: absolute; inset: 13% 17% 10%; background: linear-gradient(115deg, rgba(255, 255, 255, .22), transparent 38%, transparent 60%, rgba(0, 0, 0, .22)), var(--c); -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; transition: transform .8s var(--ease); }
.ph.hang { background:
        linear-gradient(90deg, transparent calc(50% - .5px), rgba(30, 25, 20, .35) calc(50% - .5px), rgba(30, 25, 20, .35) calc(50% + .5px), transparent calc(50% + .5px)) top / 100% 11% no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        radial-gradient(120% 80% at 50% 30%, rgba(255, 255, 255, .5), transparent 62%),
        linear-gradient(180deg, transparent 72%, rgba(0, 0, 0, .06) 72.2%, rgba(0, 0, 0, .02)),
        var(--t); }
.ph.hang::before { display: none; }
.ph.hang::after { inset: 10% 16% 9%; }
.ph.zoom::after { inset: -20% -30% -10%; }
.ph.back::after { transform: scaleX(-1); }
.ph.detail::after { inset: -45% -60% -25% -20%; }
.ph.mini::after { inset: 12%; }
.ph.wide { aspect-ratio: 16 / 9; }
.ph.square { aspect-ratio: 1; }
.ph.tall { aspect-ratio: 2 / 3; }
.g-coat { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath fill-rule='evenodd' d='M30 8L42 4L50 16L58 4L70 8L88 22L97 92L85 94L80 46L81 116L19 116L20 46L15 94L3 92L12 22Z M49.5 18h1v98h-1z M26 80h14v1H26z M60 80h14v1H60z'/%3E%3C/svg%3E"); }
.g-jacket { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath fill-rule='evenodd' d='M32 10L43 6L50 16L57 6L68 10L88 24L96 88L85 90L79 46L80 102L20 102L21 46L15 90L4 88L12 24Z M49.5 18h1v84h-1z M21 58h28v.8H21z M51 58h29v.8H51z M21 72h28v.8H21z M51 72h29v.8H51z M20.5 86h28.5v.8H20.5z M51 86h29v.8H51z'/%3E%3C/svg%3E"); }
.g-knit { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath fill-rule='evenodd' d='M35 10Q50 19 65 10L86 18L98 92L86 94L80 44L80 108L20 108L20 44L14 94L2 92L14 18Z M20 100h60v1H20z M3 86l11 1.4-.1.8-11-1.4z M97 86l-11 1.4.1.8 11-1.4z'/%3E%3C/svg%3E"); }
.g-shirt { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath fill-rule='evenodd' d='M36 8L44 4L50 14L56 4L64 8L86 20L96 86L85 88L78 44L78 110L22 110L22 44L15 88L4 86L14 20Z M49.6 14h.8v96h-.8z M30 34h10v.8H30z'/%3E%3C/svg%3E"); }
.g-tee { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath d='M34 12Q50 22 66 12L90 24L100 46L84 52L80 42L80 110L20 110L20 42L16 52L0 46L10 24Z'/%3E%3C/svg%3E"); }
.g-dress { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath fill-rule='evenodd' d='M38 4L42 4L44 10Q50 16 56 10L58 4L62 4L66 30L62 44L86 116L14 116L38 44L34 30Z M38.5 44h23v.8h-23z'/%3E%3C/svg%3E"); }
.g-trouser { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath fill-rule='evenodd' d='M26 4L74 4L78 20L86 116L60 116L50 40L40 116L14 116L22 20Z M26.5 11h47v.8h-47z M36 12h.8v22H36z M63.2 12h.8v22h-.8z'/%3E%3C/svg%3E"); }
.g-skirt { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath fill-rule='evenodd' d='M30 14L70 14L71 24L92 108L8 108L29 24Z M29.8 22h40.4v.8H29.8z M42 23l-6 84h-.8l6-84z M58 23l6 84h.8l-6-84z'/%3E%3C/svg%3E"); }
.g-bag { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath fill-rule='evenodd' d='M20 46L80 46L86 114L14 114Z M33 46C33 12 67 12 67 46L62 46C62 20 38 20 38 46Z M22 56h56v.8H22z'/%3E%3C/svg%3E"); }
.g-boot { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath fill-rule='evenodd' d='M24 20L48 20L49 74Q62 80 84 86Q96 90 96 102L96 110L16 110L16 98Q20 64 24 20Z M16 102h80v1.2H16z M26 24h20v.8H26z'/%3E%3C/svg%3E"); }
.g-beanie { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath fill-rule='evenodd' d='M18 76Q18 30 50 30Q82 30 82 76Z M14 77h72v20H14z M50 10a10 10 0 1 1 0 20a10 10 0 1 1 0-20z M26 78h.8v18H26z M38 78h.8v18H38z M50 78h.8v18H50z M62 78h.8v18H62z M74 78h.8v18H74z'/%3E%3C/svg%3E"); }
.g-look { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 160'%3E%3Cpath d='M50 2a9 9 0 1 1 0 18a9 9 0 1 1 0-18z M46 20L54 20L55 25L66 27Q72 29 73 38L80 98L73 100L70 60L72 104L58 104L57 150L60 156L51 156L50 108L49 156L40 156L43 150L42 104L28 104L30 60L27 100L20 98L27 38Q28 29 34 27L45 25Z'/%3E%3C/svg%3E"); }
.g-look::after { inset: 7% 12% 5%; }
.g-look::before { bottom: 4%; left: 30%; right: 30%; }
.ph-cap { position: absolute; left: 16px; bottom: 14px; z-index: 2; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #151412; font-weight: 600; }
.ph-cap.r { left: auto; right: 16px; }

/* Product cards */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px 22px; }
.pgrid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.pcard { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pmedia { position: relative; overflow: hidden; }
.pcard:hover .ph::after { transform: scale(1.05); }
.ptag { position: absolute; top: 14px; left: 14px; background: var(--paper); color: var(--ink); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 5px 9px; }
.ptag.sale { background: var(--sale); color: #fff; }
.pwish { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(250, 248, 244, .8); color: #151412; display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s; }
.pwish:hover { background: #fff; }
.pwish.on { color: var(--accent); }
.pwish.on svg { fill: currentColor; }
.pquick { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 44px; border: 0; background: #151412; color: #f2eee7; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; transform: translateY(130%); transition: transform .4s var(--ease), background .2s; }
.pquick span { font-size: 18px; font-weight: 400; }
.pcard:hover .pquick, .pquick:focus-visible { transform: none; }
.pquick:hover { background: var(--accent); }
.pinfo { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.pinfo h3 { font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin: 0; line-height: 1.3; }
.pinfo h3 a:hover { color: var(--accent); }
.pprice { font-size: 15px; white-space: nowrap; color: var(--ink); }
.pprice s, .price s { color: var(--muted); font-size: .88em; margin-left: 4px; }
.now.sale { color: var(--sale); }
.pdesc { display: none; color: var(--muted); font-size: 15px; margin: 0; }
.pmeta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: -4px; }
.pmeta small { color: var(--muted); font-size: 12px; }
.dots { display: flex; gap: 6px; }
.dot { width: 14px; height: 14px; border-radius: 50%; border: 0; background: var(--d); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); cursor: pointer; padding: 0; outline: 1px solid transparent; outline-offset: 2px; }
.dot.on { outline-color: var(--ink); }
.pgrid.list { grid-template-columns: 1fr; gap: 0; }
.pgrid.list .pcard { display: grid; grid-template-columns: 200px 1fr auto; grid-template-rows: auto auto 1fr; gap: 6px 36px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.pgrid.list .pmedia { grid-row: 1 / 4; }
.pgrid.list .pinfo { grid-column: 2 / 4; align-self: end; }
.pgrid.list .pinfo h3 { font-family: var(--display); font-size: 26px; }
.pgrid.list .pdesc { display: block; grid-column: 2; max-width: 560px; }
.pgrid.list .pmeta { grid-column: 2; align-self: start; margin-top: 8px; }
.pgrid.list .pquick { transform: none; position: static; margin-top: 0; }
.pgrid.list .pmedia .pquick { display: none; }

/* Marquee */
.marquee { background: var(--ink); color: var(--bg); overflow: hidden; border-block: 1px solid var(--ink); }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee span { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.6vw, 36px); letter-spacing: -.02em; padding: 18px 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 34px; margin-right: 34px; text-transform: uppercase; }
.marquee span i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); display: inline-block; }
.marquee.light { background: transparent; color: var(--ink); border-color: var(--line); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Home hero */
.hero { padding: 36px 0 70px; }
.hero-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; align-items: end; }
.hero-copy { grid-column: 1 / 8; padding-bottom: 10px; position: relative; z-index: 2; }
.hero-meta { display: flex; gap: 22px; align-items: center; margin-bottom: 34px; font-size: 13px; color: var(--muted); letter-spacing: .06em; }
.hero-meta b { color: var(--ink); font-weight: 600; }
.hero h1 { font-size: clamp(64px, 9.2vw, 148px); line-height: .84; letter-spacing: -.06em; text-transform: uppercase; margin: 0 0 36px; font-weight: 800; }
.hero h1 .indent { padding-left: 1.1em; }
.hero h1 em { font-family: var(--sans); text-transform: none; font-weight: 400; font-style: italic; letter-spacing: -.07em; color: var(--accent); }
.hero-foot { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; max-width: 720px; }
.hero-foot p { font-size: 18px; max-width: 380px; margin: 0; color: var(--text); }
.hero-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-media { grid-column: 8 / 13; position: relative; }
.hero-media .ph.main { aspect-ratio: 4 / 5.4; }
.hero-media .ph.inset { position: absolute; width: 34%; right: 16px; bottom: 16px; border: 6px solid var(--bg); aspect-ratio: 3 / 4; z-index: 2; }
.hero-tag { position: absolute; right: 16px; top: 16px; background: var(--paper); padding: 12px 14px; font-size: 13px; line-height: 1.35; z-index: 2; min-width: 170px; }
.hero-tag small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.hero-tag b { font-family: var(--display); color: var(--ink); font-size: 16px; }
.hero-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); margin-top: 60px; }
.hero-strip div { padding: 20px 20px 0 0; font-size: 14px; color: var(--muted); }
.hero-strip b { display: block; font-family: var(--display); color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }

/* Category mosaic */
.mosaic { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: 22px; }
.tile { position: relative; display: block; overflow: hidden; }
.tile .ph { height: 100%; aspect-ratio: auto; min-height: 330px; }
.tile.big { grid-row: span 2; }
.tile.big .ph { min-height: 700px; }
.tile-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; display: flex; justify-content: space-between; align-items: flex-end; z-index: 2; color: #151412; }
.tile-label h3 { font-size: clamp(26px, 2.6vw, 40px); margin: 0; color: #151412; }
.tile-label small { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.tile-label span { width: 44px; height: 44px; border-radius: 50%; background: #151412; color: #f2eee7; display: grid; place-items: center; transition: background .2s, transform .4s var(--ease); flex: none; }
.tile:hover .tile-label span { background: var(--accent); transform: rotate(-45deg); }
.tile:hover .ph::after { transform: scale(1.06); }
.tile .ph::after, .tile .ph.hang::after { inset: 12% 22% 27%; }
.tile.big .ph::after, .tile.big .ph.hang::after { inset: 12% 18% 20%; }
.tile .ph::before { bottom: 22%; }

/* Editorial dark band */
.band { background: #151412; color: #d9d3ca; padding: 120px 0; position: relative; overflow: hidden; }
.band h2, .band h3 { color: #f3efe8; }
.band .eyebrow { color: #a39c92; }
.band-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 60px; align-items: center; }
.band h2 { font-size: clamp(44px, 6vw, 96px); text-transform: uppercase; letter-spacing: -.055em; line-height: .88; margin: 18px 0 26px; }
.band p { max-width: 440px; font-size: 18px; }
.band-looks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: end; }
.band-looks .ph:nth-child(2) { transform: translateY(-50px); }
.band-looks figure { margin: 0; }
.band-looks figcaption { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #a39c92; margin-top: 10px; }
.band-looks figure:nth-child(2) { transform: translateY(-50px); }
.band .big-num { position: absolute; right: -2vw; top: -4vw; font-family: var(--display); font-weight: 800; font-size: 26vw; line-height: 1; color: rgba(255, 255, 255, .035); pointer-events: none; }

/* Values */
.values { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.values > div { padding: 34px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.values b { font-family: var(--display); font-size: 13px; color: var(--accent); letter-spacing: .1em; }
.values h3 { font-size: 22px; margin: 34px 0 8px; letter-spacing: -.02em; }
.values p { color: var(--muted); margin: 0; font-size: 15px; }

/* Journal teaser */
.jgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 22px; }
.jpost { display: flex; flex-direction: column; gap: 12px; }
.jpost .ph { aspect-ratio: 4 / 3; }
.jpost:first-child .ph { aspect-ratio: 4 / 3.4; }
.jpost small { color: var(--muted); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.jpost h3 { font-size: 24px; letter-spacing: -.025em; margin: 0; line-height: 1.12; }
.jpost:hover h3 { color: var(--accent); }

/* Newsletter + footer */
.footer-news { border-top: 1px solid var(--line); padding: 90px 0; }
.footer-news-in { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; }
.footer-news h2 { font-size: clamp(44px, 6vw, 92px); letter-spacing: -.055em; line-height: .9; margin: 0; }
.news-form p { color: var(--muted); max-width: 440px; }
.field.news-field { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--ink); }
.field.news-field input { flex: 1; width: auto; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 18px; color: var(--ink); padding: 14px 0; outline: none; }
.news-field .btn { height: 50px; }
.news-field .error { flex-basis: 100%; }
.footer { background: var(--ink); color: #a8a197; padding: 80px 0 30px; overflow: hidden; }
.footer .logo { color: #f3efe8; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand p { margin: 18px 0 22px; max-width: 320px; }
.footer h4 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #f3efe8; margin-bottom: 18px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 15px; }
.footer ul a:hover, .footer-bottom a:hover { color: #f3efe8; }
.socials { display: flex; gap: 8px; }
.socials a { width: 40px; height: 40px; border: 1px solid #3b3833; display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #d9d3ca; transition: background .2s, border-color .2s; }
.socials a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.footer-mega { font-family: var(--display); font-weight: 800; font-size: clamp(90px, 19vw, 300px); line-height: .8; letter-spacing: -.06em; color: #f3efe8; margin: 60px 0 0; text-align: center; opacity: .95; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; margin-top: 30px; padding-top: 24px; border-top: 1px solid #34312c; font-size: 13px; }
.footer-bottom a { color: #f3efe8; border-bottom: 1px solid #5a554e; }
.pay { display: flex; gap: 6px; flex-wrap: wrap; }
.pay i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em; border: 1px solid #3b3833; padding: 4px 7px; color: #d9d3ca; }
[data-theme="dark"] .footer { background: #0b0a09; }

/* Toast */
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; display: flex; align-items: center; gap: 14px; background: var(--ink); color: var(--bg); padding: 12px 18px 12px 12px; min-width: 300px; max-width: calc(100% - 32px); transform: translateY(140%); opacity: 0; transition: transform .45s var(--ease), opacity .3s; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.toast.show { transform: none; opacity: 1; }
.toast .ph { width: 46px; flex: none; }
.toast div { flex: 1; line-height: 1.35; font-size: 14px; }
.toast small { display: block; opacity: .7; font-size: 12px; }
.toast a { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid currentColor; white-space: nowrap; }
.toast div:only-child { padding-left: 6px; }

/* Page heads */
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 26px; }
.crumbs a:hover { color: var(--ink); }
.crumbs span::before { content: "/"; margin-right: 8px; opacity: .5; }
.pagehead { padding: 50px 0 40px; border-bottom: 1px solid var(--line); }
.pagehead-in { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.pagehead h1 { font-size: clamp(52px, 8vw, 128px); letter-spacing: -.06em; line-height: .86; margin: 0; text-transform: uppercase; font-weight: 800; }
.pagehead h1 sup { font-family: var(--sans); font-size: .18em; font-weight: 500; letter-spacing: 0; vertical-align: top; color: var(--accent); margin-left: 6px; }
.pagehead p { max-width: 420px; color: var(--muted); margin: 0; }
.page-hero { padding: 80px 0 30px; text-align: left; }
.page-hero h1 { font-size: clamp(40px, 6vw, 88px); letter-spacing: -.06em; line-height: .9; margin: 18px 0 18px; text-transform: uppercase; font-weight: 800; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); padding: 14px 15px; font: inherit; border-radius: 0; outline: none; transition: border-color .2s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
.field textarea { min-height: 150px; resize: vertical; }
.field .error { display: none; color: var(--sale); font-size: 13px; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--sale); }
.field.invalid .error { display: block; }
.news-field.invalid { border-color: var(--sale); }
.form-success { display: none; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink); padding: 14px 16px; font-weight: 500; margin-top: 16px; border-left: 3px solid var(--accent); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }

/* Shop */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { height: 38px; padding: 0 16px; border: 1px solid var(--line-2); background: transparent; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.chip:hover { border-color: var(--ink); }
.chip.active { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip small { opacity: .6; }
.shop { display: grid; grid-template-columns: 250px 1fr; gap: 50px; padding: 40px 0 110px; align-items: start; }
.filters { position: sticky; top: 100px; display: grid; gap: 30px; }
.fgroup h4 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 14px; display: flex; justify-content: space-between; }
.fgroup { padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.size-btn { height: 42px; border: 1px solid var(--line-2); background: transparent; cursor: pointer; font-size: 13px; font-weight: 500; transition: all .2s; color: var(--ink); }
.size-btn:hover { border-color: var(--ink); }
.size-btn.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.size-btn.out { color: var(--muted); background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--line) 70%, transparent) 6px 7px); cursor: not-allowed; text-decoration: line-through; }
.swatch-list { display: grid; gap: 8px; }
.swatch-opt { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 3px 0; cursor: pointer; font-size: 14px; text-align: left; color: var(--text); }
.swatch-opt i { width: 18px; height: 18px; border-radius: 50%; background: var(--d); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); outline: 1px solid transparent; outline-offset: 2px; }
.swatch-opt.active { color: var(--ink); font-weight: 600; }
.swatch-opt.active i { outline-color: var(--ink); }
.swatch-opt small { margin-left: auto; color: var(--muted); }
.range-out { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); margin-top: 8px; }
.range-out b { color: var(--ink); }
input[type="range"] { width: 100%; accent-color: var(--ink); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; cursor: pointer; }
.toggle-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 20px; margin-bottom: 30px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.toolbar .count { font-size: 14px; color: var(--muted); }
.toolbar .count b { color: var(--ink); }
.tools { display: flex; gap: 10px; align-items: center; }
.tools select { height: 42px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); padding: 0 12px; font: inherit; font-size: 14px; border-radius: 0; }
.view-btn { width: 42px; height: 42px; border: 1px solid var(--line-2); background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.view-btn.active { border-color: var(--ink); color: var(--ink); }
.filter-open { display: none; }
.active-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.active-filters button { border: 0; background: var(--sand); padding: 6px 10px; font-size: 12px; cursor: pointer; color: var(--ink); }
.empty-state { text-align: center; padding: 80px 20px; border: 1px dashed var(--line-2); }
.empty-state h3 { font-size: 30px; }
.empty-state p { color: var(--muted); }

/* Product page */
.pdp { display: grid; grid-template-columns: 1.25fr 1fr; gap: 60px; padding: 30px 0 90px; align-items: start; }
.gallery { display: grid; grid-template-columns: 86px 1fr; gap: 14px; position: sticky; top: 96px; }
.thumbs { display: grid; gap: 10px; align-content: start; }
.thumbs button { padding: 0; border: 1px solid transparent; background: none; cursor: pointer; opacity: .6; transition: opacity .2s, border-color .2s; }
.thumbs button.active, .thumbs button:hover { opacity: 1; border-color: var(--ink); }
.gallery-main { position: relative; }
.gallery-main .ph { aspect-ratio: 4 / 5; }
.gallery-nav { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 6px; z-index: 3; }
.gallery-nav button { width: 44px; height: 44px; border: 0; background: var(--paper); color: var(--ink); cursor: pointer; font-size: 18px; }
.gallery-nav button:hover { background: var(--ink); color: var(--bg); }
.gallery-count { position: absolute; left: 16px; bottom: 18px; z-index: 3; font-size: 12px; letter-spacing: .14em; color: #151412; font-weight: 600; }
.pinfo-col { display: grid; gap: 26px; }
.pinfo-col h1 { font-size: clamp(38px, 4.2vw, 62px); letter-spacing: -.05em; margin: 10px 0 0; line-height: .95; }
.price { font-size: 22px; color: var(--ink); }
.rating { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.stars { color: var(--ink); letter-spacing: 2px; }
.opt-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 12px; }
.opt-head b { font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; color: var(--ink); }
.opt-head span { color: var(--muted); }
.opt-head button { background: none; border: 0; border-bottom: 1px solid var(--ink); padding: 0; cursor: pointer; font-size: 13px; color: var(--ink); }
.color-opts { display: flex; gap: 10px; flex-wrap: wrap; }
.color-opts button { width: 58px; padding: 0; border: 1px solid transparent; background: none; cursor: pointer; }
.color-opts button .ph { aspect-ratio: 3 / 4; }
.color-opts button.active { border-color: var(--ink); }
.pdp .sizes { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
.buy-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); height: 54px; }
.qty button { width: 44px; height: 100%; border: 0; background: transparent; cursor: pointer; font-size: 18px; color: var(--ink); }
.qty button:hover { color: var(--accent); }
.qty input { width: 38px; text-align: center; border: 0; background: transparent; font: inherit; color: var(--ink); -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty.sm { height: 40px; }
.qty.sm button { width: 34px; }
.qty.sm input { width: 28px; }
.wish-big { width: 54px; height: 54px; border: 1px solid var(--line-2); background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.wish-big.on { color: var(--accent); border-color: var(--accent); }
.wish-big.on svg { fill: currentColor; }
.size-msg { font-size: 13px; color: var(--sale); margin-top: 8px; display: none; }
.size-msg.show { display: block; }
.perks { display: grid; gap: 10px; font-size: 14px; color: var(--muted); padding: 18px 0; border-block: 1px solid var(--line); }
.perks div { display: flex; gap: 12px; align-items: center; }
.perks svg { flex: none; color: var(--ink); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; padding: 18px 0; display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 20px; font-weight: 300; line-height: 1; transition: transform .3s; }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc details > div { padding: 0 0 20px; color: var(--muted); font-size: 15px; }
.acc ul { margin: 0; padding-left: 18px; }
.reviews { display: grid; grid-template-columns: 340px 1fr; gap: 70px; align-items: start; }
.score { font-family: var(--display); font-size: 110px; font-weight: 800; line-height: .9; color: var(--ink); letter-spacing: -.06em; }
.bars { display: grid; gap: 8px; margin: 24px 0; font-size: 13px; }
.bars div { display: grid; grid-template-columns: 18px 1fr 34px; gap: 10px; align-items: center; }
.bars i { height: 4px; background: var(--line); position: relative; }
.bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--ink); }
.fit { margin-top: 18px; font-size: 13px; }
.fit-bar { height: 4px; background: var(--line); position: relative; margin: 10px 0 6px; }
.fit-bar::after { content: ""; position: absolute; top: -5px; left: 54%; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
.fit-lbl { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.review { padding: 28px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 180px 1fr; gap: 30px; }
.review:first-child { padding-top: 0; }
.review h4 { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin: 6px 0 8px; }
.review p { margin: 0; color: var(--text); }
.review small { color: var(--muted); display: block; font-size: 13px; }
.review .who b { color: var(--ink); display: block; }
.modal { position: fixed; inset: 0; z-index: 90; background: rgba(15, 14, 12, .55); display: none; place-items: center; padding: 20px; }
.modal.open { display: grid; }
.modal-box { background: var(--bg); width: min(720px, 100%); max-height: 90vh; overflow: auto; padding: 40px; position: relative; }
.modal-box h2 { font-size: 38px; letter-spacing: -.045em; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border: 1px solid var(--line-2); background: transparent; cursor: pointer; font-size: 20px; color: var(--ink); }
.unit-toggle { display: inline-flex; border: 1px solid var(--line-2); margin: 10px 0 20px; }
.unit-toggle button { border: 0; background: transparent; padding: 8px 16px; cursor: pointer; font-size: 13px; color: var(--ink); }
.unit-toggle button.active { background: var(--ink); color: var(--bg); }
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { text-align: left; padding: 13px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.tbl td:first-child { font-weight: 600; color: var(--ink); }

/* Cart */
.cart-layout { display: grid; grid-template-columns: 1fr 400px; gap: 60px; align-items: start; padding: 40px 0 110px; }
.cart-head { display: grid; grid-template-columns: 1fr 130px 110px; gap: 20px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cart-head span:last-child { text-align: right; }
.line { display: grid; grid-template-columns: 1fr 130px 110px; gap: 20px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); }
.line-prod { display: grid; grid-template-columns: 110px 1fr; gap: 22px; align-items: center; }
.line-prod .ph { aspect-ratio: 3 / 4; }
.line h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 4px; }
.line h3 a:hover { color: var(--accent); }
.line-opts { font-size: 14px; color: var(--muted); }
.line-actions { display: flex; gap: 18px; margin-top: 12px; font-size: 13px; }
.line-actions button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted); border-bottom: 1px solid var(--line-2); }
.line-actions button:hover { color: var(--ink); border-color: var(--ink); }
.line .qty { justify-self: start; }
.line-total { text-align: right; font-weight: 600; color: var(--ink); font-size: 17px; }
.line-total small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.summary { background: var(--paper); border: 1px solid var(--line); padding: 32px; position: sticky; top: 100px; }
.summary h2 { font-size: 28px; letter-spacing: -.04em; margin-bottom: 22px; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 15px; }
.sum-row.total { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 18px; font-size: 20px; font-weight: 600; color: var(--ink); }
.sum-row.discount { color: var(--accent); }
.promo { display: flex; margin: 20px 0 6px; border: 1px solid var(--line-2); }
.promo input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 14px; font: inherit; color: var(--ink); text-transform: uppercase; outline: none; height: 46px; }
.promo button { border: 0; background: var(--ink); color: var(--bg); padding: 0 18px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.promo-msg { font-size: 13px; min-height: 20px; color: var(--muted); }
.promo-msg.ok { color: var(--accent); }
.promo-msg.bad { color: var(--sale); }
.ship-meter { margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.ship-meter i { display: block; height: 3px; background: var(--line); margin-top: 8px; position: relative; }
.ship-meter i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--accent); transition: width .5s var(--ease); }
.summary .btn { margin-top: 18px; }
.summary-note { font-size: 12px; color: var(--muted); text-align: center; margin: 14px 0 0; }

/* Checkout */
.checkout { display: grid; grid-template-columns: 1fr 420px; gap: 70px; padding: 40px 0 110px; align-items: start; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 40px; counter-reset: step; }
.steps li { list-style: none; border-top: 2px solid var(--line); padding-top: 14px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); counter-increment: step; }
.steps li::before { content: "0" counter(step) " "; color: var(--muted); font-family: var(--display); margin-right: 6px; }
.steps li.active { border-color: var(--ink); color: var(--ink); }
.steps li.done { border-color: var(--accent); color: var(--ink); }
.steps li.done::before { content: "✓ "; color: var(--accent); }
.steps { padding: 0; margin-top: 0; }
.panel { display: none; }
.panel.active { display: block; animation: fadeUp .5s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.panel h2 { font-size: 36px; letter-spacing: -.045em; margin-bottom: 8px; }
.panel > p { color: var(--muted); margin-bottom: 28px; }
.panel-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.back-link { background: none; border: 0; cursor: pointer; font-size: 14px; color: var(--muted); padding: 0; }
.back-link:hover { color: var(--ink); }
.radio-cards { display: grid; gap: 10px; margin-top: 8px; }
.radio-card { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px; border: 1px solid var(--line-2); cursor: pointer; transition: border-color .2s, background .2s; background: var(--paper); }
.radio-card:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.radio-card input { accent-color: var(--ink); width: 18px; height: 18px; }
.radio-card b { color: var(--ink); display: block; font-weight: 600; }
.radio-card small { color: var(--muted); }
.radio-card .amt { font-weight: 600; color: var(--ink); }
.paytabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.paytabs button { flex: 1; min-width: 110px; height: 50px; border: 1px solid var(--line-2); background: var(--paper); cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink); }
.paytabs button.active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.card-preview { background: linear-gradient(135deg, #1d1c1a, #3a3630); color: #f3efe8; padding: 24px; aspect-ratio: 1.7; max-width: 340px; display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 24px; position: relative; overflow: hidden; }
.card-preview::after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: var(--accent); right: -60px; top: -70px; opacity: .9; }
.card-preview .cn { font-family: var(--display); font-size: 21px; letter-spacing: .08em; position: relative; z-index: 1; }
.card-preview .cr { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; position: relative; z-index: 1; }
.card-preview .chip-ic { width: 38px; height: 28px; background: linear-gradient(135deg, #d8c79f, #a48b58); position: relative; z-index: 1; }
.pay-alt { padding: 30px; border: 1px dashed var(--line-2); text-align: center; color: var(--muted); }
.mini-lines { display: grid; gap: 16px; margin-bottom: 20px; max-height: 360px; overflow: auto; }
.mini-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; font-size: 14px; }
.mini-line .ph { position: relative; overflow: visible; }
.mini-line .ph i { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 11px; font-style: normal; display: grid; place-items: center; font-weight: 700; z-index: 3; }
.mini-line b { display: block; color: var(--ink); font-weight: 600; }
.mini-line small { color: var(--muted); }
.success { text-align: center; padding: 40px 0; }
.success .tick { width: 84px; height: 84px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; margin: 0 auto 28px; }
.success h2 { font-size: clamp(40px, 5vw, 64px); letter-spacing: -.05em; text-transform: uppercase; }
.success p { color: var(--muted); max-width: 460px; margin-inline: auto; }
.order-no { display: inline-block; border: 1px solid var(--line-2); padding: 10px 18px; font-family: var(--display); font-size: 18px; color: var(--ink); margin: 10px 0 26px; }
.secure { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin-top: 14px; }

/* Lookbook */
.lb-hero { padding: 40px 0 80px; }
.lb-title { font-size: clamp(40px, 9vw, 150px); line-height: .8; letter-spacing: -.065em; text-transform: uppercase; font-weight: 800; margin: 20px 0 0; }
.lb-title span { display: block; }
.lb-title span:nth-child(2) { padding-left: 14vw; color: var(--accent); }
.lb-intro { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 15px; }
.lb-intro b { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.lb-intro p { margin: 0; color: var(--ink); }
.spread { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; align-items: end; padding: 60px 0; }
.spread .look-a { grid-column: 1 / 7; }
.spread .look-b { grid-column: 8 / 12; }
.spread.flip .look-a { grid-column: 7 / 13; grid-row: 1; }
.spread.flip .look-b { grid-column: 1 / 5; grid-row: 1; align-self: start; }
.look figure { margin: 0; }
.look .ph { aspect-ratio: 4 / 5; }
.look-num { font-family: var(--display); font-size: 13px; letter-spacing: .1em; color: var(--accent); font-weight: 700; }
.look h3 { font-size: clamp(30px, 3vw, 46px); letter-spacing: -.045em; margin: 10px 0 12px; }
.look p { color: var(--muted); max-width: 400px; }
.look-shop { display: grid; gap: 0; margin-top: 22px; border-top: 1px solid var(--line); }
.look-shop a { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; transition: padding .3s var(--ease), color .2s; }
.look-shop a:hover { color: var(--accent); padding-left: 8px; }
.quote { padding: 120px 0; text-align: center; }
.quote blockquote { font-family: var(--display); font-size: clamp(34px, 4.6vw, 70px); line-height: 1; letter-spacing: -.05em; color: var(--ink); max-width: 1100px; margin: 0 auto 26px; font-weight: 700; }
.quote cite { font-style: normal; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lb-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.credits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding: 40px 0; border-top: 1px solid var(--line); font-size: 14px; }
.credits b { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

/* Collections */
.col-row { display: grid; grid-template-columns: 90px 1fr 1.2fr; gap: 40px; padding: 50px 0; border-bottom: 1px solid var(--line); align-items: center; }
.col-row:first-child { border-top: 1px solid var(--line); }
.col-row .num { font-family: var(--display); font-size: 15px; color: var(--muted); align-self: start; padding-top: 8px; }
.col-row h2 { font-size: clamp(42px, 5.5vw, 86px); letter-spacing: -.06em; text-transform: uppercase; line-height: .86; margin: 0 0 20px; }
.col-row p { color: var(--muted); max-width: 440px; }
.col-row .pieces { display: flex; gap: 22px; font-size: 13px; color: var(--muted); margin: 22px 0 28px; }
.col-row .pieces b { display: block; font-family: var(--display); font-size: 26px; color: var(--ink); }
.col-art { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; align-items: end; }
.col-art .ph:first-child { aspect-ratio: 4 / 5; }
.col-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 620px; }
.col-hero .ph { aspect-ratio: auto; height: 100%; }
.col-hero-copy { background: var(--accent); color: #fff; padding: 60px; display: flex; flex-direction: column; justify-content: space-between; }
.col-hero-copy h2 { color: #fff; font-size: clamp(56px, 7vw, 120px); letter-spacing: -.065em; text-transform: uppercase; line-height: .82; margin: 0; }
.col-hero-copy p { max-width: 420px; font-size: 18px; color: rgba(255, 255, 255, .85); }
.col-hero-copy .eyebrow { color: rgba(255, 255, 255, .8); }
.col-hero-copy .eyebrow::before { background: #fff; }

/* About */
.statement { font-family: var(--display); font-size: clamp(34px, 4.4vw, 68px); line-height: 1; letter-spacing: -.05em; color: var(--ink); font-weight: 700; max-width: 1200px; }
.statement span { color: var(--muted); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.split h2 { font-size: clamp(36px, 4vw, 58px); letter-spacing: -.05em; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.kpis div { padding: 30px 20px 0 0; }
.kpis b { font-family: var(--display); font-size: clamp(48px, 5vw, 80px); color: var(--ink); letter-spacing: -.06em; line-height: 1; display: block; }
.kpis span { color: var(--muted); font-size: 14px; }
.tl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-left: 1px solid var(--line); }
.tl div { padding: 0 26px 10px; border-right: 1px solid var(--line); }
.tl b { font-family: var(--display); font-size: 44px; color: var(--accent); letter-spacing: -.05em; display: block; }
.tl h3 { font-size: 20px; margin: 16px 0 8px; letter-spacing: -.02em; }
.tl p { color: var(--muted); font-size: 15px; margin: 0; }
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.team .ph { aspect-ratio: 3 / 4; margin-bottom: 14px; }
.team h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.team p { color: var(--muted); font-size: 14px; margin: 0; }

/* Contact */
.stores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.store .ph { aspect-ratio: 4 / 3; margin-bottom: 18px; }
.store h3 { font-size: 28px; letter-spacing: -.04em; margin-bottom: 6px; }
.store p { color: var(--muted); font-size: 15px; margin: 0 0 4px; }
.store .open-now { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink); margin-top: 10px; }
.store .open-now::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3aa35b; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: start; }
.care-list { display: grid; gap: 0; border-top: 1px solid var(--line); margin-top: 30px; }
.care-list div { padding: 20px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; }
.care-list b { color: var(--ink); font-weight: 600; }
.care-list span { color: var(--muted); text-align: right; }

/* Account */
.acct { display: grid; grid-template-columns: 250px 1fr; gap: 60px; padding: 40px 0 110px; align-items: start; }
.acct-nav { display: grid; gap: 2px; position: sticky; top: 100px; }
.acct-nav button, .acct-nav a { text-align: left; background: none; border: 0; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 15px; color: var(--muted); display: flex; justify-content: space-between; }
.acct-nav .active { color: var(--ink); font-weight: 600; }
.acct-nav .active::after { content: "→"; }
.acct-user { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.acct-user .av { width: 54px; height: 54px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--display); font-weight: 700; display: grid; place-items: center; font-size: 18px; }
.acct-user b { display: block; color: var(--ink); }
.acct-user small { color: var(--muted); }
.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fadeUp .45s var(--ease); }
.tab-pane h2 { font-size: 40px; letter-spacing: -.045em; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0 40px; }
.stat-row div { background: var(--paper); border: 1px solid var(--line); padding: 22px; }
.stat-row b { font-family: var(--display); font-size: 36px; color: var(--ink); letter-spacing: -.04em; display: block; line-height: 1.1; }
.stat-row span { color: var(--muted); font-size: 14px; }
.order { border: 1px solid var(--line); background: var(--paper); margin-bottom: 14px; }
.order-top { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 20px; padding: 18px 22px; border-bottom: 1px solid var(--line); font-size: 14px; align-items: center; }
.order-top small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.order-top b { color: var(--ink); font-weight: 600; }
.order-items { display: flex; gap: 12px; padding: 18px 22px; align-items: center; flex-wrap: wrap; }
.order-items .ph { width: 64px; }
.order-items .note { margin-left: auto; font-size: 14px; color: var(--muted); }
.status { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; background: var(--sand); color: var(--ink); }
.status.ship { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.status.done { background: color-mix(in srgb, #3aa35b 16%, transparent); color: #2f7d47; }
.addr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.addr { border: 1px solid var(--line); background: var(--paper); padding: 26px; position: relative; }
.addr.default { border-color: var(--ink); }
.addr h4 { font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: 0; margin-bottom: 10px; }
.addr p { color: var(--muted); font-size: 15px; margin: 0 0 16px; }
.addr .tagd { position: absolute; top: 20px; right: 20px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: var(--ink); color: var(--bg); padding: 4px 8px; }
.addr-actions { display: flex; gap: 16px; font-size: 13px; }
.addr-actions a, .addr-actions button { background: none; border: 0; padding: 0; cursor: pointer; border-bottom: 1px solid var(--line-2); color: var(--ink); font-size: 13px; }
.addr.add { display: grid; place-items: center; border-style: dashed; min-height: 200px; color: var(--muted); cursor: pointer; font-size: 15px; }
.addr.add:hover { border-color: var(--ink); color: var(--ink); }

/* Wishlist */
.wish-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 4px; }
.wish-actions .btn { height: 44px; }
.wish-actions .x { width: 44px; height: 44px; border: 1px solid var(--line-2); background: transparent; cursor: pointer; font-size: 16px; color: var(--ink); }
.wish-actions .x:hover { border-color: var(--ink); }
.wish-card select { height: 44px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; padding: 0 10px; border-radius: 0; width: 100%; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1180px) {
    .nav { grid-template-columns: auto 1fr; }
    .nav-links { display: none; }
    .logo { order: -1; }
    .menu-toggle { display: grid; }
    .mobile-menu { display: none; flex-direction: column; padding: 8px 32px 24px; border-top: 1px solid var(--line); background: var(--bg); }
    .mobile-menu.open { display: flex; }
    .mobile-menu a, .mobile-menu button { padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); text-align: left; background: none; cursor: pointer; }
    .mobile-menu button { font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0; border: 0; }
    .topbar-in span:not(.topbar-mid) { display: none; }
    .topbar-in { justify-content: center; }
    .pgrid { grid-template-columns: repeat(3, 1fr); }
    .shop { grid-template-columns: 1fr; gap: 0; }
    .filters { position: fixed; inset: 0 auto 0 0; width: min(360px, 90vw); background: var(--bg); z-index: 80; padding: 30px; overflow: auto; transform: translateX(-102%); transition: transform .4s var(--ease); box-shadow: 0 0 60px rgba(0, 0, 0, .2); align-content: start; }
    .filters.open { transform: none; }
    .filter-open { display: inline-flex; }
    .pdp { grid-template-columns: 1fr; gap: 40px; }
    .gallery { position: static; }
    .cart-layout, .checkout { grid-template-columns: 1fr; gap: 40px; }
    .summary { position: static; }
    .band-grid, .split, .contact-grid, .footer-news-in { grid-template-columns: 1fr; gap: 40px; }
    .reviews { grid-template-columns: 1fr; gap: 40px; }
    .col-row { grid-template-columns: 60px 1fr; }
    .col-row .col-art { grid-column: 1 / -1; }
    .acct { grid-template-columns: 1fr; gap: 30px; }
    .acct-nav { position: static; display: flex; gap: 22px; overflow-x: auto; }
    .acct-nav button, .acct-nav a { border-bottom: 2px solid transparent; white-space: nowrap; }
    .acct-nav .active { border-color: var(--ink); }
    .acct-nav .active::after { content: none; }
    .team { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .container { width: min(1360px, 100% - 40px); }
    .section { padding: 80px 0; }
    .hero-copy, .hero-media { grid-column: 1 / -1; }
    .hero-media { margin-left: 22%; }
    .hero-strip { grid-template-columns: 1fr 1fr; }
    .mosaic { grid-template-columns: 1fr 1fr; }
    .tile.big { grid-column: 1 / -1; grid-row: auto; }
    .tile.big .ph { min-height: 480px; }
    .values { grid-template-columns: 1fr 1fr; }
    .jgrid { grid-template-columns: 1fr 1fr; }
    .jpost:first-child { grid-column: 1 / -1; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .spread, .spread.flip { grid-template-columns: 1fr 1fr; }
    .spread .look-a, .spread.flip .look-a { grid-column: 1 / -1; grid-row: auto; }
    .spread .look-b, .spread.flip .look-b { grid-column: 1 / -1; grid-row: auto; }
    .lb-intro, .credits { grid-template-columns: 1fr 1fr; }
    .lb-strip { grid-template-columns: 1fr 1fr; }
    .col-hero { grid-template-columns: 1fr; }
    .col-hero .ph { aspect-ratio: 4 / 3; }
    .kpis, .tl { grid-template-columns: 1fr 1fr; }
    .tl div { padding-bottom: 30px; }
    .stores { grid-template-columns: 1fr; }
    .order-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .container { width: calc(100% - 32px); }
    .section { padding: 64px 0; }
    .nav { height: 64px; gap: 8px; }
    .logo { font-size: 24px; }
    .hide-sm { display: none; }
    .icon-btn { width: 38px; }
    .mobile-menu { padding: 8px 16px 20px; }
    .topbar { font-size: 11px; }
    .hero h1 { font-size: clamp(40px, 11.5vw, 80px); }
    .hero h1 .indent { padding-left: .25em; }
    .hero-foot { grid-template-columns: 1fr; }
    .hero-media { margin-left: 0; }
    .hero-media .ph.inset { display: none; }
    .hero-meta { flex-wrap: wrap; gap: 10px 18px; }
    .sec-head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .pgrid, .pgrid.cols-3 { grid-template-columns: 1fr 1fr; gap: 30px 12px; }
    .pquick { transform: none; height: 36px; font-size: 10px; padding: 0 10px; left: 6px; right: 6px; bottom: 6px; }
    .pinfo { flex-direction: column; gap: 2px; }
    .pinfo h3, .pprice { font-size: 14px; }
    .pmeta small { display: none; }
    .pgrid.list .pcard { grid-template-columns: 110px 1fr; gap: 6px 16px; }
    .pgrid.list .pinfo, .pgrid.list .pdesc, .pgrid.list .pmeta { grid-column: 2; }
    .pgrid.list .pinfo h3 { font-size: 18px; }
    .pgrid.list .pdesc { font-size: 13px; }
    .mosaic { grid-template-columns: 1fr; }
    .tile .ph { min-height: 300px; }
    .band { padding: 80px 0; }
    .band-looks { gap: 8px; }
    .values, .jgrid { grid-template-columns: 1fr; }
    .footer-news { padding: 64px 0; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .pagehead { padding: 34px 0 30px; }
    .pagehead h1 { font-size: clamp(30px, 9.5vw, 60px); }
    .pagehead h1.long { font-size: 7.4vw; }
    .ph.wide { aspect-ratio: 4 / 3 !important; }
    .gallery { grid-template-columns: 1fr; }
    .thumbs { grid-template-columns: repeat(4, 1fr); order: 2; }
    .buy-row { grid-template-columns: auto 1fr; }
    .buy-row .wish-big { display: none; }
    .review { grid-template-columns: 1fr; gap: 10px; }
    .modal-box { padding: 28px 20px; }
    .cart-head { display: none; }
    .line { grid-template-columns: 1fr auto; }
    .line-prod { grid-column: 1 / -1; grid-template-columns: 90px 1fr; gap: 16px; }
    .summary { padding: 24px; }
    .form-grid { grid-template-columns: 1fr; }
    .steps li { font-size: 11px; letter-spacing: .06em; }
    .spread { padding: 30px 0; }
    .lb-intro, .credits, .kpis { grid-template-columns: 1fr; gap: 20px; }
    .lb-title span:nth-child(2) { padding-left: 8vw; }
    .col-row { grid-template-columns: 1fr; gap: 20px; padding: 36px 0; }
    .col-hero-copy { padding: 36px 24px; gap: 30px; }
    .tl { grid-template-columns: 1fr; border-left: 0; }
    .tl div { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 0; }
    .team { grid-template-columns: 1fr 1fr; }
    .stat-row { gap: 8px; } .stat-row div { padding: 14px; } .stat-row b { font-size: 26px; } .stat-row span { font-size: 12px; }
    .order-top { grid-template-columns: 1fr 1fr; }
    .addr-grid { grid-template-columns: 1fr; }
    .toast { right: 16px; left: 16px; bottom: 16px; min-width: 0; }
    .quote { padding: 70px 0; }
}

/* ------------------------------------------------------------------
   Shared page components (blog, auth, FAQ, team, gallery, legal, 404…)
   Colours come from the --x-* variables mapped above for this template.
   Copyright (c) 2026 DesignVersa. All rights reserved.
------------------------------------------------------------------- */
.x-center { text-align: center; }
.x-narrow { max-width: 760px; margin-inline: auto; }
.x-mt { margin-top: 40px; }
.x-muted { color: var(--x-muted); }
.x-grid-2, .x-grid-3, .x-grid-4 { display: grid; gap: 24px; }
.x-grid-2 { grid-template-columns: repeat(2, 1fr); }
.x-grid-3 { grid-template-columns: repeat(3, 1fr); }
.x-grid-4 { grid-template-columns: repeat(4, 1fr); }
.x-card { background: var(--x-card); border: 1px solid var(--x-line); border-radius: var(--x-radius); padding: 28px; }
.x-card h3 { font-size: 22px; margin-bottom: 8px; }
.x-card p:last-child { margin-bottom: 0; }
.x-icon { width: 52px; height: 52px; border-radius: calc(var(--x-radius) * .7); display: grid; place-items: center; background: color-mix(in srgb, var(--x-accent) 16%, transparent); color: var(--x-accent); margin-bottom: 18px; font-size: 22px; font-weight: 800; }
.x-title { font-size: clamp(30px, 4vw, 48px); margin: 10px 0 14px; }
.x-lead { font-size: 18px; color: var(--x-muted); max-width: 640px; }
.x-center .x-lead { margin-inline: auto; }
.x-head { margin-bottom: 44px; }

/* Placeholder artwork (swap for your own images) */
.x-art { position: relative; border-radius: var(--x-radius); overflow: hidden; aspect-ratio: 16 / 10; background: linear-gradient(135deg, hsl(var(--h, 240) 80% 62%), hsl(calc(var(--h, 240) + 45) 75% 48%)); }
.x-art::before { content: ""; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; right: -12%; top: -20%; border: 28px solid rgba(255, 255, 255, .18); }
.x-art::after { content: ""; position: absolute; width: 34%; aspect-ratio: 1; border-radius: 24%; left: 8%; bottom: -12%; background: rgba(255, 255, 255, .16); transform: rotate(14deg); }
.x-art.tall { aspect-ratio: 3 / 4; }
.x-art.wide { aspect-ratio: 21 / 9; }
.x-art.square { aspect-ratio: 1; }
.x-art span { position: absolute; left: 18px; bottom: 14px; z-index: 1; color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }

/* Blog */
.x-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.x-post { display: flex; flex-direction: column; gap: 12px; }
.x-post .x-meta { font-size: 13px; color: var(--x-muted); display: flex; gap: 10px; flex-wrap: wrap; }
.x-post h3 { font-size: 22px; line-height: 1.25; margin: 0; }
.x-post p { color: var(--x-muted); margin: 0; }
.x-post .x-more { color: var(--x-accent); font-weight: 700; }
.x-pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--x-accent) 16%, transparent); color: var(--x-accent); }
.x-featured { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; margin-bottom: 60px; }
.x-featured h2 { font-size: clamp(28px, 3.4vw, 42px); }
.x-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 34px; }
.x-cats a, .x-cats button { border: 1px solid var(--x-line); border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 600; background: transparent; color: var(--x-text); cursor: pointer; }
.x-cats .active { background: var(--x-accent); border-color: var(--x-accent); color: var(--x-on-accent); }

/* Article / prose */
.x-article { max-width: 760px; margin: 0 auto; font-size: 18px; line-height: 1.8; }
.x-article h2 { font-size: 30px; margin: 44px 0 14px; }
.x-article h3 { font-size: 23px; margin: 32px 0 10px; }
.x-article p { margin: 0 0 1.2em; }
.x-article ul, .x-article ol { padding-left: 22px; margin: 0 0 1.2em; }
.x-article li { margin-bottom: 8px; }
.x-article blockquote { margin: 32px 0; padding: 20px 26px; border-left: 4px solid var(--x-accent); background: var(--x-soft); border-radius: 0 var(--x-radius) var(--x-radius) 0; font-size: 21px; color: var(--x-ink); }
.x-article .x-art { margin: 30px 0; }
.x-author { display: flex; gap: 14px; align-items: center; margin: 22px 0 34px; }
.x-avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; flex: none; background: linear-gradient(135deg, hsl(var(--h, 240) 75% 55%), hsl(calc(var(--h, 240) + 50) 70% 42%)); }
.x-avatar.lg { width: 110px; height: 110px; font-size: 34px; }
.x-share { display: flex; gap: 10px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--x-line); align-items: center; flex-wrap: wrap; }
.x-share a { border: 1px solid var(--x-line); border-radius: 999px; padding: 8px 16px; font-weight: 600; }

/* FAQ (no JavaScript needed) */
.x-faq { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.x-faq details { background: var(--x-card); border: 1px solid var(--x-line); border-radius: var(--x-radius); padding: 20px 24px; }
.x-faq summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 17px; color: var(--x-ink); display: flex; justify-content: space-between; gap: 16px; }
.x-faq summary::-webkit-details-marker { display: none; }
.x-faq summary::after { content: "+"; color: var(--x-accent); font-size: 24px; line-height: 1; }
.x-faq details[open] summary::after { content: "–"; }
.x-faq details p { margin: 12px 0 0; color: var(--x-muted); }
.x-faq-group { margin-bottom: 44px; }
.x-faq-group h2 { font-size: 26px; margin-bottom: 16px; max-width: 860px; margin-inline: auto; }

/* Auth pages */
.x-auth { min-height: 72vh; display: grid; place-items: center; padding: 60px 20px; }
.x-auth-card { width: min(460px, 100%); background: var(--x-card); border: 1px solid var(--x-line); border-radius: var(--x-radius); padding: 40px; box-shadow: 0 20px 50px rgba(0, 0, 0, .08); }
.x-auth-card h1 { font-size: 32px; margin: 0 0 6px; }
.x-auth-card form { display: grid; gap: 16px; margin-top: 26px; }
.x-field label { display: block; font-size: 14px; font-weight: 600; color: var(--x-ink); margin-bottom: 7px; }
.x-field input, .x-field select, .x-field textarea { width: 100%; border: 1px solid var(--x-line); background: var(--x-soft); color: var(--x-ink); border-radius: calc(var(--x-radius) * .6); padding: 13px 15px; font: inherit; }
.x-field input:focus, .x-field select:focus, .x-field textarea:focus { outline: none; border-color: var(--x-accent); }
.x-field .error { display: none; color: #dc2626; font-size: 13px; margin-top: 5px; }
.x-field.invalid input { border-color: #dc2626; }
.x-field.invalid .error { display: block; }
.x-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; flex-wrap: wrap; }
.x-row a, .x-link { color: var(--x-accent); font-weight: 600; }
.x-check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.x-divider { display: flex; align-items: center; gap: 12px; color: var(--x-muted); font-size: 13px; margin: 6px 0; }
.x-divider::before, .x-divider::after { content: ""; flex: 1; height: 1px; background: var(--x-line); }
.x-social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.x-social button { border: 1px solid var(--x-line); background: transparent; color: var(--x-ink); border-radius: calc(var(--x-radius) * .6); padding: 12px; font: inherit; font-weight: 600; cursor: pointer; }
.x-full { width: 100%; }
.form-success.x-success, .x-success { display: none; background: color-mix(in srgb, var(--x-accent) 16%, transparent); color: var(--x-ink); padding: 12px 14px; border-radius: calc(var(--x-radius) * .6); font-weight: 600; }

/* 404 */
.x-404 { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 80px 20px; }
.x-404 .code { font-size: clamp(110px, 22vw, 240px); font-weight: 800; line-height: .9; color: var(--x-accent); letter-spacing: -.05em; font-family: var(--x-heading); }
.x-404 h1 { font-size: clamp(28px, 4vw, 42px); margin: 16px 0 10px; }
.x-404 .x-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* Team / people */
.x-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.x-member { text-align: center; }
.x-member .x-art { aspect-ratio: 4 / 5; margin-bottom: 16px; }
.x-member h3 { font-size: 20px; margin: 0 0 2px; }
.x-member p { color: var(--x-muted); margin: 0; font-size: 14px; }
.x-profile { display: grid; grid-template-columns: 320px 1fr; gap: 50px; align-items: start; }
.x-profile .x-art { aspect-ratio: 4 / 5; }
.x-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0; }
.x-stats div { background: var(--x-soft); border-radius: calc(var(--x-radius) * .8); padding: 18px; text-align: center; }
.x-stats b { display: block; font-size: 28px; color: var(--x-ink); font-family: var(--x-heading); }
.x-stats span { font-size: 13px; color: var(--x-muted); }

/* Lists, timeline, values */
.x-list { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 12px; }
.x-list li { display: flex; gap: 12px; align-items: flex-start; }
.x-list li::before { content: "✓"; width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 900; background: color-mix(in srgb, var(--x-accent) 18%, transparent); color: var(--x-accent); }
.x-timeline { position: relative; display: grid; gap: 28px; padding-left: 34px; max-width: 760px; }
.x-timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--x-line); }
.x-timeline div { position: relative; }
.x-timeline div::before { content: ""; position: absolute; left: -32px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--x-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--x-accent) 20%, transparent); }
.x-timeline b { display: block; color: var(--x-accent); font-family: var(--x-heading); font-size: 20px; }
.x-timeline h3 { font-size: 20px; margin: 2px 0 4px; }
.x-timeline p { margin: 0; color: var(--x-muted); }
.x-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.x-kpi { text-align: center; padding: 26px; border: 1px solid var(--x-line); border-radius: var(--x-radius); background: var(--x-card); }
.x-kpi b { display: block; font-size: 40px; color: var(--x-ink); font-family: var(--x-heading); line-height: 1.1; }
.x-kpi span { color: var(--x-muted); font-size: 14px; }

/* Gallery */
.x-gallery { columns: 3; column-gap: 20px; }
.x-gallery .x-art { break-inside: avoid; margin-bottom: 20px; }

/* Jobs / list rows */
.x-rows { display: grid; gap: 12px; }
.x-rowcard { display: grid; grid-template-columns: 1fr auto auto; gap: 20px; align-items: center; padding: 22px 26px; border: 1px solid var(--x-line); border-radius: var(--x-radius); background: var(--x-card); transition: border-color .2s; }
.x-rowcard:hover { border-color: var(--x-accent); }
.x-rowcard h3 { font-size: 20px; margin: 0 0 2px; }
.x-rowcard small { color: var(--x-muted); }

/* Pricing packages */
.x-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.x-plan { background: var(--x-card); border: 1px solid var(--x-line); border-radius: var(--x-radius); padding: 32px; display: flex; flex-direction: column; }
.x-plan.hot { border: 2px solid var(--x-accent); }
.x-plan .x-price { font-size: 44px; font-weight: 800; color: var(--x-ink); font-family: var(--x-heading); margin: 12px 0; }
.x-plan .x-price small { font-size: 15px; color: var(--x-muted); font-weight: 500; }
.x-plan .x-list { flex: 1; }

/* Calculator */
.x-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.x-calc-out { background: var(--x-soft); border-radius: var(--x-radius); padding: 30px; text-align: center; }
.x-calc-out b { display: block; font-size: 52px; color: var(--x-accent); font-family: var(--x-heading); line-height: 1.1; margin: 8px 0; }
.x-range { width: 100%; accent-color: var(--x-accent); }

/* Legal */
.x-legal { display: grid; grid-template-columns: 240px 1fr; gap: 50px; align-items: start; }
.x-toc { position: sticky; top: 110px; display: grid; gap: 8px; font-size: 14px; }
.x-toc a { color: var(--x-muted); }
.x-toc a:hover { color: var(--x-accent); }
.x-legal .x-article { margin: 0; font-size: 16px; }

/* Logo / partner row */
.x-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.x-logos div { border: 1px solid var(--x-line); border-radius: var(--x-radius); padding: 18px 26px; font-weight: 800; font-size: 18px; color: var(--x-ink); background: var(--x-card); min-width: 150px; text-align: center; }

/* Call to action band */
.x-cta { border-radius: var(--x-radius); padding: 56px; text-align: center; background: var(--x-soft); border: 1px solid var(--x-line); }
.x-cta h2 { font-size: clamp(28px, 3.6vw, 42px); }

@media (max-width: 1024px) {
    .x-grid-4, .x-team, .x-kpis { grid-template-columns: repeat(2, 1fr); }
    .x-grid-3, .x-posts, .x-plans { grid-template-columns: repeat(2, 1fr); }
    .x-featured, .x-profile, .x-calc, .x-legal { grid-template-columns: 1fr; }
    .x-toc { position: static; }
    .x-gallery { columns: 2; }
}
@media (max-width: 640px) {
    .x-grid-2, .x-grid-3, .x-grid-4, .x-posts, .x-team, .x-plans, .x-kpis { grid-template-columns: 1fr; }
    .x-gallery { columns: 1; }
    .x-rowcard { grid-template-columns: 1fr; }
    .x-auth-card, .x-cta { padding: 28px 22px; }
    .x-stats { grid-template-columns: 1fr 1fr; }
}
.page-hero .x-lead { margin-inline: auto; }
.x-center .x-author { justify-content: center; }
.x-center .x-author > div { text-align: left; }

/* Shared component colours for Luma */
:root { --x-accent: var(--accent); --x-on-accent: #fff; --x-ink: var(--ink); --x-text: var(--text); --x-muted: var(--muted); --x-line: var(--line); --x-card: var(--paper); --x-soft: var(--sand); --x-radius: 0px; --x-heading: var(--display); }
/* Editorial placeholder art: muted backdrop with a figure silhouette */
.x-art { background: radial-gradient(120% 80% at 50% 30%, rgba(255, 255, 255, .45), transparent 62%), linear-gradient(180deg, hsl(var(--h, 30) 16% 84%), hsl(calc(var(--h, 30) + 12) 12% 74%)); }
.x-art::before { content: ""; position: absolute; border: 0; border-radius: 0; width: auto; aspect-ratio: auto; inset: 10% 30% 4%; right: auto; top: 10%; left: 50%; width: 22%; transform: translateX(-50%); background: linear-gradient(115deg, rgba(255, 255, 255, .2), transparent 40%, rgba(0, 0, 0, .2)), hsl(var(--h, 30) 18% 26%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 160'%3E%3Cpath d='M50 2a9 9 0 1 1 0 18a9 9 0 1 1 0-18z M46 20L54 20L55 25L66 27Q72 29 73 38L80 98L73 100L70 60L72 104L58 104L57 150L60 156L51 156L50 108L49 156L40 156L43 150L42 104L28 104L30 60L27 100L20 98L27 38Q28 29 34 27L45 25Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 160'%3E%3Cpath d='M50 2a9 9 0 1 1 0 18a9 9 0 1 1 0-18z M46 20L54 20L55 25L66 27Q72 29 73 38L80 98L73 100L70 60L72 104L58 104L57 150L60 156L51 156L50 108L49 156L40 156L43 150L42 104L28 104L30 60L27 100L20 98L27 38Q28 29 34 27L45 25Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.x-art::after { width: 30%; aspect-ratio: auto; height: 4%; border-radius: 50%; left: 35%; bottom: 3%; transform: none; background: radial-gradient(closest-side, rgba(30, 25, 20, .3), transparent); }
.x-art span { color: #151412; font-size: 11px; letter-spacing: .16em; font-weight: 600; }
.x-avatar { background: hsl(var(--h, 30) 18% 30%); font-family: var(--display); }
.x-pill { border-radius: 0; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; }
.x-cats a, .x-cats button { border-radius: 0; font-size: 13px; font-weight: 500; }
.x-cats .active { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.x-post h3, .x-featured h2 { letter-spacing: -.035em; }
.x-post .x-more { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.x-post:hover h3 { color: var(--accent); }
.x-field label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.x-field input, .x-field select, .x-field textarea { background: var(--paper); border-color: var(--line-2); }
.x-field input:focus, .x-field select:focus { border-color: var(--ink); }
.x-auth-card { box-shadow: none; border-color: var(--line-2); }
.x-auth-card h1 { font-size: 44px; letter-spacing: -.05em; text-transform: uppercase; }
.x-social button { border-color: var(--line-2); }
.x-row a, .x-link { color: var(--ink); border-bottom: 1px solid var(--line-2); }
.x-404 .code { color: var(--ink); font-weight: 800; letter-spacing: -.08em; margin-bottom: 28px; }
.x-404 .code::after { content: "."; color: var(--accent); }
.x-faq details { padding: 22px 0; border-width: 0 0 1px; background: transparent; }
.x-faq summary { font-family: var(--sans); font-weight: 600; }
.x-faq summary::after { color: var(--ink); font-weight: 300; }
.x-faq-group h2 { font-size: 34px; letter-spacing: -.04em; }
.x-cta { background: var(--ink); border: 0; color: #d9d3ca; }
.x-cta h2 { color: #f3efe8; letter-spacing: -.045em; }
.x-cta .x-muted { color: #a8a197; }
.x-cta .btn-dark { background: #f2eee7; color: #151412; }
.x-cta .btn-dark:hover { background: var(--accent); color: #fff; }
.x-cta .x-field input { background: transparent; color: #f3efe8; border-color: #4a4640; }
.x-article blockquote { background: transparent; border-left-width: 2px; font-family: var(--display); letter-spacing: -.03em; }
.x-share a { border-radius: 0; }
.page-hero .x-lead { margin-inline: 0; }
.x-center .x-lead, .x-center.page-hero .x-lead { margin-inline: auto; }