/* ==========================================================================
   BEAUTY MANTRA — "Vanity Mirror Editorial"
   ==========================================================================
   A luxury beauty-magazine feel crossed with a glowing vanity table.
   Mobile-first. Every colour, font and curve is a CSS variable, so the whole
   look can be retuned from the :root block below.

   CONTENTS
   --------
    1. Design tokens (colours, fonts, spacing, shapes)
    2. Reset & base
    3. Typography & editorial helpers
    4. Buttons
    5. Layout shell & section furniture
    6. Preloader
    7. Sticky header
    8. Mobile overlay menu
    9. Hero (arch mirror, blobs, petals)
   10. Gold marquee strip
   11. Category arch cards
   12. Product cards (arch top, shimmer, tilt)
   13. Bestsellers drag carousel
   14. Beauty Ritual steps
   15. Why Beauty Mantra + counters
   16. Visit us (boarding-pass card) & map
   17. Products page (chips, search, grid, empty state)
   18. Product detail page
   19. About page
   20. Contact page & enquiry form
   21. Footer
   22. Back to top
   23. Scroll-reveal animations
   24. Responsive breakpoints
   25. prefers-reduced-motion
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
    /* --- Palette ------------------------------------------------------- */
    --plum:        #3B1E3F;   /* main dark */
    --plum-deep:   #2A1430;   /* footer / overlays */
    --plum-soft:   #5A3460;   /* lighter plum for borders on dark */
    --blush:       #F4C9D0;   /* blush rose */
    --blush-pale:  #FBE6E9;   /* very light blush washes */
    --gold:        #D4AF7A;   /* champagne gold — lines & shimmer */
    --gold-deep:   #B8905A;   /* gold text that needs contrast */
    --cream:       #FFF8F3;   /* warm cream background */
    --cream-card:  #FFFCF9;   /* card surface, a touch lighter */
    --berry:       #B03A6B;   /* buttons & highlights */
    --berry-deep:  #8E2B54;   /* berry hover */

    --ink:         #3B1E3F;   /* body text on cream */
    --ink-soft:    #6E5570;   /* secondary text */
    --ink-faint:   #9B86A0;   /* meta text */

    /* --- Typography ---------------------------------------------------- */
    --font-display: "Cormorant Garamond", "Times New Roman", serif;
    --font-body:    "Jost", "Helvetica Neue", Arial, sans-serif;

    /* Fluid display sizes — scale smoothly between phone and desktop */
    --fs-hero:  clamp(3rem, 13vw, 8.5rem);
    --fs-h1:    clamp(2.4rem, 8vw, 4.6rem);
    --fs-h2:    clamp(2rem, 6vw, 3.4rem);
    --fs-h3:    clamp(1.35rem, 3.6vw, 1.9rem);
    --fs-body:  clamp(0.95rem, 2.4vw, 1.02rem);

    /* Small wide-spaced uppercase label — the magazine-cover voice */
    --label-size:    0.68rem;
    --label-spacing: 0.26em;

    /* --- Spacing & shape ---------------------------------------------- */
    --shell:      1180px;         /* max content width */
    --gutter:     16px;           /* mobile side gutter */
    --section-y:  clamp(3.5rem, 9vw, 7rem);

    --arch:       999px 999px 0 0 / 60% 60% 0 0;  /* the arch/oval top */
    --radius-sm:  10px;
    --radius-md:  18px;
    --radius-lg:  28px;

    --shadow-sm:  0 2px 10px rgba(59, 30, 63, .06);
    --shadow-md:  0 10px 30px rgba(59, 30, 63, .09);
    --shadow-lg:  0 26px 60px rgba(59, 30, 63, .16);

    /* --- Motion -------------------------------------------------------- */
    --ease:       cubic-bezier(.22, .68, .3, 1);
    --ease-out:   cubic-bezier(.16, 1, .3, 1);
    --t-fast:     .22s;
    --t-mid:      .45s;
    --t-slow:     .8s;
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: 1.7;
    overflow-x: hidden;              /* stop the blobs causing sideways scroll */
    -webkit-font-smoothing: antialiased;
}

/* Lock scrolling while the mobile menu is open */
body.is-locked { overflow: hidden; }

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

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

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

ul { margin: 0; padding: 0; list-style: none; }

/* Visible keyboard focus everywhere */
:focus-visible {
    outline: 2px solid var(--berry);
    outline-offset: 3px;
    border-radius: 3px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: .7rem 1.2rem;
    background: var(--plum);
    color: var(--cream);
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.skip-link:focus { left: 8px; top: 8px; }

/* Icon defaults */
.ico { width: 1.15em; height: 1.15em; flex: none; }


/* ==========================================================================
   3. TYPOGRAPHY & EDITORIAL HELPERS
   ========================================================================== */
h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.03;
    letter-spacing: -.012em;
    color: var(--plum);
}

/* Big italic serif words — the signature magazine move */
.ital { font-style: italic; font-weight: 400; }

/* The gold-tinted italic accent word */
.gilt {
    font-style: italic;
    color: var(--gold-deep);
}

/* Small wide-spaced uppercase label */
.label {
    display: inline-block;
    margin: 0 0 1rem;
    font-family: var(--font-body);
    font-size: var(--label-size);
    font-weight: 500;
    letter-spacing: var(--label-spacing);
    text-transform: uppercase;
    color: var(--gold-deep);
}

/* Label with a short gold rule before it */
.label--rule { display: flex; align-items: center; gap: .7rem; }
.label--rule::before {
    content: "";
    width: 38px;
    height: 1px;
    background: var(--gold);
}

.lede {
    max-width: 56ch;
    color: var(--ink-soft);
    font-size: clamp(1rem, 2.6vw, 1.12rem);
}

/* Thin gold hairline used between blocks */
.hairline {
    height: 1px;
    border: 0;
    margin: 0;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: .6;
}


/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.65rem;
    border-radius: 999px;                 /* pill */
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;                     /* clips the ripple */
    isolation: isolate;
    transition: transform var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
}

.btn--primary {
    background: var(--berry);
    color: #fff;
    box-shadow: 0 8px 22px rgba(176, 58, 107, .26);
}
.btn--primary:hover { background: var(--berry-deep); }

