:root {
      --clay:       #c4a882;
      --clay-deep:  #9e7c54;
      --clay-pale:  #ede4d8;
      --clay-mist:  rgba(196,168,130,0.13);
      --bone:       #f7f3ee;
      --linen:      #efe9e0;
      --charcoal:   #1e1b18;
      --ink:        #2e2b27;
      --dust:       #8a8278;
      --rust:       #b85c38;
      --rust-pale:  rgba(184,92,56,0.1);
      --sage:       #7a8c72;
      --white:      #ffffff;
      --border:     rgba(30,27,24,0.09);
      --border-md:  rgba(30,27,24,0.14);

      --ff-serif: "Playfair Display", Georgia, serif;
      --ff-sans:  "DM Sans", system-ui, sans-serif;
      --silk: cubic-bezier(0.25, 1, 0.5, 1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      font-family: var(--ff-sans);
      background: var(--bone);
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    a { text-decoration: none; color: inherit; }
    img { display: block; max-width: 100%; height: auto; }

    .eyebrow {
      font-family: var(--ff-sans);
      font-size: 0.62rem;
      font-weight: 400;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--clay-deep);
    }

    /* ═══════════════════════════════════════════════
       HERO — FULL BLEED SPLIT WITH ROOM SCENE
    ═══════════════════════════════════════════════ */
    .hero {
      display: grid;
      grid-template-columns: 55% 45%;
      min-height: 95vh;
      position: relative;
      background: var(--charcoal);
      overflow: hidden;
    }

    /* Left: atmospheric room scene rendered in SVG */
    .hero-scene {
      position: relative;
      overflow: hidden;
    }

    /* Subtle noise grain */
    .hero-scene::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.055'/%3E%3C/svg%3E");
      background-size: 200px;
      pointer-events: none;
      z-index: 3;
    }

    .hero-scene-svg {
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
    }

    /* Right: editorial copy panel */
    .hero-copy {
      position: relative;
      z-index: 5;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 5rem);
      background: var(--charcoal);
    }

    /* Decorative vertical rule on left edge of copy panel */
    .hero-copy::before {
      content: "";
      position: absolute;
      left: 0;
      top: 15%;
      height: 70%;
      width: 1px;
      background: linear-gradient(to bottom, transparent, rgba(196,168,130,0.35) 30%, rgba(196,168,130,0.35) 70%, transparent);
    }

    .hero-tag {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 2.5rem;
    }

    .hero-tag-line {
      height: 1px;
      width: 36px;
      background: var(--clay);
      opacity: 0.6;
    }

    .hero-headline {
      font-family: var(--ff-serif);
      font-weight: 400;
      font-size: clamp(3rem, 4.5vw, 5.5rem);
      line-height: 1.0;
      letter-spacing: -0.02em;
      color: var(--bone);
    }

    .hero-headline em {
      font-style: italic;
      color: var(--clay);
    }

    .hero-desc {
      margin-top: 1.75rem;
      font-size: 0.9rem;
      font-weight: 300;
      line-height: 1.8;
      color: rgba(247,243,238,0.5);
      max-width: 30ch;
      letter-spacing: 0.01em;
    }

    /* CTA row */
    .hero-cta {
      margin-top: 3rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      align-items: flex-start;
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 0.875rem;
      padding: 1.05rem 2.2rem;
      background: var(--clay);
      color: var(--charcoal);
      font-family: var(--ff-sans);
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      transition: background 0.3s var(--silk), transform 0.25s var(--silk);
    }

    .btn-primary:hover { background: var(--clay-deep); color: var(--white); transform: translateY(-1px); }
    .btn-primary svg { width: 13px; height: 13px; transition: transform 0.25s var(--silk); }
    .btn-primary:hover svg { transform: translateX(4px); }

    .hero-ghost-link {
      font-size: 0.62rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(247,243,238,0.38);
      border-bottom: 1px solid rgba(247,243,238,0.18);
      padding-bottom: 2px;
      transition: color 0.3s, border-color 0.3s;
    }

    .hero-ghost-link:hover { color: var(--clay); border-color: var(--clay); }

    /* Floating category pills bottom-left of scene */
    .hero-pills {
      position: absolute;
      bottom: 2.5rem;
      left: 2rem;
      z-index: 4;
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    .pill {
      font-family: var(--ff-sans);
      font-size: 0.58rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 0.45rem 1rem;
      background: rgba(30,27,24,0.55);
      backdrop-filter: blur(8px);
      color: rgba(247,243,238,0.75);
      border: 1px solid rgba(196,168,130,0.2);
      transition: background 0.3s, color 0.3s;
      cursor: pointer;
    }

    .pill:hover, .pill.active {
      background: var(--clay);
      color: var(--charcoal);
      border-color: var(--clay);
    }

    /* Vertical room counter right edge */
    .hero-counter {
      position: absolute;
      right: 2rem;
      top: 50%;
      transform: translateY(-50%);
      z-index: 4;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.25rem;
    }

    .hero-counter-num {
      font-family: var(--ff-serif);
      font-size: 2.2rem;
      font-weight: 400;
      color: var(--bone);
      line-height: 1;
    }

    .hero-counter-label {
      font-size: 0.55rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: rgba(247,243,238,0.3);
      writing-mode: vertical-lr;
    }

    .hero-counter-divider {
      width: 1px;
      height: 40px;
      background: rgba(196,168,130,0.25);
    }

    @media (max-width: 860px) {
      .hero { grid-template-columns: 1fr; min-height: auto; }
      .hero-scene { height: 55vw; min-height: 260px; }
      .hero-copy::before { display: none; }
      .hero-copy { padding: 3rem 1.5rem; }
      .hero-counter { display: none; }
    }

    /* ═══════════════════════════════════════════════
       MARQUEE
    ═══════════════════════════════════════════════ */
    .marquee {
      background: var(--linen);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      padding: 0.9rem 0;
      overflow: hidden;
      white-space: nowrap;
    }

    .marquee-track {
      display: inline-block;
      animation: ticker 30s linear infinite;
    }

    .marquee-track span {
      font-size: 0.58rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--dust);
      padding: 0 2rem;
    }

    .marquee-track .sep { color: var(--clay); padding: 0; }

    @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* ═══════════════════════════════════════════════
       SECTION SHARED
    ═══════════════════════════════════════════════ */
    .sec { padding: clamp(4rem, 8vw, 8rem) 0; }

    .wrap {
      width: 100%;
      max-width: 1380px;
      margin: 0 auto;
      padding: 0 clamp(1.25rem, 4vw, 3.5rem);
    }

    .sec-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: clamp(2rem, 4vw, 4rem);
    }

    .sec-title {
      font-family: var(--ff-serif);
      font-size: clamp(2rem, 3.5vw, 3.25rem);
      font-weight: 400;
      line-height: 1.05;
      letter-spacing: -0.01em;
      margin-top: 0.6rem;
    }

    .sec-title em { font-style: italic; color: var(--rust); }

    .see-all {
      font-size: 0.6rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--dust);
      border-bottom: 1px solid var(--border-md);
      padding-bottom: 2px;
      white-space: nowrap;
      transition: color 0.3s, border-color 0.3s;
    }

    .see-all:hover { color: var(--rust); border-color: var(--rust); }

    /* ═══════════════════════════════════════════════
       DECOR SHOWCASE  — asymmetric bento grid
    ═══════════════════════════════════════════════ */
    .decor-bento {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 2px;
      background: var(--border);
    }

    .bento-cell {
      position: relative;
      overflow: hidden;
      background: var(--linen);
      cursor: pointer;
    }

    .bento-cell--tall {
      grid-row: span 2;
    }

    .bento-img {
      width: 100%;
      height: 100%;
      min-height: 260px;
      object-fit: cover;
      display: block;
      transition: transform 0.9s var(--silk);
    }

    .bento-cell:hover .bento-img { transform: scale(1.04); }

    /* SVG placeholder scene inside each cell */
    .bento-scene {
      width: 100%;
      display: block;
    }

    .bento-tall .bento-scene { height: 600px; }
    .bento-sm .bento-scene   { height: 296px; }

    /* Overlay info */
    .bento-info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 1.5rem 1.4rem 1.4rem;
      background: linear-gradient(to top, rgba(30,27,24,0.72) 0%, transparent 100%);
      transform: translateY(4px);
      transition: transform 0.4s var(--silk);
    }

    .bento-cell:hover .bento-info { transform: translateY(0); }

    .bento-cat {
      font-size: 0.55rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--clay);
      margin-bottom: 0.35rem;
    }

    .bento-name {
      font-family: var(--ff-serif);
      font-size: 1.2rem;
      font-weight: 400;
      color: var(--bone);
      line-height: 1.15;
    }

    .bento-price {
      margin-top: 0.5rem;
      font-size: 0.8rem;
      color: rgba(247,243,238,0.65);
    }

    /* "Shop" arrow that appears on hover */
    .bento-arrow {
      position: absolute;
      bottom: 1rem;
      right: 1rem;
      width: 36px;
      height: 36px;
      background: rgba(30,27,24,0.6);
      backdrop-filter: blur(6px);
      border: 1px solid rgba(196,168,130,0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: scale(0.85);
      transition: opacity 0.3s, transform 0.35s var(--silk);
    }

    .bento-cell:hover .bento-arrow { opacity: 1; transform: scale(1); }

    .bento-arrow svg { width: 14px; height: 14px; }

    @media (max-width: 900px) {
      .decor-bento {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
      }
      .bento-cell--tall { grid-row: span 1; }
      .bento-tall .bento-scene { height: 340px; }
    }

    @media (max-width: 560px) {
      .decor-bento { grid-template-columns: 1fr; }
    }

    /* ═══════════════════════════════════════════════
       ROOM BANNER — full-width cinematic stripe
    ═══════════════════════════════════════════════ */
    .room-banner {
      position: relative;
      height: clamp(280px, 42vw, 580px);
      overflow: hidden;
      background: var(--charcoal);
    }

    .room-banner-scene {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .room-banner-overlay {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to right, rgba(30,27,24,0.88) 0%, rgba(30,27,24,0.55) 45%, transparent 75%);
      z-index: 2;
    }

    .room-banner-content {
      position: relative;
      z-index: 3;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 clamp(2rem, 6vw, 6rem);
      max-width: 560px;
    }

    .room-banner-content .eyebrow { margin-bottom: 1.25rem; }

    .room-banner-title {
      font-family: var(--ff-serif);
      font-size: clamp(2.2rem, 4.5vw, 4.5rem);
      font-weight: 400;
      line-height: 1.0;
      color: var(--bone);
      letter-spacing: -0.015em;
    }

    .room-banner-title em { font-style: italic; color: var(--clay); }

    .room-banner-sub {
      margin-top: 1.25rem;
      font-size: 0.875rem;
      font-weight: 300;
      color: rgba(247,243,238,0.52);
      line-height: 1.7;
      max-width: 34ch;
    }

    .room-banner-cta {
      margin-top: 2.5rem;
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.95rem 2rem;
      background: transparent;
      border: 1px solid rgba(196,168,130,0.5);
      color: var(--bone);
      font-size: 0.62rem;
      font-weight: 400;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      transition: background 0.3s, border-color 0.3s;
    }

    .room-banner-cta:hover {
      background: var(--clay);
      border-color: var(--clay);
      color: var(--charcoal);
    }

    /* Measurement annotations (decorative) */
    .banner-annotations {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
    }

    /* ═══════════════════════════════════════════════
       SUBCATEGORY TILES
    ═══════════════════════════════════════════════ */
    .sub-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--border);
    }

    @media (max-width: 900px) { .sub-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 500px) { .sub-grid { grid-template-columns: 1fr 1fr; } }

    .sub-tile {
      background: var(--bone);
      padding: 2rem 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      cursor: pointer;
      transition: background 0.3s;
      position: relative;
      overflow: hidden;
    }

    .sub-tile:hover { background: var(--white); }

    .sub-tile-icon {
      width: 48px;
      height: 48px;
      flex-shrink: 0;
    }

    .sub-tile-name {
      font-family: var(--ff-serif);
      font-size: 1.05rem;
      font-weight: 400;
      line-height: 1.2;
      transition: color 0.3s;
    }

    .sub-tile:hover .sub-tile-name { color: var(--rust); }

    .sub-tile-count {
      font-size: 0.6rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--dust);
    }

    /* Hover arrow */
    .sub-tile-arrow {
      position: absolute;
      bottom: 1.25rem;
      right: 1.25rem;
      opacity: 0;
      transform: translateX(-6px);
      transition: opacity 0.3s, transform 0.3s var(--silk);
      color: var(--rust);
      font-size: 1rem;
    }

    .sub-tile:hover .sub-tile-arrow { opacity: 1; transform: translateX(0); }

    /* ═══════════════════════════════════════════════
       FRAGRANCE SHELF  — horizontal scroll strip
    ═══════════════════════════════════════════════ */
    .shelf-section {
      background: var(--linen);
      padding: clamp(3rem, 6vw, 6rem) 0;
    }

    .shelf-scroll-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding: 0 clamp(1.25rem, 4vw, 3.5rem);
    }

    .shelf-scroll-wrap::-webkit-scrollbar { display: none; }

    .shelf-track {
      display: flex;
      gap: 1px;
      background: var(--border);
      width: max-content;
    }

    .shelf-card {
      width: 240px;
      flex-shrink: 0;
      background: var(--bone);
      overflow: hidden;
      cursor: pointer;
      position: relative;
      transition: background 0.3s;
    }

    .shelf-card:hover { background: var(--white); }

    .shelf-img {
      aspect-ratio: 4/5;
      overflow: hidden;
      background: var(--clay-pale);
      position: relative;
    }

    .shelf-shimmer {
      position: absolute;
      top: 0; left: -110%; width: 55%; height: 100%;
      background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
      transition: left 0.65s var(--silk);
      pointer-events: none;
    }

    .shelf-card:hover .shelf-shimmer { left: 150%; }

    .shelf-body {
      padding: 1rem 1.1rem 1.25rem;
    }

    .shelf-sub {
      font-size: 0.58rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--dust);
      margin-bottom: 0.3rem;
    }

    .shelf-name {
      font-family: var(--ff-serif);
      font-size: 1.05rem;
      font-weight: 400;
      line-height: 1.15;
      transition: color 0.3s;
    }

    .shelf-card:hover .shelf-name { color: var(--rust); }

    .shelf-price {
      margin-top: 0.75rem;
      font-family: var(--ff-serif);
      font-size: 0.95rem;
      color: var(--clay-deep);
    }

    /* add btn */
    .shelf-add {
      position: absolute;
      bottom: 1rem;
      right: 1rem;
      width: 32px;
      height: 32px;
      border: 1px solid var(--border-md);
      background: transparent;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      opacity: 0;
      transform: scale(0.8);
      transition: opacity 0.3s, transform 0.3s var(--silk), background 0.2s;
    }

    .shelf-card:hover .shelf-add { opacity: 1; transform: scale(1); }
    .shelf-add:hover { background: var(--ink); border-color: var(--ink); }
    .shelf-add:hover svg path { stroke: var(--bone); }
    .shelf-add svg { width: 14px; height: 14px; }
    .shelf-add svg path { stroke: var(--ink); transition: stroke 0.2s; }

    .shelf-nav {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .shelf-nav-btn {
      width: 38px;
      height: 38px;
      border: 1px solid var(--border-md);
      border-radius: 999px;
      background: var(--bone);
      color: var(--ink);
      font-family: var(--ff-serif);
      font-weight: 700;
      font-size: 1rem;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
    }

    .shelf-nav-btn:hover,
    .shelf-nav-btn:focus-visible {
      background: var(--rust);
      color: var(--white);
      box-shadow: 0 4px 10px rgba(45, 35, 28, 0.2);
      outline: none;
    }

    .shelf-nav-btn:active {
      transform: scale(0.93);
    }

    .shelf-nav-btn[disabled] {
      opacity: 0.4;
      cursor: not-allowed;
      background: var(--border);
      color: var(--dust);
    }

    /* ═══════════════════════════════════════════════
       STORY EDITORIAL ROW
    ═══════════════════════════════════════════════ */
    .story-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 520px;
    }

    .story-img-col {
      position: relative;
      overflow: hidden;
      background: var(--clay-pale);
    }

    .story-copy-col {
      background: var(--charcoal);
      padding: clamp(3rem, 6vw, 6rem);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .story-quote {
      font-family: var(--ff-serif);
      font-size: clamp(1.4rem, 2.5vw, 2rem);
      font-weight: 400;
      font-style: italic;
      line-height: 1.45;
      color: var(--clay);
      margin: 1.5rem 0;
    }

    .story-body {
      font-size: 0.875rem;
      font-weight: 300;
      line-height: 1.85;
      color: rgba(247,243,238,0.52);
      max-width: 38ch;
    }

    .story-link {
      margin-top: 2.5rem;
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      font-size: 0.62rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--clay);
      transition: gap 0.3s;
    }

    .story-link:hover { gap: 1.25rem; }
    .story-link svg { width: 18px; height: 18px; }

    @media (max-width: 760px) {
      .story-row { grid-template-columns: 1fr; }
      .story-img-col { height: 55vw; min-height: 240px; }
    }

    /* ═══════════════════════════════════════════════
       DEMO NOTICE
    ═══════════════════════════════════════════════ */
    .demo-bar {
      background: var(--charcoal);
      padding: 0.65rem 1rem;
      text-align: center;
      font-size: 0.6rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(247,243,238,0.35);
    }

    /* ═══════════════════════════════════════════════
       HEADER
    ═══════════════════════════════════════════════ */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 200;
      background: rgba(247,243,238,0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }

    /* Top utility bar */
    .header-topbar {
      background: var(--charcoal);
      padding: 0.45rem 0;
      text-align: center;
    }

    .header-topbar span {
      font-size: 0.58rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(196,168,130,0.65);
    }

    .header-topbar a {
      color: var(--clay);
      border-bottom: 1px solid rgba(196,168,130,0.35);
      padding-bottom: 1px;
      margin-left: 0.5rem;
      transition: color 0.2s;
    }

    .header-topbar a:hover { color: var(--clay-pale); }

    /* Main nav row */
    .header-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 clamp(1.25rem, 4vw, 3.5rem);
      height: 68px;
    }

    /* Wordmark / logo */
    .header-logo {
      display: flex;
      flex-direction: column;
      line-height: 1;
    }

    .header-logo-main {
      font-family: var(--ff-serif);
      font-size: 1.15rem;
      font-weight: 400;
      letter-spacing: 0.06em;
      color: var(--ink);
    }

    .header-logo-sub {
      font-size: 0.5rem;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--clay-deep);
      margin-top: 2px;
    }

    /* Center nav links */
    .header-links {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      list-style: none;
    }

    .header-links a {
      font-size: 0.65rem;
      font-weight: 400;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink);
      position: relative;
      padding-bottom: 3px;
      transition: color 0.25s;
    }

    /* Underline grow on hover */
    .header-links a::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 1px;
      background: var(--clay-deep);
      transition: width 0.3s var(--silk);
    }

    .header-links a:hover { color: var(--clay-deep); }
    .header-links a:hover::after { width: 100%; }

    /* Active state */
    .header-links a.active { color: var(--rust); }
    .header-links a.active::after { width: 100%; background: var(--rust); }

    /* Dropdown indicator */
    .has-drop > a::before {
      content: "›";
      position: absolute;
      right: -0.9rem;
      top: -1px;
      font-size: 0.7rem;
      color: var(--dust);
      transition: transform 0.25s;
    }

    /* Right: icon cluster */
    .header-icons {
      display: flex;
      align-items: center;
      gap: 1.25rem;
    }

    .header-icon-btn {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      cursor: pointer;
      position: relative;
      color: var(--ink);
      transition: color 0.25s;
    }

    .header-icon-btn:hover { color: var(--rust); }

    .header-icon-btn svg {
      width: 18px;
      height: 18px;
    }

    /* Cart badge */
