:root {
    --bg:        #ffffff;
    --tile:      #e7e0d6;   /* warm sand product tile */
    --tile-2:    #ece6dd;
    --fg:        #1b1b1d;
    --fg-soft:   #5b5a57;
    --fg-mute:   #908d88;
    --line:      #e8e6e1;
    --dark:      #161513;   /* footer */
    --dark-fg:   #d7d4ce;
    --dark-mute: #8b8884;

    --serif: 'Source Serif 4', 'Times New Roman', serif;
    --sans:  'Geist', -apple-system, system-ui, sans-serif;
    --mono:  ui-monospace, 'SF Mono', Menlo, monospace;

    --gutter: clamp(18px, 3.4vw, 56px);
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; cursor: pointer; }
  ul { list-style: none; margin: 0; padding: 0; }
  button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; padding: 0; }
  img { display: block; max-width: 100%; }
  em { font-style: italic; }
  ::selection { background: var(--fg); color: var(--bg); }

  .label {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    font-weight: 500;
  }
  .micro {
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg-mute);
  }

  /* ============ HEADER ============ */
  .topbar {
    text-align: center;
    background: var(--fg);
    color: #fff;
    font-size: 9.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    padding: 9px 16px;
  }
  .masthead {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--bg);
  }
  .header {
    position: relative;
    z-index: 62;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 76px;
  }
  .nav { display: flex; gap: clamp(18px, 2vw, 34px); }
  .nav a {
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: opacity .25s;
  }
  .nav a .lbl { position: relative; padding-bottom: 4px; }
  .nav a .lbl::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
  }
  .nav a.menu-open .lbl::after,
  .nav a:hover .lbl::after,
  .nav a.active .lbl::after { transform: scaleX(1); }
  .nav a .car {
    font-size: 7px; opacity: 0.55; transform: translateY(1px);
    transition: transform .3s, opacity .25s;
  }
  .nav a.menu-open .car,
  .nav a:hover .car,
  .nav a.active .car { transform: translateY(1px) rotate(180deg); opacity: 0.8; }
  .nav a.active { opacity: 1; }

  /* ---- new collection (editorial) ---- */
  .newcoll { padding: clamp(64px, 9vh, 132px) var(--gutter) clamp(40px, 6vh, 80px); }
  .newcoll-head { text-align: center; max-width: 640px; margin: 0 auto clamp(40px, 6vh, 80px); }
  .newcoll-head .idx {
    font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--fg-mute);
    display: block; margin-bottom: 22px;
  }
  .newcoll-head h2 {
    margin: 0 0 24px;
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(40px, 6vw, 92px); line-height: 0.98; letter-spacing: -0.025em;
  }
  .newcoll-head h2 em { font-style: italic; }
  .newcoll-head p {
    margin: 0 auto; max-width: 460px; color: var(--fg-soft);
    font-size: 14px; line-height: 1.75;
  }
  .newcoll-head .lnk {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 30px;
    font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--fg);
    padding-bottom: 6px; border-bottom: 1px solid var(--fg); transition: gap .3s;
  }
  .newcoll-head .lnk:hover { gap: 16px; }
  .newcoll-figs {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 3vw, 56px);
    align-items: end;
  }
  .newcoll-figs figure { margin: 0; }
  .newcoll-figs .media { overflow: hidden; background: var(--tile); }
  .newcoll-figs .media .img {
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
    transition: transform 1.2s cubic-bezier(.16,.84,.36,1);
  }
  .newcoll-figs figure:hover .img { transform: scale(1.035); }
  .newcoll-figs .tall { padding-bottom: clamp(28px, 6vh, 90px); }
  .newcoll-figs .tall .media { aspect-ratio: 3/4; }
  .newcoll-figs .short .media { aspect-ratio: 4/5; }
  .newcoll-figs figcaption {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    margin-top: 16px;
  }
  .newcoll-figs .nm { font-family: var(--serif); font-weight: 300; font-size: 17px; }
  .newcoll-figs .meta { font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-mute); }

  /* ---- mega menu ---- */
  .megapanel {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 34px 50px -34px rgba(0,0,0,0.18);
    opacity: 0; visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1), visibility .3s;
    z-index: 55;
  }
  .masthead.open .megapanel { opacity: 1; visibility: visible; transform: none; }
  .mega-inner { display: none; }
  .mega-inner.show {
    display: grid;
    grid-template-columns: 0.9fr 0.9fr 2.1fr;
    gap: clamp(28px, 4vw, 72px);
    padding: clamp(34px, 3.5vw, 52px) var(--gutter) clamp(36px, 4vw, 56px);
    align-items: start;
  }
  .mega-col h6 {
    margin: 0 0 22px;
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--fg);
  }
  .mega-col ul { display: flex; flex-direction: column; gap: 14px; }
  .mega-col li a {
    font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-soft);
    position: relative; padding-bottom: 3px; transition: color .25s;
  }
  .mega-col li a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left;
    transition: transform .28s cubic-bezier(.4,0,.2,1);
  }
  .mega-col li a:hover { color: var(--fg); }
  .mega-col li a:hover::after { transform: scaleX(1); }
  .mega-promos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 22px); }
  .mega-promo { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--tile); display: block; }
  .mega-promo .mp-img {
    position: absolute; inset: 0;
    background-size: cover; background-position: center 18%;
    transition: transform 1.1s cubic-bezier(.16,.84,.36,1);
  }
  .mega-promo:hover .mp-img { transform: scale(1.04); }
  .mega-promo .mp-img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.42));
  }
  .mega-promo .mp-cap { position: absolute; left: 22px; bottom: 22px; z-index: 2; color: #fff; }
  .mega-promo .mp-cap .k { display: block; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; margin-bottom: 6px; }
  .mega-promo .mp-cap .t { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(20px, 1.7vw, 28px); line-height: 1; }
  .logo { justify-self: center; height: 40px; color: var(--fg); display: block; }
  .logo svg { height: 100%; width: auto; display: block; }
  .util { display: flex; gap: clamp(14px, 1.6vw, 26px); align-items: center; justify-content: flex-end; }
  .util a { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; transition: opacity .25s; }
  .util a:hover { opacity: 0.55; }
  .util .region { color: var(--fg-mute); }

  /* language + currency switchers (WPML / WCML) */
  .dv-switch { display: inline-flex; align-items: center; gap: 8px; }
  .dv-switch .dv-sep { opacity: 0.45; }
  .dv-lang { display: inline-flex; gap: 7px; }
  .dv-lang a { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-mute); }
  .dv-lang a.on { color: var(--fg); font-weight: 500; }
  .dv-lang a:hover { opacity: 0.55; }

  .dv-curr .wcml-dropdown { position: relative; display: inline-block; }
  .dv-curr .wcml-dropdown, .dv-curr .wcml-dropdown ul, .dv-curr .wcml-dropdown li { margin: 0; padding: 0; list-style: none; background: none; border: 0; }
  .dv-curr .wcml-cs-active-currency > a.wcml-cs-item-toggle { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-mute); cursor: pointer; }
  .dv-curr .wcml-cs-active-currency > a.wcml-cs-item-toggle::after { content: "▾"; font-size: 8px; margin-left: 4px; }
  /* ul.wcml-cs-submenu needed so the panel wins over the `.wcml-dropdown ul` reset above (which is more specific via the ul type selector). */
  .dv-curr .wcml-dropdown ul.wcml-cs-submenu { position: absolute; top: 100%; right: 0; min-width: 78px; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(35, 35, 38, 0.10); padding: 5px 0; margin-top: 12px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; z-index: 60; }
  .dv-curr .wcml-dropdown:hover ul.wcml-cs-submenu,
  .dv-curr .wcml-dropdown.wcml-dropdown-open ul.wcml-cs-submenu { opacity: 1; visibility: visible; transform: none; }
  .dv-curr .wcml-cs-submenu li a { display: block; padding: 6px 16px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-soft); cursor: pointer; white-space: nowrap; }
  .dv-curr .wcml-cs-submenu li a:hover { background: #f4f3f1; color: var(--fg); }

  /* ============ 01 · HERO ============ */
  .hero {
    position: relative;
    width: 100%;
    height: 78vh;
    min-height: 540px;
    overflow: hidden;
    background: #111;
  }
  .hero { height: 100svh; }
  .hero-montage { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #111; }
  .hero-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center 16%;
    filter: contrast(1.03) saturate(0.97);
    opacity: 0;
    animation: heroCycle 32s cubic-bezier(.4,0,.2,1) infinite;
    will-change: opacity, transform;
  }
  .hero-slide:nth-child(1) { animation-delay: 0s; }
  .hero-slide:nth-child(2) { animation-delay: 8s; }
  .hero-slide:nth-child(3) { animation-delay: 16s; }
  .hero-slide:nth-child(4) { animation-delay: 24s; }
  /* overlapping crossfade — outgoing holds at 1 until incoming has fully arrived */
  @keyframes heroCycle {
    0%   { opacity: 0; transform: scale(1.0); }
    3%   { opacity: 1; }
    28%  { opacity: 1; }
    32%  { opacity: 0; }
    100% { opacity: 0; transform: scale(1.12); }
  }
  .hero-video {
    position: absolute; inset: 0; z-index: 1;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 14%;
    filter: contrast(1.03) saturate(0.97);
    background: transparent;
    opacity: 0; transition: opacity .8s ease;
  }
  .hero-video.live { opacity: 1; }
  .hero-veil {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.10) 26%, rgba(0,0,0,0.10) 56%, rgba(0,0,0,0.46) 100%);
  }
  .hero-copy {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    text-align: center; gap: clamp(18px, 2.4vh, 30px);
    padding: 24px 24px clamp(40px, 7vh, 80px);
    color: rgba(255,255,255,0.97);
  }
  .hero-copy .mark { height: clamp(26px, 4.6vw, 58px); color: #fff; display: block; }
  .hero-copy .mark svg { height: 100%; width: auto; display: block; filter: drop-shadow(0 2px 26px rgba(0,0,0,0.32)); }
  .hero-copy .tagline {
    font-family: var(--serif); font-weight: 300; font-style: italic;
    font-size: clamp(16px, 1.9vw, 26px); letter-spacing: 0.01em; line-height: 1.4;
    margin: 0; max-width: 22ch; text-shadow: 0 2px 26px rgba(0,0,0,0.3);
  }
  .hero-copy .explore {
    margin-top: 6px;
    font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase;
    color: #fff; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.7);
    display: inline-flex; align-items: center; gap: 10px; transition: gap .35s, border-color .35s;
  }
  .hero-copy .explore:hover { gap: 16px; border-color: #fff; }
  .hero-copy .explore .arr { transition: transform .35s; }
  .hero-copy .explore:hover .arr { transform: translateX(4px); }


  /* ============ section row head ============ */
  .rowhead {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: clamp(40px, 6vh, 72px) var(--gutter) 26px;
    gap: 20px;
  }
  .rowhead.simple { grid-template-columns: 1fr auto; }
  .rowhead .title {
    font-size: clamp(17px, 1.9vw, 24px);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .rowhead .center { justify-self: center; display: flex; gap: 8px; }
  .rowhead .end { justify-self: end; display: flex; align-items: center; gap: 20px; }
  .rowhead .seeall {
    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 9px; transition: gap .3s;
  }
  .rowhead .seeall:hover { gap: 14px; }
  .arrows { display: flex; gap: 6px; }
  .arrows button {
    width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%;
    display: grid; place-items: center; font-size: 12px; color: var(--fg-soft);
    transition: background .25s, color .25s, border-color .25s;
  }
  .arrows button:hover { background: var(--fg); color: #fff; border-color: var(--fg); }

  .pill {
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px;
    color: var(--fg-soft); transition: all .25s; white-space: nowrap;
  }
  .pill:hover { border-color: var(--fg-mute); color: var(--fg); }
  .pill.active { background: var(--fg); color: #fff; border-color: var(--fg); }

  /* ============ product row ============ */
  .prow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(8px, 1vw, 16px);
    padding: 0 var(--gutter) clamp(48px, 7vh, 96px);
  }
  .product { cursor: pointer; }
  /* Filtered-out cards. Explicit so no later display rule can outrank [hidden]. */
  .product[hidden] { display: none; }
  /* The tile art is a real <img> so the browser can pick a 2x source from srcset;
     object-fit reproduces exactly what background-size:cover used to do. */
  .product .tile .tile-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
  }
  .product .tile {
    aspect-ratio: 4/5;
    background-color: var(--tile);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    transition: opacity .35s;
  }
  .product:nth-child(even) .tile { background-color: var(--tile-2); }
  .product:hover .tile { opacity: 0.9; }
  .product .pname {
    margin-top: 14px;
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
  }
  .product .pprice {
    margin-top: 5px;
    font-size: 10px; letter-spacing: 0.08em; color: var(--fg-mute);
    font-feature-settings: 'tnum';
  }

  /* ============ 03 · STORY GRID (2x2) ============ */
  .grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(8px, 1vw, 16px);
    padding: 0 var(--gutter) clamp(48px, 7vh, 96px);
  }
  .gcell { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--tile); }
  .gcell .gimg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transition: transform 1.2s cubic-bezier(.16,.84,.36,1);
  }
  .gcell:hover .gimg { transform: scale(1.035); }
  .gcell.story .gimg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.28), transparent 42%, transparent 60%, rgba(0,0,0,0.30));
  }
  .gcell .story-copy {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; color: #fff; gap: 18px; padding: 24px;
  }
  .gcell .story-copy h3 {
    margin: 0;
    font-family: var(--serif); font-weight: 300; font-style: italic;
    font-size: clamp(28px, 3.2vw, 50px); letter-spacing: -0.01em; line-height: 1;
    text-shadow: 0 2px 30px rgba(0,0,0,0.3);
  }
  .gcell .story-copy a {
    font-family: var(--sans); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
    padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,0.7);
    display: inline-flex; align-items: center; gap: 9px;
  }

  /* ============ 05 · CAMPAIGN BAND ============ */
  .band {
    position: relative;
    height: 80vh; min-height: 540px;
    overflow: hidden; background: #111;
  }
  .band .bimg {
    position: absolute; inset: 0;
    background-image: url('../images/campaign-portrait.jpg');
    background-size: cover; background-position: center 18%;
    filter: contrast(1.03) saturate(0.96);
  }
  .band .bimg::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.18) 30%, rgba(0,0,0,0.5) 100%);
  }
  .band .bcopy {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; color: #fff; gap: 22px; padding: 24px;
  }
  .band .bcopy h2 {
    margin: 0;
    font-family: var(--serif); font-weight: 300; font-style: italic;
    font-size: clamp(34px, 5vw, 78px); line-height: 1; letter-spacing: -0.015em;
    text-shadow: 0 2px 40px rgba(0,0,0,0.3);
  }
  .band .bcopy p {
    margin: 0; max-width: 540px;
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.9;
    color: rgba(255,255,255,0.85);
  }
  .band .bcopy a {
    margin-top: 8px;
    font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
    padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,0.75);
    display: inline-flex; gap: 9px; align-items: center;
  }

  
  /* ============ SEARCH OVERLAY ============ */
  .search-overlay {
    position: fixed; inset: 0; z-index: 120;
    display: flex; flex-direction: column;
    background: rgba(255,255,255,0.985);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1), visibility .35s;
  }
  .search-overlay.open { opacity: 1; visibility: visible; transform: none; }
  .search-top { display: flex; align-items: center; gap: 18px; padding: 24px var(--gutter); border-bottom: 1px solid var(--line); }
  .search-top svg { width: 18px; height: 18px; color: var(--fg-soft); flex: none; }
  .search-input {
    flex: 1; border: 0; background: transparent; outline: none;
    font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 3vw, 42px);
    letter-spacing: -0.01em; color: var(--fg);
  }
  .search-input::placeholder { color: var(--fg-mute); font-style: italic; }
  .search-close { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-soft); border-bottom: 1px solid currentColor; padding-bottom: 3px; transition: color .25s; flex: none; }
  .search-close:hover { color: var(--fg); }
  .search-body { flex: 1; overflow-y: auto; padding: clamp(28px,4vh,48px) var(--gutter) clamp(40px,6vh,72px); }
  .search-suggest { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: clamp(30px,5vh,52px); }
  .search-suggest .lab { font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-mute); margin-right: 6px; }
  .search-suggest button { border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-soft); transition: border-color .22s, color .22s; }
  .search-suggest button:hover { border-color: var(--fg); color: var(--fg); }
  .search-meta { font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 22px; }
  .search-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px,2vw,34px) clamp(8px,1vw,16px); }
  .sresult { display: flex; flex-direction: column; cursor: pointer; }
  .sresult .st { aspect-ratio: 4/5; background-color: var(--tile); overflow: hidden; }
  .sresult:nth-child(even) .st { background-color: var(--tile-2); }
  .sresult .st i { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 1s cubic-bezier(.16,.84,.36,1); }
  .sresult:hover .st i { transform: scale(1.04); }
  .sresult .sn { margin-top: 12px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; }
  .sresult .sp { margin-top: 5px; font-size: 10px; color: var(--fg-mute); font-feature-settings: 'tnum'; }
  .search-empty { grid-column: 1 / -1; text-align: center; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(20px,2vw,28px); color: var(--fg-mute); padding: 48px 0; }
  @media (max-width: 860px) { .search-results { grid-template-columns: 1fr 1fr; } }

  
  /* ============ QUICK ADD + OPTIONS MODAL ============ */
  .product .tile, .lcard .ltile { position: relative; }
  .qadd {
    position: absolute; right: 12px; bottom: 12px; z-index: 4;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,0.95);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    display: grid; place-items: center; color: var(--fg);
    box-shadow: 0 8px 20px -10px rgba(0,0,0,0.35);
    opacity: 0; transform: translateY(8px) scale(0.94);
    transition: opacity .32s, transform .32s, background .25s, color .25s;
  }
  .product:hover .qadd, .lcard:hover .qadd { opacity: 1; transform: none; }
  .qadd:hover { background: var(--fg); color: #fff; }
  .qadd svg { width: 17px; height: 17px; }
  .lcard.out .qadd { display: none; }
  @media (hover: none) { .qadd { opacity: 1; transform: none; } }

  .options-modal { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: clamp(16px,3vw,40px); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
  .options-modal.open { opacity: 1; visibility: visible; }
  .options-backdrop { position: absolute; inset: 0; background: rgba(20,19,17,0.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  .options-card { position: relative; z-index: 2; background: var(--bg); width: min(860px, 100%); max-height: 88vh; display: flex; flex-direction: row; overflow: hidden; transform: translateY(16px) scale(0.99); transition: transform .42s cubic-bezier(.16,.84,.36,1); }
  .options-modal.open .options-card { transform: none; }
  .om-left { flex: 0 0 42%; }
  .om-right { flex: 1; overflow-y: auto; padding: clamp(24px,3vw,40px); display: flex; flex-direction: column; }
  .options-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }
  .options-head h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(24px,2.4vw,34px); letter-spacing: -0.01em; margin: 0; }
  .options-close { width: 34px; height: 34px; display: grid; place-items: center; color: var(--fg-soft); transition: color .2s; flex: none; }
  .options-close:hover { color: var(--fg); }
  .options-close svg { width: 18px; height: 18px; }
  .om-gallery { height: 100%; }
  .om-shot { width: 100%; height: 100%; background: var(--tile); overflow: hidden; }
  .om-shot i { display: block; width: 100%; height: 100%; background-size: cover; background-position: center 16%; }
  .om-name { font-family: var(--serif); font-weight: 300; font-size: clamp(18px,1.8vw,24px); border-bottom: 1px solid var(--fg); padding-bottom: 10px; display: inline-block; }
  .om-price { font-size: 13px; letter-spacing: 0.04em; color: var(--fg-soft); margin: 14px 0 30px; font-feature-settings: 'tnum'; }
  .om-block { margin-bottom: 24px; }
  .om-lbl { font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-soft); margin-bottom: 12px; }
  .om-lbl b { color: var(--fg); font-weight: 600; }
  .om-sizes { display: flex; gap: 8px; }
  .om-size { min-width: 46px; height: 46px; padding: 0 8px; border: 1px solid var(--line); border-radius: 3px; font-size: 10px; letter-spacing: 0.06em; display: grid; place-items: center; color: var(--fg-soft); transition: background .22s, color .22s, border-color .22s; }
  .om-size:hover { border-color: var(--fg); color: var(--fg); }
  .om-size.active { background: var(--fg); color: #fff; border-color: var(--fg); }
  .om-swatches { display: flex; gap: 10px; }
  .om-sw { width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; background: none; cursor: pointer; }
  .om-sw i { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14); transition: box-shadow .22s; }
  .om-sw.active i { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14), 0 0 0 2px #fff, 0 0 0 3px var(--fg); }
  .om-add { width: 100%; height: 52px; background: var(--fg); color: #fff; border-radius: 999px; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; margin-top: 8px; transition: opacity .2s, background .25s, color .25s; }
  .om-add:hover { opacity: 0.9; }
  .om-add.disabled { background: #e6e3df; color: #a9a59e; cursor: default; }
  .om-add.done { background: #1f8a5b; color: #fff; opacity: 1; }
  .om-buy { width: 100%; height: 50px; border: 1px solid var(--fg); border-radius: 999px; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; margin-top: 12px; transition: background .25s, color .25s; }
  .om-buy:hover { background: var(--fg); color: #fff; }

  /* ============ CART DRAWER ============ */
  .cart-drawer { position: fixed; inset: 0; z-index: 140; visibility: hidden; }
  .cart-drawer.open { visibility: visible; }
  .cart-backdrop { position: absolute; inset: 0; background: rgba(20,19,17,0.40); opacity: 0; transition: opacity .4s ease; }
  .cart-drawer.open .cart-backdrop { opacity: 1; }
  .cart-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(440px, 92vw); background: var(--bg); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .45s cubic-bezier(.16,.84,.36,1); box-shadow: -20px 0 50px -30px rgba(0,0,0,0.3); }
  .cart-drawer.open .cart-panel { transform: none; }
  .cart-head { display: flex; align-items: center; justify-content: space-between; padding: 24px var(--gutter); border-bottom: 1px solid var(--line); }
  .cart-head span { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; }
  .cart-head em { font-style: normal; color: var(--fg-mute); font-weight: 400; }
  .cart-close { font-size: 22px; line-height: 1; color: var(--fg-soft); transition: color .2s; }
  .cart-close:hover { color: var(--fg); }
  .cart-items { flex: 1; overflow-y: auto; padding: 4px var(--gutter); }
  .cart-empty { padding: 64px 0; text-align: center; }
  .cart-empty p { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 22px; color: var(--fg); margin: 0 0 8px; }
  .cart-empty span { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-mute); }
  .cart-line { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line-soft); }
  .cl-thumb { width: 64px; height: 84px; background-color: var(--tile); background-size: cover; background-position: center; }
  .cl-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
  .cl-name { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
  .cl-remove { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
  .cl-remove:hover { color: var(--fg); border-color: var(--fg-mute); }
  .cl-meta { font-size: 10px; letter-spacing: 0.1em; color: var(--fg-mute); margin: 8px 0 14px; }
  .cl-bottom { display: flex; justify-content: space-between; align-items: center; }
  .cl-qty { display: flex; align-items: center; border: 1px solid var(--line); }
  .cl-qty button { width: 30px; height: 32px; font-size: 13px; color: var(--fg-soft); transition: color .2s; }
  .cl-qty button:hover { color: var(--fg); }
  .cl-qty span { min-width: 26px; text-align: center; font-size: 11px; font-feature-settings: 'tnum'; }
  .cl-price { font-size: 11px; letter-spacing: 0.04em; font-feature-settings: 'tnum'; }
  .cart-foot { border-top: 1px solid var(--line); padding: 22px var(--gutter) clamp(22px,4vh,34px); }
  .cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; }
  .cart-subtotal span:first-child { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-soft); }
  .cart-total { font-family: var(--serif); font-weight: 300; font-size: 22px; font-feature-settings: 'tnum'; }
  .cart-note { font-size: 10px; letter-spacing: 0.06em; color: var(--fg-mute); margin: 8px 0 18px; }
  .cart-checkout { width: 100%; height: 52px; background: var(--fg); color: #fff; border-radius: 999px; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; transition: opacity .2s; }
  .cart-checkout:hover { opacity: 0.9; }
  .cart-continue { width: 100%; height: 44px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-soft); margin-top: 8px; transition: color .2s; }
  .cart-continue:hover { color: var(--fg); }

  /* ============ FOOTER ============ */
  .footer { background: var(--dark); color: var(--dark-fg); }
  .foot-main {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: clamp(28px, 4vw, 72px);
    padding: clamp(56px, 8vh, 100px) var(--gutter) clamp(40px, 6vh, 72px);
  }
  .foot-news h4 {
    margin: 0 0 22px;
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500;
    max-width: 280px; line-height: 1.8; color: var(--dark-fg);
  }
  .foot-field {
    display: flex; align-items: center; gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.3); padding: 8px 0 10px; max-width: 340px;
  }
  .foot-field input {
    flex: 1; border: 0; background: transparent; outline: none;
    color: #fff; font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em;
  }
  .foot-field input::placeholder { color: var(--dark-mute); }
  .foot-field button {
    font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: #fff;
    border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: opacity .25s;
  }
  .foot-field button:hover { opacity: 0.6; }
  .foot-social { display: flex; gap: 18px; margin-top: 28px; }
  .foot-social a {
    font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dark-mute);
    transition: color .25s;
  }
  .foot-social a:hover { color: #fff; }
  .foot-col h5 {
    margin: 0 0 18px;
    font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dark-mute); font-weight: 500;
  }
  .foot-col ul { display: flex; flex-direction: column; gap: 11px; }
  .foot-col li {
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark-fg);
    transition: opacity .25s; cursor: pointer;
  }
  .foot-col li:hover { opacity: 0.6; }

  .foot-mark { padding: 0 var(--gutter); }
  .foot-mark svg { width: 100%; height: auto; display: block; color: rgba(255,255,255,0.10); }

  .foot-bottom {
    display: flex; justify-content: space-between; align-items: center; gap: 24px;
    padding: 22px var(--gutter) 30px;
    border-top: 1px solid rgba(255,255,255,0.12);
    margin-top: clamp(28px, 4vh, 56px);
    font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dark-mute);
  }

  /* ============ reveal ============ */
  [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 1s cubic-bezier(.16,.84,.36,1), transform 1s cubic-bezier(.16,.84,.36,1); }
  [data-reveal].in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    .hero-video { animation: none; }
    .hero-slide { animation: none; opacity: 0; }
    .hero-slide:first-child { opacity: 1; }
    html { scroll-behavior: auto; }
  }

  /* ============ responsive ============ */
  @media (max-width: 860px) {
    .nav a:nth-child(n+4) { display: none; }
    .util .region { display: none; }
    .prow { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
    .foot-main { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
    .foot-news { grid-column: 1 / -1; }
    .rowhead { grid-template-columns: 1fr auto; }
    .rowhead .center { display: none; }
    .rowhead.bestsellers .center { display: flex; grid-column: 1 / -1; justify-self: stretch; flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin-top: 18px; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; }
    .rowhead.bestsellers .center::-webkit-scrollbar { display: none; }
    .rowhead.bestsellers .center .pill { flex: 0 0 auto; }
  }
  @media (max-width: 720px) {
    .options-card { flex-direction: column; }
    .om-left { flex: 0 0 auto; aspect-ratio: 16/10; }
    .om-right { max-height: 60vh; }
  }
  @media (max-width: 520px) {
    .nav a:nth-child(n+2) { display: none; }
    .grid2 { grid-template-columns: 1fr; }
    .gcell { aspect-ratio: 3/4; }
    .util a:not(.bag) { display: none; }
    .foot-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  }
  /* Mobile: product rows become a horizontal swipe carousel instead of stacking. */
  @media (max-width: 640px) {
    .prow {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: 76%;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      gap: 12px;
      scrollbar-width: none;
      -ms-overflow-style: none;
      scroll-padding: 0 var(--gutter);
    }
    .prow::-webkit-scrollbar { display: none; }
    .prow > * { scroll-snap-align: start; }
  }

/* ═══════════ MOBILE NAV DRAWER (hamburger) ═══════════ */
.dv-burger { display: none; width: 40px; height: 40px; place-items: center; color: inherit; background: none; border: 0; cursor: pointer; }
.dv-burger svg { width: 22px; height: 22px; }
.nav-drawer-overlay { position: fixed; inset: 0; background: rgba(20,19,17,0.38); z-index: 200; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.nav-drawer-overlay.open { opacity: 1; visibility: visible; }
.nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; background: var(--bg); z-index: 201; transform: translateX(100%); transition: transform .38s cubic-bezier(.16,.84,.36,1); display: flex; flex-direction: column; overflow-y: auto; }
.nav-drawer-overlay.open .nav-drawer { transform: none; }
.nav-drawer-top { height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 24px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.nav-drawer-wordmark { font-family: var(--serif); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fg-mute); }
.nav-drawer-close { width: 44px; height: 44px; display: grid; place-items: center; color: var(--fg-mute); background: none; border: 0; cursor: pointer; }
.nav-drawer-close svg { width: 18px; height: 18px; }
.nav-drawer-nav { padding: 8px 0; flex: 1; }
.nav-drawer-section { display: block; font-size: 8.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fg-mute); padding: 20px 24px 8px; }
.nav-drawer-nav .nav-drawer-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 17px 24px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg); border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; cursor: pointer; text-align: left; }
.nav-drawer-nav .nav-drawer-link:hover { background: #f4f3f1; }
.nd-chev { font-size: 10px; color: var(--fg-mute); transition: transform .3s; }
.nav-drawer-item.open .nd-chev { transform: rotate(180deg); }
.nav-drawer-sub { display: none; background: #faf9f7; border-bottom: 1px solid var(--line); padding: 6px 0 16px; }
.nav-drawer-item.open .nav-drawer-sub { display: block; }
.nav-drawer-sub .nd-sub-head { display: block; font-size: 8.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--fg-mute); padding: 16px 24px 6px; }
.nav-drawer-sub a { display: block; padding: 9px 24px; font-size: 11px; letter-spacing: 0.1em; text-transform: none; color: var(--fg-soft); transition: color .15s; }
.nav-drawer-sub a:hover { color: var(--fg); }
.nav-drawer-sub .nd-sub-all { margin-top: 8px; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg); }
.nav-drawer-util { border-top: 1px solid var(--line); padding: 8px 0; }
.nav-drawer-util a { display: flex; width: 100%; padding: 14px 24px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-mute); border-bottom: 1px solid var(--line); }
.nav-drawer-util a:last-child { border-bottom: 0; }
.nav-drawer-bag { font-weight: 500; color: var(--fg) !important; }

