.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .material-symbols-outlined.fill {
            font-variation-settings: 'FILL' 1;
        }
        /* Marquee Animation */
        .marquee {
            white-space: nowrap;
            overflow: hidden;
            display: flex;
            align-items: center;
        }
        .marquee-content {
            display: flex;
            animation: marquee 20s linear infinite;
        }
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Mobile bottom-sheet menu */
        .menu-backdrop {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .menu-backdrop.open {
            opacity: 1;
            pointer-events: auto;
        }
        .menu-sheet {
            transform: translateY(100%);
            transition: transform 0.44s cubic-bezier(0.32, 0.72, 0, 1);
        }
        .menu-sheet.open {
            transform: translateY(0);
        }
        .menu-link {
            display: flex;
            align-items: center;
            min-height: 44px;
            border-bottom: 1px solid #ebdfd0;
            color: #1d1c1c;
            font-family: 'Bricolage Grotesque', sans-serif;
            font-weight: 700;
            font-size: 15px;
            transition: color 0.18s ease;
        }
        .menu-link:hover, .menu-link:active { color: #dd733f; }

        /* Cart sheet */
        .cart-sheet {
            transform: translateY(100%);
            transition: transform 0.44s cubic-bezier(0.32, 0.72, 0, 1);
        }
        .cart-sheet.open { transform: translateY(0); }
        .note-wrapper {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .note-wrapper.open { grid-template-rows: 1fr; }
        .note-body { overflow: hidden; min-height: 0; }
        #note-chevron { transition: transform 0.35s ease; }

        /* Review Carousel */
        .review-stage {
            position: relative;
            overflow: hidden;
            min-height: 130px;
            display: flex;
            align-items: center;
        }
        .review-card {
            position: absolute;
            width: 100%;
            top: 0; left: 0; bottom: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transform: translateX(100%);
            transition: transform 0.52s cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
        }
        .review-card.active {
            transform: translateX(0);
            pointer-events: auto;
        }
        .review-card.exit {
            transform: translateX(-100%);
        }
        .review-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #d6c9b8;
            border: none;
            cursor: pointer;
            transition: background 0.3s, transform 0.3s;
            padding: 0;
        }
        .review-dot.active {
            background: #dd733f;
            transform: scale(1.25);
        }
    


    body {
      min-height: 0;
    }

    /* Navbar scroll states — background/shadow/blur are JS-driven inline styles */
    #announcement-bar { will-change: transform; }
    #navbar           { will-change: top, background-color, box-shadow; }

    /* Best Sellers: filter pills */
    .bs-filter-btn {
      font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
      padding: 7px 16px; border-radius: 9999px;
      color: #262015; background: transparent;
      border: 1.5px solid transparent;
      transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
      cursor: pointer; white-space: nowrap;
    }
    .bs-filter-btn:hover { background: #f1f0e9; border-color: #ebdfd0; }
    .bs-filter-btn.active-filter { background: #dd733f; color: #fff; border-color: #dd733f; }

    /* Best Sellers: capybara swatches */
    .bs-sw-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; flex-shrink: 0; }
    .bs-sw-wrap::after { content: ''; width: 77%; height: 2px; border-radius: 1px; background: transparent; transition: background 0.18s; margin-left: 2px; }
    .bs-sw-wrap.bs-sw-sel::after { background: #dd733f; }
    .bs-sw-wrap:hover .bs-sw { transform: scale(1.15); }
    .bs-sw { display: block; width: 22px; height: 22px; overflow: visible; transition: transform 0.15s; }

    /* Why CapyHome Section */
    .why-us-section {
      background-color: #ebdfd0;
      position: relative;
      padding: 32px 0;
      overflow: hidden;
    }
    .why-us-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 64px;
      position: relative;
      z-index: 1;
    }
    .why-us-split {
      display: flex;
      align-items: center;
      gap: 72px;
    }
    /* Left: heading block */
    .why-us-left {
      flex: 0 0 36%;
    }
    .why-us-subtitle {
      position: relative;
      display: inline-flex;
      align-items: center;
    }
    .why-us-subtitle > span {
      position: relative;
      z-index: 1;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 600;
      font-size: 12px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #262015;
    }
    .why-us-font-line {
      position: absolute;
      z-index: 0;
      width: 110%;
      left: -5%;
      bottom: -3px;
    }
    .why-us-heading {
      color: #262015;
      margin: 0;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      font-size: 40px;
      line-height: 1.05;
      letter-spacing: -0.025em;
    }
    .why-us-left > p {
      font-size: 14.5px;
      line-height: 1.7;
      color: rgba(38, 32, 21, 0.65);
      margin: 0;
    }
    /* Right: feature rows */
    .why-us-right {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .why-us-feature {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 20px 0;
      transition: padding-left 0.25s;
    }
    .why-us-feature:hover { padding-left: 6px; }
    .why-us-feature + .why-us-feature {
      border-top: 1px solid rgba(38, 32, 21, 0.1);
    }
    .why-us-feature-icon {
      width: 46px;
      height: 46px;
      min-width: 46px;
      border-radius: 50%;
      background-color: #c5955f;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.28s, transform 0.28s;
    }
    .why-us-feature:hover .why-us-feature-icon {
      background-color: #dd733f;
      transform: scale(1.1) rotate(-6deg);
    }
    .why-us-feature-icon svg { width: 20px; height: 20px; }
    .why-us-feature-body { flex: 1; }
    .why-us-feature-title {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      font-size: 16px;
      color: #262015;
      margin-bottom: 3px;
      transition: color 0.28s;
    }
    .why-us-feature:hover .why-us-feature-title { color: #dd733f; }
    .why-us-feature-body p {
      font-size: 13.5px;
      line-height: 1.55;
      color: rgba(38, 32, 21, 0.62);
      margin: 0;
    }
    .why-us-feature-num {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      font-size: 11px;
      letter-spacing: 0.06em;
      color: rgba(38, 32, 21, 0.22);
      min-width: 22px;
      text-align: right;
    }
    /* Background capy watermark */
    .why-us-bg-capy {
      position: absolute;
      right: -50px;
      bottom: 0;
      height: auto;
      pointer-events: none;
      user-select: none;
      z-index: 0;
    }
    .why-us-bg-capy svg { height: 100%; width: auto; }
    @media (max-width: 991px) {
      .why-us-split { gap: 48px; }
      .why-us-left { flex: 0 0 40%; }
      .why-us-heading { font-size: 34px; }
    }
    @media (max-width: 767px) {
      .why-us-inner { padding: 0 20px; }
      .why-us-split { flex-direction: column; gap: 28px; }
      .why-us-left { flex: none; width: 100%; }
      .why-us-bg-capy {
        right: -24px;
        bottom: -8px;
        top: auto;
        transform: none;
        height: 260px;
      }
    }
    @media (max-width: 575px) {
      .why-us-section { padding: 24px 0; }
      .why-us-heading { font-size: 30px; }
    }

    /* Shop by Shade */
    .sbs-section {
      background-color: #fffbf2;
      border-top: 1px solid #ebdfd0;
      border-bottom: 1px solid #ebdfd0;
      padding: 56px 0;
    }
    .sbs-inner {
      padding-left: 64px;
      padding-right: 0;
    }
    .sbs-heading {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      font-size: 30px;
      color: #262015;
      letter-spacing: -0.02em;
      margin-bottom: 28px;
    }
    .sbs-layout {
      display: flex;
      gap: 48px;
      align-items: stretch;
      height: clamp(300px, 30vw, 480px);
    }
    /* Left: swatch grid */
    .sbs-left { flex: 0 0 clamp(220px, 19vw, 310px); height: 100%; }
    .sbs-swatches {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(6px, 0.6vw, 12px);
      height: 100%;
      align-content: space-between;
    }
    .sbs-swatch-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(4px, 0.4vw, 8px);
      padding: clamp(8px, 0.8vw, 14px) clamp(6px, 0.6vw, 10px);
      border-radius: 14px;
      border: 2px solid transparent;
      background: transparent;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
    }
    .sbs-swatch-btn:hover { background: rgba(38,32,21,0.04); }
    .sbs-swatch-btn.sbs-active {
      border-color: #dd733f;
      background: rgba(221,115,63,0.06);
    }
    .sbs-swatch-btn svg {
      width: clamp(30px, 3.2vw, 54px);
      height: clamp(30px, 3.2vw, 54px);
      transition: transform 0.2s;
      overflow: visible;
    }
    .sbs-swatch-btn:hover svg { transform: scale(1.1) rotate(-4deg); }
    .sbs-swatch-btn.sbs-active svg { transform: scale(1.08); }
    .sbs-swatch-name {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: clamp(9px, 0.75vw, 12px);
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(38,32,21,0.55);
      transition: color 0.2s;
    }
    .sbs-swatch-btn:hover .sbs-swatch-name,
    .sbs-swatch-btn.sbs-active .sbs-swatch-name { color: #dd733f; }
    /* Right: product card carousel */
    .sbs-right { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; }
    .sbs-products {
      flex: 1;
      min-height: 0;
      display: flex;
      overflow-x: auto;
      gap: 12px;
      padding-right: 64px;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .sbs-products::-webkit-scrollbar { display: none; }
    .sbs-card {
      flex-shrink: 0;
      width: clamp(200px, 17vw, 280px);
      height: 100%;
      scroll-snap-align: start;
      display: flex;
      flex-direction: column;
      border-radius: 12px;
      overflow: hidden;
      background: #f1f0e9;
      cursor: pointer;
      transition: box-shadow 0.3s, transform 0.3s;
    }
    .sbs-card:hover {
      box-shadow: 0 8px 24px rgba(38,32,21,0.09);
      transform: translateY(-3px);
    }
    .sbs-card-img {
      flex: 1;
      overflow: hidden;
      position: relative;
    }
    .sbs-card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s;
    }
    .sbs-card:hover .sbs-card-img img { transform: scale(1.06); }
    .sbs-card-body { padding: 10px 12px 12px; }
    .sbs-card-stars {
      display: flex;
      align-items: center;
      gap: 1px;
      margin-bottom: 4px;
    }
    .sbs-card-title {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 600;
      font-size: 13px;
      color: #262015;
      line-height: 1.3;
      margin-bottom: 3px;
    }
    .sbs-card-price {
      font-size: 13px;
      font-weight: 700;
      color: #c5955f;
    }
    @media (max-width: 991px) {
      .sbs-layout { gap: 28px; }
    }
    @media (max-width: 767px) {
      .sbs-inner { padding-left: 20px; padding-right: 0; }
      .sbs-layout { gap: 12px; align-items: stretch; height: clamp(160px, 46vw, 220px); }
      .sbs-left { flex: 0 0 104px; height: 100%; }
      .sbs-swatches { height: 100%; align-content: space-between; gap: 4px; }
      .sbs-swatch-btn { padding: 4px 3px; border-radius: 9px; gap: 3px; border-width: 1.5px; }
      .sbs-swatch-btn svg { width: 26px; height: 26px; }
      .sbs-swatch-name { font-size: 8px; letter-spacing: 0.04em; }
      .sbs-right { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; }
      .sbs-products { flex: 1; min-height: 0; display: flex; overflow-x: auto; gap: 8px; padding-right: 20px; scrollbar-width: none; -ms-overflow-style: none; }
      .sbs-card { width: calc(46% - 4px); height: 100%; aspect-ratio: unset; }
      .sbs-card-img { flex: 1; }
      .sbs-card-body { padding: 5px 7px 7px; }
      .sbs-card-title { font-size: 11px; }
      .sbs-card-price { font-size: 11px; }
      .sbs-card-stars { margin-bottom: 2px; }
    }
    @media (max-width: 575px) {
      .sbs-section { padding: 40px 0; }
      .sbs-heading { font-size: 26px; }
    }

    /* Best Sellers: carousel / grid layout */
    #bs-track {
      display: flex;
      overflow-x: auto;
      gap: 10px;
      /* full-bleed on mobile: extend past section padding */
      margin-left: -20px;
      margin-right: -20px;
      padding-left: 20px;
      padding-right: 20px;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding-bottom: 8px;
    }
    #bs-track::-webkit-scrollbar { display: none; }
    .bs-card {
      flex-shrink: 0;
      width: 27vw;
      min-width: 0;
    }
    @media (min-width: 768px) {
      .bs-sw { width: 26px; height: 26px; }
      #bs-track {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        overflow: visible;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
      }
      .bs-card { width: auto; }
    }
    #navbar .nav-inner {
      transition: padding-top 0.3s ease, padding-bottom 0.3s ease;
    }
    #navbar.scrolled .nav-inner {
      padding-top: 0.625rem;
      padding-bottom: 0.625rem;
    }

    /* ── Explore Section (Shop by Category + Feel the Difference) ── */
    .explore-section { background-color: #fffbf2; }

    /* Bed / Bath Toggle — matches Best Sellers filter tab style */
    .explore-toggle {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .explore-tab {
      font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
      padding: 7px 16px; border-radius: 9999px;
      color: #262015; background: transparent;
      border: 1.5px solid transparent;
      transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
      cursor: pointer; white-space: nowrap; min-height: 40px;
    }
    .explore-tab:hover { background: #f1f0e9; border-color: #ebdfd0; }
    .explore-tab.is-active { background: #dd733f; color: #fff; border-color: #dd733f; }

    /* Editorial category grid — hero left + 2×2 right = 5 cards */
    .explore-cat-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 14px;
      height: 540px;
    }
    .explore-cat-hero {
      grid-row: span 2;
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      display: block;
      background: #ddd5c3;
      text-decoration: none;
    }
    .explore-cat-tile {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      display: block;
      background: #ddd5c3;
      text-decoration: none;
    }
    .explore-cat-hero img, .explore-cat-tile img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.7s ease;
    }
    .explore-cat-hero:hover img, .explore-cat-tile:hover img { transform: scale(1.05); }
    .explore-cat-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(38,32,21,0.76) 0%, rgba(38,32,21,0.12) 52%, transparent 100%);
      display: flex; flex-direction: column; justify-content: flex-end;
      padding: 28px 30px; gap: 14px;
      transition: background 0.3s;
    }
    .explore-cat-hero:hover .explore-cat-overlay,
    .explore-cat-tile:hover .explore-cat-overlay {
      background: linear-gradient(to top, rgba(38,32,21,0.88) 0%, rgba(38,32,21,0.28) 62%, transparent 100%);
    }
    .explore-cat-eyebrow {
      display: block;
      font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: rgba(255,255,255,0.52); margin-bottom: 5px;
    }
    .explore-cat-name {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800; font-size: 30px; color: #fff;
      line-height: 1.08; margin: 0 0 5px; letter-spacing: -0.02em;
    }
    .explore-cat-sub {
      font-family: 'Inter', sans-serif; font-size: 12px;
      color: rgba(255,255,255,0.58); margin: 0;
    }
    .explore-cat-btn {
      display: inline-flex; align-items: center; gap: 6px;
      align-self: flex-start; padding: 8px 18px;
      background: rgba(255,255,255,0.13);
      border: 1px solid rgba(255,255,255,0.28);
      border-radius: 9999px; color: #fff;
      font-family: 'Inter', sans-serif; font-size: 11px;
      font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
      transition: background 0.22s, border-color 0.22s;
    }
    .explore-cat-hero:hover .explore-cat-btn,
    .explore-cat-tile:hover .explore-cat-btn {
      background: #dd733f; border-color: #dd733f;
    }

    /* Explore section header — explicit padding so it matches the grid on every breakpoint */
    .explore-section-header { padding-left: 64px; padding-right: 64px; }

    /* Feel the Difference strip */
    .feel-section-header { padding: 0 64px; }
    .feel-heading {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800; font-size: 26px; letter-spacing: -0.022em;
      color: #262015; margin: 0 0 5px;
    }
    .feel-sub {
      font-family: 'Inter', sans-serif; font-size: 13px;
      color: rgba(38,32,21,0.5); margin: 0;
    }
    .feel-scroll-track {
      display: flex; overflow-x: auto;
      gap: 12px; padding: 0 64px 28px;
      scrollbar-width: none; -ms-overflow-style: none;
    }
    .feel-scroll-track::-webkit-scrollbar { display: none; }
    .feel-card {
      flex-shrink: 0; width: clamp(240px, 24vw, 360px);
      border-radius: 18px; overflow: hidden;
      position: relative; background: #ddd5c3;
      cursor: pointer; aspect-ratio: 3/4;
    }
    .feel-card img {
      width: 100%; height: 100%;
      object-fit: cover; transition: transform 0.65s ease;
    }
    .feel-card:hover img { transform: scale(1.07); }
    .feel-card-body {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(38,32,21,0.9) 0%, rgba(38,32,21,0.22) 55%, transparent 100%);
      display: flex; flex-direction: column; justify-content: flex-end;
      padding: 22px 24px;
    }
    .feel-card-name {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800; font-size: 22px; color: #fff;
      margin: 0 0 5px; letter-spacing: -0.01em;
    }
    .feel-card-desc {
      font-family: 'Inter', sans-serif; font-size: 12px;
      color: rgba(255,255,255,0.58); margin: 0;
    }

    /* Panel fade-in animation */
    @keyframes exploreFadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0);   }
    }
    .explore-panel.is-entering { animation: exploreFadeIn 0.32s ease forwards; }

    /* Responsive */
    @media (max-width: 991px) {
      .feel-section-header { padding: 0 20px; }
      .feel-scroll-track { padding: 0 20px 24px; }
      .feel-card { width: clamp(190px, 52vw, 240px); }
    }
    @media (max-width: 767px) {
      /* Match the header's left edge exactly — same value, same source */
      .explore-section-header { padding-left: 20px; padding-right: 20px; }
      /* Flatten the wrapper to a full-width zero-padding block */
      .explore-cat-container {
        /* keep left padding (px-margin-mobile = 20px) so first card aligns with title */
        padding-right: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      /* On mobile: horizontal snap carousel so all categories are reachable */
      .explore-cat-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 10px;
        height: auto;
        /* no padding-left: container's 20px left padding handles alignment */
        padding-right: 20px;
        padding-bottom: 6px;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .explore-cat-grid::-webkit-scrollbar { display: none; }
      /* 2 cards fully visible + ~24px of 3rd peeking at right */
      .explore-cat-hero {
        grid-row: span 1;
        flex-shrink: 0;
        width: 43vw;
        aspect-ratio: 3/4;
        scroll-snap-align: start;
      }
      .explore-cat-tile {
        flex-shrink: 0;
        width: 43vw;
        aspect-ratio: 3/4;
        scroll-snap-align: start;
      }
      .explore-cat-name { font-size: 22px; }
      .explore-cat-overlay { padding: 18px 20px; gap: 10px; }
    }