/* =========================================================
   WINS MORI — EAU DE PARFUM COLLECTIONS
   COLLECTION CSS v41
   ---------------------------------------------------------
   v41 changes:
   1) VIEW NOTES ALWAYS VISIBLE ON GRID (not just hover):
      .image-view now shows by default on desktop too (it was
      already always-on for mobile). Hover just nudges it a
      touch. The notes flip still works exactly as before.
   2) PARTNER + CONNECT side-by-side row added BELOW the closing
      block. Left = PARTNER (darker #e8e2d7), right = CONNECT
      (lighter #f7f5f0). Stacks on mobile. Reuses .reseller /
      .contact / .button-light styles ported from the landing.
   3) CLOSING block background switched to #f7f5f0 (was --cream).
   4) CART FOOTER updated to the landing page's newer look:
      - items list drives the "footer follows items / pins when
        full" behaviour (flex: 0 1 auto).
      - quiet WHITE Total bar with a serif ₱ number (was the dark
        double-height gold bar).
      - gold "Complete your order" hero button + arrow, Motion 1
        (hover lift + glow), replacing the dark Checkout button.
   ---------------------------------------------------------
   (Earlier version notes retained below.)
   v40: white search bar. v39–v22: lightbox / carousel history.
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

.collection-page *,
.collection-page *::before,
.collection-page *::after {
    box-sizing: border-box;
}


/* =========================================================
   PAGE
   ========================================================= */

body {
    background: #f7f5f0;
    color: #171614;
}


/* =========================================================
   BRAND TOKENS
   ========================================================= */

:root {
    --gold: #b89968;
    --gold-bright: #d8c19a;
    --cream: #eeeae1;
    --background: #f7f5f0;
    --text: #171614;
    --muted: #292722;

    /* SOFT & RADIANT */
    --blush-light: #f9efec;
    --blush-deep: #f0ddd7;
    --blush-accent: #a8736a;

    /* WOODS & EMBER */
    --slate-light: #eaeef4;
    --slate-deep: #d6dfec;
    --slate-accent: #3f5680;

    /* TIMELESS ESSENCE */
    --sage-light: #e9efe9;
    --sage-deep: #d6e3da;
    --sage-accent: #2f6b55;
}


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

.collection-navbar {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    z-index: 100;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 12px;

    padding: 22px 6% 16px;

    color: var(--text);
    background: var(--cream);

    border-bottom: 1px solid transparent;

    transition:
        background 0.4s ease,
        padding 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.collection-navbar.scrolled {
    padding: 22px 6% 16px;

    background: var(--background);

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

    box-shadow:
        0 6px 24px rgba(23, 22, 20, 0.05);
}


/* =========================================================
   BRAND
   ========================================================= */

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

.collection-navbar .logo {
    display: inline-block;

    color: var(--text);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 1.7rem;
    font-weight: 500;

    letter-spacing: 0.32em;
    padding-left: 0.32em;

    text-decoration: none;
}

.collection-navbar .logo-mark {
    width: auto;
    height: 1.05em;

    vertical-align: middle;

    margin: 0 -0.15em;

    position: relative;
    top: -0.08em;
    left: -0.11em;
}

.collection-navbar .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: var(--muted);
}


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

.collection-navbar .navbar-nav-row {
    position: absolute;

    top: 50%;
    left: 6%;
    right: 6%;

    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: auto;

    white-space: nowrap;
}

.collection-navbar nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 6px;

    white-space: nowrap;
}

.collection-navbar .nav-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.collection-navbar nav a {
    position: relative;

    padding: 7px 10px;

    color: var(--text);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 0.65rem;
    font-weight: 400;

    letter-spacing: 0.12em;
    text-transform: uppercase;

    text-decoration: none;

    transition:
        color 0.3s ease;
}

.collection-navbar nav a::after {
    content: "";

    position: absolute;

    left: 10px;
    right: 10px;
    bottom: 1px;

    height: 1px;

    background: var(--gold);

    transform: scaleX(0);
    transform-origin: center;

    transition:
        transform 0.3s ease;
}

.collection-navbar nav a:hover {
    color: var(--gold);
}

.collection-navbar nav a:hover::after {
    transform: scaleX(1);
}


/* =========================================================
   SEARCH
   ========================================================= */

.collection-navbar .nav-search {
    margin-left: 4px;
}

.collection-navbar .search-result::after {
    content: none;
}