.btn--ghost {
    border: 1px solid var(--gold);
    color: var(--plum);
}
.btn--ghost:hover { background: var(--gold); color: #fff; }

.btn--dark {
    background: var(--plum);
    color: var(--cream);
}
.btn--dark:hover { background: var(--plum-deep); }

/* The pill "Buy Now" on a product card */
.btn--buy {
    padding: .62rem 1.1rem;
    background: var(--berry);
    color: #fff;
    font-size: .66rem;
    letter-spacing: .13em;
}
.btn--buy:hover { background: var(--plum); }

/* Big buy button on the product detail page */
.btn--xl {
    padding: 1.15rem 2.6rem;
    font-size: .84rem;
    letter-spacing: .2em;
}

.btn:active { transform: scale(.97); }

/* Magnetic nudge, set from JS as --mx / --my */
.magnetic {
    transform: translate3d(var(--mx, 0), var(--my, 0), 0);
    will-change: transform;
}

/* Click ripple — a soft gold bloom, animated by JS */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .55), transparent 70%);
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    animation: ripple .62s var(--ease-out) forwards;
    z-index: -1;
}
@keyframes ripple {
    to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* A plain text link with a sliding gold underline */
.tlink {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--berry);
}
.tlink .ico { transition: transform var(--t-fast) var(--ease); }
.tlink:hover .ico { transform: translateX(4px); }


/* ==========================================================================
   5. LAYOUT SHELL & SECTION FURNITURE
   ========================================================================== */
.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

/* Alternating soft blush wash */
.section--blush { background: linear-gradient(180deg, var(--cream), var(--blush-pale)); }
.section--cream { background: var(--cream); }

.section__head {
    max-width: 62ch;
    margin-bottom: clamp(2rem, 5vw, 3.2rem);
}
.section__head h2 { font-size: var(--fs-h2); }
.section__head .lede { margin: 1rem 0 0; }

/* Centred head variant */
.section__head--mid {
    margin-inline: auto;
    text-align: center;
}
.section__head--mid .label--rule { justify-content: center; }
.section__head--mid .label--rule::after {
    content: "";
    width: 38px;
    height: 1px;
    background: var(--gold);
}
.section__head--mid .lede { margin-inline: auto; }


/* ==========================================================================
   6. PRELOADER
   ========================================================================== */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-content: center;
    gap: 1rem;
    background: var(--cream);
    transition: opacity .6s var(--ease), visibility .6s;
}
.preloader.is-done {
    opacity: 0;
    visibility: hidden;
}

/* The wordmark, with a gold shimmer sweeping through the letters */
.preloader__word {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 10vw, 4.4rem);
    font-style: italic;
    font-weight: 500;
    letter-spacing: .01em;
    background: linear-gradient(100deg,
                var(--plum) 20%, var(--gold) 42%,
                #F3DFC2 50%, var(--gold) 58%, var(--plum) 80%);
    background-size: 280% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: shimmerText 1.5s var(--ease) infinite;
}
@keyframes shimmerText {
    from { background-position: 180% 0; }
    to   { background-position: -80% 0; }
}

/* A gold rule that draws itself out from the centre */
.preloader__rule {
    justify-self: center;
    width: min(220px, 50vw);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transform: scaleX(0);
    animation: drawRule 1.1s var(--ease-out) forwards;
}
@keyframes drawRule { to { transform: scaleX(1); } }


/* ==========================================================================
   7. STICKY HEADER
   ========================================================================== */
.site-head {
    position: sticky;
    top: 0;
    z-index: 90;
    transition: background-color var(--t-mid) var(--ease),
                box-shadow var(--t-mid) var(--ease),
                backdrop-filter var(--t-mid) var(--ease);
}

.site-head__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* Padding shrinks when stuck — the "shrinking header" effect */
    padding-block: 1.25rem;
    transition: padding-block var(--t-mid) var(--ease);
}

/* Blurred glass once the page is scrolled */
.site-head.is-stuck {
    background: rgba(255, 248, 243, .78);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: 0 1px 0 rgba(212, 175, 122, .45), var(--shadow-sm);
}
.site-head.is-stuck .site-head__inner { padding-block: .7rem; }
.site-head.is-stuck .brand__name { font-size: 1.28rem; }

/* --- Brand wordmark --- */
.brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}
.brand__logo { max-height: 46px; width: auto; }

.brand__mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--gold-deep);
    transition: transform var(--t-mid) var(--ease);
}
.brand:hover .brand__mark { transform: rotate(90deg); }
.brand__mark .ico { width: 16px; height: 16px; }

.brand__text { display: grid; }
.brand__name {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1;
    color: var(--plum);
    transition: font-size var(--t-mid) var(--ease);
}
.brand__kicker {
    font-size: .56rem;
    font-weight: 400;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--gold-deep);
}

/* --- Desktop nav (hidden on mobile) --- */
.nav { display: none; gap: 2.1rem; }

.nav__link {
    position: relative;
    padding-block: .3rem;
    font-size: .74rem;
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-soft);
    transition: color var(--t-fast) var(--ease);
}
.nav__link::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-mid) var(--ease);
}
.nav__link:hover, .nav__link.is-active { color: var(--plum); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

.site-head__actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.head-mail {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    color: var(--plum);
    transition: background-color var(--t-fast), color var(--t-fast);
}
.head-mail:hover { background: var(--blush); color: var(--berry); }
.head-phone { display: none; }

/* --- Burger --- */
.burger {
    display: grid;
    gap: 5px;
    width: 40px;
    padding: 9px 6px;
}
.burger span {
    display: block;
    height: 1.5px;
    background: var(--plum);
    border-radius: 2px;
    transition: transform var(--t-fast) var(--ease), opacity var(--t-fast);
}
.burger span:nth-child(2) { width: 70%; justify-self: end; }
.burger:hover span:nth-child(2) { width: 100%; }


/* ==========================================================================
   8. MOBILE OVERLAY MENU
   ========================================================================== */
.mnav {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    align-content: center;
    gap: 2rem;
    padding: 2rem var(--gutter);
    background: var(--plum);
    /* A soft blush glow behind the links */
    background-image: radial-gradient(70% 50% at 85% 10%, rgba(244, 201, 208, .18), transparent 70%),
                      radial-gradient(60% 50% at 10% 95%, rgba(212, 175, 122, .16), transparent 70%);
    color: var(--cream);
    opacity: 0;
    transition: opacity var(--t-mid) var(--ease);
}
.mnav[hidden] { display: none; }
.mnav.is-open { opacity: 1; }

.mnav__close {
    position: absolute;
    top: 1.1rem; right: var(--gutter);
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border: 1px solid rgba(212, 175, 122, .5);
    border-radius: 50%;
    color: var(--cream);
}
.mnav__close .ico { width: 18px; height: 18px; }

.mnav__links { display: grid; gap: .35rem; }

.mnav__link {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding-block: .55rem;
    border-bottom: 1px solid rgba(212, 175, 122, .22);
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 11vw, 3.4rem);
    font-weight: 500;
    color: var(--cream);
    /* Each link slides up in turn — delay driven by --i from PHP */
    opacity: 0;
    transform: translateY(26px);
}
.mnav.is-open .mnav__link {
    animation: mnavIn .55s var(--ease-out) forwards;
    animation-delay: calc(var(--i) * 75ms + 110ms);
}
@keyframes mnavIn {
    to { opacity: 1; transform: none; }
}
.mnav__link.is-active { font-style: italic; color: var(--blush); }