.cart-trigger {
  position: relative;
}

.cart-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--rust);
  border: 2px solid var(--bone);
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 1;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  white-space: nowrap;
}

.cart-badge.is-empty {
  opacity: 0.72;
}

@media (max-width: 860px) {
  .cart-badge {
    top: -3px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font-size: 0.52rem;
  }
}

    /* Shop Now CTA */
    .header-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.65rem 1.4rem;
      background: var(--charcoal);
      color: var(--bone);
      font-size: 0.6rem;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      transition: background 0.3s, color 0.3s;
    }

    .header-cta:hover { background: var(--clay-deep); color: var(--white); }

    /* Mobile hamburger */
    .header-burger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
      background: none;
      border: none;
    }

    .header-burger span {
      display: block;
      width: 22px;
      height: 1px;
      background: var(--ink);
      transition: transform 0.3s, opacity 0.3s;
    }

    .header-burger.open span:nth-child(1) {
      transform: translateY(6px) rotate(45deg);
    }

    .header-burger.open span:nth-child(2) {
      opacity: 0;
      transform: translateX(-8px);
    }

    .header-burger.open span:nth-child(3) {
      transform: translateY(-6px) rotate(-45deg);
    }

    .header-links.mobile-open {
      display: flex !important;
      flex-direction: column;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--bone);
      border-top: 1px solid var(--border);
      z-index: 999;
    }

    .header-links.mobile-open li {
      margin: 0;
    }

    .header-links.mobile-open li a {
      display: block;
      width: 100%;
      padding: 0.85rem 1rem;
      border-bottom: 1px solid rgba(30,27,24,0.08);
    }

    .header-search {
      display: none;
      position: absolute;
      inset: 70px 1rem 0 1rem;
      background: rgba(255, 255, 255, 0.97);
      border: 1px solid var(--border);
      padding: 0.5rem;
      border-radius: 6px;
      z-index: 1100;
      box-shadow: 0 8px 24px rgba(30, 27, 24, 0.18);
      align-items: center;
      gap: 0.5rem;
    }

    .header-search.open {
      display: flex;
    }

    .header-search input[type="search"] {
      flex: 1;
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 0.5rem 0.75rem;
      font-size: 0.9rem;
    }

    .header-search-submit,
    .header-search-close {
      background: var(--rust);
      border: none;
      color: var(--bone);
      cursor: pointer;
      padding: 0.45rem 0.7rem;
      border-radius: 4px;
      font-weight: 600;
      font-size: 0.85rem;
    }

    .header-search-close {
      background: var(--ink);
    }

    /* Thin category accent bar below nav */
    .header-accent {
      height: 2px;
      background: linear-gradient(to right, var(--clay) 0%, var(--rust) 40%, var(--clay-deep) 80%, transparent 100%);
      opacity: 0.35;
    }

    @media (max-width: 860px) {
      .header-links { display: none; }
      .header-cta   { display: none; }
      .header-burger { display: flex; }
      .header-icons { gap: 0.75rem; }
    }

    /* ═══════════════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════════════ */
    .site-footer {
      background: var(--charcoal);
      color: var(--bone);
    }

    /* Newsletter stripe */
    .footer-newsletter {
      background: var(--ink);
      border-bottom: 1px solid rgba(196,168,130,0.1);
      padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3.5rem);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      flex-wrap: wrap;
    }

    .footer-nl-copy .eyebrow { margin-bottom: 0.5rem; }

    .footer-nl-title {
      font-family: var(--ff-serif);
      font-size: clamp(1.4rem, 2.5vw, 2rem);
      font-weight: 400;
      color: var(--bone);
      line-height: 1.1;
    }

    .footer-nl-title em { font-style: italic; color: var(--clay); }

    .footer-nl-form {
      display: flex;
      gap: 0;
      flex: 0 0 auto;
      max-width: 420px;
      width: 100%;
    }

    .footer-nl-input {
      flex: 1;
      padding: 0.9rem 1.25rem;
      background: rgba(247,243,238,0.06);
      border: 1px solid rgba(196,168,130,0.2);
      border-right: none;
      color: var(--bone);
      font-family: var(--ff-sans);
      font-size: 0.825rem;
      font-weight: 300;
      outline: none;
      transition: border-color 0.3s;
    }

    .footer-nl-input::placeholder { color: rgba(196,168,130,0.4); }
    .footer-nl-input:focus { border-color: rgba(196,168,130,0.5); }

    .footer-nl-btn {
      padding: 0.9rem 1.6rem;
      background: var(--clay);
      border: 1px solid var(--clay);
      color: var(--charcoal);
      font-family: var(--ff-sans);
      font-size: 0.6rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.3s, border-color 0.3s;
    }

    .footer-nl-btn:hover { background: var(--clay-deep); border-color: var(--clay-deep); color: var(--white); }

    /* Main footer grid */
    .footer-body {
      padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3.5rem);
      display: grid;
      grid-template-columns: 1.8fr 1fr 1fr 1fr;
      gap: clamp(2rem, 4vw, 5rem);
    }

    @media (max-width: 960px) {
      .footer-body { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
    }
    @media (max-width: 540px) {
      .footer-body { grid-template-columns: 1fr; }
      .footer-newsletter { flex-direction: column; }
      .footer-nl-form { max-width: 100%; }
    }

    /* Brand column */
    .footer-brand-name {
      font-family: var(--ff-serif);
      font-size: 1.4rem;
      font-weight: 400;
      letter-spacing: 0.04em;
      color: var(--bone);
      margin-bottom: 0.25rem;
    }

    .footer-brand-tagline {
      font-size: 0.55rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: rgba(196,168,130,0.45);
      margin-bottom: 1.25rem;
    }

    .footer-brand-desc {
      font-size: 0.8rem;
      font-weight: 300;
      line-height: 1.8;
      color: rgba(247,243,238,0.38);
      max-width: 28ch;
    }

    /* Location block */
    .footer-location {
      margin-top: 1.5rem;
      display: flex;
      gap: 0.75rem;
      align-items: flex-start;
    }

    .footer-location svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      margin-top: 2px;
      opacity: 0.4;
    }

    .footer-location p {
      font-size: 0.75rem;
      font-weight: 300;
      line-height: 1.6;
      color: rgba(247,243,238,0.32);
    }

    /* Socials row */
    .footer-socials {
      display: flex;
      gap: 0.75rem;
      margin-top: 1.75rem;
    }

    .footer-social-btn {
      width: 32px;
      height: 32px;
      border: 1px solid rgba(196,168,130,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.3s, background 0.3s;
      cursor: pointer;
    }

    .footer-social-btn:hover {
      border-color: var(--clay);
      background: rgba(196,168,130,0.1);
    }

    .footer-social-btn svg { width: 13px; height: 13px; opacity: 0.55; transition: opacity 0.3s; }
    .footer-social-btn:hover svg { opacity: 1; }

    /* Footer nav columns */
    .footer-col-title {
      font-size: 0.58rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(196,168,130,0.5);
      margin-bottom: 1.5rem;
      font-weight: 400;
    }

    .footer-col-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }

    .footer-col-links a {
      font-size: 0.82rem;
      font-weight: 300;
      color: rgba(247,243,238,0.45);
      transition: color 0.25s;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }

    .footer-col-links a:hover { color: var(--clay); }

    /* Footer divider & bottom bar */
    .footer-divider {
      height: 1px;
      background: rgba(196,168,130,0.08);
      margin: 0 clamp(1.25rem, 4vw, 3.5rem);
    }

    .footer-bottom {
      padding: 1.4rem clamp(1.25rem, 4vw, 3.5rem);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .footer-bottom-left {
      font-size: 0.6rem;
      letter-spacing: 0.12em;
      color: rgba(247,243,238,0.22);
    }

    .footer-bottom-links {
      display: flex;
      gap: 2rem;
    }

    .footer-bottom-links a {
      font-size: 0.6rem;
      letter-spacing: 0.1em;
      color: rgba(247,243,238,0.22);
      transition: color 0.25s;
    }

    .footer-bottom-links a:hover { color: var(--clay); }

    /* WhatsApp float */
    .whatsapp-float {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      z-index: 300;
      width: 48px;
      height: 48px;
      background: #25d366;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 20px rgba(37,211,102,0.3);
      transition: transform 0.3s var(--silk), box-shadow 0.3s;
      cursor: pointer;
    }

    .whatsapp-float:hover {
      transform: translateY(-2px) scale(1.05);
      box-shadow: 0 8px 28px rgba(37,211,102,0.4);
    }

    .whatsapp-float svg { width: 24px; height: 24px; }

    


/* ── Two-column layout ──────────────────────────────────────────── */
.detail-wrap {
  display: grid; grid-template-columns: 1fr 1fr;
  max-width: 1380px; margin: 0 auto;
  padding: clamp(2rem,4vw,3.5rem) clamp(1.25rem,4vw,3.5rem);
  gap: clamp(2.5rem,5vw,5.5rem); align-items: start;
}
@media(max-width:860px) { .detail-wrap { grid-template-columns: 1fr; } }

/* ── Gallery ────────────────────────────────────────────────────── */
.detail-gallery { position: sticky; top: 90px; }

.detail-main-img {
  aspect-ratio: 4/5; background: var(--clay-pale);
  overflow: hidden; position: relative; cursor: zoom-in;
}
.detail-main-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.8s var(--silk);
}
.detail-main-img:hover img { transform: scale(1.04); }

