:root {
    --ink: #0e0c0b;
    --cream: #faf7f2;
    --warm: #f4ede0;
    --gold: #b8963e;
    --gold2: #d4af6a;
    --gold-light: #f0d9a8;
    --red: #c0392b;
    --muted: #7a7168;
    --border: #e8e0d4;
    --white: #fff;
    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Jost', sans-serif;
    --tr: .25s ease;
    --shadow: 0 8px 40px rgba(14, 12, 11, .10)
}

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

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--font-body);
    background: var(--cream);
    color: var(--ink);
    overflow-x: hidden
}

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

img {
    max-width: 100%;
    display: block
}

button {
    cursor: pointer;
    font-family: var(--font-body)
}

.ann {
    background: var(--ink);
    color: var(--gold-light);
    text-align: center;
    padding: 9px 16px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap
}

.ann b {
    color: var(--gold2)
}

.sticky-header-wrapper {
    position: sticky;
    top: 0;
    z-index: 200;
}

/* The WP admin toolbar is `position: fixed` at the very top of the viewport
   with z-index 99999 — higher than anything in this theme. A sticky element
   pinned to `top: 0` sticks at viewport y=0 once scrolled, which is exactly
   where the toolbar already sits, so the toolbar renders on top of it and the
   header's top edge (nav links, cart icon) appears sliced off. Offsetting by
   the toolbar's own height fixes it; 782px is WP core's own breakpoint where
   the toolbar grows from 32px to 46px (`.lx-notices` below uses the same
   admin-bar offset for the same reason). */
.admin-bar .sticky-header-wrapper {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .sticky-header-wrapper {
        top: 46px;
    }
}

header {
    background: rgba(250, 247, 242, .96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border)
}

.hdr {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 32px;
    height: 68px;
    display: flex;
    align-items: center;
    gap: 20px
}

.logo {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--ink);
    flex-shrink: 0
}

.logo span {
    color: var(--gold)
}

nav {
    display: flex;
    align-items: center;
    gap: 32px;
    margin: 0 auto
}

nav a {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color var(--tr);
    position: relative
}

nav a:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width var(--tr)
}

nav a:hover {
    color: var(--ink)
}

nav a:hover:after {
    width: 100%
}

.hdr-right {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto
}

.hdr-icon {
    background: none;
    border: none;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    letter-spacing: .08em;
    transition: color var(--tr)
}

.hdr-icon:hover {
    color: var(--ink)
}

.cart-trigger {
    background: var(--ink);
    color: var(--cream);
    border: none;
    padding: 10px 22px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    position: relative;
    transition: background var(--tr)
}

.cart-trigger:hover {
    background: #2a2520
}

.cbadge {
    position: absolute;
    top: -7px;
    right: -7px;
    background: var(--gold);
    color: var(--ink);
    width: 19px;
    height: 19px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center
}

/* ═══════════════════════════════════════════════════════════
   HERO SLIDER
═══════════════════════════════════════════════════════════ */
.hero-slider {
    position: relative;
    width: 100%;
    height: 92vh;
    min-height: 560px;
    overflow: hidden;
    background: #0a0806;
}

/* ── Slides ──────────────────────────────────────────────── */
.hs-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 1.1s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}

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

/* ── Slide Backgrounds ───────────────────────────────────── */
.hs-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hs-slide.active .hs-bg {
    transform: scale(1.06);
}

.hs-bg-1 {
    background: linear-gradient(145deg,
        #0a0806 0%,
        #1a1008 30%,
        #231510 60%,
        #1a0e08 80%,
        #0d0a06 100%);
}

.hs-bg-2 {
    background: linear-gradient(145deg,
        #060a0d 0%,
        #0b1520 30%,
        #0f1a28 60%,
        #0a1018 80%,
        #060810 100%);
}

.hs-bg-3 {
    background: linear-gradient(145deg,
        #0d0806 0%,
        #1e0f06 25%,
        #2a1206 50%,
        #1a0d06 75%,
        #0a0604 100%);
}

/* An uploaded slide photo/video (LAUXURIA → Hero) sits inside .hs-bg on top of
   its gradient — .hs-bg-N stays as the fallback shown while it loads or if the
   attachment is later deleted, so this never needs its own transform/scale
   handling: it inherits .hs-bg's existing transition:transform. */
.hs-bg-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A photo/video is rarely as dark as the shipped gradients, so a slide using
   one gets its own dim/contrast layer to keep the light hero copy readable —
   the gradient-only slides don't need it and don't get it. */
.hs-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(6, 6, 8, .55) 0%,
        rgba(6, 6, 8, .3) 45%,
        rgba(6, 6, 8, .72) 100%);
    pointer-events: none;
}

/* ── Grain Texture ───────────────────────────────────────── */
.hs-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
    opacity: .55;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* ── Radial Glow Orbs ────────────────────────────────────── */
.hs-glow {
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(184, 150, 62, .22) 0%,
        rgba(184, 150, 62, .06) 40%,
        transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: glowPulse 7s ease-in-out infinite alternate;
}

.hs-glow-2 {
    background: radial-gradient(circle,
        rgba(62, 120, 184, .18) 0%,
        rgba(100, 150, 200, .05) 40%,
        transparent 70%);
    animation-duration: 8s;
}

.hs-glow-3 {
    background: radial-gradient(circle,
        rgba(210, 120, 62, .2) 0%,
        rgba(184, 90, 40, .06) 40%,
        transparent 70%);
    animation-duration: 9s;
}

@keyframes glowPulse {
    0%   { opacity: .6; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 1;  transform: translate(-50%, -50%) scale(1.2); }
}

/* Floating colour orbs */
.hs-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
}

.hs-orb-1 {
    width: 400px; height: 400px;
    background: rgba(184, 150, 62, .12);
    top: -100px; left: -100px;
    animation: orbFloat1 12s ease-in-out infinite alternate;
}

.hs-orb-2 {
    width: 300px; height: 300px;
    background: rgba(212, 175, 106, .08);
    bottom: -60px; right: -60px;
    animation: orbFloat2 15s ease-in-out infinite alternate;
}

.hs-orb-3 {
    width: 350px; height: 350px;
    background: rgba(62, 120, 200, .1);
    top: 20%; right: 10%;
    animation: orbFloat1 10s ease-in-out infinite alternate;
}

.hs-orb-4 {
    width: 400px; height: 400px;
    background: rgba(210, 100, 40, .1);
    bottom: 10%; left: 5%;
    animation: orbFloat2 14s ease-in-out infinite alternate;
}

@keyframes orbFloat1 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(40px, 30px) scale(1.1); }
    100% { transform: translate(-20px, 50px) scale(0.95); }
}

@keyframes orbFloat2 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-30px, -20px) scale(1.08); }
    100% { transform: translate(20px, -40px) scale(1.05); }
}

/* ── Decorative Ring Lines ───────────────────────────────── */
.hs-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.hs-lines:before,
.hs-lines:after {
    content: '';
    position: absolute;
    border-radius: 50%;
    top: 50%; left: 50%;
    border: 1px solid rgba(184, 150, 62, .07);
    animation: ringExpand 10s ease-in-out infinite alternate;
}

.hs-lines:before {
    width: 700px;
    height: 700px;
    transform: translate(-50%, -50%);
}

.hs-lines:after {
    width: 1050px;
    height: 1050px;
    transform: translate(-50%, -50%);
    animation-delay: 2s;
    border-color: rgba(184, 150, 62, .04);
}

@keyframes ringExpand {
    0%   { opacity: .6; transform: translate(-50%, -50%) scale(.97); }
    100% { opacity: 1;  transform: translate(-50%, -50%) scale(1.03); }
}

/* ── Content ─────────────────────────────────────────────── */
.hs-content {
    position: relative;
    z-index: 4;
    text-align: center;
    padding: 80px 24px;
    max-width: 820px;
}

/* Stagger entrance for active slide children */
.hs-slide.active .hs-eyebrow   { animation: hsSlideUp .9s cubic-bezier(.16,1,.3,1) .1s both; }
.hs-slide.active .hs-title     { animation: hsSlideUp .9s cubic-bezier(.16,1,.3,1) .22s both; }
.hs-slide.active .hs-sub       { animation: hsSlideUp .9s cubic-bezier(.16,1,.3,1) .34s both; }
.hs-slide.active .hs-pills     { animation: hsSlideUp .9s cubic-bezier(.16,1,.3,1) .46s both; }
.hs-slide.active .hs-cta-row   { animation: hsSlideUp .9s cubic-bezier(.16,1,.3,1) .58s both; }

@keyframes hsSlideUp {
    from { opacity: 0; transform: translateY(36px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Eyebrow ─────────────────────────────────────────────── */
.hs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(184, 150, 62, .35);
    background: rgba(184, 150, 62, .06);
    color: var(--gold2);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    padding: 8px 22px;
    border-radius: 100px;
    margin-bottom: 28px;
    backdrop-filter: blur(4px);
}

.hs-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    animation: dotBlink 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes dotBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .4; transform: scale(.7); }
}

/* ── Title ───────────────────────────────────────────────── */
.hs-title {
    font-family: var(--font-display);
    font-size: clamp(44px, 7.5vw, 92px);
    font-weight: 300;
    color: var(--white);
    line-height: 1.04;
    letter-spacing: -.02em;
    margin-bottom: 22px;
}

.hs-title em {
    font-style: italic;
    background: linear-gradient(135deg, var(--gold), var(--gold2) 50%, #f0d080);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Subtitle ────────────────────────────────────────────── */
.hs-sub {
    font-size: 15px;
    color: rgba(255, 255, 255, .52);
    max-width: 460px;
    margin: 0 auto 36px;
    line-height: 1.85;
    font-weight: 300;
    letter-spacing: .03em;
}

/* ── Pills ───────────────────────────────────────────────── */
.hs-pills {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 44px;
}

.hs-pill {
    padding: 7px 18px;
    border: 1px solid rgba(255, 255, 255, .11);
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .58);
    font-size: 11px;
    letter-spacing: .1em;
    border-radius: 100px;
    backdrop-filter: blur(4px);
    transition: border-color .25s, color .25s, background .25s;
}

.hs-pill:hover {
    border-color: rgba(184, 150, 62, .5);
    color: var(--gold2);
    background: rgba(184, 150, 62, .08);
}

/* ── CTA Buttons ─────────────────────────────────────────── */
.hs-cta-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.hs-btn-primary {
    position: relative;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 50%, #d4af6a 100%);
    color: var(--ink);
    border: none;
    padding: 16px 44px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
}

.hs-btn-primary::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
    transition: left .55s ease;
}

.hs-btn-primary:hover::before { left: 100%; }

.hs-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 48px rgba(184, 150, 62, .4);
}

.hs-btn-primary svg {
    transition: transform .25s;
}

.hs-btn-primary:hover svg {
    transform: translateX(4px);
}

.hs-btn-secondary {
    padding: 15px 36px;
    border: 1.5px solid rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .75);
    background: rgba(255, 255, 255, .04);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
    transition: border-color .25s, color .25s, background .25s, transform .25s;
}

.hs-btn-secondary:hover {
    border-color: rgba(184, 150, 62, .6);
    color: var(--gold2);
    background: rgba(184, 150, 62, .07);
    transform: translateY(-2px);
}

/* ── Scroll Hint ─────────────────────────────────────────── */
.hs-scroll-hint {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 5;
    animation: hsSlideUp .9s cubic-bezier(.16,1,.3,1) .8s both;
}

.hs-scroll-hint span {
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.3);
}

.hs-scroll-line {
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, rgba(184,150,62,.6), transparent);
    animation: scrollLinePulse 2s ease-in-out infinite;
}

@keyframes scrollLinePulse {
    0%, 100% { transform: scaleY(1); opacity: 1; }
    50%       { transform: scaleY(.6); opacity: .4; }
}

/* ── Navigation Arrows ───────────────────────────────────── */
.hs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .3s, border-color .3s, color .3s, transform .3s;
    backdrop-filter: blur(8px);
}

.hs-prev { left: 28px; }
.hs-next { right: 28px; }

.hs-arrow:hover {
    background: rgba(184, 150, 62, .18);
    border-color: rgba(184, 150, 62, .55);
    color: var(--gold2);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 0 24px rgba(184, 150, 62, .2);
}

/* ── Slide Dots ──────────────────────────────────────────── */
.hs-dots {
    position: absolute;
    bottom: 32px;
    right: 40px;
    display: flex;
    gap: 10px;
    z-index: 10;
}

.hs-dot {
    width: 8px;
    height: 8px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .25);
    border: none;
    cursor: pointer;
    transition: background .35s, width .35s, box-shadow .35s;
    padding: 0;
}

.hs-dot.active {
    width: 28px;
    background: var(--gold);
    box-shadow: 0 0 12px rgba(184, 150, 62, .5);
}

/* ── Progress Bar ────────────────────────────────────────── */
.hs-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, .06);
    z-index: 10;
}

.hs-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold2));
    width: 0%;
    transition: none;
    box-shadow: 0 0 8px rgba(184, 150, 62, .5);
}

.hs-progress-bar.animating {
    /* Kept in step with INTERVAL in initHeroSliderNew() (assets/main.js). The bar
       is a countdown to the slide turning, so the two must change together. */
    transition: width 6s linear;
}

/* ═══════════════════════════════════════════════════════════
   PROMO MARQUEE BAR
═══════════════════════════════════════════════════════════ */
.promo-marquee-wrap {
    position: relative;
    background: linear-gradient(135deg, #b8963e 0%, #c9a84c 30%, #d4af6a 60%, #b8963e 100%);
    overflow: hidden;
    padding: 13px 0;
    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
}

/* Left/right fade masks */
.promo-marquee-wrap::before,
.promo-marquee-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}
.promo-marquee-wrap::before {
    left: 0;
    background: linear-gradient(to right, #b8963e, transparent);
}
.promo-marquee-wrap::after {
    right: 0;
    background: linear-gradient(to left, #b8963e, transparent);
}

.promo-marquee-track {
    overflow: hidden;
}

.promo-marquee-inner {
    display: inline-flex;
    align-items: center;
    gap: 32px;
    white-space: nowrap;
    animation: marqueeScroll 28s linear infinite;
    will-change: transform;
}

.promo-marquee-wrap:hover .promo-marquee-inner {
    animation-play-state: paused;
}

@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.promo-marquee-inner span {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .12em;
    color: var(--ink);
    text-transform: uppercase;
}

.promo-marquee-inner strong {
    font-weight: 800;
}

.pm-sep {
    color: rgba(14, 12, 11, .35) !important;
    font-size: 10px !important;
    letter-spacing: 0 !important;
    flex-shrink: 0;
}

/* Keep old .promo-bar for any other pages using it */
.promo-bar {
    background: var(--gold);
    padding: 12px 24px;
    display: flex;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap
}

.promo-bar span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--ink);
    text-transform: uppercase
}

/* Keep old animations */
@keyframes pulse {
    from { opacity: .6; transform: translate(-50%, -50%) scale(1) }
    to   { opacity: 1;  transform: translate(-50%, -50%) scale(1.15) }
}

@keyframes slideUpFade {
    0%   { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Legacy .hero (other pages may still use it) */
.hero {
    min-height: 88vh;
    background: linear-gradient(160deg, #0e0c0b 0, #1c1510 45%, #241a10 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden
}

.hero-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
    opacity: .5;
    pointer-events: none
}

.hero-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(184, 150, 62, .18) 0, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 6s ease-in-out infinite alternate
}

.hero-lines {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none
}

.hero-lines:before,
.hero-lines:after {
    content: '';
    position: absolute;
    border: 1px solid rgba(184, 150, 62, .08);
    border-radius: 50%
}

.hero-lines:before {
    width: 700px; height: 700px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%)
}

.hero-lines:after {
    width: 1000px; height: 1000px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%)
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 80px 24px;
    max-width: 780px
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(184, 150, 62, .35);
    color: var(--gold2);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 7px 20px;
    border-radius: 100px;
    margin-bottom: 32px;
    animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: 0.1s;
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(42px, 8vw, 88px);
    font-weight: 300;
    color: var(--white);
    line-height: 1.05;
    letter-spacing: -.01em;
    margin-bottom: 24px;
    animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: 0.2s;
}

.hero h1 em { font-style: italic; color: var(--gold2) }

.hero-sub {
    font-size: 15px;
    color: rgba(255, 255, 255, .55);
    max-width: 440px;
    margin: 0 auto 40px;
    line-height: 1.8;
    font-weight: 300;
    letter-spacing: .03em;
    animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: 0.3s;
}

.hero-pills {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 44px;
    animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: 0.4s;
}

.hero-pill {
    padding: 7px 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .6);
    font-size: 11px;
    letter-spacing: .1em;
    border-radius: 100px
}

.btn-gold {
    background: linear-gradient(135deg, var(--gold) 0, var(--gold2) 100%);
    color: var(--ink);
    border: none;
    padding: 16px 48px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform var(--tr), box-shadow var(--tr);
    animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: 0.5s;
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(184, 150, 62, .35)
}

/* ── Mobile responsive (hero slider) ────────────────────── */
@media (max-width: 768px) {
    .hero-slider {
        height: 85vh;
        min-height: 500px;
    }

    .hs-content { padding: 60px 20px; }

    .hs-title {
        font-size: clamp(34px, 10vw, 54px);
    }

    .hs-arrow { display: none; }

    .hs-dots {
        right: unset;
        left: 50%;
        transform: translateX(-50%);
        bottom: 20px;
    }

    .hs-scroll-hint { display: none; }

    .hs-btn-primary, .hs-btn-secondary {
        padding: 13px 28px;
        font-size: 11px;
    }

    .hs-cta-row {
        flex-direction: column;
        gap: 10px;
    }
}

.features-strip {
    background: var(--warm);
    padding: 48px 24px;
    border-bottom: 1px solid var(--border)
}

.features-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0
}

.feat {
    text-align: center;
    padding: 20px 24px;
    border-right: 1px solid var(--border)
}

.feat:last-child {
    border-right: none
}

.feat-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 6px
}

.feat-desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    font-weight: 300
}

.section {
    max-width: 1360px;
    margin: 0 auto;
    padding: 80px 32px
}

.content-wrap {
    max-width: 1000px;
    margin: 0 auto
}

.sec-label {
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    display: block;
    margin-bottom: 12px;
    text-align: center
}

.sec-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 400;
    text-align: center;
    margin-bottom: 8px;
    line-height: 1.15
}

.sec-sub {
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 56px;
    font-weight: 300;
    line-height: 1.7
}

/* ═══════════════════════════════════════════════════════════
   SHOP PAGE LAYOUT
═══════════════════════════════════════════════════════════ */
.shop-layout {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 32px;
    gap: 32px;
    align-items: flex-start;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.shop-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--white);
    border: 1px solid var(--border);
    padding: 24px;
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.sidebar-header h3 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    color: var(--ink);
}

