/* =====================================================
   WINS MORI
   Luxury Fragrance Website
   ===================================================== */




/* -------------------------
   RESET
------------------------- */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
    scroll-padding-top: 120px; /* clears the taller two-row navbar on anchor jumps */
}


body {
    background: #f7f5f0;
    color: #171614;
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    line-height: 1.7;
}


a {
    color: inherit;
    text-decoration: none;
}




/* -------------------------
   TOKENS
------------------------- */


:root {
    --gold: #b89968;
    --gold-bright: #d8c19a;
    --muted: #292722;   /* added for the cart (drawer text / chips / badge) */
    --cream: #eeeae1;   /* added for the cart (drawer background) */
}




/* -------------------------
   TYPOGRAPHY
------------------------- */


h1,
h2,
h3 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    line-height: 1.05;
}


.eyebrow {
    font-family: "Cormorant Garamond", sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}




/* =====================================================
   NAVIGATION
   ===================================================== */


.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 22px 6% 16px;
    color: #171614;
    background: #eeeae1;
    border-bottom: 1px solid transparent;
    transition:
        background 0.4s ease,
        padding 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}


.navbar.scrolled {
    padding: 14px 6% 12px;
    background: #f7f5f0;
    border-bottom: 1px solid rgba(23, 22, 20, 0.08);
    box-shadow: 0 6px 24px rgba(23, 22, 20, 0.05);
}


.navbar-brand {
    text-align: center;
    line-height: 1.15;
}


.logo {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.7rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    padding-left: 0.32em;
    color: #171614;
}

.logo-mark {
    height: 1.05em;         
    width: auto;
    vertical-align: middle;
    margin: 0 -0.15em;
    position: relative;
    top: -0.08em;
    left: -0.11em;
}

.logo-tagline {
    margin-top: 7px;
    font-family: "Montserrat", sans-serif;
    font-size: 0.52rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #766b58;
}


/* Links pinned LEFT, search group pinned RIGHT (space-between),
   mirroring the eau de parfum sub-page. Below 1150px only the links
   collapse into the hamburger — the search group stays on the top
   bar (see the 1150px block). */
.navbar-nav-row {
    position: absolute;
    top: 50%;
    left: 6%;
    right: 6%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.navbar nav {
    display: flex;
    align-items: center;
    gap: 6px;
}


/* Search group — sits on the right on desktop, and stays on the top
   bar (right) when the hamburger takes over. */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}


.navbar nav a {
    position: relative;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #34312c;
    transition:
        background 0.3s ease,
        color 0.3s ease;
}


.navbar nav a:hover {
    background: rgba(184, 153, 104, 0.16);
    color: #171614;
}




/* =====================================================
   SEARCH (navbar)
   ===================================================== */


.nav-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 4px;
}


.search-input {
    width: 0;
    opacity: 0;
    padding: 0;
    border: none;
    border-bottom: 1px solid transparent;
    background: transparent;
    font-family: "Montserrat", sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    color: #34312c;
    pointer-events: none;
    transition:
        width 0.4s ease,
        opacity 0.4s ease,
        padding 0.4s ease,
        border-color 0.4s ease;
}


/* DESKTOP: inline expand. v-search-white: add a WHITE background on
   the open input (fades in with the expand). If a later rule ever
   wins the cascade and this doesn't show, add !important here. */
.nav-search.active .search-input {
    width: 155px;
    opacity: 1;
    padding: 6px 8px;
    border-bottom-color: rgba(23, 22, 20, 0.2);
    background: #ffffff;
    pointer-events: auto;
}


.search-input:focus {
    outline: none;
    border-bottom-color: var(--gold);
}


.search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #34312c;
    cursor: pointer;
    transition:
        background 0.3s ease,
        color 0.3s ease;
}


.search-toggle svg {
    width: 15px;
    height: 15px;
}


.search-toggle:hover {
    background: rgba(184, 153, 104, 0.16);
    color: #171614;
}


.search-results {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 240px;
    display: none;
    flex-direction: column;
    padding: 8px;
    background: #f7f5f0;
    border: 1px solid rgba(23, 22, 20, 0.1);
    box-shadow: 0 20px 45px rgba(23, 22, 20, 0.12);
    z-index: 60;
}


.search-results.active {
    display: flex;
}


.search-result {
    text-align: left;
    padding: 10px 12px;
    border: none;
    border-radius: 4px;
    background: transparent;
    font-family: "Montserrat", sans-serif;
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: #34312c;
    cursor: pointer;
    transition: background 0.25s ease;
}


.search-result:hover {
    background: rgba(184, 153, 104, 0.16);
}


.search-empty {
    padding: 10px 12px;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    color: #8b867d;
}


.search-highlight {
    animation: searchPulse 1.6s ease;
}


@keyframes searchPulse {
    0%   { box-shadow: inset 0 0 0 2px rgba(184, 153, 104, 0); }
    25%  { box-shadow: inset 0 0 0 3px rgba(184, 153, 104, 0.55); }
    100% { box-shadow: inset 0 0 0 2px rgba(184, 153, 104, 0); }
}


/* Hamburger — colour matched to the eau de parfum sub-page (#171614). */
.menu-toggle {
    display: none;
    border: none;
    background: transparent;
    color: #171614;
    font-size: 1.4rem;
    cursor: pointer;
}




/* =====================================================
   HERO  —  3-slide carousel
   ===================================================== */


.hero {
    position: relative;
    min-height: 85vh;
    overflow: hidden;
    background: #f7f5f0;
}


.hero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(
            135deg,
            #eeeae1,
            #f7f5f0
        );
    z-index: 0;
}


.hero-slides {
    position: absolute;
    inset: 0;
    z-index: 1;
}


.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease;
}


.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
}


.hero-slide--split {
    display: flex;
    align-items: center;
    padding: 150px 8% 90px;
}


.hero-slide--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}


/* Slide taglines are mobile-only — hidden on desktop/tablet */
.hero-caption {
    display: none;
}


/* =====================================================
   HERO CONTENT
   ===================================================== */


.hero-content {
    position: relative;
    z-index: 5;
    width: 50%;
    padding-right: 40px;
}


.hero-content .eyebrow {
    margin-bottom: 28px;
    color: #766b58;
}


.hero h1 {
    font-size: clamp(4.5rem, 8.8vw, 8.8rem);
    letter-spacing: -0.045em;
    color: #171614;
}


.hero h1 em {
    position: relative;
    font-style: normal;
    background: linear-gradient(
        110deg,
        #766b58 0%,
        #8a7a54 28%,
        #b89968 44%,
        #d8c19a 50%,
        #b89968 56%,
        #8a7a54 72%,
        #766b58 100%
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: winsRadiance 6s ease-in-out infinite;
}


.hero h1 em .star {
    position: absolute;
    top: 0.20em;
    right: -0.30em;
    width: 0.42em;
    height: 0.42em;
    background:
        radial-gradient(
            circle,
            #f4e4bd 0%,
            #d8c19a 35%,
            rgba(216, 193, 154, 0) 70%
        );
    clip-path: polygon(
        50% 0%,
        58% 42%,
        100% 50%,
        58% 58%,
        50% 100%,
        42% 58%,
        0% 50%,
        42% 42%
    );
    -webkit-text-fill-color: initial;
    filter: drop-shadow(0 0 4px rgba(216, 193, 154, 0.8));
    animation: starTwinkle 2.4s ease-in-out infinite;
}


@keyframes starTwinkle {
    0%, 100% {
        opacity: 0.35;
        transform: scale(0.7) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.15) rotate(45deg);
    }
}