.collection-navbar .nav-search.active .search-input {
    background: #ffffff;
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

.collection-navbar .menu-toggle {
    display: none;

    position: absolute;

    top: 20px;
    right: 6%;

    padding: 0;

    border: 0;

    background: transparent;
    color: var(--text);

    font-size: 1.4rem;

    cursor: pointer;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.collection-hero h1,
.gallery-heading h2,
.fragrance-details h3,
.next-heading h2,
.next-panel h3,
.collection-closing h2 {
    font-family:
        "Cormorant Garamond",
        serif;

    font-weight: 500;
    line-height: 1.05;
}

.eyebrow {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 0.65rem;
    font-weight: 500;

    letter-spacing: 0.28em;
    text-transform: uppercase;
}


/* =========================================================
   COLLECTION HERO
   ========================================================= */

.collection-hero {
    position: sticky;
    top: 0;
    z-index: 40;

    min-height: auto;

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

    padding: 100px 7% 0;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(216, 193, 154, 0.20),
            transparent 44%
        ),
        linear-gradient(
            180deg,
            var(--blush-light) 0%,
            var(--background) 100%
        );

    text-align: center;
}

.collection-hero-inner {
    width: min(850px, 100%);
    margin: 0 auto;
}

.collection-hero .eyebrow {
    color: var(--gold);
    margin-bottom: 8px;
}


/* =========================================================
   GALLERY CAROUSEL WRAPPER
   ========================================================= */

.gallery-carousel {
    position: relative;
    width: 100%;
}

.gallery-arrow {
    display: none;
}


/* =========================================================
   FRAGRANCE GALLERY — DESKTOP
   ========================================================= */

.fragrance-gallery {
    width: min(1240px, 95%);

    margin: 0 auto;

    padding: 16px 0 100px;

    display: grid;

    grid-template-columns:
        repeat(8, minmax(0, 1fr));

    column-gap: 20px;
    row-gap: 55px;

    align-items: start;
}


/* =========================================================
   EMPTY GALLERY HEADING
   ========================================================= */

.gallery-heading {
    grid-column: 1 / -1;

    max-width: 600px;

    margin:
        0 auto
        5px;

    text-align: center;
}

.gallery-heading .eyebrow {
    color: var(--gold);
    margin-bottom: 6px;
}

.gallery-heading h2 {
    margin: 0 0 14px;

    color: var(--text);

    font-size:
        clamp(2.5rem, 4vw, 4rem);
}

.gallery-heading > p:last-child {
    max-width: 480px;

    margin: 0 auto;

    color: #6c6458;

    font-size: 0.75rem;
    line-height: 1.6;

    letter-spacing: 0.04em;
}


/* =========================================================
   FRAGRANCE ITEMS
   ========================================================= */

.fragrance-item {
    grid-column: span 2;

    width: 100%;
    min-width: 0;

    margin: 0;

    transition:
        transform 0.6s
        cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fragrance-item:hover {
    transform: translateY(-6px);
}


/* =========================================================
   SECOND ROW — 3 CENTERED ITEMS
   ========================================================= */

.fragrance-item:nth-child(6) {
    grid-column: 2 / span 2;
}

.fragrance-item:nth-child(7) {
    grid-column: 4 / span 2;
}

.fragrance-item:nth-child(8) {
    grid-column: 6 / span 2;
}


/* =========================================================
   TIMELESS ESSENCE — 2 ITEMS CENTERED (DESKTOP)
   ========================================================= */

.next-panel--timeless .fragrance-gallery {
    grid-template-columns:
        repeat(8, minmax(0, 1fr));

    justify-items: center;
}

.next-panel--timeless .fragrance-item:nth-child(2) {
    grid-column: 3 / span 2;
}

.next-panel--timeless .fragrance-item:nth-child(3) {
    grid-column: 5 / span 2;
}


/* =========================================================
   IMAGE BUTTON
   ========================================================= */

.fragrance-image-button {
    display: block;

    width: 100%;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    text-align: left;
}


/* =========================================================
   IMAGE WRAPPER
   ========================================================= */

.fragrance-image-wrap {
    position: relative;

    width: 100%;

    aspect-ratio: 3 / 4;

    overflow: hidden;

    border-radius: 6px;

    background: transparent;

    transition:
        box-shadow 0.6s ease,
        border-color 0.6s ease;
}

.fragrance-image-wrap::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.14),
            transparent 45%
        );

    pointer-events: none;
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.fragrance-image-wrap img {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    opacity: 1;

    transition:
        opacity 0.15s ease,
        transform 0.7s
        cubic-bezier(0.2, 0.65, 0.2, 1);
}

.fragrance-item:hover
.fragrance-image-wrap img {
    transform: scale(1.045);
}


/* =========================================================
   NOTES IMAGE TRANSITION
   ========================================================= */

.fragrance-image-wrap img.image-transitioning {
    opacity: 0;
}


/* =========================================================
   BROKEN IMAGE
   ========================================================= */

.fragrance-image-wrap.image-error {
    display: flex;

    align-items: center;
    justify-content: center;
}