.sidebar-close-btn {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--muted);
    cursor: pointer;
    transition: color var(--tr);
}

.sidebar-close-btn:hover {
    color: var(--ink);
}

.sidebar-section {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.sidebar-section:last-of-type {
    border-bottom: none;
    margin-bottom: 16px;
}

.sidebar-section-title {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
}

.sidebar-cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-cat-list li {
    margin-bottom: 2px;
}

.sidebar-cat-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--muted);
    border-radius: 4px;
    transition: background var(--tr), color var(--tr);
}

.sidebar-cat-link:hover,
.sidebar-cat-link.active {
    background: var(--warm);
    color: var(--ink);
}

.sidebar-cat-link.active {
    font-weight: 600;
    color: var(--gold);
}

.sidebar-cat-count {
    font-size: 11px;
    background: var(--border);
    color: var(--muted);
    padding: 2px 7px;
    border-radius: 100px;
    font-weight: 400;
}

/* ── Price Range Inputs ──────────────────────────────────── */
.price-slider-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.price-range-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.price-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.price-input-group label {
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

.price-input {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--border);
    background: var(--white);
    font-size: 13px;
    font-family: var(--font-body);
    color: var(--ink);
    outline: none;
    transition: border-color var(--tr);
    -moz-appearance: textfield;
}

.price-input:focus {
    border-color: var(--gold);
}

.price-input::-webkit-outer-spin-button,
.price-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.price-sep {
    font-size: 16px;
    color: var(--muted);
    flex-shrink: 0;
    padding-top: 18px;
}

.btn-gold-sm {
    background: linear-gradient(135deg, var(--gold) 0, var(--gold2) 100%);
    color: var(--ink);
    border: none;
    padding: 10px 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform var(--tr), box-shadow var(--tr);
    align-self: flex-start;
}

.btn-gold-sm:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(184, 150, 62, .3);
}

/* ── Sidebar Checkboxes / Radio ──────────────────────────── */
.sidebar-check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
    padding: 5px 0;
    cursor: pointer;
    transition: color var(--tr);
}

.sidebar-check-label:hover {
    color: var(--ink);
}

.sidebar-check {
    accent-color: var(--gold);
    width: 15px;
    height: 15px;
    cursor: pointer;
    flex-shrink: 0;
}

.sidebar-reset-btn {
    width: 100%;
    background: none;
    border: 1.5px solid var(--border);
    color: var(--muted);
    padding: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color var(--tr), color var(--tr), background var(--tr);
}

.sidebar-reset-btn:hover {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--warm);
}

/* Sidebar overlay for mobile */
.shop-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(14, 12, 11, .55);
    z-index: 299;
    opacity: 0;
    transition: opacity .3s;
}

.shop-sidebar-overlay.open {
    opacity: 1;
}

/* ── Shop Main Area ──────────────────────────────────────── */
.shop-main {
    flex: 1;
    min-width: 0;
}

/* ── Shop Toolbar ────────────────────────────────────────── */
.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
    flex-wrap: wrap;
}

.shop-toolbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.shop-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filter-toggle-btn {
    display: none;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid var(--border);
    color: var(--ink);
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    cursor: pointer;
    transition: border-color var(--tr), background var(--tr);
}

.filter-toggle-btn:hover {
    border-color: var(--ink);
    background: var(--warm);
}

.shop-results-count {
    font-size: 13px;
    color: var(--muted);
    letter-spacing: .04em;
}

/* WooCommerce ordering dropdown */
.woocommerce-ordering select,
.woocommerce form.woocommerce-ordering select {
    padding: 9px 36px 9px 14px;
    border: 1px solid var(--border);
    background: var(--white);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230e0c0b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color var(--tr);
    min-width: 180px;
}

.woocommerce-ordering select:focus,
.woocommerce form.woocommerce-ordering select:focus {
    border-color: var(--gold);
}

/* ── Active Filters Chips ────────────────────────────────── */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--warm);
    border: 1px solid var(--border);
}

.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--white);
    border: 1px solid var(--border);
    color: var(--ink);
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 100px;
    transition: border-color var(--tr), color var(--tr);
    font-weight: 500;
}

.active-filter-chip:hover {
    border-color: var(--red);
    color: var(--red);
}

.active-filter-clear {
    font-size: 12px;
    color: var(--muted);
    text-decoration: underline;
    margin-left: auto;
    transition: color var(--tr);
}

.active-filter-clear:hover {
    color: var(--red);
}

/* ── Coupon Banner ───────────────────────────────────────── */
.shop-coupon-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(184, 150, 62, .07), rgba(212, 175, 106, .1));
    border: 1px solid rgba(184, 150, 62, .25);
    padding: 12px 18px;
    margin-bottom: 24px;
    font-size: 12px;
    color: var(--muted);
    letter-spacing: .04em;
}

.shop-coupon-banner > svg {
    flex-shrink: 0;
    color: var(--gold);
}

.shop-coupon-banner > span:first-of-type {
    font-weight: 600;
    color: var(--ink);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 11px;
}

.shop-coupon-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border: 1px solid var(--border);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
}

.shop-coupon-chip code {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: .08em;
    background: var(--warm);
    padding: 2px 6px;
    border-radius: 3px;
}

.shop-coupon-chip > span {
    color: var(--muted);
    font-size: 12px;
}

.shop-coupon-chip > span .woocommerce-Price-amount {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
}

.copy-code-btn {
    background: var(--ink);
    color: var(--cream);
    border: none;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 3px;
    transition: background var(--tr);
    white-space: nowrap;
}

.copy-code-btn:hover,
.copy-code-btn.copied {
    background: var(--gold);
    color: var(--ink);
}

/* ── Product Card Offer Tag ──────────────────────────────── */
.pcard-offer-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    background: var(--gold);
    color: var(--ink);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 2px;
}

/* ── Shop Empty State ────────────────────────────────────── */
.shop-empty-state {
    text-align: center;
    padding: 80px 24px;
    grid-column: 1 / -1;
}

.shop-empty-icon {
    font-size: 56px;
    margin-bottom: 20px;
}

.shop-empty-state h3 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 10px;
}

.shop-empty-state p {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 28px;
}

/* ── Shop Pagination ─────────────────────────────────────── */
.shop-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.shop-pagination .woocommerce-pagination {
    text-align: center;
}

.shop-pagination .page-numbers {
    display: inline-flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.shop-pagination .page-numbers li a,
.shop-pagination .page-numbers li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    transition: all var(--tr);
    text-decoration: none;
}

.shop-pagination .page-numbers li a:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.shop-pagination .page-numbers li span.current {
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink);
}

.shop-pagination .page-numbers li .next,
.shop-pagination .page-numbers li .prev {
    width: auto;
    padding: 0 14px;
    letter-spacing: .06em;
    font-size: 11px;
    text-transform: uppercase;
}

/* ── Product Grid ────────────────────────────────────────── */
.pgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px
}

/* A flex column, so the buy row sits at the BOTTOM of the card rather than
   directly under whatever content happens to precede it. Cards in one grid row
   are already equal height (grid stretches them); before this their Add to Cart
   buttons still landed at different heights, because a two-line product name, a
   rating, a stock warning and the bulk offer badge are all optional. The
   absolutely-positioned badges above are outside flow and unaffected. */
.pcard {
    background: var(--white);
    border: 1px solid var(--border);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--tr), box-shadow var(--tr);
    position: relative;
    display: flex;
    flex-direction: column
}

.pcard:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow)
}

/* ── The whole card is one click target ──────────────────────
   An empty anchor covering the card (see lauxuria_render_product_card). The
   photo and the name keep their own links — same destination, and they carry
   the hover states and the accessible name — but the price, the rating and the
   padding between them are no longer dead space on an element whose cursor
   says it is clickable.

   z-index 1 puts it under the absolutely-positioned badges (2 and 3) and under
   every control lifted below (4), so the only clicks it can ever take are the
   ones that previously went nowhere. */
.pcard-hit {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block
}

/* Anything with behaviour of its own has to sit ABOVE the hit layer or the
   card link swallows the click: the name's hover colour, the pack pills (which
   set the card's own quantity, or carry `lx_qty` to the product page), the
   stepper, and the buy button in both of its forms. The photo is deliberately
   NOT lifted — its anchor goes to the same page, and .pthumb-overlay is driven
   by `.pcard:hover` rather than its own. */
.pcard .pname a,
.pcard .lx-bulk-sel,
.pcard .lx-bulk-chip,
.pcard .lx-bulk-chip-link,
.pcard .pcard-atc,
.pcard .padd {
    position: relative;
    z-index: 4
}

/* Decorative, absolutely positioned, and above the hit layer — which would
   make the rank disc and the discount flash the two spots on the card where a
   click does nothing. They are labels, so they take no clicks at all and the
   anchor underneath gets them. */
.pbadge,
.pdiscount,
.pcard-rank,
.pcard-offer-tag {
    pointer-events: none
}

.pbadge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--ink);
    color: var(--gold2);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: 4px 10px
}

.pbadge.hot {
    background: var(--red);
    color: var(--white)
}

.pthumb {
    /* .pcard is a flex column and a grid item, so it has a definite height from
       its row. Without this the image is a shrinkable flex item and a card whose
       text overruns by a subpixel squashes its own photo. */
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 1;
    background: var(--warm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative
}

.pthumb img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.pthumb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(14, 12, 11, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--tr)
}

.pcard:hover .pthumb-overlay {
    background: rgba(14, 12, 11, .06)
}

.pinfo {
    padding: 18px 16px 16px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0
}

/* The buy control — whichever form it takes — is pushed to the bottom of the
   card. `.padd` matches the plain "Select options" link a variable or
   out-of-stock product renders instead of the stepper row. */
.pinfo>.pcard-atc,
.pinfo>.padd {
    margin-top: auto
}

.pname {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 10px;
    line-height: 1.3
}

.ppricing {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap
}

.psale,
.ppricing .amount {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink)
}

.pfrom {
    font-size: 11px;
    color: var(--muted);
    margin-right: 2px
}

.porig del,
.porig,
.ppricing del {
    font-size: 13px;
    color: var(--muted);
    text-decoration: line-through
}

.pstock {
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--red);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px
}

.pstock:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
    flex-shrink: 0;
    animation: blink 1.4s infinite
}

@keyframes blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .3
    }
}

.padd {
    width: 100%;
    background: var(--ink);
    color: var(--cream);
    border: none;
    padding: 11px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    display: block;
    text-align: center;
    transition: background var(--tr), opacity var(--tr), transform var(--tr);
    opacity: 0;
    transform: translateY(6px)
}

.pcard:hover .padd {
    opacity: 1;
    transform: translateY(0)
}

.padd:hover {
    background: #2a2520
}

/* ─── Product card quick add-to-cart (qty stepper + Add to Cart) ───
   Rendered by lauxuria_render_product_card() for any simple, purchasable,
   in-stock product (inc/featured-products.php); AJAX add handled by
   lauxuria_card_add_to_cart() / bindCardSteppers() in features.js. Shares the
   card's existing hover-reveal with `.padd` rather than defining its own, so
   the stepper and button always appear and disappear together. */
.pcard-atc {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--tr), transform var(--tr)
}

.pcard:hover .pcard-atc {
    opacity: 1;
    transform: translateY(0)
}

.pcard-atc .padd {
    /* Overrides the block-level, full-width base `.padd` — here it shares the
       row with the qty stepper instead of owning the whole width. */
    width: auto;
    flex: 1;
    min-width: 0;
    opacity: 1;
    transform: none
}

/* A pointer that cannot hover never reveals any of the above.
   The 768px block near the end of this file already forces them visible, but it
   is a WIDTH test, and a 1024px tablet is a touch device at desktop width — on
   one of those the Add to Cart button, the qty stepper and the thumbnail's
   "View Details" overlay were all permanently invisible. `hover: none` asks the
   question the layout actually cares about. */
@media (hover: none) {

    .padd,
    .pquick,
    .pcard-atc {
        opacity: 1;
        transform: none
    }
}

/* Picking a bundle from the offer badge sets the quantity in the stepper below,
   which on a hover device is hidden until the pointer is over the card — so the
   click appeared to do nothing at all. features.js marks the card while a tier
   is selected, and the row it changed stays on screen. */
.pcard.is-bulk-picked .pcard-atc {
    opacity: 1;
    transform: none
}

.pcard-qty {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    height: 38px;
    background: var(--cream);
    overflow: hidden
}

.pcard-qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 100%;
    background: none;
    border: none;
    color: var(--ink);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--tr), color var(--tr)
}

.pcard-qty-btn:hover {
    background: var(--warm);
    color: var(--gold)
}

.pcard-qty-input {
    width: 30px;
    height: 100%;
    border: none;
    background: none;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    padding: 0;
    -moz-appearance: textfield;
    font-variant-numeric: tabular-nums
}

.pcard-qty-input::-webkit-outer-spin-button,
.pcard-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.pcard-add:disabled {
    opacity: .6;
    cursor: not-allowed
}

.urgency-bar {
    background: var(--ink);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap
}

.urgency-bar p {
    color: var(--cream);
    font-size: 13px;
    letter-spacing: .06em
}

.urgency-bar p strong {
    color: var(--gold2)
}

.timer-display {
    display: flex;
    gap: 8px;
    align-items: center
}

.tblock {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(184, 150, 62, .3);
    padding: 6px 12px;
    text-align: center;
    min-width: 48px
}

.tnum {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--gold2);
    line-height: 1
}

.tlabel {
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted)
}

.tsep {
    color: var(--gold);
    font-size: 20px;
    font-family: var(--font-display);
    margin-bottom: 8px
}

.testimonials-section {
    background: var(--ink);
    padding: 100px 24px;
    position: relative;
    overflow: hidden
}

.testimonials-section:before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(184, 150, 62, .08) 0, transparent 60%), radial-gradient(ellipse at 80% 50%, rgba(184, 150, 62, .06) 0, transparent 60%)
}

.testimonials-section .sec-label {
    color: var(--gold)
}

.testimonials-section .sec-title {
    color: var(--white)
}

.testimonials-section .sec-sub {
    color: rgba(255, 255, 255, .45)
}

.testimonials-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    position: relative
}

.tcard {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(184, 150, 62, .18);
    padding: 36px 32px;
    position: relative;
    transition: background var(--tr), border-color var(--tr)
}

.tcard:hover {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(184, 150, 62, .4)
}

.trating {
    display: flex;
    gap: 3px;
    margin-bottom: 16px
}

.tstar {
    color: var(--gold);
    font-size: 14px
}

.ttext {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 18px;
    color: rgba(255, 255, 255, .85);
    line-height: 1.65;
    margin-bottom: 24px
}

.tauthor {
    display: flex;
    align-items: center;
    gap: 14px
}

.tavatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold) 0, var(--gold2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0
}

.tname {
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
    letter-spacing: .04em
}

.tmeta {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .08em
}

.tverified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(184, 150, 62, .15);
    color: var(--gold2);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 8px;
    margin-top: 4px;
    border-radius: 100px
}

.trust-numbers {
    max-width: 900px;
    margin: 60px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid rgba(184, 150, 62, .2)
}

.tnum-item {
    text-align: center;
    padding: 32px 16px;
    border-right: 1px solid rgba(184, 150, 62, .2)
}

.tnum-item:last-child {
    border-right: none
}

.tnum-val {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 300;
    color: var(--gold2);
    line-height: 1;
    margin-bottom: 6px
}

.tnum-label {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4)
}

.pdp {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 32px
}

/* minmax(0, …) rather than a bare 1fr: `1fr` is `minmax(auto, 1fr)`, whose
   automatic minimum is the column's min-content — one unshrinkable child (a
   photo, a table, a long word) would widen the track past the page instead of
   overflowing its own box. */
.pdp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start
}

/* ═══════════════════════════════════════════════════════════════
   PDP GALLERY
   The stage is a scroll-snap track (see single-product.php): one slide per
   photo, all of them in the DOM, paged by scrolling it. Every image is
   `object-fit: contain` — `cover` on a fixed square frame is what used to
   crop the top and bottom off a portrait product shot — and the frame takes
   its shape from the first photo via --pdp-ratio, so contain letterboxes as
   little as possible rather than pillarboxing every portrait image.
   ═══════════════════════════════════════════════════════════════ */
.pdp-gallery {
    position: sticky;
    top: 90px;
    min-width: 0
}

.pdp-main-img {
    position: relative;
    width: 100%;
    aspect-ratio: var(--pdp-ratio, 1);
    max-height: min(76vh, 760px);
    background: var(--warm);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    overflow: hidden
}

/* Fallback for the no-image placeholder, which renders a bare <img> here. */
.pdp-main-img>img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.pdp-slides {
    /* Positioned so a slide's offsetLeft is measured against the track itself —
       main.js pages by writing scrollLeft, and against .pdp-gallery (which is
       `sticky`, i.e. the offsetParent otherwise) every offset would be out by
       the frame's own inset. */
    position: relative;
    display: flex;
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.pdp-slides::-webkit-scrollbar {
    display: none
}

.pdp-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent
}

.pdp-slide-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1)
}

@media (hover:hover) {
    .pdp-slide:hover .pdp-slide-img {
        transform: scale(1.04)
    }
}

/* Arrows and counter sit over the frame. They are hidden until the stage is
   hovered on a pointer device and always visible on touch, which has no hover
   state to discover them with. */
.pdp-gnav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(14, 12, 11, .12);
    opacity: 0;
    transition: opacity var(--tr), background var(--tr), color var(--tr);
    z-index: 3
}

.pdp-gnav--prev {
    left: 12px
}

.pdp-gnav--next {
    right: 12px
}

.pdp-main-img:hover .pdp-gnav,
.pdp-gnav:focus-visible {
    opacity: 1
}

.pdp-gnav:hover {
    background: var(--ink);
    color: var(--white)
}

.pdp-gnav[disabled] {
    opacity: 0 !important;
    pointer-events: none
}

/* main.js hides the arrows, the counter and the whole rail while the gallery
   holds a single photo (it cannot be counted server-side — a chosen shade can
   add one). An explicit `display` outranks the UA sheet's [hidden] rule, so
   each needs saying here. */
.pdp-gnav[hidden],
.pdp-gcount[hidden],
.pdp-thumbs-wrap[hidden] {
    display: none
}

.pdp-gcount {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: rgba(14, 12, 11, .72);
    color: var(--white);
    font-size: 11px;
    letter-spacing: .1em;
    padding: 5px 10px;
    border-radius: 999px;
    z-index: 3;
    pointer-events: none
}

.pdp-zoom-hint {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--tr)
}

.pdp-main-img:hover .pdp-zoom-hint {
    opacity: 1
}

@media (hover:none) {

    .pdp-gnav,
    .pdp-zoom-hint {
        opacity: 1
    }
}

/* ── Thumbnail rail ─────────────────────────────────────────────
   A scroller, never a wrapping grid: a product with a dozen shades used to
   stack three rows of thumbnails under the photo and push the buy column off
   the fold. */