/* Zoom hint */
.detail-main-img::after {
  content: "↔  Zoom";
  position: absolute; bottom: 1rem; right: 1rem;
  font-size: 0.5rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(247,243,238,0.65); background: rgba(30,27,24,0.52);
  backdrop-filter: blur(4px); padding: 0.3rem 0.65rem;
  opacity: 0; transition: opacity 0.3s;
}
.detail-main-img:hover::after { opacity: 1; }

/* Placeholder when no S3 image */
.detail-img-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center;
  justify-content: center; background: var(--clay-pale);
}
.detail-img-placeholder svg { width: 100%; height: 100%; }

/* Badge on main image */
.detail-badge {
  position: absolute; top: 0; left: 0; z-index: 2;
  font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.38rem 0.85rem; color: var(--bone);
}
.detail-badge.new        { background: var(--sage); }
.detail-badge.bestseller { background: var(--rust); }
.detail-badge.limited    { background: var(--charcoal); }
.detail-badge.sale       { background: var(--clay-deep); }

/* Out of stock overlay */
.detail-oos-overlay {
  position: absolute; inset: 0; background: rgba(247,243,238,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 3;
}
.detail-oos-overlay span {
  font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--dust); border: 1px solid var(--border-md);
  padding: 0.4rem 1rem; background: var(--bone);
}

