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

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

/* ── 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 {
    transition: width 2s 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
}

.pcard {
    background: var(--white);
    border: 1px solid var(--border);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--tr), box-shadow var(--tr);
    position: relative
}

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

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

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

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

.pdp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start
}

.pdp-gallery {
    position: sticky;
    top: 90px
}

.pdp-main-img {
    width: 100%;
    aspect-ratio: 1;
    background: var(--warm);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    overflow: hidden
}

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

.pdp-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap
}

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

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

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

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

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

.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-display);
    font-size: 36px;
    font-weight: 600
}

.pdp-sale .amount {
    font-family: var(--font-display);
    font-size: 36px
}

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

/* Hide old hardcoded qty for classic, but show and style for modern */
.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 ──────────────────────────────── */
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);
}
.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-add-btn {
    width: 100%;
    background: #ef4444;
    color: #fff;
    border: none;
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    transition: background var(--tr);
    cursor: pointer;
    margin-top: auto;
}
.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 (POPUP) ────────────────────────────────── */
.pdp-notices {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999999;
    max-width: 400px;
    width: calc(100% - 40px);
    animation: slideInDown 0.4s ease forwards;
}
@keyframes slideInDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.pdp-notices.fade-out {
    animation: fadeOutUp 0.4s ease forwards;
}
@keyframes fadeOutUp {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-100%); opacity: 0; }
}
.woocommerce-message, .woocommerce-error, .woocommerce-info {
    padding: 16px 24px;
    margin: 0 0 10px;
    background: var(--white);
    color: var(--ink);
    border-left: 4px solid var(--gold);
    border-radius: 6px;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.woocommerce-error {
    border-left-color: #e2401c;
}
.woocommerce-info {
    border-left-color: #1e85be;
}
.woocommerce-message .button {
    background: var(--ink);
    color: var(--white);
    padding: 6px 12px;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--tr);
    white-space: nowrap;
}
.woocommerce-message .button:hover {
    background: var(--gold);
}

/* 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 {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 95vw;
    height: 100vh;
    background: var(--cream);
    z-index: 401;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .38s cubic-bezier(.4, 0, .2, 1);
    box-shadow: -12px 0 48px rgba(14, 12, 11, .18)
}

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

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

.cd-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400
}

.cd-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--muted);
    transition: color var(--tr)
}

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

.cd-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px
}

.cd-empty {
    text-align: center;
    color: var(--muted);
    margin-top: 60px
}

.cd-empty-icon {
    font-size: 52px;
    margin-bottom: 16px
}

.cd-empty p {
    font-size: 14px;
    font-weight: 300
}

.ci {
    display: flex;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border)
}

.ci-img {
    width: 76px;
    height: 76px;
    background: var(--warm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
    overflow: hidden
}

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

.ci-info {
    flex: 1
}

.ci-name {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
    line-height: 1.3
}

.ci-price {
    font-size: 13px;
    color: var(--muted)
}

.ci-qty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px
}

.cqbtn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    background: none;
    font-size: 16px;
    transition: border-color var(--tr)
}

.cqbtn:hover {
    border-color: var(--ink)
}

.cqnum {
    font-size: 13px;
    font-weight: 500;
    min-width: 20px;
    text-align: center
}

.ci-remove {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--muted);
    align-self: flex-start;
    padding: 2px;
    transition: color var(--tr)
}

.ci-remove:hover {
    color: var(--red)
}

.cd-footer {
    padding: 20px 28px;
    border-top: 1px solid var(--border)
}

.cd-subtotal {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px
}

.cd-subtotal span:first-child {
    font-size: 13px;
    color: var(--muted)
}

.cd-subtotal span:last-child {
    font-size: 16px;
    font-weight: 600
}

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

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

.cd-checkout:hover {
    background: #2a2520
}

.cd-continue {
    width: 100%;
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 12px;
    font-size: 12px;
    letter-spacing: .08em;
    transition: border-color var(--tr), color var(--tr)
}

.cd-continue:hover {
    border-color: var(--ink);
    color: var(--ink)
}

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

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

.woocommerce div.product form.cart .quantity {
    display: none !important
}

@media (max-width:1024px) {
    .pdp-grid {
        grid-template-columns: 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;
    }

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