.pdp-thumbs-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px
}

.pdp-thumbs {
    /* Same reason as .pdp-slides: the rail must be its thumbnails' offsetParent
       or "scroll the active one into view" is off by the width of the arrow
       button sitting to its left. */
    position: relative;
    display: flex;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    padding-bottom: 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent
}

.pdp-thumbs::-webkit-scrollbar {
    height: 4px
}

.pdp-thumbs::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 999px
}

.pdp-thumbs::-webkit-scrollbar-track {
    background: transparent
}

.pdp-thumb {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    padding: 0;
    background: var(--warm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    border: 2px solid transparent;
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color var(--tr), opacity var(--tr);
    overflow: hidden;
    opacity: .72
}

.pdp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.pdp-thumb.active,
.pdp-thumb:hover,
.pdp-thumb:focus-visible {
    border-color: var(--gold);
    opacity: 1
}

.pdp-trail-btn {
    flex: 0 0 auto;
    width: 28px;
    height: 72px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--tr), color var(--tr)
}

.pdp-trail-btn:hover {
    background: var(--ink);
    color: var(--white)
}

.pdp-trail-btn[hidden] {
    display: none
}

/* ── Lightbox ───────────────────────────────────────────────────
   Built by main.js on first open and reused after that. It is fixed to the
   viewport rather than sized in vh units alone, because a mobile browser's
   toolbar makes 100vh taller than what is actually on screen. */
.pdp-lightbox {
    position: fixed;
    inset: 0;
    /* Above the sticky header, the cart drawer and the mobile nav (999) —
       below the shade modal (9998) and the notice stack, neither of which can
       be open at the same time as this. */
    z-index: 9990;
    display: flex;
    flex-direction: column;
    background: rgba(10, 9, 8, .96);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    -webkit-tap-highlight-color: transparent
}

.pdp-lightbox.open {
    opacity: 1;
    visibility: visible
}

.pdp-lb-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 16px;
    color: rgba(255, 255, 255, .85)
}

.pdp-lb-counter {
    margin-right: auto;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6)
}

.pdp-lb-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .06);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--tr), border-color var(--tr), opacity var(--tr)
}

.pdp-lb-btn:hover {
    background: rgba(255, 255, 255, .16);
    border-color: var(--gold)
}

.pdp-lb-btn[disabled] {
    opacity: .35;
    cursor: default
}

.pdp-lb-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none
}

/* The cursor lives on the photo, not the stage: clicking the stage is what
   closes the viewer, and a zoom cursor over the backdrop would promise the
   opposite. */
.pdp-lb-img {
    cursor: zoom-in
}

.pdp-lb-stage.is-zoomed .pdp-lb-img {
    cursor: grab
}

.pdp-lb-stage.is-panning .pdp-lb-img {
    cursor: grabbing
}

.pdp-lb-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transform-origin: center center;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none
}

.pdp-lb-stage.is-panning .pdp-lb-img {
    transition: none
}

.pdp-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(20, 18, 16, .55);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background var(--tr), border-color var(--tr)
}

.pdp-lb-nav:hover {
    background: rgba(20, 18, 16, .9);
    border-color: var(--gold)
}

.pdp-lb-nav--prev {
    left: 16px
}

.pdp-lb-nav--next {
    right: 16px
}

.pdp-lb-nav[hidden] {
    display: none
}

.pdp-lb-thumbs {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none
}

.pdp-lb-thumbs::-webkit-scrollbar {
    display: none
}

/* An explicit `display` outranks the UA sheet's [hidden] rule, so a
   single-image product needs this or it gets an empty filmstrip. */
.pdp-lb-thumbs[hidden] {
    display: none
}

.pdp-lb-thumb {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    padding: 0;
    border: 2px solid transparent;
    background: rgba(255, 255, 255, .06);
    overflow: hidden;
    opacity: .55;
    transition: opacity var(--tr), border-color var(--tr)
}

.pdp-lb-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.pdp-lb-thumb.active,
.pdp-lb-thumb:hover {
    opacity: 1;
    border-color: var(--gold)
}

body.pdp-lb-open {
    overflow: hidden
}

/* ── Gallery, narrow viewports ──────────────────────────────────
   Once .pdp-grid collapses to one column (1024px, further down this file) the
   gallery has the full content width to itself, which on a tablet made the
   photo taller than the screen. It is capped and centred instead. */
@media (max-width:1024px) {
    /* Stacked, the 64px column gap becomes 64px of empty page between the
       photo and the price. */
    .pdp-grid {
        gap: 40px
    }

    /* `width: 100%` is load-bearing, not tidying. A grid item with auto inline
       margins is NOT stretched to its track — auto margins opt it out of
       `justify-self: stretch`, so the box sizes to fit-content instead, i.e.
       min(max-content, max(min-content, track)). The gallery's min-content is
       far wider than a phone (the thumbnail rail alone is fifteen 62px
       thumbnails, and .pdp-main-img's aspect-ratio transfers the photo's own
       height into a width), so fit-content resolved to the `max-width` cap:
       560px inside a 456px track on a 393px phone. That 560px box was the
       whole page's horizontal overflow — the document scrolled sideways, and
       because the announcement bar and header are normal-flow blocks at
       viewport width while .pdp sat 84px wider, the browser zoomed out to fit
       the widest thing on the page and the header stopped reaching the right
       edge of the screen. Pinning the width makes the cap an upper bound
       again: min(track, 560px), still centred by the auto margins whenever the
       track is the wider of the two. */
    .pdp-gallery {
        width: 100%;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto
    }

    .pdp-main-img {
        max-height: 72vh
    }
}

@media (max-width:768px) {
    .pdp {
        padding: 32px 20px
    }

    .pdp-grid {
        gap: 28px
    }

    /* Loose enough that a portrait product shot still fills the column at its
       own shape — the cap is only here to stop a tall photo taking the whole
       screen before the price has been seen. */
    .pdp-main-img {
        max-height: 70vh
    }

    .pdp-gnav {
        width: 34px;
        height: 34px
    }

    .pdp-gnav--prev {
        left: 8px
    }

    .pdp-gnav--next {
        right: 8px
    }

    .pdp-thumb {
        width: 62px;
        height: 62px
    }

    .pdp-trail-btn {
        height: 62px
    }
}

@media (max-width:480px) {
    .pdp {
        padding: 24px 14px
    }

    .pdp-thumbs-wrap {
        gap: 0
    }

    /* Touch scrolls the rail directly, so the arrows are only chrome in the
       way of two more thumbnails. */
    .pdp-trail-btn {
        display: none
    }

    .pdp-thumb {
        width: 56px;
        height: 56px
    }

    .pdp-lb-thumb {
        width: 46px;
        height: 46px
    }

    .pdp-lb-bar {
        padding: 10px 12px
    }

    .pdp-lb-nav {
        width: 38px;
        height: 38px
    }

    .pdp-lb-nav--prev {
        left: 8px
    }

    .pdp-lb-nav--next {
        right: 8px
    }
}

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

    .pdp-slides,
    .pdp-thumbs,
    .pdp-lb-thumbs {
        scroll-behavior: auto
    }

    .pdp-slide-img,
    .pdp-lb-img {
        transition: none
    }

    .pdp-slide:hover .pdp-slide-img {
        transform: none
    }
}

.pdp-eyebrow {
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px
}

.pdp-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 16px
}

.pdp-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px
}

.pdp-stars {
    display: flex;
    gap: 2px
}

/* Partial fill, so a 4.3 does not render as five solid stars the way the old
   hardcoded ★★★★★ did. */
.pdp-stars-track {
    position: relative;
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 1px;
    color: rgba(0, 0, 0, .18);
    white-space: nowrap
}

.pdp-stars-fill {
    position: absolute;
    inset: 0 auto 0 0;
    overflow: hidden;
    color: var(--gold);
    white-space: nowrap
}

.pdp-rcount {
    font-size: 13px;
    color: var(--muted)
}

.pdp-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap
}

.pdp-sale {
    font-family: var(--font-body);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 0.01em;
    font-variant-numeric: lining-nums proportional-nums;
}

.pdp-sale .amount {
    font-family: var(--font-body);
    font-size: 32px;
    font-variant-numeric: lining-nums proportional-nums;
}

.pdp-orig {
    font-size: 20px;
    color: var(--muted);
    text-decoration: line-through
}


/* ─── Classic Variation Style ─────────────────────────────── */
table.variations {
    width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
}
table.variations th.label {
    text-align: left;
    padding: 10px 16px 10px 0;
    vertical-align: middle;
    width: 25%;
}
table.variations th.label label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}
table.variations td.value {
    padding: 10px 0;
    vertical-align: middle;
    position: relative;
}
table.variations select {
    width: 100%;
    padding: 12px 36px 12px 16px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: 6px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: var(--tr);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230e0c0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
table.variations select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(184, 150, 62, 0.1);
}
.reset_variations {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--muted);
    text-decoration: none;
    transition: var(--tr);
}
.reset_variations:hover {
    color: var(--red);
}
.single_variation_wrap {
    margin-top: 10px;
    margin-bottom: 24px;
}
.woocommerce-variation-price {
    margin-bottom: 16px;
}
.woocommerce-variation-price .price {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
}

/* ─── Classic Layout Enhancements ─────────────────────────── */
table.variations th.label {
    width: 35% !important; /* Prevents text wrapping like Color Classification */
}

/* ─── PDP QUANTITY — exactly one visible stepper, always ───
   The PDP carries two quantity controls and only ever shows one of them:

     · the theme's own `.pdp-qty` (#pdp-qty), which submits nothing — it is a
       display control that main.js mirrors into WooCommerce's input; and
     · WooCommerce's native `.quantity input.qty`, which is what actually gets
       posted, given +/- buttons by main.js.

   Classic/simple products show the native one. "Modern variation" products hide
   the whole `.single_variation_wrap` (further down), which takes the native
   control with it, so `.pdp-qty` is unhidden to replace it — the add-to-cart
   for those happens inside the shade modal anyway. Change one of these two
   rules without the other and the PDP ends up with either two steppers or
   none. */
.pdp-qty {
    display: none !important;
}
body.modern-var-active .pdp-qty {
    display: inline-flex !important;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    height: 48px;
    background: var(--white);
    overflow: hidden;
    margin-right: 0;
}
body.modern-var-active .pdp-qty .qty-btn {
    background: none;
    border: none;
    width: 40px;
    height: 100%;
    font-size: 20px;
    color: var(--ink);
    cursor: pointer;
    transition: background var(--tr);
}
body.modern-var-active .pdp-qty .qty-btn:hover {
    background: var(--warm);
}
body.modern-var-active .pdp-qty .qty-display {
    width: 48px;
    line-height: 48px;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
}

body.modern-var-active .pdp-atc-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
body.modern-var-active form.variations_form {
    flex-grow: 1;
    margin-bottom: 0;
}

/* Native WC Qty Styling */
.woocommerce .quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    height: 48px;
    background: var(--white);
    overflow: hidden;
    margin-right: 16px;
}

.woocommerce .quantity .qty-btn {
    background: none;
    border: none;
    width: 40px;
    height: 100%;
    font-size: 20px;
    color: var(--ink);
    cursor: pointer;
    transition: background var(--tr);
}

.woocommerce .quantity .qty-btn:hover {
    background: var(--warm);
}

.woocommerce .quantity input.qty {
    width: 48px;
    height: 100%;
    border: none;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    padding: 0;
    -moz-appearance: textfield;
}

.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Add to Cart button layout */
.woocommerce-variation-add-to-cart {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.single_add_to_cart_button {
    height: 48px;
    padding: 0 36px;
    background: var(--ink);
    color: var(--white);
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background var(--tr);
}

.single_add_to_cart_button:hover {
    background: var(--gold);
}

/* ─── Modern Variation Style ──────────────────────────────── */
/* This is what takes WooCommerce's native quantity control off the page for
   modern-variation products — `.pdp-qty` above is unhidden to replace it. See
   "PDP QUANTITY" above before touching either. */
body.modern-var-active table.variations,
body.modern-var-active .single_variation_wrap {
    display: none !important;
}

.lx-modern-var-btn {
    width: 100%;
    background: var(--ink);
    color: var(--white);
    border: none;
    padding: 0 36px;
    height: 48px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 6px;
    margin: 0;
    transition: background var(--tr);
    cursor: pointer;
}
.lx-modern-var-btn:hover {
    background: var(--gold);
}

.lx-var-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: var(--tr);
}
.lx-var-overlay.open {
    opacity: 1;
    visibility: visible;
}

.lx-var-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%);
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    background: var(--white);
    z-index: 9999;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: var(--tr);
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.lx-var-modal.open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
}
.lx-var-modal-header {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.lx-var-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--muted);
    line-height: 1;
    cursor: pointer;
    transition: color var(--tr);
}
.lx-var-modal-close:hover {
    color: var(--ink);
}
.lx-var-modal-body {
    padding: 24px;
    overflow-y: auto;
}
.lx-var-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}
.lx-var-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    transition: box-shadow var(--tr);
}
.lx-var-card:hover {
    box-shadow: var(--shadow);
}
/* A shade that cannot be bought used to render an ordinary Add-to-cart button
   that WooCommerce then rejected on the next page load. */
.lx-var-card.is-unavailable {
    opacity: .55;
}
.lx-var-card.is-unavailable .lx-var-img {
    filter: grayscale(1);
}
.lx-var-card .lx-var-add-btn[disabled] {
    cursor: not-allowed;
    background: var(--muted, #8a8a8a);
}
.lx-var-img {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
}
.lx-var-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lx-var-info {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: left;
}
.lx-var-name {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
    color: var(--ink);
}
.lx-var-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 16px;
    display: flex;
    gap: 6px;
    align-items: center;
}
.lx-var-price del {
    color: var(--muted);
    font-weight: 400;
    font-size: 13px;
}
.lx-var-info form {
    margin-top: auto;
}
.lx-var-atc-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    /* Two items, always. WooCommerce's own add-to-cart script appends a
       "View cart" link after any button it sees an `added_to_cart` event for,
       and features.js fires that event by hand so mini-carts still update — the
       link landed here as a third flex item and crushed the Add to cart button
       into a red sliver. features.js removes it (stripWcViewCartLink); this is
       the belt to that braces, since the drawer opens on every add and a link
       to the cart page beside the button has nothing to add either way. */
    flex-wrap: nowrap;
}
.lx-var-atc-row .added_to_cart,
.pcard-atc .added_to_cart,
.pdp-atc-row .added_to_cart {
    display: none !important;
}
.lx-var-qty-wrap {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--white);
    overflow: hidden;
    flex-shrink: 0;
}
.lx-var-qty-wrap .qty-btn {
    background: none;
    border: none;
    width: 24px;
    height: 100%;
    font-size: 14px;
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
    transition: background var(--tr);
    flex-shrink: 0;
}
.lx-var-qty-wrap .qty-btn:hover {
    background: var(--warm);
}
.lx-var-qty-wrap input.qty {
    width: 26px;
    height: 100%;
    border: none;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    color: var(--ink);
    padding: 0;
    -moz-appearance: textfield;
}
.lx-var-qty-wrap input.qty::-webkit-outer-spin-button,
.lx-var-qty-wrap input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.lx-var-add-btn {
    flex: 1 1 auto;
    width: auto;
    /* Never below its own label. `min-width: 0` let the button shrink to a few
       pixels the moment anything else landed in the row; the stepper beside it
       is `flex-shrink: 0`, so the button is the only thing that gives. */
    min-width: max-content;
    white-space: nowrap;
    background: #ef4444;
    color: #fff;
    border: none;
    padding: 12px 6px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    transition: background var(--tr);
    cursor: pointer;
}
.lx-var-add-btn:hover {
    background: #dc2626;
}

.pdp-save {
    background: var(--red);
    color: var(--white);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    padding: 4px 10px
}

.pdp-promo {
    background: linear-gradient(135deg, rgba(184, 150, 62, .08), rgba(212, 175, 106, .12));
    border: 1px solid rgba(184, 150, 62, .25);
    padding: 14px 18px;
    margin-bottom: 24px;
    font-size: 13px;
    color: var(--ink);
    line-height: 1.6
}

.pdp-promo strong {
    color: var(--gold)
}

.pdp-urgency {
    margin-bottom: 24px
}

.pdp-stock-bar {
    margin-bottom: 12px
}

.pdp-stock-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    letter-spacing: .06em;
    margin-bottom: 6px
}

.pdp-stock-label span:first-child {
    color: var(--red);
    font-weight: 600
}

.pdp-bar-track {
    height: 4px;
    background: var(--border);
    overflow: hidden
}

.pdp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--red), #e74c3c);
    transition: width 1.5s ease
}

.pdp-countdown {
    background: var(--ink);
    color: var(--cream);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px
}

.pdp-countdown p {
    font-size: 12px;
    letter-spacing: .08em
}

.pdp-countdown p strong {
    color: var(--gold2)
}

.mini-timer {
    display: flex;
    gap: 4px;
    align-items: center
}

.mt-block {
    background: rgba(255, 255, 255, .1);
    padding: 5px 10px;
    text-align: center;
    min-width: 40px
}

.mt-num {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--gold2);
    line-height: 1
}

.mt-lbl {
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4)
}

.mt-sep {
    color: var(--gold);
    font-family: var(--font-display);
    font-size: 16px
}

.option-group {
    margin-bottom: 22px
}

.option-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 10px
}

.option-label span {
    color: var(--gold);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px
}

.size-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.size-btn {
    padding: 9px 18px;
    border: 1.5px solid var(--border);
    background: none;
    font-size: 12px;
    letter-spacing: .06em;
    cursor: pointer;
    transition: border-color var(--tr), background var(--tr), color var(--tr)
}

.size-btn:hover,
.size-btn.active {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--cream)
}

.pdp-purchase {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap
}

.qty-ctrl {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--border);
    flex-shrink: 0
}

.qbtn {
    width: 42px;
    height: 50px;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--ink);
    transition: background var(--tr)
}

.qbtn:hover {
    background: var(--warm)
}

.qval {
    width: 48px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border)
}

/* ─── WOOCOMMERCE NOTICES ─────────────────────────────────────────
   One fixed stack, rendered globally by lauxuria_render_notices() and driven
   by features.js. Each notice is its own dismissible card; they stagger in
   rather than sliding the whole block, and the stack scrolls instead of
   running off the screen when several land at once.
─────────────────────────────────────────────────────────────────── */
/* Top-center, not top-right: the cart drawer also docks top-right at 460px wide,
   and a notice stack sitting there rendered as if it were glued to the top of
   the drawer instead of a separate floating alert. Center avoids the collision
   in every state (drawer open or closed) instead of only shrinking around it. */
.lx-notices {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    -webkit-overflow-scrolling: touch;
}
.admin-bar .lx-notices { top: 52px; }