/* Thumbnails */
.detail-thumbs {
  display: flex; gap: 0.5rem; margin-top: 0.7rem;
  overflow-x: auto; scrollbar-width: none;
}
.detail-thumbs::-webkit-scrollbar { display: none; }

.detail-thumb {
  width: 70px; height: 88px; flex-shrink: 0; overflow: hidden;
  border: 2px solid transparent; cursor: pointer;
  background: var(--clay-pale); transition: border-color 0.2s;
}
.detail-thumb.active  { border-color: var(--rust); }
.detail-thumb:hover   { border-color: var(--clay-deep); }
.detail-thumb img     { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Info panel ─────────────────────────────────────────────────── */
.detail-info { padding-top: 0.25rem; }

.detail-name {
  font-family: var(--ff-serif); font-size: clamp(2rem,3.5vw,3rem);
  font-weight: 400; line-height: 1.05; letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}
.detail-sku {
  font-size: 0.65rem; font-weight: 300; color: var(--dust);
  letter-spacing: 0.1em; margin-bottom: 1rem;
}

/* Stars */
.detail-rating { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; }
.stars { display: flex; gap: 2px; }
.star { width: 12px; height: 12px; }
.star-full  { color: var(--clay); }
.star-empty { color: var(--border-md); }
.rating-count { font-size: 0.62rem; color: var(--dust); }

/* Price block */
.detail-price-block {
  padding: 1.2rem 0; margin-bottom: 1.5rem;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap;
}
.detail-price   { font-family: var(--ff-serif); font-size: 2.1rem; font-weight: 400; color: var(--ink); }
.detail-compare { font-size: 1rem; text-decoration: line-through; color: var(--dust); }
.detail-saving  {
  font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bone); background: var(--rust); padding: 0.25rem 0.6rem; align-self: center;
}

