/* ============================================================
   UNIFYZONE — theme layer (sits on top of Bootstrap 5)
   Palette, type and shape tokens used across the storefront.

   Identity: cool evergreen ink on a cool off-white, with a jade
   accent. Soft radii and sentence-case type — deliberately not
   the black/gold, hairline-framed, wide-tracked-uppercase look.
   Retune the brand here; almost everything else reads from it.
   ============================================================ */
:root {
    --ink:         #13211e;   /* deep evergreen-black */
    --ink-soft:    #1f3733;
    --paper:       #f6f8f7;   /* cool off-white */
    --paper-2:     #e8eeeb;
    --accent:      #1f7a63;   /* jade */
    --accent-deep: #145947;
    --accent-lift: #54c9ac;   /* legible on dark backgrounds */
    --accent-tint: #dcebe5;
    --gray:        #5c6b66;
    --line:        #d9e2de;

    /* Back-compat aliases: older rules and a few inline styles still
       reference the gold tokens. Mapping them keeps everything on-palette
       even where a literal wasn't swept. */
    --gold:      var(--accent);
    --gold-deep: var(--accent-deep);

    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body:    "DM Sans", "Helvetica Neue", Arial, sans-serif;

    /* Shape: the old theme was uniformly square (radius 0). */
    --r-sm:   8px;
    --r:      14px;
    --r-lg:   22px;
    --r-pill: 999px;

    --shadow-soft:  0 18px 44px -26px rgba(19, 33, 30, 0.38);
    --shadow-card:  0 2px 10px -4px rgba(19, 33, 30, 0.12);
}

* { -webkit-font-smoothing: antialiased; }

body.luxe {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    letter-spacing: 0.01em;
}

.serif { font-family: var(--font-display); }

.eyebrow {
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-deep);
    font-weight: 600;
}

/* ---------- Auth split layout ---------- */
.auth-shell { min-height: 100vh; }

.auth-aside {
    background: linear-gradient(155deg, var(--ink-soft) 0%, var(--ink) 58%, #0d1917 100%);
    color: var(--paper);
    position: relative;
    overflow: hidden;
    padding: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.auth-aside::after {          /* soft jade wash, replaces the old inset frame */
    content: "";
    position: absolute;
    width: 34rem; height: 34rem;
    right: -12rem; bottom: -14rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(84, 201, 172, 0.16) 0%, rgba(84, 201, 172, 0) 70%);
    pointer-events: none;
}
.auth-aside .wordmark { display: inline-flex; }
.auth-aside .aside-quote {
    font-family: var(--font-display);
    font-size: 2.4rem;
    line-height: 1.15;
    font-weight: 300;
    max-width: 22ch;
}
.auth-aside .aside-quote em { color: var(--accent-lift); font-style: italic; }
.auth-aside .aside-foot { font-size: 0.78rem; letter-spacing: 0.18em; opacity: 0.7; text-transform: uppercase; }

.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}
.auth-card { width: 100%; max-width: 420px; }
.auth-card h1 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.015em;
    font-size: 2.4rem;
    line-height: 1.1;
    margin-bottom: 0.35rem;
}
.auth-card .sub { color: var(--gray); margin-bottom: 2rem; }

/* ---------- Form controls ---------- */
.form-label.luxe-label {
    font-size: 0.8rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500;
    color: var(--ink-soft);
    margin-bottom: 0.4rem;
}
.form-control.luxe-input {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 0.7rem 0.85rem;
    background: #fff;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.form-control.luxe-input:focus {
    box-shadow: 0 0 0 3px var(--accent-tint);
    border-color: var(--accent);
    background: #fff;
}

/* ---------- Buttons ---------- */
.btn-luxe {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    border-radius: var(--r-pill);
    padding: 0.72rem 1.6rem;
    letter-spacing: 0.005em;
    font-size: 0.92rem;
    font-weight: 500;
    text-transform: none;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-luxe:hover {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -14px rgba(20, 89, 71, 0.85);
}
.btn-ghost-luxe {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 0.72rem 1.6rem;
    letter-spacing: 0.005em;
    font-size: 0.92rem;
    font-weight: 500;
    text-transform: none;
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.btn-ghost-luxe:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-tint); }

.link-gold { color: var(--accent-deep); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .3s; }
.link-gold:hover { border-bottom-color: var(--accent); color: var(--accent-deep); }

.divider-word {
    display: flex; align-items: center; gap: 1rem;
    color: var(--gray); font-size: 0.78rem; letter-spacing: 0.02em;
    margin: 1.75rem 0;
}
.divider-word::before, .divider-word::after {
    content: ""; height: 1px; background: var(--line); flex: 1;
}