.lx-notice {
    pointer-events: auto;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 12px;
    padding: 14px 14px 14px 16px;
    background: var(--white, #fff);
    color: var(--ink, #1a1a1a);
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .06);
    border-left: 4px solid var(--gold, #c9a24a);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
    font-size: 14px;
    line-height: 1.45;
    opacity: 0;
    transform: translateY(-10px) scale(.98);
    animation: lxNoticeIn .34s cubic-bezier(.22, 1, .36, 1) forwards;
    /* Stagger by position so a stack of three reads as a sequence. */
    animation-delay: calc(var(--lx-notice-i, 0) * 70ms);
}
@keyframes lxNoticeIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.lx-notice.is-leaving {
    animation: lxNoticeOut .3s ease forwards;
}
@keyframes lxNoticeOut {
    to { opacity: 0; transform: translateX(24px) scale(.97); }
}

.lx-notice-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex: 0 0 24px;
    margin-top: 1px;
    background: rgba(201, 162, 74, .14);
    color: var(--gold, #c9a24a);
}
.lx-notice--error   { border-left-color: #e2401c; }
.lx-notice--error   .lx-notice-icon { background: rgba(226, 64, 28, .12); color: #e2401c; }
.lx-notice--notice  { border-left-color: #1e85be; }
.lx-notice--notice  .lx-notice-icon { background: rgba(30, 133, 190, .12); color: #1e85be; }
.lx-notice--success { border-left-color: #27ae60; }
.lx-notice--success .lx-notice-icon { background: rgba(39, 174, 96, .12); color: #27ae60; }

.lx-notice-body { min-width: 0; }
.lx-notice-body p { margin: 0; }
.lx-notice-body a:not(.button) { color: inherit; text-decoration: underline; }

.lx-notice-close {
    background: none;
    border: 0;
    padding: 0;
    width: 24px;
    height: 24px;
    line-height: 1;
    font-size: 20px;
    cursor: pointer;
    color: rgba(0, 0, 0, .35);
    border-radius: 6px;
    transition: color .2s ease, background .2s ease;
}
.lx-notice-close:hover { color: var(--ink, #1a1a1a); background: rgba(0, 0, 0, .05); }

/* WooCommerce puts its "View cart" link inline in the notice text. Pushing it
   onto its own line keeps a long product name from squeezing it to nothing. */
.lx-notice .button,
.lx-notice .woocommerce-Button {
    display: inline-block;
    margin-top: 10px;
    background: var(--ink, #1a1a1a);
    color: var(--white, #fff);
    padding: 7px 14px;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--tr, .25s ease);
    white-space: nowrap;
}
.lx-notice .button:hover { background: var(--gold, #c9a24a); }

/* The notice classes are still WooCommerce's own, so anything that renders a
   notice outside our stack (the cart and checkout templates) stays styled. */
.woocommerce-message, .woocommerce-error, .woocommerce-info {
    padding: 14px 18px;
    margin: 0 0 12px;
    background: var(--white);
    color: var(--ink);
    border-left: 4px solid var(--gold);
    border-radius: 8px;
    font-size: 14px;
    list-style: none;
}
.lx-notice.woocommerce-message,
.lx-notice.woocommerce-error,
.lx-notice.woocommerce-info { margin: 0; }
.woocommerce-error { border-left-color: #e2401c; }
.woocommerce-info  { border-left-color: #1e85be; }

/* Kept at the top on small screens on purpose: the toast lives bottom-right and
   the two stacking on top of each other is exactly the mess this replaces. */
@media (max-width: 600px) {
    .lx-notices {
        top: 12px;
        left: 12px;
        right: 12px;
        transform: none;
        width: auto;
        max-height: 55vh;
    }
    .lx-notice { font-size: 13.5px; padding: 12px 12px 12px 14px; gap: 10px; }
    .lx-notice .button { margin-top: 8px; }
}

/* Remove spin buttons from manual qty input */
.qty-display::-webkit-outer-spin-button,
.qty-display::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.qty-display {
    -moz-appearance: textfield;
    border: none;
    background: transparent;
    padding: 0;
    outline: none;
}

.single_add_to_cart_button,
.btn-primary {
    flex: 1;
    background: var(--ink) !important;
    color: var(--cream) !important;
    border: none;
    padding: 0 32px;
    height: 50px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: background var(--tr);
    white-space: nowrap
}

.single_add_to_cart_button:hover,
.btn-primary:hover {
    background: #2a2520 !important
}

.btn-secondary {
    width: 100%;
    border: 1.5px solid var(--ink);
    background: none;
    color: var(--ink);
    padding: 13px;
    display: block;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 20px;
    transition: background var(--tr), color var(--tr)
}

.btn-secondary:hover {
    background: var(--ink);
    color: var(--cream)
}

.pdp-guarantees {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px
}

.pdp-guarantee {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--muted)
}

#social-proof {
    background: var(--warm);
    border: 1px solid var(--border);
    padding: 12px 16px;
    font-size: 12px;
    color: var(--muted);
    letter-spacing: .04em;
    margin-bottom: 24px
}

.accordion-item {
    border-bottom: 1px solid var(--border)
}

.accordion-trigger {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .06em;
    cursor: pointer;
    transition: color var(--tr)
}

.accordion-trigger:hover {
    color: var(--gold)
}

.accordion-icon {
    font-size: 20px;
    line-height: 1;
    color: var(--muted);
    transition: transform var(--tr)
}

.accordion-trigger.open .accordion-icon {
    transform: rotate(45deg)
}

.accordion-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height .35s ease
}

.accordion-body-inner {
    padding: 0 0 18px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.8;
    font-weight: 300
}

.pdp-reviews {
    padding: 60px 32px;
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid var(--border)
}

.review-summary {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap
}

.review-big-score {
    text-align: center;
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border: 2px solid var(--gold);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.rbs-num {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 300;
    color: var(--gold);
    line-height: 1
}

.rbs-max {
    font-size: 12px;
    color: var(--muted)
}

.rbs-stars {
    display: flex;
    gap: 2px;
    margin: 4px 0
}

.rbs-stars span {
    font-size: 12px;
    color: var(--gold)
}

.review-bars {
    flex: 1;
    min-width: 200px
}

.rbar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.rbar-label {
    font-size: 12px;
    color: var(--muted);
    width: 36px;
    text-align: right;
    flex-shrink: 0
}

.rbar-track {
    flex: 1;
    height: 6px;
    background: var(--border);
    overflow: hidden
}

.rbar-fill {
    height: 100%;
    background: var(--gold);
    transition: width 1.5s ease
}

.rbar-count {
    font-size: 12px;
    color: var(--muted);
    width: 28px;
    flex-shrink: 0
}

.review-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px
}

.review-card {
    border: 1px solid var(--border);
    padding: 24px;
    transition: box-shadow var(--tr)
}

.review-card:hover {
    box-shadow: var(--shadow)
}

.rc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px
}

.rc-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--warm), var(--gold-light));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0
}

.rc-name {
    font-size: 13px;
    font-weight: 600
}

.rc-date {
    font-size: 11px;
    color: var(--muted)
}

.rc-verified2 {
    font-size: 10px;
    color: var(--gold);
    letter-spacing: .06em
}

.rc-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 10px
}

.rc-stars span {
    color: var(--gold);
    font-size: 13px
}

.rc-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px
}

.rc-body {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
    font-weight: 300
}

.rc-photo {
    margin-top: 12px;
    background: var(--warm);
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px
}

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(14, 12, 11, .6);
    z-index: 400;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s
}

.overlay.open {
    opacity: 1;
    pointer-events: all
}

/* ═══════════════════════════════════════════════════════════
   CART DRAWER

   Everything the drawer needs lives in this one block. The coupon UI, the
   applied-coupon tags and `.cd-cart-link` used to sit in features.css instead,
   several hundred lines away from the shell they belong to, and the two copies
   had drifted (features.css still assumed the old 20px gutter).

   The markup is rendered server-side by lauxuria_cart_drawer_inner_html() /
   lauxuria_cart_item_html() / lauxuria_cart_summary_html() in functions.php and
   swapped wholesale by the WooCommerce fragment mechanism, so every class here
   has to survive being replaced mid-animation — nothing below depends on a
   transition having finished, and no state is stored on a node the server owns.
═══════════════════════════════════════════════════════════ */

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 452px;
    max-width: 100vw;
    height: 100%;
    height: 100dvh;
    background: var(--cream);
    z-index: 401;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .42s cubic-bezier(.32, .72, 0, 1);
    box-shadow: -18px 0 60px rgba(14, 12, 11, .16);
    will-change: transform
}

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

/* Same fixed-at-top-0-vs-fixed-admin-toolbar collision as `.sticky-header-wrapper`
   above: docked at the viewport's top-right, the drawer's own header ("Your
   Cart", the close button) rendered underneath the WP toolbar instead of below
   it. Dropping `top` also has to shrink `height`, unlike the sticky header,
   because this is `position: fixed` — the box does not reflow around the
   offset on its own, so leaving `height: 100dvh` in place would run the drawer
   past the bottom of the viewport by exactly the amount trimmed off the top. */
.admin-bar .cart-drawer {
    top: 32px;
    height: calc(100% - 32px);
    height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
    .admin-bar .cart-drawer {
        top: 46px;
        height: calc(100% - 46px);
        height: calc(100dvh - 46px);
    }
}

/* One ring definition for every control in here, so keyboard focus is visible
   without each element inventing its own. */
.cart-drawer :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px
}

/* ─── Header ──────────────────────────────────────────── */

.cd-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
    background: var(--cream)
}

.cd-heading {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0
}

.cd-title {
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: .01em
}

.cd-count {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted)
}

.cd-count-num {
    font-weight: 600;
    color: var(--gold)
}

.cd-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--warm);
    border: none;
    border-radius: 50%;
    color: var(--muted);
    flex-shrink: 0;
    transition: color var(--tr), background var(--tr), transform var(--tr)
}

.cd-close:hover {
    color: var(--ink);
    background: var(--border);
    transform: rotate(90deg)
}

/* ─── Body ────────────────────────────────────────────── */

.cd-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px 24px 24px
}

.cd-items {
    display: flex;
    flex-direction: column;
    gap: 10px
}

/* ─── Empty state ─────────────────────────────────────── */

.cd-empty {
    text-align: center;
    color: var(--muted);
    padding: 56px 12px 0
}

.cd-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--warm);
    color: var(--gold)
}

.cd-empty-title {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 8px
}

.cd-empty p {
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.6;
    max-width: 26ch;
    margin: 0 auto 24px
}

.cd-empty-cta {
    display: inline-block;
    padding: 13px 30px;
    background: var(--ink);
    color: var(--cream);
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: background var(--tr)
}

.cd-empty-cta:hover {
    background: var(--gold)
}

/* ─── Line item ───────────────────────────────────────── */

.ci {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 14px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color var(--tr), box-shadow var(--tr), opacity var(--tr)
}

.ci:hover {
    border-color: #dcd2c2;
    box-shadow: 0 4px 18px rgba(14, 12, 11, .05)
}

/* Set by features.js while a quantity/remove request is in flight. The row is
   never mutated optimistically, so this is the only signal the shopper gets
   that the click landed. */
.ci.is-busy {
    opacity: .55;
    pointer-events: none;
    transition: opacity .15s ease
}

.ci.is-busy .cqbtn,
.ci.is-busy .ci-remove {
    cursor: default
}

.ci-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 8px;
    background: var(--warm);
    flex-shrink: 0;
    overflow: hidden
}

.ci-img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.ci-img-fallback {
    font-size: 30px;
    line-height: 1
}

.ci-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column
}

.ci-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px
}

/* `min-width: 0` lets the flex item shrink; it does not let the TEXT shrink.
   A product title with a long unbroken run in it — an SKU, a hex code, a shade
   name written without spaces — still set its own min-content width and pushed
   the price column off the edge of the drawer. */
.ci-name {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    min-width: 0;
    overflow-wrap: anywhere
}

.ci-name a {
    color: inherit;
    transition: color var(--tr)
}

.ci-name a:hover {
    color: var(--gold)
}

.ci-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: -3px -3px 0 0;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--muted);
    flex-shrink: 0;
    transition: color var(--tr), background var(--tr)
}

.ci-remove:hover {
    color: var(--red);
    background: rgba(199, 60, 40, .08)
}

/* Variation attributes and the custom-size choice — everything
   wc_get_formatted_cart_item_data() hands back. Without this, two lines of the
   same product that differ only by size/attribute render identically apart from
   price, which reads as a duplicate-add bug rather than two distinct choices. */
.ci-meta {
    margin-top: 5px
}

.ci-meta dl.variation {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 8px;
    margin: 0;
    padding: 0
}

.ci-meta dl.variation dt,
.ci-meta dl.variation dd {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: 11.5px;
    line-height: 1.5
}

.ci-meta dl.variation dt {
    font-weight: 600;
    color: var(--ink)
}

.ci-meta dl.variation dd {
    color: var(--muted)
}

.ci-meta dl.variation dd p {
    display: inline;
    margin: 0
}

.ci-saving {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    margin-top: 7px;
    padding: 3px 8px;
    border-radius: 20px;
    background: rgba(184, 150, 62, .1);
    color: var(--gold);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .05em
}

.ci-saving .amount,
.ci-saving bdi {
    font-weight: 700
}

.ci-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px
}

.ci-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 2px;
    background: var(--cream);
    flex-shrink: 0
}

.cqbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--ink);
    transition: background var(--tr), color var(--tr)
}

.cqbtn:hover:not(:disabled) {
    background: var(--white);
    color: var(--gold);
    box-shadow: 0 1px 4px rgba(14, 12, 11, .08)
}

.cqbtn:disabled {
    opacity: .35;
    cursor: not-allowed
}

.cqnum {
    font-size: 13px;
    font-weight: 600;
    min-width: 26px;
    text-align: center;
    font-variant-numeric: tabular-nums
}

.ci-amounts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    text-align: right;
    min-width: 0
}

/* The line total, not the unit price. The drawer used to show only a unit
   price, so a row at qty 3 gave no way to reconcile it with the subtotal. */
.ci-line-total {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    font-variant-numeric: tabular-nums
}

.ci-price {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.3
}

/* An on-sale line's <del>/<ins> swap (woocommerce_cart_item_subtotal) lands
   inside the line total, so it must not inherit a default underline or the
   browser's yellow <ins> background. */
.ci-line-total del {
    opacity: .55;
    margin-right: 4px;
    font-weight: 400
}

.ci-line-total ins {
    text-decoration: none;
    background: none;
    color: var(--gold)
}

/* ─── Footer ──────────────────────────────────────────── */

.cd-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    background: var(--cream);
    box-shadow: 0 -10px 24px rgba(14, 12, 11, .05);
    padding: 0 24px calc(20px + env(safe-area-inset-bottom, 0px))
}

/* ─── Footer: coupon ──────────────────────────────────── */

.cd-coupon-wrap {
    border-bottom: 1px solid var(--border);
    margin: 0 -24px 14px;
    padding: 0 24px
}

.cd-coupon-toggle {
    width: 100%;
    background: none;
    border: none;
    padding: 13px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--gold);
    text-align: left;
    transition: color var(--tr)
}

.cd-coupon-toggle:hover {
    color: var(--ink)
}

.cd-coupon-toggle svg {
    flex-shrink: 0
}

.cd-coupon-chev {
    margin-left: auto;
    transition: transform var(--tr)
}

.cd-coupon-toggle.is-open .cd-coupon-chev {
    transform: rotate(180deg)
}

.cd-coupon-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease
}

.cd-coupon-body.open {
    max-height: 260px
}

.cd-coupon-row {
    display: flex;
    gap: 8px;
    padding-bottom: 10px
}

.cd-coupon-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--white);
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    outline: none;
    transition: border-color var(--tr)
}

.cd-coupon-input:focus {
    border-color: var(--gold)
}

.cd-coupon-apply {
    flex-shrink: 0;
    border-radius: 4px;
    padding: 10px 18px;
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase
}

.cd-coupon-msg {
    font-size: 12px;
    min-height: 18px;
    padding-bottom: 4px
}

.cd-coupon-msg.success {
    color: #27ae60
}

.cd-coupon-msg.error {
    color: var(--red)
}

.cd-applied-coupons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 12px
}

.cd-applied-coupons:empty {
    padding-bottom: 0
}

.cd-applied-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(39, 174, 96, .1);
    border: 1px solid rgba(39, 174, 96, .25);
    border-radius: 20px;
    color: #27ae60;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em
}

.cd-remove-coupon {
    background: none;
    border: none;
    color: #27ae60;
    font-size: 14px;
    padding: 0;
    line-height: 1
}

/* ─── Footer: totals ──────────────────────────────────── */

.cd-summary {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.cd-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px
}

/* A coupon really does come off the subtotal, so this one does get the minus. */
.cd-row--discount {
    color: #27ae60;
    font-size: 12.5px;
    font-weight: 500
}

/* Bulk/bundle savings — informational, NOT another deduction.
   The subtotal above it is already the discounted figure, because
   inc/bulk-discounts.php lowers the unit price rather than adding a negative
   fee. Rendering this with the coupon rows' leading minus would read as a
   second discount and make the totals look wrong. */
.cd-row--saved {
    color: #27ae60;
    font-size: 12.5px;
    font-weight: 500
}

.cd-saving-amt {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

.cd-subtotal span:first-child {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted)
}

.cd-subtotal #cd-total {
    font-size: 18px;
    font-weight: 600;
    font-variant-numeric: tabular-nums
}

.cd-estimated {
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-weight: 600
}

.cd-estimated span:first-child {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted)
}

.cd-estimated span:last-child {
    font-size: 17px;
    font-variant-numeric: tabular-nums
}

.cd-note {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .04em;
    margin: 8px 0 14px
}

.cd-checkout {
    width: 100%;
    background: var(--ink);
    color: var(--cream);
    border: none;
    border-radius: 4px;
    padding: 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    display: block;
    text-align: center;
    transition: background var(--tr)
}

.cd-checkout:hover {
    background: var(--gold)
}

.cd-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px
}

.cd-cart-link,
.cd-continue {
    background: none;
    border: none;
    padding: 8px 10px;
    font-family: var(--font-body);
    font-size: 11.5px;
    letter-spacing: .06em;
    color: var(--muted);
    transition: color var(--tr)
}

.cd-cart-link:hover,
.cd-continue:hover {
    color: var(--ink)
}

.cd-cart-link + .cd-continue {
    border-left: 1px solid var(--border)
}

/* ─── Narrow screens ──────────────────────────────────── */

@media (max-width: 520px) {
    .cart-drawer {
        width: 100%
    }

    .cd-header {
        padding: 16px 16px 14px
    }

    .cd-body {
        padding: 14px 16px 20px
    }

    .cd-footer {
        padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px))
    }

    .cd-coupon-wrap {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px
    }

    .ci {
        gap: 12px;
        padding: 12px
    }

    .ci-img {
        width: 68px;
        height: 68px
    }

    /* Bigger hit targets where the pointer is a thumb. */
    .cqbtn {
        width: 32px;
        height: 32px
    }

    .ci-remove {
        width: 28px;
        height: 28px
    }

    .cd-coupon-row {
        flex-direction: column
    }

    .cd-coupon-apply {
        width: 100%
    }
}