.fragrance-image-wrap.image-error::before {
    content: "Image unavailable";

    color: var(--muted);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 0.55rem;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* =========================================================
   VIEW NOTES OVERLAY
   ---------------------------------------------------------
   v41 (REQUEST 3): the VIEW NOTES label is now ALWAYS VISIBLE
   on the grid — desktop included (it was already always-on for
   mobile). Previously it was opacity:0 until hover. Now it sits
   at full opacity by default; hover just lifts it slightly so
   there's still a subtle hover cue. The notes flip is unchanged.
   ========================================================= */

.image-view {
    position: absolute;

    left: 50%;
    top: 85%;

    transform:
        translate(-50%, -50%);

    /* v41: visible by default (was 0) */
    opacity: 1;

    padding: 10px 16px;

    text-indent: 0.2em;

    border:
        1px solid
        rgba(255, 255, 255, 0.85);

    color: #ffffff;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 0.53rem;

    letter-spacing: 0.2em;
    text-transform: uppercase;

    /* Keep "VIEW NOTES" on a single line — without this it wraps to two
       rows once the cards narrow at the 3-column breakpoint. */
    white-space: nowrap;

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

    backdrop-filter: blur(5px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}

/* Hover keeps it visible and gives a subtle lift as a cue. */
.fragrance-item:hover
.image-view {
    opacity: 1;

    transform:
        translate(-50%, -55%);
}


/* =========================================================
   NOTES ACTIVE
   Hide VIEW NOTES completely while notes image is displayed.
   ========================================================= */

.fragrance-image-button.notes-active
.image-view {
    opacity: 0;

    pointer-events: none;
}


/* =========================================================
   FRAGRANCE DETAILS
   ========================================================= */

.fragrance-details {
    text-align: center;

    padding:
        13px 1px 0;
}

.fragrance-name {
    display: inline-flex;

    align-items: baseline;
    justify-content: center;

    gap: 9px;

    min-width: 0;
}

.fragrance-number {
    margin: 0;

    color: var(--gold);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 0.9rem;

    letter-spacing: 0.04em;

    transition:
        color 0.4s ease;
}

.fragrance-item:hover
.fragrance-number {
    color: var(--panel-accent);
}

.fragrance-details h3 {
    position: relative;

    display: inline-block;

    margin: 0;

    padding-bottom: 3px;

    font-size:
        clamp(1.05rem, 1.3vw, 1.35rem);

    letter-spacing: -0.01em;
}


/* =========================================================
   NAME SIZE GUARD
   ========================================================= */

.next-panel--gallery
.fragrance-details h3 {
    font-size:
        clamp(1.05rem, 1.3vw, 1.35rem);
}


/* =========================================================
   FRAGRANCE NAME UNDERLINE
   ========================================================= */

.fragrance-details h3::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background: var(--gold);

    transform: scaleX(0);
    transform-origin: left center;

    transition:
        transform 0.5s
        cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fragrance-item:hover
.fragrance-details h3::after {
    transform: scaleX(1);
}


/* =========================================================
   EAU DE PARFUM
   ========================================================= */

.fragrance-type {
    margin: 4px 0 0;

    color: #7a7164;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 0.62rem;

    letter-spacing: 0.13em;

    white-space: nowrap;
}


/* =========================================================
   SENSORY LINE
   ---------------------------------------------------------
   One evocative sentence per fragrance, sitting between the
   EAU DE PARFUM label and the size buttons. Roman serif at a
   lighter colour — legible over the pale washes, and distinct
   from the name above by size rather than style.

   Left-aligned, full card width, so the first character sits
   flush with the left edge of the product image above it. The
   rest of the card stays centred; this block is the exception
   on purpose. Row alignment is held by min-height rather than
   a width cap, so copy of different lengths still leaves the
   size buttons level.
   ========================================================= */

.fragrance-blurb {
    /* Held 6.5% clear of the image on each side, so the copy sits as
       an inset block rather than running edge to edge. */
    max-width: 87%;

    margin: 10px 6.5% 0;

    color: #6c6458;

    font-family:
        "Cormorant Garamond",
        serif;

    /* One size for every fragrance. Set in rem, not a relative unit,
       so nothing upstream can scale one card's copy differently from
       another's. */
    font-size: 0.95rem;

    line-height: 1.5;

    /* Centred, matching the name, type label and size buttons — the
       whole card is one centred composition. */
    text-align: center;

    /* Three lines of the size above. In em, so it tracks font-size
       automatically and the size buttons stay level across a row. */
    min-height: 4.5em;
}


/* =========================================================
   FRAGRANCE SIZES
   ========================================================= */

.fragrance-sizes {
    display: flex;

    align-items: flex-start;
    justify-content: center;

    gap: 12px;

    width: 100%;

    margin-top: 7px;

    text-align: center;
}

.fragrance-size {
    display: inline-flex;

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

    width: 54px;
    height: 22px;

    padding: 0;

    border: 1px solid var(--muted);
    outline: 0;

    background: transparent;

    color: var(--muted);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 0.6rem;
    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.12em;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background 0.4s ease,
        color 0.4s ease,
        border-color 0.4s ease;
}

.fragrance-size:hover,
.fragrance-size:focus-visible,
.fragrance-size:active {
    background: var(--muted);
    color: var(--cream);
    border-color: var(--muted);
}


/* =========================================================
   NEXT GRID
   ========================================================= */

.next-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 16px;

    max-width: 1600px;

    margin: 0 auto;
}


/* =========================================================
   NEXT PANELS
   ========================================================= */

.next-panel {
    position: relative;

    overflow: hidden;

    display: flex;

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

    min-height: 795px;

    padding: 20px 40px;

    border-radius: 8px;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 34%,
            var(--panel-glow),
            transparent 58%
        ),
        linear-gradient(
            150deg,
            var(--panel-light),
            var(--panel-deep)
        );

    box-shadow:
        0 14px 34px
        rgba(23, 22, 20, 0.08);

    transition:
        transform 0.6s
        cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.6s ease;
}

.next-panel:hover {
    transform: translateY(-6px);

    box-shadow:
        0 26px 55px
        rgba(23, 22, 20, 0.14);
}

.next-panel-inner {
    position: relative;
    z-index: 2;

    width: min(420px, 100%);
}

.next-panel .eyebrow {
    color: var(--panel-accent);

    margin-bottom: 2px;
}

.next-panel h3 {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(2.2rem, 4vw, 3.4rem);

    letter-spacing: -0.02em;
}

.next-panel h3 span {
    color: var(--panel-accent);

    font-style: italic;
}

.next-panel-introduction {
    margin: 2px auto 0;

    max-width: 340px;

    color:
        rgba(23, 22, 20, 0.62);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 0.78rem;
    font-weight: 300;

    line-height: 1.75;

    letter-spacing: 0.03em;
}


/* =========================================================
   TEXT-ONLY PANELS
   ========================================================= */

.next-panel--ember,
.next-panel--timeless {
    align-items: flex-start;

    padding-top: 30px;
}


/* =========================================================
   GALLERY PANELS
   ========================================================= */

.next-panel--gallery {
    flex-direction: column;

    align-items: center;
    justify-content: flex-start;

    min-height: auto;

    padding:
        15px 40px 52px;
}

.next-panel--gallery:hover {
    transform: none;

    box-shadow:
        0 14px 34px
        rgba(23, 22, 20, 0.08);
}

.next-panel--gallery .next-panel-inner {
    width: min(620px, 100%);
    margin-bottom: 6px;
}

.next-panel--gallery .fragrance-gallery {
    padding: 0;
    margin-top: -30px;
}


/* =========================================================
   PANEL COLORS
   ========================================================= */

.next-panel--radiant {
    --panel-light: var(--blush-light);
    --panel-deep: var(--blush-deep);
    --panel-accent: var(--blush-accent);
    --panel-glow:
        rgba(168, 115, 106, 0.10);
}

.next-panel--ember {
    --panel-light: var(--slate-light);
    --panel-deep: var(--slate-deep);
    --panel-accent: var(--slate-accent);
    --panel-glow:
        rgba(63, 86, 128, 0.10);
}

.next-panel--timeless {
    --panel-light: var(--sage-light);
    --panel-deep: var(--sage-deep);
    --panel-accent: var(--sage-accent);
    --panel-glow:
        rgba(47, 107, 85, 0.10);
}


/* =========================================================
   PANEL BUTTON
   ========================================================= */