.alert-luxe {
    border: 0; border-left: 3px solid var(--accent); border-radius: var(--r-sm);
    background: var(--accent-tint); color: var(--ink-soft); font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ============================================================
   STOREFRONT
   ============================================================ */

/* ---------- Toast ---------- */
.lj-toast {
    position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(2rem);
    background: var(--ink); color: var(--paper); padding: 0.85rem 1.5rem;
    font-size: 0.86rem; letter-spacing: 0; z-index: 1080; opacity: 0;
    border-radius: var(--r-pill); box-shadow: var(--shadow-soft);
    pointer-events: none; transition: opacity .35s ease, transform .35s ease;
    border-bottom: 0;
}
.lj-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Header ---------- */
.announce-bar {
    background: var(--accent-deep); color: #fff; text-align: center;
    font-size: 0.8rem; letter-spacing: 0; padding: 0.6rem 1rem;
}
.site-header { position: sticky; top: 0; z-index: 1030; background: var(--paper); transition: box-shadow .3s; }
.site-header.scrolled { box-shadow: 0 1px 0 var(--line), 0 12px 30px -22px rgba(0,0,0,.3); }
.nav-wrap { display: flex; align-items: center; gap: 1.5rem; height: 74px; }
.brand { text-decoration: none; color: var(--ink); white-space: nowrap; display: inline-flex; }

/* ---------- Brand lockup (x-brand-logo) ---------- */
.brand-lockup { display: inline-flex; align-items: center; gap: 0.55rem; line-height: 1; }
.brand-mark { height: var(--mark-h, 26px); width: auto; flex: none; overflow: visible; }
.brand-mark-lens  { fill: var(--accent); opacity: 0.16; }
.brand-mark-ring-a { fill: none; stroke: currentColor; stroke-width: 2.6; }
.brand-mark-ring-b { fill: none; stroke: var(--accent); stroke-width: 2.6; }
.brand-word {
    font-family: var(--font-body);
    font-size: var(--brand-font, 1.32rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    text-transform: lowercase;
    color: currentColor;
}
.brand-word span { color: var(--accent); }
.brand-lockup.is-light { color: var(--paper); }
.brand-lockup.is-light .brand-mark-ring-b,
.brand-lockup.is-light .brand-word span { stroke: var(--accent-lift); color: var(--accent-lift); }
.brand-lockup.is-light .brand-mark-lens { fill: var(--accent-lift); opacity: 0.22; }
.nav-links { display: flex; gap: 2rem; margin: 0 auto; }
.nav-links a {
    text-decoration: none; color: var(--ink); font-size: 0.94rem; font-weight: 500;
    letter-spacing: 0; text-transform: none; position: relative; padding: 0.3rem 0;
}
.nav-links a::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
    border-radius: 2px; background: var(--accent); transition: width .3s ease;
}
.nav-links a:hover::after { width: 100%; }
.nav-icons { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }
.icon-btn {
    background: none; border: 0; color: var(--ink); padding: 0.5rem;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: color .25s; text-decoration: none;
}
.icon-btn:hover { color: var(--accent); }
.icon-badge { position: relative; }
.badge-count {
    position: absolute; top: 2px; right: 0; background: var(--accent); color: #fff;
    font-size: 0.62rem; min-width: 15px; height: 15px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; padding: 0 3px; font-weight: 500;
}
.nav-search { align-items: center; background: var(--paper-2); border-radius: var(--r-pill); padding: 0.1rem 0.35rem 0.1rem 0.75rem; }
.nav-search input { border: 0; background: transparent; padding: 0.4rem 0.2rem; font-size: 0.88rem; width: 130px; outline: none; }

/* ---------- Hero ---------- */
/* Light hero. The old one was a dark radial with an inset gold hairline
   frame — the single most recognisable element of the previous theme. */
.hero {
    position: relative; min-height: 76vh; display: flex; align-items: center;
    background: var(--paper);
    color: var(--ink); overflow: hidden;
}
.hero::before {
    content: ""; position: absolute; width: 62vw; height: 62vw; right: -16vw; top: -24vw;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, var(--accent-tint) 0%, rgba(220,235,229,0) 68%);
}
.hero::after {
    content: ""; position: absolute; width: 38vw; height: 38vw; left: -12vw; bottom: -20vw;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, var(--paper-2) 0%, rgba(232,238,235,0) 70%);
}
.hero-inner { position: relative; z-index: 2; padding: 4rem 0; }
.hero-eyebrow { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--accent-deep); margin-bottom: 1.1rem; }
.hero-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.6rem, 6.4vw, 4.9rem); line-height: 1.06; letter-spacing: -0.02em; margin-bottom: 1.4rem; }
.hero-title em { font-style: italic; color: var(--accent); }
.hero-sub { max-width: 44ch; color: var(--gray); font-size: 1.06rem; line-height: 1.6; margin-bottom: 2rem; }
.hero-cta { display: flex; gap: 0.85rem; flex-wrap: wrap; }

/* ---------- Sections ---------- */
.section { padding: 4.5rem 0; }
.section.pb-0 { padding-bottom: 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.5rem; }
.section-eyebrow { font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--accent-deep); margin-bottom: 0.5rem; }
.section-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 3.5vw, 2.5rem); letter-spacing: -0.02em; margin: 0; }
.section-link { text-decoration: none; color: var(--accent-deep); font-size: 0.9rem; font-weight: 500; letter-spacing: 0; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.45rem 1.05rem; white-space: nowrap; transition: background .25s, border-color .25s; }
.section-link:hover { background: var(--accent-tint); border-color: var(--accent); }

/* ---------- Category strip ---------- */
.cat-name { font-size: 0.9rem; font-weight: 500; letter-spacing: 0; text-transform: none; }

