/*
  SARIMI MULTI-PAGE FAKE WEBSHOP
  ---------------------------------------------------------
  Images: put files in /assets/images/
  Fonts: put files in /fonts/

  Font example:
  @font-face {
    font-family: 'YourFont';
    src: url('../fonts/yourfont.woff2') format('woff2');
  }
*/

:root {
  --bg: #f2eee6;
  --paper: #faf8f3;
  --ink: #11100e;
  --muted: #7c756b;
  --line: #d8d1c7;
  --dark: #151412;
  --cream: #e6dfd3;
  --stone: #c9c0b3;
  --font-main: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-main); letter-spacing: -0.03em; }
a { color: inherit; text-decoration: none; }
button, input, select { font-family: inherit; }

.site-shell { width: 100%; max-width: none; margin: 0; background: var(--paper); min-height: 100vh; overflow: visible; }

/* STICKY HEADER */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  height: 76px;
  padding: 18px 54px;
  display: grid;
  grid-template-columns: 160px 1fr 220px;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid rgba(17,16,14,.08);
  background: rgba(250,248,243,.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.logo-link {
  width: 46px;
  height: 46px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.logo-link img { width: 78%; height: 78%; object-fit: contain; }

.nav-links {
  display: flex;
  justify-content: center;
  gap: 34px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav-links a { position: relative; transition: color .25s ease; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-8px; width:0; height:1px; background:currentColor; transition:width .25s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }

.nav-actions { display:flex; justify-content:flex-end; gap:10px; }
.text-button, .cart-button {
  border:1px solid rgba(17,16,14,.16);
  background:transparent;
  color:var(--ink);
  padding:10px 14px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
}
.cart-button span { margin-left:8px; color:var(--muted); }

/* LAYOUT */
.section { min-height:100vh; padding:120px 54px 54px; border-bottom:1px solid var(--line); position:relative; }
.page-section { padding-top: 120px; }
.dark-section { background:var(--dark); color:var(--paper); }

.kicker { font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:26px; }
.dark-section .kicker { color:rgba(250,248,243,.54); }

h1 { font-size:clamp(76px,12vw,178px); line-height:.8; font-weight:500; letter-spacing:-.105em; max-width:1040px; }
h2 { font-size:clamp(58px,9vw,140px); line-height:.88; font-weight:500; letter-spacing:-.065em; max-width:980px; }
h3 { font-size:22px; line-height:1; letter-spacing:-.04em; font-weight:500; }
p { font-size:clamp(18px,2vw,27px); line-height:1.12; letter-spacing:-.04em; max-width:760px; }

.section-head { display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:end; margin-bottom:70px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }

.primary-button, .secondary-button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:48px;
  padding:0 22px;
  border:1px solid var(--ink);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .24s ease, background .24s ease, color .24s ease;
}
.primary-button { background:var(--ink); color:var(--paper); }
.secondary-button { background:transparent; color:var(--ink); }
.dark-section .primary-button { background:var(--paper); color:var(--ink); border-color:var(--paper); }
.primary-button:hover, .secondary-button:hover { transform:translateY(-3px); }
.secondary-button:hover { background:var(--ink); color:var(--paper); }
.wide { width:100%; }

/* MEDIA */
.editorial-frame { position:relative; overflow:hidden; border:1px solid rgba(17,16,14,.08); background:var(--cream); }
.dark-section .editorial-frame { background:rgba(250,248,243,.025); border-color:rgba(250,248,243,.13); }

.image-placeholder {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  font-size:11px;
  letter-spacing:.24em;
  line-height:1.8;
  text-transform:uppercase;
  color:rgba(17,16,14,.42);
  background:
    radial-gradient(rgba(17,16,14,.11) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.15), rgba(0,0,0,.025));
  background-size:18px 18px, 100% 100%;
}
.image-placeholder span { font-size:9px; color:rgba(17,16,14,.32); }
.dark-section .image-placeholder {
  color:rgba(250,248,243,.42);
  background:
    radial-gradient(rgba(250,248,243,.08) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.035), rgba(0,0,0,.16));
  background-size:18px 18px, 100% 100%;
}
.media-img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  filter:grayscale(12%) contrast(1.04) saturate(.88);
  transition:transform .7s ease, filter .7s ease;
}
.editorial-frame:hover .media-img { transform:scale(1.035); filter:grayscale(0%) contrast(1.06) saturate(.96); }

/* HOME */
.hero {
  padding-top:120px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  grid-template-rows:1fr auto;
  gap:46px 64px;
  align-items:center;
  padding-top:120px;
}

.hero-video {
  object-fit: cover;
  object-position: center center;
}