/* A phone held sideways is ~380px tall. The header, the coupon block and the
   footer are all fixed-height, so at that height they left the item list a few
   pixels of scrollable space — the drawer looked like it had lost the cart.
   Trimming the chrome gives the items back the middle of the screen. */
@media (max-height: 560px) {
    .cd-header {
        padding: 12px 24px 10px
    }

    .cd-body {
        padding: 10px 24px 14px
    }

    .cd-footer {
        padding: 0 24px calc(12px + env(safe-area-inset-bottom, 0px))
    }

    .cd-note {
        margin: 6px 0 10px
    }

    .cd-checkout {
        padding: 13px
    }

    .cd-footer-links {
        margin-top: 6px
    }

    .ci {
        padding: 10px
    }

    .ci-img {
        width: 58px;
        height: 58px
    }
}

@media (max-height: 560px) and (max-width: 520px) {
    .cd-header {
        padding: 12px 16px 10px
    }

    .cd-body {
        padding: 10px 16px 14px
    }

    .cd-footer {
        padding: 0 16px calc(12px + env(safe-area-inset-bottom, 0px))
    }
}

@media (prefers-reduced-motion: reduce) {
    .cart-drawer,
    .cd-close,
    .cd-coupon-body,
    .cd-coupon-chev {
        transition-duration: .01ms
    }

    .cd-close:hover {
        transform: none
    }
}

.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14, 12, 11, .85);
    z-index: 500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 100px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s
}

.search-overlay.open {
    opacity: 1;
    pointer-events: all
}

.search-box {
    background: var(--white);
    padding: 28px;
    width: 640px;
    max-width: 92vw;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .3);
    display: flex;
    gap: 12px;
    transform: translateY(-20px);
    transition: transform .25s
}

.search-overlay.open .search-box {
    transform: translateY(0)
}

.search-box input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 17px;
    font-family: var(--font-display);
    color: var(--ink);
    font-style: italic;
    /* The field is type="search" now (a real form, so mobile keyboards show a
       Search key). WebKit styles those with its own inset box and a cancel
       glyph, neither of which belongs in this layout. */
    -webkit-appearance: none;
    appearance: none;
    background: none;
    min-width: 0
}

.search-box input::-webkit-search-decoration,
.search-box input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none
}

.search-box input::placeholder {
    color: var(--muted)
}

.toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(90px);
    background: var(--ink);
    color: var(--cream);
    padding: 14px 28px;
    font-size: 13px;
    letter-spacing: .04em;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
    z-index: 600;
    white-space: nowrap;
    transition: transform .38s cubic-bezier(.4, 0, .2, 1)
}

.toast.show {
    transform: translateX(-50%) translateY(0)
}

.toast b {
    color: var(--gold2)
}

.tracking-sec {
    background: var(--ink);
    padding: 80px 24px;
    text-align: center;
    position: relative;
    overflow: hidden
}

.tracking-sec:before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(184, 150, 62, .1) 0, transparent 65%)
}

.tracking-sec .sec-label {
    color: var(--gold)
}

.tracking-sec .sec-title {
    color: var(--white)
}

.tracking-sec .sec-sub {
    color: rgba(255, 255, 255, .45)
}

.track-form {
    display: flex;
    max-width: 540px;
    margin: 0 auto;
    position: relative
}

.track-input {
    flex: 1;
    padding: 15px 22px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(184, 150, 62, .3);
    color: var(--white);
    font-size: 14px;
    font-family: var(--font-body);
    outline: none;
    transition: border-color var(--tr)
}

.track-input:focus {
    border-color: var(--gold)
}

.track-input::placeholder {
    color: rgba(255, 255, 255, .3)
}

.track-btn {
    background: var(--gold);
    color: var(--ink);
    border: none;
    padding: 15px 32px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: background var(--tr)
}

.track-btn:hover {
    background: var(--gold2)
}

.track-result {
    margin-top: 20px;
    font-size: 14px;
    color: var(--gold2);
    min-height: 20px;
    position: relative
}

.newsletter {
    padding: 80px 24px;
    text-align: center;
    background: var(--warm);
    border-top: 1px solid var(--border)
}

.nl-form {
    display: flex;
    max-width: 460px;
    margin: 0 auto
}

.nl-input {
    flex: 1;
    padding: 13px 20px;
    border: 1px solid var(--border);
    background: var(--white);
    font-size: 14px;
    font-family: var(--font-body);
    outline: none;
    transition: border-color var(--tr)
}

.nl-input:focus {
    border-color: var(--gold)
}

.nl-btn {
    background: var(--ink);
    color: var(--cream);
    border: none;
    padding: 13px 28px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: background var(--tr)
}

.nl-btn:hover {
    background: #2a2520
}

footer {
    background: var(--ink);
    color: var(--white);
    padding: 72px 32px 36px
}

.footer-inner {
    max-width: 1360px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 56px
}

.fbrand .logo {
    color: var(--white);
    margin-bottom: 18px
}

.fbrand .logo span {
    color: var(--gold)
}

.fbrand p {
    font-size: 13px;
    color: rgba(255, 255, 255, .45);
    line-height: 1.9;
    font-weight: 300;
    max-width: 280px
}

.fbrand-email {
    margin-top: 18px;
    font-size: 13px;
    color: var(--gold2)
}

.fcol h5 {
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .35);
    margin-bottom: 20px
}

.fcol a {
    display: block;
    font-size: 13px;
    font-weight: 300;
    color: rgba(255, 255, 255, .6);
    margin-bottom: 12px;
    transition: color var(--tr)
}

.fcol a:hover {
    color: var(--white)
}

.footer-bottom {
    max-width: 1360px;
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px
}

.footer-bottom p {
    font-size: 12px;
    color: rgba(255, 255, 255, .25);
    letter-spacing: .04em
}

.socials {
    display: flex;
    gap: 12px
}

.socials a {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .45);
    font-size: 15px;
    transition: border-color var(--tr), color var(--tr)
}

.socials a:hover {
    border-color: var(--gold);
    color: var(--gold)
}

.woocommerce div.product form.cart {
    margin: 0
}

/* NOTE: a `.woocommerce div.product form.cart .quantity { display:none }` rule
   used to sit here. single-product.php renders no `div.product` wrapper, so it
   matched nothing — but it was one WooCommerce template change away from
   hiding the PDP quantity box outright, on top of the two rules that actually
   own the stepper split (search "PDP QUANTITY" above). Removed rather than
   corrected: there is nothing it was meant to do that those rules do not. */

@media (max-width:1024px) {
    .pdp-grid {
        grid-template-columns: minmax(0, 1fr)
    }

    .pdp-gallery {
        position: static
    }

    .testimonials-grid {
        grid-template-columns: 1fr
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 32px
    }

    .trust-numbers {
        grid-template-columns: repeat(2, 1fr)
    }

    .features-inner {
        grid-template-columns: repeat(2, 1fr)
    }

    /* Shop: sidebar becomes overlay drawer on tablet */
    .shop-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        max-height: 100vh;
        z-index: 300;
        transform: translateX(-100%);
        transition: transform .35s cubic-bezier(.4,0,.2,1);
        overflow-y: auto;
        box-shadow: 4px 0 32px rgba(14,12,11,.15);
    }

    .shop-sidebar.open {
        transform: translateX(0);
    }

    .shop-sidebar-overlay {
        display: block;
        pointer-events: none;
    }

    .shop-sidebar-overlay.open {
        pointer-events: all;
    }

    .sidebar-close-btn {
        display: flex;
    }

    .filter-toggle-btn {
        display: inline-flex;
    }

    .shop-layout {
        padding: 24px 20px;
    }
}

@media (max-width:768px) {
    nav {
        display: none
    }

    .hdr {
        padding: 0 20px
    }

    .section {
        padding: 60px 20px
    }

    .pgrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px
    }

    .footer-inner {
        grid-template-columns: 1fr
    }

    .review-cards {
        grid-template-columns: 1fr
    }

    .track-form,
    .nl-form {
        flex-direction: column
    }

    /* Shop: always show Add to Cart on mobile (no hover) */
    .padd {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /* A 2-up mobile grid leaves too little width for the qty stepper and the
       Add to Cart label side by side — the label wrapped or the stepper's
       tap targets shrank past comfortable. Stacked, each row gets the full
       card width and a real touch target. */
    .pcard-atc {
        opacity: 1 !important;
        transform: none !important;
        flex-direction: column;
        align-items: stretch;
        gap: 6px
    }

    .pcard-qty {
        align-self: stretch;
        justify-content: center;
        height: 40px
    }

    .pcard-qty-btn {
        width: 36px
    }

    .pcard-atc .padd {
        width: 100%
    }

    .shop-coupon-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .shop-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width:480px) {
    .urgency-bar {
        flex-direction: column;
        gap: 12px
    }

    .trust-numbers {
        grid-template-columns: repeat(2, 1fr)
    }

    .promo-bar {
        gap: 16px
    }

    .pgrid {
        grid-template-columns: 1fr
    }
}

@media(max-width:768px) {
    .login-modal {
        width: 90% !important;
        max-height: 90vh
    }
}

.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(14, 12, 11, .5);
    display: none;
    z-index: 300
}

.login-overlay.open {
    display: block;
    animation: fadeIn .3s ease
}

.login-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.95);
    background: var(--white);
    border-radius: 12px;
    width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 301;
    display: none;
    box-shadow: 0 20px 60px rgba(14, 12, 11, .2)
}

.login-modal.open {
    display: block;
    animation: slideUp .3s ease
}

.login-header {
    padding: 32px 32px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center
}

.login-header h2 {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--ink);
    margin: 0
}

.login-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center
}

.login-close:hover {
    color: var(--ink)
}

.login-form {
    padding: 32px
}

.login-group {
    margin-bottom: 20px
}

.login-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 8px
}

.login-group input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    font-family: var(--font-body);
    transition: border-color var(--tr)
}

.login-group input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(184, 150, 62, .1)
}

.login-forgot {
    font-size: 12px;
    color: var(--gold);
    margin-top: 8px;
    display: block;
    text-align: right
}

.login-forgot:hover {
    text-decoration: underline
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px
}

.login-remember input {
    width: auto
}

.login-remember label {
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: normal
}

.login-btn {
    width: 100%;
    padding: 14px;
    background: var(--ink);
    color: var(--cream);
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--tr)
}

.login-btn:hover {
    background: var(--gold);
    color: var(--ink)
}

.login-divider {
    text-align: center;
    margin: 24px 0;
    position: relative;
    color: var(--muted);
    font-size: 12px
}

.login-divider::before,
.login-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 48%;
    height: 1px;
    background: var(--border)
}

.login-divider::before {
    left: 0
}

.login-divider::after {
    right: 0
}

.login-social {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    background: var(--white);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 10px;
    transition: all var(--tr);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.login-social:hover {
    border-color: var(--gold);
    background: var(--warm)
}

.login-signup {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: var(--muted)
}

.login-signup-link {
    color: var(--gold);
    font-weight: 600
}

.login-signup-link:hover {
    text-decoration: underline
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translate(-50%, -45%) scale(.95)
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1)
    }
}

@media(max-width:768px) {
    .login-modal {
        width: 90% !important;
        max-height: 90vh !important
    }
}

/* =======================================================
   WooCommerce Checkout Page Redesign
   ======================================================= */

body.woocommerce-checkout .woocommerce {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 24px;
}

/* Long product names and unbroken email addresses are the two strings on this
   page nobody controls the length of, and either one used to push its column
   past the viewport. `body { overflow-x: hidden }` hid the result rather than
   fixing it, so the page simply lost its right-hand edge on a phone. */
body.woocommerce-checkout .woocommerce {
    overflow-wrap: break-word;
}

/* Page Title (if exists on checkout) */
body.woocommerce-checkout h1.page-title,
body.woocommerce-checkout .entry-title {
    font-family: var(--font-display);
    font-size: 3rem;
    text-align: center;
    color: var(--ink);
    margin-bottom: 2rem;
    font-weight: 400;
}

/* Top Sections: Login and Coupon */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
    margin-bottom: 20px;
}

.woocommerce-checkout .woocommerce-info {
    background-color: var(--warm);
    border: 1px solid var(--border);
    border-top: 3px solid var(--gold);
    color: var(--ink);
    padding: 1.5rem;
    border-radius: 4px;
    font-family: var(--font-body);
}

.woocommerce-checkout .woocommerce-info a {
    color: var(--gold);
    font-weight: 600;
    transition: var(--tr);
}

.woocommerce-checkout .woocommerce-info a:hover {
    color: var(--ink);
}

.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.login {
    background: var(--white);
    border: 1px solid var(--border);
    padding: 2rem;
    border-radius: 4px;
    margin-bottom: 2rem;
}

.woocommerce-checkout form.checkout_coupon p,
.woocommerce-checkout form.login p {
    margin-bottom: 1rem;
}

/* ─── Layout for the checkout form ────────────────────────
   Grid, not flex, because the blocks WooCommerce emits are siblings in source
   order — details, the "Your order" heading, the order review — and the heading
   belongs on top of the review column, not between the two columns. Under the
   flex layout this used to be, the heading sat as a third item on row one and
   pushed the order summary onto a line of its own: the checkout had two columns
   in the stylesheet and one column on screen.

   The heading and the review are wrapped into a single `.lx-checkout-summary`
   item in functions.php, so this is TWO items in ONE row — no row spanning, and
   so no surplus height for grid to distribute into a gap (see the note there).

   Column assignment is explicit and everything else spans the full width, so
   the notice group checkout.js prepends on a failed submit (and anything a
   gateway hooks in) still lands somewhere sensible instead of being auto-placed
   into the middle of the layout. */
form.checkout.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
}

/* Written as an exclusion rather than a plain `> *` so it cannot outrank the
   two placements below on specificity — `form.checkout.woocommerce-checkout
   > *` is two classes and an element, which beats a lone `.lx-checkout-summary`
   and would have put the summary back across the full width. */
form.checkout.woocommerce-checkout > *:not(#customer_details):not(.lx-checkout-summary) {
    grid-column: 1 / -1;
}

#customer_details {
    grid-column: 1;
    min-width: 0;
}

/* The right-hand column is the heading and the review box together, wrapped
   into one grid item by `lauxuria_checkout_summary_open()`/`_close()` in
   functions.php. One item, one row — see the note there for why two rows and a
   row-spanning `#customer_details` left a band of dead space under the
   heading. */
.lx-checkout-summary {
    grid-column: 2;
    min-width: 0;
}

#customer_details .col-1,
#customer_details .col-2 {
    width: 100%;
    float: none;
    margin-bottom: 2rem;
}

#customer_details .col-2:last-child {
    margin-bottom: 0;
}

/* The name pair side by side, everything else full width. Auto-placement, not
   fixed columns, because the setup page can switch off either half of the pair
   and a `grid-column: 2` would leave the survivor stranded in the right-hand
   track with a hole beside it. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}

/* `.notes` is order_comments, which WooCommerce does NOT mark form-row-wide —
   left to auto-placement the order-notes textarea took half a row. The custom
   builder's rows are listed too: they toggle themselves between `display: none`
   and `display: block` (lauxuria_custom_fields_checkout_script), and a grid
   item blockifies either way, so the placement survives the toggle. */
.woocommerce-checkout .form-row-wide,
.woocommerce-checkout .form-row.notes,
.woocommerce-checkout .lx-custom-field-row {
    grid-column: 1 / -1;
}

.woocommerce-checkout .form-row {
    min-width: 0;
}

/* Headings */
.woocommerce-checkout h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--ink);
    margin-bottom: 1.5rem;
    font-weight: 400;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}

/* Form Fields */
.woocommerce-checkout .form-row {
    margin-bottom: 1.5rem;
}

.woocommerce-checkout .form-row label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--ink);
    font-weight: 500;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border);
    background-color: var(--white);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    border-radius: 4px;
    transition: var(--tr);
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
    border-color: var(--gold);
    outline: none;
    box-shadow: 0 0 0 1px var(--gold);
}

.woocommerce-checkout .form-row textarea {
    min-height: 110px;
    resize: vertical;
}

/* ─── Required vs optional ────────────────────────────────
   WooCommerce's own stylesheet is dequeued theme-wide
   (woocommerce_enqueue_styles => empty), so the red asterisk and the
   "(optional)" tag it emits arrived on this page as unstyled text — the
   Required column on LAUXURIA > Checkout Field Setup produced no visible
   difference at all on the front end. These two rules are what make that
   column readable to a customer. Also restyled live by
   lauxuria_checkout_required_sync_script() when the country changes. */
.woocommerce-checkout .form-row label .required,
.woocommerce-checkout .form-row label abbr.required {
    color: var(--red);
    border: none;
    text-decoration: none;
    font-weight: 700;
    margin-left: 2px;
}

.woocommerce-checkout .form-row label .optional {
    color: var(--muted);
    font-weight: 400;
    font-size: 0.82em;
    letter-spacing: .02em;
}

/* Validation state. `woocommerce-invalid` is added by checkout.js on blur and
   on a failed submit; without a rule for it the customer got a scroll to the
   top of the form and no indication of which field was the problem. */
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select,
.woocommerce-checkout .form-row.woocommerce-invalid textarea,
.woocommerce-checkout .form-row.woocommerce-invalid .select2-container .select2-selection {
    border-color: var(--red);
    background-color: rgba(192, 57, 43, .04);
}

.woocommerce-checkout .form-row.woocommerce-invalid label {
    color: var(--red);
}

.woocommerce-checkout .form-row.woocommerce-validated input.input-text,
.woocommerce-checkout .form-row.woocommerce-validated select,
.woocommerce-checkout .form-row.woocommerce-validated textarea {
    border-color: #67a86f;
}

/* ─── "Ship to a different address?" ──────────────────────
   This is an <h3> wrapping a checkbox, so it inherited the 2rem display-font
   heading rule above and rendered a 32px sentence next to a 13px checkbox,
   under a full-width rule. It is a control, not a heading. */
.woocommerce-checkout h3#ship-to-different-address {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 1.25rem;
}

.woocommerce-checkout h3#ship-to-different-address label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
}

.woocommerce-checkout h3#ship-to-different-address input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--gold);
    cursor: pointer;
}

/* ─── Country / state select2 ─────────────────────────────
   select2 measures the original <select> to size itself, and inside a grid
   track that measurement can land before the track has a width — the box then
   renders a few pixels wide and the country is unpickable. Forcing 100% takes
   the measurement out of the equation entirely. */
.woocommerce-checkout .form-row .select2-container {
    width: 100% !important;
}

.woocommerce-checkout .form-row .select2-container--default .select2-selection--single {
    height: 48px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--white);
}