.panel-button {
    position: relative;

    display: inline-flex;

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

    min-height: 48px;

    padding: 0 30px;

    border:
        1px solid
        var(--panel-accent);

    background: transparent;

    color: var(--panel-accent);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 0.62rem;
    font-weight: 500;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    text-decoration: none;

    transition:
        background 0.4s ease,
        color 0.4s ease,
        border-color 0.4s ease;
}

.panel-button:hover,
.panel-button:focus-visible {
    background: var(--panel-accent);

    color: var(--background);

    border-color: var(--panel-accent);
}


/* =========================================================
   PARTNER + CONNECT  —  side-by-side row  (v41, REQUEST 1)
   ---------------------------------------------------------
   Sits BELOW the closing block. LEFT half = PARTNER WITH US
   (darker #e8e2d7), RIGHT half = CONNECT WITH US (lighter
   #f7f5f0). Each half fills its own colour edge-to-edge and
   both are the same height. Stacks on mobile (PARTNER on top),
   handled in the 700px block. The .reseller / .contact /
   .button-light styles below are ported from the landing page.
   ========================================================= */

.partner-connect-row {
    display: grid;
    /* CONNECT half moved into the shared site footer, so PARTNER now
       spans the full width as a single pre-footer band. */
    grid-template-columns: 1fr;
    align-items: stretch;
}

.partner-connect-row .reseller,
.partner-connect-row .contact {
    padding: 150px 10%;
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* LEFT half — PARTNER, darker background. */
.partner-connect-row .reseller {
    background: #e8e2d7;
}

/* RIGHT half — CONNECT, lighter (matches the page / hero base). */
.partner-connect-row .contact {
    background: linear-gradient(135deg, #eeeae1, #f7f5f0);
}

/* Mirrors the landing page's PARTNER WITH US section exactly. The
   heading used to be scaled down to fit a half-width panel; CONNECT
   has since moved into the footer and this band is full width, so the
   reason for shrinking it is gone. Keep in step with .reseller h2 in
   ../../style.css. */
.partner-connect-row .reseller h2,
.partner-connect-row .contact h2 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    line-height: 1.05;
    font-size: clamp(3.5rem, 6vw, 6rem);
    color: var(--text);
}

.partner-connect-row .reseller .eyebrow,
.partner-connect-row .contact .eyebrow {
    color: #766b58;
}

.partner-connect-row .reseller h2 {
    margin: 20px 0;
}

.partner-connect-row .contact h2 {
    margin: 0 0 34px;
}

/* No font-size / weight / line-height here on purpose: the landing's
   rule sets none either, so the copy inherits body (Montserrat 300,
   line-height 1.7) from ../../style.css and the two pages match. */
.partner-connect-row .reseller > p:not(.eyebrow) {
    max-width: 600px;
    margin: 0 auto 35px;
    color: #68645d;
}

/* "Brand Partnerships" outline button (ported from landing). */
.partner-connect-row .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-family: "Montserrat", sans-serif;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition:
        background 0.4s ease,
        color 0.4s ease,
        border-color 0.4s ease;
}

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

/* CONNECT links row inside the right half. */
.partner-connect-row .contact-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 45px;
    margin-top: 0;
}

.partner-connect-row .contact-link {
    display: inline-block;
    font-family: "Montserrat", sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text);
    transition: transform 0.4s ease;
}

.partner-connect-row .contact-link:hover {
    transform: scale(1.12);
}

.partner-connect-row .contact-icon {
    width: 20px;
    height: 20px;
    margin-right: 2px;
    vertical-align: middle;
    object-fit: contain;
}


/* The old standalone CONTACT section was replaced by the shared site
   footer (styled in style.css); its overrides lived here and are gone
   so they no longer shift the footer's social row. */


/* =========================================================
   CLOSING
   ---------------------------------------------------------
   v41 (REQUEST 1 note): background switched from --cream to
   #f7f5f0 so it matches the page / CONNECT half below it.
   ========================================================= */

.collection-closing {
    min-height: 55vh;

    display: flex;
    flex-direction: column;

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

    padding:
        100px 7%
        120px;

    text-align: center;

    background: #f7f5f0;   /* was var(--cream) */
}

.collection-closing .eyebrow {
    color: var(--gold);

    margin-bottom: 20px;
}

.collection-closing h2 {
    margin:
        0 0 38px;

    font-size:
        clamp(2.2rem, 4vw, 4.4rem);
}


/* =========================================================
   BACK BUTTON
   ========================================================= */

.collection-page .back-button,
.back-button {
    position: relative;

    display: inline-flex !important;

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

    min-height: 50px;

    padding: 0 28px;

    border:
        1px solid #292722 !important;

    background: transparent;

    color: #292722;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 0.62rem;
    font-weight: 500;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    text-decoration: none;

    transition:
        background 0.4s ease,
        color 0.4s ease,
        border-color 0.4s ease;
}

.collection-page .back-button:hover,
.collection-page .back-button:focus-visible,
.back-button:hover,
.back-button:focus-visible {
    background: #292722;

    color: #f7f5f0;

    border-color: var(--gold) !important;
}


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