.mnav__num {
    font-family: var(--font-body);
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .24em;
    color: var(--gold);
}

.mnav__foot {
    display: grid;
    gap: .2rem;
    font-size: .85rem;
    color: var(--blush);
    opacity: 0;
    transform: translateY(20px);
}
.mnav.is-open .mnav__foot {
    animation: mnavIn .55s var(--ease-out) forwards;
    animation-delay: calc(var(--i) * 75ms + 140ms);
}
.mnav__foot p { margin: .4rem 0 0; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }


/* ==========================================================================
   9. HERO
   ========================================================================== */
.hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(3rem, 8vw, 5rem);
    /* Near-full-screen on phones, minus the sticky header */
    min-height: min(92svh, 860px);
    display: grid;
    align-items: center;
}

.hero__grid {
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}

/* --- Headline --- */
.hero__title {
    font-size: var(--fs-hero);
    line-height: .94;
    letter-spacing: -.02em;
}
/* Each word is wrapped in a span pair by PHP for the word-by-word reveal */
.hero__word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}
.hero__word > span {
    display: inline-block;
    transform: translateY(105%);
    animation: wordUp .95s var(--ease-out) forwards;
    animation-delay: calc(var(--i) * 95ms + 420ms);
}
@keyframes wordUp { to { transform: none; } }

.hero__lede {
    margin: 1.4rem 0 0;
    max-width: 42ch;
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 2rem;
}

/* Offer strip (only rendered when an offer is set in config.php) */
.hero__offer {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1.4rem;
    padding: .5rem 1.1rem;
    border: 1px solid var(--gold);
    border-radius: 999px;
    background: rgba(212, 175, 122, .1);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.hero__offer .ico { width: 14px; height: 14px; }

/* --- The arch mirror frame holding the product collage --- */
.hero__mirror {
    position: relative;
    justify-self: center;
    width: min(100%, 420px);
    aspect-ratio: 3 / 4;
}

.mirror {
    position: relative;
    height: 100%;
    /* The arch: fully rounded top, gentle bottom corners */
    border-radius: 50% 50% var(--radius-lg) var(--radius-lg) / 46% 46% 4% 4%;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% 0%, #fff 0%, var(--blush-pale) 55%, var(--blush) 100%);
    box-shadow:
        0 30px 70px rgba(59, 30, 63, .18),
        inset 0 0 0 1px rgba(255, 255, 255, .7);
}

/* Gold frame ring sitting just outside the glass */
.hero__mirror::before {
    content: "";
    position: absolute;
    inset: -10px;
    border: 1px solid var(--gold);
    border-radius: 50% 50% calc(var(--radius-lg) + 10px) calc(var(--radius-lg) + 10px) / 46% 46% 4% 4%;
    opacity: .75;
    pointer-events: none;
}
/* A second, fainter ring for depth */
.hero__mirror::after {
    content: "";
    position: absolute;
    inset: -22px;
    border: 1px solid rgba(212, 175, 122, .35);
    border-radius: 50% 50% calc(var(--radius-lg) + 22px) calc(var(--radius-lg) + 22px) / 46% 46% 4% 4%;
    pointer-events: none;
}

/* The product collage inside the mirror */
.mirror__collage {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 7%;
    padding: 15% 11% 10%;
    place-items: center;
}
/* Each product sits on its own little white tile, like photographs propped
   on a vanity. Tiles are used rather than blend modes because the animated
   parent creates a stacking context (which isolates mix-blend-mode), and
   because real product photos arrive on all sorts of backgrounds — white,
   black, branded — so a tile is the only treatment that suits them all. */
.mirror__item {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 9%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(59, 30, 63, .16),
                0 1px 0 rgba(255, 255, 255, .9) inset;
    /* Each tile drifts very slightly, out of phase with the others */
    animation: floatItem 7s var(--ease) infinite alternate;
    animation-delay: calc(var(--i) * -1.6s);
}
/* Alternate tiles tilt the opposite way, so it reads as a hand-made collage */
.mirror__item:nth-child(even) { rotate: 2.2deg; }
.mirror__item:nth-child(odd)  { rotate: -2.2deg; }

.mirror__item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
@keyframes floatItem {
    from { transform: translateY(-7px); }
    to   { transform: translateY(7px); }
}

/* A sweeping highlight across the glass, like light on a mirror */
.mirror__glint {
    position: absolute;
    top: -20%;
    left: -60%;
    width: 50%;
    height: 150%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: rotate(14deg);
    animation: glint 7s var(--ease) infinite;
    pointer-events: none;
}
@keyframes glint {
    0%, 62%  { transform: translateX(0) rotate(14deg); }
    88%,100% { transform: translateX(420%) rotate(14deg); }
}

/* --- Slow-moving gradient blobs behind everything --- */
.blobs {
    position: absolute;
    inset: -12%;
    z-index: -2;
    pointer-events: none;
    filter: blur(44px);
}
.blob {
    position: absolute;
    border-radius: 50%;
    opacity: .5;
    will-change: transform;
}
.blob--1 {
    width: 46vw; height: 46vw;
    top: -6%; left: -10%;
    background: radial-gradient(circle at 35% 35%, var(--blush), transparent 70%);
    animation: drift1 26s var(--ease) infinite alternate;
}
.blob--2 {
    width: 40vw; height: 40vw;
    bottom: -12%; right: -8%;
    background: radial-gradient(circle at 60% 40%, var(--gold), transparent 70%);
    animation: drift2 32s var(--ease) infinite alternate;
    opacity: .38;
}
.blob--3 {
    width: 30vw; height: 30vw;
    top: 42%; left: 52%;
    background: radial-gradient(circle at 50% 50%, #E8C7D8, transparent 70%);
    animation: drift3 28s var(--ease) infinite alternate;
    opacity: .34;
}
@keyframes drift1 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(10vw, 7vh, 0) scale(1.18); }
}
@keyframes drift2 {
    from { transform: translate3d(0, 0, 0) scale(1.1); }
    to   { transform: translate3d(-9vw, -8vh, 0) scale(.92); }
}
@keyframes drift3 {
    from { transform: translate3d(0, 0, 0) scale(.9); }
    to   { transform: translate3d(-7vw, 9vh, 0) scale(1.2); }
}