.woocommerce-checkout .form-row .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 46px;
    padding: 0;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
}

.woocommerce-checkout .form-row .select2-container--default.select2-container--open .select2-selection--single,
.woocommerce-checkout .form-row .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold);
}

/* The dropdown panel is appended to <body>, so it cannot be scoped to the
   checkout — it is shared with every other select2 on the site. */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--gold);
    color: var(--white);
}

.select2-dropdown {
    border-color: var(--border);
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
    font-family: var(--font-body);
}

/* Order Review Section (Right Side) */
#order_review_heading {
    margin-top: 0;
}

.woocommerce-checkout-review-order {
    min-width: 0;
    background: var(--white);
    border: 1px solid var(--border);
    padding: 2.5rem;
    box-shadow: var(--shadow);
    border-radius: 8px;
}

/* Table styles */
.woocommerce-checkout-review-order table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
    font-family: var(--font-body);
}

.woocommerce-checkout-review-order table.shop_table th,
.woocommerce-checkout-review-order table.shop_table td {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
}

.woocommerce-checkout-review-order table.shop_table th {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    padding-bottom: 12px;
}

.woocommerce-checkout-review-order table.shop_table th.product-total,
.woocommerce-checkout-review-order table.shop_table td.product-total,
.woocommerce-checkout-review-order table.shop_table tfoot td {
    text-align: right;
}

.woocommerce-checkout-review-order table.shop_table tfoot tr.order-total th,
.woocommerce-checkout-review-order table.shop_table tfoot tr.order-total td {
    font-size: 1.25rem;
    font-weight: 600;
    border-bottom: none;
    border-top: 2px solid var(--ink);
}

/* The line name is the longest uncontrolled string in the summary, and the
   totals column must never be the one that gives way. */
.woocommerce-checkout-review-order table.shop_table td.product-name,
.woocommerce-checkout-review-order table.shop_table th.product-name {
    width: 62%;
    line-height: 1.45;
}

/* The title is made a block so a long name wraps like prose across the full
   cell width; the Remove link and qty stepper WooCommerce prints straight
   after it (no separating markup of their own) then land on their own line
   below it instead of three inline items shrinking to fit one row together —
   which is what forced a long title to wrap one word per line. */
.woocommerce-checkout-review-order table.shop_table td.product-name > a:first-child {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    color: var(--ink);
}

.woocommerce-checkout-review-order table.shop_table td.product-total,
.woocommerce-checkout-review-order table.shop_table th.product-total {
    white-space: nowrap;
    vertical-align: top;
    font-weight: 600;
}

.woocommerce-checkout-review-order table.shop_table td.product-name dl.variation {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--muted);
}

.woocommerce-checkout-review-order table.shop_table td.product-name dl.variation dt,
.woocommerce-checkout-review-order table.shop_table td.product-name dl.variation dd {
    margin: 0;
    display: inline;
}

.woocommerce-checkout-review-order table.shop_table td.product-name dl.variation dd p {
    display: inline;
    margin: 0;
}

/* ─── The theme's own line controls in the summary ────────
   luxuria_checkout_item_quantity() / luxuria_checkout_item_name() inject a
   stepper and a Remove link into the order review, and nothing styled them —
   with WooCommerce's stylesheet dequeued they rendered as raw browser buttons
   and a bare link wedged into the product name. */
.checkout-quantity-wrap {
    display: inline-flex !important;
    align-items: center;
    gap: 2px;
    margin: 0 !important;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--cream);
    vertical-align: middle;
}

.checkout-qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--ink);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--tr), color var(--tr);
}

.checkout-qty-btn:hover:not(:disabled) {
    background: var(--white);
    color: var(--gold);
}

.checkout-qty-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* The inline width/margin on this input is written by
   luxuria_checkout_item_quantity(), so the overrides have to outrank it. */
.woocommerce-checkout-review-order .checkout-qty-input,
.checkout-qty-input {
    width: 42px !important;
    height: 28px;
    margin: 0 !important;
    padding: 0;
    border: none;
    background: none;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    -moz-appearance: textfield;
}

.checkout-qty-input::-webkit-outer-spin-button,
.checkout-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.checkout-qty-input:focus {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
    border-radius: 4px;
}

/* Both of these are echoed inline inside td.product-name, right after the
   title link with no separating markup — the title is now display:block (see
   above), so this pair starts its own line rather than wrapping with it. The
   `!important`s outrank the inline colour, size and margin
   luxuria_checkout_item_name() writes onto the link itself; a left/right
   margin here (not the old top-only one) is what actually separates it from
   the title and from the qty stepper that follows it on the same line. */
.checkout-remove-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 14px 0 0 !important;
    font-size: 12px !important;
    color: var(--muted) !important;
    vertical-align: middle;
    transition: color var(--tr);
}

.checkout-remove-item:hover {
    color: var(--red) !important;
}

/* ─── Shipping method rows ────────────────────────────────
   A `<ul>` inside a table cell, with no styling of its own once WooCommerce's
   stylesheet is gone: bullets, browser indentation and radios floating loose. */
.woocommerce-checkout-review-order ul#shipping_method {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.woocommerce-checkout-review-order ul#shipping_method li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 0.9rem;
}

.woocommerce-checkout-review-order ul#shipping_method li:last-child {
    margin-bottom: 0;
}

.woocommerce-checkout-review-order ul#shipping_method input[type="radio"] {
    margin-top: 3px;
    accent-color: var(--gold);
    flex-shrink: 0;
}

.woocommerce-checkout-review-order ul#shipping_method label {
    cursor: pointer;
    margin: 0;
}

.woocommerce-checkout-review-order .woocommerce-shipping-destination,
.woocommerce-checkout-review-order p.woocommerce-shipping-contents {
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--muted);
}

.woocommerce-checkout-review-order .shipping-calculator-button {
    color: var(--gold);
    text-decoration: underline;
}

/* Payment Methods */
#payment {
    background: transparent;
}

#payment ul.payment_methods {
    border-bottom: 1px solid var(--border);
    padding: 0 0 1.5rem 0;
    margin: 0 0 1.5rem 0;
}

#payment ul.payment_methods li {
    list-style: none;
    margin-bottom: 1rem;
}

#payment ul.payment_methods li input[type="radio"] {
    margin-right: 10px;
    accent-color: var(--gold);
}

#payment ul.payment_methods li label {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
}

#payment div.payment_box {
    background-color: var(--warm);
    padding: 1rem;
    margin-top: 0.5rem;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--muted);
    position: relative;
}

#payment div.payment_box::before {
    content: "";
    display: block;
    position: absolute;
    top: -10px;
    left: 20px;
    border: 5px solid transparent;
    border-bottom-color: var(--warm);
}

/* Terms, privacy and the place-order row */
.woocommerce-checkout .woocommerce-privacy-policy-text {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.6;
}

.woocommerce-checkout .woocommerce-privacy-policy-text a {
    color: var(--gold);
    text-decoration: underline;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 1.25rem;
}

.woocommerce-checkout .validate-required.woocommerce-terms-and-conditions-checkbox-text,
.woocommerce-checkout .form-row.terms label {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.woocommerce-checkout .form-row.terms input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: var(--gold);
}

/* Place Order Button
   Scoped to the buttons that really are full-width primary actions. It used to
   read `.woocommerce-checkout .button`, which also caught "Apply coupon" and
   the login form's submit and stretched both of them across the page. */
#payment button#place_order,
.woocommerce-checkout form.checkout button.button,
.woocommerce-checkout button[name="woocommerce_checkout_place_order"] {
    background-color: var(--ink);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem 2rem;
    border: none;
    border-radius: 4px;
    width: 100%;
    cursor: pointer;
    transition: var(--tr);
}

#payment button#place_order:hover,
.woocommerce-checkout form.checkout button.button:hover,
.woocommerce-checkout button[name="woocommerce_checkout_place_order"]:hover {
    background-color: var(--gold);
    color: var(--white);
}

/* The coupon and login forms sit above the checkout form, not inside it. */
.woocommerce-checkout form.checkout_coupon .button,
.woocommerce-checkout form.login .button,
.woocommerce-checkout form.checkout_coupon button,
.woocommerce-checkout form.login button {
    display: inline-block;
    width: auto;
    background-color: var(--ink);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.85rem 1.75rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--tr);
}

.woocommerce-checkout form.checkout_coupon .button:hover,
.woocommerce-checkout form.login .button:hover,
.woocommerce-checkout form.checkout_coupon button:hover,
.woocommerce-checkout form.login button:hover {
    background-color: var(--gold);
}

.woocommerce-checkout form.checkout_coupon .form-row-first,
.woocommerce-checkout form.checkout_coupon .form-row-last,
.woocommerce-checkout form.login .form-row-first,
.woocommerce-checkout form.login .form-row-last {
    display: block;
    width: 100%;
}

.woocommerce-checkout form.login .woocommerce-form-login__rememberme {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.woocommerce-checkout form.login .woocommerce-form-login__rememberme input {
    width: 16px;
    height: 16px;
    accent-color: var(--gold);
}

/* Select2 overrides for WC (site-wide; the checkout adds its own above) */
.select2-container--default .select2-selection--single {
    border: 1px solid var(--border);
    border-radius: 4px;
    height: 48px;
    display: flex;
    align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px;
}

/* ─── Responsive ──────────────────────────────────────────
   991px is where the summary stops being a column and becomes a block under
   the form: the grid collapses to one track and `.lx-checkout-summary` — the
   heading and the review box together — drops below `#customer_details` in
   source order, which is the order a phone should read them in anyway. */
@media (max-width: 1100px) {
    form.checkout.woocommerce-checkout {
        column-gap: 28px;
    }

    .woocommerce-checkout-review-order {
        padding: 1.75rem;
    }
}

@media (max-width: 991px) {
    body.woocommerce-checkout .woocommerce {
        padding: 2.5rem 20px;
    }

    form.checkout.woocommerce-checkout {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
    }

    form.checkout.woocommerce-checkout > *:not(#customer_details):not(.lx-checkout-summary),
    #customer_details,
    .lx-checkout-summary {
        grid-column: 1;
    }

    .woocommerce-checkout-review-order {
        padding: 1.5rem;
    }

    /* Stacked, the summary heading follows the last form field directly; the
       desktop `margin-top: 0` exists only to line it up with the top of the
       form column, which is not a thing that can happen here. */
    #order_review_heading {
        margin-top: 1rem;
    }

    body.woocommerce-checkout h1.page-title,
    body.woocommerce-checkout .entry-title {
        font-size: 2.25rem;
    }

    .woocommerce-checkout h3 {
        font-size: 1.6rem;
    }
}

@media (max-width: 600px) {
    body.woocommerce-checkout .woocommerce {
        padding: 1.75rem 14px;
    }

    /* One column: at this width a two-up name row leaves each field too narrow
       to read its own placeholder. */
    .woocommerce-billing-fields__field-wrapper,
    .woocommerce-shipping-fields__field-wrapper,
    .woocommerce-additional-fields__field-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }

    body.woocommerce-checkout h1.page-title,
    body.woocommerce-checkout .entry-title {
        font-size: 1.9rem;
        margin-bottom: 1.25rem;
    }

    .woocommerce-checkout h3 {
        font-size: 1.4rem;
        margin-bottom: 1.1rem;
    }

    .woocommerce-checkout .form-row {
        margin-bottom: 1.1rem;
    }

    /* 16px is the threshold below which iOS Safari zooms the page on focus and
       leaves the customer scrolled sideways into a field they cannot see. */
    .woocommerce-checkout .form-row input.input-text,
    .woocommerce-checkout .form-row select,
    .woocommerce-checkout .form-row textarea {
        font-size: 16px;
        padding: 12px 13px;
    }

    .woocommerce-checkout-review-order {
        padding: 1.25rem;
        border-radius: 6px;
    }

    .woocommerce-checkout-review-order table.shop_table th,
    .woocommerce-checkout-review-order table.shop_table td {
        padding: 0.85rem 0;
        font-size: 0.92rem;
    }

    .woocommerce-checkout-review-order table.shop_table tfoot tr.order-total th,
    .woocommerce-checkout-review-order table.shop_table tfoot tr.order-total td {
        font-size: 1.1rem;
    }

    .woocommerce-checkout form.checkout_coupon,
    .woocommerce-checkout form.login {
        padding: 1.25rem;
    }

    .woocommerce-checkout .woocommerce-info {
        padding: 1rem;
        font-size: 0.9rem;
    }

    /* Thumb-sized targets for the summary's stepper. */
    .checkout-qty-btn {
        width: 32px;
        height: 32px;
    }

    .checkout-qty-input {
        height: 32px;
    }

    #payment button#place_order {
        padding: 1.05rem 1.5rem;
    }

    .woocommerce-checkout form.checkout_coupon .button,
    .woocommerce-checkout form.login .button,
    .woocommerce-checkout form.checkout_coupon button,
    .woocommerce-checkout form.login button {
        width: 100%;
    }
}

/* =======================================================
   WooCommerce Custom Orders Page
   ======================================================= */
.lx-orders-wrapper {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
}
.lx-orders-title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 10px;
    color: var(--ink);
}
.lx-orders-subtitle {
    text-align: center;
    color: var(--muted);
    margin-bottom: 40px;
    font-size: 1.1rem;
}
.lx-orders-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.lx-order-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px;
    transition: var(--tr);
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.lx-order-card:hover {
    box-shadow: var(--shadow);
    border-color: #ddd;
}
.lx-order-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
    margin-bottom: 16px;
}

/* Without this, a long order number next to a long status word ("Refunded",
   "Cancelled") had nowhere to go — no flex-wrap above 768px meant the row
   simply overflowed the card on a narrow phone instead of dropping the
   status badge to its own line. */
.lx-order-id {
    min-width: 0;
    overflow-wrap: break-word;
}
.lx-order-label {
    font-size: 0.85rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 4px;
}
.lx-order-id strong {
    font-size: 1.2rem;
    color: var(--ink);
}
.lx-order-status {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #f1f1f1;
    color: #555;
}
.lx-status-completed { background: #e6f4ea; color: #137333; }
.lx-status-processing { background: #e8f0fe; color: #1967d2; }
.lx-status-on-hold { background: #fef7e0; color: #b06000; }
.lx-status-cancelled, .lx-status-failed { background: #fce8e6; color: #c5221f; }

.lx-order-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
.lx-order-detail-col span:last-child {
    font-size: 1.1rem;
    color: var(--ink);
    font-weight: 500;
}

.lx-order-items-preview {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
}
.lx-order-item-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
}
.lx-order-item-img-placeholder {
    width: 60px;
    height: 60px;
    background: var(--warm);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lx-order-more-items {
    font-size: 0.9rem;
    color: var(--muted);
    background: var(--warm);
    padding: 8px 12px;
    border-radius: 4px;
}

.lx-order-actions {
    display: flex;
    gap: 12px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}
.lx-order-btn {
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: var(--tr);
}
.lx-btn-primary {
    background: var(--ink);
    color: var(--white);
}
.lx-btn-primary:hover {
    background: var(--gold);
    color: var(--white);
}
.lx-btn-secondary {
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--ink);
}
.lx-btn-secondary:hover {
    background: var(--warm);
}

.lx-orders-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.lx-empty-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}
.lx-orders-empty h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    margin-bottom: 10px;
}
.lx-orders-empty p {
    color: var(--muted);
    margin-bottom: 30px;
}
.lx-shop-now-btn {
    display: inline-block;
    padding: 12px 30px;
}

/* Pagination */
.lx-orders-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}
.lx-pagination-btn {
    padding: 10px 20px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--white);
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
    transition: var(--tr);
}
.lx-pagination-btn:hover {
    background: var(--ink);
    color: var(--white);
}

/* =======================================================
   Order Created Popup
   ======================================================= */
.lx-popup-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lx-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}
.lx-popup-modal {
    background: var(--white);
    padding: 40px;
    border-radius: 12px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    transform: translateY(30px) scale(0.95);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    position: relative;
}
.lx-popup-overlay.active .lx-popup-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.lx-popup-icon {
    width: 60px;
    height: 60px;
    background: #e6f4ea;
    color: #137333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: 0 auto 20px;
}
.lx-popup-title {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--ink);
    margin-bottom: 10px;
}
.lx-popup-desc {
    color: var(--muted);
    font-size: 1.05rem;
    margin-bottom: 30px;
    line-height: 1.5;
}
.lx-popup-btn {
    display: block;
    width: 100%;
    background: var(--ink);
    color: var(--white);
    padding: 14px;
    border-radius: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    cursor: pointer;
    transition: var(--tr);
}
.lx-popup-btn:hover {
    background: var(--gold);
}
.lx-popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--muted);
    cursor: pointer;
    transition: var(--tr);
}
.lx-popup-close:hover {
    color: var(--ink);
}

/* =======================================================
   Advanced Orders Page Refinements
   ======================================================= */
.lx-orders-header-top {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}
.lx-orders-header-top::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--gold);
    margin: 20px auto 0;
}
.lx-card-advanced {
    border: none;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    border-radius: 12px;
    padding: 30px;
    position: relative;
    overflow: hidden;
}
.lx-card-advanced::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 4px; height: 100%;
    background: var(--gold);
    opacity: 0;
    transition: var(--tr);
}
.lx-card-advanced:hover::before {
    opacity: 1;
}
.lx-order-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.lx-order-label svg {
    color: var(--gold);
}
.lx-item-count {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 400;
}

/* Tracking Timeline */
.lx-tracking-timeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30px 0;
    padding: 20px 0;
    position: relative;
}
.lx-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 2;
    flex: 1;
}
.lx-step-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ced4da;
    transition: var(--tr);
}
.lx-step-icon svg {
    width: 20px;
    height: 20px;
}
.lx-step.active .lx-step-icon {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.lx-step-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ced4da;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.lx-step.active .lx-step-text {
    color: var(--ink);
}
.lx-step-line {
    flex: 2;
    height: 2px;
    background: #e9ecef;
    position: relative;
    top: -12px;
    transition: var(--tr);
}
.lx-step-line.active {
    background: var(--ink);
}

/* Items Gallery */
.lx-order-items-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 20px;
}
.lx-items-gallery {
    display: flex;
    gap: 12px;
    align-items: center;
}
.lx-item-thumb-wrapper {
    position: relative;
}
.lx-item-qty {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--ink);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 700;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--white);
}
.lx-order-more-items {
    width: 60px;
    height: 60px;
    background: #f8f9fa;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
}
.lx-order-actions {
    border-top: none;
    padding-top: 0;
}