/* Language + currency switcher inside the drawer (tap-friendly). */
.nav-drawer-switch { padding: 18px 24px 26px; border-top: 1px solid var(--line); }
.nav-drawer-switch .region.dv-switch { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nav-drawer-switch .dv-region-label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-mute); }
.nav-drawer-switch .dv-lang { gap: 14px; }
.nav-drawer-switch .dv-lang a { font-size: 13px; letter-spacing: 0.1em; padding: 6px 2px; }
.nav-drawer-switch .dv-curr .wcml-cs-active-currency > a.wcml-cs-item-toggle { font-size: 13px; letter-spacing: 0.1em; }
.nav-drawer-switch .dv-curr .wcml-cs-submenu { margin-top: 6px; }
.nav-drawer-switch .region:not(.dv-switch) { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); }

/* Tablet + mobile: the inline nav cramps the centred logo, so swap it for the
   hamburger drawer. Language/currency move into the drawer too. */
@media (max-width: 1024px) {
  .dv-burger { display: grid; }                     /* hamburger lives in the left nav column */
  .header .nav a { display: none; }                 /* hide the primary links (they're in the drawer) */
  .header .util .region { display: none; }          /* switcher lives in the drawer */
}
/* Phones: keep only the bag in the header util. */
@media (max-width: 600px) {
  .header .util > a:not(.bag) { display: none; }     /* search/account live in the drawer */
}