/* --- Drifting petals / sparkles (built by JS) --- */
.petals {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.petal {
    position: absolute;
    top: -8%;
    width: var(--s);
    height: var(--s);
    opacity: 0;
    will-change: transform, opacity;
    animation: fall var(--dur) linear infinite;
    animation-delay: var(--delay);
}
/* Rose petal shape */
.petal--leaf {
    background: linear-gradient(135deg, var(--blush), #EFA7B6);
    border-radius: 60% 0 60% 0;
}
/* Gold sparkle */
.petal--spark {
    background: var(--gold);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
@keyframes fall {
    0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
    12%  { opacity: .85; }
    88%  { opacity: .55; }
    100% { opacity: 0; transform: translate3d(var(--dx), 118vh, 0) rotate(var(--rot)); }
}

/* Scroll hint under the hero */
.hero__scroll {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 1.4rem;
    transform: translateX(-50%);
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.hero__scroll::after {
    content: "";
    display: block;
    width: 1px; height: 34px;
    margin: .55rem auto 0;
    background: linear-gradient(var(--gold), transparent);
    animation: scrollPulse 2.1s var(--ease) infinite;
    transform-origin: top;
}
@keyframes scrollPulse {
    0%, 100% { transform: scaleY(.4); opacity: .4; }
    50%      { transform: scaleY(1); opacity: 1; }
}


/* ==========================================================================
   10. GOLD MARQUEE STRIP
   ========================================================================== */
.marquee {
    position: relative;
    display: flex;
    overflow: hidden;
    padding-block: .85rem;
    background: var(--plum);
    border-block: 1px solid var(--gold-deep);
    /* Fade the strip out at both ends */
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
    display: flex;
    flex: none;
    align-items: center;
    gap: 2.4rem;
    padding-right: 2.4rem;
    white-space: nowrap;
    animation: marquee 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 2.4rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-style: italic;
    letter-spacing: .04em;
    color: var(--blush);
    transition: color var(--t-fast);
}
.marquee__item:hover { color: #fff; }
.marquee__item::after {
    content: "✦";
    font-style: normal;
    font-size: .7rem;
    color: var(--gold);
}
@keyframes marquee {
    to { transform: translateX(-50%); }
}


/* ==========================================================================
   11. CATEGORY ARCH CARDS
   ========================================================================== */
.cats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(.8rem, 2.5vw, 1.5rem);
}

.cat {
    position: relative;
    display: grid;
    overflow: hidden;
    padding: 1.2rem 1rem 1.3rem;
    /* Arch-shaped: rounded top, squarer bottom */
    border-radius: 999px 999px var(--radius-md) var(--radius-md) / 34% 34% 3% 3%;
    background: var(--cream-card);
    border: 1px solid rgba(212, 175, 122, .4);
    text-align: center;
    transition: transform var(--t-mid) var(--ease),
                box-shadow var(--t-mid) var(--ease),
                border-color var(--t-mid) var(--ease);
}
.cat:hover {
    transform: translateY(-7px);
    border-color: var(--gold);
    box-shadow: var(--shadow-md);
}

/* Blush wash that rises up the arch on hover */
.cat::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 0;
    background: linear-gradient(180deg, transparent, var(--blush-pale));
    transition: height var(--t-slow) var(--ease);
    z-index: 0;
}
.cat:hover::before { height: 100%; }

.cat > * { position: relative; z-index: 1; }

.cat__media {
    margin: .4rem auto 1rem;
    width: 78%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}
.cat__media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform var(--t-slow) var(--ease);
}
.cat:hover .cat__media img { transform: scale(1.09) rotate(-2deg); }

.cat__name {
    font-size: clamp(1.05rem, 3.4vw, 1.3rem);
    line-height: 1.15;
}
.cat__blurb {
    display: none;
    margin: .55rem 0 0;
    font-size: .82rem;
    line-height: 1.55;
    color: var(--ink-soft);
}
.cat__count {
    display: block;
    margin-top: .6rem;
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold-deep);
}


/* ==========================================================================
   12. PRODUCT CARDS
   ========================================================================== */
.pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--cream-card);
    border: 1px solid rgba(212, 175, 122, .32);
    border-radius: var(--radius-md);
    overflow: hidden;
    transform-style: preserve-3d;
    /* --rx / --ry are written by the JS tilt handler on desktop */
    transform: perspective(900px)
               rotateX(var(--rx, 0deg))
               rotateY(var(--ry, 0deg))
               translateY(var(--lift, 0));
    transition: transform var(--t-mid) var(--ease),
                box-shadow var(--t-mid) var(--ease),
                border-color var(--t-mid) var(--ease);
}
.pcard:hover {
    --lift: -8px;
    border-color: var(--gold);
    box-shadow: var(--shadow-lg);
}

/* --- Arch-top image area --- */
.pcard__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 16% 14% 10%;
    overflow: hidden;
    background: radial-gradient(90% 75% at 50% 18%, #fff, var(--blush-pale));
    /* The arch */
    border-radius: 999px 999px 0 0 / 30% 30% 0 0;
}
.pcard__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform var(--t-slow) var(--ease);
}
.pcard:hover .pcard__media img { transform: scale(1.08); }

/* If the placeholder had to be used, let it fill the arch properly */
.pcard__media.is-fallback { padding: 0; }
.pcard__media.is-fallback img { mix-blend-mode: normal; object-fit: cover; }

/* Gold shimmer sweeping across on hover */
.pcard__shimmer {
    position: absolute;
    top: -30%;
    left: -75%;
    width: 45%;
    height: 160%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), rgba(212, 175, 122, .35), transparent);
    transform: rotate(16deg);
    opacity: 0;
    pointer-events: none;
}
.pcard:hover .pcard__shimmer {
    animation: sweep .95s var(--ease-out) forwards;
}
@keyframes sweep {
    0%   { opacity: 0;  transform: translateX(0) rotate(16deg); }
    18%  { opacity: 1; }
    100% { opacity: 0;  transform: translateX(430%) rotate(16deg); }
}

/* --- Card body --- */
.pcard__body {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: .9rem .95rem 1rem;
    text-align: center;
}

.pcard__brand {
    margin: 0 0 .3rem;
    font-size: .56rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.pcard__name {
    margin: 0;
    font-size: clamp(.98rem, 2.9vw, 1.12rem);
    font-weight: 500;
    line-height: 1.22;
}
.pcard__name a { transition: color var(--t-fast); }
.pcard__name a:hover { color: var(--berry); }

.pcard__size {
    margin: .3rem 0 0;
    font-size: .7rem;
    letter-spacing: .06em;
    color: var(--ink-faint);
}

.pcard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
    padding-top: .85rem;
}
.pcard__price {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--plum);
}

/* "View Details" slides up from the bottom on hover (desktop only) */
.pcard__view {
    display: none;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding-top: .7rem;
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--berry);
}
.pcard__view .ico { width: 13px; height: 13px; }


/* ==========================================================================
   13. BESTSELLERS DRAG CAROUSEL
   ========================================================================== */
.carousel {
    position: relative;
    /* Bleed to the screen edges so cards can peek off-screen */
    margin-inline: calc(var(--gutter) * -1);
}
.carousel__track {
    display: flex;
    gap: clamp(.8rem, 2.5vw, 1.4rem);
    padding: .5rem var(--gutter) 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;          /* snapping fights an active drag */
    scroll-behavior: auto;
}
/* Suppress clicks that were really the end of a drag */
.carousel__track.is-dragging a { pointer-events: none; }