/* Advanced Empty State */
.lx-advanced-empty {
    padding: 80px 20px;
    background: linear-gradient(180deg, #fff 0%, #fcfcfc 100%);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border: none;
}
.lx-empty-icon-animated {
    font-size: 4rem;
    margin-bottom: 25px;
    display: inline-block;
    animation: float 3s ease-in-out infinite;
}
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}
@media (max-width: 768px) {
    .lx-order-items-preview {
        flex-direction: column;
        align-items: flex-start;
    }
    .lx-order-actions {
        width: 100%;
        flex-wrap: wrap;
    }
    /* flex-basis (not just flex-grow) so 3 actions ("View", "Track",
       "Cancel") wrap onto a second row on a narrow phone instead of
       squeezing to a sliver each. */
    .lx-order-actions .lx-order-btn {
        flex: 1 1 120px;
    }
    .lx-step-text {
        font-size: 0.7rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE PRODUCT RAILS
   Top Rated · Featured Products · All Products
═══════════════════════════════════════════════════════════ */
.lx-prail {
    position: relative;
    padding-top: 68px;
    padding-bottom: 68px;
}

.lx-prail--all {
    padding-top: 76px;
}

.lx-prail--featured {
    background:
        radial-gradient(1200px 320px at 50% 0%, rgba(184, 150, 62, .07), transparent 70%),
        linear-gradient(180deg, rgba(244, 237, 224, .55), rgba(250, 247, 242, 0));
    max-width: none;
    padding-left: max(32px, calc((100% - 1360px) / 2));
    padding-right: max(32px, calc((100% - 1360px) / 2));
    padding-top: 72px;
    padding-bottom: 72px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* ── Section head: copy left, View All right ─────────────── */
.lx-sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.lx-sec-head-text {
    max-width: 640px;
}

.lx-sec-head .sec-label,
.lx-sec-head .sec-title,
.lx-sec-head .sec-sub {
    text-align: left;
}

.lx-sec-head .sec-title {
    margin-bottom: 10px;
}

.lx-sec-head .sec-sub {
    margin-bottom: 0;
}

.lx-sec-head .sec-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lx-sec-head .sec-label:before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--gold);
    display: inline-block;
}

/* ── View All links ──────────────────────────────────────── */
.lx-viewall {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink);
    padding-bottom: 7px;
    border-bottom: 1px solid var(--gold);
    white-space: nowrap;
    transition: color var(--tr), border-color var(--tr);
}

.lx-viewall:hover {
    color: var(--gold);
    border-color: var(--ink);
}

.lx-viewall svg {
    transition: transform var(--tr);
}

.lx-viewall:hover svg {
    transform: translateX(4px);
}

.lx-viewall-foot {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

.lx-viewall--solid {
    border: 1px solid var(--ink);
    border-bottom-color: var(--ink);
    padding: 15px 34px;
    background: transparent;
}

.lx-viewall--solid:hover {
    background: var(--ink);
    color: var(--gold2);
    border-color: var(--ink);
}

.lx-prail-empty {
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    font-weight: 300;
    padding: 48px 20px;
    border: 1px dashed var(--border);
}

/* ── Row-capped grid (rows x columns from the admin) ──────────
   Explicit per-count classes rather than a custom property, because
   repeat() will not accept min()/calc() as its track count — and a
   blanket "3 columns under 1180px" rule would otherwise *raise* the
   column count for a 2-column section as the viewport narrows. */
.pgrid--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pgrid--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pgrid--c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pgrid--c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pgrid--c6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1280px) {

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

@media (max-width: 1180px) {

    .pgrid--c4,
    .pgrid--c5,
    .pgrid--c6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {

    .pgrid--c3,
    .pgrid--c4,
    .pgrid--c5,
    .pgrid--c6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .pgrid--fixed {
        gap: 14px;
    }
}

/* ── Card additions ──────────────────────────────────────── */
.pname a {
    color: inherit;
}

.pcard .pname a:hover {
    color: var(--gold);
}

.ptagline {
    font-size: 12px;
    color: var(--muted);
    font-weight: 300;
    line-height: 1.5;
    margin: -4px 0 10px;
}

.pbadge-custom {
    background: var(--gold);
    color: var(--ink);
}

.pcard--featured {
    border-color: rgba(184, 150, 62, .38);
}

.pcard--featured:hover {
    box-shadow: 0 10px 44px rgba(184, 150, 62, .18);
}

.pdiscount {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    background: var(--red);
    color: var(--white);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    padding: 4px 8px;
    border-radius: 2px;
}

.pcard-rank {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 1px solid var(--border);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    box-shadow: 0 2px 10px rgba(14, 12, 11, .08);
}

.pcard-rank--top {
    background: linear-gradient(140deg, var(--gold2), var(--gold));
    border-color: var(--gold);
    color: var(--ink);
}

.pcard-rank ~ .pdiscount {
    right: 54px;
}

.pquick {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--white);
    padding: 9px 16px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--tr), transform var(--tr);
}

.pcard:hover .pquick {
    opacity: 1;
    transform: translateY(0);
}

/* ── Star rating on cards ────────────────────────────────── */
.prate {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}

.prate-stars {
    position: relative;
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 2px;
    color: #ddd5c6;
    white-space: nowrap;
}

.prate-stars:before {
    content: '★★★★★';
}

.prate-fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--gold);
}

.prate-fill:before {
    content: '★★★★★';
}

.prate-num {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
}

.prate-count {
    font-size: 11px;
    color: var(--muted);
}

/* ── Shop page: featured-only view banner ────────────────── */
.lx-featured-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 26px 28px;
    margin-bottom: 24px;
    background: linear-gradient(120deg, var(--warm), rgba(250, 247, 242, .4));
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
}

.lx-featured-banner-label {
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    display: block;
    margin-bottom: 6px;
}

.lx-featured-banner-title {
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 6px;
}

.lx-featured-banner p {
    font-size: 13px;
    color: var(--muted);
    font-weight: 300;
    line-height: 1.6;
    max-width: 60ch;
}

.lx-featured-banner-clear {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 12px 22px;
    border: 1px solid var(--ink);
    white-space: nowrap;
    transition: background var(--tr), color var(--tr);
}

.lx-featured-banner-clear:hover {
    background: var(--ink);
    color: var(--gold2);
}

@media (max-width: 700px) {
    .lx-sec-head {
        align-items: flex-start;
        gap: 18px;
        margin-bottom: 28px;
    }

    .lx-prail--featured {
        padding-top: 52px;
        padding-bottom: 52px;
    }

    .lx-viewall-foot {
        margin-top: 32px;
    }

    .padd,
    .pquick {
        opacity: 1;
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════
   DYNAMIC NAVIGATION  (LAUXURIA → Navigation)
   The navbar, its dropdowns / mega menus, and the mobile drawer.
═══════════════════════════════════════════════════════════ */

.sticky-header-wrapper.is-static {
    position: relative;
}

.lx-nav {
    display: flex;
    align-items: center;
    --lx-nav-gap: 32px;
    --lx-nav-size: 12px;
    --lx-nav-ls: .12em;
}

.lx-nav--center { margin: 0 auto; }
.lx-nav--left { margin: 0 auto 0 28px; }
.lx-nav--right { margin-left: auto; }
.lx-nav--right + .hdr-right { margin-left: 22px; }

.lx-nav-list {
    display: flex;
    align-items: center;
    gap: var(--lx-nav-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lx-nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

/* Neutralise the legacy `nav a:after` underline so hover styles are opt-in. */
.lx-nav a::after { content: none; }

.lx-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 0;
    color: var(--muted);
    font-size: var(--lx-nav-size);
    font-weight: 500;
    letter-spacing: var(--lx-nav-ls);
    line-height: 1.3;
    text-transform: none;
    transition: color var(--tr), background var(--tr);
}

.lx-nav--upper .lx-nav-list > .lx-nav-item > .lx-nav-link { text-transform: uppercase; }

.lx-nav-link:hover,
.lx-nav-link.is-current { color: var(--ink); }

.lx-nav-icon { flex-shrink: 0; opacity: .85; }
.lx-nav-text { display: inline-flex; flex-direction: column; gap: 2px; }
.lx-nav-label { display: block; }

.lx-nav-desc {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .01em;
    text-transform: none;
}

/* ── Hover effects ────────────────────────────────────────── */

.lx-nav--hover-underline .lx-nav-list > .lx-nav-item > .lx-nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width var(--tr);
}

.lx-nav--hover-underline .lx-nav-list > .lx-nav-item:hover > .lx-nav-link::after,
.lx-nav--hover-underline .lx-nav-list > .lx-nav-item > .lx-nav-link.is-current::after { width: 100%; }

.lx-nav--hover-glow .lx-nav-list > .lx-nav-item:hover > .lx-nav-link {
    color: var(--gold);
    text-shadow: 0 0 18px rgba(184, 150, 62, .45);
}

.lx-nav--hover-fill .lx-nav-list > .lx-nav-item > .lx-nav-link {
    padding: 8px 14px;
    border-radius: 999px;
}

.lx-nav--hover-fill .lx-nav-list > .lx-nav-item:hover > .lx-nav-link,
.lx-nav--hover-fill .lx-nav-list > .lx-nav-item > .lx-nav-link.is-current {
    background: var(--warm);
    color: var(--ink);
}

/* ── Per-item styles ──────────────────────────────────────── */

.lx-nav-link--highlight { color: var(--gold); font-weight: 600; }
.lx-nav-link--highlight:hover { color: var(--gold2); }

.lx-nav-link--pill {
    padding: 7px 16px;
    border: 1px solid var(--gold);
    border-radius: 999px;
    color: var(--gold);
}

.lx-nav-link--pill:hover { background: var(--gold); color: var(--cream); }

.lx-nav-link--button {
    padding: 8px 18px;
    background: var(--ink);
    color: var(--cream);
    border-radius: 2px;
}

.lx-nav-link--button:hover { background: var(--gold); color: var(--ink); }

/* ── Badges ───────────────────────────────────────────────── */

.lx-nav-badge {
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--gold);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.5;
    white-space: nowrap;
}

.lx-nav-badge--red { background: var(--red); }
.lx-nav-badge--green { background: #2e7d54; }
.lx-nav-badge--ink { background: var(--ink); color: var(--gold-light); }

/* ── Caret ────────────────────────────────────────────────── */

.lx-nav-caret {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    padding: 4px;
    border: 0;
    background: none;
    color: var(--muted);
    transition: transform var(--tr), color var(--tr);
}

.lx-nav-item:hover > .lx-nav-caret,
.lx-nav-item.is-open > .lx-nav-caret { transform: rotate(180deg); color: var(--ink); }

/* ── Sub menus ────────────────────────────────────────────── */

.lx-sub {
    position: absolute;
    top: 100%;
    left: -18px;
    z-index: 240;
    min-width: 232px;
    padding: 10px;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--tr), transform var(--tr), visibility var(--tr);
}

.lx-nav-item:hover > .lx-sub,
.lx-nav-item:focus-within > .lx-sub,
.lx-nav-item.is-open > .lx-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hover bridge — keeps the panel open while the cursor crosses the gap. */
.lx-nav-list > .lx-nav-item.has-children::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 14px;
}

.lx-sub-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lx-sub-item { position: relative; display: block; }

.lx-nav .lx-sub-link {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 3px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: none;
    transition: background var(--tr), color var(--tr), padding var(--tr);
}

.lx-nav .lx-sub-link:hover {
    background: var(--warm);
    color: var(--ink);
    padding-left: 16px;
}

.lx-nav .lx-sub-link.is-current { background: var(--warm); color: var(--gold); }

.lx-sub-item > .lx-nav-caret { position: absolute; right: 8px; top: 10px; transform: rotate(-90deg); }
.lx-sub-item:hover > .lx-nav-caret { transform: rotate(-90deg); }

/* Third level flies out to the side of the dropdown. */
.lx-sub--dropdown .lx-sub {
    top: -10px;
    left: calc(100% + 4px);
    transform: translateX(-8px);
}

.lx-sub--dropdown .lx-sub-item:hover > .lx-sub,
.lx-sub--dropdown .lx-sub-item:focus-within > .lx-sub { transform: translateX(0); }

/* ── Dropdown skins ───────────────────────────────────────── */

.lx-nav--drop-sharp .lx-sub {
    border-radius: 0;
    border-color: var(--ink);
    box-shadow: none;
    background: var(--white);
}

.lx-nav--drop-dark .lx-sub {
    background: #14110f;
    border-color: rgba(212, 175, 106, .25);
}

.lx-nav--drop-dark .lx-sub-link { color: var(--cream); }
.lx-nav--drop-dark .lx-sub-link:hover { background: rgba(212, 175, 106, .14); color: var(--gold-light); }
.lx-nav--drop-dark .lx-nav-desc { color: rgba(250, 247, 242, .5); }

/* ── Mega menu ────────────────────────────────────────────── */

.lx-sub--mega {
    --lx-mega-cols: 3;
    --lx-mega-w: min(94vw, calc(var(--lx-mega-cols) * 236px));
    left: 50%;
    width: var(--lx-mega-w);
    margin-left: calc(var(--lx-mega-w) / -2);
    padding: 22px;
}

.lx-sub--mega > .lx-sub-list {
    display: grid;
    grid-template-columns: repeat(var(--lx-mega-cols), minmax(0, 1fr));
    gap: 6px 18px;
}

.lx-sub--mega > .lx-sub-list > .lx-sub-item > .lx-sub-link {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    color: var(--ink);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lx-sub--mega > .lx-sub-list > .lx-sub-item > .lx-sub-link:hover {
    padding-left: 8px;
    background: none;
    color: var(--gold);
}

/* Inside a mega panel the third level is a plain column list, not a flyout. */
.lx-sub--mega .lx-sub {
    position: static;
    min-width: 0;
    padding: 6px 0 12px;
    border: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
}

.lx-sub--mega .lx-sub .lx-sub-link { padding: 6px 8px; font-size: 12.5px; color: var(--muted); }
.lx-sub--mega .lx-sub .lx-sub-link:hover { color: var(--ink); padding-left: 12px; }
.lx-sub--mega .lx-sub-item > .lx-nav-caret { display: none; }

/* ── Header CTA ───────────────────────────────────────────── */

.hdr-cta {
    padding: 10px 20px;
    border: 1px solid var(--gold);
    color: var(--gold);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background var(--tr), color var(--tr);
}

.hdr-cta:hover { background: var(--gold); color: var(--cream); }

/* ── Mobile drawer ────────────────────────────────────────── */

.lx-mnav-trigger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: none;
    flex-shrink: 0;
}

.lx-mnav-trigger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--ink);
    transition: transform var(--tr), opacity var(--tr);
}

.lx-mnav-trigger.is-active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.lx-mnav-trigger.is-active span:nth-child(2) { opacity: 0; }
.lx-mnav-trigger.is-active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.lx-mnav-overlay {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(14, 12, 11, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--tr), visibility var(--tr);
}

.lx-mnav-overlay.open { opacity: 1; visibility: visible; }

.lx-mnav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    width: min(340px, 86vw);
    background: var(--cream);
    box-shadow: 8px 0 40px rgba(14, 12, 11, .18);
    transform: translateX(-102%);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}

.lx-mnav.open { transform: translateX(0); }

/* Same admin-toolbar collision as .sticky-header-wrapper / .cart-drawer above.
   `bottom: 0` (not a height) is what this one is anchored with, so dropping
   `top` alone already shrinks it correctly — no height calc needed. */
.admin-bar .lx-mnav {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .lx-mnav {
        top: 46px;
    }
}

.lx-mnav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 22px 16px;
    border-bottom: 1px solid var(--border);
}

.lx-mnav-title {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lx-mnav-close {
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 28px;
    line-height: 1;
}

/* Both this and .lx-nav are <nav> elements — explicitly reset display/margin
   here so the legacy bare `nav { display:flex; margin:0 auto }` rule (still
   used elsewhere on the page) cannot shrink this to content width and center
   it instead of letting it fill the drawer. */
.lx-mnav-body { display: block; flex: 1; margin: 0; overflow-y: auto; padding: 10px 0 24px; }

.lx-mnav-list,
.lx-mnav-sub {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lx-mnav-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(232, 224, 212, .7);
}

.lx-mnav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 1;
    padding: 15px 22px;
    color: var(--ink);
    font-size: 13.5px;
    letter-spacing: .06em;
    transition: color var(--tr), background var(--tr);
}

.lx-mnav-link:hover { background: var(--warm); color: var(--gold); }

.lx-mnav-toggle {
    padding: 15px 20px;
    border: 0;
    border-left: 1px solid rgba(232, 224, 212, .7);
    background: none;
    color: var(--muted);
    transition: transform var(--tr);
}

.lx-mnav-toggle[aria-expanded="true"] { transform: rotate(180deg); color: var(--gold); }

.lx-mnav-sub {
    max-height: 0;
    overflow: hidden;
    background: rgba(244, 237, 224, .5);
    transition: max-height .3s ease;
}

.lx-mnav-item.is-open > .lx-mnav-sub { max-height: 1200px; }

.lx-mnav-item--d1 .lx-mnav-link { padding-left: 42px; font-size: 13px; color: var(--muted); }
.lx-mnav-item--d2 .lx-mnav-link { padding-left: 62px; font-size: 12.5px; }

.lx-mnav-foot { padding: 18px 22px; border-top: 1px solid var(--border); }

.lx-mnav-cta {
    display: block;
    padding: 14px;
    background: var(--ink);
    color: var(--cream);
    font-size: 12px;
    letter-spacing: .12em;
    text-align: center;
    text-transform: uppercase;
}

/* ── Breakpoints ──────────────────────────────────────────── */

@media (max-width: 1180px) {
    .lx-nav { --lx-nav-gap: 22px; }
}

@media (max-width: 900px) {
    .lx-nav { display: none; }
    .lx-mnav-trigger { display: flex; }
    .lx-nav--center + .hdr-right,
    .lx-nav--left + .hdr-right,
    .lx-nav--right + .hdr-right { margin-left: auto; }
    .hdr-cta { display: none; }
}

@media (max-width: 560px) {
    .hdr .logo { font-size: 22px; }
}

/* The header is one flex line that never wraps, and its only elastic part is
   the gaps — the hamburger and the icons are fixed squares and the logo is
   text (`flex-shrink: 0`, and shrinking it would only make it overflow itself).
   At the metrics above that line needs 428px, so on every phone narrower than
   that the cart button ran past the right padding, the gold count badge
   (`right: -7px`) was sliced off by the screen edge, and .hdr's overflow gave
   the whole document a horizontal scroll. The row is tightened in two steps
   rather than allowed to spill: 428px → 342px at 480, → 306px at 380, which
   clears a 320px viewport with the badge still inside the padding. */
@media (max-width: 480px) {
    .hdr {
        padding: 0 14px;
        gap: 10px;
    }

    .hdr-right { gap: 12px; }

    /* Tracked tighter as it shrinks: .18em of letter-spacing costs ~20px of the
       row at this size, and the wordmark reads closed-up at small sizes anyway. */
    .hdr .logo {
        font-size: 19px;
        letter-spacing: .14em;
    }

    .cart-trigger {
        padding: 10px 14px;
        letter-spacing: .08em;
    }
}