@keyframes winsRadiance {
    0%   { background-position: 100% 50%; }
    50%  { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}


.hero-text {
    max-width: 390px;
    margin-top: 35px;
    margin-bottom: 35px;
    color: #68645d;
    font-size: 0.82rem;
    line-height: 1.9;
}




/* =====================================================
   HERO BUTTON
   ===================================================== */


/* Hover: the whole background simply fades in — same feel as the
   navbar tabs. The fill still lands on #292722 with light text, it
   just fades in instead of sweeping across. */

.hero-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 28px;
    border: 1px solid #292722;
    background: transparent;
    color: #292722;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition:
        background 0.4s ease,
        color 0.4s ease,
        border-color 0.4s ease;
}


.hero-button:hover,
.hero-button:focus-visible {
    background: #292722;
    color: #f7f5f0;
    border-color: var(--gold);
}




/* =====================================================
   PRODUCT AREA (slide 1 right half)
   ===================================================== */


.hero-product {
    position: absolute;
    z-index: 4;
    top: 0px;
    right: 0;
    width: 55%;
    height: 100%;
}


.product-frame {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: #e9e5dc;
}


.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}




/* =====================================================
   HERO CAROUSEL CONTROLS
   ===================================================== */


.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border: none;
    border-radius: 999px;
    background: rgba(247, 245, 240, 0.9);
    color: #26241f;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(23, 22, 20, 0.12);
    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.hero-arrow svg {
    width: 20px;
    height: 20px;
}


.hero-arrow:hover {
    background: #f7f5f0;
    box-shadow: 0 10px 26px rgba(23, 22, 20, 0.18);
}


.hero-arrow--prev {
    left: 23px;
}


.hero-arrow--prev:hover {
    transform: translateY(-50%) translateX(-2px);
}


.hero-arrow--next {
    right: 23px;
}


.hero-arrow--next:hover {
    transform: translateY(-50%) translateX(2px);
}

.hero-arrow:disabled {
    opacity: 1;
    color: #b8b4ac;
    background: rgba(247, 245, 240, 0.6);
    cursor: default;
    box-shadow: none;
    pointer-events: none;
}

.hero-arrow:disabled:hover {
    background: rgba(247, 245, 240, 0.6);
    transform: translateY(-50%);
}


.hero-controls {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(247, 245, 240, 0.75);
    backdrop-filter: blur(4px);
    box-shadow: 0 6px 20px rgba(23, 22, 20, 0.1);
}


.hero-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(38, 36, 31, 0.28);
    cursor: pointer;
    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.hero-dot:hover {
    background: rgba(38, 36, 31, 0.5);
}


.hero-dot.is-active {
    background: #26241f;
    transform: scale(1.15);
}


.hero-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 2px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #26241f;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
}


.hero-play:hover {
    transform: scale(1.1);
    color: #000;
}


.hero-play svg {
    width: 13px;
    height: 13px;
}


.hero-play .icon-pause {
    display: none;
}


.hero-play.is-playing .icon-play {
    display: none;
}


.hero-play.is-playing .icon-pause {
    display: inline-flex;
}




/* =====================================================
   FIND OUT MORE  —  centered search bar
   ===================================================== */


.find-more {
    padding: 20px 10% 10px;
    text-align: center;
}


.find-more-inner {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
}


.find-more-title {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.6rem;
    font-weight: 500;
    color: #26241f;
    margin-bottom: 10px;
}


.find-more-bar {
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(23, 22, 20, 0.16);
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(23, 22, 20, 0.06);
}


.find-more-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 16px 22px;
    font-family: "Montserrat", sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
    color: #34312c;
}


.find-more-input::placeholder {
    color: #9a948a;
}


.find-more-input:focus {
    outline: none;
}


/* iOS Safari auto-zooms when a focused input's font-size is < 16px.
   Lock the search fields at 16px on mobile so tapping them does NOT
   zoom the page (pinch-zoom still works). */
@media (max-width: 700px) {
    .find-more-input,
    .search-input {
        font-size: 16px;
    }
}


.find-more-button {
    flex-shrink: 0;
    border: none;
    padding: 0 42px;
    background: var(--gold-bright);
    color: #26241f;
    font-family: "Montserrat", sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}


.find-more-button:hover {
    background: var(--gold);
    color: #f7f5f0;
}


.find-more-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    display: none;
    flex-direction: column;
    padding: 8px;
    background: #f7f5f0;
    border: 1px solid rgba(23, 22, 20, 0.1);
    box-shadow: 0 20px 45px rgba(23, 22, 20, 0.12);
    text-align: left;
    z-index: 30;
}


.find-more-results.active {
    display: flex;
}




/* =====================================================
   INTRO  —  text on the left, product row on the right
   ===================================================== */


.intro {
    padding: 40px 7%;
}


.intro-inner {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) 1.6fr;
    gap: 60px;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
}


/* LEFT — text block.
   Eyebrow + heading stay centered; the paragraph is
   left-aligned. The block is capped and centered so the
   centered lines and the left-aligned paragraph share the
   same left/right edges (symmetrical). */
.intro-text {
    max-width: 320px;
    margin-inline: auto;
}


.intro-text .eyebrow,
.intro-text h2 {
    text-align: center;
}


.intro-text .eyebrow {
    margin-bottom: 18px;
    color: #766b58;
    font-size: 0.90rem;
}


.intro-text h2 {
    font-size: clamp(1.2rem, 2vw, 1.7rem);
}

.intro-text > p:not(.eyebrow) {
    text-align: left;
    margin-top: 20px;
    color: #68645d;
    font-family: "Montserrat", sans-serif;
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.7;
}


/* RIGHT — four product shots in a single horizontal row.
   Target size: 218 x 400 (portrait, ~1 : 1.83). Frames no longer
   stretch to fill the column — they hold that fixed shape and all
   stay identical. If the four (plus the 14px gaps) are wider than
   the space available, they scale DOWN together as a set, so they
   never overflow and the section's spacing is left untouched. */
.intro-gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;                  /* unchanged from the original */
}


.intro-shot {
    position: relative;
    overflow: hidden;
    display: block;
    flex: 0 1 400px;            /* aim for 218px wide; shrink equally to fit the row */
    aspect-ratio: 218 / 400;    /* ≈ 1 : 1.83 portrait → 400px tall at 218px wide */
    border-radius: 10px;
    background: #e9e5dc;
    box-shadow: 0 14px 34px rgba(23, 22, 20, 0.10);
    cursor: pointer;            /* still interactive (taps veil the others) */
}


.intro-shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}


/* soft white veil — invisible until a sibling is hovered */
.intro-shot::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(247, 245, 240, 0);
    transition: background 0.5s ease;
    pointer-events: none;
}


/* hovered image zooms in — same feel as the collection cards */
.intro-gallery:hover .intro-shot:hover img {
    transform: scale(1.06);
}


/* every OTHER image gets the soft white highlight */
.intro-gallery:hover .intro-shot:not(:hover)::after {
    background: rgba(247, 245, 240, 0.55);
}




/* =====================================================
   COLLECTIONS
   ===================================================== */


.collections {
    /* Top padding 40px so the gap below the scents video matches the gap
       above it (intro-bottom 40 + scents-top 90 = 130; 90 + 40 = 130).
       Applies to desktop and iPad (tablet media queries don't override
       these section paddings). */
    padding: 40px 7% 120px;
}


.section-heading {
    margin-bottom: 60px;
}


.section-heading .eyebrow {
    margin-bottom: 15px;
    color: #766b58;
}