/* ---------- Product grid + card ---------- */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem 1.5rem; }
.product-card { position: relative; }
.pc-media { position: relative; overflow: hidden; background: var(--paper-2); aspect-ratio: 1; margin-bottom: 1rem; border-radius: var(--r); }
.pc-link { display: block; height: 100%; }
.lj-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-img { transition: opacity .5s ease, transform 1.2s ease; }
.pc-hover { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.pc-media:hover .pc-hover { opacity: 1; }
.pc-media:hover .pc-img { transform: scale(1.05); }
.pc-badges { position: absolute; top: 0.75rem; left: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
.badge-luxe { background: var(--ink); color: var(--paper); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.02em; text-transform: none; padding: 0.26rem 0.62rem; border-radius: var(--r-pill); }
.badge-sale { background: var(--accent); color: #fff; }
.badge-out { background: #8a8a8a; }
.pc-wish {
    position: absolute; top: 0.6rem; right: 0.6rem; width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,.85); border: 0; display: flex; align-items: center; justify-content: center;
    color: var(--ink); cursor: pointer; opacity: 0; transform: translateY(-4px); transition: all .3s;
}
.pc-wish.is-active { color: var(--accent); background: #fff; opacity: 1; transform: none; }
.pc-wish.is-active svg { fill: var(--accent); }
.pc-add { background: var(--accent); color: #fff; transition: background .3s; }
.pc-add:hover { background: var(--accent-deep); color: #fff; }
.pc-body { display: block; }
.pc-cat { font-size: 0.78rem; letter-spacing: 0.02em; text-transform: none; color: var(--gray); }
.pc-name { font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; letter-spacing: -0.01em; margin: 0.25rem 0 0.4rem; line-height: 1.25; }
.pc-name a { color: var(--ink); text-decoration: none; }
.pc-name a:hover { color: var(--accent-deep); }
.pc-price { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 0.4rem; }
.price-now { font-size: 1.02rem; }
.price-was { color: var(--gray); text-decoration: line-through; font-size: 0.85rem; }

/* ---------- Rating ---------- */
.rating { display: inline-flex; align-items: center; gap: 1px; font-size: 0.8rem; }
.rating .star { color: var(--line); line-height: 1; }
.rating .star.full { color: var(--accent); }
.rating .star.half { background: linear-gradient(90deg, var(--accent) 50%, var(--line) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rating-count { color: var(--gray); font-size: 0.72rem; margin-left: 0.35rem; }

/* ---------- Collections ---------- */
.collection-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.collection-tile { position: relative; min-height: 300px; display: flex; align-items: flex-end; padding: 2.2rem; text-decoration: none; overflow: hidden; border-radius: var(--r-lg); color: var(--paper); }
.collection-tile::before { content: ""; position: absolute; inset: 0; transition: transform 1s ease; }
.collection-tile.tile-0::before { background: linear-gradient(150deg, #24463d, #10201d); }
.collection-tile.tile-1::before { background: linear-gradient(150deg, #1f7a63, #123f34); }
.collection-tile.tile-2::before { background: linear-gradient(150deg, #24383f, #0f1c20); }
.collection-tile.tile-3::before { background: linear-gradient(150deg, #2f4a44, #131f1d); }
.collection-tile:hover::before { transform: scale(1.06); }
.collection-tile-body { position: relative; z-index: 2; }
.collection-tile-body h3 { font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; letter-spacing: -0.02em; margin: 0.2rem 0 0.6rem; }
.collection-link { font-size: 0.9rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--accent-lift); }

/* ---------- Editorial ---------- */
.editorial { background: linear-gradient(140deg, var(--ink-soft), var(--ink)); color: var(--paper); padding: 5.5rem 0; text-align: center; }
.editorial-inner { max-width: 720px; margin: 0 auto; }
.editorial-title { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 400; letter-spacing: -0.02em; margin: 0.5rem 0 1.2rem; }
.editorial-sub { color: rgba(255,255,255,.7); margin-bottom: 2rem; }

/* ---------- Reviews ---------- */
.reviews-section { background: var(--paper-2); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.review-card { background: var(--paper); padding: 2rem; margin: 0; text-align: center; border-radius: var(--r); box-shadow: var(--shadow-card); }
.review-card blockquote { font-family: var(--font-display); font-size: 1.2rem; font-style: italic; line-height: 1.4; margin: 1rem 0; }
.review-card figcaption { font-size: 0.84rem; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--gray); }

/* ---------- Instagram ---------- */

/* ---------- Footer ---------- */
.newsletter-form { display: flex; max-width: 480px; margin: 0 auto; gap: 0.5rem; }
.newsletter-form input { flex: 1; border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; padding: 0.8rem 1.15rem; outline: none; transition: border-color .25s, box-shadow .25s; }
.newsletter-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.newsletter-form .btn-luxe { white-space: nowrap; }
.site-footer { background: var(--ink); color: rgba(255,255,255,.7); padding: 4rem 0 2rem; }
.footer-brand { color: var(--paper); display: inline-flex; margin-bottom: 1rem; }
.footer-tagline { font-size: 0.88rem; max-width: 32ch; line-height: 1.6; }
.footer-social { display: flex; gap: 1.2rem; margin-top: 1.2rem; }
.footer-social a { color: var(--accent-lift); text-decoration: none; font-size: 0.88rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.footer-title { color: var(--paper); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.6rem; }
.footer-links a { color: rgba(255,255,255,.7); text-decoration: none; font-size: 0.86rem; transition: color .25s; }
.footer-links a:hover { color: var(--gold); }
.pay-icons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pay-icons span { border: 1px solid rgba(255,255,255,.2); padding: 0.3rem 0.5rem; font-size: 0.66rem; letter-spacing: 0.08em; }
.footer-bottom { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.1); margin-top: 3rem; padding-top: 1.5rem; font-size: 0.76rem; }

/* ---------- Page head / breadcrumb ---------- */
.page-head { padding: 3rem 0 1.5rem; border-bottom: 1px solid var(--line); }
.breadcrumb-lux { padding: 1.5rem 0; font-size: 0.76rem; letter-spacing: 0.06em; color: var(--gray); }
.breadcrumb-lux a { color: var(--gray); text-decoration: none; }
.breadcrumb-lux a:hover { color: var(--gold-deep); }
.breadcrumb-lux span { margin: 0 0.4rem; }
.breadcrumb-lux .current { color: var(--ink); }

/* ---------- Shop layout ---------- */
.shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 3rem; padding: 2.5rem 0 5rem; }
.filters { position: sticky; top: 100px; align-self: start; }
.filter-group { margin-bottom: 2rem; }
.filter-title { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.9rem; color: var(--ink); }
.filter-list { list-style: none; padding: 0; margin: 0; }
.filter-list li { margin-bottom: 0.5rem; }
.filter-list a { text-decoration: none; color: var(--gray); font-size: 0.88rem; transition: color .25s; }
.filter-list a:hover, .filter-list a.active { color: var(--gold-deep); }
.filter-list.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { border: 1px solid var(--line); padding: 0.35rem 0.7rem; font-size: 0.74rem; }
.chip.active { border-color: var(--gold); color: var(--gold-deep); background: rgba(31,122,99,.08); }
.price-inputs { display: flex; align-items: center; gap: 0.5rem; }
.price-inputs input { width: 100%; border: 1px solid var(--line); padding: 0.5rem; font-size: 0.82rem; outline: none; }
.price-inputs input:focus { border-color: var(--gold); }
.stock-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.84rem; color: var(--gray); margin-top: 0.9rem; cursor: pointer; }
.clear-filters { display: inline-block; margin-top: 1rem; color: var(--gold-deep); font-size: 0.78rem; }
.sort-bar { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.result-count { font-size: 0.82rem; color: var(--gray); letter-spacing: 0.06em; }
.sort-form { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }
.sort-form label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); }
.sort-form select { border: 0; border-bottom: 1px solid var(--line); padding: 0.35rem 1.5rem 0.35rem 0.2rem; background: transparent; outline: none; font-size: 0.86rem; }
.pagination-wrap { margin-top: 3rem; display: flex; justify-content: center; }
.pagination-wrap .pagination { --bs-pagination-color: var(--ink); --bs-pagination-hover-color: var(--gold-deep); --bs-pagination-active-bg: var(--ink); --bs-pagination-active-border-color: var(--ink); --bs-pagination-border-radius: var(--r-sm); }
.empty-state { text-align: center; padding: 5rem 1rem; }

/* ---------- Product detail ---------- */
/* --- PDP layout -----------------------------------------------------------
   Gallery scrolls in the left column; the info column sticks alongside it and
   releases naturally once the gallery ends (align-items:start is what allows
   position:sticky to work inside a grid track). */
.pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3.5rem; padding-bottom: 4rem; align-items: start; }

.pdp-gallery { min-width: 0; }

/* Hero: one large image */
.pdp-hero { margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--paper-2); cursor: zoom-in; }
.pdp-hero .lj-img { transition: transform .1s ease-out; width: 100%; height: 100%; object-fit: cover; }

/* Remaining media, two per row */
.pdp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.75rem; }
.pdp-grid-item { margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--paper-2); }
.pdp-grid-item .lj-img { width: 100%; height: 100%; object-fit: cover; }
.pdp-grid-video { background: #000; }
.pdp-grid-video video,
.pdp-grid-video iframe { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }

/* Sticky details column — natural height, never its own scrollbar.
   If the panel is taller than the viewport, JS drops the sticky so it scrolls
   with the page instead of clipping the Add to bag button out of reach. */
.pdp-info {
    padding-top: 0.5rem;
    position: sticky;
    top: var(--pdp-sticky-top, 96px);
    align-self: start;
}
.pdp-info.is-tall { position: static; top: auto; }

/* Don't stick on short screens or mobile — it just gets in the way. */
@media (max-width: 900px), (max-height: 620px) {
    .pdp-info { position: static; top: auto; }
}
.pdp-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.08; margin: 0.5rem 0 0.75rem; }
.pdp-meta { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.25rem; }
.pdp-sku { font-size: 0.74rem; letter-spacing: 0.08em; color: var(--gray); text-transform: uppercase; }
.pdp-price { display: flex; align-items: baseline; gap: 0.85rem; margin-bottom: 1.5rem; }
.pdp-price .price-now { font-size: 1.7rem; }
.pdp-short { color: var(--gray); line-height: 1.7; margin-bottom: 1.5rem; }
.pdp-attrs { list-style: none; padding: 0; margin: 0 0 2rem; border-top: 1px solid var(--line); }
.pdp-attrs li { display: flex; justify-content: space-between; padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.pdp-attrs li span { color: var(--gray); letter-spacing: 0.06em; }
.pdp-variant { margin-bottom: 1.5rem; }
.size-options { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.6rem; }
.size-opt { min-width: 46px; padding: 0.6rem 0.4rem; border: 1px solid var(--line); background: var(--paper); cursor: pointer; font-size: 0.85rem; transition: all .25s; }
.size-opt:hover { border-color: var(--ink); }
.size-opt.active { border-color: var(--gold); background: var(--ink); color: var(--paper); }
.size-opt:disabled { opacity: 0.4; text-decoration: line-through; cursor: not-allowed; }
.pdp-cart-row { display: flex; gap: 0.75rem; align-items: stretch; }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); }
.qty-stepper button { width: 42px; height: 100%; min-height: 46px; border: 0; background: transparent; font-size: 1.1rem; cursor: pointer; color: var(--ink); }
.qty-stepper input { width: 44px; text-align: center; border: 0; outline: none; background: transparent; font-size: 0.95rem; }
.pdp-secondary { display: flex; gap: 1.5rem; margin-top: 1.25rem; }
.pdp-link { background: none; border: 0; display: inline-flex; align-items: center; gap: 0.45rem; color: var(--gray); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.pdp-link:hover { color: var(--gold-deep); }
.pdp-link.is-active { color: var(--gold-deep); }
.pdp-link.is-active svg { fill: var(--gold); }
.pdp-assurances { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--gray); }

/* ---------- PDP tabs ---------- */
.pdp-tabs-wrap { padding: 2rem 0 4rem; }
.pdp-tabs { border-bottom: 1px solid var(--line); gap: 2rem; list-style: none; padding: 0; margin-bottom: 2rem; }
.tab-btn { background: none; border: 0; border-bottom: 2px solid transparent; padding: 0.8rem 0; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); cursor: pointer; margin-bottom: -1px; }
.tab-btn.active { color: var(--ink); border-bottom-color: var(--gold); }
.pdp-tab-content { max-width: 760px; line-height: 1.8; color: #3a3a3a; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { text-align: left; padding: 0.75rem 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.spec-table th { color: var(--gray); width: 40%; letter-spacing: 0.04em; }
.review-item { padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.review-title { font-weight: 500; margin: 0.4rem 0 0.2rem; }
.verified-tag { font-size: 0.7rem; letter-spacing: 0.08em; color: var(--gold-deep); text-transform: uppercase; }
.review-form { max-width: 520px; }
.star-input { display: inline-flex; flex-direction: row-reverse; margin-bottom: 0.75rem; }
.star-input input { display: none; }
.star-input label { font-size: 1.5rem; color: var(--line); cursor: pointer; padding: 0 2px; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: var(--gold); }

/* ---------- Frequently bought ---------- */
.fbt-section { background: var(--paper-2); }
.fbt-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.fbt-item { width: 130px; text-align: center; text-decoration: none; color: var(--ink); }
.fbt-item .lj-img { aspect-ratio: 1; border: 1px solid var(--line); }
.fbt-item span { display: block; font-size: 0.8rem; margin-top: 0.5rem; }
.fbt-plus { font-size: 1.5rem; color: var(--gray); }

/* ---------- Cart ---------- */
.cart-wrap { padding: 2.5rem 0 5rem; }
.cart-grid { display: grid; grid-template-columns: 1fr 360px; gap: 3rem; }
.cart-item { display: grid; grid-template-columns: 100px 1fr auto auto; gap: 1.25rem; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.cart-item-img { display: block; }
.cart-item-img .lj-img { aspect-ratio: 1; }
.cart-item-info h3 { font-family: var(--font-display); font-size: 1.2rem; margin: 0 0 0.3rem; }
.cart-item-info h3 a { color: var(--ink); text-decoration: none; }
.cart-item-variant { font-size: 0.82rem; color: var(--gray); margin: 0; }
.cart-item-sku { font-size: 0.72rem; color: var(--gray); margin: 0.2rem 0 0.5rem; }
.cart-remove button { background: none; border: 0; color: var(--gray); font-size: 0.76rem; text-decoration: underline; cursor: pointer; padding: 0; }
.cart-remove button:hover { color: #a33; }
.cart-item-price { font-size: 1.05rem; min-width: 90px; text-align: right; }
.continue-link { display: inline-block; margin-top: 1.5rem; color: var(--gray); text-decoration: none; font-size: 0.84rem; }
.continue-link:hover { color: var(--gold-deep); }
.cart-summary, .checkout-summary { background: var(--paper-2); padding: 2rem; align-self: start; position: sticky; top: 100px; }
.summary-title { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 1.25rem; }
.coupon-input { display: flex; }
.coupon-input input { flex: 1; border: 1px solid var(--line); border-right: 0; padding: 0.6rem 0.75rem; outline: none; background: var(--paper); }
.coupon-input button { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); padding: 0 1rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.coupon-applied { background: rgba(31,122,99,.12); border: 1px solid var(--gold); padding: 0.6rem 0.85rem; font-size: 0.85rem; }
.coupon-remove { background: none; border: 0; color: var(--gray); font-size: 0.74rem; text-decoration: underline; cursor: pointer; padding: 0; margin-top: 0.5rem; }
.summary-lines { margin: 1.5rem 0 0; }
.summary-lines > div { display: flex; justify-content: space-between; padding: 0.4rem 0; font-size: 0.9rem; }
.summary-lines dt, .summary-lines dd { margin: 0; }
.summary-lines .muted { color: var(--gray); }
.summary-lines .text-gold { color: var(--gold-deep); }
.summary-total { display: flex; justify-content: space-between; font-family: var(--font-display); font-size: 1.3rem; padding-top: 1rem; margin-top: 0.5rem; border-top: 1px solid var(--line); }

/* ---------- Checkout ---------- */
.checkout-wrap { padding: 2.5rem 0 5rem; }
.checkout-grid { display: grid; grid-template-columns: 1fr 380px; gap: 3rem; }
.checkout-block { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--line); }
.checkout-block-title { font-family: var(--font-display); font-size: 1.35rem; display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.checkout-block-title span { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 0.82rem; }
.checkout-grid .luxe-label { display: block; }
.ship-option { display: flex; align-items: center; gap: 0.85rem; border: 1px solid var(--line); padding: 0.9rem 1rem; margin-bottom: 0.6rem; cursor: pointer; }
.ship-option:has(input:checked) { border-color: var(--gold); background: rgba(31,122,99,.06); }
.ship-name { display: flex; flex-direction: column; }
.ship-name small { color: var(--gray); font-size: 0.74rem; }
.ship-cost { margin-left: auto; }
.checkout-lines { margin-bottom: 1.25rem; }
.checkout-line { display: flex; align-items: center; gap: 0.85rem; padding: 0.6rem 0; }
.checkout-line-img { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.checkout-line-img .lj-img { aspect-ratio: 1; border: 1px solid var(--line); }
.line-qty { position: absolute; top: -8px; right: -8px; background: var(--ink); color: var(--paper); width: 20px; height: 20px; border-radius: 50%; font-size: 0.68rem; display: flex; align-items: center; justify-content: center; }
.checkout-line-name { flex: 1; font-size: 0.86rem; }
.checkout-line-name small { display: block; color: var(--gray); font-size: 0.74rem; }
.checkout-line-price { font-size: 0.88rem; }
.checkout-secure { text-align: center; font-size: 0.76rem; color: var(--gray); margin-top: 1rem; }

/* ---------- Confirmation ---------- */
.confirm { padding: 4rem 0 6rem; }
.confirm-inner { max-width: 620px; margin: 0 auto; text-align: center; }
.confirm-mark { width: 76px; height: 76px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-deep); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; }
.confirm-title { font-size: 2.5rem; font-weight: 400; margin-bottom: 0.5rem; }
.confirm-card { background: var(--paper-2); padding: 2rem; margin: 2.5rem 0; text-align: left; }
.confirm-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.confirm-label { display: block; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); margin-bottom: 0.3rem; }
.confirm-items { margin-bottom: 1rem; }
.confirm-item { display: flex; justify-content: space-between; padding: 0.4rem 0; font-size: 0.9rem; }
.confirm-item small { color: var(--gray); }
.confirm-ship { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.confirm-ship p { font-size: 0.9rem; line-height: 1.6; margin: 0.3rem 0 0; }
.confirm-actions { display: flex; gap: 1rem; justify-content: center; }

/* ---------- CMS ---------- */
.cms-content { max-width: 760px; margin: 3rem auto 5rem; line-height: 1.85; color: #3a3a3a; }

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .pdp { grid-template-columns: 1fr; gap: 2rem; }
    .shop-layout { grid-template-columns: 1fr; }
    .filters { position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 85vw; background: var(--paper); z-index: 1050; padding: 2rem; overflow-y: auto; transform: translateX(-105%); transition: transform .3s; box-shadow: var(--shadow-soft); }
    .filters.open { transform: none; }
    .cart-grid, .checkout-grid, .collection-grid, .reviews-grid { grid-template-columns: 1fr; }
    .nav-links { position: fixed; inset: 0 auto 0 0; width: 280px; background: var(--paper); flex-direction: column; padding: 6rem 2rem 2rem; gap: 1.5rem; transform: translateX(-105%); transition: transform .3s; z-index: 1040; box-shadow: var(--shadow-soft); }
    .nav-links.open { transform: none; }
    .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
}
@media (max-width: 576px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .section { padding: 3rem 0; }
    .cart-item { grid-template-columns: 72px 1fr; grid-template-areas: "img info" "img qty" "price price"; }
    .newsletter-form { flex-direction: column; gap: 0.75rem; }
    .newsletter-form input { border-right: 1px solid var(--line); }
}

/* ============================================================
   ACCOUNT / DASHBOARD
   ============================================================ */
.account-shell { display: grid; grid-template-columns: 220px 1fr; gap: 3rem; padding: 2.5rem 0 5rem; }
.account-nav { display: flex; flex-direction: column; gap: 0.15rem; align-self: start; position: sticky; top: 100px; }
.account-nav a { text-decoration: none; color: var(--gray); font-size: 0.86rem; letter-spacing: 0.04em; padding: 0.6rem 0.9rem; border-left: 2px solid transparent; transition: all .25s; }
.account-nav a:hover { color: var(--ink); }
.account-nav a.active { color: var(--ink); border-left-color: var(--gold); background: var(--paper-2); }
.account-logout { background: none; border: 0; text-align: left; color: var(--gray); font-size: 0.86rem; padding: 0.6rem 0.9rem; cursor: pointer; margin-top: 0.5rem; border-top: 1px solid var(--line); width: 100%; }
.account-logout:hover { color: #a33; }
.account-content { min-width: 0; }
.account-block { background: var(--paper); border: 1px solid var(--line); padding: 1.75rem; margin-bottom: 1.5rem; }
.account-block-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.account-block-head h3, .account-block h3 { font-family: var(--font-display); font-size: 1.3rem; margin: 0; }
.link-gold { color: var(--gold-deep); text-decoration: none; font-size: 0.82rem; }
.link-gold:hover { text-decoration: underline; }
.back-link { display: inline-block; color: var(--gray); text-decoration: none; font-size: 0.82rem; margin-bottom: 1.25rem; }
.back-link:hover { color: var(--gold-deep); }
.alert-luxe { background: rgba(31,122,99,.1); border: 1px solid var(--gold); color: var(--ink); padding: 0.85rem 1rem; margin-bottom: 1.5rem; font-size: 0.88rem; }

/* stats */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { background: var(--paper); border: 1px solid var(--line); padding: 1.4rem; text-align: center; text-decoration: none; color: var(--ink); transition: border-color .25s; }
.stat-card:hover { border-color: var(--gold); }
.stat-num { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--gold-deep); }
.stat-label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); }

/* order rows */
.order-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 1.25rem; align-items: center; padding: 1rem; border: 1px solid var(--line); margin-bottom: 0.75rem; text-decoration: none; color: var(--ink); transition: border-color .25s; }
.order-row:hover { border-color: var(--gold); }
.order-row-imgs { display: flex; }
.order-thumb { width: 46px; height: 46px; border: 1px solid var(--line); overflow: hidden; margin-left: -10px; background: var(--paper-2); border-radius: 2px; }
.order-thumb:first-child { margin-left: 0; }
.order-thumb.more { display: flex; align-items: center; justify-content: center; font-size: 0.74rem; color: var(--gray); }
.order-row-meta { display: flex; flex-direction: column; }
.order-row-meta strong { font-size: 0.92rem; }
.order-row-meta span { font-size: 0.78rem; }
.order-row-total { font-size: 1rem; }
.status-pill { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 20px; white-space: nowrap; }
.status-muted { background: #eee; color: #666; }
.status-gold { background: rgba(31,122,99,.16); color: var(--gold-deep); }
.status-green { background: #e5f2e8; color: #2e7d46; }
.status-red { background: #f6e5e5; color: #a33; }
.order-filter-tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; flex-wrap: wrap; }
.order-filter-tabs a { text-decoration: none; color: var(--gray); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.6rem 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.order-filter-tabs a.active { color: var(--ink); border-bottom-color: var(--gold); }

/* order detail */
.order-detail-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.order-detail-actions { display: flex; gap: 0.5rem; }
.detail-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.detail-item-img { width: 56px; height: 56px; border: 1px solid var(--line); overflow: hidden; flex-shrink: 0; }
.detail-item-info { flex: 1; }
.detail-item-price { font-size: 0.95rem; }
.order-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.tracking-box { margin-top: 1.25rem; padding: 1rem 1.25rem; background: var(--paper-2); display: flex; flex-direction: column; gap: 0.25rem; }

/* timeline */
.timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0; }
.timeline-step { flex: 1; min-width: 90px; position: relative; padding-top: 26px; text-align: center; }
.timeline-step::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--line); }
.timeline-step:first-child::before { left: 50%; }
.timeline-step:last-child::before { right: 50%; }
.timeline-step.done::before { background: var(--gold); }
.timeline-dot { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line); z-index: 1; }
.timeline-step.done .timeline-dot { border-color: var(--gold); background: var(--gold); }
.timeline-step.current .timeline-dot { box-shadow: 0 0 0 4px rgba(31,122,99,.2); }
.timeline-label { display: block; font-size: 0.74rem; margin-bottom: 2px; }
.timeline-step.done .timeline-label { color: var(--ink); }
.timeline-step:not(.done) .timeline-label { color: var(--gray); }
.timeline-date { display: block; font-size: 0.66rem; color: var(--gray); }

/* addresses */
.address-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.address-card { border: 1px solid var(--line); padding: 1.5rem; position: relative; }
.address-card.is-default { border-color: var(--gold); }
.default-tag { position: absolute; top: 0; right: 0; background: var(--gold); color: var(--ink); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.6rem; }
.address-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); }
.address-preview { font-style: normal; line-height: 1.6; color: #444; margin: 0.5rem 0 0; font-size: 0.9rem; }
.address-actions { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }
.address-remove { background: none; border: 0; color: var(--gray); font-size: 0.82rem; cursor: pointer; padding: 0; text-decoration: underline; }
.address-remove:hover { color: #a33; }
.account-form .luxe-label { display: block; }

/* returns */
.return-card { border: 1px solid var(--line); padding: 1.5rem; margin-bottom: 1rem; }
.return-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; gap: 1rem; }
.return-reason { color: #444; font-size: 0.9rem; margin-bottom: 0.75rem; }
.return-items { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.return-item-chip { background: var(--paper-2); border: 1px solid var(--line); font-size: 0.76rem; padding: 0.25rem 0.6rem; }
.return-select { display: flex; align-items: center; gap: 1rem; border: 1px solid var(--line); padding: 0.85rem; margin-bottom: 0.6rem; cursor: pointer; }
.return-select:has(input:checked) { border-color: var(--gold); background: rgba(31,122,99,.05); }
.return-select-img { width: 52px; height: 52px; border: 1px solid var(--line); overflow: hidden; flex-shrink: 0; }
.return-select-info { flex: 1; }
.return-type-opts { display: flex; gap: 0.75rem; }
.return-type-opts .ship-option { flex: 1; }

@media (max-width: 992px) {
    .account-shell { grid-template-columns: 1fr; gap: 1.5rem; }
    .account-nav { position: static; flex-direction: row; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 0.5rem; }
    .account-nav a { border-left: 0; border-bottom: 2px solid transparent; }
    .account-nav a.active { background: none; border-bottom-color: var(--gold); }
    .account-nav form { margin-left: auto; }
    .account-logout { border-top: 0; margin-top: 0; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .address-grid { grid-template-columns: 1fr; }
    .order-row { grid-template-columns: auto 1fr; }
    .order-row .status-pill, .order-row-total { grid-column: 2; justify-self: start; }
}

/* ============================================================
   PAYMENT PAGE
   ============================================================ */
.pay-card { background: var(--paper); border: 1px solid var(--line); padding: 1.75rem; margin-bottom: 1.25rem; }
.pay-item { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.pay-total { display: flex; justify-content: space-between; padding-top: 1rem; margin-top: 0.5rem; font-family: var(--font-display); font-size: 1.4rem; }
.pay-notice { background: rgba(31,122,99,.08); border: 1px solid var(--line); padding: 1rem 1.15rem; font-size: 0.88rem; color: var(--gray); margin-bottom: 1.15rem; line-height: 1.6; }
.pay-error { color: #a33; font-size: 0.86rem; margin-top: 0.85rem; }

/* ============================================================
   UI REFINEMENTS
   ============================================================ */

/* ---------- 1. Ghost button on dark backgrounds ----------
   .btn-ghost-luxe sets `color` directly, so Bootstrap's --bs-btn-color
   variable can't override it — which is why "Our craft" rendered near-black
   on the dark editorial band. This modifier sets the real property. */
.btn-ghost-luxe--light {
    color: var(--paper);
    border-color: rgba(250, 249, 246, 0.4);
}
.btn-ghost-luxe--light:hover,
.btn-ghost-luxe--light:focus {
    color: var(--gold);
    border-color: var(--gold);
}

/* ---------- 2. PDP selects ----------
   Sized to match .size-opt exactly so the controls line up, and toned down
   from pure black. Native arrow replaced — it renders heavy and dark. */
:root {
    --control-h:  46px;              /* shared height: size-opt, select, qty */
    --ink-mid:    #45423e;           /* softened text, not full --ink */
}

.size-opt {
    min-height: var(--control-h);
    color: var(--ink-mid);
}
.size-opt.active { color: var(--paper); }

.pdp-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: var(--control-h);
    padding: 0 2.4rem 0 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background-color: var(--paper);
    color: var(--ink-mid);
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: var(--control-h);
    cursor: pointer;
    transition: border-color .25s ease;

    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345423e' stroke-width='1.5'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 0.85rem;
}
.pdp-select:hover  { border-color: var(--ink-mid); }
.pdp-select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: none;
}
/* The dropdown list itself is OS-drawn; this is the most control we get. */
.pdp-select option { color: var(--ink-mid); background: var(--paper); }

/* ---------- 3. Wider product detail page ----------
   Gives the gallery noticeably more room on large screens while keeping the
   info column readable — an unbounded text column reads badly. */
@media (min-width: 1200px) {
    .pdp.container,
    .pdp-breadcrumb-container {
        max-width: min(1560px, 94vw);
    }
    .pdp {
        grid-template-columns: 1.55fr 1fr;
        gap: 4rem;
    }
    .pdp-info { max-width: 520px; }
}

/* ---------- 4. Mobile breathing room ----------
   Bootstrap's container gutter is 12px, which reads as edge-to-edge on a
   phone. These raise it and stop full-bleed sections from touching. */
@media (max-width: 767px) {
    .container,
    .container-fluid {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .pdp { gap: 1.75rem; }
    .pdp-info { padding-top: 0; }
    .section { padding: 2.5rem 0; }
    .editorial { padding: 3.5rem 0; }
    .editorial-inner { padding: 0 0.25rem; }
}

@media (max-width: 480px) {
    .container,
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    /* Full-width tap targets read better than cramped side-by-side ones. */
    .pdp-cart-row { flex-wrap: wrap; }
    .pdp-cart-row .btn { width: 100%; }
}

/* ============================================================
   V1 REFINEMENTS
   ============================================================ */

/* ---------- Certificate checkbox ----------
   The label wraps several lines (name, price, description) while the box is
   one line tall, so flex-start alone left it sitting above the text. A fixed
   box size plus a small optical nudge lines it up with the first line's
   cap height. */
.cert-check {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
    line-height: 1.45;
}
.cert-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 0;
    margin-top: 0.18rem;      /* optical alignment with the bold first line */
    accent-color: var(--ink);
    cursor: pointer;
}
.cert-check > span { flex: 1 1 auto; }

/* ---------- Info tooltips ----------
   A real <button> so it is keyboard reachable and, importantly, receives
   focus on tap — which is what makes the tip open on touch devices without
   any JavaScript. */
.label-optional { color: var(--gray); text-transform: none; letter-spacing: 0; font-size: 0.72rem; }

.info-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 0.35rem;
    padding: 0;
    border: 1px solid var(--gray);
    border-radius: 50%;
    background: transparent;
    color: var(--gray);
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-style: italic;
    line-height: 1;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    /* Tap target stays finger-sized without the circle growing. */
    outline-offset: 2px;
}
.info-tip::before {
    content: "";
    position: absolute;
    inset: -12px;              /* ~40px touch area */
}
.info-tip:hover, .info-tip:focus-visible { border-color: var(--ink); color: var(--ink); }

.info-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: min(270px, 78vw);
    padding: 0.6rem 0.75rem;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.74rem;
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.5;
    text-align: left;
    border-radius: 3px;
    box-shadow: 0 8px 24px -10px rgba(14, 14, 14, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease;
    z-index: 40;
    pointer-events: none;
}
.info-tip:hover::after,
.info-tip:focus::after { opacity: 1; visibility: visible; }

/* Near the viewport edge, anchor left so the tip can't overflow off-screen. */
@media (max-width: 575px) {
    .info-tip::after { left: 0; transform: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    /* 16px minimum stops iOS Safari zooming in when a field is focused,
       which otherwise leaves the page stuck at the wrong scale. */
    .form-control,
    .form-control.luxe-input,
    .pdp-select,
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="password"], input[type="number"], input[type="search"],
    select, textarea {
        font-size: 16px;
    }

    /* Comfortable finger targets throughout. */
    .form-control.luxe-input { padding: 0.8rem 0.1rem; }
    .btn, .btn-luxe, .btn-ghost-luxe { min-height: 46px; }
    .nav-icons a, .nav-icons button { min-width: 42px; min-height: 42px; }

    .checkout-block { padding: 1.25rem 0; }
    .checkout-summary { margin-top: 1.5rem; }

    /* Nothing should be able to push the page sideways. */
    html, body { overflow-x: hidden; }
    img, video, table { max-width: 100%; }

    .pdp-title { font-size: 1.6rem; line-height: 1.25; }
    .size-options { gap: 0.5rem; }
    .size-opt { flex: 1 1 auto; min-width: 84px; }
}


/* ============================================================
   SHAPE PASS
   The previous theme was uniformly square. These are the panels
   and controls that still inherited radius 0 from Bootstrap or
   from their own rules; rounding them is what stops the layout
   reading as the same template with a new palette.
   ============================================================ */
.chip,
.coupon-applied,
.ship-option,
.return-select,
.pay-notice,
.pay-card,
.pay-error,
.summary-card,
.address-card,
.order-card,
.filter-panel,
.empty-state,
.tab-panel,
.table-wrap { border-radius: var(--r); }

.status-pill,
.badge-count,
.chip { border-radius: var(--r-pill); }

.form-control, .form-select, .input-group > .form-control { border-radius: var(--r-sm); }
.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
}

/* Fraunces is an optical-size variable face; without this it renders at the
   default 14pt cut and looks cramped in large headings. */
.serif, .section-title, .hero-title, .editorial-title, .pc-name, .auth-card h1 {
    font-variation-settings: "opsz" 96;
}

/* ============================================================
   STOREFRONT LAYOUT — UNIFYZONE
   Structural rules, not just colour. The previous theme used a
   single-row centred-nav header, a full-bleed centred hero and
   four identical product grids stacked down the page. These
   rules replace that rhythm with a search-led header, a split
   hero, and sections that each use a different layout.
   ============================================================ */

/* ---------- Header: two rows, search-led ---------- */
.nav-wrap { height: auto; padding: 0.85rem 0; gap: 1rem; align-items: center; }
.nav-primary { display: flex; align-items: center; gap: 1rem; }
.nav-search {
    flex: 1 1 auto; max-width: 520px; display: flex; align-items: center;
    background: var(--paper-2); border: 1px solid transparent; border-radius: var(--r-pill);
    padding: 0.1rem 0.35rem 0.1rem 1rem; transition: border-color .25s, background .25s;
}
.nav-search:focus-within { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.nav-search input { flex: 1; width: auto; }
.nav-icons { gap: 0.15rem; }

/* Nav moves to its own row, left-aligned — no centred boutique nav. */
.nav-row { border-top: 1px solid var(--line); }
.nav-row-inner { display: flex; align-items: center; gap: 2rem; height: 46px; }
.nav-links { margin: 0; gap: 1.75rem; }
.nav-aside { margin-left: auto; display: flex; gap: 1.25rem; font-size: 0.86rem; color: var(--gray); }
.nav-aside a { color: var(--gray); text-decoration: none; }
.nav-aside a:hover { color: var(--accent-deep); }

/* ---------- Hero: split, not full-bleed centred ---------- */
.hero { min-height: 0; padding: 3.5rem 0 4rem; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; position: relative; z-index: 2; }
.hero-inner { padding: 0; }
.hero-points { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 2rem; font-size: 0.88rem; color: var(--gray); }
.hero-points span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero-points i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }

/* Offset collage — deliberately asymmetric. */
.hero-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.hero-collage .hc { border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2); }
.hero-collage .hc-tall { grid-row: span 2; aspect-ratio: 3 / 4.6; }
.hero-collage .hc-sq { aspect-ratio: 1; }
.hero-collage .hc:nth-child(2) { margin-top: 1.75rem; }

/* ---------- Assurance band (new section type) ---------- */
.assurance { background: var(--ink); color: var(--paper); padding: 1.6rem 0; }
.assurance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.assurance-item { display: flex; align-items: flex-start; gap: 0.7rem; }
.assurance-item svg { flex: none; color: var(--accent-lift); margin-top: 2px; }
.assurance-item b { display: block; font-size: 0.92rem; font-weight: 500; color: var(--paper); }
.assurance-item span { font-size: 0.82rem; color: rgba(255,255,255,.6); }

/* ---------- Category rail (horizontal, left-aligned) ---------- */
.cat-rail { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: thin; }
.cat-rail::-webkit-scrollbar { height: 6px; }
.cat-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.cat-pill {
    flex: none; display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.6rem 1.15rem 0.6rem 0.6rem; border: 1px solid var(--line);
    border-radius: var(--r-pill); background: #fff; text-decoration: none; color: var(--ink);
    font-size: 0.92rem; font-weight: 500; transition: border-color .25s, transform .25s;
}
.cat-pill:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--ink); }
.cat-pill i { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-tint); display: inline-block; flex: none; }

/* ---------- Spotlight: one large + three small ---------- */
.spotlight { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.75rem; align-items: start; }
.spotlight-side { display: grid; gap: 1.5rem; }
.spotlight-lead .pc-media { aspect-ratio: 4 / 5; }
.spotlight-lead .pc-name { font-size: 1.65rem; }
.spotlight-side .product-card { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: center; }
.spotlight-side .pc-media { margin-bottom: 0; aspect-ratio: 1; }
.spotlight-side .pc-actions-row { display: none; }
.spotlight-side .pc-name { font-size: 1rem; }

/* ---------- Horizontal product rail ---------- */
.product-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 1.5rem; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x mandatory; }
.product-rail > * { scroll-snap-align: start; }
.product-rail::-webkit-scrollbar { height: 6px; }
.product-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

/* ---------- Compact trending strip ---------- */
.trend-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.trend-item { text-decoration: none; color: var(--ink); }
.trend-item .tm { aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--paper-2); margin-bottom: 0.6rem; }
.trend-item b { display: block; font-size: 0.86rem; font-weight: 500; line-height: 1.3; }
.trend-item span { font-size: 0.82rem; color: var(--gray); }