/* Short description */
.detail-desc {
  font-size: 0.875rem; font-weight: 300; line-height: 1.85;
  color: var(--dust); margin-bottom: 1.1rem; max-width: 46ch;
}

/* Tags */
.detail-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.detail-tag {
  font-size: 0.53rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.26rem 0.62rem; border: 1px solid var(--border-md); color: var(--dust);
}

/* Variant options */
.detail-option-group { margin-bottom: 1.5rem; }
.detail-option-label {
  font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dust); margin-bottom: 0.65rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.detail-option-selected { color: var(--ink); }
.detail-options { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.detail-opt-btn {
  padding: 0.48rem 1rem; border: 1px solid var(--border-md); background: none;
  font-size: 0.68rem; color: var(--ink); transition: all 0.2s; white-space: nowrap;
}
.detail-opt-btn.active     { border-color: var(--rust); color: var(--rust); background: rgba(184,92,56,0.05); }
.detail-opt-btn:hover:not(.active):not(.sold-out) { border-color: var(--clay-deep); }
.detail-opt-btn.sold-out   { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }

/* Quantity + ATC row */
.detail-action-row {
  display: flex; gap: 0.75rem; margin-bottom: 1.75rem; align-items: stretch; flex-wrap: wrap;
}
.qty-control { display: flex; align-items: stretch; border: 1px solid var(--border-md); }
.qty-btn {
  width: 42px; background: none; border: none;
  font-size: 1.1rem; color: var(--ink); transition: background 0.2s; cursor: pointer;
}
.qty-btn:hover { background: var(--linen); }
.qty-val {
  min-width: 42px; text-align: center; font-size: 0.875rem;
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  padding: 0 0.5rem; line-height: 48px; height: 48px;
}
.btn-atc {
  flex: 1; min-width: 160px; height: 48px; background: var(--charcoal); color: var(--bone);
  border: none; font-size: 0.62rem; font-weight: 400; letter-spacing: 0.22em;
  text-transform: uppercase; display: flex; align-items: center; justify-content: center;
  gap: 0.75rem; transition: background 0.3s; cursor: pointer;
}
.btn-atc:hover { background: var(--clay-deep); }
.btn-atc.oos   { background: var(--dust); cursor: not-allowed; }
.btn-atc svg   { width: 16px; height: 16px; }
.btn-wishlist {
  width: 48px; height: 48px; border: 1px solid var(--border-md); background: none;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.25s, background 0.25s; cursor: pointer;
}
.btn-wishlist:hover { border-color: var(--rust); background: rgba(184,92,56,0.05); }
.btn-wishlist svg   { width: 18px; height: 18px; }

/* WhatsApp enquiry */
.btn-whatsapp {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 1.25rem; border: 1px solid rgba(37,211,102,0.4);
  background: rgba(37,211,102,0.06); color: #1a7a3c;
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background 0.2s, border-color 0.2s;
}
.btn-whatsapp:hover { background: rgba(37,211,102,0.12); border-color: rgba(37,211,102,0.6); }
.btn-whatsapp svg { width: 16px; height: 16px; }

/* Trust strip */
.detail-trust {
  display: grid; grid-template-columns: repeat(3,1fr);
  border: 1px solid var(--border); margin-bottom: 2.5rem;
}
.trust-item {
  padding: 1rem 0.9rem; border-right: 1px solid var(--border);
  display: flex; align-items: center; gap: 0.6rem;
}
.trust-item:last-child { border-right: none; }
.trust-item svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--clay-deep); }
.trust-title { font-size: 0.58rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.trust-sub   { font-size: 0.6rem; font-weight: 300; color: var(--dust); margin-top: 1px; }

/* Accordion */
.detail-tabs { border-top: 1px solid var(--border); }
.detail-tab-item { border-bottom: 1px solid var(--border); }
.detail-tab-trigger {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 0; width: 100%; background: none; border: none;
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); text-align: left; cursor: pointer;
}
.detail-tab-trigger svg { width: 14px; height: 14px; transition: transform 0.3s var(--silk); flex-shrink: 0; }
.detail-tab-trigger.open svg { transform: rotate(45deg); }
.detail-tab-body { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--silk); }
.detail-tab-body.open { max-height: 600px; padding-bottom: 1.25rem; }
.detail-tab-body p {
  font-size: 0.82rem; font-weight: 300; line-height: 1.85; color: var(--dust);
}
.detail-tab-body ul { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.detail-tab-body ul li {
  font-size: 0.8rem; font-weight: 300; color: var(--dust);
  display: flex; gap: 0.75rem;
}
.detail-tab-body ul li::before { content: "—"; color: var(--clay); flex-shrink: 0; }

/* ── Related products rail ──────────────────────────────────────── */
.related-section {
  background: var(--linen); border-top: 1px solid var(--border);
  padding: clamp(3rem,5vw,5rem) 0;
}
.related-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 clamp(1.25rem,4vw,3.5rem) 2rem;
}
.related-title {
  font-family: var(--ff-serif); font-size: clamp(1.6rem,2.5vw,2.25rem); font-weight: 400;
}
.related-title em { font-style: italic; color: var(--rust); }
.related-see-all {
  font-size: 0.57rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dust); border-bottom: 1px solid var(--border-md); padding-bottom: 2px;
  transition: color 0.25s, border-color 0.25s;
}
.related-see-all:hover { color: var(--rust); border-color: var(--rust); }