.section-heading h2 {
    font-size: clamp(3rem, 5vw, 5rem);
}


.section-heading > p:last-child {
    max-width: 560px;
    margin-top: 20px;
    line-height: 1.6;
    color: #68645d;
}


.collection-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    max-width: 1080px;
    margin: 0 auto;
}


.collection-card {
    background: #eeebe4;
    transition:
        transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.6s ease;
}


.collection-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 55px rgba(23, 22, 20, 0.12);
}


.collection-image {
    position: relative;
    overflow: hidden;
    height: 340px;
    display: flex;
    align-items: flex-end;
    padding: 20px;
}


/* Cards whose "Discover" link points at a real collection page
   get their artwork made clickable too (added by script.js).
   Cards without a page yet (still pointing at "#...") are left
   alone, so right now only Soft & Radiant is clickable. */

.collection-image.is-clickable {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}


.collection-image.is-clickable:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}


.collection-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}


.collection-card:hover .collection-card-image {
    transform: scale(1.06);
}


.collection-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(23, 22, 20, 0.35),
        rgba(23, 22, 20, 0) 55%
    );
    transition: background 0.6s ease;
}


.collection-image span {
    position: relative;
    z-index: 2;
    color: #f7f5f0;
    font-size: 0.58rem;
    letter-spacing: 0.25em;
    text-shadow: 0 1px 8px rgba(23, 22, 20, 0.55);
}


.collection-card:hover .collection-image::after {
    background: linear-gradient(
        to top,
        rgba(23, 22, 20, 0.5),
        rgba(23, 22, 20, 0.05) 60%
    );
}


.for-her::before {
    background: linear-gradient(135deg, #c9bbb1, #806e65);
}


.for-him::before {
    background: linear-gradient(135deg, #59564e, #26251f);
}


.timeless::before {
    background: linear-gradient(135deg, #b7a88d, #615746);
}


.collection-info {
    padding: 24px;
}


.collection-info .eyebrow {
    color: #766b58;
    font-size: 0.6rem;
}


.collection-info h3 {
    margin: 6px 0 12px;
    font-size: 2rem;
}


.collection-info p:not(.eyebrow) {
    color: #68645d;
    font-size: 0.76rem;
}


.collection-info a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding-bottom: 3px;
    border-bottom: 1px solid #766b58;
    font-size: 0.58rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition:
        color 0.4s ease,
        gap 0.4s ease,
        border-color 0.4s ease;
}


.collection-info a::after {
    content: "\2192";
    font-size: 0.9em;
    opacity: 0;
    transform: translateX(-4px);
    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}


.collection-card:hover .collection-info a,
.collection-info a:hover {
    gap: 12px;
    color: #171614;
    border-color: var(--gold);
}


.collection-card:hover .collection-info a::after,
.collection-info a:hover::after {
    opacity: 1;
    transform: translateX(0);
}




/* =====================================================
   SCENTS
   ===================================================== */

.scents {
    /* position: relative makes this the anchor for the absolutely
       positioned background video layer added below. The dark
       #26241f stays as the section colour and shows as a BORDER /
       MARGIN around the inset video (see .scents-video). */
    position: relative;
    overflow: hidden;
    padding: 90px 7%;
    background: #26241f;
    color: #f7f5f0;
}

/* Heading over the video ("Our Collections"). */
.scents-heading {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto 34px;
}
.scents-heading .eyebrow {
    color: var(--gold-bright);
    margin-bottom: 8px;
}
.scents-heading h2 {
    margin: 0;
    color: #f7f5f0;
    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.05;
}

.scents-panels {
    /* z-index: 1 keeps the three cream squares ABOVE the video. */
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}

.scents-panel-group {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Each light catalogue panel is a true square. */
.scents-panel {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 6px solid #26241f;
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scents-panel-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.scents-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            135deg,
            rgba(247, 245, 240, 0.90),
            rgba(238, 234, 225, 0.82)
        );
}

.scents-panel-content {
    position: relative;
    z-index: 2;
    width: 100%;
    color: #26241f;
}

.scents .section-heading {
    margin-bottom: 24px;
    text-align: center;
}

.scents .section-heading .eyebrow {
    color: #8a6f3c;
}

.scents-main .section-heading h2 {
    font-size: clamp(1.35rem, 2vw, 2rem);
    color: #26241f;
}

.scent-list {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid rgba(38, 36, 31, 0.15);
}

.scent-item {
    position: relative;
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    padding: 8px 6px;
    border-bottom: 1px solid rgba(38, 36, 31, 0.15);
    transition: background 0.5s ease;
}

.scent-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 0;
    background: var(--gold);
    transform: translateY(-50%);
    transition: height 0.5s ease;
}

.scent-item:hover {
    background: rgba(38, 36, 31, 0.04);
}

.scent-item:hover::before {
    height: 58%;
}

.scent-item > span {
    color: #8a6f3c;
    font-size: 0.54rem;
    transition: color 0.4s ease;
}

.scent-item:hover > span {
    color: var(--gold);
}

.scent-item h3 {
    font-size: clamp(0.92rem, 1.25vw, 1.18rem);
    color: #26241f;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.scent-item:hover h3 {
    transform: translateX(4px);
}

/* Label below each square panel. */
.scents-panel-label {
    margin-top: 18px;
    text-align: center;
    color: #f7f5f0;
    font-family: "Montserrat", sans-serif;
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* Coming Soon uses the same square frame and centers its heading. */
.scents-panel--soon {
    text-align: center;
}

.scents-panel--soon .scents-panel-content {
    width: 100%;
}

.scents-panel--soon .section-heading {
    margin-bottom: 0;
}

/* -------------------------
   AVAILABLE SIZES
   ------------------------- */

.sizes {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.sizes p {
    flex-basis: 100%;
    margin: 0 0 2px;
    color: rgba(38, 36, 31, 0.55);
    font-size: 0.54rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
}

.sizes span {
    position: relative;
    padding: 6px 10px;
    border: 1px solid rgba(38, 36, 31, 0.25);
    background: transparent;
    color: #26241f;
    font-size: 0.52rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition:
        background 0.4s ease,
        color 0.4s ease,
        border-color 0.4s ease;
}

.sizes span:hover,
.sizes span:focus-visible {
    background: #292722;
    color: #f7f5f0;
    border-color: var(--gold);
}

.scents-coming-soon {
    margin-top: 18px;
    color: #8a6f3c;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    font-style: italic;
}


/* =====================================================
   ABOUT
   ===================================================== */


.about {
    /* Vertical rhythm matched to the tulips-video (.scents) section. */
    padding: 90px 10%;
}


.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
}


.about h2 {
    font-size: clamp(3.5rem, 6vw, 6rem);
}


.about-content > div:last-child {
    color: #68645d;
}


.about-content > div:last-child p {
    margin-bottom: 25px;
}




/* =====================================================
   RESELLER (PARTNER WITH US)
   ---------------------------------------------------------
   Previously paired 50/50 with CONTACT (CONNECT WITH US);
   the social links now live in the footer, so this is a
   full-width section on its own — see .reseller--full below.
   ===================================================== */


.reseller {
    padding: 150px 10%;
    text-align: center;
    background: #e8e2d7;
}


.reseller .eyebrow {
    color: #766b58;
}


.reseller h2 {
    margin: 20px 0;
    font-size: clamp(3.5rem, 6vw, 6rem);
}


.reseller > p:not(.eyebrow) {
    max-width: 600px;
    margin: 0 auto 35px;
    color: #68645d;
}


/* Same simple background fade as the navbar tabs — the fill
   still lands on #292722 with light text, it just fades in
   instead of sliding across. */

.button-light {
    position: relative;
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    padding: 0 28px;
    border: 1px solid #292722;
    background: transparent;
    color: #292722;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition:
        background 0.4s ease,
        color 0.4s ease,
        border-color 0.4s ease;
}


.button-light:hover,
.button-light:focus-visible {
    background: #292722;
    color: #f7f5f0;
    border-color: var(--gold);
}




/* =====================================================
   CONTACT LINKS  (now live inside the footer's Connect column)
   ===================================================== */

.contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}


.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 0px;
    border-bottom: none;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: transform 0.4s ease, color 0.4s ease;
}