/* ---------- Reviews: one lead + supporting ---------- */
.reviews-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; align-items: stretch; }
.review-lead { background: var(--ink); color: var(--paper); border-radius: var(--r-lg); padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; }
.review-lead blockquote { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.35; margin: 1rem 0; font-style: normal; }
.review-lead figcaption { color: rgba(255,255,255,.65); font-size: 0.88rem; }
.review-lead .star { color: rgba(255,255,255,.25); }
.review-lead .star.full { color: var(--accent-lift); }
.reviews-stack { display: grid; gap: 1.5rem; align-content: start; }
.reviews-stack .review-card { text-align: left; padding: 1.5rem; }
.reviews-stack .review-card blockquote { font-size: 1rem; font-style: normal; }

/* ---------- Consultation CTA (replaces the Instagram tile grid) ---------- */
.consult { background: var(--accent-tint); border-radius: var(--r-lg); padding: 3rem; display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center; }
.consult h2 { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -0.02em; margin: 0.4rem 0 0.75rem; }
.consult p { color: var(--ink-soft); margin-bottom: 0; }
.consult-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Product card: info-led, no hover-only actions ---------- */
.pc-badges { top: auto; left: auto; right: 0.75rem; bottom: 0.75rem; flex-direction: row; }
.pc-wish { top: 0.6rem; right: 0.6rem; border-radius: var(--r-sm); opacity: 1; transform: none; }
.pc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.pc-head .pc-name { margin: 0.15rem 0 0; }
.pc-head .pc-price { margin: 0; flex: none; }
.pc-price { flex-direction: column; align-items: flex-end; gap: 0; }
.pc-actions-row { margin-top: 0.85rem; }
.pc-actions-row .pc-add {
    width: 100%; display: block; border: 1px solid var(--line); background: #fff; color: var(--ink);
    border-radius: var(--r-pill); padding: 0.55rem; font-size: 0.86rem; font-weight: 500; cursor: pointer;
    transition: background .25s, border-color .25s, color .25s;
}
.pc-actions-row .pc-add:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.pc-actions-row .pc-soldout { display: block; text-align: center; padding: 0.55rem; font-size: 0.86rem; color: var(--gray); }