.js .reveal {
    opacity: 0;

    transform:
        translateY(20px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.js .reveal.visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   NAVIGATION — HAMBURGER FROM TABLET DOWN
   ========================================================= */

@media (max-width: 1150px) {

    .collection-navbar {
        padding: 18px 6%;
    }

    .collection-navbar .menu-toggle {
        display: block;
        top: 22px;
        left: 6%;
        right: auto;
    }

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

    .collection-navbar nav {
        position: absolute;
        top: 100%;
        left: 6%;
        right: 6%;
        width: auto;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 22px;
        background: var(--background);
        border: 1px solid rgba(23, 22, 20, 0.1);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    }

    .collection-navbar nav.active {
        display: flex;
    }

    .collection-navbar nav a {
        padding: 9px 12px;
        font-size: 0.68rem;
    }

    .collection-navbar .nav-actions {
        position: absolute;
        top: 18px;
        right: 6%;
        left: auto;
    }

    .collection-navbar .nav-search {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: auto;
        margin-left: 4px;
    }

    .collection-navbar .nav-cart {
        transform: translateX(18px);
    }

    .collection-navbar .nav-cart.bump {
        animation: cartBumpMobile 0.6s ease;
    }

    @keyframes cartBumpMobile {
        0%, 100% { transform: translateX(18px) translateY(0) rotate(0); }
        15%      { transform: translateX(18px) translateY(-4px) rotate(-9deg); }
        30%      { transform: translateX(18px) translateY(0) rotate(7deg); }
        45%      { transform: translateX(18px) translateY(-2px) rotate(-5deg); }
        60%      { transform: translateX(18px) translateY(0) rotate(3deg); }
        80%      { transform: translateX(18px) rotate(-1deg); }
    }

    .collection-navbar .nav-search .search-input {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        left: auto;
        width: 0;
        max-width: 70vw;
        padding: 0;
        border-width: 0;
        opacity: 0;
        pointer-events: none;
        overflow: hidden;
        transition:
            width 0.3s ease,
            opacity 0.3s ease,
            padding 0.3s ease;
    }

    .collection-navbar .nav-search.active .search-input {
        width: 220px;
        padding: 10px 14px;
        border-width: 1px;
        background: #ffffff;
        opacity: 1;
        pointer-events: auto;
        z-index: 120;
        box-shadow: 0 20px 45px rgba(23, 22, 20, 0.12);
    }

    .collection-navbar .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);
    }
}


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