.contact-link:hover {
    transform: scale(1.08);
}

.contact-icon {
    width: 24px;
    height: 24px;
    /* The icons are now solid cream-circle badges (not dark line
       art), so no extra halo ring is needed for contrast. */
    vertical-align: middle;
    object-fit: contain;
}


/* TikTok — the source badge is a white disc with the note cut out.
   The wrapper span carries a white pad (unfiltered); the image inside
   is inverted to a black disc, so its transparent note reads crisp
   white against that pad. The white can't sit on the image itself —
   invert would flip it black. Matches the chat widget's TikTok peg. */
.contact-tiktok {
    display: inline-flex;
    /* 20px glyph + 2px pad each side = 24px total, matching the other
       icons' rendered size (they have no pad). */
    background: #ffffff;
    border-radius: 50%;
    padding: 2px;
}
.contact-tiktok .contact-icon {
    width: 20px;
    height: 20px;
    filter: invert(1);
}




/* =====================================================
   FOOTER
   ===================================================== */


footer {
    padding: 70px 7% 35px;
    background: #171614;
    color: #f7f5f0;
}


.footer-brand h2 {
    font-family: "Cormorant Garamond", sans-serif;
    font-size: 1.0rem;
    font-weight: 500;
    letter-spacing: 0.3em;
}


.footer-brand p {
    margin-top: 8px;
    color: rgba(247,245,240,0.45);
    font-size: 0.7rem;
}


/* Top row: Brand on the left, social icons on the right. The icons
   line up horizontally with the "WINS MORI" heading (top-aligned to
   the brand block, then nudged to sit on that first line). */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
}

/* Social icons, reused here from the old standalone Connect section.
   Allowed to wrap so the row never forces horizontal scroll on
   narrower tablets / large phones; on desktop it stays one line. */
.footer-top .contact-links {
    flex-wrap: wrap;
    row-gap: 14px;
    margin-top: -3px;   /* centre the 24px icons on the WINS MORI line */
}

.footer-top .contact-link {
    color: rgba(247, 245, 240, 0.7);
}

.footer-top .contact-link:hover {
    color: var(--gold);
}


.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin: 10px 0;   /* was 45px, then 26px — minimal space above/below this row */
}


.footer-links a {
    color: rgba(247,245,240,0.6);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: color 0.3s ease;
}


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


.copyright {
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: rgba(247,245,240,0.3);
    font-size: 0.6rem;
}




/* =====================================================
   SCROLL REVEAL
   ===================================================== */


@media (prefers-reduced-motion: no-preference) {
    .js .reveal {
        opacity: 0;
        transform: translateY(28px);
        transition:
            opacity 1.1s ease,
            transform 1.1s ease;
    }
    .js .reveal.is-visible {
        opacity: 1;
        transform: none;
    }
}




/* =====================================================
   TABLET
   ===================================================== */


@media (max-width: 900px) {
    .navbar {
        padding: 20px 6% 14px;
    }
    .navbar.scrolled {
        padding: 12px 6% 10px;
    }
    .navbar nav a {
        padding: 6px 10px;
    }
    .hero-content {
        width: 50%;
    }
    .hero-product {
        right: 0;
        width: 50%;
    }

    /* intro: stack the text above the product row */
    .intro-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .intro-text {
        max-width: 560px;
    }

    .collection-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        gap: 40px;
    }
    .about-content {
        gap: 50px;
    }

    /* Footer (tablet / iPad): brand and socials share the row until
       they no longer fit, then the socials wrap to their own line
       still left-aligned under the brand. Nav links + copyright keep
       the tight rhythm set on desktop. */
    footer {
        padding: 60px 6% 32px;
    }
    .footer-top {
        row-gap: 16px;
    }
    .footer-top .contact-links {
        column-gap: 26px;
    }
}




/* =====================================================
   HAMBURGER NAV  (mirrors the eau de parfum sub-page)
   ---------------------------------------------------------
   Below 1150px the LINKS collapse into the hamburger on the
   LEFT, while the search group stays on the top bar on the
   RIGHT (it never goes into the dropdown). The 1150px cut-off
   matches the sub-page and keeps the left-aligned links clear
   of the centered logo at medium widths.

   v-search-white / drop-down: on iPad + mobile the open search
   input now DROPS DOWN below the magnifier as a right-aligned
   floating panel that grows leftward (matching the eau de parfum
   sub-page), with a WHITE background — instead of the desktop
   inline expand. See the .nav-search .search-input override in
   this block.
   ===================================================== */

@media (max-width: 1150px) {

    .navbar {
        padding: 18px 6%;
    }

    /* Hamburger on the LEFT. */
    .menu-toggle {
        display: block;
        position: absolute;
        top: 22px;
        left: 6%;
        right: auto;
    }

    .navbar-nav-row {
        position: static;
        width: 100%;
        transform: none;
        justify-content: center;
    }

    /* Links become the dropdown. */
    #navMenu {
        position: absolute;
        top: 100%;
        left: 6%;
        right: 6%;
        width: auto;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 22px;
        background: #f7f5f0;
        border: 1px solid rgba(23, 22, 20, 0.1);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    }
    #navMenu.active {
        display: flex;
    }
    .navbar nav a {
        padding: 9px 12px;
        font-size: 0.68rem;
    }

    /* Cart + Search group stays on the top bar (right), mirroring the
       sub-page. Nudge `top` to line it up with the hamburger. */
    .nav-actions {
        position: absolute;
        top: 18px;
        right: 6%;
        left: auto;
    }
    .nav-search {
        position: relative;
        width: auto;
        margin-left: 0;
    }

    /* v-search-white / drop-down (iPad + mobile):
       the closed input is a zero-width, absolutely-positioned box
       anchored to the RIGHT and BELOW the magnifier — so when it
       opens it drops DOWN and grows to the LEFT (a floating panel),
       instead of the desktop inline expand that pushed left over
       the logo. This @media covers iPad portrait/landscape, so the
       same drop-down + white background applies there and on mobile.
       The width/opacity/padding transition still animates from the
       base .search-input rule. */
    .nav-search .search-input {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        left: auto;

        width: 0;
        max-width: 70vw;
        padding: 0;

        /* the input is bordered on all sides once open (it's a panel
           now, not an underline), so start the border collapsed */
        border: 1px solid transparent;

        overflow: hidden;
    }

    /* Open state: the dropped-down panel, WHITE background. */
    .nav-search.active .search-input {
        width: 220px;
        padding: 10px 14px;

        background: #ffffff;
        border-color: rgba(23, 22, 20, 0.16);

        opacity: 1;
        pointer-events: auto;

        z-index: 120;
        box-shadow: 0 20px 45px rgba(23, 22, 20, 0.12);
    }

    /* Results sit BELOW the dropped-down input (input is at
       100% + 10px and ~40px tall), so they stack under it. */
    .search-results {
        position: absolute;
        top: calc(100% + 62px);
        right: 0;
        left: auto;
        width: 240px;
        max-width: 70vw;
        margin-top: 0;
        box-shadow: 0 20px 45px rgba(23, 22, 20, 0.12);
    }
}