@media (max-width: 380px) {
    .hdr { gap: 8px; }

    .hdr-right { gap: 10px; }

    .hdr .logo {
        font-size: 17px;
        letter-spacing: .1em;
    }

    .cart-trigger {
        padding: 9px 11px;
        font-size: 11px;
    }
}

/* ═══════════════════════════════════════════════════════════
   SEARCH RESULTS & 404
   Templates the theme previously did not ship (search.php / 404.php), so a
   search or a bad URL fell through to index.php and rendered an empty section.
═══════════════════════════════════════════════════════════ */

.lx-search,
.lx-404 {
    min-height: 46vh;
}

.lx-404 .sec-title {
    font-size: 34px;
    margin-bottom: 12px;
}

.lx-search-list {
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    gap: 28px;
}

.lx-search-item {
    padding-bottom: 26px;
    border-bottom: 1px solid var(--border);
}

.lx-search-item:last-child {
    border-bottom: none;
}

.lx-search-item-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 8px;
    line-height: 1.3;
}

.lx-search-item-title a {
    color: inherit;
    text-decoration: none;
}

.lx-search-item-title a:hover {
    color: var(--gold);
}

.lx-search-item-excerpt {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
    font-weight: 300;
    margin-bottom: 10px;
}

.lx-search-item-link {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
}

.lx-search-item-link:hover {
    text-decoration: underline;
}

/* Shared by the empty-search state and the 404 */
.lx-search-form {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 460px;
    margin: 24px auto;
}

.lx-search-form input[type="search"] {
    flex: 1 1 220px;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid var(--border);
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: inherit;
    border-radius: 0;
}

.lx-search-form input[type="search"]:focus {
    outline: none;
    border-color: var(--gold);
}

.lx-404-links {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.lx-404-home {
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
}

.lx-404-home:hover {
    color: var(--gold);
}

/* the_posts_pagination() markup, matched to woocommerce_pagination()'s look */
.shop-pagination .nav-links {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.shop-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border);
    background: #fff;
    color: inherit;
    text-decoration: none;
    font-size: 13px;
}

.shop-pagination .page-numbers.current,
.shop-pagination a.page-numbers:hover {
    background: var(--ink, #17130f);
    border-color: var(--ink, #17130f);
    color: #fff;
}

.shop-pagination .page-numbers.dots {
    border-color: transparent;
    background: none;
}

/* ═══════════════════════════════════════════════════════════
   NATIVE WOOCOMMERCE PAGES — CART · MY ACCOUNT · ORDER DETAILS

   functions.php filters `woocommerce_enqueue_styles` to an empty array, so
   WooCommerce ships NO stylesheet of its own on this site and every rule for
   its markup has to live here. The theme covered the shop grid, the PDP and
   the checkout — but not the Cart page, not any My Account screen, and not the
   order-details tables shown on the thank-you and View Order pages. Those
   rendered as unstyled browser-default tables and forms: raw blue links,
   borderless full-width tables, native grey buttons.

   Everything below is scoped to WooCommerce's own class names, so it cannot
   reach the theme's custom templates (front-page, archive-product,
   single-product) or restyle anything that already looked right.
═══════════════════════════════════════════════════════════ */

.woocommerce-cart .woocommerce,
.woocommerce-account .woocommerce,
.woocommerce-order-received .lx-thankyou {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 15px;
}

/* ─── Shared table shell (cart, order details, downloads) ── */

.woocommerce table.shop_table,
.woocommerce table.woocommerce-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border);
    background: var(--white);
    margin-bottom: 2rem;
    font-size: 14px;
}

.woocommerce table.shop_table th,
.woocommerce table.woocommerce-table th {
    text-align: left;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--warm);
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.woocommerce table.shop_table td,
.woocommerce table.woocommerce-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--ink);
}

.woocommerce table.shop_table tr:last-child td,
.woocommerce table.woocommerce-table tr:last-child td {
    border-bottom: none;
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
    background: var(--cream);
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}

.woocommerce table.shop_table a,
.woocommerce table.woocommerce-table a {
    color: var(--ink);
    text-decoration: none;
}

.woocommerce table.shop_table a:hover,
.woocommerce table.woocommerce-table a:hover {
    color: var(--gold);
}

.woocommerce table.shop_table img {
    width: 62px;
    height: auto;
    display: block;
    border: 1px solid var(--border);
}

/* Stack tables on small screens rather than letting them overflow the page.
   WooCommerce already prints the column name on every cell as data-title
   for exactly this. */
@media (max-width: 720px) {

    .woocommerce table.shop_table,
    .woocommerce table.woocommerce-table {
        display: block;
        border: none;
    }

    .woocommerce table.shop_table thead,
    .woocommerce table.woocommerce-table thead {
        display: none;
    }

    .woocommerce table.shop_table tbody,
    .woocommerce table.shop_table tfoot,
    .woocommerce table.shop_table tr,
    .woocommerce table.woocommerce-table tbody,
    .woocommerce table.woocommerce-table tr {
        display: block;
        width: 100%;
    }

    .woocommerce table.shop_table tr,
    .woocommerce table.woocommerce-table tr {
        border: 1px solid var(--border);
        background: var(--white);
        margin-bottom: 12px;
        padding: 6px 0;
    }

    .woocommerce table.shop_table td,
    .woocommerce table.shop_table tfoot th,
    .woocommerce table.woocommerce-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        border-bottom: 1px solid var(--border);
        padding: 12px 16px;
        text-align: right;
    }

    .woocommerce table.shop_table td::before,
    .woocommerce table.woocommerce-table td::before {
        content: attr(data-title);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--muted);
        text-align: left;
    }

    .woocommerce table.shop_table td.product-remove::before,
    .woocommerce table.shop_table td.product-thumbnail::before {
        content: none;
    }
}

/* ─── Cart page ───────────────────────────────────────────── */

.woocommerce-cart .cart .product-remove a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    transition: var(--tr);
}

.woocommerce-cart .cart .product-remove a.remove:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.woocommerce-cart .cart .product-name {
    font-weight: 500;
}

.woocommerce-cart .cart td.product-quantity .quantity {
    justify-content: flex-start;
}

.woocommerce-cart .actions .coupon {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.woocommerce-cart .actions .coupon input[type="text"] {
    padding: 12px 15px;
    border: 1px solid var(--border);
    background: var(--white);
    font-family: var(--font-body);
    font-size: 14px;
    min-width: 200px;
}

.woocommerce-cart .actions .coupon input[type="text"]:focus {
    border-color: var(--gold);
    outline: none;
}

.woocommerce-cart .cart-collaterals {
    display: flex;
    justify-content: flex-end;
    margin-top: 2rem;
}

.woocommerce-cart .cart_totals {
    width: 100%;
    max-width: 420px;
    background: var(--white);
    border: 1px solid var(--border);
    padding: 28px;
}

.woocommerce-cart .cart_totals h2 {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 400;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.woocommerce-cart .cart_totals table.shop_table {
    border: none;
    margin-bottom: 20px;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
    background: none;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
    font-size: 16px;
    font-weight: 600;
    border-bottom: none;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    text-align: center;
}

.woocommerce-cart .cart-empty,
.woocommerce-cart .return-to-shop {
    text-align: center;
}

.woocommerce-cart .cart-empty {
    font-family: var(--font-display);
    font-size: 28px;
    margin-bottom: 20px;
}

/* ─── Cross-sells ("You may also like…") ────────────────────
   Cart items with cross-sells configured print WooCommerce's own
   cart/cross-sells.php + content-product.php with no theme override and no
   theme class names (the shop grid's .pcard convention lives only in
   archive-product.php, which this is not) — so without this it was a bare
   ul.products: no grid, no image sizing, browser-default heading and price,
   sitting directly below the fully-styled cart table. The add-to-cart link
   is still a plain `a.button` inside `.woocommerce-cart .woocommerce`, so it
   already picks up the themed button rule below without repeating it here. */

.woocommerce-cart .cross-sells {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border);
}

.woocommerce-cart .cross-sells h2 {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 400;
    margin-bottom: 24px;
}

.woocommerce-cart .cross-sells ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-cart .cross-sells ul.products li.product {
    margin: 0;
}

.woocommerce-cart .cross-sells ul.products li.product a.woocommerce-LoopProduct-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.woocommerce-cart .cross-sells ul.products li.product img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border: 1px solid var(--border);
    margin-bottom: 12px;
}

.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 6px;
}

.woocommerce-cart .cross-sells ul.products li.product .price {
    display: block;
    font-size: 14px;
    color: var(--muted);
}

.woocommerce-cart .cross-sells ul.products li.product .price ins {
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
}

.woocommerce-cart .cross-sells ul.products li.product .price del {
    opacity: .6;
    margin-right: 6px;
}

.woocommerce-cart .cross-sells ul.products li.product a.button {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-size: 11px;
    padding: 10px 16px;
}

@media (max-width: 480px) {
    .woocommerce-cart .cross-sells ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* ─── Buttons on native WooCommerce pages ─────────────────── */

.woocommerce-cart .woocommerce a.button,
.woocommerce-cart .woocommerce button.button,
.woocommerce-cart .woocommerce input.button,
.woocommerce-account .woocommerce a.button,
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce input.button,
.woocommerce-order-received .woocommerce a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    background: var(--ink);
    color: var(--gold-light);
    border: 1px solid var(--ink);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border-radius: 0;
    transition: var(--tr);
}

.woocommerce-cart .woocommerce a.button:hover,
.woocommerce-cart .woocommerce button.button:hover,
.woocommerce-cart .woocommerce input.button:hover,
.woocommerce-account .woocommerce a.button:hover,
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce input.button:hover,
.woocommerce-order-received .woocommerce a.button:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
}

.woocommerce-cart .woocommerce button.button:disabled,
.woocommerce-cart .woocommerce input.button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* ─── My Account ──────────────────────────────────────────── */

.woocommerce-account .woocommerce {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
}

/* The login/register screen is a single centred column, not a two-pane layout */
.woocommerce-account:not(.logged-in) .woocommerce {
    display: block;
    max-width: 520px;
}

.woocommerce-MyAccount-navigation {
    flex: 0 0 230px;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--white);
}

.woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid var(--border);
}

.woocommerce-MyAccount-navigation li:last-child {
    border-bottom: none;
}

.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 14px 18px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    transition: var(--tr);
}

.woocommerce-MyAccount-navigation li a:hover {
    background: var(--warm);
    color: var(--gold);
}

.woocommerce-MyAccount-navigation li.is-active a {
    background: var(--ink);
    color: var(--gold-light);
}

.woocommerce-MyAccount-content {
    flex: 1 1 480px;
    min-width: 0;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-order-received .lx-thankyou h2,
.woocommerce-order-received .lx-thankyou h3 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    margin: 0 0 16px;
}

.woocommerce-MyAccount-content p {
    color: var(--muted);
    line-height: 1.8;
    font-weight: 300;
}

.woocommerce-MyAccount-content mark,
.woocommerce-order-received mark {
    background: var(--gold-light);
    color: var(--ink);
    padding: 0 4px;
}

/* Account forms — login, register, lost password, edit account, addresses */
.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register,
.woocommerce form.woocommerce-ResetPassword,
.woocommerce form.woocommerce-EditAccountForm,
.woocommerce form.woocommerce-address-fields {
    background: var(--white);
    border: 1px solid var(--border);
    padding: 28px;
}

.woocommerce .woocommerce-form-row,
.woocommerce-account .woocommerce form .form-row {
    display: block;
    margin-bottom: 18px;
}

.woocommerce-account .woocommerce form .form-row label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--ink);
}

.woocommerce-account .woocommerce form .form-row input.input-text,
.woocommerce-account .woocommerce form .form-row select,
.woocommerce-account .woocommerce form .form-row textarea,
.woocommerce .woocommerce-Input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border);
    background: var(--white);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
    transition: var(--tr);
}

.woocommerce-account .woocommerce form .form-row input.input-text:focus,
.woocommerce-account .woocommerce form .form-row select:focus,
.woocommerce .woocommerce-Input:focus {
    border-color: var(--gold);
    outline: none;
    box-shadow: 0 0 0 1px var(--gold);
}

.woocommerce-form-login__rememberme,
.woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
}

.woocommerce-form-login__rememberme input,
.woocommerce-form__label-for-checkbox input {
    width: auto;
    margin: 0;
}

.woocommerce-LostPassword a,
.woocommerce-privacy-policy-text a {
    color: var(--gold);
}

/* Addresses */
.woocommerce-Addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.woocommerce-Address {
    background: var(--white);
    border: 1px solid var(--border);
    padding: 24px;
}

.woocommerce-Address-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
    margin: 0;
    font-size: 20px;
}

.woocommerce-Address-title a {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
}

.woocommerce-Address address {
    font-style: normal;
    color: var(--muted);
    line-height: 1.9;
    font-size: 14px;
}

/* ─── Order details (thank-you page and View Order) ───────── */

.lx-thankyou-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 36px;
}

.lx-thankyou-title {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 12px;
}

.lx-thankyou-sub {
    color: var(--muted);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.8;
}

.lx-thankyou-head--failed .lx-thankyou-title {
    color: var(--red);
}

.lx-thankyou-actions {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.lx-thankyou-ghost {
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
}

.lx-thankyou-ghost:hover {
    color: var(--gold);
}

ul.lx-order-overview,
.woocommerce ul.order_details {
    list-style: none;
    margin: 0 auto 40px;
    padding: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px 40px;
    justify-content: center;
    background: var(--white);
    border: 1px solid var(--border);
    max-width: 900px;
}

ul.lx-order-overview li,
.woocommerce ul.order_details li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: none;
    margin: 0;
    padding: 0;
    float: none;
    text-transform: none;
    font-size: 15px;
    line-height: 1.4;
}

.lx-overview-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

ul.lx-order-overview strong,
.woocommerce ul.order_details li strong {
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
}

.woocommerce-order-details,
.woocommerce-customer-details {
    max-width: 900px;
    margin: 0 auto 40px;
}

.woocommerce-order-details__title,
.woocommerce-column__title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 400;
    margin-bottom: 16px;
}

.woocommerce-customer-details .woocommerce-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.woocommerce-customer-details address {
    font-style: normal;
    background: var(--white);
    border: 1px solid var(--border);
    padding: 20px;
    color: var(--muted);
    line-height: 1.9;
    font-size: 14px;
}

.woocommerce-order-downloads,
.woocommerce-bacs-bank-details {
    max-width: 900px;
    margin: 0 auto 40px;
    background: var(--white);
    border: 1px solid var(--border);
    padding: 24px;
}

@media (max-width: 900px) {

    .woocommerce-account .woocommerce {
        display: block;
    }

    .woocommerce-MyAccount-navigation {
        margin-bottom: 28px;
    }

    .woocommerce-cart .cart-collaterals {
        justify-content: stretch;
    }

    .woocommerce-cart .cart_totals {
        max-width: none;
    }

    .lx-thankyou-title {
        font-size: 30px;
    }

    /* Below 16px, iOS Safari zooms the whole page in on focus — the same
       fix already applied to the checkout fields, needed here for the same
       reason: these inputs were sized for desktop density (14px). */
    .woocommerce-account .woocommerce form .form-row input.input-text,
    .woocommerce-account .woocommerce form .form-row select,
    .woocommerce-account .woocommerce form .form-row textarea,
    .woocommerce .woocommerce-Input,
    .woocommerce-cart .actions .coupon input[type="text"] {
        font-size: 16px;
    }
}

/* ─── Checkout order-review — mobile line-item cards ────────
   Below 720px the "Shared table shell" block above turns every shop_table
   row into a flex row (`display:flex; justify-content:space-between`) so a
   two-column cart/order-details table stacks into label/value pairs. The
   checkout review-order table's product-name cell is not label/value shaped
   though — it holds the title link, the Remove link and the qty stepper all
   run together with no wrapping markup of their own (see
   luxuria_checkout_item_name()/luxuria_checkout_item_quantity() in
   functions.php) — so turning that cell into a single nowrap flex row forced
   all three to shrink-to-fit one line together, and the title (the only one
   of the three willing to shrink) collapsed to one word per line. This
   section overrides the shared block for this table specifically, and needs
   to win ties on identical selectors that appear earlier in the file (the
   product-name/product-total width rules already win outright on
   specificity; the tfoot rules below are a specificity tie with the shared
   block and only win because they are declared after it). */
@media (max-width: 720px) {
    .woocommerce-checkout-review-order table.shop_table td.product-name {
        display: block;
        text-align: left;
        padding-bottom: 4px;
    }

    /* The title stays a block (see the base rule above) so a long name wraps
       as prose across the card's full width instead of being squeezed. */
    .woocommerce-checkout-review-order table.shop_table td.product-name > a:first-child {
        font-size: 16px;
    }

    .woocommerce-checkout-review-order table.shop_table td.product-total {
        display: block;
        text-align: right;
        border-top: 1px dashed var(--border);
        border-bottom: none;
        margin-top: 10px;
        padding-top: 14px;
    }

    /* Neither cell carries a data-title attribute (that convention is the
       native Cart/My Account tables' own) so the shared block's label
       pseudo-element would only ever render empty here — drop it outright
       rather than leave a phantom empty box in the flow. */
    .woocommerce-checkout-review-order table.shop_table td.product-name::before,
    .woocommerce-checkout-review-order table.shop_table td.product-total::before {
        content: none;
    }

    .woocommerce-checkout-review-order table.shop_table tr {
        border-radius: 10px;
    }

    /* Subtotal / Total read better as one compact "label ... value" line
       than the shared block's two full-width stacked halves. The Shipping
       row is deliberately excluded (`:not(.shipping)`) — its value is the
       shipping-method radio list, not a short amount, and needs the shared
       block's normal full-width stacking to have room to lay out; forcing
       it beside its label is what previously squeezed "Flat rate: RsXXX"
       into a sliver and pushed it past the edge of the screen. */
    .woocommerce-checkout-review-order table.shop_table tfoot tr:not(.shipping) {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        border: none;
        margin-bottom: 0;
        padding: 0;
        background: none;
    }

    .woocommerce-checkout-review-order table.shop_table tfoot tr:not(.shipping) th,
    .woocommerce-checkout-review-order table.shop_table tfoot tr:not(.shipping) td {
        display: block;
        background: none;
        padding: 6px 0;
        text-align: left;
    }

    .woocommerce-checkout-review-order table.shop_table tfoot tr:not(.shipping) td {
        text-align: right;
    }

    .woocommerce-checkout-review-order table.shop_table tfoot th::before,
    .woocommerce-checkout-review-order table.shop_table tfoot td::before {
        content: none;
    }

    /* The shipping row keeps the shared block's stacking, just tidied to
       match the rest of this card instead of looking like a cart-page row. */
    .woocommerce-checkout-review-order table.shop_table tfoot tr.shipping th,
    .woocommerce-checkout-review-order table.shop_table tfoot tr.shipping td {
        display: block;
        background: none;
        padding: 6px 0;
        text-align: left;
    }
}