@media (max-width: 1024px) {

    .fragrance-gallery {
        width: 88%;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        column-gap: 22px;
        row-gap: 50px;
    }

    .fragrance-item,
    .fragrance-item:nth-child(6),
    .fragrance-item:nth-child(7),
    .fragrance-item:nth-child(8) {
        grid-column: auto;

        margin-left: 0;
    }

    /* 7 scents in a 3-column grid leave the 7th alone on the last row,
       flowing to the left column. Center it in the middle column. The
       heading is grid child 1, so the 7th scent is nth-child(8); only
       the two 7-item sections (For Her, For Him) match — Timeless has
       its own 2-column grid handled below. */
    .fragrance-item:nth-child(8) {
        grid-column: 2;
    }

    .next-panel--timeless .fragrance-item:nth-child(2),
    .next-panel--timeless .fragrance-item:nth-child(3) {
        grid-column: auto;
    }

    .next-panel--timeless .fragrance-gallery {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        max-width: 560px;

        justify-items: center;
    }

    .next-panel--timeless .fragrance-item {
        width: 100%;
    }

    .next-panel:not(.next-panel--gallery) {
        min-height: 715px;

        padding:
            148px 32px;
    }

    .next-panel.next-panel--ember,
    .next-panel.next-panel--timeless {
        align-items: center;
        text-align: center;

        padding:
            30px 32px;
    }

    .next-panel--gallery {
        padding:
            30px 32px 45px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {
    html {
        scroll-padding-top: 110px;
    }

    #eaudeparfum,
    #woods-ember,
    #timeless-essence {
        padding-top: 0;
        margin-top: -2px;
    }

    .collection-hero .eyebrow {
        margin-bottom: 0;
    }

    .collection-hero {
        min-height: auto;

        padding:
            96px 8% 0px;
    }

    .collection-introduction {
        max-width: 330px;

        font-size: 0.73rem;

        line-height: 1.8;
    }

    .fragrance-gallery {
        width: 100%;

        display: flex;

        flex-wrap: nowrap;

        overflow-x: auto;

        scroll-snap-type: x mandatory;

        -webkit-overflow-scrolling: touch;

        column-gap: 0;

        scrollbar-width: none;

        padding:
            16px 0 40px;
    }

    .fragrance-gallery::-webkit-scrollbar {
        display: none;
    }

    .next-panel--timeless .fragrance-gallery {
        max-width: none;
    }

    .fragrance-item:not(.carousel-active)
    .fragrance-image-button {
        pointer-events: none;

        cursor: default;
    }

    .next-panel--gallery .fragrance-gallery {
        display: flex;

        flex-wrap: nowrap;

        overflow-x: auto;

        scroll-snap-type: x mandatory;

        -webkit-overflow-scrolling: touch;

        column-gap: 10px;

        scrollbar-width: none;

        padding:
            15px 0 0;

        padding-inline: 0;
    }

    .gallery-heading {
        display: none;
    }

    .fragrance-item,
    .fragrance-item:nth-child(6),
    .fragrance-item:nth-child(7),
    .fragrance-item:nth-child(8) {

        grid-column: auto;

        flex:
            0 0 86%;

        max-width: 86%;

        scroll-snap-align: center;

        margin: 0;

        padding: 0;
    }

    .next-panel--gallery .fragrance-gallery::before,
    .next-panel--gallery .fragrance-gallery::after {
        content: "";
        flex: 0 0 calc(7% - 10px);
        align-self: stretch;
    }

    .fragrance-item:last-child {
        margin-bottom: 0;
    }

    .fragrance-item:hover {
        transform: none;
    }

    .js .fragrance-item.reveal {
        opacity: 1;

        transform: none;
    }

    .fragrance-image-wrap {
        box-shadow: none;

        max-height: 70vh;
    }

    .fragrance-item.carousel-active
    .fragrance-image-button {
        pointer-events: auto;

        cursor: pointer;
    }

    .gallery-arrow {
        display: flex;

        position: absolute;

        /* Center the arrows on the IMAGE (not the whole carousel, which
           includes the name/price/button below). The image sits 15px
           below the carousel top; its height = item width (86% of the
           gallery = 100vw - 44px section padding) * 4/3, capped at 70vh.
           So its vertical center = 15px + min(half image height, 35vh). */
        top: min(
            calc((100vw - 44px) * 0.5733 + 15px),
            calc(35vh + 15px)
        );

        transform:
            translateY(-50%);

        z-index: 6;

        width: 38px;
        height: 38px;

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

        border:
            1px solid
            rgba(23, 22, 20, 0.15);

        border-radius: 50%;

        background:
            rgba(247, 245, 240, 0.85);

        color: var(--text);

        font-family:
            "Cormorant Garamond",
            serif;

        font-size: 1.6rem;

        font-weight: 700;

        line-height: 1;

        text-align: center;

        cursor: pointer;

        box-shadow:
            0 4px 12px
            rgba(23, 22, 20, 0.12);

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

    .gallery-arrow--prev {
        left: 8%;
        right: auto;
    }

    .gallery-arrow--next {
        right: 8%;
        left: auto;
    }

    .gallery-arrow:active {
        background: #ffffff;
    }

    .fragrance-details h3 {
        font-size: 1.7rem;
    }

    .next-panel--gallery
    .fragrance-details h3 {
        font-size: 1.7rem;
    }

    .fragrance-type {
        font-size: 0.62rem;
    }

    /* Mobile shows one card at a time, so there is no neighbouring
       card to stay level with — drop the reserved height and let the
       block size to its own copy. */
    .fragrance-blurb {
        min-height: 0;

        margin-top: 8px;

        /* Larger than the desktop grid's 0.95rem — the carousel gives a
           single card the full screen width, so the copy can carry more
           size here without crowding anything. */
        font-size: 1.075rem;

        line-height: 1.45;
    }

    /* VIEW NOTES — already visible; mobile sizing only. */
    .image-view {
        display: inline-block;

        opacity: 1;

        top: 85%;

        transform:
            translate(-50%, -50%);

        padding:
            8px 13px;

        font-size: 0.5rem;

        border-color:
            rgba(255, 255, 255, 0.75);

        background:
            rgba(23, 22, 20, 0.28);
    }

    .fragrance-item:hover
    .image-view {
        opacity: 1;

        transform:
            translate(-50%, -50%);
    }

    .fragrance-image-button.notes-active
    .image-view {
        opacity: 0;

        pointer-events: none;
    }

    .fragrance-sizes {
        gap: 10px;

        margin-top: 8px;
    }

    .fragrance-size {
        width: 54px;
        height: 22px;

        font-size: 0.62rem;

        letter-spacing: 0.12em;
    }

    .next-collections {
        padding:
            10px 4% 80px;
    }

    .next-heading {
        margin-bottom: 30px;
    }

    .next-heading h2 {
        font-size: 2.1rem;
    }

    .next-heading-type {
        margin-top: 10px;

        font-size: 0.6rem;

        letter-spacing: 0.24em;
    }

    .next-grid {
        gap: 14px;
    }

    .next-panel,
    .next-panel:not(.next-panel--gallery) {
        min-height: auto;

        padding:
            26px 22px 80px;
    }

    .next-panel.next-panel--ember,
    .next-panel.next-panel--timeless {
        align-items: center;
        text-align: center;

        min-height: auto;

        padding:
            26px 22px 40px;
    }

    .next-panel--gallery {
        padding:
            13px 22px 40px;
    }

    .next-panel:hover {
        transform: none;
    }

    .next-panel h3 {
        font-size: 2.2rem;
    }

    .next-panel-introduction {
        max-width: 300px;

        font-size: 0.73rem;

        margin-bottom: 26px;
    }

    /* Partner + Connect stack on mobile (PARTNER on top). */
    .partner-connect-row {
        grid-template-columns: 1fr;
    }
    .partner-connect-row .reseller,
    .partner-connect-row .contact {
        padding: 100px 7%;
    }
    .partner-connect-row .contact-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;   /* 3 icons stay centered/symmetrical */
        column-gap: 34px;
        row-gap: 22px;
    }

    .collection-closing {
        min-height: 55vh;

        padding:
            90px 8%;
    }

    .collection-closing h2 {
        font-size: 2.6rem;
    }

    .collection-page .back-button,
    .back-button {
        min-height: 48px;

        padding:
            0 22px;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {

    .collection-hero h1 {
        font-size: 2.4rem;
    }

    .gallery-heading h2 {
        font-size: 2.7rem;
    }

    .fragrance-details h3 {
        font-size: 1.5rem;
    }

    .next-panel--gallery
    .fragrance-details h3 {
        font-size: 1.5rem;
    }

    .next-heading h2 {
        font-size: 1.9rem;
    }

    .next-panel h3 {
        font-size: 1.9rem;
    }
}


/* =========================================================
   ADD TO CART + SIZE CHIPS   (unchanged)
   ========================================================= */

.fragrance-add-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 12px;

    padding: 8px 20px;
    border: 1px solid var(--muted);
    background: transparent;

    color: var(--muted);

    font-family: "Montserrat", sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1;

    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;

    cursor: pointer;

    transition:
        background 0.4s ease,
        color 0.4s ease,
        border-color 0.4s ease;

    touch-action: manipulation;
}

.fragrance-add-cart.is-enabled {
    cursor: pointer;
}

@keyframes fragranceShake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(5px); }
    60%      { transform: translateX(-3px); }
    80%      { transform: translateX(2px); }
}

.fragrance-add-cart.shake {
    animation: fragranceShake 0.45s ease;
}

.fragrance-hint {
    margin-top: 8px;
    min-height: 14px;

    font-family: "Montserrat", sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.1em;

    color: var(--blush-accent);

    opacity: 0;
    transition: opacity 0.25s ease;
}

.fragrance-hint.is-visible {
    opacity: 1;
}


/* =========================================================
   BUY NOW  (lightbox express-checkout, secondary to Add to Cart)
   ---------------------------------------------------------
   Deliberately quieter than the bordered ADD TO CART: no box,
   gold underlined text, so it reads as the express path rather
   than a competing primary button. Shares the size-required
   guard and the shake animation. Applies to desktop, iPad and
   mobile (the panel sizing per breakpoint carries it).
   ========================================================= */