/* =====================================================
   MOBILE
   ---------------------------------------------------------
   FIX: this block previously had a stray closing brace right
   after the .nav-cart rule, which ended the media query far
   too early. Everything below it (the mobile hero stacking,
   .hero-product width:100%, .intro-shot flex 50%, etc.) then
   leaked out and applied at EVERY width — which is what made
   the DESKTOP hero photo and the four intro product shots
   render oversized. The brace is removed, so these rules are
   correctly scoped to <=700px again and desktop returns to
   its original sizing.
   ===================================================== */


@media (max-width: 700px) {
    .navbar {
        padding: 18px 6%;
    }

    .nav-cart {
        transform: translateX(14px);
    }

    /* (Nav layout — hamburger on the left, search on the top-bar
       right, and the drop-down white search panel — is handled in
       the 1150px block above, so it stays consistent from minimized
       desktop all the way to mobile.) */

    /* =========================================================
       HERO (mobile)  —  slide 1 rebuilt as a clean vertical stack
       Text sits in the cream panel up top; the product image
       fills the space below it; arrows drop to the bottom corners
       so they never overlap the text. Desktop/tablet unaffected.
       ========================================================= */

    .hero {
        min-height: 100svh;
    }

    /* cream gradient covers the whole hero, so the text always
       rests on the light panel — matching the desktop feel */
    .hero::before {
        top: 0;
        bottom: auto;
        width: 100%;
        height: 100%;
    }
    .hero::after {
        display: none;
    }

    /* stack the two halves vertically instead of side-by-side */
    .hero-slide--split {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
    }

    /* text block lives in the cream area at the top */
    .hero-content {
        width: 100%;
        padding: 94px 7% 26px;   /* top padding clears the fixed navbar (~65px) */
    }
    .hero-content .eyebrow {
        font-size: 0.55rem;
        margin-bottom: 18px;
    }
    .hero h1 {
        font-size: clamp(3rem, 15vw, 5.2rem);
    }
    .hero-text {
        max-width: 320px;
        margin-top: 20px;
        margin-bottom: 26px;
        font-size: 0.76rem;
    }
    .hero-button {
        min-height: 48px;
        padding: 0 22px;
    }

    /* product image drops BELOW the text and fills the remaining
       height, flush to the bottom of the hero (no more overlap) */
    .hero-product {
        position: relative;
        inset: auto;
        z-index: 1;
        width: 100%;
        height: auto;
        flex: 1 1 auto;
        min-height: 150px;
        transform: none;
        opacity: 1;
    }
    .product-frame {
        width: 100%;
        height: 100%;
    }

    /* slides 2 & 3: fill the SAME bottom band as slide 1's photo,
       edge-to-edge and the same size, so the image stays put and
       consistent when you advance (a little cropping is expected).
       If the top edge doesn't line up on your phone, adjust the
       28rem value: larger = shorter image / higher top edge. */
    .hero-slide--image {
        display: flex;
        align-items: flex-end;
        background: linear-gradient(135deg, #eeeae1, #f7f5f0);
    }
    .hero-slide--image img {
        width: 100%;
        height: calc(100svh - 22rem);
        object-fit: cover;
        object-position: center;
    }

    /* Slide 2 & 3 taglines (mobile only): vertically centered in the
       cream space above the photo, with the same gold radiance + shimmer
       as "Wins". Nudge the 60px value if it sits slightly high/low. */
    .hero-caption {
        display: block;
        position: absolute;
        top: calc(46px + 10.5rem);   /* middle of the (now shorter) cream band */
        left: 0;
        right: 0;
        transform: translateY(-50%);
        z-index: 6;
        padding: 0 8%;
        text-align: center;
        font-family: "Cormorant Garamond", serif;
        font-weight: 500;
        font-size: clamp(2.1rem, 9vw, 3.2rem);
        line-height: 1.12;
        letter-spacing: -0.01em;
        background: linear-gradient(
            110deg,
            #766b58 0%,
            #8a7a54 28%,
            #b89968 44%,
            #d8c19a 50%,
            #b89968 56%,
            #8a7a54 72%,
            #766b58 100%
        );
        background-size: 250% 100%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: winsRadiance 6s ease-in-out infinite;
    }

    /* arrows sit over the image, lower down */
    .hero-arrow {
        top: 80%;
        bottom: auto;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
    }
    .hero-arrow--prev {
        left: 12px;
    }
    .hero-arrow--next {
        right: 12px;
    }
    .hero-arrow--prev:hover {
        transform: translateY(-50%) translateX(-2px);
    }
    .hero-arrow--next:hover {
        transform: translateY(-50%) translateX(2px);
    }
    .hero-arrow:disabled:hover {
        transform: translateY(-50%);
    }

    .hero-controls {
        bottom: 18px;
    }

    .find-more {
        padding: 60px 7% 10px;
    }
    .find-more-bar {
        flex-direction: column;
    }
    .find-more-button {
        padding: 14px 0;
    }

    /* intro (mobile): a swipeable, snap-scrolling carousel — one row,
       ~2 full images visible at a time with a peek of the next one as
       a "there's more" cue. Native horizontal touch-scroll = swipeable
       left/right; no JS needed. */
    .intro {
        padding: 60px 7%;
    }
    .intro-gallery {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 10px;
        /* Let the row bleed to the screen edges so the peeked image
           reaches the edge instead of stopping at the page padding. */
        margin: 0 -7%;
        padding: 0 7%;
        scrollbar-width: none;
    }
    .intro-gallery::-webkit-scrollbar {
        display: none;
    }
    .intro-shot {
        /* Two full images + a ~20% peek of the third as a "swipe for
           more" cue, measured against the gallery's actual track width
           (smaller than the viewport once the edge-to-edge bleed
           padding is accounted for). */
        flex: 0 0 47.5%;
        scroll-snap-align: start;
    }

    /* Tap-veil is a desktop hover echo — not meaningful in a swipe
       carousel, so it's disabled on mobile (script.js also skips
       wiring it up below this breakpoint). */
    .intro-gallery.has-active .intro-shot.is-active img {
        transform: none;
    }
    .intro-gallery.has-active .intro-shot:not(.is-active)::after {
        background: rgba(247, 245, 240, 0);
    }

    .collections {
        /* Top padding trimmed to 60px so the gap below the scents video
           matches the gap above it (intro 60px + scents-top 52px). */
        padding: 60px 7% 90px;
    }
    .collection-grid {
        max-width: 100%;
        gap: 32px;
    }
    .collection-image {
        height: 300px;
    }

    /* =========================================================
       SCENTS PANELS (mobile)
       Each catalogue remains a square and the label stays directly
       underneath. Content is centered in the middle of each panel.
       ========================================================= */

    .scents-panels {
        grid-template-columns: 1fr;
        gap: 28px;
        max-width: 100%;
    }

    .scents-panel-group {
        width: min(100%, 390px);
        margin-inline: auto;
    }

    .scents-panel {
        aspect-ratio: 1 / 1;
        min-height: 0;
        height: auto;
        padding: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .scents-panel-content {
        width: 100%;
    }

    .scents .section-heading {
        margin-bottom: 18px;
    }

    .scents-main .section-heading h2 {
        font-size: 1.45rem;
    }

    .scent-item {
        grid-template-columns: 28px 1fr;
        padding: 6px 4px;
    }

    .scent-item h3 {
        font-size: 0.98rem;
    }

    .sizes {
        gap: 7px;
        margin-top: 14px;
    }

    .sizes p {
        margin-bottom: 0;
    }

    .sizes span {
        padding: 6px 8px;
    }

    .scents-panel-label {
        margin-top: 14px;
        font-size: 0.58rem;
        letter-spacing: 0.2em;
    }

    .about {
        padding: 52px 7%;
    }
    .about-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .reseller {
        padding: 100px 7%;
    }

    /* Social links (mobile): one horizontal row of icons only — the
       platform labels are hidden (kept in the DOM for screen readers)
       so all four fit on a single line without the lopsided wrap. */
    .contact-links {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 22px;
    }
    .contact-link {
        font-size: 0;        /* collapse the text label */
        gap: 0;
        /* Enlarge the tap target beyond the 24px icon so a fingertip
           can't catch two at once. Vertical margin cancels the vertical
           padding so the row height — and the alignment with the
           "WINS MORI" line — is unchanged. */
        padding: 8px;
        margin: -8px 0;
    }
    /* Cancel the outer padding on the end icons so the cluster's left
       and right edges stay exactly where they were (still flush-right
       against the WINS MORI row). */
    .footer-top .contact-links > :first-child { margin-left: -8px; }
    .footer-top .contact-links > :last-child  { margin-right: -8px; }

    /* Footer (mobile): keep the brand and the social icons on ONE row,
       icons pushed right and vertically centred on the "WINS MORI"
       block — same as desktop. The nav links sit on their own row
       below, then the copyright. */
    footer {
        padding: 60px 7% 30px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .footer-top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;   /* icons line up with "WINS MORI" */
        flex-wrap: wrap;           /* only wraps on ultra-narrow screens */
        gap: 14px 16px;
        order: 1;
    }
    .footer-links  { order: 2; }
    .copyright     { order: 3; }

    /* Icons: single row, kept to the right of the brand (drops to its
       own right-aligned line only if the screen is too narrow). */
    .footer-top .contact-links {
        flex: 0 0 auto;
        margin-left: auto;
        justify-content: flex-end;
        flex-wrap: nowrap;
        /* 16px flex gap + 8px padding each side = 32px of visible space
           between icons — twice the original 16px. */
        gap: 16px;
    }
    .contact-icon {
        width: 24px;
        height: 24px;
    }

    /* Nav links: their own horizontal row under the brand/icons row. */
    .footer-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px 26px;
        margin: 20px 0 16px;
    }

    /* Copyright (mobile): tighten the gap above it */
    .copyright {
        padding-top: 16px;   /* was 25px */
        margin-top: 6px;
    }
}




/* =====================================================
   REDUCED MOTION
   ===================================================== */


@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}