/* Horizontal scroll rail */
.related-rail {
  display: flex; gap: 1px; background: var(--border);
  overflow-x: auto; padding: 0 clamp(1.25rem,4vw,3.5rem);
  scrollbar-width: none;
}
.related-rail::-webkit-scrollbar { display: none; }

.rcard {
  width: 225px; flex-shrink: 0; background: var(--bone);
  position: relative; overflow: hidden; transition: background 0.3s;
  display: block; text-decoration: none; color: inherit;
}
.rcard:hover { background: var(--white); }
.rcard-img {
  aspect-ratio: 3/4; overflow: hidden; position: relative; background: var(--clay-pale);
}
.rcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s var(--silk); }
.rcard:hover .rcard-img img { transform: scale(1.04); }
.rcard-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center;
  justify-content: center; background: var(--clay-pale);
}
.rcard-shimmer {
  position: absolute; inset: 0; left: -110%; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transition: left 0.7s var(--silk);
}
.rcard:hover .rcard-shimmer { left: 150%; }
.rcard-body { padding: 0.9rem 1rem 1.2rem; }
.rcard-cat {
  font-size: 0.53rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dust); margin-bottom: 0.25rem;
}
.rcard-name {
  font-family: var(--ff-serif); font-size: 1rem; font-weight: 400;
  line-height: 1.2; transition: color 0.25s;
}
.rcard:hover .rcard-name { color: var(--rust); }
.rcard-price {
  font-family: var(--ff-serif); font-size: 0.9rem; color: var(--clay-deep); margin-top: 0.5rem;
}
</style>