/* Hide WPML's "development site" front-end banner (stopgap until a production
   site key is registered — the banner is English and shows to all visitors). */
.otgs-development-site-front-end { display: none !important; }

/* ── Size guide modal ── */
.size-guide { cursor: pointer; }
.sizeguide-overlay { position: fixed; inset: 0; z-index: 210; display: none; align-items: center; justify-content: center; padding: 20px; }
.sizeguide-overlay.open { display: flex; }
.sizeguide-overlay .sg-backdrop { position: absolute; inset: 0; background: rgba(20, 19, 17, 0.5); }
.sizeguide-overlay .sg-panel { position: relative; background: var(--bg); max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22); }
.sg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.sg-head h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 2.4vw, 28px); margin: 0; letter-spacing: -0.01em; }
.sg-close { width: 40px; height: 40px; display: grid; place-items: center; color: var(--fg-soft); background: none; border: 0; cursor: pointer; margin: -8px -8px -8px 0; }
.sg-close svg { width: 18px; height: 18px; }
.sg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sg-table th, .sg-table td { padding: 12px 10px; text-align: center; border-bottom: 1px solid var(--line); }
.sg-table thead th { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); font-weight: 600; }
.sg-table thead th:first-child, .sg-table tbody th { text-align: left; }
.sg-table tbody th { font-weight: 500; letter-spacing: 0.1em; color: var(--fg); }
.sg-table tbody td { color: var(--fg-soft); font-feature-settings: 'tnum'; white-space: nowrap; }
.sg-note { font-size: 11.5px; color: var(--fg-mute); margin: 16px 0 0; line-height: 1.6; }
@media (max-width: 420px) { .sg-table th, .sg-table td { padding: 10px 4px; font-size: 12px; } .sg-table thead th { letter-spacing: 0.08em; } }