/* =====================================================
   CATEGORY SQUARES — PERSONAL / HOME / COMING SOON
   ===================================================== */
.scents-panels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
}

.scents-panel-group {
    width: 100%;
    min-width: 0;
    align-items: stretch;
}

.scents-category-panel {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    height: auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.scents-category-panel::before {
    background: linear-gradient(135deg, rgba(247, 245, 240, 0.96), rgba(238, 234, 225, 0.92));
}

.scents-category-title {
    position: relative;
    z-index: 2;
    color: #766b58;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(0.55rem, 0.95vw, 0.78rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

/* =====================================================
   CLICKABLE CATEGORY TILES
   ---------------------------------------------------------
   Personal Fragrance + Home & Linen link to their pages. Each
   shows a "Discover →" cue and lifts on hover so it clearly
   reads as clickable. "Coming soon" stays a dimmed, inert tile.
   ===================================================== */

/* Stack the title above the Discover cue, centred. */
.scents-category-panel--link {
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.5s ease;
}

.scents-category-panel--link .scents-category-title {
    transition: letter-spacing 0.5s ease;
}

/* The "Discover →" cue. */
.scents-category-cta {
    position: relative;
    z-index: 2;
    display: inline-block;
    color: var(--gold);
    font-family: "Montserrat", sans-serif;
    font-size: clamp(0.55rem, 0.95vw, 0.78rem);
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    opacity: 0.9;
}

.scents-category-cta span {
    display: inline-block;
    transition: transform 0.4s ease;
}

/* Underline that grows on hover. */
.scents-category-cta::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover / focus affordances. */
.scents-category-panel--link:hover,
.scents-category-panel--link:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 22px 46px -26px rgba(38, 36, 31, 0.55);
}

.scents-category-panel--link:hover .scents-category-title,
.scents-category-panel--link:focus-visible .scents-category-title {
    letter-spacing: 0.32em;
}

.scents-category-panel--link:hover .scents-category-cta,
.scents-category-panel--link:focus-visible .scents-category-cta {
    opacity: 1;
}

.scents-category-panel--link:hover .scents-category-cta::after,
.scents-category-panel--link:focus-visible .scents-category-cta::after {
    transform: scaleX(1);
}

.scents-category-panel--link:hover .scents-category-cta span,
.scents-category-panel--link:focus-visible .scents-category-cta span {
    transform: translateX(4px);
}

.scents-category-panel--link:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* Coming-soon tile: clearly not clickable. */
.scents-category-panel--soon {
    cursor: default;
    opacity: 0.72;
}

/* Drop the dots to their own line below "Coming soon" (all viewports). */
.scents-category-panel--soon .scents-category-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .scents-category-panel--link,
    .scents-category-cta span {
        transition: none;
    }
    .scents-category-panel--link:hover,
    .scents-category-panel--link:focus-visible {
        transform: none;
    }
}

/* No labels or catalogue content remain outside the square. */
.scents-panel-label {
    display: none;
}

@media (max-width: 700px) {
    /* Keep all three collections side-by-side over the video (like
       desktop), just scaled down so everything is visible at once. */
    .scents {
        padding: 52px 5%;
    }

    .scents-heading {
        margin-bottom: 22px;
    }
    .scents-heading h2 {
        font-size: clamp(1.6rem, 7vw, 2.2rem);
    }

    .scents-panels {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        max-width: none;
    }

    .scents-panel-group {
        width: 100%;
    }

    .scents-category-panel {
        aspect-ratio: 1 / 1;
        width: 100%;
        height: auto;
        min-height: 0;
        /* thinner frame — the desktop 6px reads too heavy on the
           smaller mobile squares. */
        border-width: 2.5px;
    }

    /* Keep the CTA symmetrical across tiles: reserve a fixed two-line
       height for the title so a 1-line and a 2-line label push "Shop
       Now" to the same position (like desktop). */
    .scents-category-panel--link {
        justify-content: center;
        gap: 8px;
    }

    .scents-category-title {
        font-size: clamp(0.4rem, 1.9vw, 0.6rem);
        letter-spacing: 0.1em;
        line-height: 1.25;
        min-height: 2.5em;
        display: flex;
        align-items: center;
        justify-content: center;
        /* breathing room so labels don't touch the tile edges */
        padding: 0 10px;
    }

    .scents-category-cta {
        font-size: clamp(0.38rem, 1.7vw, 0.55rem);
        letter-spacing: 0.1em;
    }

    /* "Coming soon" — drop the dots to a second line (fills the same
       two-line height as the other tiles). Desktop stays one line. */
    .scents-category-panel--soon .scents-category-title {
        flex-direction: column;
        gap: 1px;
    }
}