.wm-lightbox-buy {
    /* Flex + auto side margins so it drops onto its own line directly
       below the inline ADD TO CART button and stays centred. */
    display: flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    margin: 12px auto 0;
    padding: 8px 22px;

    /* Filled brand gold — the express path made tempting in the brand's
       own colour rather than a discount-store red. Sits below the dark
       ADD TO CART so the pair reads as considered vs. express. Gold is
       deeper than the champagne panel behind it, so it separates. */
    border: 1px solid var(--gold);
    background: var(--gold);

    color: #1c1509;

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

    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;

    /* Dimmed until a size is chosen, matching Add to Cart's locked
       feel. The click still fires — it shakes and shows the hint. */
    opacity: 0.5;
    cursor: pointer;

    transition:
        opacity 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        color 0.35s ease;

    touch-action: manipulation;
}

.wm-lightbox-buy.is-enabled {
    opacity: 1;
}

.wm-lightbox-buy.is-enabled:hover,
.wm-lightbox-buy.is-enabled:focus-visible,
.wm-lightbox-buy.is-enabled:active {
    background: #a6874f;
    border-color: #a6874f;
    color: var(--cream);
}

.wm-lightbox-buy.shake {
    animation: fragranceShake 0.45s ease;
}

.fragrance-add-cart.is-enabled:hover,
.fragrance-add-cart.is-enabled:focus-visible,
.fragrance-add-cart.is-enabled:active {
    background: var(--muted);
    color: var(--cream);
    border-color: var(--muted);
}

.fragrance-size.is-selected {
    background: var(--muted);
    color: var(--cream);
    border-color: var(--muted);
}


/* ----- Size chip + ₱ price column ----- */
.fragrance-size-option {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.fragrance-size-price {
    font-family: "Montserrat", sans-serif;
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1;

    color: #7a7164;

    white-space: nowrap;
}

.fragrance-add-cart.is-selected-active {
    background: var(--muted);
    color: var(--cream);
    border-color: var(--muted);
}


/* =========================================================
   NAVBAR CART BUTTON  (unchanged)
   ========================================================= */

.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: var(--text);

    cursor: pointer;

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

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

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

.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;
}

@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;
}


/* =========================================================
   CART OVERLAY + DRAWER
   ---------------------------------------------------------
   v41 (REQUEST 2): footer behaviour + footer styling now match
   the landing page. Items list is flex: 0 1 auto so the footer
   follows the items when short and pins to the bottom when full;
   the Total bar is a quiet WHITE bar and Checkout is the gold
   "Complete your order" hero button with Motion 1.
   ========================================================= */

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);
}

.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);
}

/* Items list is the ONLY scrolling part; footer follows it when
   short, pins when full (landing-page behaviour). */
.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);
}

/* Last item meets the footer cleanly. */
.cart-item:last-child {
    border-bottom: none;
}

.cart-item-thumb {
    width: 54px;
    align-self: stretch;
    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: var(--text);
}

/* Category line (Home & Linen / 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 grid crop: bottom kept, zoomed
   in and anchored to the bottom edge. */
.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;
}

.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: var(--text);
}

.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: var(--blush-accent);
}

/* Footer is a fixed (non-shrinking) flex child below the list. */
.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);
}

/* Quiet WHITE Total bar + serif ₱ number (landing look). */
.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);
}

/* Gold "Complete your order" hero button + arrow, Motion 1. */
.cart-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

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

    border: none;
    border-radius: 6px;
    background: #b08d57;
    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;
}

.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);
}

@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 tweaks ----- */
@media (max-width: 700px) {

    .fragrance-add-cart {
        font-size: 0.72rem;
        margin-top: 10px;
    }

    .fragrance-size-price {
        font-size: 0.62rem;
    }

    .fragrance-size-option {
        gap: 5px;
    }

    .cart-drawer {
        width: min(390px, 94vw);
    }
}


/* =========================================================
   PRODUCT LIGHTBOX   (unchanged from v32)
   ========================================================= */

.wm-lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;

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

    padding: 40px 20px;

    background: rgba(238, 234, 225, 0.66);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.wm-lightbox.is-open {
    display: flex;
}

body.wm-lightbox-open {
    overflow: hidden;
}

.wm-lightbox-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    max-width: 100%;
}

.wm-lightbox-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
}

.wm-lightbox-image-button {
    position: relative;

    width: auto;
    height: min(58vh, 460px);
    aspect-ratio: 3 / 4;

    padding: 0;
    border: 0;
    border-radius: 8px;
    overflow: hidden;

    background: transparent;
    cursor: default;
}

.wm-lightbox-image-button img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    opacity: 1;
    transition: opacity 0.15s ease;
}

.wm-lightbox-image-button img.image-transitioning {
    opacity: 0;
}

.wm-lightbox-notes {
    position: absolute;
    left: 50%;
    top: 85%;
    transform: translate(-50%, -50%);

    padding: 10px 16px;

    border: 1px solid rgba(255, 255, 255, 0.85);
    background: rgba(23, 22, 20, 0.35);
    backdrop-filter: blur(5px);

    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;

    cursor: pointer;

    transition: opacity 0.35s ease;
}

.wm-lightbox-image-button.notes-active .wm-lightbox-notes {
    opacity: 0;
    pointer-events: none;
}

.wm-lightbox-image-button.notes-active {
    cursor: pointer;
}

.wm-lightbox-arrow {
    flex: none;

    width: 52px;
    height: 52px;

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

    border: 1px solid rgba(23, 22, 20, 0.15);
    border-radius: 50%;
    background: rgba(247, 245, 240, 0.9);

    color: var(--text);
    font-family: "Cormorant Garamond", serif;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 4px 12px rgba(23, 22, 20, 0.12);
    transition: opacity 0.3s ease, background 0.3s ease;
}

.wm-lightbox-arrow:hover {
    background: #ffffff;
}

.wm-lightbox-arrow.is-disabled {
    opacity: 0.3;
    pointer-events: none;
}