.hero-bg-mark {
  position:absolute;
  right:4%;
  top:12%;
  font-size:clamp(120px,20vw,300px);
  letter-spacing:-.13em;
  line-height:.7;
  opacity:.035;
  pointer-events:none;
}
.hero-text { margin-top:34px; color:var(--muted); }
.hero-actions { display:flex; gap:12px; margin-top:42px; }
.hero-visual { height:620px; }
.hero-meta { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.hero-meta div, .meta-card { border-top:1px solid var(--ink); padding-top:14px; font-size:12px; line-height:1.35; color:var(--muted); }
.hero-meta strong, .meta-card strong { display:block; color:var(--ink); font-size:12px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:9px; }
.dark-section .meta-card { border-color:rgba(250,248,243,.72); color:rgba(250,248,243,.55); }
.dark-section .meta-card strong { color:var(--paper); }

/* HOME OVERVIEW CARDS */
.overview-card {
  min-height:420px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .28s ease, background .28s ease;
}
.overview-card:hover { transform:translateY(-6px); }
.overview-card.dark { background:var(--dark); color:var(--paper); }
.overview-card .card-title { font-size:clamp(38px,5vw,72px); line-height:.86; letter-spacing:-.075em; }

/* PRODUCTS */
.product-toolbar {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--ink);
  padding-top:16px;
  margin-bottom:34px;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.product-card { cursor:pointer; }
.product-image { display:block; height:420px; transition:transform .28s ease; }
.product-card:hover .product-image { transform:translateY(-6px); }
.product-info { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding-top:16px; border-top:1px solid var(--ink); margin-top:16px; }
.product-info p, .product-info span { font-size:12px; line-height:1.35; color:var(--muted); letter-spacing:-.01em; }
.product-info span { text-transform:uppercase; letter-spacing:.14em; white-space:nowrap; }

/* DETAIL */
.detail-section { display:grid; grid-template-columns:1fr .8fr; gap:72px; align-items:center; }
.detail-media { height:680px; }
.detail-content p { color:rgba(250,248,243,.76); margin-top:34px; }
.spec-list { display:grid; margin:46px 0; border-top:1px solid rgba(250,248,243,.18); }
.spec-list div { display:flex; justify-content:space-between; gap:30px; padding:17px 0; border-bottom:1px solid rgba(250,248,243,.18); font-size:13px; }
.spec-list span { color:rgba(250,248,243,.48); letter-spacing:.12em; text-transform:uppercase; }
.spec-list strong { text-align:right; font-weight:400; }

/* CUSTOM */
.custom-layout { display:grid; grid-template-columns:1fr .8fr; gap:64px; align-items:stretch; }
.custom-preview { min-height:640px; }
.custom-panel { border-top:1px solid var(--ink); padding-top:26px; display:flex; flex-direction:column; gap:32px; }
.custom-row { display:grid; gap:16px; }
.custom-row > span { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.swatches { display:flex; gap:12px; }
.swatches button { width:46px; height:46px; border-radius:999px; border:1px solid rgba(17,16,14,.18); background:var(--swatch); cursor:pointer; transition:transform .2s ease; }
.swatches button:hover, .swatches button.is-active { transform:scale(1.08); outline:1px solid var(--ink); outline-offset:4px; }
.option-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.option-grid button, .custom-row input { min-height:52px; padding:0 16px; border:1px solid rgba(17,16,14,.16); background:transparent; color:var(--ink); font-size:13px; }
.option-grid button { cursor:pointer; text-align:left; }
.option-grid button:hover, .option-grid button.is-active { background:var(--ink); color:var(--paper); }
.custom-row input { outline:none; }

/* DROPS */
.drop-marquee { position:absolute; left:0; top:0; width:100%; overflow:hidden; padding:18px 0; border-bottom:1px solid rgba(250,248,243,.12); white-space:nowrap; }
.drop-marquee span { display:inline-block; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(250,248,243,.5); animation:marquee 24s linear infinite; }
@keyframes marquee { from{transform:translateX(100%)} to{transform:translateX(-100%)} }
.drops-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:end; padding-top:80px; }
.drops-grid p { color:rgba(250,248,243,.76); margin-top:34px; }
.drop-card { height:620px; }
.drop-info { position:absolute; left:24px; right:24px; bottom:24px; display:flex; justify-content:space-between; padding-top:14px; border-top:1px solid rgba(250,248,243,.34); color:var(--paper); }
.drop-info span { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(250,248,243,.52); }

/* COMMUNITY */
.social-grid { display:grid; grid-template-columns:.8fr 1.2fr .8fr; gap:18px; align-items:end; }
.social-card { height:420px; }
.social-card:nth-child(2) { height:560px; }
.community-copy { margin-top:70px; }
.statement { font-size:clamp(42px,7vw,105px); line-height:.88; letter-spacing:-.085em; max-width:1040px; }

/* ABOUT */
.about-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:center; }
.about-logo img { width:min(520px,70vw); opacity:.95; }
.about-copy p:last-child { margin-top:36px; color:var(--muted); }

/* FOOTER */
.footer { padding:54px; background:var(--dark); color:var(--paper); display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; }
.footer img { width:240px; filter:invert(1); opacity:.9; }
.footer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:46px; }
.footer-grid div { display:grid; gap:10px; }
.footer-grid strong { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(250,248,243,.56); margin-bottom:10px; }
.footer-grid a { font-size:14px; color:rgba(250,248,243,.8); }
.footer-note { grid-column:1/-1; font-size:12px; letter-spacing:.05em; color:rgba(250,248,243,.42); border-top:1px solid rgba(250,248,243,.16); padding-top:22px; margin-top:30px; }