.carousel__track > .pcard {
    flex: 0 0 clamp(205px, 62vw, 272px);
    scroll-snap-align: start;
}

.carousel__nav {
    display: none;
    gap: .6rem;
    justify-content: flex-end;
    margin-top: -.5rem;
}
.carousel__btn {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--plum);
    transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.carousel__btn:hover { background: var(--plum); color: var(--cream); }
.carousel__btn:disabled { opacity: .3; cursor: default; }
.carousel__btn--prev .ico { transform: rotate(180deg); }

.carousel__hint {
    margin: 0;
    font-size: .58rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--ink-faint);
}


/* ==========================================================================
   14. BEAUTY RITUAL STEPS
   ========================================================================== */
.ritual {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(.9rem, 2.5vw, 1.4rem);
    counter-reset: step;
}

.step {
    position: relative;
    display: grid;
    gap: .6rem;
    padding: 1.6rem 1.1rem 1.3rem;
    border: 1px solid rgba(212, 175, 122, .4);
    border-radius: var(--radius-md);
    background: var(--cream-card);
    text-align: center;
    overflow: hidden;
    transition: transform var(--t-mid) var(--ease),
                box-shadow var(--t-mid) var(--ease),
                background-color var(--t-mid) var(--ease);
}
.step:hover {
    transform: translateY(-6px);
    background: #fff;
    box-shadow: var(--shadow-md);
}

/* Big ghosted step number in the corner */
.step::before {
    counter-increment: step;
    content: "0" counter(step);
    position: absolute;
    top: -.35rem; right: .5rem;
    font-family: var(--font-display);
    font-size: 3.6rem;
    font-style: italic;
    color: rgba(212, 175, 122, .2);
    line-height: 1;
    pointer-events: none;
}

.step__ico {
    justify-self: center;
    display: grid;
    place-items: center;
    width: 54px; height: 54px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--gold-deep);
    background: var(--blush-pale);
    transition: transform var(--t-mid) var(--ease),
                background-color var(--t-mid), color var(--t-mid);
}
.step__ico .ico { width: 23px; height: 23px; }
.step:hover .step__ico {
    transform: scale(1.08) rotate(-6deg);
    background: var(--berry);
    color: #fff;
}

.step__name {
    font-size: clamp(1.15rem, 3.6vw, 1.45rem);
    font-style: italic;
}
.step__text {
    margin: 0;
    font-size: .8rem;
    line-height: 1.6;
    color: var(--ink-soft);
}
.step__link {
    margin-top: .2rem;
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--berry);
}

/* The gold connector line running between steps on desktop */
.ritual__line { display: none; }


/* ==========================================================================
   15. WHY BEAUTY MANTRA + COUNTERS
   ========================================================================== */
.whys {
    display: grid;
    gap: clamp(1rem, 3vw, 1.6rem);
}

.why {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1.3rem 1.2rem;
    border-radius: var(--radius-md);
    background: var(--cream-card);
    border: 1px solid rgba(212, 175, 122, .3);
    transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.why:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.why__ico {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--blush);
    color: var(--plum);
}
.why__ico .ico { width: 21px; height: 21px; }
.why h3 { font-size: 1.22rem; }
.why p {
    margin: .35rem 0 0;
    font-size: .85rem;
    line-height: 1.62;
    color: var(--ink-soft);
}

/* --- Animated number counters --- */
.counters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
    margin-top: clamp(2rem, 5vw, 3rem);
    padding: clamp(1.4rem, 4vw, 2.2rem) 1rem;
    border-block: 1px solid rgba(212, 175, 122, .5);
    text-align: center;
}
.counter__num {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem, 7vw, 3.4rem);
    font-weight: 600;
    line-height: 1;
    color: var(--plum);
}
.counter__num::after {
    content: attr(data-suffix);
    color: var(--gold-deep);
}
.counter__label {
    display: block;
    margin-top: .5rem;
    font-size: .56rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-faint);
}


/* ==========================================================================
   16. VISIT US — BOARDING-PASS CARD & MAP
   ========================================================================== */
.visit {
    display: grid;
    gap: clamp(1.4rem, 4vw, 2.4rem);
    align-items: stretch;
}

/* The label / boarding-pass styled address card */
.pass {
    position: relative;
    display: grid;
    gap: 1.1rem;
    padding: clamp(1.4rem, 4vw, 2rem);
    background: var(--cream-card);
    border: 1px solid var(--gold);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    /* The dashed tear-line down the right on desktop */
    overflow: hidden;
}
/* Two notches, like a punched ticket */
.pass::before, .pass::after {
    content: "";
    position: absolute;
    right: -11px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--blush-pale);
    border: 1px solid var(--gold);
}
.pass::before { top: 26%; }
.pass::after  { bottom: 26%; }

.pass__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .9rem;
    border-bottom: 1px dashed rgba(212, 175, 122, .7);
}
.pass__brand {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    font-style: italic;
    color: var(--plum);
}
.pass__code {
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold-deep);
}

.pass__rows { display: grid; gap: .95rem; }

.pass__row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .75rem;
    align-items: start;
}
.pass__row .ico {
    width: 17px; height: 17px;
    margin-top: .3rem;
    color: var(--gold-deep);
}
.pass__k {
    display: block;
    font-size: .54rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.pass__v {
    display: block;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--ink);
}
.pass__v a { border-bottom: 1px solid var(--gold); }
.pass__v a:hover { color: var(--berry); }

/* Placeholder note, shown when a detail has not been supplied yet */
.pass__todo {
    font-size: .82rem;
    font-style: italic;
    color: var(--ink-faint);
}

.pass__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem; }

/* Barcode-ish gold strip at the bottom of the pass */
.pass__bars {
    display: flex;
    gap: 3px;
    height: 34px;
    align-items: flex-end;
    margin-top: .3rem;
    opacity: .5;
}
.pass__bars span {
    flex: 1;
    background: var(--plum);
    border-radius: 1px;
}

/* --- Map --- */
.map {
    position: relative;
    min-height: 300px;
    border: 1px solid var(--gold);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--blush-pale);
    box-shadow: var(--shadow-md);
}
.map iframe {
    width: 100%;
    height: 100%;
    min-height: 300px;
    border: 0;
    /* Warm the Google map up so it sits inside the palette */
    filter: saturate(.78) sepia(.12) contrast(1.02);
}


/* ==========================================================================
   17. PRODUCTS PAGE
   ========================================================================== */