.wm-lightbox-panel {
    margin-top: 16px;
    padding: 16px 26px;

    /* Matched to the photo above it, so the two share edges and read as
       one object. The image is height-driven at this breakpoint —
       height: min(58vh, 460px) at a 3/4 aspect — so its rendered width
       is that height times 3/4. Mirror any change to
       .wm-lightbox-image-button here, and in the two breakpoints below. */
    width: calc(min(58vh, 460px) * 3 / 4);

    border-radius: 10px;

    /* Transparent champagne gold — --gold-bright (#d8c19a) at low alpha.
       No backdrop-filter here on purpose: the blur frosted whatever sat
       behind the panel and made it read as solid no matter how low the
       alpha went. Without it the page genuinely shows through. */
    background: rgba(216, 193, 154, 0.3);

    text-align: center;
}

.wm-lightbox-panel .fragrance-details {
    padding-top: 0;
}

.wm-lightbox-image-holder {
    position: relative;
    display: inline-flex;
}

.wm-lightbox-close {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    z-index: 4;

    width: 36px;
    height: 36px;

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

    border: 1px solid rgba(23, 22, 20, 0.15);
    border-radius: 50%;
    background: rgba(247, 245, 240, 0.92);
    color: var(--muted);

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

    cursor: pointer;
    box-shadow: 0 4px 12px rgba(23, 22, 20, 0.12);
    transition: color 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

.wm-lightbox-close:hover {
    color: var(--gold);
    background: #ffffff;
    transform: translate(50%, -50%) rotate(90deg);
}

.wm-lightbox-viewcart {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(20%, -50%);
    z-index: 4;

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

    padding: 8px 16px;

    border: 1px solid var(--gold-bright);
    border-radius: 999px;
    background: rgba(247, 245, 240, 0.95);
    color: var(--muted);

    font-family: "Montserrat", sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;

    cursor: pointer;
    box-shadow: 0 4px 12px rgba(184, 153, 104, 0.35);
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.wm-lightbox-viewcart:hover {
    background: var(--muted);
    color: var(--cream);
    border-color: var(--muted);
}

.wm-lightbox--from-cart .wm-lightbox-close {
    display: none;
}

.wm-lightbox--from-cart .wm-lightbox-viewcart {
    display: inline-flex;
}

@media (max-width: 1024px) {

    .wm-lightbox-stage {
        gap: 16px;
    }

    .wm-lightbox-arrow {
        width: 44px;
        height: 44px;
        font-size: 1.6rem;
    }

    .wm-lightbox-image-button {
        width: min(58vw, 460px);
        height: auto;
        max-height: 74vh;
    }

    /* Track the photo's width — it becomes width-driven here. */
    .wm-lightbox-panel {
        width: min(58vw, 460px);
    }
}

@media (max-width: 700px) {

    .wm-lightbox {
        padding: 20px 14px;
    }

    .wm-lightbox-stage {
        gap: 0;
        position: relative;
    }

    .wm-lightbox-image-button {
        width: min(82vw, 340px);
        height: auto;
        max-height: 72vh;
    }

    .wm-lightbox-arrow {
        position: absolute;
        top: 50%;
        bottom: auto;
        z-index: 5;

        width: 42px;
        height: 42px;
        font-size: 1.6rem;

        background: rgba(247, 245, 240, 0.92);
    }

    .wm-lightbox-arrow--prev {
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%)
                   translateX(calc(-1 * min(41vw, 170px)));
    }

    .wm-lightbox-arrow--next {
        right: auto;
        left: 50%;
        transform: translate(-50%, -50%)
                   translateX(min(41vw, 170px));
    }

    .wm-lightbox-close {
        width: 34px;
        height: 34px;
        font-size: 1.4rem;
    }

    .wm-lightbox-viewcart {
        transform: translate(0, -50%);
        padding: 7px 13px;
        font-size: 0.56rem;
    }

    .wm-lightbox-panel {
        margin-top: 22px;
        padding: 14px 18px;

        /* Track the photo's width at this breakpoint. */
        width: min(82vw, 340px);
    }
}


/* =========================================================
   FLY-TO-CART EFFECT   (unchanged from v26)
   ========================================================= */

.wm-fly-orb {
    position: fixed;
    z-index: 400;

    width: 66px;
    height: 66px;

    margin: 0;
    border-radius: 50%;
    overflow: hidden;

    pointer-events: none;

    background: var(--blush-deep);

    border: 2px solid var(--gold-bright);
    box-shadow:
        0 0 0 3px rgba(216, 193, 154, 0.35),
        0 8px 26px rgba(184, 153, 104, 0.45),
        0 0 22px rgba(216, 193, 154, 0.55);

    transform: translate(-50%, -50%);
    will-change: transform, opacity;
}

.wm-fly-orb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.wm-fly-sparkles {
    position: fixed;
    inset: 0;
    z-index: 399;
    pointer-events: none;
}

.wm-fly-spark {
    position: fixed;
    transform: translate(-50%, -50%) scale(0);

    color: var(--gold-bright);
    font-size: 0.9rem;
    line-height: 1;

    text-shadow: 0 0 8px rgba(216, 193, 154, 0.9);

    opacity: 0;

    animation: wmSparkPop 0.7s ease-out forwards;
}

@keyframes wmSparkPop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0deg); }
    40%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(35deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(80deg); }
}

@media (prefers-reduced-motion: reduce) {
    .wm-fly-orb,
    .wm-fly-sparkles { display: none !important; }
}


@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }
}


/* From-cart lightbox: it's a VIEW of the image only — hide the size
   chips, price and Add to Cart (buying happens from the grid). */
.wm-lightbox--from-cart .wm-lightbox-panel .fragrance-sizes,
.wm-lightbox--from-cart .wm-lightbox-panel .fragrance-add-cart,
.wm-lightbox--from-cart .wm-lightbox-panel .wm-lightbox-buy,
.wm-lightbox--from-cart .wm-lightbox-panel .fragrance-hint {
    display: none !important;
}


/* 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; }

/* From-cart lightbox: - qty + stepper (below the name). */
.wm-lightbox-qty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 14px 0 0;
}
.wm-lightbox-qty[hidden] { display: none; }
.wm-lightbox-qtyval {
    min-width: 1.2em;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 0.95rem;
    color: var(--text);
}

/* 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; }
}