/* ── Telegram order-status opt-in (checkout) + subscribe (thank-you) ── */
.dvco-tg-optin{margin-top:18px;padding:14px 16px;border:1px solid rgba(0,0,0,.12);border-radius:10px;background:rgba(0,0,0,.015)}
.dvco-tg-optin__check{display:flex;gap:10px;align-items:center;cursor:pointer;font-weight:600;font-size:.95rem;margin:0}
.dvco-tg-optin__check input{width:18px;height:18px;flex:0 0 auto;accent-color:#229ED9;margin:0}
.dvco-tg-optin__contact{margin-top:12px !important;width:100%}
.dvco-tg-optin:not(:has(input[type="checkbox"]:checked)) .dvco-tg-optin__contact{display:none}
.dvco-tg-optin__hint{margin:9px 0 0;font-size:.82rem;line-height:1.5;color:rgba(0,0,0,.5)}
.dvco-tg-sub{display:flex;flex-direction:column;gap:7px;align-items:center;margin:26px 0}
.dvco-tg-sub__btn{display:inline-flex;align-items:center;gap:8px;background:#229ED9;color:#fff;font-weight:600;
  padding:13px 24px;border-radius:10px;text-decoration:none;letter-spacing:.01em;transition:background .15s}
.dvco-tg-sub__btn:hover{background:#1b8ec4;color:#fff}
.dvco-tg-sub__hint{font-size:.82rem;color:rgba(0,0,0,.5)}
.dvco-tg-done{text-align:center;color:#2f8f46;font-weight:600;margin:20px 0}