.page-head {
    position: relative;
    padding-block: clamp(2.2rem, 6vw, 3.6rem) clamp(1.5rem, 4vw, 2.4rem);
    text-align: center;
    overflow: hidden;
}
.page-head h1 {
    font-size: var(--fs-h1);
    line-height: 1;
}
.page-head .lede { margin: 1rem auto 0; }

/* Breadcrumb */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 0 0 1.1rem;
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.crumbs a:hover { color: var(--berry); }
.crumbs span { color: var(--gold); }

/* --- Toolbar: search + chips --- */
.toolbar {
    position: sticky;
    top: 68px;                     /* sits just under the shrunk header */
    z-index: 40;
    padding-block: .9rem;
    margin-bottom: 1.6rem;
    background: rgba(255, 248, 243, .9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(212, 175, 122, .35);
}

.search {
    position: relative;
    max-width: 460px;
    margin: 0 auto 1rem;
}
.search .ico {
    position: absolute;
    left: 1.1rem; top: 50%;
    transform: translateY(-50%);
    width: 17px; height: 17px;
    color: var(--gold-deep);
    pointer-events: none;
}
.search input {
    width: 100%;
    padding: .9rem 2.8rem .9rem 2.9rem;
    border: 1px solid rgba(212, 175, 122, .6);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: .92rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.search input::placeholder { color: var(--ink-faint); }
/* Hide the browser's own clear button — we render our own styled one */
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search input:focus {
    outline: none;
    border-color: var(--berry);
    box-shadow: 0 0 0 4px rgba(176, 58, 107, .1);
}
.search__clear {
    position: absolute;
    right: .7rem; top: 50%;
    transform: translateY(-50%);
    display: none;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    color: var(--ink-faint);
}
.search__clear.is-on { display: grid; }
.search__clear:hover { background: var(--blush); color: var(--berry); }
.search__clear .ico { width: 14px; height: 14px; }

/* Filter chips — horizontally scrollable on phones */
.chips {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .3rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
    flex: none;
    padding: .55rem 1.1rem;
    border: 1px solid rgba(212, 175, 122, .65);
    border-radius: 999px;
    background: transparent;
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
    transition: background-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--gold); color: var(--plum); transform: translateY(-2px); }
.chip.is-on {
    background: var(--plum);
    border-color: var(--plum);
    color: var(--cream);
}
.chip__n {
    margin-left: .45rem;
    font-size: .85em;
    opacity: .65;
}

/* Result count line */
.resultline {
    margin: 0 0 1.4rem;
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-faint);
    text-align: center;
}

/* --- The grid: 2 cols mobile, 3 tablet, 4 desktop --- */
.pgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(.8rem, 2.4vw, 1.5rem);
}

/* Filter transition — items fade and lift out, then rearrange */
.pgrid .pcard {
    transition: transform var(--t-mid) var(--ease),
                box-shadow var(--t-mid) var(--ease),
                border-color var(--t-mid) var(--ease),
                opacity var(--t-mid) var(--ease);
}
.pcard.is-hidden {
    display: none;
}
.pcard.is-fading {
    opacity: 0;
    transform: scale(.94) translateY(8px);
}

/* --- Empty state --- */
.empty {
    display: none;
    padding: clamp(2.5rem, 8vw, 4.5rem) 1rem;
    text-align: center;
}
.empty.is-on { display: block; }
.empty__ico {
    display: grid;
    place-items: center;
    width: 76px; height: 76px;
    margin: 0 auto 1.3rem;
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--gold-deep);
}
.empty__ico .ico { width: 30px; height: 30px; }
.empty h2 { font-size: var(--fs-h3); font-style: italic; }
.empty p { margin: .7rem auto 1.6rem; max-width: 40ch; color: var(--ink-soft); }


/* ==========================================================================
   18. PRODUCT DETAIL PAGE
   ========================================================================== */
.pdp {
    display: grid;
    gap: clamp(1.8rem, 5vw, 3.5rem);
    align-items: start;
    padding-block: clamp(1.5rem, 4vw, 2.5rem) var(--section-y);
}

