:root {
  --black: #070808;
  --ink: #111212;
  --charcoal: #171919;
  --grey: #666a6a;
  --line: #d9d9d6;
  --paper: #f5f4ef;
  --white: #fff;
  --accent: #dd4a35;
  --radius: 18px;
  --shadow: 0 20px 70px rgba(0,0,0,.14);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "DM Sans", system-ui, sans-serif; background: var(--paper); color: var(--ink); overflow-x: hidden; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
.announcement { height: 34px; background: #171818; color: #fff; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 0 3vw; font-size: 10px; letter-spacing: .08em; }
.announcement > :last-child { justify-self: end; }
.announcement button { color: inherit; background: none; border: 0; font-size: inherit; letter-spacing: inherit; }
.announcement b { color: #f1644c; }
.site-header { height: 74px; position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 3.3vw; background: rgba(7,8,8,.94); color: #fff; backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.07); }
.brand { font-size: 21px; font-weight: 800; letter-spacing: .16em; }
.desktop-nav { display: flex; gap: 38px; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.desktop-nav a { position: relative; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -10px; height: 1px; background: #fff; transition: .25s; }
.desktop-nav a:hover::after { right: 0; }
.header-actions { display: flex; gap: 12px; justify-content: flex-end; align-items: center; }
.icon-btn, .menu-btn { border: 0; background: transparent; color: inherit; min-width: 32px; height: 36px; font-size: 24px; position: relative; }
.badge { position: absolute; top: -1px; right: -4px; background: #fff; color: #111; border-radius: 99px; min-width: 16px; height: 16px; display: grid; place-items: center; font-size: 9px; font-weight: 800; border: 1px solid #111; }
.mobile-only { display: none; }
.hero { min-height: 650px; height: calc(100vh - 108px); max-height: 870px; color: #fff; background: radial-gradient(circle at 73% 35%, rgba(117,95,69,.5), transparent 28%), linear-gradient(110deg, #030809 0%, #090f10 44%, #26261f 100%); display: grid; grid-template-columns: 46% 54%; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: linear-gradient(transparent, rgba(255,255,255,.15), transparent); }
.hero__grain { position: absolute; inset: 0; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); pointer-events: none; }
.hero__content { align-self: center; padding: 7vh 3vw 5vh 8vw; z-index: 2; }
.eyebrow { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow--dark { color: #6a6b69; }
.hero h1, .section-heading h2, .drop-section h2, .search-panel h2, .drawer h2, .size-guide h2 { font-family: "Oswald", sans-serif; margin: 12px 0 0; text-transform: uppercase; letter-spacing: .015em; }
.hero h1 { font-size: clamp(68px, 8vw, 132px); line-height: .88; }
.hero__tagline { font-size: clamp(21px, 2.2vw, 34px); letter-spacing: .42em; margin: 24px 0 18px; }
.hero__sub { color: #d4d4d0; font-size: 16px; line-height: 1.6; }
.hero__actions { display: flex; gap: 10px; margin-top: 30px; }
.btn { border: 1px solid transparent; padding: 15px 19px; font-size: 10px; font-weight: 800; letter-spacing: .09em; display: inline-flex; align-items: center; justify-content: space-between; gap: 26px; min-height: 48px; transition: transform .2s, background .2s, color .2s; }
.btn:hover { transform: translateY(-2px); }
.btn--light { background: #fff; color: #111; }
.btn--dark { background: #0c0d0d; color: #fff; }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.btn--full { width: 100%; }
.hero__index { margin-top: 48px; display: flex; gap: 13px; align-items: center; font-size: 10px; }
.hero__index span { width: 75px; height: 1px; background: rgba(255,255,255,.45); }
.hero__art { position: relative; min-height: 100%; overflow: hidden; }
.sunline { position: absolute; inset: 0 0 auto auto; width: 100%; height: 80%; background: linear-gradient(125deg, transparent 0 42%, rgba(255,218,165,.1) 43% 53%, transparent 54%); transform: skewX(-6deg); }
.model-silhouette { position: absolute; width: 44%; height: 74%; left: 28%; bottom: 0; filter: drop-shadow(0 30px 40px rgba(0,0,0,.5)); }
.model-head { position: absolute; width: 28%; aspect-ratio: .84; border-radius: 48% 48% 45% 45%; background: linear-gradient(135deg,#191715,#574737); left: 43%; top: 3%; transform: rotate(8deg); }
.model-head::before { content:""; position:absolute; width:125%; height:45%; border-radius:50%; background:#0b0b0b; left:-18%; top:-14%; transform:rotate(-6deg); }
.model-head::after { content:"PARALIANS"; position:absolute; top:48%; left:70%; font-size:7px; letter-spacing:.18em; transform:rotate(90deg); color:#ddd; }
.model-body { position: absolute; width: 58%; height: 45%; left: 27%; top: 19%; border-radius: 15% 12% 9% 11%; background: linear-gradient(135deg,#111,#2b2926 50%,#111); transform: rotate(2deg); }
.model-body::after { content:"PARALIANS"; position:absolute; top:29%; left:30%; font-size:8px; letter-spacing:.24em; color:#d4d4d4; }
.model-leg { position:absolute; top:58%; width:22%; height:45%; background:linear-gradient(90deg,#393a39,#70706b,#292a29); border-radius:8px; }
.model-leg--l { left:35%; transform:rotate(3deg); }
.model-leg--r { left:59%; transform:rotate(-7deg); }
.hero__stamp { position:absolute; right:3vw; bottom:28px; writing-mode:vertical-rl; font-size:9px; letter-spacing:.22em; color:#bbb; }
.hero__rail { position:absolute; left:22px; top:50%; transform:rotate(-90deg) translateX(-50%); transform-origin:left top; font-size:8px; letter-spacing:.22em; color:#8e9290; }
.category-grid { margin: -4px 2.2vw 0; display:grid; grid-template-columns:repeat(4,1fr); background:#161717; color:#fff; border:1px solid rgba(255,255,255,.18); position:relative; z-index:3; box-shadow:var(--shadow); }
.category-card { min-height: 250px; display:grid; grid-template-columns: 58% 42%; align-items:end; padding:26px 0 0 26px; border-right:1px solid rgba(255,255,255,.18); overflow:hidden; position:relative; background:linear-gradient(145deg,#171818,#292a28); }
.category-card:last-child { border-right:0; }
.category-card h2 { font-family:"Oswald",sans-serif; font-size:22px; margin:0 0 12px; }
.category-card p { font-size:11px; line-height:1.55; letter-spacing:.09em; color:#d7d7d3; }
.category-card img { align-self:end; width:135px; max-height:220px; object-fit:contain; filter:drop-shadow(0 12px 12px rgba(0,0,0,.32)); transform:translateY(12px) scale(1.1); transition:transform .35s; }
.category-card:hover img { transform:translateY(4px) scale(1.15); }
.text-link { border:0; background:transparent; padding:0; font-size:9px; font-weight:800; letter-spacing:.09em; text-decoration:underline; text-underline-offset:4px; color:inherit; }
.category-card .text-link { margin-top:18px; padding-bottom:26px; text-decoration:none; }
.section { padding: 88px 4vw; }
.section-heading { margin-bottom: 28px; }
.section-heading--split { display:flex; justify-content:space-between; align-items:end; gap:24px; }
.section-heading h2 { font-size: clamp(32px,4vw,58px); line-height:1; }
.section-heading p { margin:8px 0 0; color:#6d6f6d; }
.section-number { font-size:9px; font-weight:800; letter-spacing:.15em; color:#8d8e8d; }
.fit-card { display:grid; grid-template-columns:1fr 1fr 1fr 1.35fr; gap:12px; background:#fff; border:1px solid var(--line); padding:22px; box-shadow:0 15px 45px rgba(0,0,0,.06); }
.fit-card label { display:flex; flex-direction:column; gap:9px; font-size:10px; color:#777; }
.fit-card select, .build-item select { border:1px solid #d6d6d2; background:#fafafa; padding:13px; color:#171818; outline:none; min-height:48px; }
.fit-result { grid-column:1/-1; border:1px solid #dfdfdb; margin-top:7px; min-height:108px; display:grid; grid-template-columns:1.1fr 1fr auto; align-items:center; padding:18px 24px; background:linear-gradient(90deg,#fff 0 62%, #edede9); }
.fit-result__size { display:flex; flex-direction:column; }
.fit-result__size span { font-size:10px; color:#666; }
.fit-result__size b { font-size:38px; }
.fit-result__copy { font-size:12px; line-height:1.5; }
.filters { display:flex; flex-wrap:wrap; gap:5px; }
.filter { border:1px solid #cfcfca; background:transparent; padding:9px 12px; font-size:9px; font-weight:800; letter-spacing:.06em; }
.filter.is-active { background:#111; color:#fff; border-color:#111; }
.product-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.product-card { position:relative; min-width:0; }
.product-media { aspect-ratio:.75; background:linear-gradient(145deg,#e5e2da,#c7c5bf); position:relative; overflow:hidden; border:1px solid #d2d0ca; }
.product-media::after { content:""; position:absolute; left:0; right:0; bottom:0; height:38%; background:linear-gradient(transparent,rgba(0,0,0,.08)); }
.product-media img { width:100%; height:100%; object-fit:contain; padding:9%; transition:transform .35s; position:relative; z-index:2; filter:drop-shadow(0 18px 16px rgba(0,0,0,.2)); }
.product-card:hover .product-media img { transform:scale(1.04); }
.product-tag { position:absolute; top:10px; left:10px; z-index:3; background:#111; color:#fff; font-size:8px; font-weight:800; padding:5px 7px; letter-spacing:.1em; }
.wish-btn { position:absolute; top:8px; right:8px; z-index:3; width:34px; height:34px; border:0; border-radius:50%; background:rgba(255,255,255,.75); backdrop-filter:blur(5px); font-size:18px; }
.product-quick { position:absolute; left:10px; right:10px; bottom:10px; z-index:4; opacity:0; transform:translateY(8px); transition:.25s; }
.product-card:hover .product-quick { opacity:1; transform:translateY(0); }
.product-quick button { width:100%; background:#fff; border:0; min-height:38px; font-size:9px; font-weight:800; }
.product-info { padding:12px 1px 4px; }
.product-name { font-size:12px; margin-bottom:5px; display:flex; justify-content:space-between; gap:10px; }
.product-price { font-size:13px; font-weight:800; }
.product-mrp { color:#979795; text-decoration:line-through; font-weight:400; margin-left:5px; }
.swatches { display:flex; gap:6px; margin-top:9px; }
.swatch { width:10px; height:10px; border-radius:50%; border:1px solid #999; background:var(--swatch); }
.build-section { background:radial-gradient(circle at 70% 30%, #292929, #080909 55%); color:#fff; padding:76px 4vw; }
.section-heading--light p { color:#aaa; }
.text-link--light { color:#fff; }
.build-grid { display:grid; grid-template-columns:1fr auto 1fr auto 1.25fr; gap:20px; align-items:center; }
.build-item { min-height:420px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.035); padding:22px; display:grid; grid-template-rows:1fr auto; }
.build-item img { width:100%; height:300px; object-fit:contain; filter:drop-shadow(0 16px 22px rgba(0,0,0,.45)); }
.build-item span, .fit-summary > span { font-size:9px; letter-spacing:.16em; color:#9b9b98; font-weight:800; }
.build-item select { width:100%; margin-top:8px; background:#111; color:#fff; border-color:#3b3b3a; }
.build-symbol { font-family:"Oswald",sans-serif; font-size:40px; color:#aaa; }
.fit-summary { border:1px solid rgba(255,255,255,.17); padding:28px; background:rgba(0,0,0,.25); }
.fit-summary h3 { font-family:"Oswald",sans-serif; font-size:32px; margin:9px 0 24px; }
.fit-summary__line, .fit-summary__total { display:flex; justify-content:space-between; gap:15px; padding:12px 0; font-size:11px; border-bottom:1px solid rgba(255,255,255,.1); }
.fit-summary__total { border:0; font-size:17px; margin-top:6px; }
.reels-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.reel { aspect-ratio:.78; background:#1d1d1d; color:#fff; padding:16px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; }
.reel::before { content:""; position:absolute; inset:0; background:var(--reel-bg); opacity:.95; }
.reel > * { position:relative; z-index:2; }
.reel h3 { font-size:13px; margin:0 0 5px; }
.reel p { margin:0 0 12px; font-size:12px; }
.play { width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.5); background:rgba(0,0,0,.2); color:#fff; display:grid; place-items:center; position:absolute; right:15px; bottom:15px; }
.drop-section { background:#101111; color:#fff; padding:70px 4vw; display:grid; grid-template-columns:1.2fr 1fr auto; gap:40px; align-items:center; }
.drop-section h2 { font-size:52px; }
.drop-section p { font-size:11px; letter-spacing:.12em; color:#aaa; }
.countdown { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.countdown div { text-align:center; min-width:66px; }
.countdown b { display:block; font-family:"Oswald",sans-serif; font-size:38px; }
.countdown span { font-size:8px; letter-spacing:.14em; color:#888; }
.service-strip { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #d7d7d3; border-bottom:1px solid #d7d7d3; background:#fff; }
.service-strip > div { padding:24px 4vw; display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; border-right:1px solid #e4e4df; }
.service-strip > div:last-child { border-right:0; }
.service-strip > div > span { grid-row:1/3; font-size:23px; }
.service-strip b { font-size:9px; letter-spacing:.09em; }
.service-strip p { margin:3px 0 0; font-size:9px; color:#777; }
.footer { background:#0b0c0c; color:#fff; padding:60px 4vw 28px; display:grid; grid-template-columns:1.4fr repeat(3,.75fr) 1.25fr; gap:38px; }
.footer h3 { font-size:9px; letter-spacing:.12em; margin:0 0 15px; }
.footer p, .footer a { display:block; color:#aaa; font-size:10px; line-height:1.8; }
.footer a:hover { color:#fff; }
.footer__brand p { margin:12px 0; }
.socials { display:flex; gap:8px; }
.socials a { width:28px; height:28px; border:1px solid #333; border-radius:50%; display:grid; place-items:center; font-size:8px; }
.newsletter form { display:grid; grid-template-columns:1fr 44px; }
.newsletter input { min-height:45px; border:1px solid #363636; background:#121313; color:#fff; padding:0 13px; outline:none; }
.newsletter button { border:0; background:#fff; color:#111; }
.footer__bottom { grid-column:1/-1; border-top:1px solid #242525; margin-top:26px; padding-top:20px; font-size:8px; color:#686a68; display:flex; justify-content:space-between; letter-spacing:.08em; }
.mobile-nav { display:none; }
.overlay { position:fixed; inset:0; z-index:100; background:rgba(245,244,239,.98); backdrop-filter:blur(18px); opacity:0; visibility:hidden; transition:.2s; overflow:auto; }
.overlay.is-open { opacity:1; visibility:visible; }
.overlay__close { position:fixed; top:22px; right:28px; width:48px; height:48px; border:1px solid #bbb; background:transparent; font-size:30px; z-index:2; }
.search-panel, .size-guide { width:min(1080px,88vw); margin:12vh auto; }
.search-panel h2, .size-guide h2 { font-size:clamp(44px,7vw,96px); line-height:.95; max-width:900px; }
.search-box { margin-top:38px; border-bottom:2px solid #111; display:flex; align-items:center; }
.search-box input { width:100%; border:0; background:transparent; padding:18px 0; outline:none; font-size:25px; text-transform:uppercase; }
.search-box span { font-size:30px; }
.search-suggestions { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.search-suggestions button { border:1px solid #bbb; background:transparent; padding:9px 12px; font-size:9px; font-weight:800; }
.search-results { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:35px; }
.drawer { position:fixed; z-index:120; right:0; top:0; bottom:0; width:min(520px,100vw); background:#f7f6f1; box-shadow:-30px 0 80px rgba(0,0,0,.2); transform:translateX(103%); transition:.3s; display:grid; grid-template-rows:auto 1fr auto; }
.drawer.is-open { transform:translateX(0); }
.drawer__header { display:flex; justify-content:space-between; align-items:start; padding:28px; border-bottom:1px solid #ddd; }
.drawer h2 { font-size:34px; }
.cart-items { overflow:auto; padding:20px 28px; }
.cart-empty { color:#777; text-align:center; margin-top:20vh; }
.cart-row { display:grid; grid-template-columns:80px 1fr auto; gap:14px; border-bottom:1px solid #ddd; padding:15px 0; }
.cart-row img { width:80px; height:100px; object-fit:contain; background:#e7e5de; }
.cart-row h4 { margin:0 0 5px; font-size:12px; }
.cart-row p { margin:0; color:#777; font-size:10px; }
.cart-row button { margin-top:14px; border:0; background:transparent; padding:0; font-size:9px; text-decoration:underline; }
.drawer__footer { border-top:1px solid #ddd; padding:23px 28px; }
.drawer__footer > div { display:flex; justify-content:space-between; font-weight:800; margin-bottom:18px; }
.drawer__footer p { text-align:center; font-size:9px; color:#777; }
.mini-overlay { background:rgba(245,244,239,.98); }
.size-guide { max-width:820px; }
.size-table { margin-top:35px; border-top:1px solid #bbb; }
.size-table > div { display:grid; grid-template-columns:1fr 1fr 1fr; padding:15px 4px; border-bottom:1px solid #d2d2cd; font-size:12px; }
.muted { color:#777; font-size:10px; margin-top:18px; }
.toast { position:fixed; z-index:200; left:50%; bottom:28px; transform:translate(-50%,30px); opacity:0; background:#111; color:#fff; padding:13px 18px; font-size:10px; font-weight:700; letter-spacing:.05em; transition:.25s; pointer-events:none; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width: 1100px) {
  .product-grid, .reels-grid { grid-template-columns:repeat(3,1fr); }
  .build-grid { grid-template-columns:1fr auto 1fr; }
  .build-grid .build-symbol:nth-of-type(2), .fit-summary { grid-column:auto; }
  .fit-summary { grid-column:1/-1; }
  .footer { grid-template-columns:1.2fr repeat(2,1fr); }
  .newsletter { grid-column:2/-1; }
}

@media (max-width: 760px) {
  body { padding-bottom:64px; }
  .announcement { height:30px; display:flex; justify-content:center; font-size:8px; white-space:nowrap; overflow:hidden; }
  .announcement > span, .announcement > :last-child { display:none; }
  .site-header { height:60px; grid-template-columns:1fr auto; padding:0 16px; }
  .brand { font-size:16px; }
  .desktop-nav, .desktop-only { display:none !important; }
  .mobile-only { display:block; }
  .header-actions { gap:4px; }
  .hero { min-height:720px; height:calc(100svh - 90px); max-height:none; display:block; }
  .hero::before { left:0; right:0; top:58%; width:100%; height:1px; }
  .hero__content { position:absolute; left:0; right:0; bottom:0; padding:28px 22px 38px; z-index:5; background:linear-gradient(transparent,rgba(0,0,0,.82) 30%,rgba(0,0,0,.95)); }
  .hero h1 { font-size:68px; }
  .hero__tagline { font-size:16px; letter-spacing:.26em; margin:15px 0; }
  .hero__sub { font-size:12px; }
  .hero__actions { margin-top:18px; }
  .hero__actions .btn { min-height:42px; padding:12px; font-size:8px; }
  .hero__index { display:none; }
  .hero__art { height:68%; }
  .model-silhouette { width:70%; height:92%; left:18%; bottom:-2%; }
  .hero__rail { display:none; }
  .category-grid { margin:0; grid-template-columns:1fr 1fr; box-shadow:none; }
  .category-card { min-height:210px; padding:18px 0 0 16px; grid-template-columns:61% 39%; }
  .category-card:nth-child(2) { border-right:0; }
  .category-card h2 { font-size:17px; }
  .category-card p { font-size:9px; }
  .category-card img { width:95px; max-height:170px; }
  .category-card .text-link { font-size:7px; }
  .section { padding:60px 16px; }
  .section-heading--split { align-items:start; flex-direction:column; }
  .section-heading h2 { font-size:40px; }
  .section-number { display:none; }
  .fit-card { grid-template-columns:1fr; padding:15px; }
  .fit-result { grid-column:auto; grid-template-columns:1fr 1fr; padding:16px; }
  .fit-result .text-link { grid-column:1/-1; text-align:left; margin-top:12px; }
  .filters { overflow:auto; width:100%; flex-wrap:nowrap; padding-bottom:4px; }
  .filter { flex:0 0 auto; }
  .product-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .product-media { aspect-ratio:.72; }
  .product-quick { opacity:1; transform:none; }
  .product-info { padding-top:8px; }
  .product-name, .product-price { font-size:10px; }
  .build-section { padding:60px 16px; }
  .build-grid { grid-template-columns:1fr 26px 1fr; gap:8px; align-items:start; }
  .build-item { min-height:260px; padding:12px; }
  .build-item img { height:170px; }
  .build-item select { font-size:9px; padding:8px; min-height:38px; }
  .build-symbol { font-size:27px; align-self:center; text-align:center; }
  .build-grid > .build-symbol:nth-of-type(2) { display:none; }
  .fit-summary { grid-column:1/-1; margin-top:8px; }
  .reels-grid { grid-template-columns:repeat(2,1fr); }
  .reel:nth-child(n+5) { display:none; }
  .drop-section { grid-template-columns:1fr; padding:55px 16px; }
  .drop-section h2 { font-size:40px; }
  .countdown { gap:6px; }
  .countdown b { font-size:28px; }
  .service-strip { grid-template-columns:1fr 1fr; }
  .service-strip > div { padding:18px 14px; }
  .footer { padding:50px 16px 28px; grid-template-columns:1fr 1fr; gap:28px 16px; }
  .footer__brand, .newsletter, .footer__bottom { grid-column:1/-1; }
  .mobile-nav { display:grid; grid-template-columns:repeat(5,1fr); position:fixed; z-index:80; left:0; right:0; bottom:0; height:64px; background:rgba(9,10,10,.97); color:#fff; border-top:1px solid #2b2c2c; }
  .mobile-nav a, .mobile-nav button { color:#fff; border:0; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:18px; position:relative; }
  .mobile-nav span { font-size:7px; letter-spacing:.06em; }
  .mobile-nav em { position:absolute; top:6px; right:18%; background:#fff; color:#111; font-style:normal; border-radius:99px; font-size:8px; width:16px; height:16px; display:grid; place-items:center; }
  .search-panel, .size-guide { width:auto; margin:90px 16px 40px; }
  .overlay__close { top:15px; right:15px; width:40px; height:40px; }
  .search-panel h2, .size-guide h2 { font-size:50px; }
  .search-box input { font-size:16px; }
  .search-results { grid-template-columns:1fr 1fr; }
}

/* ===== PARALIANS V2 — REAL PRODUCT VISUALS ===== */
.hero {
  grid-template-columns: 47% 53%;
  background: #080909;
}
.hero::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(5,7,7,.98) 0%, rgba(5,7,7,.90) 34%, rgba(5,7,7,.32) 59%, rgba(5,7,7,.05) 100%);
  pointer-events:none;
  z-index:1;
}
.hero__grain { z-index:4; mix-blend-mode:soft-light; }
.hero__content { position:relative; z-index:6; }
.hero__art { position:absolute; inset:0 0 0 39%; min-height:auto; z-index:0; }
.hero__model-photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 22%;
  filter:saturate(.82) contrast(1.03) brightness(.78);
}
.hero__photo-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.03) 48%, rgba(0,0,0,.38));
}
.hero__floating-product {
  position:absolute;
  right:4vw;
  bottom:4.2vw;
  width:280px;
  min-height:142px;
  display:grid;
  grid-template-columns:88px 1fr;
  gap:14px;
  align-items:center;
  padding:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(8,9,9,.64);
  backdrop-filter:blur(14px);
  z-index:5;
}
.hero__floating-product img { width:88px; height:120px; object-fit:cover; object-position:center 52%; }
.hero__floating-product span { display:block; font-size:8px; letter-spacing:.18em; color:#aaa; margin-bottom:7px; }
.hero__floating-product b { display:block; font-family:"Oswald",sans-serif; font-size:15px; line-height:1.15; letter-spacing:.04em; }
.hero__floating-product strong { display:block; font-size:16px; margin-top:10px; }
.hero__stamp { z-index:6; }

.category-grid { margin-top:-1px; }
.category-card {
  min-height:330px;
  display:flex;
  align-items:flex-end;
  padding:26px;
  background:#111;
  isolation:isolate;
}
.category-card::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.03) 10%, rgba(0,0,0,.16) 47%, rgba(0,0,0,.90) 100%);
}
.category-card > div { position:relative; z-index:3; width:100%; }
.category-card img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-height:none;
  object-fit:cover;
  object-position:center 40%;
  padding:0;
  filter:saturate(.82) contrast(1.03);
  transform:scale(1.01);
  z-index:-2;
}
.category-card:hover img { transform:scale(1.055); }
.category-card--tshirt img { object-position:center 45%; }
.category-card--shorts img { object-position:center 34%; }
.category-card--coords img { object-position:center 24%; }
.category-card h2 { font-size:25px; }
.category-card p { color:#efefeb; }
.category-card .text-link { display:inline-flex; background:#fff; color:#111; padding:10px 12px; margin-top:12px; }

.product-grid { grid-template-columns:repeat(5,1fr); gap:18px 12px; }
.product-media { background:#171818; border-color:#222; aspect-ratio:.76; }
.product-media::after { height:46%; background:linear-gradient(transparent,rgba(0,0,0,.18)); z-index:2; }
.product-media img {
  width:100%;
  height:100%;
  padding:0;
  filter:none;
  transition:transform .45s ease, filter .45s ease;
}
.product-card:hover .product-media img { transform:scale(1.035); filter:brightness(1.04); }
.product-quick button { background:rgba(255,255,255,.96); }
.product-name { align-items:flex-start; }
.product-name span:last-child { color:#8e8e89; font-size:8px; letter-spacing:.05em; text-align:right; }
.product-price { font-size:14px; }
.swatch { border-color:#bbb; }

.build-section { background:#080909; }
.build-item { min-height:450px; padding:0; overflow:hidden; position:relative; background:#151616; }
.build-item img { width:100%; height:345px; object-fit:cover; object-position:center 42%; filter:none; }
.build-item > div { padding:16px 18px 18px; background:#101111; }
.build-item select { background:#151616; }
.fit-summary { border-color:rgba(255,255,255,.18); }

.reel {
  aspect-ratio:.72;
  padding:0;
  background:#111;
}
.reel::before {
  background-image:linear-gradient(180deg,rgba(0,0,0,.02) 25%,rgba(0,0,0,.86) 100%), var(--reel-image);
  background-size:cover;
  background-position:var(--reel-pos);
  opacity:1;
  transition:transform .5s ease;
}
.reel:hover::before { transform:scale(1.04); }
.reel__meta { padding:18px; position:absolute; left:0; right:0; bottom:0; }
.reel__meta > span { font-size:8px; letter-spacing:.16em; color:#c7c7c2; }
.reel h3 { font-family:"Oswald",sans-serif; font-size:17px; letter-spacing:.025em; margin-top:7px; }
.reel p { font-weight:800; }

@media (max-width:1100px) {
  .hero__floating-product { width:230px; right:2.5vw; }
  .category-card { min-height:280px; }
}

@media (max-width:760px) {
  .hero { min-height:760px; }
  .hero::after { background:linear-gradient(180deg, rgba(5,7,7,.03) 0%, rgba(5,7,7,.08) 43%, rgba(5,7,7,.96) 72%, #050707 100%); }
  .hero__art { inset:0; height:100%; }
  .hero__model-photo { object-position:center 18%; filter:saturate(.84) brightness(.82); }
  .hero__floating-product { display:none; }
  .hero__content { background:none; padding-bottom:44px; }
  .hero h1 { font-size:62px; }
  .category-grid { grid-template-columns:1fr 1fr; }
  .category-card { min-height:270px; padding:16px; }
  .category-card h2 { font-size:18px; }
  .category-card p { display:none; }
  .category-card .text-link { font-size:7px; padding:8px 9px; margin-bottom:0; }
  .product-grid { grid-template-columns:1fr 1fr; gap:18px 9px; }
  .product-name { display:block; }
  .product-name span:last-child { display:block; margin-top:3px; text-align:left; }
  .build-item { min-height:300px; }
  .build-item img { height:205px; }
  .reel { aspect-ratio:.74; }
}

/* ========================================================================
   PARALIANS V3 — ULTRA MOTION SYSTEM
   Premium native motion, no heavy third-party animation library required.
   ======================================================================== */
:root {
  --ease-pro: cubic-bezier(.16,1,.3,1);
  --ease-snap: cubic-bezier(.2,.8,.2,1);
  --hero-x: 0;
  --hero-y: 0;
  --hero-scroll: 0;
}

/* Boot / loading sequence */
.boot-loader { display:none; }
.js .boot-loader {
  display:flex; position:fixed; inset:0; z-index:9999; background:#050606; color:#fff;
  align-items:center; justify-content:center; overflow:hidden;
  transition:transform 1.05s var(--ease-pro), visibility 1.05s;
}
.boot-loader::before,.boot-loader::after {
  content:""; position:absolute; top:0; bottom:0; width:50%; background:#0a0b0b; z-index:-1;
  transition:transform .95s var(--ease-pro) .1s;
}
.boot-loader::before { left:0; transform-origin:left; }
.boot-loader::after { right:0; transform-origin:right; }
.boot-loader__grid {
  position:absolute; inset:0; opacity:.12;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:80px 80px; mask-image:radial-gradient(circle at center,#000,transparent 70%);
  animation:gridDrift 5s linear infinite;
}
.boot-loader__center { text-align:center; transform:translateY(-2vh); }
.boot-loader__brand {
  font-family:"Oswald",sans-serif; font-size:clamp(54px,10vw,150px); line-height:.9; font-weight:700;
  letter-spacing:.075em; animation:loaderBrand 1.4s var(--ease-pro) both;
}
.boot-loader__tag { margin-top:18px; font-size:10px; letter-spacing:.55em; color:#9e9f9d; animation:loaderTag 1.1s var(--ease-pro) .18s both; }
.boot-loader__meta { position:absolute; left:3vw; right:3vw; bottom:34px; display:flex; justify-content:space-between; align-items:end; font-size:8px; letter-spacing:.2em; color:#767876; }
.boot-loader__meta b { font-family:"Oswald",sans-serif; color:#fff; font-size:32px; font-weight:500; letter-spacing:.04em; }
.boot-loader__bar { position:absolute; left:3vw; right:3vw; bottom:20px; height:1px; background:#232525; overflow:hidden; }
.boot-loader__bar span { display:block; width:100%; height:100%; background:#fff; transform-origin:left; transform:scaleX(0); transition:transform .18s linear; }
.boot-loader--leave { transform:translateY(-100%); visibility:hidden; }
.boot-loader--leave::before { transform:translateX(-100%); }
.boot-loader--leave::after { transform:translateX(100%); }
@keyframes loaderBrand { from { opacity:0; transform:translateY(70px); filter:blur(18px); letter-spacing:.22em; } to { opacity:1; transform:none; filter:blur(0); letter-spacing:.075em; } }
@keyframes loaderTag { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:none; } }
@keyframes gridDrift { to { background-position:80px 80px,80px 80px; } }
.motion-lock { overflow:hidden !important; }

/* Progress line */
.scroll-progress { position:fixed; top:0; left:0; right:0; height:2px; z-index:500; pointer-events:none; mix-blend-mode:difference; }
.scroll-progress span { display:block; width:100%; height:100%; background:#fff; transform:scaleX(var(--progress,0)); transform-origin:left; transition:transform .08s linear; }

/* Pro pointer */
.custom-cursor { display:none; }
.pointer-glow { display:none; }
@media (pointer:fine) and (min-width:761px) {
  .has-pro-cursor, .has-pro-cursor * { cursor:none !important; }
  .custom-cursor { display:block; position:fixed; left:0; top:0; width:38px; height:38px; margin:-19px 0 0 -19px; border:1px solid rgba(255,255,255,.7); border-radius:50%; z-index:9998; pointer-events:none; mix-blend-mode:difference; transition:width .28s var(--ease-pro),height .28s var(--ease-pro),margin .28s var(--ease-pro),background .28s; }
  .custom-cursor span { position:absolute; width:4px; height:4px; border-radius:50%; background:#fff; left:50%; top:50%; transform:translate(-50%,-50%); }
  .custom-cursor.cursor-active { width:64px; height:64px; margin:-32px 0 0 -32px; background:rgba(255,255,255,.12); }
  .pointer-glow { display:block; position:fixed; inset:0; z-index:49; pointer-events:none; opacity:.13; background:radial-gradient(340px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.28),transparent 65%); mix-blend-mode:soft-light; }
}

/* Header morph */
.site-header { transition:height .55s var(--ease-pro),background .45s,border-color .45s,box-shadow .45s; }
.site-header.is-scrolled { height:62px; background:rgba(7,8,8,.83); border-bottom-color:rgba(255,255,255,.13); box-shadow:0 16px 45px rgba(0,0,0,.16); }
.site-header .brand { transition:letter-spacing .55s var(--ease-pro),transform .55s var(--ease-pro); }
.site-header.is-scrolled .brand { letter-spacing:.22em; transform:scale(.94); transform-origin:left center; }

/* Fashion ticker */
.motion-marquee { height:30px; overflow:hidden; background:#f1f0eb; color:#0a0b0b; border-bottom:1px solid #d4d4cf; display:flex; align-items:center; white-space:nowrap; }
.motion-marquee__track { display:inline-flex; min-width:max-content; align-items:center; gap:28px; padding-left:28px; animation:marqueeFlow 22s linear infinite; font-size:8px; font-weight:800; letter-spacing:.18em; }
.motion-marquee__track i { font-style:normal; font-size:8px; }
@keyframes marqueeFlow { to { transform:translateX(-50%); } }

/* Hero choreography */
.hero { --mx:calc(var(--hero-x) * 1px); --my:calc(var(--hero-y) * 1px); perspective:1200px; }
.hero__content > * { opacity:0; transform:translateY(38px); filter:blur(9px); }
.hero-live .hero__content > * { opacity:1; transform:none; filter:blur(0); transition:opacity .9s var(--ease-pro),transform 1s var(--ease-pro),filter 1s var(--ease-pro); }
.hero-live .hero__content > :nth-child(1){transition-delay:.16s}.hero-live .hero__content > :nth-child(2){transition-delay:.22s}.hero-live .hero__content > :nth-child(3){transition-delay:.38s}.hero-live .hero__content > :nth-child(4){transition-delay:.46s}.hero-live .hero__content > :nth-child(5){transition-delay:.55s}.hero-live .hero__content > :nth-child(6){transition-delay:.65s}
.hero h1 { overflow:hidden; display:flex; flex-wrap:nowrap; }
.split-letter { display:inline-block; transform:translateY(120%) rotate(4deg); opacity:0; filter:blur(10px); }
.hero-live .split-letter { animation:letterRise .9s var(--ease-pro) forwards; animation-delay:calc(.24s + var(--i) * 36ms); }
@keyframes letterRise { to { transform:none; opacity:1; filter:blur(0); } }
.hero__model-photo { transform:translate3d(calc(var(--hero-x) * -13px),calc(var(--hero-y) * -9px + var(--hero-scroll) * 24px),0) scale(calc(1.04 + var(--hero-scroll) * .045)); transition:transform .28s ease-out,filter .5s; will-change:transform; }
.hero__floating-product { transform:translate3d(calc(var(--hero-x) * 20px),calc(var(--hero-y) * 14px - var(--hero-scroll) * 16px),0); transition:transform .3s ease-out,border-color .3s,background .3s; }
.hero__floating-product:hover { border-color:rgba(255,255,255,.45); background:rgba(8,9,9,.78); }
.hero__light-sweep { position:absolute; inset:-30%; z-index:3; pointer-events:none; background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.08) 45%,rgba(255,255,255,.22) 49%,rgba(255,255,255,.07) 53%,transparent 65%); transform:translateX(-50%) rotate(3deg); animation:heroSweep 8s var(--ease-pro) 1.1s infinite; mix-blend-mode:screen; }
@keyframes heroSweep { 0%,56%{transform:translateX(-58%) rotate(3deg);opacity:0} 63%{opacity:.65} 80%{transform:translateX(58%) rotate(3deg);opacity:.3} 100%{transform:translateX(58%) rotate(3deg);opacity:0} }
.hero__orbit { position:absolute; border:1px solid rgba(255,255,255,.12); border-radius:50%; z-index:4; pointer-events:none; opacity:.35; }
.hero__orbit--one { width:430px;height:430px;right:-170px;top:-170px;animation:orbitSpin 24s linear infinite; }
.hero__orbit--two { width:230px;height:230px;right:13%;bottom:-120px;animation:orbitSpin 17s linear infinite reverse; }
.hero__orbit::after { content:""; position:absolute; width:5px;height:5px;border-radius:50%;background:#fff;top:50%;left:-3px;box-shadow:0 0 24px rgba(255,255,255,.8); }
@keyframes orbitSpin { to { transform:rotate(360deg); } }

/* Global scroll reveals */
.motion-reveal { opacity:0; transform:translate3d(0,52px,0) scale(.985); filter:blur(10px); clip-path:inset(0 0 9% 0); transition:opacity .9s var(--ease-pro) var(--reveal-delay,0ms),transform 1s var(--ease-pro) var(--reveal-delay,0ms),filter 1s var(--ease-pro) var(--reveal-delay,0ms),clip-path 1.1s var(--ease-pro) var(--reveal-delay,0ms); }
.motion-reveal.motion-in { opacity:1; transform:none; filter:blur(0); clip-path:inset(0 0 0 0); }

/* 3D / sheen cards */
.motion-tilt { transform-style:preserve-3d; transform:perspective(950px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .16s ease-out; will-change:transform; }
.motion-tilt > * { transform-style:preserve-3d; }
.product-card.motion-tilt:hover .product-info { transform:translateZ(12px); }
.product-card .product-info { transition:transform .25s var(--ease-pro); }
.product-media::before { content:""; position:absolute; inset:-1px; z-index:3; pointer-events:none; opacity:0; background:radial-gradient(240px circle at var(--shine-x,50%) 24%,rgba(255,255,255,.28),transparent 68%); transition:opacity .35s; mix-blend-mode:soft-light; }
.product-card:hover .product-media::before { opacity:.72; }
.product-tag,.wish-btn,.product-quick { transform:translateZ(28px); }
.category-card > div { transform:translateZ(24px); transition:transform .35s var(--ease-pro); }
.category-card:hover > div { transform:translateZ(42px) translateY(-3px); }
.reel__meta,.reel .play { transform:translateZ(26px); }

/* Magnetic controls */
.magnetic { transform:translate3d(var(--mag-x,0),var(--mag-y,0),0); transition:transform .42s var(--ease-pro),background .25s,color .25s,border-color .25s; will-change:transform; }
.btn { position:relative; overflow:hidden; }
.btn::before { content:""; position:absolute; inset:-2px; background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.35) 45%,transparent 70%); transform:translateX(-130%); transition:transform .85s var(--ease-pro); pointer-events:none; }
.btn:hover::before { transform:translateX(130%); }
.btn--light::before { background:linear-gradient(110deg,transparent 20%,rgba(0,0,0,.09) 45%,transparent 70%); }
.motion-tap { animation:tapImpact .4s var(--ease-snap); }
@keyframes tapImpact { 45%{transform:scale(.965)} 100%{transform:scale(1)} }

/* Fit / build polish */
.fit-card { transition:box-shadow .6s var(--ease-pro),transform .6s var(--ease-pro); }
.fit-card:hover { box-shadow:0 28px 70px rgba(0,0,0,.1); transform:translateY(-4px); }
.build-item img { transition:transform .8s var(--ease-pro),filter .8s; }
.build-item:hover img { transform:scale(1.035) translateY(-6px); filter:brightness(1.04); }
.fit-summary { transition:transform .6s var(--ease-pro),border-color .45s,background .45s; }
.fit-summary:hover { transform:translateY(-7px); border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.045); }

/* Countdown micro animation */
.countdown b { transform-origin:center bottom; }
.digit-snap { animation:digitSnap .42s var(--ease-pro); }
@keyframes digitSnap { 0%{opacity:.25;transform:translateY(-10px) scale(.92);filter:blur(5px)}100%{opacity:1;transform:none;filter:blur(0)} }

/* Drawer / overlays now feel like scene transitions */
.overlay { transition:opacity .5s var(--ease-pro),visibility .5s; }
.search-panel,.size-guide { transform:translateY(35px) scale(.985); opacity:0; transition:transform .7s var(--ease-pro),opacity .6s var(--ease-pro); }
.overlay.is-open .search-panel,.overlay.is-open .size-guide { transform:none; opacity:1; }
.drawer { transition:transform .72s var(--ease-pro),box-shadow .5s; }
.drawer.is-open { box-shadow:-35px 0 100px rgba(0,0,0,.3); }

/* Footer cinematic line */
.footer { position:relative; overflow:hidden; }
.footer::before { content:"PARALIANS"; position:absolute; left:3vw; bottom:-.22em; font-family:"Oswald",sans-serif; font-size:clamp(100px,18vw,310px); line-height:1; letter-spacing:.02em; color:rgba(255,255,255,.018); pointer-events:none; transform:translateX(calc(var(--page-scroll,0) * -90px)); }
.footer > * { position:relative; z-index:1; }

/* Mobile = cinematic but lean */
@media (max-width:760px) {
  .motion-marquee { height:26px; }
  .motion-marquee__track { gap:20px; padding-left:20px; animation-duration:18s; }
  .hero h1 { overflow:visible; }
  .hero__orbit--one { width:280px;height:280px;right:-130px;top:-110px; }
  .hero__orbit--two { display:none; }
  .hero__light-sweep { animation-duration:10s; }
  .motion-reveal { transform:translate3d(0,30px,0); filter:blur(5px); }
  .product-card.motion-tilt,.category-card.motion-tilt,.reel.motion-tilt { transform:none !important; }
  .boot-loader__grid { background-size:48px 48px; }
  .boot-loader__meta { left:18px;right:18px;bottom:28px; }
  .boot-loader__bar { left:18px;right:18px;bottom:16px; }
  .boot-loader__tag { letter-spacing:.35em; }
}

/* Respect accessibility preference */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
  .motion-reveal { opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; }
  .hero__content > *,.split-letter { opacity:1 !important; transform:none !important; filter:none !important; }
  .motion-marquee__track { animation:none !important; }
}

/* ========================================================================
   PARALIANS V4 — SHOPPING LAB
   Native cursor + Color Studio + Motion Gallery + Style Lab + Garment
   Explorer + Build Your Look 2.0 + Premium Quick View
   ======================================================================== */

/* Native browser cursor is intentional in V4 */
.has-pro-cursor, .has-pro-cursor * { cursor:auto !important; }
a, button, [data-quick], select { cursor:pointer !important; }
.custom-cursor, .pointer-glow { display:none !important; }
.section-number--light { color:rgba(255,255,255,.46); }

/* Product grid quick-view affordance */
.product-media img[data-quick] { cursor:pointer; }
.product-quick button { letter-spacing:.12em; }
.swatch--active { outline:1px solid #111; outline-offset:2px; }

/* ------------------------- COLOR SWITCH STUDIO ------------------------- */
.color-studio-section { background:#f0efe9; }
.color-studio { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr); min-height:650px; background:#0b0c0c; box-shadow:0 28px 80px rgba(0,0,0,.14); overflow:hidden; }
.color-studio__stage { position:relative; overflow:hidden; background:#131414; min-height:650px; }
.color-studio__stage::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 60%,rgba(0,0,0,.28)),linear-gradient(180deg,transparent 70%,rgba(0,0,0,.32)); }
.color-studio__stage img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:center 50%; transform:scale(1.015); }
.color-studio__stage img.is-switching { animation:studioImageIn .58s var(--ease-pro); }
@keyframes studioImageIn { 0%{opacity:.15;transform:scale(1.045);filter:blur(8px)}100%{opacity:1;transform:scale(1.015);filter:blur(0)} }
.color-studio__index { position:absolute; left:26px; top:24px; z-index:3; color:#fff; font-family:"Oswald",sans-serif; font-size:17px; letter-spacing:.12em; }
.color-studio__caption { position:absolute; left:26px; bottom:24px; z-index:3; color:#fff; font-size:8px; letter-spacing:.2em; font-weight:800; }
.color-studio__panel { padding:55px 44px; color:#fff; display:flex; flex-direction:column; justify-content:center; background:radial-gradient(circle at 35% 20%,#252626,#0a0b0b 62%); }
.color-studio__panel h3 { font-family:"Oswald",sans-serif; font-size:clamp(42px,4vw,68px); line-height:.96; margin:16px 0; max-width:540px; }
.color-studio__panel > p { max-width:470px; color:#aaa; font-size:13px; line-height:1.7; }
.studio-price { display:flex; gap:12px; align-items:baseline; margin:20px 0 28px; }
.studio-price b { font-family:"Oswald",sans-serif; font-size:34px; }
.studio-price span { color:#777; text-decoration:line-through; }
.studio-color-row { border-top:1px solid rgba(255,255,255,.13); padding-top:22px; }
.studio-color-row > span { font-size:8px; letter-spacing:.18em; color:#777; font-weight:800; }
.studio-swatches { display:flex; flex-wrap:wrap; gap:9px; margin-top:13px; }
.studio-swatch { border:1px solid #373838; background:#111; color:#fff; min-width:108px; padding:10px 12px; display:flex; align-items:center; gap:9px; font-size:8px; letter-spacing:.08em; }
.studio-swatch span { width:20px; height:20px; border-radius:50%; background:var(--studio-color); border:1px solid rgba(255,255,255,.35); }
.studio-swatch b { font-weight:700; }
.studio-swatch.is-active { background:#fff; color:#111; border-color:#fff; }
.studio-swatch.is-active span { border-color:#888; box-shadow:0 0 0 2px #fff,0 0 0 3px #777; }
.studio-meta { display:grid; grid-template-columns:repeat(3,1fr); margin:28px 0; border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); }
.studio-meta div { padding:16px 12px 16px 0; border-right:1px solid rgba(255,255,255,.1); }
.studio-meta div:last-child { border-right:0; padding-left:14px; }
.studio-meta span { display:block; color:#737574; font-size:7px; letter-spacing:.16em; }
.studio-meta b { display:block; margin-top:6px; font-size:10px; letter-spacing:.08em; }

/* --------------------------- MOTION GALLERY ---------------------------- */
.motion-gallery-section { background:#080909; color:#fff; }
.motion-gallery-section .section-heading p { color:#8e9090; }
.motion-gallery { display:grid; grid-template-columns:minmax(0,1fr) 160px; gap:12px; min-height:720px; }
.motion-gallery__stage { position:relative; min-height:720px; background:#141515; overflow:hidden; user-select:none; touch-action:pan-y; cursor:grab !important; border:1px solid #222; }
.motion-gallery__stage.is-dragging { cursor:grabbing !important; }
.motion-gallery__stage img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:center 48%; pointer-events:none; }
.motion-gallery__stage img.is-changing { animation:motionFrameIn .42s var(--ease-pro); }
@keyframes motionFrameIn { from{opacity:.15;transform:scale(1.03);filter:blur(4px)} to{opacity:1;transform:none;filter:none} }
.motion-gallery__shade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.08),transparent 45%,rgba(0,0,0,.48)); }
.motion-gallery__hint { position:absolute; z-index:2; left:50%; bottom:28px; transform:translateX(-50%); padding:11px 15px; background:rgba(0,0,0,.58); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.2); font-size:8px; letter-spacing:.18em; }
.motion-gallery__counter { position:absolute; top:24px; left:25px; z-index:2; display:flex; align-items:baseline; gap:5px; font-family:"Oswald",sans-serif; }
.motion-gallery__counter b { font-size:32px; }
.motion-gallery__counter span { color:#777; font-size:13px; }
.motion-gallery__label { position:absolute; z-index:2; right:25px; top:27px; font-size:8px; letter-spacing:.2em; }
.motion-gallery__rail { display:grid; grid-template-rows:repeat(4,1fr); gap:8px; }
.motion-thumb { border:1px solid #272828; padding:0; background:#121313; overflow:hidden; position:relative; min-height:0; }
.motion-thumb img { width:100%; height:100%; object-fit:cover; object-position:center 48%; filter:brightness(.62); transition:filter .3s,transform .5s var(--ease-pro); }
.motion-thumb span { position:absolute; left:9px; bottom:8px; z-index:2; color:#fff; font:600 9px "Oswald",sans-serif; }
.motion-thumb.is-active { border-color:#fff; }
.motion-thumb.is-active img, .motion-thumb:hover img { filter:brightness(.95); transform:scale(1.04); }

/* ------------------------------ STYLE LAB ------------------------------ */
.style-lab-section { background:#f4f3ee; }
.style-lab__moods { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.style-mood { border:1px solid #c7c7c2; background:transparent; padding:11px 14px; font-size:8px; letter-spacing:.13em; font-weight:800; }
.style-mood.is-active { background:#111; color:#fff; border-color:#111; }
.style-lab__canvas { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(340px,.5fr); min-height:680px; border:1px solid #d2d1cb; background:#fff; }
.style-lab__visual { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#d6d5cf; position:relative; overflow:hidden; }
.style-look { position:relative; overflow:hidden; background:#111; min-height:680px; }
.style-look img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:center; transition:filter .35s; }
.style-look img.is-changing { animation:styleLookIn .56s var(--ease-pro); }
@keyframes styleLookIn { from{opacity:.15;transform:translateY(15px) scale(1.025);filter:blur(7px)} to{opacity:1;transform:none;filter:blur(0)} }
.style-look::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 66%,rgba(0,0,0,.54)); }
.style-look > span { position:absolute; z-index:2; left:17px; bottom:15px; color:#fff; font-size:8px; letter-spacing:.2em; font-weight:800; }
.style-lab__stamp { position:absolute; z-index:4; left:50%; top:20px; transform:translateX(-50%); background:#fff; color:#111; padding:8px 11px; font-size:7px; letter-spacing:.14em; white-space:nowrap; }
.style-lab__panel { padding:50px 42px; display:flex; flex-direction:column; justify-content:center; }
.style-lab__panel h3 { font-family:"Oswald",sans-serif; font-size:clamp(43px,4.2vw,70px); line-height:.95; margin:14px 0; }
.style-lab__panel > p { color:#6c6d6b; font-size:13px; line-height:1.7; }
.style-lab__items { margin-top:25px; border-top:1px solid #d6d6d0; }
.style-lab__items div { display:flex; justify-content:space-between; gap:12px; padding:15px 0; border-bottom:1px solid #dddcd7; font-size:10px; }
.style-lab__total { display:flex; justify-content:space-between; align-items:end; padding:21px 0; }
.style-lab__total span { font-size:8px; letter-spacing:.15em; }
.style-lab__total b { font:600 30px "Oswald",sans-serif; }

/* ------------------------- EXPLORE THE GARMENT ------------------------- */
.garment-section { background:#eae9e3; }
.garment-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr); min-height:760px; background:#f8f7f2; border:1px solid #d4d3cd; }
.garment-visual { position:relative; min-height:760px; background:#101111; overflow:hidden; }
.garment-visual::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 72%,rgba(0,0,0,.22)); }
.garment-visual > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 43%; }
.garment-pin { position:absolute; z-index:4; left:var(--x); top:var(--y); width:38px; height:38px; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(255,255,255,.62); background:rgba(0,0,0,.42); color:#fff; backdrop-filter:blur(8px); display:grid; place-items:center; }
.garment-pin::before { content:""; position:absolute; inset:-9px; border:1px solid rgba(255,255,255,.18); border-radius:50%; transform:scale(.72); opacity:0; transition:.3s; }
.garment-pin span { font-size:8px; font-weight:800; }
.garment-pin.is-active { background:#fff; color:#111; border-color:#fff; }
.garment-pin.is-active::before { opacity:1; transform:scale(1); animation:pinPulse 2s ease-out infinite; }
@keyframes pinPulse { 0%{opacity:.5;transform:scale(.75)}70%,100%{opacity:0;transform:scale(1.35)} }
.garment-visual__label { position:absolute; z-index:3; left:24px; bottom:22px; color:#fff; font-size:8px; letter-spacing:.2em; }
.garment-panel { padding:58px 50px; display:flex; flex-direction:column; justify-content:center; }
.garment-panel > h2 { font-family:"Oswald",sans-serif; font-size:clamp(50px,5vw,82px); line-height:.94; margin:14px 0 28px; max-width:620px; }
.garment-features { border-top:1px solid #cac9c3; }
.garment-feature { width:100%; border:0; border-bottom:1px solid #d6d5cf; background:transparent; display:grid; grid-template-columns:48px 1fr; text-align:left; align-items:center; min-height:51px; padding:0; color:#8b8c89; }
.garment-feature b { font:500 13px "Oswald",sans-serif; }
.garment-feature span { font-size:9px; letter-spacing:.1em; font-weight:700; }
.garment-feature.is-active { color:#111; padding-left:8px; }
.garment-detail { padding:26px 0 28px; min-height:170px; }
.garment-detail.is-changing { animation:detailIn .38s var(--ease-pro); }
@keyframes detailIn { from{opacity:.2;transform:translateY(9px);filter:blur(4px)}to{opacity:1;transform:none;filter:none} }
.garment-detail > span { font-size:8px; color:#8b8c88; letter-spacing:.15em; }
.garment-detail h3 { font-family:"Oswald",sans-serif; font-size:30px; margin:8px 0; }
.garment-detail p { color:#6d6e6c; line-height:1.65; font-size:12px; max-width:520px; }

/* -------------------------- BUILD YOUR LOOK 2.0 ------------------------ */
.build-section--v4 { padding-top:82px; }
.build-presets { display:flex; gap:7px; margin:-8px 0 20px; flex-wrap:wrap; }
.build-preset { border:1px solid #353636; color:#aaa; background:#111212; padding:10px 13px; font-size:8px; letter-spacing:.12em; font-weight:800; }
.build-preset.is-active { color:#111; background:#fff; border-color:#fff; }
.build-grid--v4 { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(330px,1.05fr); }
.build-item--v4 { min-height:500px; }
.build-item--v4 img { height:340px; }
.build-size-block { margin-top:13px; }
.build-size-block small { color:#777; font-size:7px; letter-spacing:.15em; }
.size-pills { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin-top:7px; }
.size-pills button { min-height:33px; border:1px solid #383939; background:#121313; color:#aaa; font-size:8px; font-weight:800; }
.size-pills button.is-active { background:#fff; color:#111; border-color:#fff; }
.fit-summary--v4 { min-height:500px; display:flex; flex-direction:column; justify-content:center; }
.fit-summary__head { display:flex; justify-content:space-between; align-items:center; }
.fit-summary__head em { font-style:normal; font-size:8px; letter-spacing:.12em; color:#a7c0a4; }
.fit-summary__meter { margin:17px 0 4px; }
.fit-summary__meter > span { font-size:7px; letter-spacing:.14em; color:#898b89; }
.fit-summary__meter i { display:block; height:2px; background:#2a2b2b; margin-top:8px; overflow:hidden; }
.fit-summary__meter i b { display:block; height:100%; width:94%; background:#fff; transition:width .6s var(--ease-pro); }

/* ---------------------------- QUICK VIEW ------------------------------- */
.quick-overlay { position:fixed; inset:0; z-index:140; background:rgba(8,9,9,.76); backdrop-filter:blur(18px); opacity:0; visibility:hidden; transition:opacity .45s var(--ease-pro),visibility .45s; padding:3.5vh 3vw; overflow:auto; }
.quick-overlay.is-open { opacity:1; visibility:visible; }
.quick-overlay__close { position:fixed; right:3vw; top:3.2vh; z-index:145; width:48px; height:48px; border:1px solid rgba(255,255,255,.4); background:rgba(0,0,0,.25); color:#fff; font-size:29px; backdrop-filter:blur(8px); }
.quick-view { width:min(1260px,94vw); min-height:86vh; margin:3vh auto; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(390px,.85fr); background:#f4f3ee; box-shadow:0 40px 130px rgba(0,0,0,.38); transform:translateY(34px) scale(.985); opacity:0; transition:transform .65s var(--ease-pro),opacity .5s var(--ease-pro); }
.quick-overlay.is-open .quick-view { transform:none; opacity:1; }
.quick-view__visual { position:relative; min-height:720px; background:#111; overflow:hidden; }
.quick-view__visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 68%,rgba(0,0,0,.4)); pointer-events:none; }
.quick-view__visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:opacity .25s,transform .55s var(--ease-pro); }
.quick-view__index { position:absolute; z-index:3; left:22px; top:20px; color:#fff; font:500 15px "Oswald",sans-serif; letter-spacing:.12em; }
.quick-view__caption { position:absolute; z-index:3; left:22px; bottom:20px; color:#fff; font-size:7px; letter-spacing:.2em; }
.quick-view__info { padding:64px 48px 42px; display:flex; flex-direction:column; justify-content:center; }
.quick-view__info h2 { font-family:"Oswald",sans-serif; font-size:clamp(46px,4.5vw,74px); line-height:.94; margin:12px 0 7px; }
.quick-view__sku { margin:0; font-size:8px; letter-spacing:.14em; color:#8b8c89; }
.quick-view__price { display:flex; gap:11px; align-items:baseline; margin:22px 0 12px; }
.quick-view__price b { font:600 31px "Oswald",sans-serif; }
.quick-view__price span { color:#999; text-decoration:line-through; }
.quick-view__copy { max-width:520px; color:#686a68; font-size:12px; line-height:1.65; }
.quick-view__option { border-top:1px solid #d4d3cd; padding-top:19px; margin-top:20px; }
.quick-view__label { display:flex; justify-content:space-between; align-items:center; font-size:8px; letter-spacing:.14em; }
.quick-view__label b { font-size:8px; }
.quick-view__label button { border:0; padding:0; background:transparent; font-size:8px; text-decoration:underline; text-underline-offset:4px; }
.quick-colors { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.quick-color { min-width:108px; border:1px solid #cdccc6; background:#f4f3ee; display:flex; align-items:center; gap:8px; padding:8px 10px; }
.quick-color > span { width:21px; height:21px; border-radius:50%; background:var(--q-color); border:1px solid #aaa; }
.quick-color em { font-style:normal; font-size:8px; letter-spacing:.08em; }
.quick-color.is-active { background:#111; color:#fff; border-color:#111; }
.quick-sizes { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin-top:11px; }
.quick-sizes button { min-height:42px; border:1px solid #c9c8c2; background:transparent; font-size:9px; font-weight:800; }
.quick-sizes button.is-active { background:#111; color:#fff; border-color:#111; }
.quick-add { margin-top:26px; }
.quick-view__notes { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:12px; }
.quick-view__notes span { border:1px solid #dddcd6; padding:10px 6px; text-align:center; font-size:6px; letter-spacing:.1em; color:#777; }

/* ------------------------------ RESPONSIVE ----------------------------- */
@media (max-width:1100px) {
  .color-studio { grid-template-columns:1.1fr .9fr; }
  .color-studio__panel { padding:40px 32px; }
  .motion-gallery { grid-template-columns:1fr 120px; min-height:620px; }
  .motion-gallery__stage { min-height:620px; }
  .style-lab__canvas { grid-template-columns:1.2fr .8fr; }
  .garment-grid { grid-template-columns:1fr 1fr; }
  .garment-panel { padding:42px 34px; }
  .build-grid--v4 { grid-template-columns:1fr auto 1fr; }
  .build-grid--v4 .fit-summary { grid-column:1/-1; min-height:auto; }
  .quick-view { grid-template-columns:1fr 1fr; }
  .quick-view__info { padding:45px 34px; }
}

@media (max-width:760px) {
  .color-studio-section, .motion-gallery-section, .style-lab-section, .garment-section { padding-left:16px; padding-right:16px; }
  .color-studio { grid-template-columns:1fr; min-height:0; }
  .color-studio__stage { min-height:540px; }
  .color-studio__panel { padding:34px 22px; }
  .color-studio__panel h3 { font-size:45px; }
  .studio-meta { margin:22px 0; }
  .studio-swatch { min-width:96px; }

  .motion-gallery { grid-template-columns:1fr; min-height:0; }
  .motion-gallery__stage { min-height:590px; }
  .motion-gallery__rail { grid-template-columns:repeat(4,1fr); grid-template-rows:none; height:100px; }
  .motion-thumb { min-height:100px; }
  .motion-gallery__hint { bottom:18px; }

  .style-lab__moods { flex-wrap:nowrap; overflow-x:auto; padding-bottom:5px; }
  .style-mood { flex:0 0 auto; }
  .style-lab__canvas { grid-template-columns:1fr; }
  .style-lab__visual { min-height:540px; }
  .style-look { min-height:540px; }
  .style-lab__panel { padding:34px 22px; }
  .style-lab__panel h3 { font-size:48px; }

  .garment-grid { grid-template-columns:1fr; min-height:0; }
  .garment-visual { min-height:620px; }
  .garment-panel { padding:38px 22px; }
  .garment-panel > h2 { font-size:49px; }
  .garment-feature { grid-template-columns:42px 1fr; }

  .build-presets { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
  .build-preset { flex:0 0 auto; }
  .build-grid--v4 { grid-template-columns:1fr 26px 1fr; }
  .build-item--v4 { min-height:360px; }
  .build-item--v4 img { height:210px; }
  .build-grid--v4 .fit-summary { grid-column:1/-1; }
  .size-pills { gap:2px; }
  .size-pills button { min-height:30px; font-size:7px; }

  .quick-overlay { padding:0; background:#f4f3ee; }
  .quick-overlay__close { top:12px; right:12px; color:#fff; background:rgba(0,0,0,.35); }
  .quick-view { width:100%; min-height:100vh; margin:0; grid-template-columns:1fr; box-shadow:none; }
  .quick-view__visual { min-height:58vh; }
  .quick-view__info { padding:32px 18px 90px; }
  .quick-view__info h2 { font-size:48px; }
  .quick-view__notes { gap:3px; }
  .quick-color { min-width:94px; }
}

/* =====================================================================
   V4.1 MOBILE POLISH — native look builder + overflow/safe-area fixes
   ===================================================================== */

/* Grid children must be allowed to shrink; especially native <select>. */
.build-grid--v4 > *,
.build-item--v4,
.fit-summary--v4 { min-width:0; }
.build-item--v4 select { min-width:0; max-width:100%; text-overflow:ellipsis; }

@media (max-width:760px) {
  html, body { max-width:100%; overflow-x:hidden; }
  body { padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px)); }

  .build-section--v4 {
    padding:62px 16px 34px;
    overflow:hidden;
  }

  .build-section--v4 .section-heading {
    margin-bottom:20px;
  }

  .build-section--v4 .section-heading h2 {
    font-size:clamp(38px,11vw,52px);
    line-height:.92;
  }

  .build-section--v4 .section-heading p {
    max-width:330px;
    margin-top:8px;
    line-height:1.5;
  }

  .build-presets {
    width:calc(100vw - 32px);
    margin:0 0 16px;
    padding:0 0 5px;
    gap:7px;
    scrollbar-width:none;
  }
  .build-presets::-webkit-scrollbar { display:none; }

  /* One readable product at a time vertically; no tiny two-column cards. */
  .build-grid.build-grid--v4 {
    display:grid;
    grid-template-columns:minmax(0,1fr) !important;
    gap:10px;
    width:100%;
  }

  .build-grid--v4 .build-item--v4 {
    min-height:0;
    width:100%;
    display:grid;
    grid-template-columns:minmax(118px,36%) minmax(0,1fr);
    grid-template-rows:auto;
    align-items:stretch;
    overflow:hidden;
    border-color:#292a2a;
    background:#111212;
  }

  .build-grid--v4 .build-item--v4 img {
    width:100%;
    height:100%;
    min-height:188px;
    max-height:224px;
    object-fit:cover;
    object-position:center 35%;
    display:block;
  }

  .build-grid--v4 .build-item--v4 > div {
    padding:16px 13px 14px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
  }

  .build-grid--v4 .build-item--v4 select {
    width:100%;
    min-width:0;
    max-width:100%;
    height:39px;
    padding:0 9px;
    margin-top:8px;
    font-size:8px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .build-size-block { margin-top:12px; }
  .size-pills {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:3px;
    width:100%;
  }
  .size-pills button {
    width:100%;
    min-width:0;
    min-height:31px;
    padding:0;
  }

  /* Vertical equation between cards; only plus is needed on mobile. */
  .build-grid--v4 > .build-symbol {
    display:grid !important;
    width:36px;
    height:36px;
    margin:0 auto;
    place-items:center;
    align-self:center;
    font-size:22px;
    line-height:1;
    border:1px solid #2f3030;
    border-radius:50%;
    color:#c7c7c2;
    background:#101111;
  }
  .build-grid--v4 > .build-symbol:nth-of-type(2) { display:none !important; }

  .build-grid--v4 .fit-summary.fit-summary--v4 {
    grid-column:1 !important;
    min-height:0;
    width:100%;
    margin:2px 0 0;
    padding:22px 18px 20px;
    border-color:#303131;
    background:linear-gradient(145deg,#131414,#090a0a);
  }

  .fit-summary--v4 h3 {
    font-size:32px;
    margin:10px 0 15px;
  }

  .fit-summary__head { gap:12px; }
  .fit-summary__head em { white-space:nowrap; }
  .fit-summary__line { gap:10px; align-items:flex-start; }
  .fit-summary__line span { min-width:0; line-height:1.4; padding-right:4px; }
  .fit-summary__line b { flex:0 0 auto; }
  .fit-summary__total { margin-top:4px; }
  .fit-summary--v4 .btn { min-height:48px; margin-top:8px; }

  /* Bottom bar should respect iPhone home indicator and never cover content. */
  .mobile-nav {
    height:calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .footer { padding-bottom:calc(86px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width:390px) {
  .build-grid--v4 .build-item--v4 {
    grid-template-columns:112px minmax(0,1fr);
  }
  .build-grid--v4 .build-item--v4 img { min-height:180px; }
  .build-grid--v4 .build-item--v4 > div { padding:13px 10px; }
  .size-pills button { font-size:6.5px; }
}