@media (max-width:1100px) {
  .product-grid, .grid-4 { grid-template-columns:repeat(2,1fr); }
  .hero, .detail-section, .custom-layout, .drops-grid, .about-section, .grid-2 { grid-template-columns:1fr; }
  .hero-meta { grid-template-columns:repeat(2,1fr); }
  .hero-visual, .detail-media, .custom-preview, .drop-card { height:520px; }
}

@media (max-width:760px) {
  .header {
    min-height: 70px;
    height: auto;
    grid-template-columns: 1fr auto;
    padding: 14px 20px;
  }

  .mobile-menu-button { display: block; }

  .nav-links {
    display: none;
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 0 6px;
    border-top: 1px solid rgba(17,16,14,.08);
    margin-top: 12px;
  }

  .nav-links.is-open { display: flex; }

  .nav-actions { display:none; }

  .section {
    min-height: auto;
    padding: 110px 22px 42px;
  }

  .page-section { padding-top:110px; }

  h1 { font-size:clamp(56px,18vw,112px); line-height:.86; letter-spacing:-.075em; }
  h2 { font-size:clamp(46px,15vw,92px); line-height:.9; letter-spacing:-.055em; }
  p { font-size:18px; }

  .section-head, .product-grid, .hero-meta, .social-grid, .footer, .footer-grid, .grid-3, .grid-4 {
    grid-template-columns:1fr;
  }

  .hero {
    grid-template-columns:1fr;
    padding-top:110px;
    gap:34px;
  }

  .hero-actions { flex-direction:column; }

  .hero-visual, .detail-media, .custom-preview, .drop-card, .social-card, .social-card:nth-child(2), .product-image {
    height: min(420px, 78vw);
  }

  .custom-layout, .detail-section, .drops-grid, .about-section, .grid-2 {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .option-grid { grid-template-columns:1fr; }
  .footer img { width:180px; }
}

/* MOBILE NAV */
.mobile-menu-button {
  display: none;
  border: 1px solid rgba(17,16,14,.16);
  background: transparent;
  color: var(--ink);
  padding: 10px 12px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}

.mobile-menu-button span {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  margin: 5px 0;
}

/* CUSTOMIZER PREVIEW MOCKUP */
.custom-sneaker-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8%;
}

.fake-sneaker {
  width: min(680px, 92%);
  aspect-ratio: 2.35 / 1;
  border-radius: 68% 32% 30% 70% / 55% 38% 62% 45%;
  background: var(--custom-base, #f4f1eb);
  box-shadow: 0 42px 85px rgba(0,0,0,.18);
  position: relative;
  transform: rotate(-7deg);
  transition: background .25s ease, box-shadow .25s ease;
}

.fake-sneaker::before {
  content: "";
  position: absolute;
  left: 20%;
  top: 22%;
  width: 58%;
  height: 34%;
  border: 1px solid rgba(17,16,14,.18);
  border-radius: 70% 30% 30% 70% / 55% 35% 65% 45%;
}

.fake-sneaker::after {
  content: var(--custom-text, "SARIMI");
  position: absolute;
  right: 7%;
  bottom: 14%;
  color: var(--custom-detail, #11100e);
  font-size: clamp(9px, 1vw, 13px);
  letter-spacing: .28em;
  text-transform: uppercase;
  max-width: 26%;
  overflow: hidden;
  white-space: nowrap;
}

.custom-preview-label {
  position: absolute;
  left: 22px;
  bottom: 18px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(17,16,14,.42);
}

.color-name {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}


/* IMAGE-BASED CUSTOMIZER */
.custom-image-preview {
  position: absolute;
  inset: 0;
}

.custom-image-preview .media-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.custom-image-preview .media-img.is-active {
  opacity: 1;
}

.custom-help {
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--muted);
  border-top: 1px solid rgba(17,16,14,.14);
  padding-top: 14px;
}

.product-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.product-gallery-main {
  height: 680px;
}

.product-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.product-thumb {
  height: 150px;
  cursor: pointer;
}

.product-page-link {
  display: inline-flex;
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width:760px) {
  .product-gallery-main { height: min(420px, 78vw); }
  .product-gallery-thumbs { grid-template-columns: repeat(3, 1fr); }
  .product-thumb { height: 105px; }
}


/* V4 CUSTOMIZER LAYOUT FIX
   Keeps the original two-column customizer layout,
   but uses image swapping for only the colorways. */
.custom-section .custom-layout {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: 64px;
  align-items: stretch;
}

.custom-section .custom-preview {
  min-height: 640px;
  height: 640px;
}

.custom-section .custom-panel {
  align-self: stretch;
}

.custom-image-preview {
  position: absolute;
  inset: 0;
}

.custom-image-preview .custom-colorway {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.custom-image-preview .custom-colorway.is-active {
  opacity: 1;
  pointer-events: auto;
}

.custom-image-preview img.custom-colorway {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 760px) {
  .custom-section .custom-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .custom-section .custom-preview {
    min-height: 380px;
    height: min(420px, 78vw);
  }
}