/* --- The large arch frame --- */
.pdp__media {
    position: relative;
    justify-self: center;
    width: min(100%, 440px);
}
.pdp__arch {
    position: relative;
    aspect-ratio: 4 / 5;
    display: grid;
    place-items: center;
    padding: 15% 13%;
    overflow: hidden;
    border-radius: 999px 999px var(--radius-lg) var(--radius-lg) / 42% 42% 4% 4%;
    background: radial-gradient(95% 80% at 50% 16%, #fff, var(--blush-pale) 65%, var(--blush));
    box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.pdp__arch img {
    width: 100%; height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    filter: drop-shadow(0 16px 22px rgba(59, 30, 63, .16));
}
.pdp__arch.is-fallback { padding: 0; }
.pdp__arch.is-fallback img { mix-blend-mode: normal; object-fit: cover; }

/* Gold ring around the arch */
.pdp__media::before {
    content: "";
    position: absolute;
    inset: -11px;
    border: 1px solid var(--gold);
    border-radius: 999px 999px calc(var(--radius-lg) + 11px) calc(var(--radius-lg) + 11px) / 42% 42% 4% 4%;
    opacity: .8;
    pointer-events: none;
}

/* --- Info column --- */
.pdp__brand {
    margin: 0 0 .7rem;
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.pdp__name {
    font-size: var(--fs-h1);
    line-height: 1.02;
}
.pdp__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem .9rem;
    margin: 1.1rem 0 0;
}
.pdp__size,
.pdp__cat {
    padding: .35rem .85rem;
    border: 1px solid rgba(212, 175, 122, .6);
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.pdp__cat:hover { border-color: var(--gold); color: var(--berry); }

.pdp__price {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    margin: 1.4rem 0 0;
}
.pdp__price b {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 7vw, 3rem);
    font-weight: 600;
    line-height: 1;
    color: var(--plum);
}
.pdp__price small {
    font-size: .58rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.pdp__short {
    margin: 1.2rem 0 0;
    font-size: clamp(1rem, 2.8vw, 1.1rem);
    font-style: italic;
    line-height: 1.6;
    color: var(--ink-soft);
}

.pdp__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin: 1.8rem 0 0;
}
.pdp__note {
    margin: 1rem 0 0;
    font-size: .74rem;
    line-height: 1.6;
    color: var(--ink-faint);
}

/* --- Detail blocks --- */
.pdp__blocks {
    display: grid;
    gap: 1.6rem;
    margin-top: clamp(1.8rem, 5vw, 2.6rem);
    padding-top: clamp(1.6rem, 4vw, 2.2rem);
    border-top: 1px solid rgba(212, 175, 122, .5);
}

.block__head {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 .7rem;
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.block__head::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
}
.block p { margin: 0; color: var(--ink-soft); }

/* Benefits list with gold sparkle bullets */
.blist { display: grid; gap: .6rem; }
.blist li {
    position: relative;
    padding-left: 1.7rem;
    color: var(--ink-soft);
    line-height: 1.6;
}
.blist li::before {
    content: "✦";
    position: absolute;
    left: 0;
    top: .05em;
    color: var(--gold);
    font-size: .8rem;
}

/* "Suitable for" callout */
.suited {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .9rem;
    align-items: center;
    padding: 1.1rem 1.2rem;
    border: 1px dashed rgba(212, 175, 122, .8);
    border-radius: var(--radius-md);
    background: rgba(244, 201, 208, .16);
}
.suited .ico { width: 22px; height: 22px; color: var(--berry); }
.suited b {
    display: block;
    font-size: .56rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.suited span { font-size: .92rem; color: var(--ink); }

/* --- Product not found --- */
.notfound {
    display: grid;
    place-items: center;
    gap: 1.2rem;
    padding: clamp(3.5rem, 12vw, 7rem) var(--gutter);
    text-align: center;
}
.notfound__arch {
    display: grid;
    place-items: center;
    width: clamp(110px, 32vw, 150px);
    aspect-ratio: 3 / 4;
    border: 1px solid var(--gold);
    border-radius: 999px 999px var(--radius-md) var(--radius-md) / 42% 42% 4% 4%;
    background: radial-gradient(85% 70% at 50% 20%, #fff, var(--blush-pale));
    color: var(--gold-deep);
}
.notfound__arch .ico { width: 40px; height: 40px; }
.notfound h1 { font-size: var(--fs-h2); }
.notfound p { max-width: 44ch; margin: 0 auto; color: var(--ink-soft); }
.notfound__cta { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: .6rem; }


/* ==========================================================================
   19. ABOUT PAGE
   ========================================================================== */
.story {
    display: grid;
    gap: clamp(1.6rem, 5vw, 3rem);
    align-items: center;
}
.story__text > * + * { margin-top: 1rem; }
.story__text p { color: var(--ink-soft); }

/* A large pull-quote in italic serif */
.pullquote {
    position: relative;
    margin: clamp(2rem, 6vw, 3rem) 0;
    padding: clamp(1.6rem, 5vw, 2.6rem) 0;
    border-block: 1px solid rgba(212, 175, 122, .5);
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 5vw, 2.3rem);
    font-style: italic;
    line-height: 1.3;
    text-align: center;
    color: var(--plum);
}
.pullquote::before {
    content: "❝";
    display: block;
    margin-bottom: .3rem;
    font-size: 1.6rem;
    font-style: normal;
    color: var(--gold);
}

/* The arch collage used on the about page */
.story__art {
    position: relative;
    justify-self: center;
    width: min(100%, 400px);
    aspect-ratio: 4 / 5;
}
.story__art .mirror { height: 100%; }

/* Promise list */
.promise { display: grid; gap: 1rem; }
.promise li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1.2rem;
    border-radius: var(--radius-md);
    background: var(--cream-card);
    border: 1px solid rgba(212, 175, 122, .3);
}
.promise .ico { width: 22px; height: 22px; margin-top: .25rem; color: var(--berry); }
.promise b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--plum);
}
.promise p { margin: .25rem 0 0; font-size: .86rem; color: var(--ink-soft); }

/* What we sell — simple gold-ruled list */
.sellslist {
    display: grid;
    gap: 0;
    margin-top: 1rem;
}
.sellslist li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem .2rem;
    border-bottom: 1px solid rgba(212, 175, 122, .35);
}
.sellslist .n {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--plum);
}
.sellslist .d { font-size: .82rem; color: var(--ink-soft); text-align: right; }


/* ==========================================================================
   20. CONTACT PAGE & ENQUIRY FORM
   ========================================================================== */
.contact {
    display: grid;
    gap: clamp(1.6rem, 5vw, 2.6rem);
    align-items: start;
}

.form {
    display: grid;
    gap: 1rem;
    padding: clamp(1.4rem, 4vw, 2rem);
    background: var(--cream-card);
    border: 1px solid rgba(212, 175, 122, .5);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.field { display: grid; gap: .4rem; }
.field label {
    font-size: .56rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.field input,
.field textarea,
.field select {
    width: 100%;
    padding: .8rem 1rem;
    border: 1px solid rgba(212, 175, 122, .6);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: .95rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: var(--berry);
    box-shadow: 0 0 0 4px rgba(176, 58, 107, .1);
}
.field__err {
    display: none;
    font-size: .74rem;
    color: var(--berry-deep);
}
.field.is-bad input,
.field.is-bad textarea { border-color: var(--berry); }
.field.is-bad .field__err { display: block; }

.form__note {
    margin: 0;
    font-size: .76rem;
    line-height: 1.6;
    color: var(--ink-faint);
}
.form__row { display: grid; gap: 1rem; }

/* Confirmation note, revealed by JS once the mailto: has been handed off */
.form__sent {
    display: none;
    grid-template-columns: auto 1fr;
    gap: .7rem;
    align-items: start;
    margin: 0;
    padding: .95rem 1.1rem;
    border: 1px solid var(--gold);
    border-radius: var(--radius-sm);
    background: rgba(244, 201, 208, .22);
    font-size: .82rem;
    line-height: 1.6;
    color: var(--ink);
}
.form__sent.is-on { display: grid; }
.form__sent .ico { width: 18px; height: 18px; margin-top: .25rem; color: var(--berry); }
.form__sent a { border-bottom: 1px solid var(--gold); }


/* ==========================================================================
   21. FOOTER
   ========================================================================== */
.site-foot {
    background: var(--plum-deep);
    color: var(--blush);
    padding-bottom: 1.5rem;
}

/* Gold hairline + sparkle divider at the very top */
.site-foot__rule {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 var(--gutter);
    color: var(--gold);
}
.site-foot__rule span {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-deep), var(--gold));
}
.site-foot__rule span:last-child {
    background: linear-gradient(90deg, var(--gold), var(--gold-deep), transparent);
}
.site-foot__rule .ico { width: 17px; height: 17px; }

.site-foot__grid {
    display: grid;
    gap: 2.2rem;
    padding-block: clamp(2.4rem, 7vw, 4rem);
}

.site-foot__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--cream);
}
.site-foot__tag {
    margin: .2rem 0 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--gold);
}
.site-foot__about {
    margin: 1rem 0 0;
    max-width: 38ch;
    font-size: .85rem;
    line-height: 1.7;
    color: rgba(244, 201, 208, .78);
}