/* =====================================================
   SCENTS BACKGROUND VIDEO  (seamless loop)
   ---------------------------------------------------------
   A looping video sits BEHIND the three cream squares, inset
   from the section edges so the dark #26241f section colour
   frames it as a border/margin on all sides. Two stacked
   <video> elements crossfade near the loop point so playback
   looks continuous — it never visibly restarts (driven by
   script.js, SCENTS VIDEO block). Autoplay requires muted (it is).

   KNOBS:
   - Border/margin thickness: the `inset` on .scents-video
     (40px desktop). Larger = thicker dark frame; 0 = video
     reaches the section padding edge.
   - Rounded corners: border-radius on .scents-video.
   - Tint strength (readability behind the squares): the alpha
     in .scents-video-tint.
   - Crossfade length: CROSSFADE_MS in script.js (keep <= the
     opacity transition below).
   ===================================================== */

.scents-video {
    position: absolute;
    /* Full-bleed: the video fills the whole section, edge to edge. */
    inset: 0px;
    z-index: 0;
    overflow: hidden;
    /* Square edges, no dark frame around the video. */
    border-radius: 0;
    background: transparent;
    pointer-events: none;
}

/* Both videos stack and fill the frame. Only the active one is
   opaque; the other waits at opacity 0 and fades in to take over
   near the loop point (handled in script.js). */
.scents-video-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;

    opacity: 0;
    transition: opacity 0.9s ease;
    will-change: opacity;
}

.scents-video-el.is-active {
    opacity: 1;
}

/* Soft tint over the footage so the cream squares + labels stay
   readable and the video doesn't fight them. */
.scents-video-tint {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(38, 36, 31, 0.30),
            rgba(38, 36, 31, 0.42)
        );
}


/* ----- Tablet ----- */
@media (max-width: 900px) {
    .scents-video {
        inset: 0px;
    }
}


/* ----- Mobile ----- */
@media (max-width: 700px) {
    .scents-video {
        inset: 0px;
        border-radius: 0;
    }
}




/* =========================================================
   CART  (icon + badge + slide-in drawer)
   ---------------------------------------------------------
   Ported from the eau de parfum collection page so the cart
   looks and behaves identically on the landing page. It uses
   the SAME localStorage key (winsMoriCart), so items added on
   the collection page appear here too.

   The cart lives inside .nav-actions (to the LEFT of the
   search) on the top bar at every width, so it sits in the
   same spot on desktop, iPad and mobile — the existing
   .nav-actions positioning (desktop + the 1150px block above)
   handles all three.
   ========================================================= */

/* ----- Navbar cart button ----- */
.nav-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 34px;
    margin-left: 4px;
    padding: 0;

    border: 0;
    background: transparent;
    color: #171614;

    cursor: pointer;

    transition: color 0.3s ease, transform 0.3s ease;
}

.nav-cart svg {
    width: 22px;
    height: 19px;
}

.nav-cart:hover {
    color: var(--gold);
}

/* Count badge — hidden until there is at least one item. */
.nav-cart-badge {
    position: absolute;
    top: -3px;
    right: -3px;

    min-width: 16px;
    height: 16px;
    padding: 0 4px;

    display: none;
    align-items: center;
    justify-content: center;

    border-radius: 999px;
    background: var(--muted);
    color: var(--cream);

    font-family: "Montserrat", sans-serif;
    font-size: 0.52rem;
    font-weight: 600;
    line-height: 1;
}

.nav-cart.has-items .nav-cart-badge {
    display: inline-flex;
}


/* ----- Bump / shake when an item is added ----- */
@keyframes cartBump {
    0%, 100% { transform: translateY(0) rotate(0); }
    15%      { transform: translateY(-4px) rotate(-9deg); }
    30%      { transform: translateY(0) rotate(7deg); }
    45%      { transform: translateY(-2px) rotate(-5deg); }
    60%      { transform: translateY(0) rotate(3deg); }
    80%      { transform: rotate(-1deg); }
}

.nav-cart.bump {
    animation: cartBump 0.6s ease;
}


/* ----- Overlay + slide-in drawer ----- */
body.cart-open {
    overflow: hidden;
}

.cart-overlay {
    position: fixed;
    inset: 0;

    background: rgba(23, 22, 20, 0.45);

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.4s ease, visibility 0.4s ease;

    z-index: 200;
}

.cart-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;

    width: min(460px, 92vw);
    height: 100%;

    display: flex;
    flex-direction: column;

    background: var(--cream);
    box-shadow: -12px 0 40px rgba(23, 22, 20, 0.18);

    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);

    z-index: 210;
}

.cart-drawer.active {
    transform: translateX(0);
}

.cart-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 26px 26px 18px;
    border-bottom: 1px solid rgba(23, 22, 20, 0.1);
}

.cart-drawer-header h2 {
    margin: 0;

    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    font-size: 1.6rem;
    letter-spacing: 0.02em;

    color: var(--text, #171614);
}

.cart-drawer-close {
    border: 0;
    background: transparent;
    color: var(--muted);

    font-size: 1.7rem;
    line-height: 1;

    cursor: pointer;

    transition: color 0.3s ease, transform 0.3s ease;
}

.cart-drawer-close:hover {
    color: var(--gold);
    transform: rotate(90deg);
}

/* The items list is the ONLY scrolling part.
   flex: 0 1 auto is the key: the list takes only its CONTENT height when
   short — so the footer below sits right under the last item (filling
   the spot a deleted item vacated, no gap) — and only SHRINKS + scrolls
   when the items would overflow the drawer, at which point the footer
   pins to the bottom. (flex-grow is 0, so the list never stretches to
   fill leftover space and never pushes the footer down.)
   overflow-y: auto adds the right-side scrollbar only when needed; the
   touch rules give momentum finger-scrolling on mobile and keep the
   scroll contained. Trackpad + mouse wheel scroll it natively. Same
   behaviour in desktop / iPad / mobile. */
.cart-items {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    padding: 8px 26px 0;
}

.cart-empty {
    padding: 46px 0 0;
    text-align: center;

    color: #7a7164;
    font-family: "Montserrat", sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.cart-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 14px;

    padding: 16px 0;
    border-bottom: 1px solid rgba(23, 22, 20, 0.08);
}

/* The last item sits right above the footer now (footer follows the
   items), so drop its divider for a clean seam. */
.cart-item:last-child {
    border-bottom: none;
}

/* Product thumbnail on the left of each row. Stretches to the
   height of the name/size/price block. */
.cart-item-thumb {
    width: 54px;
    align-self: stretch;       /* top = name, bottom = price */
    overflow: hidden;
    border-radius: 3px;
    background: #e7e2d8;
    cursor: pointer;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.cart-item-thumb:hover {
    box-shadow: 0 0 0 2px var(--gold-bright);
    transform: translateY(-1px);
}

.cart-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.cart-item-name {
    margin: 0;

    font-family: "Cormorant Garamond", serif;
    font-size: 1.15rem;
    line-height: 1.12;

    color: #171614;
}

/* Category line (Perfume Mist / Eau de Parfum) under the name. */
.cart-item-type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 2px 0 0;

    font-family: "Montserrat", sans-serif;
    font-size: 0.56rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;

    color: var(--gold);
}

/* Home & Linen thumbnails: match the collection grid crop. */
.cart-item--linen .cart-item-thumb img {
    object-position: center center;
    transform: translateY(-6.12%) scale(1.18);
    transform-origin: center center;
}

.cart-item-size {
    margin: 3px 0 0;

    font-family: "Montserrat", sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: #7a7164;
}

/* Price line below the size (₱-formatted; "—" if none). */
.cart-item-price {
    margin: 5px 0 0;

    font-family: "Montserrat", sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;

    color: var(--muted);
}

.cart-item-qty {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cart-qty-btn {
    width: 24px;
    height: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--muted);
    background: transparent;
    color: var(--muted);

    font-size: 0.9rem;
    line-height: 1;

    cursor: pointer;

    transition: background 0.3s ease, color 0.3s ease;
}

.cart-qty-btn:hover {
    background: var(--muted);
    color: var(--cream);
}

.cart-qty-value {
    min-width: 16px;
    text-align: center;

    font-family: "Montserrat", sans-serif;
    font-size: 0.72rem;

    color: #171614;
}

.cart-item-remove {
    border: 0;
    background: transparent;
    color: #b0a89a;

    font-size: 1.2rem;
    line-height: 1;

    cursor: pointer;

    transition: color 0.3s ease;
}

.cart-item-remove:hover {
    color: #a8736a;
}

/* Footer is a fixed (non-shrinking) flex child that sits BELOW the
   scrolling items list. Because .cart-items grows to fill the drawer
   when full and shrinks to its content when short, this footer follows
   the last item on a short cart and pins to the bottom on a full one —
   it's never scrolled out of view. The border-top returns as a clean
   seam between the scrolling list and the pinned footer. */
.cart-drawer-footer {
    flex-shrink: 0;
    padding: 18px 26px 26px;
    border-top: 1px solid rgba(23, 22, 20, 0.1);
    background: var(--cream);
}

.cart-total-items {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    margin-bottom: 14px;

    font-family: "Montserrat", sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #7a7164;
}

.cart-total-items span:last-child {
    font-weight: 600;
    color: var(--muted);
}

/* "Total" bar (Option A) — quiet WHITE bar so the eye rests on it and
   moves on to the button. Clean uppercase label + an elegant serif ₱
   number. No more dark double-height gold block. */
.cart-total-bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    width: 100%;
    margin-bottom: 16px;
    padding: 14px 20px;

    border: 1px solid rgba(41, 39, 34, 0.14);
    border-radius: 6px;
    background: #ffffff;
    color: var(--muted);
}