/* ---------- Footer: newsletter folded in, two-part ---------- */
.footer-top { display: grid; grid-template-columns: 1.15fr 2fr; gap: 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-links-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.site-footer .newsletter-form { margin: 1.25rem 0 0; max-width: none; }
.site-footer .newsletter-form input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: var(--paper); }
.site-footer .newsletter-form input::placeholder { color: rgba(255,255,255,.45); }
.site-footer .newsletter-form input:focus { background: rgba(255,255,255,.1); border-color: var(--accent-lift); box-shadow: none; }

@media (max-width: 992px) {
    .hero-grid, .spotlight, .reviews-split, .consult, .footer-top { grid-template-columns: 1fr; }
    .hero-collage { max-width: 460px; }
    .assurance-grid { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
    .trend-strip { grid-template-columns: repeat(3, 1fr); }
    .consult-actions { justify-content: flex-start; }
    .nav-row-inner { height: auto; padding: 0.5rem 0; }
    .nav-search { max-width: none; }
}
@media (max-width: 576px) {
    .assurance-grid { grid-template-columns: 1fr; }
    .trend-strip { grid-template-columns: repeat(2, 1fr); }
    .footer-links-grid { grid-template-columns: repeat(2, 1fr); }
    .consult { padding: 2rem; }
    .spotlight-side .product-card { grid-template-columns: 76px 1fr; }
}