.site-foot__social {
    display: flex;
    gap: .6rem;
    margin-top: 1.3rem;
}
.site-foot__social a {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border: 1px solid rgba(212, 175, 122, .45);
    border-radius: 50%;
    color: var(--gold);
    transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.site-foot__social a:hover {
    background: var(--gold);
    color: var(--plum-deep);
    transform: translateY(-3px);
}

.site-foot__head {
    margin: 0 0 1rem;
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold);
}
.site-foot__list { display: grid; gap: .6rem; }
.site-foot__list a {
    font-size: .86rem;
    color: rgba(244, 201, 208, .82);
    transition: color var(--t-fast), padding-left var(--t-fast);
}
.site-foot__list a:hover { color: #fff; padding-left: .3rem; }

.site-foot__line {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .7rem;
    margin: 0 0 .9rem;
    font-size: .85rem;
    line-height: 1.6;
    color: rgba(244, 201, 208, .82);
}
.site-foot__line .ico { width: 16px; height: 16px; margin-top: .3rem; color: var(--gold); }
.site-foot__line a:hover { color: #fff; }

.site-foot__base {
    display: grid;
    gap: .4rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(212, 175, 122, .22);
    font-size: .68rem;
    letter-spacing: .1em;
    color: rgba(244, 201, 208, .6);
    text-align: center;
}
.site-foot__base p { margin: 0; }
.site-foot__made { text-transform: uppercase; letter-spacing: .22em; font-size: .58rem; color: var(--gold-deep); }


/* ==========================================================================
   22. BACK TO TOP
   ========================================================================== */
.totop {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 60;
    display: grid;
    place-items: center;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: var(--berry);
    color: #fff;
    box-shadow: 0 10px 26px rgba(176, 58, 107, .34);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.9);
    transition: opacity var(--t-mid) var(--ease),
                transform var(--t-mid) var(--ease),
                visibility var(--t-mid),
                background-color var(--t-fast);
}
.totop.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.totop:hover { background: var(--plum); }
.totop svg { width: 21px; height: 30px; }
/* The lipstick bullet pushes up out of its case on hover */
.totop__bullet {
    transform: translateY(3px);
    transition: transform var(--t-mid) var(--ease);
}
.totop:hover .totop__bullet { transform: translateY(-2px); }


/* ==========================================================================
   23. SCROLL-REVEAL
   ========================================================================== */
/* Base state — JS adds .is-in when the element scrolls into view.
   Only opacity and transform animate, so these stay on the compositor. */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
    /* --i staggers siblings; capped in JS so long lists never crawl */
    transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.is-in {
    opacity: 1;
    transform: none;
}

/* If JS never runs, show everything rather than hiding the whole page */
.no-js .reveal { opacity: 1; transform: none; }


/* ==========================================================================
   24. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* ---------- Small phones: keep things breathing ---------- */
@media (max-width: 400px) {
    .pcard__foot { flex-direction: column; gap: .55rem; }
    .btn--buy { width: 100%; }
}

/* ---------- Tablet: 600px and up ---------- */
@media (min-width: 600px) {
    :root { --gutter: 28px; }

    .cats { grid-template-columns: repeat(3, 1fr); }
    .cat__blurb { display: block; }

    .ritual { grid-template-columns: repeat(4, 1fr); }

    .whys { grid-template-columns: repeat(2, 1fr); }

    .form__row { grid-template-columns: 1fr 1fr; }

    .site-foot__grid { grid-template-columns: repeat(2, 1fr); }

    .site-foot__base {
        grid-template-columns: 1fr auto;
        text-align: left;
    }

    .totop { right: 24px; bottom: 24px; width: 54px; height: 54px; }
}

/* ---------- Tablet landscape: 820px and up — 3 product columns ---------- */
@media (min-width: 820px) {
    .pgrid { grid-template-columns: repeat(3, 1fr); }

    .hero__grid { grid-template-columns: 1.05fr .95fr; }
    .hero__scroll { display: block; }

    .visit { grid-template-columns: .95fr 1.05fr; }
    .map, .map iframe { min-height: 420px; }

    .story { grid-template-columns: 1.1fr .9fr; }

    .pdp { grid-template-columns: .92fr 1.08fr; }
    .pdp__media { position: sticky; top: 100px; }

    .contact { grid-template-columns: 1fr 1fr; }

    .site-foot__grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; }

    /* The gold line connecting the four ritual steps */
    .ritual { position: relative; }
    .ritual__line {
        display: block;
        position: absolute;
        top: 2.75rem;
        left: 12%;
        right: 12%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--gold), var(--gold), transparent);
        z-index: 0;
    }
    .step { z-index: 1; }
}

/* ---------- Desktop: 1024px and up — 4 product columns, full nav ---------- */
@media (min-width: 1024px) {
    :root { --gutter: 40px; }

    .pgrid { grid-template-columns: repeat(4, 1fr); }

    .cats { grid-template-columns: repeat(4, 1fr); }

    .nav { display: flex; }
    .burger { display: none; }
    .head-phone { display: inline-flex; }

    .whys { grid-template-columns: repeat(4, 1fr); }

    .carousel__nav { display: flex; }

    /* Reveal the "View Details" link on hover, desktop only */
    .pcard__view {
        display: flex;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(10px);
        transition: max-height var(--t-mid) var(--ease),
                    opacity var(--t-mid) var(--ease),
                    transform var(--t-mid) var(--ease),
                    padding-top var(--t-mid) var(--ease);
        padding-top: 0;
    }
    .pcard:hover .pcard__view {
        max-height: 3rem;
        opacity: 1;
        transform: none;
        padding-top: .7rem;
    }

    .pdp__blocks { grid-template-columns: 1fr 1fr; }
    .pdp__blocks .block--wide,
    .pdp__blocks .suited { grid-column: 1 / -1; }
}

/* ---------- Wide desktop ---------- */
@media (min-width: 1280px) {
    .cats { grid-template-columns: repeat(4, 1fr); }
    .marquee__item { font-size: 1.2rem; }
}

/* Touch devices: no tilt, no hover-only reveals that would stick */
@media (hover: none) {
    .pcard { transform: none; }
    .pcard:hover { --lift: 0; }
}


/* ==========================================================================
   25. REDUCED MOTION
   ==========================================================================
   Anyone who has asked their system to reduce motion gets a calm, static
   site: no blobs, no petals, no marquee, no tilt, no shimmer. Content still
   appears — it simply appears instantly instead of animating in. */
@media (prefers-reduced-motion: reduce) {

    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        animation-delay: 0ms !important;
        transition-delay: 0ms !important;
    }

    /* Make sure nothing is left invisible mid-animation */
    .reveal { opacity: 1 !important; transform: none !important; }
    .hero__word > span { transform: none !important; }
    .mnav .mnav__link,
    .mnav .mnav__foot { opacity: 1 !important; transform: none !important; }

    /* Switch off the purely decorative moving layers */
    .blobs,
    .petals,
    .mirror__glint,
    .pcard__shimmer,
    .hero__scroll::after { display: none !important; }

    .marquee__track { animation: none !important; transform: none !important; }
    .pcard { transform: none !important; }
    .preloader { display: none !important; }
}