.cart-total-bar-label {
    font-family: "Montserrat", sans-serif;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a7164;
}

.cart-total-bar-amount {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--muted);
}

/* Checkout (Option A) — the warm gold HERO button. This is the one
   element meant to pull the eye and invite the tap, so it's a solid
   warm gold with light text + an arrow, distinct from the site's flat
   outline buttons on purpose.

   MOTION 1 — hover lift + glow: on hover / focus / tap-down the button
   rises ~2px and its glow deepens, so it feels alive only when the
   buyer reaches for it. Honours prefers-reduced-motion (see below). */
.cart-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    width: 100%;
    min-height: 54px;

    border: none;
    border-radius: 6px;
    background: #b08d57;                 /* warm gold */
    color: #ffffff;

    font-family: "Montserrat", sans-serif;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;

    cursor: pointer;

    box-shadow: 0 6px 16px rgba(176, 141, 87, 0.28);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        filter 0.3s ease;
}

.cart-checkout-arrow {
    font-size: 0.9rem;
    line-height: 1;
    transition: transform 0.3s ease;
}

/* Motion 1 — lift + brighten + stronger glow on hover / focus, and the
   press feel on tap-down (works on touch where there's no true hover). */
.cart-checkout:hover,
.cart-checkout:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 12px 28px rgba(176, 141, 87, 0.5);
}

.cart-checkout:hover .cart-checkout-arrow,
.cart-checkout:focus-visible .cart-checkout-arrow {
    transform: translateX(3px);
}

.cart-checkout:active {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

/* Respect reduced-motion: keep the glow change but drop the movement. */
@media (prefers-reduced-motion: reduce) {
    .cart-checkout,
    .cart-checkout-arrow {
        transition: box-shadow 0.3s ease, filter 0.3s ease;
    }
    .cart-checkout:hover,
    .cart-checkout:focus-visible,
    .cart-checkout:active {
        transform: none;
    }
    .cart-checkout:hover .cart-checkout-arrow,
    .cart-checkout:focus-visible .cart-checkout-arrow {
        transform: none;
    }
}


/* ----- Cart mobile tweak ----- */
@media (max-width: 700px) {
    .cart-drawer {
        width: min(390px, 94vw);
    }
}

/* Small category icon on the cart / checkout type line. */
.cart-type-emoji {
    display: inline-block;
    position: relative;
    top: -0.12em;
    height: 1.05em;
    width: auto;
    vertical-align: middle;
    margin-right: 0;
}

/* Clickable category icon in the cart / checkout type line. */
.cart-type-link { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; cursor: pointer; }
.cart-type-link:hover { opacity: 0.7; }

/* =====================================================
   LANDING CART LIGHTBOX (from a cart thumbnail)
   Opens over the landing page; never navigates away.
   ===================================================== */
.wm-cartlb {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(20, 18, 16, 0.62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.wm-cartlb.active { opacity: 1; visibility: visible; }
body.wm-cartlb-open { overflow: hidden; }

.wm-cartlb-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: min(420px, 92vw);
}

.wm-cartlb-close {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(247, 245, 240, 0.92);
    color: #26241f;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.wm-cartlb-image {
    width: min(320px, 78vw);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 8px;
    background: #e7e2d8;
}
.wm-cartlb-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.wm-cartlb-panel { text-align: center; color: #f7f5f0; }

.wm-cartlb-type {
    margin: 0 0 4px;
    font-family: "Montserrat", sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-bright);
}
.wm-cartlb-name {
    margin: 0 0 12px;
    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    font-size: 1.7rem;
    line-height: 1.1;
    color: #ffffff;
}

.wm-cartlb-qty {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.wm-cartlb-qty .cart-qty-btn {
    background: rgba(247, 245, 240, 0.14);
    border: 1px solid rgba(247, 245, 240, 0.5);
    color: #f7f5f0;
}
.wm-cartlb-qtyval {
    min-width: 1.2em;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 0.95rem;
    color: #f7f5f0;
}

.wm-cartlb-viewcart {
    display: block;
    margin: 0 auto;
    padding: 11px 26px;
    border: 1px solid var(--gold-bright);
    background: transparent;
    color: var(--gold-bright);
    font-family: "Montserrat", sans-serif;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}
.wm-cartlb-viewcart:hover { background: var(--gold-bright); color: #26241f; }

@media (prefers-reduced-motion: reduce) {
    .wm-cartlb { transition: none; }
}

/* Empty-cart "Shop Now" call-to-action — light pink glittery tab. */
.cart-empty { text-align: center; }
.cart-empty-shop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 10px auto 50px;
    padding: 11px 26px;
    border-radius: 999px;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    text-shadow: 0 1px 6px rgba(110, 74, 60, 0.4);
    background:
        linear-gradient(120deg, #c8a091, #ab7c6c, #d8bcae, #b58876, #c8a091);
    background-size: 220% 100%;
    box-shadow: 0 10px 26px -12px rgba(150, 110, 95, 0.55);
    animation: cartShopShimmer 5.5s linear infinite;
    transition: filter 0.3s ease, transform 0.3s ease;
}
.cart-empty-shop span { display: inline-block; transition: transform 0.35s ease; }
.cart-empty-shop:hover { filter: brightness(1.06); transform: translateY(-1px); }
.cart-empty-shop:hover span { transform: translateX(4px); }
@keyframes cartShopShimmer { to { background-position: 220% 0; } }
@media (prefers-reduced-motion: reduce) {
    .cart-empty-shop { animation: none; }
}