/*
 * st-public.css
 * Sri Temasek Jewellery — Public Website
 * Luxury Mobile-First Design System
 * ─────────────────────────────────────
 * 1.  CSS Variables
 * 2.  Reset & Base
 * 3.  Typography
 * 4.  Navigation
 * 5.  Buttons
 * 6.  Badges
 * 7.  Product Cards
 * 8.  Category Cards
 * 9.  Gold Price Cards
 * 10. Hero
 * 11. Sections & Page Structure
 * 12. Homepage
 * 13. Product Catalogue Page
 * 14. Product Detail Page
 * 15. Category Page
 * 16. Preorder Page
 * 17. Contact Page
 * 18. WhatsApp FAB
 * 19. Footer
 * 20. Pagination
 * 21. Utilities
 * 22. Responsive Breakpoints
 */

/* ══════════════════════════════════════
   1. CSS Variables
═══════════════════════════════════════ */
:root {
    /* Gold palette */
    --gold:           #C9A84C;
    --gold-light:     #E2C97E;
    --gold-lighter:   #F5EDD6;
    --gold-dark:      #9A7C2E;
    --gold-subtle:    rgba(201,168,76,.12);
    --gold-border:    rgba(201,168,76,.28);

    /* Neutral palette */
    --cream:          #FAF7F2;
    --warm-white:     #FFFDF9;
    --beige:          #F0E8D8;
    --sand:           #E4D8C2;
    --dark-brown:     #2C1A0E;
    --brown:          #5C3D1E;
    --brown-mid:      #7A5230;

    /* Text */
    --text-primary:   #2C1A0E;
    --text-secondary: #6B5744;
    --text-muted:     #9B8878;
    --text-light:     #BEB0A2;

    /* Borders */
    --border:         rgba(44,26,14,.10);
    --border-strong:  rgba(44,26,14,.20);

    /* Backgrounds */
    --bg-page:        #FAF7F2;
    --bg-card:        #FFFDF9;
    --bg-hero:        #1A0F07;
    --bg-section-alt: #F5EFE4;

    /* Status */
    --available:      #1A7A4A;
    --available-bg:   rgba(26,122,74,.10);
    --preorder:       #8A5E20;
    --preorder-bg:    rgba(201,168,76,.12);
    --booked:         #6B5744;
    --booked-bg:      rgba(107,87,68,.10);
    --sold:           #7A3030;
    --sold-bg:        rgba(122,48,48,.08);

    /* WhatsApp */
    --wa-green:       #25D366;
    --wa-dark:        #128C7E;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(44,26,14,.05);
    --shadow-sm: 0 2px 6px rgba(44,26,14,.08);
    --shadow:    0 4px 16px rgba(44,26,14,.10);
    --shadow-md: 0 6px 24px rgba(44,26,14,.12);
    --shadow-lg: 0 12px 40px rgba(44,26,14,.14);
    --shadow-xl: 0 20px 60px rgba(44,26,14,.18);

    /* Border radius */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 18px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* Nav height */
    --nav-h:    64px;

    /* Mobile WA bar height */
    --wa-bar-h: 60px;

    /* Transitions */
    --ease: cubic-bezier(.25,.46,.45,.94);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ══════════════════════════════════════
   2. Reset & Base
═══════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-page);
    color: var(--text-primary);
    line-height: 1.6;
    padding-top: var(--nav-h);
    padding-bottom: var(--wa-bar-h);   /* space for mobile WA bar */
    -webkit-font-smoothing: antialiased;
}

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

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

ul, ol {
    list-style: none;
}

button, input, select, textarea {
    font: inherit;
}

/* ══════════════════════════════════════
   3. Typography
═══════════════════════════════════════ */
.font-serif { font-family: 'Playfair Display', Georgia, serif; }

h1, h2, h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
}

h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
}

.text-gold    { color: var(--gold); }
.text-muted   { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-white   { color: #fff; }
.text-center  { text-align: center; }

/* ══════════════════════════════════════
   4. Navigation
═══════════════════════════════════════ */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    height: var(--nav-h);
    background: rgba(250,247,242,.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}

.nav-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 32px;
}

/* Logo */
.nav-logo {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    flex-shrink: 0;
}

.nav-logo .logo-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark-brown);
    letter-spacing: .02em;
}

.nav-logo .logo-sub {
    font-size: .65rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* Desktop Nav Links */
.nav-links {
    display: none;
    flex: 1;
    gap: 4px;
}

.nav-links li a {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: .88rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color .18s var(--ease), background .18s var(--ease);
}

.nav-links li a:hover,
.nav-links li a.active {
    color: var(--dark-brown);
    background: var(--gold-subtle);
}

/* Category dropdown */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: .88rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    transition: color .18s var(--ease), background .18s var(--ease);
}

.nav-dropdown-toggle:hover,
.nav-dropdown:hover .nav-dropdown-toggle {
    color: var(--dark-brown);
    background: var(--gold-subtle);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 180px;
    background: var(--warm-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    z-index: 300;
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-menu li a {
    display: block;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: .84rem;
    color: var(--text-secondary);
    transition: color .15s var(--ease), background .15s var(--ease);
}

.nav-dropdown-menu li a:hover {
    color: var(--dark-brown);
    background: var(--gold-subtle);
}

/* Nav spacer */
.nav-spacer { flex: 1; }

/* Nav WA button */
.nav-wa-btn {
    display: none;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: var(--wa-green);
    color: #fff !important;
    border-radius: var(--radius-full);
    font-size: .84rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background .18s var(--ease), transform .18s var(--ease);
    flex-shrink: 0;
}

.nav-wa-btn:hover {
    background: var(--wa-dark);
    transform: translateY(-1px);
}

/* Hamburger */
.nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    padding: 8px;
    border: none;
    background: none;
    cursor: pointer;
    margin-left: auto;
    border-radius: var(--radius-sm);
    transition: background .18s;
}

.nav-hamburger:hover { background: var(--gold-subtle); }

.nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--dark-brown);
    border-radius: 2px;
    transition: transform .25s var(--ease), opacity .2s;
}

/* Hamburger open state */
.nav-hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.open span:nth-child(2) {
    opacity: 0;
}
.nav-hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: var(--warm-white);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s var(--ease);
    z-index: 190;
}

.mobile-menu.open {
    max-height: 80vh;
    overflow-y: auto;
}

.mobile-menu ul {
    padding: 12px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-menu li a {
    display: block;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: .95rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: background .15s, color .15s;
}

.mobile-menu li a:hover,
.mobile-menu li a.active {
    background: var(--gold-subtle);
    color: var(--dark-brown);
}

.mobile-menu .mobile-wa-link {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 14px 16px;
    background: var(--wa-green);
    color: #fff;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: .95rem;
    transition: background .15s;
}

.mobile-menu .mobile-wa-link:hover {
    background: var(--wa-dark);
    color: #fff;
}

/* ══════════════════════════════════════
   5. Buttons
═══════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 22px;
    border-radius: var(--radius-full);
    font-size: .9rem;
    font-weight: 600;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease),
                border-color .2s var(--ease), transform .18s var(--ease),
                box-shadow .2s var(--ease);
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Gold primary */
.btn-gold {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold);
    box-shadow: 0 4px 14px rgba(201,168,76,.32);
}
.btn-gold:hover {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
    box-shadow: 0 6px 20px rgba(201,168,76,.42);
}

/* Gold outline */
.btn-outline-gold {
    background: transparent;
    color: var(--gold-dark);
    border-color: var(--gold);
}
.btn-outline-gold:hover {
    background: var(--gold-subtle);
    color: var(--gold-dark);
}

/* Dark/brown */
.btn-dark {
    background: var(--dark-brown);
    color: #fff;
    border-color: var(--dark-brown);
}
.btn-dark:hover {
    background: var(--brown);
}

/* Dark outline */
.btn-outline-dark {
    background: transparent;
    color: var(--dark-brown);
    border-color: var(--border-strong);
}
.btn-outline-dark:hover {
    background: var(--beige);
}

/* WhatsApp */
.btn-wa {
    background: var(--wa-green);
    color: #fff;
    border-color: var(--wa-green);
    box-shadow: 0 4px 14px rgba(37,211,102,.25);
}
.btn-wa:hover {
    background: var(--wa-dark);
    border-color: var(--wa-dark);
    box-shadow: 0 6px 20px rgba(37,211,102,.35);
}

/* Small buttons */
.btn-sm {
    padding: 8px 16px;
    font-size: .82rem;
    border-width: 1.5px;
}

/* Large buttons */
.btn-lg {
    padding: 15px 32px;
    font-size: 1rem;
}

/* Full width */
.btn-block {
    width: 100%;
}

/* ══════════════════════════════════════
   6. Badges
═══════════════════════════════════════ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .03em;
    line-height: 1.4;
}

.badge-available {
    background: var(--available-bg);
    color: var(--available);
}

.badge-preorder {
    background: var(--preorder-bg);
    color: var(--preorder);
}

.badge-booked {
    background: var(--booked-bg);
    color: var(--booked);
}

.badge-sold {
    background: var(--sold-bg);
    color: var(--sold);
}

.badge-free-upah {
    background: var(--gold-subtle);
    color: var(--gold-dark);
    border: 1px solid var(--gold-border);
}

.badge-featured {
    background: var(--dark-brown);
    color: var(--gold-light);
}

.badge-gold-916 {
    background: var(--gold-lighter);
    color: var(--gold-dark);
}

/* ══════════════════════════════════════
   7. Product Cards
═══════════════════════════════════════ */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow .25s var(--ease), transform .25s var(--ease),
                border-color .25s var(--ease);
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    border-color: var(--gold-border);
}

/* Card image */
.card-image-link {
    display: block;
    overflow: hidden;
    flex-shrink: 0;
}

.card-image-wrap {
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--beige);
    overflow: hidden;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s var(--ease);
}

.product-card:hover .card-img {
    transform: scale(1.04);
}

.card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--beige) 0%, var(--sand) 100%);
}

.card-placeholder .placeholder-initials {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--gold);
    opacity: .5;
    letter-spacing: .1em;
}

.card-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-badge-free {
    position: absolute;
    top: 8px;
    right: 8px;
}

/* Card body */
.card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6px;
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.card-category {
    font-size: .72rem;
    font-weight: 600;
    color: var(--gold-dark);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.card-item-code {
    font-size: .7rem;
    color: var(--text-muted);
    background: var(--beige);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    font-weight: 500;
}

.card-title {
    font-family: 'Playfair Display', serif;
    font-size: .92rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-title a { color: inherit; }
.card-title a:hover { color: var(--gold-dark); }

.card-attributes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.card-weight {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--beige);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.card-purity {
    font-size: .72rem;
    font-weight: 700;
    color: var(--gold-dark);
    background: var(--gold-lighter);
    padding: 2px 7px;
    border-radius: var(--radius-full);
}

.card-price-area {
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

.card-price {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark-brown);
    line-height: 1.2;
}

.card-price-preorder {
    font-size: .85rem;
    color: var(--preorder);
    font-weight: 600;
}

.card-price-quotation {
    font-size: .82rem;
    color: var(--text-secondary);
    font-style: italic;
}

.card-upah-label {
    font-size: .7rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.card-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.card-actions .btn {
    flex: 1;
    min-width: 0;
    font-size: .76rem;
    padding: 8px 10px;
}

/* ══════════════════════════════════════
   8. Category Cards
═══════════════════════════════════════ */
.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.category-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 12px;
    text-align: center;
    transition: box-shadow .22s var(--ease), transform .22s var(--ease),
                border-color .22s var(--ease);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.category-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-3px);
    border-color: var(--gold-border);
}

.category-card .cat-icon {
    font-size: 1.4rem;
    color: var(--gold);
    line-height: 1;
}

.category-card .cat-name {
    font-family: 'Playfair Display', serif;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.category-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
}

.category-scroll::-webkit-scrollbar { display: none; }

.category-scroll .category-card {
    min-width: 90px;
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* ══════════════════════════════════════
   10. Hero
═══════════════════════════════════════ */
.hero {
    position: relative;
    min-height: calc(100svh - var(--nav-h));
    background: var(--bg-hero);
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 60px 0;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 25% 75%, rgba(201,168,76,.09) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 25%, rgba(201,168,76,.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(92,61,30,.5) 0%, transparent 60%);
}

.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--gold-border) 50%, transparent 100%);
}

/* Decorative rings */
.hero-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(201,168,76,.08);
}

.hero-ring-1 {
    width: 320px;
    height: 320px;
    top: -80px;
    right: -80px;
}

.hero-ring-2 {
    width: 480px;
    height: 480px;
    bottom: -160px;
    left: -160px;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 24px;
}

.hero-eyebrow::before,
.hero-eyebrow::after {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--gold);
    opacity: .5;
}

.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.2rem, 6vw, 4rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 16px;
    letter-spacing: -.01em;
}

.hero-title .accent {
    color: var(--gold-light);
    display: block;
}

.hero-taglines {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    margin-bottom: 36px;
}

.hero-tag {
    font-size: .82rem;
    color: rgba(255,255,255,.6);
    display: flex;
    align-items: center;
    gap: 6px;
}

.hero-tag::before {
    content: '◆';
    color: var(--gold);
    font-size: .55rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* Hero scroll indicator */
.hero-scroll {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: .4;
    animation: bounce-scroll 2s ease-in-out infinite;
}

.hero-scroll span {
    font-size: .65rem;
    color: var(--gold-light);
    letter-spacing: .1em;
    text-transform: uppercase;
}

@keyframes bounce-scroll {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(5px); }
}

/* ══════════════════════════════════════
   11. Sections & Page Structure
═══════════════════════════════════════ */
.section {
    padding: 52px 0;
}

.section-alt {
    background: var(--bg-section-alt);
}

.section-dark {
    background: var(--dark-brown);
    color: #fff;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-header {
    text-align: center;
    margin-bottom: 32px;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

.section-eyebrow::before,
.section-eyebrow::after {
    content: '';
    display: block;
    width: 24px;
    height: 1px;
    background: var(--gold);
    opacity: .5;
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.section-dark .section-title { color: #fff; }

.section-subtitle {
    font-size: .9rem;
    color: var(--text-muted);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

.section-dark .section-subtitle { color: rgba(255,255,255,.55); }

/* Ornament line */
.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 16px 0;
}

.ornament::before,
.ornament::after {
    content: '';
    flex: 1;
    max-width: 80px;
    height: 1px;
    background: var(--gold);
    opacity: .3;
}

.ornament-diamond {
    color: var(--gold);
    font-size: .5rem;
}

/* ══════════════════════════════════════
   12. Homepage
═══════════════════════════════════════ */

/* Free Upah promo section */
.free-upah-section {
    background: linear-gradient(135deg, var(--dark-brown) 0%, #2F1E10 60%, #3A2415 100%);
    padding: 56px 0;
    position: relative;
    overflow: hidden;
}

.free-upah-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(201,168,76,.06) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 50%, rgba(201,168,76,.04) 0%, transparent 55%);
}

.free-upah-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

/* Limited / exclusive section */
.limited-section {
    background: var(--bg-section-alt);
    padding: 56px 0;
}

.limited-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--dark-brown);
    color: var(--gold-light);
    padding: 5px 14px;
    border-radius: var(--radius-full);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    margin-bottom: 12px;
}

/* Trust section — "Why Sri Temasek" */
.trust-section {
    background: var(--dark-brown);
    padding: 60px 0;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 36px;
}

.trust-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(201,168,76,.12);
    border-radius: var(--radius-lg);
    padding: 22px 18px;
    transition: background .22s var(--ease), border-color .22s var(--ease);
}

.trust-card:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(201,168,76,.24);
}

.trust-card-icon {
    font-size: 1.2rem;
    color: var(--gold);
    margin-bottom: 10px;
    line-height: 1;
}

.trust-card-title {
    font-family: 'Playfair Display', serif;
    font-size: .92rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.3;
}

.trust-card-text {
    font-size: .78rem;
    color: rgba(255,255,255,.45);
    line-height: 1.6;
}

/* Preorder info box (homepage) */
.preorder-info-box {
    background: var(--warm-white);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.preorder-info-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: var(--gold-lighter);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-dark);
    font-size: 1.1rem;
}

.preorder-info-title {
    font-family: 'Playfair Display', serif;
    font-size: .98rem;
    font-weight: 600;
    color: var(--dark-brown);
    margin-bottom: 6px;
}

.preorder-info-text {
    font-size: .84rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* WA CTA section */
.wa-cta-section {
    padding: 56px 0;
    background: linear-gradient(135deg, #1A0F07 0%, #2C1A0E 60%, #3A2010 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.wa-cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(201,168,76,.07) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 50%, rgba(201,168,76,.05) 0%, transparent 60%);
}

.wa-cta-content {
    position: relative;
    z-index: 1;
}

.wa-cta-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}

.wa-cta-sub {
    font-size: .9rem;
    color: rgba(255,255,255,.55);
    margin-bottom: 32px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

.wa-number {
    display: inline-block;
    font-size: .78rem;
    color: rgba(255,255,255,.35);
    margin-top: 16px;
    letter-spacing: .05em;
}

/* ══════════════════════════════════════
   13. Product Catalogue Page
═══════════════════════════════════════ */
.catalogue-page {
    padding-top: 28px;
}

.catalogue-header {
    padding: 28px 0 0;
}

.catalogue-title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.catalogue-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.catalogue-count {
    font-size: .82rem;
    color: var(--text-muted);
}

/* Filter bar */
.filter-bar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-top-row {
    display: flex;
    gap: 10px;
}

.filter-search-wrap {
    position: relative;
    flex: 1;
}

.filter-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.filter-input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-page);
    color: var(--text-primary);
    font-size: .88rem;
    transition: border-color .18s var(--ease);
    outline: none;
}

.filter-input:focus {
    border-color: var(--gold);
    background: var(--warm-white);
}

.filter-input::placeholder { color: var(--text-muted); }

.filter-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-page);
    color: var(--text-secondary);
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s, background .18s, color .18s;
    white-space: nowrap;
}

.filter-toggle-btn:hover,
.filter-toggle-btn.active {
    border-color: var(--gold);
    background: var(--gold-subtle);
    color: var(--gold-dark);
}

.filter-options {
    display: none;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-options.open {
    display: flex;
}

.filter-select {
    padding: 9px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-page);
    color: var(--text-secondary);
    font-size: .84rem;
    cursor: pointer;
    outline: none;
    transition: border-color .18s;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239B8878' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
}

.filter-select:focus { border-color: var(--gold); }

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-full);
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, background .15s, color .15s;
    background: var(--bg-page);
}

.filter-chip:hover {
    border-color: var(--gold);
    color: var(--gold-dark);
    background: var(--gold-subtle);
}

.filter-chip input { display: none; }

.filter-chip.selected {
    border-color: var(--gold);
    background: var(--gold-subtle);
    color: var(--gold-dark);
}

.filter-submit {
    padding: 9px 22px;
    background: var(--dark-brown);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s;
}

.filter-submit:hover { background: var(--brown); }

/* Active filters pills */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.active-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: var(--gold-subtle);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-full);
    font-size: .76rem;
    color: var(--gold-dark);
    font-weight: 500;
}

.active-filter-pill a {
    color: var(--gold-dark);
    font-weight: 700;
    line-height: 1;
}

/* ══════════════════════════════════════
   14. Product Detail Page
═══════════════════════════════════════ */
.product-detail {
    padding: 28px 0 40px;
}

.product-detail-grid {
    display: grid;
    gap: 32px;
}

/* Image gallery */
.gallery-main-wrap {
    position: relative;
    background: var(--beige);
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

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

.gallery-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--beige) 0%, var(--sand) 100%);
}

.gallery-placeholder .ph-initials {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--gold);
    opacity: .3;
    letter-spacing: .1em;
}

.gallery-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-top: 10px;
}

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

.gallery-thumb {
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .18s;
    background: var(--beige);
}

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

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

/* Stock badge on gallery */
.gallery-status-badge {
    position: absolute;
    top: 12px;
    left: 12px;
}

/* Product info panel */
.product-info-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.product-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .76rem;
    color: var(--text-muted);
}

.product-breadcrumb a { color: var(--text-muted); }
.product-breadcrumb a:hover { color: var(--gold-dark); }
.product-breadcrumb .sep { color: var(--border-strong); }

.product-detail-category {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--gold);
}

.product-detail-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.product-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.detail-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: var(--beige);
    border-radius: var(--radius-full);
    font-size: .78rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.detail-chip .chip-label {
    color: var(--text-muted);
    font-weight: 400;
}

.product-price-panel {
    background: var(--warm-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detail-price {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark-brown);
    line-height: 1;
}

.detail-price-sub {
    font-size: .8rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.detail-price-preorder {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    color: var(--preorder);
    font-weight: 600;
}

.detail-price-quotation {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    color: var(--text-secondary);
    font-style: italic;
}

.detail-upah-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: .74rem;
    font-weight: 600;
}

.upah-free {
    background: var(--gold-subtle);
    color: var(--gold-dark);
    border: 1px solid var(--gold-border);
}

.upah-included {
    background: var(--bg-section-alt);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.product-detail-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product-desc-section h4 {
    font-family: 'Playfair Display', serif;
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.product-desc-section p {
    font-size: .88rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.preorder-disclaimer {
    background: var(--gold-subtle);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius);
    padding: 12px 16px;
    font-size: .78rem;
    color: var(--gold-dark);
    line-height: 1.6;
}

/* Sticky mobile bottom bar */
.sticky-wa-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 150;
    padding: 10px 16px;
    background: var(--warm-white);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(44,26,14,.08);
    display: flex;
    gap: 10px;
    align-items: center;
}

.sticky-wa-bar .sticky-price {
    flex: 1;
    min-width: 0;
}

.sticky-wa-bar .sticky-price-label {
    font-size: .68rem;
    color: var(--text-muted);
    font-weight: 500;
}

.sticky-wa-bar .sticky-price-value {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark-brown);
    line-height: 1.1;
}

.sticky-wa-bar .btn {
    flex-shrink: 0;
}

/* Related products */
.related-section {
    padding: 44px 0;
    border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════
   15. Category Page
═══════════════════════════════════════ */
.category-hero {
    background: linear-gradient(135deg, var(--dark-brown) 0%, var(--brown) 100%);
    padding: 40px 0 32px;
    position: relative;
    overflow: hidden;
}

.category-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-border), transparent);
}

.category-hero-content { text-align: center; }

.category-hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    font-weight: 700;
    color: #fff;
}

.category-hero-sub {
    font-size: .85rem;
    color: var(--gold-light);
    opacity: .7;
    margin-top: 8px;
}

/* Category quick-nav (horizontal pills) */
.category-nav-scroll {
    overflow-x: auto;
    scrollbar-width: none;
    margin: 20px 0;
    padding-bottom: 4px;
}

.category-nav-scroll::-webkit-scrollbar { display: none; }

.category-nav-pills {
    display: flex;
    gap: 8px;
    white-space: nowrap;
}

.category-nav-pill {
    padding: 7px 18px;
    border-radius: var(--radius-full);
    font-size: .82rem;
    font-weight: 500;
    border: 1.5px solid var(--border);
    color: var(--text-secondary);
    background: var(--bg-card);
    transition: all .18s var(--ease);
    cursor: pointer;
    display: inline-block;
    flex-shrink: 0;
}

.category-nav-pill:hover,
.category-nav-pill.active {
    border-color: var(--gold);
    background: var(--gold-subtle);
    color: var(--gold-dark);
}

/* ══════════════════════════════════════
   16. Preorder Page
═══════════════════════════════════════ */
.preorder-hero {
    background: linear-gradient(135deg, #3A2010 0%, var(--dark-brown) 100%);
    padding: 44px 0 36px;
    text-align: center;
}

.preorder-notice {
    background: var(--warm-white);
    border: 1px solid var(--gold-border);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    padding: 18px 20px;
    font-size: .85rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 28px;
}

/* ══════════════════════════════════════
   17. Contact Page
═══════════════════════════════════════ */
.contact-page {
    padding: 44px 0;
}

.contact-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.contact-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--gold-lighter);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-dark);
    font-size: 1rem;
}

.contact-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.contact-value {
    font-size: .9rem;
    color: var(--text-primary);
    font-weight: 500;
}

.contact-wa-block {
    background: linear-gradient(135deg, var(--dark-brown) 0%, #3A2010 100%);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    margin-top: 28px;
}

/* ══════════════════════════════════════
   18. WhatsApp FAB
═══════════════════════════════════════ */
.wa-fab {
    position: fixed;
    right: 20px;
    bottom: 80px;          /* above mobile WA bar */
    z-index: 160;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--wa-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37,211,102,.4);
    transition: transform .22s var(--ease-spring), box-shadow .22s var(--ease);
    text-decoration: none;
}

.wa-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(37,211,102,.55);
}

.wa-fab svg {
    width: 26px;
    height: 26px;
}

/* Mobile WA sticky bar (the bottom bar shown on all pages) */
.wa-mobile-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 155;
    height: var(--wa-bar-h);
    background: var(--wa-green);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: .92rem;
    letter-spacing: .02em;
    box-shadow: 0 -2px 12px rgba(37,211,102,.3);
    transition: background .18s;
}

.wa-mobile-bar:hover { background: var(--wa-dark); color: #fff; }

/* On product-detail pages the mobile sticky bar is the detail WA bar;
   hide the generic WA mobile bar on those pages */
.has-detail-bar .wa-mobile-bar { display: none; }

/* ══════════════════════════════════════
   19. Footer
═══════════════════════════════════════ */
.site-footer {
    background: var(--dark-brown);
    color: rgba(255,255,255,.65);
    padding: 44px 0 24px;
    font-size: .84rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 36px;
}

.footer-brand .logo-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    display: block;
    margin-bottom: 3px;
}

.footer-brand .logo-sub {
    font-size: .62rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    display: block;
    margin-bottom: 14px;
}

.footer-brand p {
    font-size: .82rem;
    line-height: 1.7;
    color: rgba(255,255,255,.45);
    max-width: 280px;
}

.footer-col-title {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links a {
    color: rgba(255,255,255,.5);
    font-size: .84rem;
    transition: color .18s;
}

.footer-links a:hover { color: var(--gold-light); }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    font-size: .76rem;
    color: rgba(255,255,255,.25);
}

.footer-bottom a { color: var(--gold); }
.footer-bottom a:hover { color: var(--gold-light); }

/* ══════════════════════════════════════
   20. Pagination
═══════════════════════════════════════ */
.pagination-wrap {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.pagination-wrap nav .flex {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Override Laravel default pagination */
.pagination-wrap .page-item a,
.pagination-wrap .page-item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    font-size: .84rem;
    font-weight: 500;
    border: 1.5px solid var(--border);
    color: var(--text-secondary);
    background: var(--bg-card);
    transition: all .18s var(--ease);
}

.pagination-wrap .page-item a:hover {
    border-color: var(--gold);
    color: var(--gold-dark);
    background: var(--gold-subtle);
}

.pagination-wrap .page-item.active span {
    background: var(--dark-brown);
    border-color: var(--dark-brown);
    color: #fff;
}

.pagination-wrap .page-item.disabled span {
    opacity: .4;
    cursor: default;
}

/* ══════════════════════════════════════
   21. Utilities
═══════════════════════════════════════ */
.divider {
    height: 1px;
    background: var(--border);
    margin: 24px 0;
}

.divider-gold {
    background: linear-gradient(90deg, transparent, var(--gold-border), transparent);
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state .empty-icon {
    font-size: 2.5rem;
    color: var(--gold);
    opacity: .35;
    margin-bottom: 16px;
}

.empty-state h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.empty-state p {
    font-size: .85rem;
    color: var(--text-muted);
    margin-bottom: 24px;
}

/* Loading / lazy image fade */
img[loading="lazy"] { transition: opacity .3s ease; }

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--beige); }
::-webkit-scrollbar-thumb { background: var(--sand); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ══════════════════════════════════════
   22. Language Switcher
═══════════════════════════════════════ */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    margin-right: 6px;
}

.lang-btn {
    padding: 4px 9px;
    border-radius: var(--radius-sm);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--text-muted);
    transition: color .15s, background .15s;
    line-height: 1.4;
}

.lang-btn:hover { color: var(--gold-dark); background: var(--gold-subtle); }
.lang-btn.active { color: var(--gold-dark); background: var(--gold-subtle); }

.lang-sep {
    color: var(--border-strong);
    font-size: .65rem;
    font-weight: 300;
    user-select: none;
}

/* ══════════════════════════════════════
   23. Fullscreen Mobile Menu (drawer)
═══════════════════════════════════════ */

/* Replace max-height slide with right drawer */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 340px;
    z-index: 300;
    background: var(--warm-white);
    transform: translateX(100%);
    transition: transform .36s var(--ease);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* override old max-height rule */
    max-height: none !important;
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-xl);
}

.mobile-menu.open {
    transform: translateX(0);
    /* override old overflow:hidden open state */
    overflow-y: auto;
    max-height: none !important;
}

/* Backdrop overlay */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 299;
    background: rgba(44,26,14,.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .36s var(--ease), visibility .36s;
}

.mobile-menu-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Drawer header */
.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.mobile-menu-logo-block .mm-logo-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark-brown);
    display: block;
    line-height: 1.1;
}

.mobile-menu-logo-block .mm-logo-sub {
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    display: block;
}

.mobile-menu-close {
    width: 34px;
    height: 34px;
    border: none;
    background: var(--beige);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--dark-brown);
    line-height: 1;
    transition: background .15s;
    flex-shrink: 0;
}

.mobile-menu-close:hover { background: var(--sand); }

/* Drawer nav body */
.mobile-menu-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

.mobile-menu-nav ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
}

.mobile-menu-nav li a {
    display: block;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: .95rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: background .15s, color .15s;
}

.mobile-menu-nav li a:hover,
.mobile-menu-nav li a.active {
    background: var(--gold-subtle);
    color: var(--dark-brown);
}

.mobile-cat-label {
    padding: 12px 16px 4px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Drawer footer */
.mobile-menu-footer {
    padding: 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Override old .mobile-menu ul style */
.mobile-menu > ul { display: none; }

.mobile-wa-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    background: var(--wa-green);
    color: #fff;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: .95rem;
    transition: background .15s;
    text-decoration: none;
}

.mobile-wa-link:hover { background: var(--wa-dark); color: #fff; }

/* ══════════════════════════════════════
   24. Trade Your Gold Section
═══════════════════════════════════════ */
.trade-gold-section {
    background: var(--cream);
    padding: 64px 0;
    position: relative;
    overflow: hidden;
}

.trade-gold-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 10% 60%, rgba(201,168,76,.07) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 40%, rgba(201,168,76,.05) 0%, transparent 55%);
}

/* 3-step flow */
.trade-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 40px;
    position: relative;
    z-index: 1;
}

.trade-step {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 26px;
    transition: box-shadow .22s var(--ease), border-color .22s var(--ease),
                transform .22s var(--ease);
}

.trade-step:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--gold-border);
    transform: translateY(-2px);
}

.trade-step-num {
    font-family: 'Playfair Display', serif;
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--gold);
    opacity: .28;
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: -.03em;
}

.trade-step-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.25;
}

.trade-step-text {
    font-size: .84rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Connector arrow between steps */
.trade-step-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    position: relative;
    z-index: 1;
}

.trade-step-connector svg {
    color: var(--gold);
    opacity: .35;
    transform: rotate(90deg);
}

/* ══════════════════════════════════════
   25. Scroll-triggered Animations
═══════════════════════════════════════ */
.scroll-fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .65s var(--ease), transform .65s var(--ease);
}

.scroll-fade-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for grid children */
.scroll-fade-up.delay-1 { transition-delay: .08s; }
.scroll-fade-up.delay-2 { transition-delay: .16s; }
.scroll-fade-up.delay-3 { transition-delay: .24s; }
.scroll-fade-up.delay-4 { transition-delay: .32s; }
.scroll-fade-up.delay-5 { transition-delay: .40s; }
.scroll-fade-up.delay-6 { transition-delay: .48s; }

/* Prefers-reduced-motion: skip animations */
@media (prefers-reduced-motion: reduce) {
    .scroll-fade-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ══════════════════════════════════════
   26. Responsive Breakpoints
═══════════════════════════════════════ */

/* ── 480px+ ────────────────────────── */
@media (min-width: 480px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ── Tablet 640px+ ─────────────────── */
@media (min-width: 640px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .category-grid { grid-template-columns: repeat(4, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .trust-grid { grid-template-columns: repeat(3, 1fr); }

    /* Trade steps: horizontal flow */
    .trade-steps {
        display: grid;
        grid-template-columns: 1fr auto 1fr auto 1fr;
        align-items: center;
    }
    .trade-step-connector {
        height: auto;
        width: 28px;
    }
    .trade-step-connector svg { transform: rotate(0deg); }
}

/* ── Tablet 768px+ ─────────────────── */
@media (min-width: 768px) {
    :root { --nav-h: 72px; }

    body { padding-bottom: 0; }  /* No WA bar on tablet/desktop */

    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .category-grid { grid-template-columns: repeat(5, 1fr); }

    .nav-links { display: flex; }
    .nav-wa-btn { display: flex; }
    .nav-hamburger { display: none; }
    .mobile-menu { display: none !important; }

    .wa-mobile-bar { display: none; }
    .wa-fab { bottom: 28px; }

    .filter-options { display: flex !important; }
    .filter-toggle-btn { display: none; }

    .product-detail-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .sticky-wa-bar { display: none; }
    .has-detail-bar .wa-mobile-bar { display: none; }

    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }

    .hero-actions .btn { padding: 15px 36px; font-size: 1rem; }

    .catalogue-header { padding: 36px 0 0; }

    .filter-bar { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
    .filter-top-row { flex: 1; }
}

/* ── Desktop 1024px+ ─────────────────── */
@media (min-width: 1024px) {
    .product-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
    .category-grid { grid-template-columns: repeat(9, 1fr); }
    .trust-grid { grid-template-columns: repeat(3, 1fr); }

    .section { padding: 72px 0; }

    .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }

    .product-detail-grid { grid-template-columns: 1.1fr 1fr; gap: 48px; }
}

/* ── Wide 1280px+ ─────────────────── */
@media (min-width: 1280px) {
    .container { padding: 0 32px; }
}

/* ══════════════════════════════════════
   28. Cinematic Luxury Layer
   (Hero rework, nav refinement,
    muted WA, editorial cards)
═══════════════════════════════════════ */

/* ─── Hero: remove old padding (inner handles it) ─── */
.hero {
    padding: 0;
    align-items: stretch;
}

/* ─── Hero: grain texture overlay ─── */
.hero-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    z-index: 1;
}

/* ─── Hero: atmospheric gold glow orbs ─── */
.hero-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.hero-glow-1 {
    width: 560px;
    height: 560px;
    background: radial-gradient(circle, rgba(201,168,76,.22) 0%, transparent 62%);
    filter: blur(72px);
    top: -160px;
    right: 8%;
    z-index: 0;
}
.hero-glow-2 {
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(92,61,30,.55) 0%, transparent 65%);
    filter: blur(56px);
    bottom: 0;
    left: -4%;
    z-index: 0;
}

/* ─── Hero: third decorative ring ─── */
.hero-ring-3 {
    width: 180px;
    height: 180px;
    top: 25%;
    left: 6%;
    border-color: rgba(201,168,76,.07);
}

/* ─── Hero: inner split-layout container ─── */
.hero-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100svh - var(--nav-h));
    padding: 64px 24px 96px;
    gap: 48px;
}

/* Override old hero-content container sizing */
.hero .hero-content {
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
}

/* ─── Hero: jewellery visual panel ─── */
.hero-visual {
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 380px;
    height: 380px;
    flex-shrink: 0;
}

/* ─── Jewellery composition: concentric rings ─── */
.hero-jewel-frame {
    position: relative;
    width: 300px;
    height: 300px;
    animation: hero-jewel-float 7s ease-in-out infinite;
}

@keyframes hero-jewel-float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50%       { transform: translateY(-16px) rotate(.4deg); }
}

.hero-jewel-ring {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
}

.hero-jewel-ring-outer {
    width: 300px;
    height: 300px;
    margin-top: -150px;
    margin-left: -150px;
    border: 1px solid rgba(201,168,76,.2);
    animation: ring-rotate-cw 28s linear infinite;
}
/* Subtle dashed segment on outer ring for jewel feel */
.hero-jewel-ring-outer::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 20px;
    width: 48px;
    height: 2px;
    background: var(--gold);
    opacity: .5;
    border-radius: 1px;
    transform: rotate(22deg);
    transform-origin: center;
}

.hero-jewel-ring-mid {
    width: 220px;
    height: 220px;
    margin-top: -110px;
    margin-left: -110px;
    border: 1.5px solid rgba(201,168,76,.15);
    animation: ring-rotate-cw 18s linear infinite reverse;
}

.hero-jewel-ring-inner {
    width: 148px;
    height: 148px;
    margin-top: -74px;
    margin-left: -74px;
    border: 2px solid rgba(201,168,76,.32);
    background: radial-gradient(ellipse at 38% 32%,
        rgba(201,168,76,.18) 0%,
        rgba(44,26,14,.55) 50%,
        rgba(26,15,7,.8) 100%);
    box-shadow:
        0 0 60px rgba(201,168,76,.14),
        inset 0 0 48px rgba(201,168,76,.08);
}

/* Simulated stone / gem at center */
.hero-jewel-stone {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    margin-left: -24px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,
        rgba(226,201,126,.9) 0%,
        rgba(201,168,76,.6) 40%,
        rgba(154,124,46,.4) 100%);
    box-shadow:
        0 0 20px rgba(201,168,76,.5),
        0 0 4px rgba(255,255,255,.3) inset;
}

/* Central glow pulse */
.hero-jewel-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110px;
    height: 110px;
    margin-top: -55px;
    margin-left: -55px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,168,76,.55) 0%, transparent 68%);
    filter: blur(14px);
    pointer-events: none;
    animation: glow-breathe 4s ease-in-out infinite;
}

@keyframes glow-breathe {
    0%, 100% { opacity: .7; transform: translate(-50%,-50%) scale(1); }
    50%       { opacity: 1;  transform: translate(-50%,-50%) scale(1.12); }
}
/* Correct absolute centering — glow uses margin approach like rings */
.hero-jewel-glow {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: glow-breathe-fixed 4s ease-in-out infinite;
}
@keyframes glow-breathe-fixed {
    0%, 100% { opacity: .7; }
    50%       { opacity: 1; }
}

/* Glassmorphism backdrop behind jewel */
.hero-jewel-frame::before {
    content: '';
    position: absolute;
    inset: -28px;
    border-radius: 50%;
    background: rgba(201,168,76,.025);
    border: 1px solid rgba(201,168,76,.06);
    pointer-events: none;
}

@keyframes ring-rotate-cw {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ─── Hero: floating accent dots ─── */
.hero-accent {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.hero-accent-1 {
    width: 8px; height: 8px;
    background: var(--gold);
    opacity: .55;
    top: 12%;
    right: 6%;
    box-shadow: 0 0 8px rgba(201,168,76,.6);
    animation: hero-jewel-float 4.2s ease-in-out infinite;
}
.hero-accent-2 {
    width: 5px; height: 5px;
    background: var(--gold-light);
    opacity: .35;
    bottom: 18%;
    left: 4%;
    animation: hero-jewel-float 5.8s ease-in-out infinite .7s;
}
.hero-accent-3 {
    width: 6px; height: 6px;
    background: var(--gold);
    opacity: .25;
    top: 68%;
    right: 2%;
    animation: hero-jewel-float 3.9s ease-in-out infinite 1.4s;
}

/* ─── Jewellery label (below rings) ─── */
.hero-jewel-label {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hero-jewel-label span {
    font-family: 'Playfair Display', serif;
    font-size: .72rem;
    font-weight: 600;
    color: var(--gold-light);
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
}
.hero-jewel-label-sub {
    font-family: 'Inter', sans-serif !important;
    font-size: .58rem !important;
    font-weight: 400 !important;
    color: rgba(201,168,76,.5) !important;
    letter-spacing: .22em !important;
}

/* ─── Desktop hero: asymmetric split ─── */
@media (min-width: 768px) {
    .hero-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 80px 48px;
        gap: 56px;
    }
    .hero .hero-content {
        text-align: left;
        flex: 0 0 auto;
        max-width: 52%;
    }
    .hero .hero-eyebrow {
        justify-content: flex-start;
    }
    .hero .hero-taglines {
        justify-content: flex-start;
    }
    .hero .hero-actions {
        justify-content: flex-start;
    }
    .hero-visual {
        display: flex;
    }
    .hero-ring-1 {
        width: 520px;
        height: 520px;
        top: -160px;
        right: -120px;
    }
    .hero-ring-3 {
        width: 220px;
        height: 220px;
        top: 20%;
        left: 10%;
    }
    .hero-glow-1 {
        right: 35%;
        top: -120px;
    }
}

@media (min-width: 1024px) {
    .hero-inner {
        padding: 80px 60px;
        gap: 80px;
    }
    .hero .hero-content {
        max-width: 48%;
    }
    .hero-visual {
        width: 440px;
        height: 440px;
    }
    .hero-jewel-frame {
        width: 360px;
        height: 360px;
    }
    .hero-jewel-ring-outer  { width: 360px; height: 360px; margin-top: -180px; margin-left: -180px; }
    .hero-jewel-ring-mid    { width: 268px; height: 268px; margin-top: -134px; margin-left: -134px; }
    .hero-jewel-ring-inner  { width: 176px; height: 176px; margin-top: -88px;  margin-left: -88px;  }
}

/* ─── Nav WA button — muted dark emerald ─── */
.nav-wa-btn {
    background: #155741;
    border: 1px solid rgba(37,211,102,.18);
}
.nav-wa-btn:hover {
    background: #0f3f2d;
    transform: translateY(-1px);
}

/* ─── btn-wa everywhere — muted dark emerald ─── */
.btn-wa {
    background: #155741;
    border-color: #155741;
    box-shadow: 0 4px 14px rgba(21,87,65,.3);
}
.btn-wa:hover {
    background: #0f3f2d;
    border-color: #0f3f2d;
    box-shadow: 0 6px 20px rgba(21,87,65,.4);
}

/* Mobile WA bar stays bright green for brand recognition */
.wa-mobile-bar {
    background: linear-gradient(90deg, #1da851 0%, #25d366 60%, #1da851 100%);
}

/* Mobile menu WA link */
.mobile-menu .mobile-wa-link {
    background: #155741;
}
.mobile-menu .mobile-wa-link:hover {
    background: #0f3f2d;
}

/* ─── Nav links: refined typography + slide-underline hover ─── */
.nav-links li a {
    position: relative;
    font-size: .8rem;
    letter-spacing: .04em;
    padding: 8px 14px;
}
.nav-links li a::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 14px;
    right: 14px;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s var(--ease);
}
.nav-links li a:hover::after,
.nav-links li a.active::after {
    transform: scaleX(1);
}
.nav-links li a:hover,
.nav-links li a.active {
    background: transparent;
    color: var(--dark-brown);
}
.nav-dropdown-toggle {
    font-size: .8rem;
    letter-spacing: .04em;
}

/* ─── Logo refinements ─── */
.nav-logo .logo-name {
    font-size: 1.12rem;
    letter-spacing: .05em;
}
.nav-logo .logo-sub {
    font-size: .58rem;
    letter-spacing: .24em;
}

/* ─── Nav scrolled: richer glass effect ─── */
.site-nav.scrolled {
    background: rgba(250,247,242,.99);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom-color: rgba(201,168,76,.2);
    box-shadow: 0 2px 24px rgba(44,26,14,.12);
}

/* ─── Product card: editorial top-accent + position ─── */
.product-card {
    position: relative;
}
.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--gold) 40%, var(--gold-light) 50%, var(--gold) 60%, transparent 100%);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .4s var(--ease);
    z-index: 4;
    pointer-events: none;
}
.product-card:hover::before {
    transform: scaleX(1);
}

/* Richer hover shadow + warm lift */
.product-card:hover {
    box-shadow: 0 12px 40px rgba(44,26,14,.14), 0 2px 8px rgba(201,168,76,.08);
    border-color: rgba(201,168,76,.24);
}

/* Card body: luxury spacing */
.card-body {
    padding: 16px 16px 20px;
    gap: 5px;
}

/* Card title: Playfair, tighter tracking */
.card-title a {
    font-family: 'Playfair Display', serif;
    font-size: .96rem;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--text-primary);
}
.card-title a:hover {
    color: var(--gold-dark);
}

/* ─── Section rhythm: more breathing room ─── */
.section {
    padding: 68px 0;
}
.free-upah-section,
.limited-section,
.trust-section {
    padding: 72px 0;
}

/* ─── Mobile: premium spacing ─── */
@media (max-width: 767px) {
    .hero-inner {
        min-height: calc(100svh - var(--nav-h));
        padding: 56px 20px 100px;
        justify-content: center;
    }
    .section { padding: 52px 0; }
    .free-upah-section,
    .limited-section,
    .trust-section { padding: 56px 0; }
}

/* ─── Smooth mobile drawer animation ─── */
.mobile-menu {
    transition: max-height .36s cubic-bezier(.4,0,.2,1),
                opacity .28s var(--ease);
    opacity: 0;
}
.mobile-menu.open {
    opacity: 1;
}

/* ══════════════════════════════════════
   27. Visual Polish — Premium Luxury Layer
═══════════════════════════════════════ */

/* ── Nav scrolled state ───────────── */
.site-nav.scrolled {
    background: rgba(250,247,242,.99);
    box-shadow: 0 2px 20px rgba(0,0,0,.1);
    border-bottom-color: rgba(201,168,76,.22);
}

/* ── Hero ring boost ──────────────── */
.hero-ring {
    border-color: rgba(201,168,76,.14);
}

/* ── Product card image shimmer overlay ── */
.card-image-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(201,168,76,.09) 0%, transparent 55%);
    opacity: 0;
    transition: opacity .35s var(--ease);
    pointer-events: none;
}
.product-card:hover .card-image-wrap::after {
    opacity: 1;
}

/* ── Trust card icon — SVG container ── */
.trust-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(201,168,76,.1);
    border: 1px solid rgba(201,168,76,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    font-size: 0;    /* hide text-char fallbacks */
    flex-shrink: 0;
}
.trust-card-icon svg {
    width: 22px;
    height: 22px;
    color: var(--gold);
    flex-shrink: 0;
}

/* ── Product price panel gold accent ── */
.product-price-panel {
    border-color: rgba(201,168,76,.22);
}

/* ── WA FAB pulse ring animation ──── */
@keyframes wa-pulse {
    0%   { box-shadow: 0 4px 20px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,.35); }
    65%  { box-shadow: 0 4px 20px rgba(37,211,102,.4), 0 0 0 14px rgba(37,211,102,0); }
    100% { box-shadow: 0 4px 20px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,0); }
}
.wa-fab {
    animation: wa-pulse 2.8s ease-out infinite;
}
.wa-fab:hover {
    animation-play-state: paused;
}

/* ── WA mobile bar gradient ──────── */
.wa-mobile-bar {
    background: linear-gradient(90deg, #1da851 0%, #25d366 60%, #1da851 100%);
}

/* ── Category scroll min-width ────── */
.category-chip {
    min-width: 100px;
}

/* ── Image lazy-load fade-in ─────── */
img.lazy-img {
    opacity: 0;
    transition: opacity .45s ease;
}
img.lazy-img.loaded {
    opacity: 1;
}

/* ══════════════════════════════════════
   29. Daniel Wellington Direction
   — clean, bright, soft international luxury
═══════════════════════════════════════ */

/* 1. Color system: clean bright palette */
:root {
    --gold:           #C4A44A;
    --gold-light:     #D4B55E;
    --gold-lighter:   #F4EDD6;
    --gold-dark:      #8E7630;
    --gold-subtle:    rgba(196,164,74,.08);
    --gold-border:    rgba(196,164,74,.18);

    --cream:          #FAFAF8;
    --warm-white:     #FEFEFE;
    --beige:          #F4F1EB;
    --sand:           #EAE5D8;

    --text-primary:   #1A1A1A;
    --text-secondary: #4A4748;
    --text-muted:     #8C8886;
    --text-light:     #B8B4B0;

    --border:         rgba(26,26,26,.07);
    --border-strong:  rgba(26,26,26,.14);

    --bg-page:        #FAFAF8;
    --bg-card:        #FFFFFF;
    --bg-hero:        #F5F2EC;
    --bg-section-alt: #F0EDE7;

    --shadow-xs: 0 1px 4px rgba(0,0,0,.04);
    --shadow-sm: 0 2px 12px rgba(0,0,0,.06);
    --shadow:    0 4px 24px rgba(0,0,0,.07);
    --shadow-md: 0 8px 36px rgba(0,0,0,.08);
    --shadow-lg: 0 16px 52px rgba(0,0,0,.09);
    --shadow-xl: 0 24px 72px rgba(0,0,0,.11);
}

/* 2. Typography: Cormorant Garamond elegance */
.hero-title {
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    font-size: clamp(3rem, 8vw, 5.2rem);
    font-weight: 400;
    color: #1A1A1A;
    line-height: 1.08;
    letter-spacing: .005em;
    margin-bottom: 20px;
}
.hero-title .accent {
    font-style: italic;
    color: var(--gold-dark);
    display: block;
}
.section-title {
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 400;
    letter-spacing: .01em;
    color: var(--text-primary);
    line-height: 1.2;
}
.section-dark .section-title { color: #fff; }
.section-eyebrow {
    font-size: .62rem;
    letter-spacing: .28em;
    color: var(--gold-dark);
    font-weight: 600;
}
.section-subtitle {
    font-size: .88rem;
    color: var(--text-muted);
    line-height: 1.75;
    max-width: 460px;
}

/* 3. Hero: ivory editorial background */
.hero { background: var(--bg-hero); }
.hero::before {
    background:
        radial-gradient(ellipse at 78% 35%, rgba(196,164,74,.07) 0%, transparent 52%),
        radial-gradient(ellipse at 15% 85%, rgba(196,164,74,.04) 0%, transparent 52%);
}
.hero::after {
    background: linear-gradient(90deg, transparent 0%, rgba(196,164,74,.14) 50%, transparent 100%);
}
.hero-eyebrow { color: var(--gold-dark); }
.hero-tag     { color: rgba(26,26,26,.5); }
.hero-tag::before { color: var(--gold-dark); }
.hero-scroll  { opacity: .5; }
.hero-scroll span { color: var(--gold-dark); }
.hero-eyebrow::before,
.hero-eyebrow::after { background: var(--gold-dark); opacity: .4; }

/* Glow orbs: adjusted for light bg */
.hero-glow-1 {
    background: radial-gradient(circle, rgba(196,164,74,.13) 0%, transparent 65%);
    filter: blur(88px);
    opacity: .75;
}
.hero-glow-2 {
    background: radial-gradient(circle, rgba(232,222,204,.9) 0%, transparent 65%);
    filter: blur(72px);
}
.hero-grain { opacity: .018; }

/* Rings: dark on ivory */
.hero-ring   { border-color: rgba(26,26,26,.055); }
.hero-ring-1 { border-color: rgba(26,26,26,.045); }
.hero-ring-2 { border-color: rgba(26,26,26,.035); }

/* Jewellery visual: light bg version */
.hero-jewel-ring-outer { border-color: rgba(196,164,74,.24); }
.hero-jewel-ring-mid   { border-color: rgba(196,164,74,.17); }
.hero-jewel-ring-inner {
    border-color: rgba(196,164,74,.42);
    background: radial-gradient(ellipse at 38% 32%,
        #FFFEF9 0%, #F5EFE3 55%, #E8DEC8 100%);
    box-shadow:
        0 0 48px rgba(196,164,74,.16),
        0 6px 24px rgba(0,0,0,.07),
        inset 0 1px 20px rgba(196,164,74,.08);
}
.hero-jewel-stone {
    background: radial-gradient(circle at 35% 30%,
        rgba(244,232,196,1) 0%,
        rgba(196,164,74,.75) 45%,
        rgba(142,118,48,.55) 100%);
    box-shadow:
        0 0 18px rgba(196,164,74,.45),
        0 0 8px rgba(255,255,255,.7) inset;
}
.hero-jewel-glow {
    background: radial-gradient(circle, rgba(196,164,74,.5) 0%, transparent 68%);
    filter: blur(18px);
}
.hero-jewel-frame::before {
    background: rgba(196,164,74,.025);
    border-color: rgba(196,164,74,.09);
}
.hero-jewel-ring-outer::after { opacity: .35; }
.hero-accent-1 { opacity: .4; box-shadow: 0 0 6px rgba(196,164,74,.45); }
.hero-accent-2 { opacity: .22; }
.hero-accent-3 { opacity: .16; }
.hero-jewel-label span { color: var(--gold-dark); }
.hero-jewel-label-sub  { color: rgba(142,118,48,.45) !important; }

/* 4. Nav: minimal clean on ivory pages */
.site-nav {
    background: rgba(250,250,248,.93);
    border-bottom-color: rgba(26,26,26,.055);
    box-shadow: none;
}
.site-nav.scrolled {
    background: rgba(250,250,248,.98);
    border-bottom-color: rgba(26,26,26,.08);
    box-shadow: 0 1px 24px rgba(0,0,0,.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.nav-links li a,
.nav-dropdown-toggle { color: var(--text-secondary); }
.nav-links li a:hover,
.nav-links li a.active,
.nav-dropdown:hover .nav-dropdown-toggle { color: #1A1A1A; background: transparent; }

/* 5. Product grid: DW 2-3 cols */
.product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* 6. Product cards: minimal zero-radius editorial */
.product-card {
    border-radius: 0;
    border-color: rgba(26,26,26,.07);
    box-shadow: none;
    background: var(--bg-card);
}
.product-card:hover {
    box-shadow: 0 8px 40px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.04);
    border-color: rgba(26,26,26,.1);
    transform: translateY(-2px);
}
.card-image-link { border-radius: 0; overflow: hidden; }
.card-image-wrap { border-radius: 0; background: var(--beige); }
.card-body { padding: 16px 2px 22px; gap: 4px; }
.card-meta { margin-bottom: 5px; }
.card-category {
    font-size: .6rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 500;
}
.card-item-code { font-size: .6rem; color: var(--text-light); }
.card-title { margin-bottom: 4px; }
.card-title a {
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .005em;
    color: var(--text-primary);
    line-height: 1.3;
}
.card-title a:hover { color: var(--gold-dark); }
.card-purity {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--gold-dark);
}
.card-price {
    font-size: .88rem;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: .01em;
}
.card-upah-label { font-size: .65rem; color: var(--text-muted); letter-spacing: .04em; }

/* Card actions: elegant outlined DW style */
.card-actions { gap: 8px; margin-top: 10px; }
.card-actions .btn {
    border-radius: 0;
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .06em;
    padding: 9px 14px;
    border-width: 1px;
}
.card-actions .btn-wa {
    background: transparent;
    color: #155741;
    border-color: rgba(21,87,65,.3);
    box-shadow: none;
}
.card-actions .btn-wa:hover { background: #155741; color: #fff; box-shadow: none; }
.card-actions .btn-outline-dark {
    background: transparent;
    color: var(--text-secondary);
    border-color: rgba(26,26,26,.18);
}
.card-actions .btn-outline-dark:hover { background: var(--beige); }

/* Badges: minimal DW */
.badge {
    font-size: .6rem;
    letter-spacing: .06em;
    padding: 3px 7px;
    border-radius: 1px;
    font-weight: 600;
}
.badge-available { background: rgba(26,122,74,.07); color: #1A6A42; }
.badge-featured  { background: rgba(196,164,74,.1); color: var(--gold-dark); border: 1px solid rgba(196,164,74,.2); }

/* 7. Section rhythm: generous DW spacing */
.section        { padding: 80px 0; }
.section-alt    { background: var(--bg-section-alt); }
.section-header { margin-bottom: 48px; }
.limited-section { padding: 80px 0; background: var(--bg-section-alt); }
.trade-gold-section { background: var(--warm-white); padding: 88px 0; }

/* 8. Dark sections: charcoal not red-brown */
.free-upah-section {
    background: #1C1C1C;
    padding: 80px 0;
}
.free-upah-section::before {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(196,164,74,.04) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 50%, rgba(196,164,74,.025) 0%, transparent 55%);
}
.trust-section { background: #1C1C1C; padding: 88px 0; }
.trust-grid { margin-top: 48px; }
.trust-card { border-radius: 0; border-color: rgba(255,255,255,.07); padding: 28px 22px; }
.trust-card:hover { border-color: rgba(196,164,74,.2); background: rgba(255,255,255,.05); }
.trust-card-title {
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-size: 1rem;
    font-weight: 500;
}
.section-dark { background: #1C1C1C; }
.wa-cta-section { background: #1C1C1C; padding: 88px 0; }
.wa-cta-title {
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 400;
    letter-spacing: .01em;
}

/* 9. Buttons: DW refined */
.btn-dark { background: #1C1C1C; border-color: #1C1C1C; }
.btn-dark:hover { background: #2A2A2A; }
.btn-wa { background: #155741; border-color: #155741; box-shadow: none; }
.btn-wa:hover { background: #0f3f2d; border-color: #0f3f2d; box-shadow: none; }
.btn-gold { box-shadow: 0 3px 14px rgba(196,164,74,.28); }
.btn-gold:hover { box-shadow: 0 5px 20px rgba(196,164,74,.38); }
.btn-outline-gold { border-radius: 0; font-size: .82rem; letter-spacing: .06em; font-weight: 500; }

/* 10. Trade section: editorial */
.trade-step { border-radius: 0; border-color: rgba(26,26,26,.07); padding: 32px 28px; }
.trade-step:hover { border-color: rgba(196,164,74,.22); transform: translateY(-2px); }
.trade-step-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3rem;
    font-weight: 300;
    color: var(--gold-dark);
    opacity: .4;
    letter-spacing: -.02em;
}
.trade-step-title {
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 500;
}

/* 11. Product detail: refined */
.product-price-panel { border-radius: 0; border-color: rgba(26,26,26,.08); }
.detail-price {
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-size: 2.2rem;
    font-weight: 400;
}

/* 12. Responsive grid */
@media (min-width: 640px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 768px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .section { padding: 88px 0; }
    .section-header { margin-bottom: 52px; }
}
@media (min-width: 1024px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
    .section { padding: 100px 0; }
    .free-upah-section, .trust-section, .wa-cta-section { padding: 100px 0; }
    .trade-gold-section, .limited-section { padding: 100px 0; }
    .section-header { margin-bottom: 60px; }
    .trust-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* 13. Mobile: DW premium mobile feel */
@media (max-width: 767px) {
    .section { padding: 56px 0; }
    .section-header { margin-bottom: 36px; }
    .free-upah-section,
    .limited-section,
    .trust-section,
    .wa-cta-section,
    .trade-gold-section { padding: 60px 0; }
    .card-actions .btn { padding: 11px 16px; }
    .hero-inner { justify-content: center; }
    .trust-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* 14. Global base */
body  { background: var(--bg-page); color: var(--text-primary); }
h1, h2, h3 { color: var(--text-primary); }

/* ══════════════════════════════════════
   30. Daniel Wellington — Final Direction
   Clean Scandinavian luxury ecommerce.
   Overrides all prior sections.
═══════════════════════════════════════ */

/* ── 1. Core tokens ──────────────────── */
:root {
    --nav-h:          56px;
    --gold:           #B8962E;
    --gold-light:     #CBA94A;
    --gold-lighter:   #F2E8CC;
    --gold-dark:      #8A6E1E;
    --gold-subtle:    rgba(184,150,46,.06);
    --gold-border:    rgba(184,150,46,.14);
    --text-primary:   #1A1A1A;
    --text-secondary: #6A6460;
    --text-muted:     #9A9490;
    --text-light:     #C0BCB8;
    --bg-page:        #FFFFFF;
    --bg-hero:        #F5F0EB;
    --bg-section-alt: #F7F4EF;
    --bg-card:        #FFFFFF;
    --border:         rgba(0,0,0,.08);
    --border-strong:  rgba(0,0,0,.14);
    --shadow-xs: 0 1px 4px  rgba(0,0,0,.04);
    --shadow-sm: 0 2px 12px rgba(0,0,0,.05);
    --shadow:    0 4px 20px rgba(0,0,0,.07);
    --shadow-md: 0 8px 32px rgba(0,0,0,.08);
    --shadow-lg: 0 16px 48px rgba(0,0,0,.09);
    --shadow-xl: 0 24px 64px rgba(0,0,0,.10);
}
body { background: #FFFFFF; color: #1A1A1A; font-family: 'Inter', sans-serif; }
h1, h2, h3, h4 { color: #1A1A1A; }
a { color: inherit; }

/* ── 2. Navigation ───────────────────── */
.site-nav {
    height: 56px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid rgba(0,0,0,.07);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.site-nav.scrolled {
    background: #FFFFFF;
    border-bottom-color: rgba(0,0,0,.09);
    box-shadow: 0 1px 20px rgba(0,0,0,.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.nav-container { height: 56px; gap: 24px; }

.nav-logo { gap: 5px; }
.logo-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: #1A1A1A;
    text-transform: uppercase;
}
.logo-sub {
    font-family: 'Inter', sans-serif;
    font-size: .55rem;
    letter-spacing: .28em;
    color: #9A9490;
    text-transform: uppercase;
    font-weight: 400;
}
.nav-links { gap: 24px; }
.nav-links li a,
.nav-dropdown-toggle {
    font-family: 'Inter', sans-serif;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 500;
    color: #6A6460;
    background: transparent !important;
    padding: 3px 0;
    border-radius: 0;
    border-bottom: 1px solid transparent;
    transition: color .18s, border-color .18s;
}
.nav-links li a:hover,
.nav-links li a.active,
.nav-dropdown:hover .nav-dropdown-toggle {
    color: #1A1A1A;
    background: transparent !important;
    border-bottom-color: rgba(26,26,26,.22);
}
.nav-dropdown-toggle svg { opacity: .45; width: 9px; height: 9px; }
.nav-dropdown-menu {
    border: 1px solid rgba(0,0,0,.09);
    border-radius: 0;
    box-shadow: 0 8px 32px rgba(0,0,0,.08);
    background: #FFFFFF;
}
.nav-dropdown-menu a {
    font-family: 'Inter', sans-serif;
    font-size: .7rem;
    letter-spacing: .06em;
    color: #6A6460;
    padding: 9px 18px;
    border-radius: 0;
}
.nav-dropdown-menu a:hover { color: #1A1A1A; background: #F7F4EF; }

.nav-wa-btn {
    font-family: 'Inter', sans-serif;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 9px 18px;
    background: #1A1A1A;
    color: #FFFFFF !important;
    border: 1px solid #1A1A1A;
    border-radius: 0;
    box-shadow: none;
    gap: 7px;
    transition: background .18s, border-color .18s;
}
.nav-wa-btn:hover { background: #333; border-color: #333; color: #FFFFFF !important; box-shadow: none; }
.nav-wa-btn svg { width: 12px; height: 12px; opacity: .8; }

.nav-hamburger span { background: #1A1A1A; height: 1.5px; }

/* ── 3. Hero ─────────────────────────── */
.hero {
    background: #F5F0EB;
    padding: 80px 0;
    min-height: unset;
    position: relative;
    overflow: hidden;
}
.hero::before, .hero::after { display: none; }

/* Kill any leftover decorative divs */
.hero-grain,
.hero-glow, .hero-glow-1, .hero-glow-2,
.hero-ring, .hero-ring-1, .hero-ring-2, .hero-ring-3,
.hero-visual,
.hero-jewel-frame,
.hero-jewel-ring, .hero-jewel-ring-outer,
.hero-jewel-ring-mid, .hero-jewel-ring-inner,
.hero-jewel-stone, .hero-jewel-glow, .hero-jewel-label,
.hero-accent, .hero-accent-1, .hero-accent-2, .hero-accent-3,
.hero-scroll { display: none !important; }

/* Hero two-column layout */
.hero-inner {
    display: flex;
    align-items: center;
    gap: 64px;
    min-height: unset;
    padding: 0;
    flex-direction: column;
}
@media (min-width: 900px) {
    .hero-inner { flex-direction: row; }
}

.hero-content {
    flex: 1 1 auto;
    max-width: 520px;
    margin: 0;
    padding: 0;
    text-align: left;
}
@media (max-width: 899px) {
    .hero-content { text-align: center; max-width: 100%; }
}

.hero-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: .62rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    font-weight: 600;
    color: #8A6E1E;
    margin-bottom: 18px;
    display: block;
}
.hero-eyebrow::before, .hero-eyebrow::after { display: none; }

.hero-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
    font-weight: 400;
    color: #1A1A1A;
    line-height: 1.1;
    letter-spacing: -.01em;
    margin-bottom: 18px;
}
.hero-title .accent {
    font-style: italic;
    color: #8A6E1E;
    display: block;
    font-weight: 300;
}

.hero-taglines {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 36px;
    align-items: center;
}
@media (max-width: 899px) {
    .hero-taglines { justify-content: center; }
}
.hero-tag {
    font-family: 'Inter', sans-serif;
    font-size: .76rem;
    color: #9A9490;
    font-weight: 400;
    letter-spacing: .02em;
    background: none;
    border: none;
    padding: 0;
}
.hero-tag::before { display: none; }
.hero-tag + .hero-tag::before {
    content: '\00B7';
    display: inline-block;
    margin: 0 10px;
    color: #C0BCB8;
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 0;
}
@media (max-width: 899px) {
    .hero-actions { justify-content: center; }
}
.hero-actions .btn-gold {
    background: #1A1A1A;
    border: 1px solid #1A1A1A;
    color: #FFFFFF;
    font-size: .76rem;
    letter-spacing: .12em;
    font-weight: 500;
    padding: 13px 28px;
    border-radius: 0;
    box-shadow: none;
    text-transform: uppercase;
}
.hero-actions .btn-gold:hover { background: #333; border-color: #333; box-shadow: none; }
.hero-actions .btn-wa {
    background: transparent;
    border: 1px solid rgba(26,26,26,.22);
    color: #1A1A1A;
    font-size: .76rem;
    letter-spacing: .12em;
    font-weight: 500;
    padding: 13px 28px;
    border-radius: 0;
    box-shadow: none;
    text-transform: uppercase;
}
.hero-actions .btn-wa:hover { background: rgba(26,26,26,.05); box-shadow: none; }
.hero-actions .btn-wa svg { display: none; }

/* Editorial visual panel */
.hero-vp {
    flex: 0 0 300px;
    height: 380px;
    background: #EDE6DB;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
@media (max-width: 899px) { .hero-vp { display: none; } }

.hero-vp-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 1;
    gap: 0;
}
.hero-vp-karat {
    font-family: 'Cormorant Garamond', serif;
    font-size: 7.5rem;
    font-weight: 300;
    color: #1A1A1A;
    line-height: 1;
    letter-spacing: -.03em;
    opacity: .07;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    pointer-events: none;
    user-select: none;
}
.hero-vp-label {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.2rem;
    font-weight: 400;
    color: #1A1A1A;
    letter-spacing: .08em;
    margin-bottom: 14px;
}
.hero-vp-rule {
    width: 36px;
    height: 1px;
    background: rgba(26,26,26,.22);
    margin: 0 auto 14px;
}
.hero-vp-brand {
    font-family: 'Inter', sans-serif;
    font-size: .6rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #6A6460;
    font-weight: 500;
    display: block;
    margin-bottom: 4px;
}
.hero-vp-country {
    font-family: 'Inter', sans-serif;
    font-size: .54rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #9A9490;
    font-weight: 400;
}

/* ── 4. Shared typography ────────────── */
.section-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: .62rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    font-weight: 600;
    color: #8A6E1E;
    margin-bottom: 12px;
    display: block;
}
.section-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.65rem, 3vw, 2.2rem);
    font-weight: 400;
    letter-spacing: .01em;
    color: #1A1A1A;
    line-height: 1.2;
}
.section-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: .82rem;
    color: #9A9490;
    line-height: 1.75;
    max-width: 440px;
    font-weight: 400;
    margin: 12px auto 0;
}
.section-header {
    text-align: center;
    margin-bottom: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.ornament { display: none; }

/* ── 5. Buttons ──────────────────────── */
.btn {
    font-family: 'Inter', sans-serif;
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 12px 24px;
    border-radius: 0;
    border: 1px solid transparent;
    transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}
.btn-sm { padding: 9px 18px; font-size: .68rem; }
.btn-lg { padding: 14px 32px; font-size: .78rem; }

.btn-dark  { background: #1A1A1A; border-color: #1A1A1A; color: #FFFFFF; box-shadow: none; }
.btn-dark:hover { background: #333; border-color: #333; box-shadow: none; }

.btn-gold  { background: #1A1A1A; border-color: #1A1A1A; color: #FFFFFF; box-shadow: none; }
.btn-gold:hover { background: #333; border-color: #333; box-shadow: none; }

.btn-wa    { background: #1A1A1A; border-color: #1A1A1A; color: #FFFFFF; box-shadow: none; }
.btn-wa:hover { background: #333; border-color: #333; box-shadow: none; }
.btn-wa svg { width: 14px; height: 14px; }

.btn-outline-dark {
    background: transparent;
    border-color: rgba(26,26,26,.2);
    color: #1A1A1A;
    box-shadow: none;
}
.btn-outline-dark:hover { background: rgba(26,26,26,.04); border-color: rgba(26,26,26,.3); box-shadow: none; }

.btn-outline-gold {
    background: transparent;
    border-color: rgba(26,26,26,.2);
    color: #1A1A1A;
    box-shadow: none;
    border-radius: 0;
}
.btn-outline-gold:hover { background: rgba(26,26,26,.04); box-shadow: none; }

/* ── 6. Product grid ─────────────────── */
.product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: rgba(0,0,0,.06);
}
@media (min-width: 1024px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── 7. Product cards ────────────────── */
.product-card {
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: #FFFFFF;
    transition: background .15s;
}
.product-card:hover { background: #FAF8F5; transform: none; box-shadow: none; }
.card-image-link { border-radius: 0; overflow: hidden; }
.card-image-wrap { border-radius: 0; background: #F2EDE5; aspect-ratio: 3/4; }
.card-img { transition: transform .5s var(--ease); }
.product-card:hover .card-img { transform: scale(1.04); }

.card-body { padding: 14px 16px 20px; gap: 3px; }
.card-meta { margin-bottom: 4px; display: flex; gap: 6px; align-items: center; }
.card-category {
    font-family: 'Inter', sans-serif;
    font-size: .58rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #9A9490;
    font-weight: 500;
}
.card-item-code { font-size: .58rem; color: #C0BCB8; letter-spacing: .04em; }
.card-title { margin-bottom: 6px; }
.card-title a {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: .01em;
    color: #1A1A1A;
    line-height: 1.35;
}
.card-title a:hover { color: #8A6E1E; }
.card-purity {
    font-family: 'Inter', sans-serif;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .1em;
    color: #8A6E1E;
    text-transform: uppercase;
}
.card-price { font-family: 'Inter', sans-serif; font-size: .85rem; font-weight: 500; color: #1A1A1A; }
.card-upah-label { font-family: 'Inter', sans-serif; font-size: .6rem; color: #9A9490; letter-spacing: .03em; }
.card-price-area { margin: 4px 0; }

.card-actions { gap: 6px; margin-top: 10px; flex-direction: column; }
.card-actions .btn {
    border-radius: 0;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .08em;
    padding: 9px 14px;
    border-width: 1px;
    width: 100%;
    justify-content: center;
}
.card-actions .btn-wa { background: #1A1A1A; color: #FFFFFF; border-color: #1A1A1A; box-shadow: none; }
.card-actions .btn-wa:hover { background: #333; border-color: #333; box-shadow: none; }
.card-actions .btn-wa svg { width: 12px; height: 12px; }
.card-actions .btn-outline-dark { background: transparent; color: #6A6460; border-color: rgba(0,0,0,.12); }
.card-actions .btn-outline-dark:hover { background: rgba(0,0,0,.03); color: #1A1A1A; }

/* Badges: minimal */
.badge { border-radius: 0; font-size: .58rem; letter-spacing: .06em; padding: 3px 7px; font-weight: 600; }
.badge-available { background: rgba(0,0,0,.05); color: #4A4A4A; }
.badge-preorder  { background: rgba(0,0,0,.05); color: #6A6460; border: none; }
.badge-featured  { background: transparent; color: #8A6E1E; border: 1px solid rgba(184,150,46,.2); }
.badge-free-upah { background: #1A1A1A; color: #FFFFFF; border: none; }

/* ── 8. Sections ─────────────────────── */
.section { padding: 80px 0; background: #FFFFFF; }
.section-alt { background: #F7F4EF; }
@media (min-width: 768px)  { .section { padding: 88px 0; } .section-header { margin-bottom: 56px; } }
@media (min-width: 1024px) { .section { padding: 100px 0; } .section-header { margin-bottom: 64px; } }
@media (max-width: 767px)  { .section { padding: 56px 0; } .section-header { margin-bottom: 36px; } }

/* ── 9. Category cards ───────────────── */
.category-card {
    border-radius: 0;
    border: 1px solid rgba(0,0,0,.08);
    background: #FFFFFF;
    padding: 16px 14px;
    transition: border-color .15s, background .15s;
}
.category-card:hover { border-color: rgba(0,0,0,.18); background: #F7F4EF; }
.cat-icon { font-size: 1.1rem; }
.cat-name {
    font-family: 'Inter', sans-serif;
    font-size: .62rem;
    letter-spacing: .1em;
    font-weight: 500;
    text-transform: uppercase;
    color: #6A6460;
}

/* ── 10. Free Upah (dark) ────────────── */
.free-upah-section { background: #1A1A1A; padding: 80px 0; }
.free-upah-section::before { display: none; }
.free-upah-section .section-title { color: #FFFFFF; }
.free-upah-section .section-subtitle { color: rgba(255,255,255,.4); }
.free-upah-eyebrow { font-family: 'Inter', sans-serif; font-size: .62rem; letter-spacing: .28em; font-weight: 600; color: #B8962E; text-transform: uppercase; }

/* Product grid inside dark section: white cards on dark bg */
.free-upah-section .product-grid { background: rgba(255,255,255,.08); }
.free-upah-section .product-card { background: #FFFFFF; }
.free-upah-section .product-card:hover { background: #FAF8F5; }
.free-upah-section .card-badges { /* adjust if needed */ }

/* ── 11. Limited section ─────────────── */
.limited-section { background: #F7F4EF; padding: 80px 0; }
.limited-badge-pill {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: .6rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 600;
    color: #1A1A1A;
    border: 1px solid rgba(0,0,0,.15);
    padding: 6px 16px;
    margin-bottom: 20px;
    background: transparent;
    border-radius: 0;
}

/* ── 12. Trade section ───────────────── */
.trade-gold-section { background: #FFFFFF; padding: 88px 0; }
.trade-steps { gap: 0; background: rgba(0,0,0,.05); }
.trade-step {
    border-radius: 0;
    border: none;
    background: #FFFFFF;
    padding: 36px 28px;
    transition: background .15s;
}
.trade-step:hover { background: #FAF8F5; transform: none; border-color: transparent; }
.trade-step-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 4rem;
    font-weight: 300;
    color: #1A1A1A;
    opacity: .07;
    letter-spacing: -.02em;
    line-height: 1;
    margin-bottom: 20px;
}
.trade-step-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: #1A1A1A;
    margin-bottom: 10px;
    letter-spacing: .01em;
}
.trade-step-text { font-family: 'Inter', sans-serif; font-size: .78rem; color: #9A9490; line-height: 1.7; }
.trade-step-connector svg { color: rgba(0,0,0,.18); }

/* ── 13. Pre-order box ───────────────── */
.preorder-info-box {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 0;
    padding: 32px 36px;
    background: #F7F4EF;
}
.preorder-info-icon { font-size: 1.1rem; color: #8A6E1E; opacity: .55; }
.preorder-info-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: #1A1A1A;
    margin-bottom: 8px;
}
.preorder-info-text { font-family: 'Inter', sans-serif; font-size: .8rem; color: #6A6460; line-height: 1.7; }

/* ── 14. Trust section (dark) ────────── */
.trust-section { background: #1A1A1A; padding: 88px 0; }
.trust-section .section-title { color: #FFFFFF; }
.trust-section .section-subtitle { color: rgba(255,255,255,.4); }
.trust-grid { margin-top: 0; gap: 0; background: rgba(255,255,255,.06); }
.trust-card {
    border-radius: 0;
    border: none;
    border-right: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: 32px 26px;
    background: transparent;
    transition: background .18s;
}
.trust-card:hover { background: rgba(255,255,255,.03); }
.trust-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 0;
    background: transparent;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trust-card-icon svg { width: 22px; height: 22px; color: rgba(255,255,255,.38); }
.trust-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: .95rem;
    font-weight: 500;
    color: #FFFFFF;
    letter-spacing: .01em;
    margin-bottom: 8px;
}
.trust-card-text { font-family: 'Inter', sans-serif; font-size: .76rem; color: rgba(255,255,255,.38); line-height: 1.7; }

/* Trust eyebrow (inline style override) */
.trust-section .section-header p[style] { color: #B8962E !important; }

/* ── 15. WA CTA section (dark) ───────── */
.wa-cta-section { background: #1A1A1A; padding: 88px 0; }
.wa-cta-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 400;
    color: #FFFFFF;
    letter-spacing: .01em;
}
.wa-cta-sub { font-family: 'Inter', sans-serif; color: rgba(255,255,255,.4); font-size: .82rem; line-height: 1.7; }
.wa-number { color: rgba(255,255,255,.28); font-family: 'Inter', sans-serif; font-size: .76rem; letter-spacing: .12em; }
.wa-cta-section .btn-wa {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #1A1A1A;
    box-shadow: none;
}
.wa-cta-section .btn-wa:hover { background: rgba(255,255,255,.9); border-color: rgba(255,255,255,.9); box-shadow: none; }
.wa-cta-section .btn-wa svg { color: #1A1A1A; }
.wa-cta-section p[style] { color: #B8962E !important; }

/* ── 16. Footer ──────────────────────── */
.site-footer { background: #1A1A1A; }

/* ── 17. Mobile menu ─────────────────── */
.mobile-menu { background: #FFFFFF; }
.mobile-menu-header { border-bottom: 1px solid rgba(0,0,0,.07); }
.mm-logo-name {
    font-family: 'Cormorant Garamond', serif;
    color: #1A1A1A;
    font-size: 1.05rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.mm-logo-sub { font-family: 'Inter', sans-serif; font-size: .55rem; letter-spacing: .25em; color: #9A9490; }
.mobile-menu-close { color: #1A1A1A; }
.mobile-menu-nav li a {
    font-family: 'Inter', sans-serif;
    color: #6A6460;
    font-size: .76rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 14px 24px;
    border-radius: 0;
}
.mobile-menu-nav li a:hover,
.mobile-menu-nav li a.active { color: #1A1A1A; background: #F7F4EF; }
.mobile-cat-label {
    font-family: 'Inter', sans-serif;
    font-size: .58rem;
    letter-spacing: .22em;
    color: #9A9490;
    text-transform: uppercase;
    padding: 18px 24px 6px;
}
.mobile-menu-footer { border-top: 1px solid rgba(0,0,0,.07); padding: 20px 24px; gap: 16px; }
.mobile-wa-link {
    background: #1A1A1A;
    color: #FFFFFF;
    border-radius: 0;
    font-family: 'Inter', sans-serif;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 12px 20px;
    width: 100%;
    justify-content: center;
}
.mobile-wa-link:hover { background: #333; color: #FFFFFF; }

/* ── 18. WA FAB ──────────────────────── */
.wa-fab {
    background: #1A1A1A;
    box-shadow: 0 2px 14px rgba(0,0,0,.22);
    animation: none;
    border-radius: 0;
}
.wa-fab:hover { background: #333; transform: scale(1.04); animation: none; }

/* ── 19. Product detail ──────────────── */
.product-price-panel { border-radius: 0; border-color: rgba(0,0,0,.08); background: #F7F4EF; }
.detail-price {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 400;
    color: #1A1A1A;
}

/* ── 20. Responsive ──────────────────── */
@media (min-width: 768px) {
    .hero { padding: 88px 0; }
    .free-upah-section, .trust-section, .wa-cta-section { padding: 96px 0; }
    .trade-gold-section, .limited-section { padding: 96px 0; }
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .hero { padding: 100px 0; }
    .hero-vp { flex: 0 0 340px; height: 420px; }
    .free-upah-section, .trust-section, .wa-cta-section { padding: 108px 0; }
    .trade-gold-section, .limited-section { padding: 108px 0; }
    .trust-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .hero { padding: 60px 0; }
    .free-upah-section, .limited-section,
    .trust-section, .wa-cta-section,
    .trade-gold-section { padding: 60px 0; }
    .trust-grid { grid-template-columns: 1fr; background: transparent; gap: 0; }
    .trust-card {
        border: none;
        border-bottom: 1px solid rgba(255,255,255,.07);
        border-radius: 0;
        padding: 22px 0;
    }
    .trust-card:last-child { border-bottom: none; }
    .card-actions { flex-direction: column; }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════
   31. DW Navigation System
   Promo bar · Info bar · Header · Site nav · Mega menus
═══════════════════════════════════════ */

/* ── Tokens ──────────────────────────── */
:root {
    --header-h:    56px;
    --nav-bar-h:   44px;
    --promo-h:     32px;
    --info-h:      38px;
}

/* ── Promo bar ───────────────────────── */
.promo-bar {
    background: #f6efe6;
    height: var(--promo-h);
    overflow: hidden;
    white-space: nowrap;
}
.promo-track {
    display: flex;
    height: 100%;
    width: max-content;
    animation: promo-scroll 28s linear infinite;
}
.promo-set {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 56px;
    padding: 0 28px;
    flex-shrink: 0;
}
.promo-set span {
    font-family: 'Inter', sans-serif;
    font-size: .68rem;
    color: #5a5a5a;
    letter-spacing: .04em;
    white-space: nowrap;
}
@keyframes promo-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Info bar ────────────────────────── */
.info-bar {
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,.07);
    height: var(--info-h);
    display: flex;
    align-items: center;
}
.info-bar-inner {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.info-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: 'Inter', sans-serif;
    font-size: .7rem;
    color: #333333;
    letter-spacing: .01em;
    padding: 0 24px;
    white-space: nowrap;
}
.info-item svg { opacity: .6; flex-shrink: 0; }
.info-sep {
    width: 1px;
    height: 13px;
    background: rgba(0,0,0,.12);
    flex-shrink: 0;
}

/* ── Site header ─────────────────────── */
.site-header {
    background: rgba(255,255,255,.97);
    height: var(--header-h);
    position: sticky;
    top: 0;
    z-index: 1001;
    border-bottom: 1px solid rgba(0,0,0,.07);
    transition: box-shadow .2s ease;
}
.site-header.scrolled {
    box-shadow: 0 1px 20px rgba(0,0,0,.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255,255,255,.99);
}
.header-inner {
    height: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}
.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: flex-start;
}
.header-logo {
    font-family: 'Inter', sans-serif;
    font-size: .76rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    font-weight: 400;
    color: #111111;
    text-decoration: none;
    white-space: nowrap;
    justify-self: center;
    transition: opacity .15s;
}
.header-logo:hover { opacity: .65; }
.header-right {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}
.header-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #111111;
    text-decoration: none;
    border-radius: 0;
    padding: 0;
    transition: color .15s, opacity .15s;
    flex-shrink: 0;
}
.header-icon:hover { color: #555555; }
.header-wa-icon { color: #111111; }
.header-wa-icon:hover { color: #555555; }

/* Header hamburger */
.header-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 22px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}
.header-hamburger span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: #111111;
    transition: transform .22s ease, opacity .18s ease;
}
.header-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.header-hamburger.open span:nth-child(2) { opacity: 0; }
.header-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Lang switcher in header */
.header-left .lang-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
}
.header-left .lang-btn {
    font-family: 'Inter', sans-serif;
    font-size: .64rem;
    letter-spacing: .08em;
    color: #6A6460;
    font-weight: 400;
    padding: 2px 0;
    text-decoration: none;
    transition: color .15s;
}
.header-left .lang-btn:hover,
.header-left .lang-btn.active { color: #111111; font-weight: 500; }
.header-left .lang-sep { color: rgba(0,0,0,.2); font-size: .6rem; }

/* ── Site nav ────────────────────────── */
.site-nav {
    background: #ffffff;
    height: var(--nav-bar-h);
    position: sticky;
    top: var(--header-h);
    z-index: 1000;
    border-bottom: 1px solid rgba(0,0,0,.07);
    overflow: visible;
}
.site-nav.scrolled { box-shadow: none; }
.nav-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 8px;
}

/* Nav links */
.nav-links {
    display: flex;
    align-items: center;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}
.nav-links > li {
    height: 100%;
    display: flex;
    align-items: center;
    position: static;
}
.nav-links > li > a {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    padding: 0 13px;
    font-family: 'Inter', sans-serif;
    font-size: .76rem;
    letter-spacing: .025em;
    font-weight: 400;
    color: #111111;
    text-decoration: none;
    background: transparent !important;
    border: none;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: color .15s;
}
.nav-links > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 13px;
    right: 13px;
    height: 1.5px;
    background: #111111;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s ease;
}
.nav-links > li:hover > a,
.nav-links > li.open > a { color: #111111; }
.nav-links > li:hover > a::after,
.nav-links > li.open > a::after,
.nav-links > li > a.active::after { transform: scaleX(1); }
.nav-links > li > a svg { opacity: .45; transition: transform .2s ease; flex-shrink: 0; }
.nav-links > li.open > a svg { transform: rotate(180deg); }

/* ── Mega menu ───────────────────────── */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 100vw;
    background: #ffffff;
    border-top: 1px solid rgba(0,0,0,.06);
    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 8px 40px rgba(0,0,0,.07);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
    pointer-events: none;
}
.has-mega.open .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity .18s ease, transform .18s ease, visibility 0s 0s;
    pointer-events: auto;
}
.mega-body {
    max-width: 1320px;
    margin: 0 auto;
    padding: 32px 24px 40px;
    display: flex;
    gap: 64px;
    align-items: flex-start;
}
.mega-col {
    display: flex;
    flex-direction: column;
    min-width: 160px;
    gap: 0;
}
.mega-col-editorial { min-width: 180px; }
.mega-section-label {
    font-family: 'Inter', sans-serif;
    font-size: .6rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 600;
    color: #9A9490;
    display: block;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.mega-link {
    font-family: 'Inter', sans-serif;
    font-size: .8rem;
    color: #444444;
    text-decoration: none;
    padding: 6px 0;
    letter-spacing: .01em;
    transition: color .15s;
    display: block;
    line-height: 1.4;
}
.mega-link:hover { color: #111111; }
.mega-link.active { color: #111111; text-decoration: underline; text-underline-offset: 3px; }
.mega-link-all {
    font-weight: 500;
    color: #111111;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.mega-link-all:hover { color: #111111; }

/* Suppress old dropdown menu entirely */
.nav-dropdown-menu,
.nav-dropdown-toggle,
.nav-spacer,
.nav-wa-btn,
.nav-container { display: none !important; }

/* ── Mobile: hide desktop nav, adjust header ── */
@media (max-width: 899px) {
    .site-nav { display: none; }
    .info-bar  { display: none; }
    .promo-bar { height: 28px; }
    .promo-set span { font-size: .64rem; }
    .header-inner { padding: 0 16px; }
    .header-logo { font-size: .68rem; letter-spacing: .22em; }
    .header-icon { width: 34px; height: 34px; }
    .header-icon svg { width: 16px; height: 16px; }
}
@media (max-width: 479px) {
    .header-logo { font-size: .6rem; letter-spacing: .16em; }
    .header-left .lang-switcher { display: none; }
}

/* ── Tablet: show nav, no mega ──────── */
@media (min-width: 900px) and (max-width: 1079px) {
    .nav-links > li > a { padding: 0 9px; font-size: .72rem; }
    .header-logo { font-size: .72rem; letter-spacing: .26em; }
}


/* ═══════════════════════════════════════════════════════
   SECTION 32 — TYPOGRAPHY SYSTEM
   Helvetica Neue for all UI · Cormorant Garamond editorial only
   v6
══════════════════════════════════════════════════════ */

/* ── Font variables ── */
:root {
    --font-ui:      "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-display: 'Cormorant Garamond', Georgia, serif;
}

/* ── Global UI font reset ── */
*,
*::before,
*::after {
    font-family: var(--font-ui);
}

body {
    font-family: var(--font-ui);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: .005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Heading reset — system font, light weight ── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-ui);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: .015em;
}

/* ── Section titles ── */
.section-title {
    font-family: var(--font-ui) !important;
    font-size: clamp(1.4rem, 2.5vw, 1.9rem) !important;
    font-weight: 300 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

/* ── Eyebrows / overlines ── */
.section-eyebrow,
.eyebrow,
[class*="eyebrow"],
.product-badge,
.badge {
    font-family: var(--font-ui) !important;
    font-size: .6rem !important;
    font-weight: 500 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
}

/* ── Navigation ── */
.site-nav,
.nav-links,
.nav-links li,
.nav-links li a,
.nav-links > li > a {
    font-family: var(--font-ui) !important;
    font-size: .75rem !important;
    font-weight: 400 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

/* ── Mega menu ── */
.mega-menu,
.mega-col-title,
.mega-link,
.mega-link-all,
.mega-col-editorial,
.mega-editorial-eyebrow,
.mega-editorial-title,
.mega-editorial-cta {
    font-family: var(--font-ui) !important;
}

.mega-col-title {
    font-size: .6rem !important;
    font-weight: 600 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
}

.mega-link {
    font-size: .8rem !important;
    font-weight: 400 !important;
    letter-spacing: .01em !important;
    line-height: 1.6 !important;
}

.mega-link-all {
    font-size: .8rem !important;
    font-weight: 500 !important;
    letter-spacing: .02em !important;
}

.mega-editorial-eyebrow {
    font-size: .6rem !important;
    letter-spacing: .2em !important;
}

.mega-editorial-title {
    font-size: 1.05rem !important;
    font-weight: 300 !important;
    letter-spacing: .04em !important;
}

.mega-editorial-cta {
    font-size: .72rem !important;
    letter-spacing: .1em !important;
}

/* ── Product cards ── */
.product-card,
.product-title,
.product-name,
.product-price,
.product-weight,
.product-category,
.card-price,
.card-title,
.card-name {
    font-family: var(--font-ui) !important;
}

.product-title,
.product-name,
.card-title,
.card-name {
    font-size: .84rem !important;
    font-weight: 400 !important;
    letter-spacing: .025em !important;
    line-height: 1.4 !important;
}

.product-price,
.card-price,
.price-current,
.price-old,
.price-tag {
    font-size: .82rem !important;
    font-weight: 500 !important;
    letter-spacing: .03em !important;
}

.product-weight,
.product-category,
.card-meta {
    font-size: .7rem !important;
    font-weight: 400 !important;
    letter-spacing: .04em !important;
}

/* ── Buttons ── */
.btn,
button,
[type="button"],
[type="submit"],
.btn-gold,
.btn-dark,
.btn-outline,
.btn-wa {
    font-family: var(--font-ui) !important;
    font-size: .72rem !important;
    font-weight: 500 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

/* ── Filter bar ── */
.filter-chip,
.filter-chip label,
.filter-bar,
.filter-label,
.filter-select,
.filter-sort,
select,
option {
    font-family: var(--font-ui) !important;
    font-size: .75rem !important;
    letter-spacing: .03em !important;
}

.filter-bar .filter-title,
.filter-label {
    font-size: .62rem !important;
    font-weight: 600 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
}

/* ── Category chips ── */
.cat-chip,
.category-chip,
[class*="cat-chip"],
[class*="category-chip"] {
    font-family: var(--font-ui) !important;
    font-size: .72rem !important;
    font-weight: 400 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

/* ── Footer ── */
footer,
.site-footer,
.footer-col,
.footer-heading,
.footer-links,
.footer-links a,
.footer-bottom,
.footer-legal {
    font-family: var(--font-ui) !important;
}

.footer-heading {
    font-size: .62rem !important;
    font-weight: 600 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
}

.footer-links a,
.footer-legal {
    font-size: .78rem !important;
    font-weight: 400 !important;
    letter-spacing: .02em !important;
    line-height: 1.7 !important;
}

/* ── Header ── */
.header-logo {
    font-family: var(--font-ui) !important;
    font-size: .76rem !important;
    font-weight: 400 !important;
    letter-spacing: .32em !important;
    text-transform: uppercase !important;
}

.lang-btn {
    font-family: var(--font-ui) !important;
    font-size: .68rem !important;
    font-weight: 500 !important;
    letter-spacing: .1em !important;
}

/* ── Promo / info bars ── */
.promo-set span,
.info-bar,
.info-item,
.info-item span {
    font-family: var(--font-ui) !important;
    font-size: .66rem !important;
    font-weight: 400 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}

/* ── Mobile menu ── */
.mobile-menu-nav a,
.mobile-menu-nav li,
.mobile-cat-label,
.mm-logo-name,
.mm-logo-sub,
.mobile-wa-link {
    font-family: var(--font-ui) !important;
}

.mobile-menu-nav a {
    font-size: .88rem !important;
    font-weight: 400 !important;
    letter-spacing: .06em !important;
}

.mobile-cat-label {
    font-size: .6rem !important;
    font-weight: 600 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
}

.mm-logo-name {
    font-size: .82rem !important;
    font-weight: 400 !important;
    letter-spacing: .26em !important;
    text-transform: uppercase !important;
}

.mm-logo-sub {
    font-size: .62rem !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
}

/* ── Trust / feature blocks ── */
.trust-title,
.trust-label,
.feature-title,
.feature-desc,
.upah-title,
.upah-label,
.free-upah-title,
.free-upah-desc,
.wa-cta-title,
.wa-cta-desc {
    font-family: var(--font-ui) !important;
}

.trust-title,
.feature-title,
.upah-title {
    font-size: .82rem !important;
    font-weight: 500 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.trust-label,
.feature-desc,
.wa-cta-desc {
    font-size: .78rem !important;
    font-weight: 400 !important;
    letter-spacing: .02em !important;
}

.wa-cta-title,
.free-upah-title {
    font-size: clamp(1.1rem, 2vw, 1.5rem) !important;
    font-weight: 300 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

/* ── Gold price ticker / live price ── */
.gold-price,
.price-ticker,
.live-price {
    font-family: var(--font-ui) !important;
    font-size: .78rem !important;
    font-weight: 500 !important;
    letter-spacing: .05em !important;
}

/* ── Breadcrumbs ── */
.breadcrumb,
.breadcrumb a,
.breadcrumb span,
.breadcrumbs,
.breadcrumbs a {
    font-family: var(--font-ui) !important;
    font-size: .72rem !important;
    font-weight: 400 !important;
    letter-spacing: .04em !important;
}

/* ── Forms & inputs ── */
input,
textarea,
select,
label {
    font-family: var(--font-ui) !important;
    font-size: .84rem !important;
}

/* ── Pagination ── */
.pagination,
.page-link,
.page-item {
    font-family: var(--font-ui) !important;
    font-size: .75rem !important;
    letter-spacing: .06em !important;
}

/* ─────────────────────────────────────────────────────
   CORMORANT GARAMOND — editorial use only
   ONLY these selectors may use the display font
───────────────────────────────────────────────────── */

/* Hero heading */
.hero-title,
.hero-title .accent {
    font-family: var(--font-display) !important;
    font-size: clamp(2.6rem, 5vw, 4rem) !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
}

/* Hero VP editorial label ("Gold") */
.hero-vp-label {
    font-family: var(--font-display) !important;
    font-size: clamp(3rem, 6vw, 5rem) !important;
    font-weight: 300 !important;
    letter-spacing: .04em !important;
}

/* Decorative large step numbers */
.trade-step-num {
    font-family: var(--font-display) !important;
    font-size: clamp(4rem, 8vw, 7rem) !important;
    font-weight: 300 !important;
    letter-spacing: -.01em !important;
}

/* Editorial campaign / collection titles (opt-in class) */
.editorial-title {
    font-family: var(--font-display) !important;
    font-size: clamp(2rem, 4vw, 3.2rem) !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
}



/* ═══════════════════════════════════════════════════════
   SECTION 33 — DW LAYOUT REFINEMENT
   Daniel Wellington-accurate spacing, hierarchy, and
   Scandinavian luxury appearance.
   Overrides all prior sections.
   v7
══════════════════════════════════════════════════════ */

/* ── Root overrides ────────────────────────────────── */
:root {
    --header-h:   64px;
    --nav-bar-h:  48px;
    --promo-h:    30px;
    --info-h:     34px;

    --page-max:   1320px;
    --page-pad:   clamp(16px, 3vw, 48px);

    --font-ui:    "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-serif: 'Cormorant Garamond', Georgia, serif;

    --c-black:    #111111;
    --c-grey1:    #444444;
    --c-grey2:    #777777;
    --c-grey3:    #aaaaaa;
    --c-rule:     rgba(0,0,0,.08);
    --c-bg:       #ffffff;
    --c-offwhite: #fafafa;
}

/* ── Global page base ──────────────────────────────── */
html, body {
    background: var(--c-bg) !important;
    color: var(--c-black) !important;
    font-family: var(--font-ui) !important;
    -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════
   PROMO BAR
══════════════════════════════════════════════════ */
.promo-bar {
    background: #f5f0ea !important;
    height: var(--promo-h) !important;
    border-bottom: none !important;
}
.promo-set {
    gap: 72px !important;
    padding: 0 36px !important;
}
.promo-set span {
    font-family: var(--font-ui) !important;
    font-size: .6rem !important;
    font-weight: 400 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: #6a6460 !important;
}
@keyframes promo-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════
   INFO BAR
══════════════════════════════════════════════════ */
.info-bar {
    background: #ffffff !important;
    height: var(--info-h) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--c-rule) !important;
}
.info-bar-inner {
    max-width: var(--page-max) !important;
    padding: 0 var(--page-pad) !important;
}
.info-item {
    font-family: var(--font-ui) !important;
    font-size: .64rem !important;
    font-weight: 400 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: #555555 !important;
    padding: 0 28px !important;
    gap: 7px !important;
}
.info-item svg {
    opacity: .5 !important;
    width: 12px !important;
    height: 12px !important;
}
.info-sep {
    width: 1px !important;
    height: 11px !important;
    background: rgba(0,0,0,.1) !important;
}

/* ═══════════════════════════════════════════════════
   SITE HEADER — 64px, white, centered logo
══════════════════════════════════════════════════ */
.site-header {
    height: var(--header-h) !important;
    background: #ffffff !important;
    border-bottom: 1px solid var(--c-rule) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1001 !important;
    transition: box-shadow .2s ease !important;
}
.site-header.scrolled {
    box-shadow: 0 1px 16px rgba(0,0,0,.06) !important;
    background: rgba(255,255,255,.98) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}
.header-inner {
    height: 100% !important;
    max-width: var(--page-max) !important;
    margin: 0 auto !important;
    padding: 0 var(--page-pad) !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 0 !important;
}
.header-left {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    justify-content: flex-start !important;
}
.header-right {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    justify-content: flex-end !important;
}

/* ── Logo — DW proportions ── */
.header-logo {
    font-family: var(--font-ui) !important;
    font-size: 1.05rem !important;          /* ≈ 17px — DW ~18–20px */
    font-weight: 300 !important;
    letter-spacing: .42em !important;       /* ≈ 7px gap at 17px — DW feel */
    text-transform: uppercase !important;
    color: var(--c-black) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    justify-self: center !important;
    align-self: center !important;
    line-height: 1 !important;
    transition: opacity .15s !important;
}
.header-logo:hover { opacity: .55 !important; }

/* ── Hamburger ── */
.header-hamburger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5.5px !important;
    width: 20px !important;
    height: 40px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}
.header-hamburger span {
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    background: var(--c-black) !important;
    transition: transform .22s ease, opacity .18s ease !important;
}
.header-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg) !important; }
.header-hamburger.open span:nth-child(2) { opacity: 0 !important; }
.header-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg) !important; }

/* ── Header icons ── */
.header-icon {
    width: 36px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: var(--c-black) !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    transition: opacity .15s !important;
}
.header-icon:hover { opacity: .55 !important; color: var(--c-black) !important; }
.header-icon svg { width: 17px !important; height: 17px !important; stroke-width: 1.3 !important; }
.header-wa-icon { color: var(--c-black) !important; }
.header-wa-icon svg { fill: var(--c-black) !important; }

/* ── Lang switcher in header ── */
.header-left .lang-switcher {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: transparent !important;
}
.header-left .lang-btn {
    font-family: var(--font-ui) !important;
    font-size: .6rem !important;
    font-weight: 400 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: #888 !important;
    text-decoration: none !important;
    transition: color .15s !important;
    padding: 0 !important;
}
.header-left .lang-btn:hover,
.header-left .lang-btn.active {
    color: var(--c-black) !important;
    font-weight: 500 !important;
}
.header-left .lang-sep {
    color: rgba(0,0,0,.18) !important;
    font-size: .55rem !important;
}

/* ═══════════════════════════════════════════════════
   SITE NAV — 48px, centered, DW spacing
══════════════════════════════════════════════════ */
.site-nav {
    background: #ffffff !important;
    height: var(--nav-bar-h) !important;
    position: sticky !important;
    top: var(--header-h) !important;
    z-index: 1000 !important;
    border-bottom: 1px solid var(--c-rule) !important;
    overflow: visible !important;
}
.site-nav.scrolled {
    box-shadow: none !important;
    border-bottom-color: var(--c-rule) !important;
}
.nav-inner {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: visible !important;
    max-width: var(--page-max) !important;
    margin: 0 auto !important;
    padding: 0 var(--page-pad) !important;
}
.nav-links {
    display: flex !important;
    align-items: stretch !important;
    height: 100% !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}
.nav-links > li {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    position: static !important;
}
/* ── Nav link — DW proportions ── */
.nav-links > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: 100% !important;
    padding: 0 14px !important;
    font-family: var(--font-ui) !important;
    font-size: .7rem !important;            /* ≈ 11px — slim DW feel */
    font-weight: 400 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: var(--c-black) !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    position: relative !important;
    transition: color .15s !important;
}
/* Underline indicator */
.nav-links > li > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 14px !important;
    right: 14px !important;
    height: 1px !important;
    background: var(--c-black) !important;
    transform: scaleX(0) !important;
    transform-origin: center !important;
    transition: transform .2s ease !important;
}
.nav-links > li:hover > a::after,
.nav-links > li.open > a::after,
.nav-links > li > a.active::after { transform: scaleX(1) !important; }

.nav-links > li > a svg {
    opacity: .4 !important;
    width: 9px !important;
    height: 9px !important;
    transition: transform .2s ease !important;
    flex-shrink: 0 !important;
}
.nav-links > li.open > a svg { transform: rotate(180deg) !important; }

/* ═══════════════════════════════════════════════════
   MEGA MENU — DW two-column minimal layout
══════════════════════════════════════════════════ */
.mega-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    width: 100vw !important;
    background: #ffffff !important;
    border-top: 1px solid var(--c-rule) !important;
    border-bottom: 1px solid var(--c-rule) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.06) !important;
    z-index: 999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-50%) translateY(-4px) !important;
    transition: opacity .16s ease, transform .16s ease, visibility 0s .16s !important;
    pointer-events: none !important;
}
.has-mega.open .mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    transition: opacity .16s ease, transform .16s ease !important;
    pointer-events: auto !important;
}
/* ── Mega body: constrained width, DW grid ── */
.mega-body {
    max-width: var(--page-max) !important;
    margin: 0 auto !important;
    padding: 28px var(--page-pad) 36px !important;
    display: flex !important;
    gap: 0 !important;
    align-items: flex-start !important;
}
/* ── Mega columns ── */
.mega-col {
    display: flex !important;
    flex-direction: column !important;
    min-width: 180px !important;
    max-width: 220px !important;
    padding-right: 48px !important;
    gap: 0 !important;
    border-right: 1px solid rgba(0,0,0,.05) !important;
    margin-right: 48px !important;
}
.mega-col:last-child {
    border-right: none !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
}
.mega-col-editorial {
    min-width: 160px !important;
    max-width: 200px !important;
    border-right: none !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
}
/* ── Section label (e.g. "Shop By", "By Occasion") ── */
.mega-section-label {
    font-family: var(--font-ui) !important;
    font-size: .58rem !important;
    font-weight: 600 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    color: #999999 !important;
    display: block !important;
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}
/* ── Mega links ── */
.mega-link {
    font-family: var(--font-ui) !important;
    font-size: .75rem !important;
    font-weight: 400 !important;
    color: #444444 !important;
    letter-spacing: .025em !important;
    text-decoration: none !important;
    padding: 5px 0 !important;
    line-height: 1.5 !important;
    display: block !important;
    transition: color .14s !important;
}
.mega-link:hover { color: var(--c-black) !important; }
.mega-link.active {
    color: var(--c-black) !important;
    font-weight: 500 !important;
}
/* "All Jewellery" top link */
.mega-link-all {
    font-family: var(--font-ui) !important;
    font-size: .72rem !important;
    font-weight: 500 !important;
    color: var(--c-black) !important;
    letter-spacing: .03em !important;
    padding-bottom: 10px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid rgba(0,0,0,.07) !important;
    display: block !important;
    text-decoration: none !important;
    transition: opacity .14s !important;
}
.mega-link-all:hover { opacity: .65 !important; color: var(--c-black) !important; }

/* ═══════════════════════════════════════════════════
   BUTTONS — DW rectangular, thin, black
══════════════════════════════════════════════════ */
.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 22px !important;
    border-radius: 0 !important;
    font-family: var(--font-ui) !important;
    font-size: .68rem !important;
    font-weight: 500 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: background .18s, color .18s, border-color .18s, opacity .18s !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    line-height: 1 !important;
}
.btn:hover { transform: none !important; }

/* Primary black button */
.btn-dark,
.btn-gold {
    background: var(--c-black) !important;
    color: #ffffff !important;
    border-color: var(--c-black) !important;
    box-shadow: none !important;
}
.btn-dark:hover,
.btn-gold:hover {
    background: #333333 !important;
    border-color: #333333 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Outline button */
.btn-outline,
.btn-outline-dark,
.btn-outline-gold {
    background: transparent !important;
    color: var(--c-black) !important;
    border: 1px solid var(--c-black) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.btn-outline:hover,
.btn-outline-dark:hover,
.btn-outline-gold:hover {
    background: var(--c-black) !important;
    color: #ffffff !important;
    transform: none !important;
}

/* WhatsApp button — keep green but DW proportions */
.btn-wa {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #1a1a1a !important;
    box-shadow: none !important;
}
.btn-wa:hover {
    background: #333333 !important;
    border-color: #333333 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════
   PRODUCT GRID & CARDS — DW clean layout
══════════════════════════════════════════════════ */
/* White page background */
.bg-page,
body {
    background: #ffffff !important;
}

/* Product grid: clean white gaps, no coloured background */
.product-grid {
    gap: 1px !important;
    background: #e8e8e8 !important;
    border-radius: 0 !important;
}
.product-card {
    background: #ffffff !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transition: none !important;
}
.product-card:hover {
    box-shadow: none !important;
    transform: none !important;
    border-color: transparent !important;
}

/* Product card image */
.product-card .card-image,
.product-card .card-img-wrap,
.product-card .card-thumb {
    border-radius: 0 !important;
    overflow: hidden !important;
}
.product-card img {
    border-radius: 0 !important;
    transition: transform .4s ease !important;
}
.product-card:hover img {
    transform: scale(1.03) !important;
}

/* Card text */
.card-body,
.card-info {
    padding: 12px 16px 16px !important;
}
.card-title,
.product-title,
.product-name {
    font-family: var(--font-ui) !important;
    font-size: .82rem !important;
    font-weight: 400 !important;
    color: var(--c-black) !important;
    letter-spacing: .02em !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
}
.card-price,
.product-price,
.price-current {
    font-family: var(--font-ui) !important;
    font-size: .8rem !important;
    font-weight: 500 !important;
    color: var(--c-black) !important;
    letter-spacing: .02em !important;
}
.price-old,
.card-price-old {
    font-size: .72rem !important;
    color: var(--c-grey2) !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
}

/* Card actions */
.card-actions {
    padding: 0 16px 16px !important;
}
.card-actions .btn {
    width: 100% !important;
    padding: 9px 16px !important;
    font-size: .65rem !important;
    letter-spacing: .12em !important;
}

/* ═══════════════════════════════════════════════════
   SECTION HEADINGS — DW centralized, light weight
══════════════════════════════════════════════════ */
.section-header {
    text-align: center !important;
    margin-bottom: 40px !important;
}
.section-eyebrow {
    font-family: var(--font-ui) !important;
    font-size: .58rem !important;
    font-weight: 500 !important;
    letter-spacing: .24em !important;
    text-transform: uppercase !important;
    color: var(--c-grey2) !important;
    margin-bottom: 10px !important;
    display: block !important;
}
/* Remove eyebrow decorative lines */
.section-eyebrow::before,
.section-eyebrow::after {
    display: none !important;
}
.section-title {
    font-family: var(--font-ui) !important;
    font-size: clamp(1.3rem, 2.8vw, 1.9rem) !important;
    font-weight: 300 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: var(--c-black) !important;
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
}
.section-subtitle {
    font-family: var(--font-ui) !important;
    font-size: .8rem !important;
    font-weight: 400 !important;
    color: var(--c-grey1) !important;
    letter-spacing: .02em !important;
    line-height: 1.6 !important;
    margin-top: 12px !important;
}

/* Dark section overrides */
.section-dark .section-title,
.free-upah-section .section-title,
.trust-section .section-title,
.wa-cta-section .section-title {
    color: #ffffff !important;
}
.section-dark .section-eyebrow,
.free-upah-section .section-eyebrow,
.trust-section .section-eyebrow,
.wa-cta-section .section-eyebrow {
    color: rgba(255,255,255,.5) !important;
}
.section-dark .section-subtitle,
.free-upah-section .section-subtitle,
.trust-section .section-subtitle,
.wa-cta-section .section-subtitle {
    color: rgba(255,255,255,.55) !important;
}

/* Section spacing */
.section { padding: 80px 0 !important; }
.section-header { margin-bottom: 40px !important; }

/* ═══════════════════════════════════════════════════
   DARK SECTIONS — Charcoal, minimal
══════════════════════════════════════════════════ */
.section-dark,
.free-upah-section,
.trust-section,
.wa-cta-section {
    background: #1a1a1a !important;
}
.section-dark::before,
.free-upah-section::before,
.trust-section::before,
.wa-cta-section::before {
    display: none !important;
}

/* ═══════════════════════════════════════════════════
   TRADE-IN SECTION — Editorial, whitespace, minimal
══════════════════════════════════════════════════ */
.trade-gold-section {
    background: #ffffff !important;
    padding: 88px 0 !important;
}
.trade-gold-section::before {
    display: none !important;
}
/* 3-step grid */
.trade-steps {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-top: 0 !important;
}
@media (min-width: 768px) {
    .trade-steps {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0 !important;
    }
    /* Hide connector arrows on desktop — separator lines are enough */
    .trade-step-connector { display: none !important; }
}
/* Step cards */
.trade-step {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(0,0,0,.07) !important;
    padding: 40px 36px !important;
    transition: none !important;
    box-shadow: none !important;
}
.trade-step:last-child {
    border-right: none !important;
}
.trade-step:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: rgba(0,0,0,.07) !important;
}
/* Step number — ghosted Cormorant Garamond */
.trade-step-num {
    font-family: var(--font-serif) !important;
    font-size: clamp(3.5rem, 6vw, 5.5rem) !important;
    font-weight: 300 !important;
    color: #dddddd !important;
    opacity: 1 !important;
    line-height: 1 !important;
    letter-spacing: -.02em !important;
    margin-bottom: 20px !important;
    display: block !important;
}
/* Step title */
.trade-step-title {
    font-family: var(--font-ui) !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    color: var(--c-black) !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
}
/* Step text */
.trade-step-text {
    font-family: var(--font-ui) !important;
    font-size: .8rem !important;
    font-weight: 400 !important;
    color: #666666 !important;
    line-height: 1.7 !important;
    letter-spacing: .015em !important;
}
/* Mobile: step connector arrow */
@media (max-width: 767px) {
    .trade-step {
        border-right: none !important;
        border-bottom: 1px solid rgba(0,0,0,.07) !important;
        padding: 32px 24px !important;
    }
    .trade-step:last-child { border-bottom: none !important; }
    .trade-step-connector svg { transform: rotate(0deg) !important; }
}

/* ═══════════════════════════════════════════════════
   TRUST / WHY US SECTION
══════════════════════════════════════════════════ */
.trust-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
}
.trust-card,
.trust-item {
    background: transparent !important;
    border: none !important;
    border-right: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 0 !important;
    padding: 40px 36px !important;
    text-align: center !important;
    box-shadow: none !important;
}
.trust-card:last-child,
.trust-item:last-child {
    border-right: none !important;
}
.trust-icon { opacity: .55 !important; margin-bottom: 16px !important; }
.trust-title,
.trust-label {
    font-family: var(--font-ui) !important;
    font-size: .7rem !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    margin-bottom: 8px !important;
}
.trust-desc,
.trust-text {
    font-family: var(--font-ui) !important;
    font-size: .76rem !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,.55) !important;
    line-height: 1.6 !important;
    letter-spacing: .01em !important;
}

/* ═══════════════════════════════════════════════════
   HERO SECTION — DW clean editorial two-column
══════════════════════════════════════════════════ */
.hero {
    background: #f7f3ee !important;
    padding: 80px 0 !important;
    min-height: auto !important;
}
.hero::before,
.hero::after {
    display: none !important;
}
.hero-inner {
    display: flex !important;
    align-items: center !important;
    gap: 56px !important;
    max-width: var(--page-max) !important;
    margin: 0 auto !important;
    padding: 0 var(--page-pad) !important;
}
.hero-content {
    flex: 1 !important;
    max-width: 520px !important;
}
.hero-eyebrow {
    font-family: var(--font-ui) !important;
    font-size: .58rem !important;
    font-weight: 500 !important;
    letter-spacing: .24em !important;
    text-transform: uppercase !important;
    color: #888888 !important;
    margin-bottom: 18px !important;
    display: block !important;
}
.hero-title {
    font-family: var(--font-serif) !important;
    font-size: clamp(2.4rem, 4.5vw, 3.6rem) !important;
    font-weight: 400 !important;
    color: var(--c-black) !important;
    line-height: 1.1 !important;
    letter-spacing: .01em !important;
    margin-bottom: 20px !important;
    text-transform: none !important;
}
.hero-title .accent { color: var(--c-black) !important; }
.hero-subtitle,
.hero-text {
    font-family: var(--font-ui) !important;
    font-size: .88rem !important;
    font-weight: 400 !important;
    color: #555555 !important;
    line-height: 1.65 !important;
    letter-spacing: .01em !important;
    margin-bottom: 28px !important;
}
.hero-actions {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}
.hero-actions .btn {
    padding: 11px 26px !important;
    font-size: .68rem !important;
    letter-spacing: .14em !important;
}

/* ═══════════════════════════════════════════════════
   FREE UPAH / PROMO SECTION
══════════════════════════════════════════════════ */
.free-upah-section {
    background: #1a1a1a !important;
    padding: 72px 0 !important;
}
.free-upah-section::before { display: none !important; }
.free-upah-title {
    font-family: var(--font-ui) !important;
    font-size: clamp(1rem, 2vw, 1.35rem) !important;
    font-weight: 300 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
}
.free-upah-desc {
    font-family: var(--font-ui) !important;
    font-size: .8rem !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,.55) !important;
    letter-spacing: .02em !important;
}

/* ═══════════════════════════════════════════════════
   WA CTA SECTION
══════════════════════════════════════════════════ */
.wa-cta-section {
    background: #1a1a1a !important;
    padding: 80px 0 !important;
}
.wa-cta-section::before { display: none !important; }
.wa-cta-title {
    font-family: var(--font-ui) !important;
    font-size: clamp(1.1rem, 2vw, 1.5rem) !important;
    font-weight: 300 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
}
.wa-cta-desc {
    font-family: var(--font-ui) !important;
    font-size: .8rem !important;
    color: rgba(255,255,255,.55) !important;
}

/* ═══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
.site-footer,
footer {
    background: #ffffff !important;
    border-top: 1px solid var(--c-rule) !important;
    color: var(--c-black) !important;
}
.footer-heading {
    font-family: var(--font-ui) !important;
    font-size: .6rem !important;
    font-weight: 600 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    color: var(--c-black) !important;
    margin-bottom: 14px !important;
}
.footer-links a {
    font-family: var(--font-ui) !important;
    font-size: .78rem !important;
    font-weight: 400 !important;
    color: #555555 !important;
    text-decoration: none !important;
    letter-spacing: .01em !important;
    line-height: 1.9 !important;
    transition: color .14s !important;
    display: block !important;
}
.footer-links a:hover { color: var(--c-black) !important; }
.footer-bottom,
.footer-legal {
    font-family: var(--font-ui) !important;
    font-size: .65rem !important;
    color: #999999 !important;
    letter-spacing: .04em !important;
    border-top: 1px solid var(--c-rule) !important;
}

/* ═══════════════════════════════════════════════════
   MOBILE MENU — DW refined drawer
══════════════════════════════════════════════════ */
.mobile-menu {
    background: #ffffff !important;
    border: none !important;
    box-shadow: 4px 0 40px rgba(0,0,0,.10) !important;
}
.mobile-menu-header {
    border-bottom: 1px solid var(--c-rule) !important;
    padding: 0 20px !important;
    height: var(--header-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.mm-logo-name {
    font-family: var(--font-ui) !important;
    font-size: .72rem !important;
    font-weight: 300 !important;
    letter-spacing: .3em !important;
    text-transform: uppercase !important;
    color: var(--c-black) !important;
}
.mm-logo-sub {
    font-family: var(--font-ui) !important;
    font-size: .55rem !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    color: #999999 !important;
}
.mobile-menu-close {
    font-size: 1.2rem !important;
    color: var(--c-black) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    opacity: .5 !important;
    transition: opacity .15s !important;
}
.mobile-menu-close:hover { opacity: 1 !important; }
.mobile-menu-nav {
    padding: 20px 0 !important;
}
.mobile-menu-nav ul {
    padding: 0 !important;
    gap: 0 !important;
}
.mobile-menu-nav li { list-style: none !important; }
.mobile-menu-nav a {
    display: block !important;
    padding: 12px 24px !important;
    font-family: var(--font-ui) !important;
    font-size: .78rem !important;
    font-weight: 400 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--c-black) !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    transition: background .14s !important;
}
.mobile-menu-nav a:hover,
.mobile-menu-nav a.active {
    background: #f5f5f5 !important;
    color: var(--c-black) !important;
}
.mobile-cat-label {
    font-family: var(--font-ui) !important;
    font-size: .55rem !important;
    font-weight: 600 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    color: #aaaaaa !important;
    padding: 16px 24px 4px !important;
    display: block !important;
}
.mobile-menu-footer {
    border-top: 1px solid var(--c-rule) !important;
    padding: 16px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.mobile-wa-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--c-black) !important;
    color: #ffffff !important;
    font-family: var(--font-ui) !important;
    font-size: .64rem !important;
    font-weight: 500 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 9px 16px !important;
    border-radius: 0 !important;
    transition: background .15s !important;
}
.mobile-wa-link:hover { background: #333333 !important; color: #ffffff !important; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Mobile header adjustments
══════════════════════════════════════════════════ */
@media (max-width: 899px) {
    .site-nav  { display: none !important; }
    .info-bar  { display: none !important; }
    .promo-bar { height: 26px !important; }
    .promo-set span { font-size: .58rem !important; }
    .header-inner { padding: 0 16px !important; }
    .header-logo {
        font-size: .72rem !important;
        letter-spacing: .28em !important;
    }
    .header-icon { width: 32px !important; height: 40px !important; }
    .header-icon svg { width: 16px !important; height: 16px !important; }
    .section { padding: 56px 0 !important; }
    .trade-gold-section { padding: 60px 0 !important; }
    .trust-grid { grid-template-columns: 1fr !important; }
    .trust-card,
    .trust-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.1) !important; padding: 28px 24px !important; }
}
@media (max-width: 479px) {
    .header-logo {
        font-size: .6rem !important;
        letter-spacing: .2em !important;
    }
    .header-left .lang-switcher { display: none !important; }
    .header-left { gap: 10px !important; }
}

/* ── Tablet ── */
@media (min-width: 900px) and (max-width: 1199px) {
    .nav-links > li > a { padding: 0 10px !important; font-size: .66rem !important; }
    .header-logo { font-size: .88rem !important; letter-spacing: .35em !important; }
    .mega-col { min-width: 140px !important; padding-right: 32px !important; margin-right: 32px !important; }
}

/* ── Large desktop ── */
@media (min-width: 1200px) {
    .nav-links > li > a { padding: 0 16px !important; }
    .section { padding: 100px 0 !important; }
    .section-header { margin-bottom: 52px !important; }
    .trade-gold-section { padding: 104px 0 !important; }
    .product-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (min-width: 1400px) {
    .nav-links > li > a { padding: 0 18px !important; }
}



/* ═══════════════════════════════════════════════════════
   SECTION 34 — DW PIXEL-ACCURATE REFINEMENT
   Exact proportions matched to Daniel Wellington screenshot.
   Every value is a deliberate pixel-level decision.
   Overrides all prior sections.
   v8
══════════════════════════════════════════════════════ */

/* ── Updated root measurements ─────────────────────── */
:root {
    --promo-h:    32px;    /* DW: thin announcement strip */
    --info-h:     42px;    /* DW: shipping bar */
    --header-h:   68px;    /* DW: logo bar — generous breathing room */
    --nav-bar-h:  52px;    /* DW: nav links bar */

    --c-rule:     #ececec; /* DW: light grey borders — not dark */
    --c-rule-mid: rgba(0,0,0,.06);
}

/* ═══════════════════════════════════════════════════
   PROMO BAR — 32px, DW exact
══════════════════════════════════════════════════ */
.promo-bar {
    height: 32px !important;
    background: #f6f1ea !important;
    border-bottom: none !important;
    overflow: hidden !important;
}
.promo-set {
    gap: 80px !important;
    padding: 0 40px !important;
}
.promo-set span {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: #6a6460 !important;
    white-space: nowrap !important;
}

/* ═══════════════════════════════════════════════════
   INFO / SHIPPING BAR — 42px, 13px, NOT uppercase
══════════════════════════════════════════════════ */
.info-bar {
    height: 42px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #ececec !important;
    border-top: none !important;
    display: flex !important;
    align-items: center !important;
}
.info-bar-inner {
    width: 100% !important;
    max-width: 700px !important;      /* constrain to center group */
    margin: 0 auto !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.info-item {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;       /* exact DW: 13px, readable */
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;  /* NOT uppercase — DW uses sentence case */
    color: #333333 !important;
    padding: 0 28px !important;
    gap: 7px !important;
    white-space: nowrap !important;
}
.info-item svg {
    opacity: .55 !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
}
.info-sep {
    width: 1px !important;
    height: 14px !important;
    background: #cccccc !important;
    flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════════════════
   SITE HEADER — 68px, white, centered logo
══════════════════════════════════════════════════ */
.site-header {
    height: 68px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #ececec !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1001 !important;
    box-shadow: none !important;
    transition: box-shadow .2s ease !important;
}
.site-header.scrolled {
    box-shadow: 0 1px 12px rgba(0,0,0,.05) !important;
    background: rgba(255,255,255,.98) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
.header-inner {
    height: 100% !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 0 clamp(16px, 3vw, 40px) !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 0 !important;
}
.header-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    justify-content: flex-start !important;
}
.header-right {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    justify-content: flex-end !important;
}

/* ── Logo — DW exact ── */
/*
   DW logo: "DANIEL WELLINGTON"
   - font-size: ~18px
   - font-weight: 400  (NOT 300 — it's normal weight, just the tracking creates thinness)
   - letter-spacing: 10px (actual pixel spacing between characters)
   - text-transform: uppercase (already set in HTML)
*/
.header-logo {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    letter-spacing: 10px !important;
    text-transform: uppercase !important;
    color: #111111 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    justify-self: center !important;
    align-self: center !important;
    line-height: 1 !important;
    /* offset the right-side letter-spacing on the last char */
    padding-right: 10px !important;
    transition: opacity .15s !important;
}
.header-logo:hover { opacity: .5 !important; }

/* ── Hamburger — 1px thin lines ── */
.header-hamburger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 22px !important;
    height: 42px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}
.header-hamburger span {
    display: block !important;
    width: 100% !important;
    height: 1px !important;             /* ultra-thin 1px DW style */
    background: #111111 !important;
    transition: transform .22s ease, opacity .18s ease !important;
}
.header-hamburger.open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg) !important;
}
.header-hamburger.open span:nth-child(2) { opacity: 0 !important; }
.header-hamburger.open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg) !important;
}

/* ── Header icons ── */
.header-icon {
    width: 38px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: #111111 !important;
    text-decoration: none !important;
    padding: 0 !important;
    transition: opacity .15s !important;
}
.header-icon:hover { opacity: .5 !important; color: #111111 !important; }
.header-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 1.5 !important;       /* DW icons are slightly thicker than 1.3 */
}
.header-wa-icon { color: #111111 !important; }
.header-wa-icon svg { fill: #111111 !important; stroke: none !important; }

/* ── Language switcher in header ── */
.header-left .lang-switcher {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    background: transparent !important;
}
.header-left .lang-btn {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: #888888 !important;
    text-decoration: none !important;
    transition: color .15s !important;
    padding: 1px 0 !important;
}
.header-left .lang-btn:hover,
.header-left .lang-btn.active {
    color: #111111 !important;
    font-weight: 500 !important;
}
.header-left .lang-sep {
    color: #cccccc !important;
    font-size: 10px !important;
    line-height: 1 !important;
}

/* ═══════════════════════════════════════════════════
   SITE NAV — 52px, 14px, sentence case like DW
══════════════════════════════════════════════════ */
.site-nav {
    height: 52px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #ececec !important;
    position: sticky !important;
    top: 68px !important;               /* = --header-h */
    z-index: 1000 !important;
    overflow: visible !important;
    box-shadow: none !important;
}
.site-nav.scrolled {
    box-shadow: none !important;
    border-bottom-color: #ececec !important;
}
.nav-inner {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: visible !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 0 clamp(16px, 3vw, 40px) !important;
}
.nav-links {
    display: flex !important;
    align-items: stretch !important;
    height: 100% !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}
.nav-links > li {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    position: static !important;
}

/*
   DW nav links:
   - font-size: 14px
   - font-weight: 400
   - letter-spacing: 0.2px (barely any — NOT uppercase-style spacing)
   - text-transform: NONE — DW uses "New in", "Bestsellers" (sentence case)
   - padding: 0 16px (equal horizontal spacing)
*/
.nav-links > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: 100% !important;
    padding: 0 16px !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;         /* exact DW: 14px */
    font-weight: 400 !important;
    letter-spacing: 0.2px !important;   /* exact DW: minimal, not uppercase-wide */
    text-transform: none !important;    /* DW: sentence case, NOT uppercase */
    color: #111111 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    position: relative !important;
    transition: color .15s !important;
}
/* Thin underline on hover — DW signature */
.nav-links > li > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 16px !important;
    right: 16px !important;
    height: 1px !important;
    background: #111111 !important;
    transform: scaleX(0) !important;
    transform-origin: center !important;
    transition: transform .22s ease !important;
}
.nav-links > li:hover > a::after,
.nav-links > li.open > a::after,
.nav-links > li > a.active::after { transform: scaleX(1) !important; }

/* Chevron arrows */
.nav-links > li > a svg {
    opacity: .35 !important;
    width: 9px !important;
    height: 9px !important;
    transition: transform .2s ease !important;
    flex-shrink: 0 !important;
}
.nav-links > li.open > a svg { transform: rotate(180deg) !important; }

/* ═══════════════════════════════════════════════════
   MEGA MENU — DW compact, no dead space, no shadow
══════════════════════════════════════════════════ */
.mega-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    width: 100vw !important;
    background: #ffffff !important;
    border-top: 1px solid #ececec !important;
    border-bottom: 1px solid #ececec !important;
    box-shadow: none !important;        /* DW: NO shadow */
    z-index: 999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-50%) translateY(-4px) !important;
    transition: opacity .15s ease, transform .15s ease, visibility 0s .15s !important;
    pointer-events: none !important;
}
.has-mega.open .mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    transition: opacity .15s ease, transform .15s ease !important;
    pointer-events: auto !important;
}

/*
   Mega body: constrained content, NOT stretching to 1320px.
   Left-aligned columns — DW does not center the dropdown content.
   Content is compact, starts from the left of the container.
*/
.mega-body {
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 24px clamp(16px, 3vw, 40px) 28px !important;
    display: flex !important;
    gap: 0 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

/* ── Mega columns — DW proportions ── */
.mega-col {
    display: flex !important;
    flex-direction: column !important;
    width: 180px !important;            /* fixed width — compact */
    min-width: unset !important;
    max-width: unset !important;
    flex-shrink: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-right: 40px !important;      /* gap between columns */
    border-right: 1px solid #ececec !important;
    padding-right: 40px !important;
    gap: 0 !important;
}
.mega-col:last-child {
    border-right: none !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
}
.mega-col-editorial {
    width: 160px !important;
    min-width: unset !important;
    max-width: unset !important;
}

/* ── Section labels ("Shop By", "By Occasion") ── */
.mega-section-label {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 11px !important;         /* exact DW */
    font-weight: 600 !important;
    letter-spacing: 2px !important;    /* exact DW: 2px tracking */
    text-transform: uppercase !important;
    color: #999999 !important;
    display: block !important;
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

/* ── Mega links — DW 14px ── */
.mega-link {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;         /* exact DW */
    font-weight: 400 !important;
    color: #444444 !important;
    letter-spacing: 0 !important;       /* DW: no extra spacing on links */
    text-decoration: none !important;
    padding: 4px 0 !important;          /* tight DW vertical rhythm */
    line-height: 1.5 !important;
    display: block !important;
    transition: color .14s !important;
    text-transform: none !important;
}
.mega-link:hover { color: #111111 !important; }
.mega-link.active {
    color: #111111 !important;
    font-weight: 500 !important;
}

/* "All Jewellery" — bold top link */
.mega-link-all {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #111111 !important;
    letter-spacing: 0 !important;
    padding-bottom: 10px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid #ececec !important;
    display: block !important;
    text-decoration: none !important;
    text-transform: none !important;
    transition: opacity .14s !important;
}
.mega-link-all:hover { opacity: .6 !important; }

/* ═══════════════════════════════════════════════════
   BUTTONS — DW rectangular, controlled sizing
══════════════════════════════════════════════════ */
.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 24px !important;
    height: 40px !important;            /* fixed height — DW uses consistent height */
    border-radius: 0 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: background .18s, color .18s, border-color .18s !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    line-height: 1 !important;
}
.btn:hover { transform: none !important; }

/* Black primary */
.btn-dark,
.btn-gold {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
    box-shadow: none !important;
}
.btn-dark:hover,
.btn-gold:hover {
    background: #2a2a2a !important;
    border-color: #2a2a2a !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Outline */
.btn-outline,
.btn-outline-dark,
.btn-outline-gold {
    background: transparent !important;
    color: #111111 !important;
    border: 1px solid #111111 !important;
    box-shadow: none !important;
}
.btn-outline:hover,
.btn-outline-dark:hover,
.btn-outline-gold:hover {
    background: #111111 !important;
    color: #ffffff !important;
    transform: none !important;
}

/* WA */
.btn-wa {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
    box-shadow: none !important;
}
.btn-wa:hover {
    background: #2a2a2a !important;
    border-color: #2a2a2a !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════
   PRODUCT FILTER CHIPS — DW outlined square chips
══════════════════════════════════════════════════ */
.filter-chip label,
.filter-chip span {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════════
   SECTION HEADINGS — DW centered, editorial
══════════════════════════════════════════════════ */
.section-eyebrow {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #999999 !important;
    margin-bottom: 12px !important;
}
.section-eyebrow::before,
.section-eyebrow::after { display: none !important; }

.section-title {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: clamp(22px, 3vw, 32px) !important;
    font-weight: 300 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #111111 !important;
    line-height: 1.2 !important;
}

.section-subtitle {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #666666 !important;
    letter-spacing: 0 !important;
    line-height: 1.65 !important;
    margin-top: 10px !important;
}

/* ═══════════════════════════════════════════════════
   PRODUCT CARDS — DW clean proportions
══════════════════════════════════════════════════ */
.product-grid {
    gap: 1px !important;
    background: #e0e0e0 !important;
}
.product-card {
    background: #ffffff !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
.product-card:hover {
    transform: none !important;
    box-shadow: none !important;
}
.product-card:hover img { transform: scale(1.04) !important; }

.card-title,
.product-title,
.product-name {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #111111 !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}
.card-price,
.product-price,
.price-current {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #111111 !important;
    letter-spacing: 0 !important;
}
.price-old,
.card-price-old {
    font-size: 13px !important;
    color: #999999 !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
}
.card-actions .btn {
    width: 100% !important;
    height: 36px !important;
    font-size: 12px !important;
    letter-spacing: .08em !important;
}

/* Product badge: "BUY 2 GET 20% OFF" style */
.product-badge,
.card-badge,
.badge {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════════
   MOBILE MENU — DW right drawer refinement
══════════════════════════════════════════════════ */
.mobile-menu-nav a {
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;    /* sentence case like DW desktop nav */
    padding: 11px 24px !important;
}
.mobile-cat-label {
    font-size: 11px !important;
    letter-spacing: 2px !important;
}

/* ═══════════════════════════════════════════════════
   GLOBAL BORDERS — replace dark rgba rules with #ececec
══════════════════════════════════════════════════ */
.product-price-panel,
.product-desc-section,
.filter-bar,
.filter-panel {
    border-color: #ececec !important;
    border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — updated for new heights
══════════════════════════════════════════════════ */
@media (max-width: 899px) {
    .site-nav { display: none !important; }
    .info-bar  { display: none !important; }
    .promo-bar { height: 28px !important; }
    .promo-set span { font-size: 10px !important; }
    .header-inner { padding: 0 16px !important; }
    .header-logo {
        font-size: 13px !important;
        letter-spacing: 6px !important;
        padding-right: 6px !important;
    }
    .header-icon { width: 34px !important; height: 42px !important; }
    .header-icon svg { width: 17px !important; height: 17px !important; }
}
@media (max-width: 479px) {
    .header-logo {
        font-size: 11px !important;
        letter-spacing: 4px !important;
        padding-right: 4px !important;
    }
    .header-left .lang-switcher { display: none !important; }
}

/* Tablet nav */
@media (min-width: 900px) and (max-width: 1199px) {
    .nav-links > li > a {
        padding: 0 12px !important;
        font-size: 13px !important;
    }
    .header-logo {
        font-size: 15px !important;
        letter-spacing: 8px !important;
        padding-right: 8px !important;
    }
    .mega-col { width: 155px !important; margin-right: 28px !important; padding-right: 28px !important; }
}

/* Large desktop */
@media (min-width: 1200px) {
    .nav-links > li > a { padding: 0 18px !important; }
}



/* ═══════════════════════════════════════════════════════
   SECTION 35 — TARGETED BUG FIXES
   Fixes specificity conflicts, gold colour bleed, visited
   link colours, footer, and globe language picker.
   v9
══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   1. INFO BAR — kill uppercase at EVERY selector level
      Section 32 had .info-item span { uppercase !important }
      which beats .info-item { none !important }.
      Use higher-specificity selectors here to win.
───────────────────────────────────────────────────── */
.info-bar .info-item,
.info-bar .info-item span,
.info-bar .info-item a,
.info-bar-inner .info-item,
.info-bar-inner .info-item span {
    text-transform: none !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: #333333 !important;
}

/* Ensure centering is correct */
.info-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #ececec !important;
}
.info-bar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
.info-item {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 24px !important;
    white-space: nowrap !important;
}
.info-item svg {
    width: 14px !important;
    height: 14px !important;
    opacity: .55 !important;
    stroke-width: 1.5 !important;
    flex-shrink: 0 !important;
}
.info-sep {
    width: 1px !important;
    height: 13px !important;
    background: #d0d0d0 !important;
    flex-shrink: 0 !important;
}

/* ─────────────────────────────────────────────────────
   2. NAV LINKS — strip ALL gold/brown colour states
      Old rule at ~line 245: .nav-links li a:hover/active
      had background: var(--gold-subtle) which bled gold.
───────────────────────────────────────────────────── */
.nav-links > li > a,
.nav-links > li > a:link,
.nav-links > li > a:visited,
.nav-links > li > a:hover,
.nav-links > li > a:focus,
.nav-links > li > a:active,
.nav-links > li > a.active,
.site-nav .nav-links li a,
.site-nav .nav-links li a:hover,
.site-nav .nav-links li a.active {
    color: #111111 !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Active underline: strictly black, no gold */
.nav-links > li > a::after {
    background: #111111 !important;
    height: 1px !important;
}

/* ─────────────────────────────────────────────────────
   3. GLOBE LANGUAGE PICKER
───────────────────────────────────────────────────── */
.lang-globe {
    position: relative;
    display: flex;
    align-items: center;
}
.lang-globe-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    padding: 0 2px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #555555;
    transition: color .15s;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.lang-globe-btn:hover { color: #111111; }
.lang-globe-btn svg {
    flex-shrink: 0;
    stroke-width: 1.4;
}
.lang-globe-current {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: inherit;
    line-height: 1;
}

/* Dropdown panel */
.lang-globe-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #ffffff;
    border: 1px solid #ececec;
    min-width: 150px;
    z-index: 1200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .14s ease, transform .14s ease, visibility 0s .14s;
    pointer-events: none;
}
.lang-globe-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .14s ease, transform .14s ease;
    pointer-events: auto;
}
.lang-globe-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    text-decoration: none;
    color: #444444;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    transition: background .12s;
    border-bottom: 1px solid #f5f5f5;
}
.lang-globe-item:last-child { border-bottom: none; }
.lang-globe-item:hover { background: #f9f9f9; color: #111111; }
.lang-globe-item.active {
    color: #111111;
    font-weight: 500;
}
.lang-globe-code {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    color: inherit;
    min-width: 18px;
}
.lang-globe-name {
    font-size: 13px;
    color: inherit;
}

/* ─────────────────────────────────────────────────────
   4. FOOTER — replace gold with black/grey
───────────────────────────────────────────────────── */
.site-footer,
footer {
    background: #ffffff !important;
    border-top: 1px solid #ececec !important;
    color: #111111 !important;
}
/* Footer was designed for dark bg — override all white text */
.footer-col-title {
    color: #111111 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-bottom: 16px !important;
}
.footer-links a {
    color: #555555 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
    line-height: 1.9 !important;
    display: block !important;
    transition: color .14s !important;
}
.footer-links a:hover { color: #111111 !important; }
.footer-links a:visited { color: #555555 !important; }
.footer-bottom {
    border-top: 1px solid #ececec !important;
    color: #888888 !important;
    font-size: 12px !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
/* Brand block in footer */
.footer-brand .logo-name {
    color: #111111 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
}
.footer-brand .logo-sub {
    color: #888888 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 11px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}
.footer-brand p {
    color: #666666 !important;
    font-size: 13px !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    line-height: 1.65 !important;
}

/* ─────────────────────────────────────────────────────
   5. GLOBAL LINK COLOUR RESET
      Kills browser purple/blue visited state everywhere.
───────────────────────────────────────────────────── */
a, a:link, a:visited {
    color: inherit;
    text-decoration: none;
}
/* Override specifically in nav */
.site-nav a,
.site-nav a:link,
.site-nav a:visited {
    color: #111111 !important;
}
/* Mobile menu links */
.mobile-menu-nav a,
.mobile-menu-nav a:link,
.mobile-menu-nav a:visited {
    color: #111111 !important;
}

/* ─────────────────────────────────────────────────────
   6. FILTER BAR & SEARCH — DW square styling
───────────────────────────────────────────────────── */
.filter-bar,
.filter-panel {
    border: 1px solid #ececec !important;
    border-radius: 0 !important;
    background: #ffffff !important;
}
.filter-bar select,
.filter-sort select,
select.filter-select {
    border: 1px solid #ececec !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    color: #111111 !important;
    height: 38px !important;
    padding: 0 12px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
/* Search input */
input[type="text"],
input[type="search"],
.search-input {
    border: 1px solid #ececec !important;
    border-radius: 0 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    color: #111111 !important;
}
input[type="text"]::placeholder,
input[type="search"]::placeholder {
    color: #aaaaaa !important;
    font-weight: 400 !important;
}

/* ─────────────────────────────────────────────────────
   7. EMPTY STATE — remove gold diamond icon
───────────────────────────────────────────────────── */
.empty-state-icon,
.empty-icon,
[class*="empty"] svg {
    color: #cccccc !important;
    opacity: .5 !important;
}
.empty-state-title,
.empty-title {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #333333 !important;
    letter-spacing: .04em !important;
}
.empty-state-text,
.empty-text {
    font-size: 13px !important;
    color: #888888 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* ─────────────────────────────────────────────────────
   8. PAGE HEADINGS (catalogue title, etc.)
───────────────────────────────────────────────────── */
.page-title,
.catalogue-title,
.products-title {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: clamp(20px, 3vw, 28px) !important;
    font-weight: 300 !important;
    letter-spacing: .04em !important;
    color: #111111 !important;
    text-transform: none !important;
}
.page-subtitle,
.catalogue-count,
.products-count {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    color: #888888 !important;
    font-weight: 400 !important;
}

/* ─────────────────────────────────────────────────────
   9. MOBILE — hide globe on very small screens
───────────────────────────────────────────────────── */
@media (max-width: 359px) {
    .lang-globe { display: none !important; }
}



/* ═══════════════════════════════════════════════════════
   SECTION 36 — EDITORIAL HOMEPAGE SECTION
   Daniel Wellington-accurate layout.
   Two lifestyle cards · Promo text · Three feature cards
   v10
══════════════════════════════════════════════════════ */

/* ── Outer section ──────────────────────────────────── */
.ed-section {
    background: #f7f5f2;
    padding: 0;                     /* duo cards sit flush at top */
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════
   PART 1 — TWO LIFESTYLE CARDS
   DW: 2×equal, tiny 2px gap, 2.1:1 aspect ratio,
   centered text overlay, zoom+darken on hover
══════════════════════════════════════════════════ */
.ed-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    max-width: 1200px;
    margin: 0 auto;
    /* no side padding — cards go edge-to-edge in container */
}

.ed-card {
    position: relative;
    aspect-ratio: 2.1 / 1;         /* DW exact proportion */
    overflow: hidden;
    display: block;
    text-decoration: none;
    background: #c8b8a4;            /* fallback */
}

/* ── Card background (replace with real photo via bg-image) ── */
.ed-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .65s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
}

/* Women's — warm sandy editorial tones */
.ed-card-bg--women {
    background: linear-gradient(
        145deg,
        #d4c3af 0%,
        #c8b49e 30%,
        #b8a08a 60%,
        #a89078 100%
    );
    /* To use real photo: background-image: url('/images/editorial/women.jpg'); */
}

/* Men's — cool slate editorial tones */
.ed-card-bg--men {
    background: linear-gradient(
        145deg,
        #8c8480 0%,
        #7c7470 30%,
        #6c6460 60%,
        #5c544e 100%
    );
    /* To use real photo: background-image: url('/images/editorial/men.jpg'); */
}

/* Hover zoom */
.ed-card:hover .ed-card-bg {
    transform: scale(1.05);
}

/* ── Dark overlay ── */
.ed-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.22);
    transition: background .4s ease;
}
.ed-card:hover .ed-card-overlay {
    background: rgba(0,0,0,.36);
}

/* ── Card text (absolutely centered — DW exact) ── */
.ed-card-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
}

/*
   DW card label: uppercase, ~22-28px, font-weight 500,
   letter-spacing ~0.15em, white
*/
.ed-card-label {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(16px, 2.2vw, 26px);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.2;
    display: block;
}

/* "Shop now" micro-CTA below label */
.ed-card-cta {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
    display: block;
    border-bottom: 1px solid rgba(255,255,255,.5);
    padding-bottom: 1px;
    transition: color .25s, border-color .25s;
}
.ed-card:hover .ed-card-cta {
    color: #ffffff;
    border-color: rgba(255,255,255,.9);
}

/* ═══════════════════════════════════════════════════
   PART 2 — PROMO TEXT BLOCK
   DW: centered, compact, three typographic levels
══════════════════════════════════════════════════ */
.ed-promo {
    text-align: center;
    padding: 48px 24px 44px;
    max-width: 560px;
    margin: 0 auto;
}

/*
   "Timeless gifts that stand out" — DW: 14px, regular,
   letter-spacing ~0, barely any weight, warm grey
*/
.ed-promo-line {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    letter-spacing: 0;
    line-height: 1.5;
    margin-bottom: 6px;
}

/*
   "20% OFF GIFT SETS" — DW: ~24-28px, uppercase,
   bold visual anchor, tight letter-spacing
*/
.ed-promo-title {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #111111;
    line-height: 1.2;
    margin: 0 0 10px;
}

/* Supporting micro-text */
.ed-promo-sub {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #888888;
    letter-spacing: 0;
    line-height: 1.55;
    margin: 0;
}

/* ═══════════════════════════════════════════════════
   PART 3 — THREE FEATURE PRODUCT CARDS
   DW: equal-width, soft warm bg, product image
   centered, minimal label below, hover lighten
══════════════════════════════════════════════════ */
.ed-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;                       /* DW: tiny gap like product grid */
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 64px;
}

.ed-feat {
    background: #f0ece6;            /* DW warm off-white card bg */
    display: block;
    text-decoration: none;
    padding: 44px 24px 32px;
    text-align: center;
    transition: background .25s ease;
}
.ed-feat:hover {
    background: #e8e2da;
}

/* ── Visual / illustration area ── */
.ed-feat-visual {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #a09080;
}

/*
   DW product image: centered, let the product breathe.
   Real product photos go here via img tag or bg-image.
   For now SVG icons give the right spatial rhythm.
*/
.ed-feat-visual svg {
    opacity: .45;
    transition: opacity .3s ease;
}
.ed-feat:hover .ed-feat-visual svg {
    opacity: .65;
}

/*
   "Gift Sets for her" — DW: 14px, sentence case,
   regular weight, centered, no uppercase
*/
.ed-feat-label {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #111111;
    letter-spacing: 0;
    line-height: 1.4;
    text-align: center;
    text-transform: none;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */

/* Tablet: tighten padding, keep 2-col + 3-col */
@media (min-width: 600px) and (max-width: 899px) {
    .ed-card-label { font-size: 18px; letter-spacing: .14em; }
    .ed-promo { padding: 40px 24px 36px; }
    .ed-trio { gap: 2px; }
    .ed-feat { padding: 32px 16px 24px; }
    .ed-feat-visual { height: 140px; }
}

/* Mobile: stack vertically */
@media (max-width: 599px) {
    .ed-duo {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .ed-card {
        aspect-ratio: 1.7 / 1;     /* slightly taller on mobile */
    }
    .ed-card-label {
        font-size: 20px;
        letter-spacing: .14em;
    }
    .ed-promo {
        padding: 36px 24px 32px;
    }
    .ed-promo-title {
        font-size: 22px;
    }
    .ed-trio {
        grid-template-columns: 1fr;
        gap: 2px;
        padding-bottom: 48px;
    }
    .ed-feat {
        padding: 28px 24px 24px;
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 0 20px;
        text-align: left;
        align-items: center;
    }
    .ed-feat-visual {
        height: 80px;
        margin-bottom: 0;
    }
    .ed-feat-label {
        text-align: left;
    }
}

/* Large screens: tighten the max-width feel */
@media (min-width: 1400px) {
    .ed-duo  { max-width: 1320px; }
    .ed-trio { max-width: 1320px; }
}



/* ═══════════════════════════════════════════════════════════════════
   SECTION 37 — DW Category Browse
   .dw-cat  |  .dw-decide  |  .dw-story
═══════════════════════════════════════════════════════════════════ */

/* ── Part 1: The Details That Matter — 4 Category Cards ── */

.dw-cat {
    padding: 72px 0 56px;
    background: #fff;
}

.dw-cat-header {
    text-align: center;
    margin-bottom: 44px;
    padding: 0 24px;
}

.dw-cat-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 2rem !important;
    font-weight: 300 !important;
    letter-spacing: 0.02em !important;
    color: #111 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.dw-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

.dw-cat-card {
    display: block;
    text-decoration: none !important;
    text-align: center;
    padding: 0 10px;
    color: inherit !important;
}

.dw-cat-img-wrap {
    aspect-ratio: 3 / 4;
    width: 100%;
    margin-bottom: 14px;
    overflow: hidden;
}

.dw-cat-img {
    width: 100%;
    height: 100%;
    transition: transform 0.65s cubic-bezier(.25,.46,.45,.94);
}

.dw-cat-card:hover .dw-cat-img {
    transform: scale(1.05);
}

/* Category image placeholder gradients */
.dw-cat-img--rings      { background: linear-gradient(160deg, #e8ddd3 0%, #c4a88c 100%); }
.dw-cat-img--earrings   { background: linear-gradient(160deg, #ddd6cc 0%, #b0a090 100%); }
.dw-cat-img--bracelets  { background: linear-gradient(160deg, #e2d8ce 0%, #b89878 100%); }
.dw-cat-img--necklaces  { background: linear-gradient(160deg, #e6dfd8 0%, #c0aa98 100%); }

.dw-cat-name {
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #111 !important;
    margin: 0 !important;
}

/* ── Part 2: Can't Decide? — Split CTA Block ── */

.dw-decide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 440px;
    background: #f7f5f2;
}

.dw-decide-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 72px 72px 72px 80px;
}

.dw-decide-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 2.6rem !important;
    font-weight: 300 !important;
    letter-spacing: 0.01em !important;
    color: #111 !important;
    margin: 0 0 18px !important;
    line-height: 1.15 !important;
}

.dw-decide-sub {
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    color: #666 !important;
    margin: 0 0 36px !important;
    max-width: 380px;
}

.dw-decide-btn {
    display: inline-block;
    align-self: flex-start;
    padding: 11px 30px;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: #111 !important;
    background: transparent !important;
    border: 1px solid #111 !important;
    text-decoration: none !important;
    transition: background 0.22s ease, color 0.22s ease;
    cursor: pointer;
}

.dw-decide-btn:hover {
    background: #111 !important;
    color: #fff !important;
}

.dw-decide-img {
    background: linear-gradient(145deg, #d8cfc6 0%, #a89070 45%, #8a7060 100%);
    min-height: 440px;
}

/* ── Part 3: Details Made to Last — Editorial Story ── */

.dw-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 500px;
    background: #fff;
}

.dw-story-img {
    background: linear-gradient(155deg, #ccc4b8 0%, #9c8878 50%, #7c6858 100%);
    min-height: 500px;
}

.dw-story-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 72px 80px 72px 72px;
}

.dw-story-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 2.2rem !important;
    font-weight: 300 !important;
    letter-spacing: 0.01em !important;
    color: #111 !important;
    margin: 0 0 22px !important;
    line-height: 1.25 !important;
}

.dw-story-body {
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
    color: #666 !important;
    margin: 0 0 36px !important;
    max-width: 440px;
}

.dw-story-cats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    row-gap: 10px;
}

.dw-story-cat-link {
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #555 !important;
    text-decoration: none !important;
    transition: color 0.2s;
    white-space: nowrap;
}

.dw-story-cat-link:hover {
    color: #111 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* Pipe separators between category links */
.dw-story-cat-link + .dw-story-cat-link::before {
    content: '|';
    display: inline-block;
    margin: 0 12px;
    color: #ccc;
    font-weight: 300;
    text-decoration: none !important;
}

/* ── Responsive ── */

@media (max-width: 1024px) {
    .dw-cat-grid  { max-width: 960px; padding: 0 24px; }
    .dw-decide-text { padding: 56px 48px 56px 56px; }
    .dw-story-text  { padding: 56px 56px 56px 48px; }
}

@media (max-width: 900px) {
    .dw-cat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 16px;
        padding: 0 20px;
    }

    .dw-decide,
    .dw-story {
        grid-template-columns: 1fr;
    }

    .dw-decide-img  { min-height: 300px; order: -1; }
    .dw-story-img   { min-height: 280px; }

    .dw-decide-text,
    .dw-story-text {
        padding: 48px 28px;
    }

    .dw-decide-title,
    .dw-story-title { font-size: 1.9rem !important; }

    .dw-decide-sub,
    .dw-story-body  { max-width: 100%; }
}

@media (max-width: 540px) {
    .dw-cat { padding: 48px 0 40px; }
    .dw-cat-title   { font-size: 1.6rem !important; }
    .dw-cat-grid    { gap: 24px 12px; }

    .dw-decide-title,
    .dw-story-title { font-size: 1.65rem !important; }

    .dw-decide-text,
    .dw-story-text  { padding: 40px 20px; }

    .dw-decide-img  { min-height: 240px; }
    .dw-story-img   { min-height: 220px; }
}


/* ═══════════════════════════════════════════════════════════════════
   SECTION 38 — DW Pixel-Perfect Header
   Logo typography | Nav centering | Icon sizing | Lang globe
   Font: Josefin Sans (geometric, Futura-inspired, loaded via Google Fonts)
═══════════════════════════════════════════════════════════════════ */

/* ── Logo — solid, prominent, DW calibre ── */

.header-logo {
    font-family: 'Josefin Sans', 'Futura PT', 'Avenir Next', 'Century Gothic', sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    letter-spacing: 6px !important;
    text-transform: uppercase !important;
    padding-right: 6px !important;   /* compensate last-char gap */
    color: #111 !important;
    text-decoration: none !important;
    line-height: 1 !important;
    white-space: nowrap;
}

/* ── Nav links — uppercase, geometric, evenly spaced ── */

.nav-links {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 0 !important;
    list-style: none !important;
}

.nav-links > li {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    height: 52px !important;
}

.nav-links > li > a {
    font-family: 'Josefin Sans', 'Futura PT', 'Avenir Next', 'Century Gothic', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #111 !important;
    text-decoration: none !important;
    background: transparent !important;
    padding: 0 16px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap;
    transition: opacity 0.15s ease !important;
}

.nav-links > li > a:link,
.nav-links > li > a:visited {
    color: #111 !important;
    background: transparent !important;
}

.nav-links > li > a:hover {
    color: #111 !important;
    background: transparent !important;
    opacity: 0.65 !important;
}

/* Active underline — thin 1px rule below active tab */
.nav-links > li > a.active {
    color: #111 !important;
    background: transparent !important;
    opacity: 1 !important;
    position: relative !important;
}

.nav-links > li > a.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 16px !important;
    right: 16px !important;
    height: 1px !important;
    background: #111 !important;
}

/* Chevron in nav links — keep it small */
.nav-links > li > a > svg {
    width: 9px !important;
    height: 6px !important;
    flex-shrink: 0 !important;
    opacity: 0.7 !important;
}

/* ── Header icons — consistent size & spacing ── */

.header-right {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
}

.header-icon {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    color: #111 !important;
    transition: opacity 0.15s ease !important;
    text-decoration: none !important;
}

.header-icon:hover {
    opacity: 0.6 !important;
    color: #111 !important;
}

.header-icon svg {
    width: 19px !important;
    height: 19px !important;
    display: block !important;
}

/* WA icon fill color */
.header-wa-icon svg {
    width: 18px !important;
    height: 18px !important;
}

/* ── Header left — hamburger + lang globe spacing ── */

.header-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ── Hamburger bars ── */
.header-hamburger {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
}

.header-hamburger span {
    display: block !important;
    width: 20px !important;
    height: 1px !important;
    background: #111 !important;
    transition: all 0.25s ease !important;
}

/* ── Lang globe button — compact, DW-aligned ── */

.lang-globe-btn {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 4px 6px !important;
    color: #111 !important;
}

.lang-globe-btn svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    opacity: 0.8 !important;
}

.lang-globe-current {
    font-family: 'Josefin Sans', 'Futura PT', 'Avenir Next', sans-serif !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #111 !important;
}

.lang-globe-btn:hover .lang-globe-current,
.lang-globe-btn:hover svg {
    opacity: 0.6 !important;
}

/* ── Lang globe dropdown ── */

.lang-globe-menu {
    min-width: 160px !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    border: 1px solid #e8e8e8 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
}

.lang-globe-item {
    padding: 10px 16px !important;
    gap: 10px !important;
}

.lang-globe-code {
    font-family: 'Josefin Sans', 'Futura PT', 'Avenir Next', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
}

.lang-globe-name {
    font-size: 12px !important;
    letter-spacing: 0.3px !important;
}


/* ═══════════════════════════════════════════════════════════════════
   SECTION 39 — Premium 4-Column Mega Menu
   DW / Tiffany / Cartier / Mejuri inspired
   Layout: Product Type | Material | Collections | Featured Image
═══════════════════════════════════════════════════════════════════ */

/* ── Reset mega-menu chrome ── */
.mega-menu {
    border-top: 1px solid #e8e8e8 !important;
    border-bottom: 1px solid #e8e8e8 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.06) !important;
    padding: 0 !important;
}

/* ── Mega body — grid foundation ── */
.mega-body {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 40px 48px !important;
    display: grid !important;
    align-items: start !important;
    gap: 0 !important;
}

/* Grid column variants */
.mega-body--4col {
    grid-template-columns: 1fr 1fr 1fr 260px !important;
    column-gap: 44px !important;
}

.mega-body--3col {
    grid-template-columns: 1fr 1fr 260px !important;
    column-gap: 44px !important;
}

.mega-body--2col {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 60px !important;
    max-width: 720px !important;
}

/* ── Column header label ── */
.mega-col-head {
    display: block !important;
    font-family: 'Josefin Sans', 'Futura PT', 'Avenir Next', sans-serif !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: #aaa !important;
    margin: 0 0 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #efefef !important;
}

/* ── Suppress old-style section labels ── */
.mega-section-label {
    display: none !important;
}

/* ── Mega links — luxury premium ── */
.mega-link {
    display: block !important;
    font-family: 'Josefin Sans', 'Futura PT', 'Avenir Next', 'Century Gothic', sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: #555 !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    padding: 4px 0 !important;
    line-height: 1.5 !important;
    transition: color 0.15s ease !important;
}

.mega-link:link,
.mega-link:visited {
    color: #555 !important;
    background: none !important;
}

.mega-link:hover,
.mega-link:focus {
    color: #111 !important;
    background: none !important;
    text-decoration: none !important;
}

/* Shop All / View All — bolder anchor link */
.mega-link--all {
    font-weight: 600 !important;
    color: #111 !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 6px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.mega-link--all:link,
.mega-link--all:visited {
    color: #111 !important;
}

.mega-link--all:hover {
    color: #000 !important;
}

/* Suppress old mega-link-all class */
.mega-link.mega-link-all {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    color: #111 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    margin-bottom: 6px !important;
    padding-bottom: 12px !important;
}

/* ── Featured image column ── */
.mega-col--feat {
    align-self: stretch !important;
    min-height: 260px !important;
}

.mega-feat {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 260px !important;
    overflow: hidden !important;
}

.mega-feat-img {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    transition: transform 0.65s cubic-bezier(.25,.46,.45,.94) !important;
}

.mega-feat:hover .mega-feat-img {
    transform: scale(1.04) !important;
}

/* Featured image gradient variants */
.mega-feat--jewellery .mega-feat-img {
    background: linear-gradient(160deg, #e0d4c8 0%, #c0a080 45%, #907060 100%) !important;
}

.mega-feat--watches .mega-feat-img {
    background: linear-gradient(160deg, #d0d4d8 0%, #909498 45%, #505458 100%) !important;
}

.mega-feat--gifts .mega-feat-img {
    background: linear-gradient(160deg, #dcd4e8 0%, #b09cc0 45%, #887090 100%) !important;
}

/* Gradient overlay: dark at bottom, transparent at top */
.mega-feat-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,.40) 0%, rgba(0,0,0,.0) 55%) !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding-bottom: 22px !important;
}

/* CTA button inside featured image */
.mega-feat-cta {
    display: inline-block !important;
    padding: 8px 18px !important;
    font-family: 'Josefin Sans', 'Futura PT', sans-serif !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.75) !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
    white-space: nowrap;
}

.mega-feat-cta:hover {
    background: #fff !important;
    color: #111 !important;
    border-color: #fff !important;
}

/* ── Column separator (subtle right border on text cols) ── */
.mega-body--4col .mega-col:not(.mega-col--feat) {
    border-right: 1px solid #f2f2f2 !important;
    padding-right: 44px !important;
}

.mega-body--4col .mega-col:last-of-type:not(.mega-col--feat) {
    border-right: none !important;
    padding-right: 0 !important;
}

.mega-body--3col .mega-col:not(.mega-col--feat) {
    border-right: 1px solid #f2f2f2 !important;
    padding-right: 44px !important;
}

.mega-body--3col .mega-col:nth-child(2):not(.mega-col--feat) {
    border-right: none !important;
    padding-right: 0 !important;
}

/* Remove any leftover flex/padding from old mega-col styles */
.mega-col {
    flex: none !important;
    padding-left: 0 !important;
}

/* ── Responsive: collapse featured column on smaller screens ── */
@media (max-width: 1100px) {
    .mega-body--4col {
        grid-template-columns: 1fr 1fr 1fr !important;
    }
    .mega-col--feat { display: none !important; }

    .mega-body--3col {
        grid-template-columns: 1fr 1fr !important;
    }
    .mega-body--3col .mega-col--feat { display: none !important; }
}

@media (max-width: 800px) {
    .mega-body--4col,
    .mega-body--3col,
    .mega-body--2col {
        grid-template-columns: 1fr !important;
        padding: 24px !important;
    }
    .mega-col--feat { display: none !important; }

    .mega-body--4col .mega-col:not(.mega-col--feat),
    .mega-body--3col .mega-col:not(.mega-col--feat) {
        border-right: none !important;
        padding-right: 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        padding-bottom: 16px !important;
        margin-bottom: 16px !important;
    }
}


/* ── Section 40 — Nav link weight ── */
.nav-links > li > a { font-weight: 600 !important; }


/* ═══════════════════════════════════════════════════════════════════
   SECTION 41 — Signature Collections Editorial Campaign
   DW / Tiffany / Cartier / Mejuri inspired luxury campaign section
═══════════════════════════════════════════════════════════════════ */

.sig-section {
    background: #faf9f7;
    overflow: hidden;
}

/* ── Editorial image grid ── */

.sig-images {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 3px;
    background: #faf9f7;
}

/* Large primary image (left, 60%) */
.sig-img-primary {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(255,248,240,.55) 0%, transparent 65%),
        linear-gradient(145deg, #d8c8b4 0%, #b89870 40%, #9a7850 70%, #7a5c38 100%);
    min-height: 520px;
    transition: transform 0.8s cubic-bezier(.25,.46,.45,.94);
    transform-origin: center;
}

.sig-images:hover .sig-img-primary {
    transform: scale(1.02);
}

/* Secondary column — stacked two smaller images (right, 40%) */
.sig-img-secondary {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
}

.sig-img-sec-top {
    background:
        radial-gradient(ellipse at 70% 30%, rgba(255,252,248,.5) 0%, transparent 60%),
        linear-gradient(135deg, #e0d8d0 0%, #c4b4a0 50%, #a89080 100%);
    transition: transform 0.8s cubic-bezier(.25,.46,.45,.94);
}

.sig-img-sec-top:hover {
    transform: scale(1.025);
}

.sig-img-sec-bot {
    background:
        radial-gradient(ellipse at 40% 70%, rgba(248,244,240,.5) 0%, transparent 60%),
        linear-gradient(145deg, #ccc4b8 0%, #a89888 50%, #908070 100%);
    transition: transform 0.8s cubic-bezier(.25,.46,.45,.94);
}

.sig-img-sec-bot:hover {
    transform: scale(1.025);
}

/* ── Centered campaign copy ── */

.sig-content {
    text-align: center;
    padding: 80px 24px 60px;
    max-width: 640px;
    margin: 0 auto;
}

.sig-eyebrow {
    font-family: 'Josefin Sans', 'Futura PT', 'Avenir Next', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #b8a898;
    margin: 0 0 22px;
}

.sig-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 3.4rem !important;
    font-weight: 300 !important;
    letter-spacing: 0.03em !important;
    color: #111 !important;
    margin: 0 0 26px !important;
    line-height: 1.12 !important;
}

.sig-body {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.85;
    color: #888;
    margin: 0 0 40px;
    letter-spacing: 0.3px;
}

/* Black filled CTA button — luxury retail standard */
.sig-btn {
    display: inline-block;
    padding: 14px 48px;
    font-family: 'Josefin Sans', 'Futura PT', 'Avenir Next', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #fff !important;
    background: #111 !important;
    text-decoration: none !important;
    border: 1px solid #111;
    transition: background 0.22s ease, color 0.22s ease;
}

.sig-btn:hover {
    background: #333 !important;
    color: #fff !important;
}

/* Thin ornament line above the title */
.sig-content::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: #c8b8a8;
    margin: 0 auto 28px;
}

/* ── Collection tags row ── */

.sig-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 0 24px 72px;
    max-width: 900px;
    margin: 0 auto;
}

.sig-tag {
    display: inline-block;
    padding: 7px 20px;
    font-family: 'Josefin Sans', 'Futura PT', 'Avenir Next', sans-serif;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #888;
    text-decoration: none;
    border: 1px solid #ddd;
    background: transparent;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.sig-tag:hover {
    color: #111;
    border-color: #111;
    background: transparent;
}

/* ── Responsive ── */

@media (max-width: 900px) {
    .sig-images {
        grid-template-columns: 1fr 1fr;
    }

    .sig-img-primary { min-height: 360px; }

    .sig-title { font-size: 2.6rem !important; }
    .sig-content { padding: 64px 24px 48px; }
}

@media (max-width: 640px) {
    .sig-images {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .sig-img-secondary { display: none; }
    .sig-img-primary   { min-height: 280px; }

    .sig-title { font-size: 2.1rem !important; }
    .sig-content { padding: 52px 20px 40px; }
    .sig-btn { padding: 13px 36px; }
    .sig-tags { padding: 0 20px 56px; }
}


/* ═══════════════════════════════════════════════════════════════════
   SECTION 42 — DW "The Details That Matter" Category Grid Redesign
   10-item editorial grid — Rings/Earrings/Bracelets/Necklaces/Watches
   /Bangles/Sterling Silver/White Gold/Titanium/Accessories
   Exact Daniel Wellington layout & spacing reference
═══════════════════════════════════════════════════════════════════ */

/* ── Section container ── */
.dw-cat {
    padding: 80px 0 88px !important;
    background: #ffffff !important;
}

/* ── Section header — centered, DW typography ── */
.dw-cat-header {
    text-align: center !important;
    margin-bottom: 48px !important;
    padding: 0 24px !important;
}

.dw-cat-title {
    font-family: 'Josefin Sans', 'Futura PT', 'Avenir Next', sans-serif !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;   /* sentence case — DW exact */
    color: #111 !important;
    margin: 0 0 12px !important;
    line-height: 1.2 !important;
}

.dw-cat-subtitle {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    color: #888 !important;
    margin: 0 auto !important;
    max-width: 560px;
    letter-spacing: 0.2px;
}

/* ── 5-column grid (2 rows of 5 for 10 items) ── */
.dw-cat-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 32px 20px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 32px !important;
}

/* ── Card ── */
.dw-cat-card {
    display: block !important;
    text-decoration: none !important;
    text-align: center !important;
    padding: 0 !important;
    color: inherit !important;
}

/* ── Image wrap — square aspect ratio matching DW ── */
.dw-cat-img-wrap {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
}

/* ── Image placeholder — very light neutral, DW product-on-white feel ── */
.dw-cat-img {
    width: 100% !important;
    height: 100% !important;
    background: #f4f3f0 !important;
    transition: transform 0.55s cubic-bezier(.25,.46,.45,.94) !important;
}

.dw-cat-card:hover .dw-cat-img {
    transform: scale(1.04) !important;
}

/* Individual card colours — extremely subtle, near-neutral, DW-clean */
.dw-cat-img--rings {
    background: radial-gradient(ellipse at 55% 50%, #e8d8c4 0%, #f5f2ee 75%) !important;
}

.dw-cat-img--earrings {
    background: radial-gradient(ellipse at 50% 55%, #e8d8c0 0%, #f4f2ed 75%) !important;
}

.dw-cat-img--bracelets {
    background: radial-gradient(ellipse at 45% 50%, #e4d4c0 0%, #f4f1ed 75%) !important;
}

.dw-cat-img--necklaces {
    background: radial-gradient(ellipse at 50% 45%, #e8e0d4 0%, #f5f3f0 75%) !important;
}

.dw-cat-img--watches {
    background: radial-gradient(ellipse at 50% 50%, #d8dce4 0%, #eeeff3 75%) !important;
}

.dw-cat-img--bangles {
    background: radial-gradient(ellipse at 55% 45%, #e4d4b8 0%, #f3f0e8 75%) !important;
}

.dw-cat-img--silver {
    background: radial-gradient(ellipse at 50% 50%, #d8dce4 0%, #eef0f3 75%) !important;
}

.dw-cat-img--whitegold {
    background: radial-gradient(ellipse at 50% 50%, #e0e4ec 0%, #f0f2f6 75%) !important;
}

.dw-cat-img--titanium {
    background: radial-gradient(ellipse at 50% 50%, #d4d8dc 0%, #eceef0 75%) !important;
}

.dw-cat-img--accessories {
    background: radial-gradient(ellipse at 50% 55%, #e8e0d8 0%, #f4f2ef 75%) !important;
}

/* ── Category name — DW exact: sentence case, bold, clean ── */
.dw-cat-name {
    font-family: 'Josefin Sans', 'Futura PT', 'Avenir Next', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;   /* NOT uppercase — DW sentence case */
    color: #111 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* ── Responsive breakpoints ── */

@media (max-width: 1100px) {
    .dw-cat-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        padding: 0 20px !important;
        gap: 24px 14px !important;
    }
}

@media (max-width: 860px) {
    .dw-cat-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 24px 14px !important;
    }

    .dw-cat { padding: 64px 0 72px !important; }
}

@media (max-width: 640px) {
    .dw-cat-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px 12px !important;
        padding: 0 16px !important;
    }

    .dw-cat-title { font-size: 22px !important; }
    .dw-cat { padding: 52px 0 60px !important; }
}

@media (max-width: 420px) {
    .dw-cat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px 12px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   § 43 — LUXURY MATERIAL BAR + TRUST BAR REDESIGN
   Replaces promo-bar (discount scrolling) with elegant material strip
═══════════════════════════════════════════════════════════════════ */

/* ── Material bar (beige, slow marquee) ── */
.material-bar {
    background: #EAE3D8 !important;
    overflow: hidden !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
}

.material-track {
    display: flex !important;
    width: max-content !important;
    animation: materialScroll 40s linear infinite !important;
    will-change: transform !important;
}

.material-set {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding-right: 0 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.material-set span {
    font-family: 'Josefin Sans', 'Futura PT', 'Century Gothic', sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 400 !important;
    letter-spacing: .22em !important;
    color: #5C4F3A !important;
    text-transform: uppercase !important;
    padding: 0 18px !important;
    line-height: 1 !important;
}

.material-dot {
    color: #A8916E !important;
    font-size: 9px !important;
    padding: 0 !important;
    opacity: .7 !important;
}

@keyframes materialScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .material-track { animation: none !important; }
    .material-set:last-child { display: none !important; }
}

/* ── Trust bar overrides ── */
.info-bar {
    background: #fff !important;
    border-bottom: 1px solid #EBEBEB !important;
}

.info-bar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    height: 100% !important;
}

.info-bar .info-item {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 0 20px !important;
    flex: 1 !important;
    justify-content: center !important;
    min-width: 0 !important;
}

.info-bar .info-item svg {
    flex-shrink: 0 !important;
    opacity: .75 !important;
    stroke: #1A1A1A !important;
}

.info-bar .info-item span {
    font-family: 'Josefin Sans', 'Futura PT', 'Century Gothic', sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 400 !important;
    letter-spacing: .16em !important;
    color: #1A1A1A !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.info-bar .info-sep {
    width: 1px !important;
    height: 14px !important;
    background: #D8D8D8 !important;
    flex-shrink: 0 !important;
}

/* Mobile: collapse to 2 items on tiny screens */
@media (max-width: 640px) {
    .info-bar .info-item:nth-child(5),
    .info-bar .info-item:nth-child(6),
    .info-bar .info-sep:nth-child(5),
    .info-bar .info-sep:nth-child(6) {
        display: none !important;
    }

    .info-bar .info-item span {
        font-size: 8.5px !important;
        letter-spacing: .12em !important;
    }

    .info-bar .info-item {
        padding: 0 10px !important;
    }

    .material-set span {
        font-size: 8.5px !important;
        padding: 0 12px !important;
    }
}

/* Ensure old promo-bar never renders */
.promo-bar {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 44 — WHY SRI TEMASEK — Premium dark card redesign
═══════════════════════════════════════════════════════════════════ */

.trust-section {
    background: #0D0D0D !important;
    padding: 96px 0 !important;
}

.trust-section .section-header {
    margin-bottom: 0 !important;
}

.trust-section .section-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: clamp(26px, 3vw, 36px) !important;
    font-weight: 400 !important;
    letter-spacing: .06em !important;
    color: #F0EDE8 !important;
    margin-bottom: 8px !important;
}

.trust-section .section-subtitle {
    color: rgba(240,237,232,.45) !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 15px !important;
}

.trust-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    margin-top: 56px !important;
    max-width: 1060px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 24px !important;
}

/* Premium bordered card */
.trust-card {
    background: #141414 !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 2px !important;
    padding: 36px 28px !important;
    text-align: left !important;
    position: relative !important;
    overflow: hidden !important;
    transition: border-color .35s ease, transform .28s ease, box-shadow .35s ease !important;
}

.trust-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at 15% 85%, rgba(184,152,90,.06) 0%, transparent 55%) !important;
    opacity: 0 !important;
    transition: opacity .4s ease !important;
    pointer-events: none !important;
}

.trust-card:hover {
    border-color: rgba(184,152,90,.32) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,.4) !important;
}

.trust-card:hover::before {
    opacity: 1 !important;
}

/* Icon circle */
.trust-card-icon {
    width: 40px !important;
    height: 40px !important;
    border: 1px solid rgba(184,152,90,.28) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 22px !important;
    background: transparent !important;
    flex-shrink: 0 !important;
}

.trust-card-icon svg {
    width: 16px !important;
    height: 16px !important;
    stroke: #B8985A !important;
    fill: none !important;
    stroke-width: 1.5 !important;
}

/* Title */
.trust-card-title {
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: #F0EDE8 !important;
    margin: 0 0 12px !important;
}

/* Body text */
.trust-card-text {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    color: rgba(240,237,232,.5) !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

@media (max-width: 880px) {
    .trust-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 540px) {
    .trust-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .trust-card {
        padding: 28px 22px !important;
    }
    .trust-section {
        padding: 72px 0 !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   § 45 — INSTAGRAM / LIFESTYLE GALLERY
═══════════════════════════════════════════════════════════════════ */

.insta-section {
    background: #fff !important;
    padding: 88px 0 80px !important;
    text-align: center !important;
}

.insta-header {
    margin-bottom: 44px !important;
}

.insta-handle {
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: .24em !important;
    text-transform: uppercase !important;
    color: #B8985A !important;
    margin: 0 0 10px !important;
}

.insta-sub {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 22px !important;
    font-style: italic !important;
    font-weight: 400 !important;
    color: #1A1A1A !important;
    margin: 0 !important;
    letter-spacing: .01em !important;
}

/* 6-square grid */
.insta-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 3px !important;
    max-width: 1120px !important;
    margin: 0 auto 40px !important;
    padding: 0 !important;
}

.insta-item {
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;
    background: #F5F2ED !important;
}

.insta-img {
    width: 100% !important;
    height: 100% !important;
    transition: transform .65s cubic-bezier(.25,.46,.45,.94) !important;
    transform-origin: center !important;
}

/* Gradient placeholder photography */
.insta-img--1 { background: radial-gradient(circle at 38% 62%, #D4A96A 0%, #B07830 45%, #7A5020 100%) !important; }
.insta-img--2 { background: radial-gradient(circle at 62% 38%, #C8C4C0 0%, #A0978E 45%, #6A6058 100%) !important; }
.insta-img--3 { background: radial-gradient(circle at 30% 70%, #C09050 0%, #8C6530 45%, #4A3418 100%) !important; }
.insta-img--4 { background: radial-gradient(circle at 70% 32%, #EDE6D8 0%, #D4C4A4 45%, #B8A478 100%) !important; }
.insta-img--5 { background: radial-gradient(circle at 50% 50%, #2C2C2C 0%, #181818 55%, #080808 100%) !important; }
.insta-img--6 { background: radial-gradient(circle at 42% 42%, #F2EAD8 0%, #DCC8A0 45%, #C4A86A 100%) !important; }

.insta-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,.36) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity .3s ease !important;
    color: #fff !important;
}

.insta-item:hover .insta-img {
    transform: scale(1.07) !important;
}

.insta-item:hover .insta-overlay {
    opacity: 1 !important;
}

/* Follow CTA */
.insta-footer-cta {
    text-align: center !important;
}

.insta-follow-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    color: #1A1A1A !important;
    text-decoration: none !important;
    border-bottom: 1px solid #1A1A1A !important;
    padding-bottom: 2px !important;
    transition: color .25s ease, border-color .25s ease !important;
}

.insta-follow-link:hover {
    color: #B8985A !important;
    border-color: #B8985A !important;
}

@media (max-width: 800px) {
    .insta-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .insta-section {
        padding: 64px 0 60px !important;
    }
    .insta-sub {
        font-size: 19px !important;
    }
}

@media (max-width: 480px) {
    .insta-grid {
        gap: 2px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   § 46 — WHATSAPP CTA — Luxury 2-button redesign
═══════════════════════════════════════════════════════════════════ */

.wa-cta-section {
    background: #0D0D0D !important;
    padding: 100px 24px !important;
    text-align: center !important;
}

.wa-cta-content {
    max-width: 620px !important;
    margin: 0 auto !important;
}

.wa-cta-eyebrow {
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: .28em !important;
    text-transform: uppercase !important;
    color: #B8985A !important;
    margin: 0 0 18px !important;
    display: block !important;
}

.wa-cta-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: clamp(28px, 4.5vw, 44px) !important;
    font-weight: 400 !important;
    color: #F0EDE8 !important;
    letter-spacing: .02em !important;
    line-height: 1.22 !important;
    margin: 0 0 18px !important;
}

.wa-cta-sub {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgba(240,237,232,.5) !important;
    line-height: 1.65 !important;
    margin: 0 0 40px !important;
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.wa-cta-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin-bottom: 26px !important;
}

/* Outline ghost button — for "View Collections" on dark bg */
.btn-outline-wa {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px 32px !important;
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: rgba(240,237,232,.8) !important;
    border: 1px solid rgba(240,237,232,.25) !important;
    background: transparent !important;
    text-decoration: none !important;
    transition: border-color .3s ease, color .3s ease, background .3s ease !important;
    cursor: pointer !important;
}

.btn-outline-wa:hover {
    border-color: rgba(240,237,232,.7) !important;
    color: #fff !important;
    background: rgba(255,255,255,.04) !important;
}

.wa-cta-section .wa-number {
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 10px !important;
    letter-spacing: .18em !important;
    color: rgba(240,237,232,.28) !important;
    margin: 0 !important;
    display: block !important;
}

@media (max-width: 500px) {
    .wa-cta-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .wa-cta-actions .btn,
    .wa-cta-actions .btn-outline-wa {
        text-align: center !important;
        justify-content: center !important;
    }
    .wa-cta-section {
        padding: 80px 20px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   § 47 — LUXURY FOOTER — 4-column minimalist redesign
═══════════════════════════════════════════════════════════════════ */

.site-footer {
    background: #0A0A0A !important;
    border-top: none !important;
    padding: 0 !important;
}

.footer-main-inner {
    padding-top: 76px !important;
    padding-bottom: 64px !important;
}

/* 4-column grid: brand wider, nav cols equal */
.footer-grid-v2 {
    display: grid !important;
    grid-template-columns: 1.85fr 1fr 1fr 1fr !important;
    gap: 56px !important;
    align-items: start !important;
}

/* Brand column */
.footer-brand-col {
    padding-right: 16px !important;
}

.footer-logo-block {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1 !important;
    margin-bottom: 20px !important;
}

.footer-logo-name {
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    color: #F0EDE8 !important;
    line-height: 1.2 !important;
}

.footer-logo-sub {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 10.5px !important;
    font-weight: 300 !important;
    letter-spacing: .38em !important;
    text-transform: uppercase !important;
    color: #B8985A !important;
    line-height: 2 !important;
}

.footer-brand-desc {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 14px !important;
    color: rgba(240,237,232,.42) !important;
    line-height: 1.8 !important;
    margin: 0 0 26px !important;
}

/* Social icon circles */
.footer-social-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.footer-social-link {
    width: 32px !important;
    height: 32px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(240,237,232,.45) !important;
    text-decoration: none !important;
    transition: border-color .25s ease, color .25s ease !important;
    flex-shrink: 0 !important;
}

.footer-social-link:hover {
    border-color: #B8985A !important;
    color: #B8985A !important;
}

/* Nav column titles */
.footer-col-title {
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: .24em !important;
    text-transform: uppercase !important;
    color: #B8985A !important;
    margin: 0 0 22px !important;
    display: block !important;
}

/* Footer link lists */
.footer-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 11px !important;
}

.footer-links li {
    display: block !important;
}

.footer-links a {
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    letter-spacing: .1em !important;
    color: rgba(240,237,232,.42) !important;
    text-decoration: none !important;
    transition: color .22s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
}

.footer-links a:hover {
    color: #F0EDE8 !important;
}

.footer-social-links svg {
    flex-shrink: 0 !important;
    opacity: .6 !important;
}

/* Footer bottom bar */
.footer-bottom-v2 {
    background: #070707 !important;
    border-top: 1px solid rgba(255,255,255,.05) !important;
    padding: 18px 0 !important;
}

.footer-bottom-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.footer-bottom-v2 span,
.footer-bottom-tagline {
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
    color: rgba(240,237,232,.22) !important;
}

/* Hide old footer elements if they survive */
.footer-bottom { display: none !important; }
.footer-grid:not(.footer-grid-v2) { display: none !important; }
.footer-brand > .logo-name,
.footer-brand > .logo-sub { /* handled by new classes */ }

/* Tablet: 2×2 grid */
@media (max-width: 1040px) {
    .footer-grid-v2 {
        grid-template-columns: 1fr 1fr !important;
        gap: 40px 48px !important;
    }
    .footer-brand-col {
        grid-column: 1 / -1 !important;
        padding-right: 0 !important;
    }
}

/* Mobile: single column */
@media (max-width: 600px) {
    .footer-grid-v2 {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .footer-main-inner {
        padding-top: 56px !important;
        padding-bottom: 48px !important;
    }
    .footer-bottom-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   § 48 — PAYMENT STRIP — Beige minimal badges above footer
═══════════════════════════════════════════════════════════════════ */

.footer-payment-strip {
    background: #F5F2ED !important;
    border-top: 1px solid #DDD5C8 !important;
    border-bottom: 1px solid #DDD5C8 !important;
    padding: 15px 24px !important;
}

.footer-payment-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

.footer-payment-label {
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 8.5px !important;
    font-weight: 600 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    color: #7A6B57 !important;
    flex-shrink: 0 !important;
    margin-right: 6px !important;
}

.footer-payment-icons {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.pay-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 12px !important;
    border: 1px solid #C4B8A6 !important;
    border-radius: 3px !important;
    background: #fff !important;
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    color: #6A5E50 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    transition: border-color .2s ease, color .2s ease !important;
}

.pay-badge:hover {
    border-color: #A89070 !important;
    color: #4A3E30 !important;
}

@media (max-width: 500px) {
    .footer-payment-strip {
        padding: 13px 16px !important;
    }
    .footer-payment-inner {
        gap: 8px !important;
    }
    .pay-badge {
        font-size: 7.5px !important;
        padding: 4px 9px !important;
    }
    .footer-payment-label {
        width: 100% !important;
        text-align: center !important;
        margin-right: 0 !important;
        margin-bottom: 4px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   § 49 — BRAND BAR refinement (static, centered statement)
   Replaces animated marquee with single elegant brand line
═══════════════════════════════════════════════════════════════════ */

/* Stop the marquee — brand bar is now static and centered */
.material-bar {
    justify-content: center !important;
    height: 30px !important;
}

.material-track {
    animation: none !important;
    width: auto !important;
    justify-content: center !important;
}

/* Hide the old duplicated material sets */
.material-set {
    display: none !important;
}

/* Single brand statement */
.material-brand-statement {
    font-family: 'Josefin Sans', 'Futura PT', 'Century Gothic', sans-serif !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    letter-spacing: .28em !important;
    text-transform: uppercase !important;
    color: #5C4F3A !important;
    white-space: nowrap !important;
    display: block !important;
    text-align: center !important;
    line-height: 1 !important;
    padding: 0 16px !important;
}

/* Trust bar — 3 items now; re-centre cleanly */
.info-bar .info-bar-inner {
    max-width: 680px !important;
}

.info-bar .info-item {
    flex: none !important;
    padding: 0 28px !important;
}

/* Mobile: all 3 items visible on small screens too */
@media (max-width: 640px) {
    .info-bar .info-item:nth-child(5),
    .info-bar .info-sep:nth-child(5) {
        display: none !important;
    }
    .info-bar .info-item {
        padding: 0 12px !important;
    }
    .material-brand-statement {
        font-size: 7.5px !important;
        letter-spacing: .18em !important;
    }
}

@media (max-width: 420px) {
    /* On very small screens collapse to 2 items */
    .info-bar .info-item:nth-child(3),
    .info-bar .info-sep:nth-child(3) {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   § 50 — FIX: Remove unwanted top gap
   Root cause: original body { padding-top: var(--nav-h) } = 64px
   was written for a fixed nav. The DW layout uses position:sticky,
   which lives in normal document flow — no body padding needed.
═══════════════════════════════════════════════════════════════════ */

html, body {
    margin: 0 !important;
    padding: 0 !important;
}

/* Re-apply only the bottom padding for the mobile WA FAB bar */
body {
    padding-bottom: var(--wa-bar-h, 60px) !important;
}

@media (min-width: 768px) {
    body {
        padding-bottom: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   § 51 — FOOTER READABILITY, SOCIAL & PAYMENT IMPROVEMENTS
   Also: btn-wa-order (monochrome WhatsApp CTA)
═══════════════════════════════════════════════════════════════════ */

/* ── Footer main — more generous breathing room ── */
.footer-main-inner {
    padding-top: 92px !important;
    padding-bottom: 76px !important;
}

/* ── Grid: wider column gaps ── */
.footer-grid-v2 {
    gap: 64px !important;
}

@media (max-width: 1040px) {
    .footer-grid-v2 {
        gap: 44px 56px !important;
    }
}

/* ── Column titles: brighter, semi-bold, wider tracking ── */
.footer-col-title {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .3em !important;
    color: #C8A870 !important;
    margin-bottom: 24px !important;
}

/* ── Footer links: more readable ── */
.footer-links {
    gap: 13px !important;
}

.footer-links a {
    font-size: 12px !important;
    letter-spacing: .09em !important;
    color: rgba(240,237,232,.58) !important;
    line-height: 1.4 !important;
}

.footer-links a:hover {
    color: #F0EDE8 !important;
    letter-spacing: .11em !important;
}

/* ── Brand description: easier reading ── */
.footer-brand-desc {
    font-size: 13.5px !important;
    color: rgba(240,237,232,.52) !important;
    line-height: 1.9 !important;
    margin-bottom: 28px !important;
}

/* ── Logo block: slightly more space below ── */
.footer-logo-block {
    margin-bottom: 22px !important;
}

/* ── Social icons: slightly larger, better hover ── */
.footer-social-row {
    gap: 11px !important;
}

.footer-social-link {
    width: 36px !important;
    height: 36px !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    color: rgba(240,237,232,.5) !important;
    transition: border-color .25s ease, color .25s ease, background .25s ease !important;
}

.footer-social-link svg {
    width: 15px !important;
    height: 15px !important;
}

.footer-social-link:hover {
    border-color: rgba(200,168,112,.6) !important;
    color: #C8A870 !important;
    background: rgba(200,168,112,.06) !important;
}

/* ── Social links in Connect column: icons + text ── */
.footer-social-links a {
    font-size: 12px !important;
    color: rgba(240,237,232,.55) !important;
    gap: 10px !important;
}

.footer-social-links svg {
    width: 13px !important;
    height: 13px !important;
    opacity: .55 !important;
    flex-shrink: 0 !important;
}

.footer-social-links a:hover {
    color: #F0EDE8 !important;
}

.footer-social-links a:hover svg {
    opacity: .85 !important;
}

/* ── Payment strip: better sizing and spacing ── */
.footer-payment-strip {
    padding: 18px 24px !important;
}

.footer-payment-inner {
    gap: 18px !important;
}

.footer-payment-icons {
    gap: 9px !important;
}

.footer-payment-label {
    font-size: 9px !important;
    color: #7A6B57 !important;
    margin-right: 8px !important;
}

.pay-badge {
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 6px 13px !important;
    letter-spacing: .1em !important;
    border: 1px solid #C0B09A !important;
    border-radius: 3px !important;
    color: #5A4E40 !important;
    background: #fff !important;
    transition: border-color .2s ease, background .2s ease !important;
}

.pay-badge:hover {
    border-color: #9A8A72 !important;
    background: #FAF7F2 !important;
}

/* ── Footer bottom: slightly more legible ── */
.footer-bottom-v2 {
    padding: 20px 0 !important;
}

.footer-bottom-v2 span,
.footer-bottom-tagline {
    font-size: 9.5px !important;
    color: rgba(240,237,232,.28) !important;
    letter-spacing: .14em !important;
}

/* ─────────────────────────────────────────────────────────────────
   WHATSAPP ORDER BUTTON — monochrome luxury style
   Replaces bright green btn-wa in the CTA section context
───────────────────────────────────────────────────────────────── */
.btn-wa-order {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 14px 34px !important;
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: #0A0A0A !important;
    background: #EDEAE3 !important;
    border: 1px solid #EDEAE3 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background .28s ease, border-color .28s ease, color .28s ease !important;
    white-space: nowrap !important;
}

.btn-wa-order:hover {
    background: #fff !important;
    border-color: #fff !important;
    color: #000 !important;
}

.btn-wa-order svg {
    opacity: .6 !important;
    flex-shrink: 0 !important;
}

/* Hide the now-removed .wa-number anywhere it might still render */
.wa-number {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 52 — Remove WA CTA section; tighten insta→payment transition
═══════════════════════════════════════════════════════════════════ */

/* Completely suppress the CTA section if it ever re-appears */
.wa-cta-section {
    display: none !important;
}

/* Instagram section flows directly into the payment strip — add a
   clean bottom border so the white→beige transition is intentional */
.insta-section {
    border-bottom: 1px solid #EAE3D8 !important;
    padding-bottom: 80px !important;
    margin-bottom: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 55 — WhatsApp Order Info Modal
   Explains that WA Order is only available on product pages.
   Triggered by clicking the header WA icon.
═══════════════════════════════════════════════════════════════════ */

.wa-info-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 8, 6, 0);
    z-index: 1099;
    pointer-events: none;
    transition: background .25s ease;
}
.wa-info-backdrop.open {
    background: rgba(10, 8, 6, .65);
    pointer-events: auto;
}

.wa-info-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.94);
    z-index: 1100;
    width: min(400px, calc(100vw - 36px));
    background: #FAF7F2;
    border: 1px solid #E8DFD4;
    padding: 40px 36px 32px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
}
.wa-info-modal.open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.wa-info-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #9A8A72;
    cursor: pointer;
    padding: 4px 6px;
    transition: color .2s ease;
}
.wa-info-close:hover { color: #1A1614; }

.wa-info-icon {
    width: 52px;
    height: 52px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    color: #fff;
}

.wa-info-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: .04em;
    color: #1A1614;
    margin: 0 0 12px;
}

.wa-info-text {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    color: #2A2018;
    margin: 0 0 8px;
}

.wa-info-sub {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 10.5px;
    letter-spacing: .06em;
    color: #8A7A68;
    line-height: 1.7;
    margin: 0 0 24px;
}

.wa-info-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wa-info-btn-primary {
    display: block;
    padding: 13px 20px;
    background: #1A1614;
    color: #EDEAE3 !important;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background .2s ease;
}
.wa-info-btn-primary:hover {
    background: #2D2420;
    color: #fff !important;
}

.wa-info-btn-ghost {
    display: block;
    padding: 12px 20px;
    background: transparent;
    color: #6A5A48;
    border: 1px solid #D8CFC4;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}
.wa-info-btn-ghost:hover {
    border-color: #9A8A72;
    color: #1A1614;
}

/* ═══════════════════════════════════════════════════════════════════
   § 53 — Search Overlay — luxury fullscreen search experience
═══════════════════════════════════════════════════════════════════ */

/* Backdrop */
.search-overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 8, 6, 0);
    z-index: 1099;
    pointer-events: none;
    transition: background .3s ease;
}
.search-overlay-backdrop.open {
    background: rgba(10, 8, 6, .72);
    pointer-events: auto;
}

/* Overlay panel — slides down from top */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    background: #FAF7F2;
    border-bottom: 1px solid #E8DFD4;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .24s ease;
    pointer-events: none;
}
.search-overlay.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.search-overlay-inner {
    max-width: 780px;
    margin: 0 auto;
    padding: 28px 24px 20px;
}

/* Input row */
.search-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1.5px solid #C8B99A;
    padding-bottom: 10px;
    margin-bottom: 16px;
}

.search-input-icon {
    color: #9A8A72;
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: .04em;
    color: #1A1614;
    padding: 0;
}
.search-input::placeholder {
    color: #B8A896;
}

.search-overlay-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    color: #8A7A68;
    padding: 0 4px;
    transition: color .2s ease;
    flex-shrink: 0;
}
.search-overlay-close:hover {
    color: #1A1614;
}

/* Results */
.search-results-wrap {
    min-height: 0;
    max-height: 52vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.search-results {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 11px 8px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background .18s ease;
}
.search-result-item:hover,
.search-result-item.focused {
    background: #F0EAE0;
}

.search-result-name {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #1A1614;
    line-height: 1.3;
}
.search-result-meta {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 10px;
    letter-spacing: .1em;
    color: #9A8A72;
    text-transform: uppercase;
    margin-top: 2px;
}

.search-result-arrow {
    margin-left: auto;
    color: #C8B99A;
    flex-shrink: 0;
    transition: color .18s ease;
}
.search-result-item:hover .search-result-arrow,
.search-result-item.focused .search-result-arrow {
    color: #8A7A68;
}

/* Empty + loading state */
.search-empty {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 12px;
    letter-spacing: .1em;
    color: #B8A896;
    text-align: center;
    padding: 20px 0;
}

.search-loading {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}
.search-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #E8DFD4;
    border-top-color: #9A8A72;
    border-radius: 50%;
    animation: srch-spin .7s linear infinite;
}
@keyframes srch-spin { to { transform: rotate(360deg); } }

/* Hint bar */
.search-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #EAE3D8;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 10px;
    letter-spacing: .1em;
    color: #B8A896;
    text-transform: uppercase;
}
.search-hint kbd {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid #D4C8B8;
    border-radius: 3px;
    font-family: inherit;
    font-size: 9px;
    color: #8A7A68;
    background: #fff;
    margin: 0 3px;
}
.search-hint-browse {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #8A7A68;
    text-decoration: none;
    transition: color .2s ease;
}
.search-hint-browse:hover { color: #1A1614; }

/* Header icon "logged in" dot */
.header-icon-dot {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 5px;
    height: 5px;
    background: #C8A96E;
    border-radius: 50%;
}
.header-icon { position: relative; }

/* Body scroll lock when search is open */
body.search-open {
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
   § 54 — Account Pages — luxury minimal auth forms + dashboard
═══════════════════════════════════════════════════════════════════ */

/* Page wrapper */
body.account-bg {
    background: #F5F1EB;
}

.account-page {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

/* Card */
.account-card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border: 1px solid #E8DFD4;
    padding: 48px 44px;
    text-align: center;
}

/* Brand mark inside card */
.acc-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    margin-bottom: 28px;
}
.acc-brand-name {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #1A1614;
}
.acc-brand-sub {
    font-family: 'Cormorant Garamond', serif;
    font-size: 11px;
    font-style: italic;
    letter-spacing: .16em;
    color: #9A8A72;
}

.account-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: .04em;
    color: #1A1614;
    margin: 0 0 8px;
}
.account-sub {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 10.5px;
    letter-spacing: .1em;
    color: #9A8A72;
    text-transform: uppercase;
    margin: 0 0 28px;
}

/* Alerts */
.acc-alert {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 11px;
    letter-spacing: .06em;
    padding: 12px 16px;
    border-radius: 2px;
    margin-bottom: 20px;
    text-align: left;
}
.acc-alert--info    { background: #F0EAE0; color: #6A5A48; border-left: 3px solid #C8B99A; }
.acc-alert--success { background: #EDF5EE; color: #2D5A33; border-left: 3px solid #6AAB72; }
.acc-alert--error   { background: #FDF0F0; color: #7A2828; border-left: 3px solid #E07070; }

/* Form */
.account-form {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.acc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.acc-field label {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #5A4E40;
    display: flex;
    align-items: center;
    gap: 6px;
}
.acc-optional {
    font-weight: 400;
    text-transform: none;
    color: #B8A896;
    letter-spacing: 0;
}
.acc-field input[type="text"],
.acc-field input[type="email"],
.acc-field input[type="password"],
.acc-field input[type="tel"] {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #D8CFC4;
    border-radius: 2px;
    background: #FDFAF7;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 13px;
    letter-spacing: .03em;
    color: #1A1614;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    box-sizing: border-box;
}
.acc-field input:focus {
    border-color: #C8B99A;
    box-shadow: 0 0 0 3px rgba(200, 185, 154, .18);
    background: #fff;
}
.acc-field.has-error input {
    border-color: #D07070;
}
.acc-error {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 10px;
    letter-spacing: .06em;
    color: #C05050;
}

/* Remember / forgot row */
.acc-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.acc-row--between { justify-content: space-between; }

.acc-check {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 10.5px;
    letter-spacing: .08em;
    color: #6A5A48;
    user-select: none;
}
.acc-check input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #C8B99A;
    cursor: pointer;
}

.acc-link {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 10.5px;
    letter-spacing: .08em;
    color: #8A7A68;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(138, 122, 104, .4);
    transition: color .2s ease, text-decoration-color .2s ease;
}
.acc-link:hover {
    color: #1A1614;
    text-decoration-color: rgba(26, 22, 20, .5);
}

/* Primary CTA button */
.acc-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: #1A1614;
    color: #EDEAE3;
    border: 1px solid #1A1614;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    margin-top: 6px;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.acc-btn-primary:hover {
    background: #2D2420;
    border-color: #2D2420;
    color: #fff;
}

/* Ghost button (sign out) */
.acc-btn-ghost {
    display: inline-flex;
    align-items: center;
    padding: 9px 22px;
    background: transparent;
    color: #6A5A48;
    border: 1px solid #D8CFC4;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}
.acc-btn-ghost:hover {
    border-color: #9A8A72;
    color: #1A1614;
}

/* Switch text (don't have account / already have account) */
.account-switch {
    margin-top: 22px;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 10.5px;
    letter-spacing: .08em;
    color: #9A8A72;
}

/* ── Dashboard ────────────────────────────────────────────── */
.account-dashboard {
    min-height: calc(100vh - 200px);
}

.acc-dash-header {
    background: #1A1614;
    padding: 32px 0;
}
.acc-dash-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.acc-dash-eyebrow {
    display: block;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #9A8A72;
    margin-bottom: 4px;
}
.acc-dash-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 30px;
    font-weight: 400;
    letter-spacing: .04em;
    color: #F0EAE0;
    margin: 0;
}

.acc-dash-body {
    max-width: 900px;
    margin: 0 auto;
    padding: 36px 28px;
}
.acc-dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 28px;
}
@media (max-width: 620px) {
    .acc-dash-grid { grid-template-columns: 1fr; }
}

.acc-panel {
    background: #fff;
    border: 1px solid #E8DFD4;
    padding: 28px 26px;
}
.acc-panel-title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #9A8A72;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #EAE3D8;
}

/* Details list */
.acc-details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 20px;
    margin: 0;
}
.acc-details dt {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #B8A896;
    white-space: nowrap;
    padding-top: 2px;
}
.acc-details dd {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 12.5px;
    letter-spacing: .04em;
    color: #1A1614;
    margin: 0;
}

/* Quick actions */
.acc-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.acc-action-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    border-radius: 2px;
    text-decoration: none;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #3A2E28;
    transition: background .18s ease, color .18s ease;
}
.acc-action-item:hover {
    background: #F5F0E8;
    color: #1A1614;
}
.acc-action-item svg {
    color: #9A8A72;
    flex-shrink: 0;
}

/* Callout */
.acc-dash-callout {
    background: #F5F0E8;
    border: 1px solid #E8DFD4;
    padding: 24px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.acc-dash-callout p {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 11px;
    letter-spacing: .06em;
    color: #6A5A48;
    margin: 0;
    flex: 1;
    min-width: 200px;
}
.acc-btn-wa {
    width: auto !important;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   § 55 — TYPOGRAPHY POLISH — luxury / premium type system
   Fixes: Playfair Display (unloaded) → Cormorant Garamond
   Raises sub-12px text, tightens letter-spacing on tiny labels,
   reweights hero & section titles for editorial luxury feel.
═══════════════════════════════════════════════════════════════════ */

/* ── Base headings: replace unloaded Playfair Display with Cormorant ── */
h1, h2, h3, h4 {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero-eyebrow {
    font-size: .76rem !important;
    letter-spacing: .15em !important;
}
.hero-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: clamp(2.8rem, 7.5vw, 5rem) !important;
    font-weight: 300 !important;
    line-height: 1.08 !important;
    letter-spacing: .01em !important;
}
.hero-tag {
    font-size: .86rem !important;
}

/* ── Section eyebrows & titles ──────────────────────────────────────── */
.section-eyebrow {
    font-size: .73rem !important;
    letter-spacing: .18em !important;
}
.section-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
}
.section-subtitle {
    font-size: .95rem !important;
    line-height: 1.75 !important;
}

/* ── Category grid ──────────────────────────────────────────────────── */
.dw-cat-name {
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
}

/* ── Signature section ──────────────────────────────────────────────── */
.sig-eyebrow {
    font-size: 10px !important;
    letter-spacing: 2.5px !important;
}
.sig-tag {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
}

/* ── Story / editorial blocks ───────────────────────────────────────── */
.dw-story-body {
    font-size: 15px !important;
    line-height: 1.85 !important;
}
.dw-story-cat-link {
    font-size: 12px !important;
}

/* ── Editorial promo labels ─────────────────────────────────────────── */
.ed-promo-sub  { font-size: 14px !important; }
.ed-feat-label { font-size: 15px !important; }

/* ── Product cards ──────────────────────────────────────────────────── */
.card-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
}

/* ── Trust cards ────────────────────────────────────────────────────── */
.trust-card-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
}
.trust-card-text {
    font-size: .84rem !important;
    line-height: 1.7 !important;
}

/* ── Instagram strip ────────────────────────────────────────────────── */
.insta-handle {
    font-size: 12px !important;
    letter-spacing: .18em !important;
}

/* ── Mobile overrides (≤ 640 px) ───────────────────────────────────── */
@media (max-width: 640px) {
    .hero-title {
        font-size: clamp(2.2rem, 11vw, 3rem) !important;
        line-height: 1.1 !important;
    }
    .section-title {
        font-size: clamp(1.5rem, 7vw, 2rem) !important;
    }
    .sig-title {
        font-size: 2.2rem !important;
        line-height: 1.15 !important;
    }
    .dw-story-title {
        font-size: 1.9rem !important;
    }
    .dw-story-body {
        font-size: 14px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   § 56 — MEGA MENU TYPOGRAPHY
   Column headings  → stay uppercase, Josefin Sans, muted grey
   Subcategory links → title case, clean sans-serif, soft charcoal
   "Shop All" / "View All" → title case, slightly bolder anchor
═══════════════════════════════════════════════════════════════════ */

/* ── Column headings: keep uppercase, refine size ───────────────── */
.mega-col-head {
    font-family: 'Josefin Sans', 'Futura PT', 'Avenir Next', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 2.8px !important;
    text-transform: uppercase !important;
    color: #A89E95 !important;
    margin: 0 0 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #efefef !important;
}

/* ── Subcategory links: title case, readable sans-serif ─────────── */
/*    Specificity 0,2,0 — beats § 39's .mega-link (0,1,0) outright  */
.mega-body .mega-link,
.mega-menu .mega-link {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    color: #3A3330 !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    padding: 5px 0 !important;
    line-height: 1.65 !important;
    display: block !important;
    transition: color 0.15s ease !important;
}

.mega-body .mega-link:link,
.mega-body .mega-link:visited,
.mega-menu .mega-link:link,
.mega-menu .mega-link:visited {
    color: #3A3330 !important;
    background: none !important;
}

.mega-body .mega-link:hover,
.mega-body .mega-link:focus,
.mega-menu .mega-link:hover,
.mega-menu .mega-link:focus {
    color: #1A1614 !important;
    background: none !important;
    text-decoration: none !important;
}

.mega-body .mega-link.active,
.mega-menu .mega-link.active {
    color: #1A1614 !important;
    font-weight: 500 !important;
}

/* ── "Shop All" / "View All" anchor link — specificity 0,3,0 ────── */
.mega-body .mega-link.mega-link--all,
.mega-menu .mega-link.mega-link--all {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    text-transform: none !important;
    color: #1A1614 !important;
    margin-bottom: 6px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.mega-body .mega-link.mega-link--all:link,
.mega-body .mega-link.mega-link--all:visited,
.mega-menu .mega-link.mega-link--all:link,
.mega-menu .mega-link.mega-link--all:visited {
    color: #1A1614 !important;
}

.mega-body .mega-link.mega-link--all:hover,
.mega-menu .mega-link.mega-link--all:hover {
    color: #8A6A40 !important;
}

/* ── Legacy .mega-link-all class (single hyphen) ────────────────── */
.mega-body .mega-link.mega-link-all,
.mega-menu .mega-link.mega-link-all {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    text-transform: none !important;
    color: #1A1614 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    margin-bottom: 6px !important;
    padding-bottom: 12px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 57 — HEADER & NAV MICRO-REFINEMENTS
   Targets: top bar readability · nav tracking · mega col-head colour
   Only value nudges — no layout, no structure changes.
═══════════════════════════════════════════════════════════════════ */

/* ── 1. Top announcement bar (material-bar brand statement) ─────── */
/*    Before: weight 400, spacing .28em, color #5C4F3A (mid brown)  */
/*    After:  weight 500, spacing .2em,  color #3A3020 (rich brown) */
.material-brand-statement {
    font-weight: 500 !important;
    letter-spacing: .2em !important;
    color: #3A3020 !important;
}

/* ── 2. Service trust bar (info-bar icon + text rows) ───────────── */
/*    Before: weight 400, spacing .16em                              */
/*    After:  weight 500, spacing .12em                              */
.info-bar .info-item span {
    font-weight: 500 !important;
    letter-spacing: .12em !important;
}
/* Keep SVG icons slightly stronger to match text weight */
.info-bar .info-item svg {
    opacity: .85 !important;
}

/* ── 3. Main nav links — reduce over-wide letter-spacing ────────── */
/*    Before: 1.5px  →  After: 1.2px  (keeps luxury uppercase feel) */
.nav-links > li > a {
    letter-spacing: 1.2px !important;
}

/* ── 4. Mega menu column headings — less pale, tighter tracking ─── */
/*    Before: color #A89E95 (too light), spacing 2.8px               */
/*    After:  color #7A6E64 (readable warm grey), spacing 2.2px      */
.mega-col-head {
    color: #7A6E64 !important;
    letter-spacing: 2.2px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 58 — BARANG KEMAS MEGA MENU REDESIGN  v5
   Layout: Jenis Produk | Bahan | Cari Mengikut | Feature Panel
   Panel is IMAGE-READY: set --feat-bg via inline style when photo
   exists; falls back to gold gradient automatically.
   All CSS is additive. No existing classes modified.
═══════════════════════════════════════════════════════════════════ */

/* ── Grid: 155px | 170px | 1fr | 360px  gap 32px ────────────────── */
/*    align-items:start + explicit panel height = always landscape    */
.mega-body--jewellery {
    grid-template-columns: 155px 170px 1fr 360px !important;
    column-gap: 32px !important;
    max-width: 1100px !important;
    padding: 36px 44px 40px !important;
    align-items: start !important;
}

/* ── CRITICAL CASCADE FIX ────────────────────────────────────────── */
/*    CSS ~line 6590 declares:                                        */
/*      .mega-col { width: 180px !important;                         */
/*                  margin-right: 40px !important; }                 */
/*    That selector has specificity (0,1,0). Nothing in § 39 or      */
/*    earlier overrides it, so every column — including the 360px    */
/*    feature-panel track — is collapsed to 180px.                   */
/*    This rule at (0,2,0) beats it and lets the grid tracks win.    */
.mega-body--jewellery .mega-col {
    width:        auto !important;   /* let the grid track size the column */
    min-width:    0    !important;
    max-width:    none !important;
    margin-right: 0    !important;   /* undo the 40px gap from old DW rule */
    margin-left:  0    !important;
}

/* ── Column dividers ─────────────────────────────────────────────── */
.mega-body--jewellery .mega-col:nth-child(1),
.mega-body--jewellery .mega-col:nth-child(2) {
    border-right: 1px solid #EDEAE5 !important;
    padding-right: 30px !important;
}
.mega-body--jewellery .mega-col:nth-child(3) {
    border-right: none !important;
    padding-right: 0 !important;
}
.mega-body--jewellery .mega-col--feat {
    border-right: none !important;
    border-left: 1px solid #EDEAE5 !important;
    padding-left: 6px !important;
    padding-right: 0 !important;
    align-self: start !important;
}

/* ── Panel: fixed landscape 334px × 260px ───────────────────────── */
/*    (column 340px minus 6px left-pad = 334px effective image width) */
.mega-body--jewellery .mega-feat {
    width: 100% !important;
    height: 260px !important;
    min-height: 260px !important;
    flex: none !important;
}

/* ── Image-ready background ─────────────────────────────────────── */
/*    --feat-bg is set inline by Blade when the real photo exists.   */
/*    When unset, the warm-gold gradient fires as the var() fallback. */
/*    background-size/position are set here, not in the shorthand,   */
/*    so they survive the § 39 background-shorthand reset.           */
.mega-body--jewellery .mega-feat-img {
    background-image: var(
        --feat-bg,
        linear-gradient(145deg, #E8D5B4 0%, #C8944A 35%, #98642C 65%, #6A441C 100%)
    ) !important;
    background-size:     cover  !important;
    background-position: center !important;
}

/* ── Column headings — darker for jewellery menu ────────────────── */
.mega-body--jewellery .mega-col-head {
    color: #5A5048 !important;
}

/* ── Cari Mengikut — luxury filter chips ────────────────────────── */
.mega-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 4px !important;
}

.mega-tag {
    display: inline-block !important;
    padding: 6px 14px !important;
    border: 1px solid #D8CFC4 !important;
    border-radius: 2px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    color: #5A5048 !important;
    background: rgba(245, 240, 234, .5) !important;
    text-decoration: none !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    transition: border-color .2s ease, color .2s ease, background .2s ease !important;
}

.mega-tag:link,
.mega-tag:visited {
    color: #5A5048 !important;
    background: rgba(245, 240, 234, .5) !important;
}

.mega-tag:hover,
.mega-tag:focus {
    border-color: #b89b6a             !important;
    color:        #2b2118             !important;
    background:   rgba(242, 232, 215, 0.55) !important;
    text-decoration: none            !important;
}

/* ── SPECIFICITY FIX ─────────────────────────────────────────────── */
/*    (0,3,0) beats .nav-links li a (0,1,2) on text-transform        */
.mega-body--jewellery .mega-tags .mega-tag,
.mega-body--jewellery .mega-tags a {
    text-transform: none !important;
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
}

/* ── Feature panel overlay — text anchored bottom-left ──────────── */
.mega-feat--jewellery .mega-feat-overlay {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    padding: 0 20px 28px 22px !important;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, .70) 0%,
        rgba(0, 0, 0, .30) 50%,
        rgba(0, 0, 0, .04) 100%
    ) !important;
}

/* Eyebrow — small uppercase tracking label */
.mega-feat--jewellery .mega-feat-eyebrow {
    display: block !important;
    font-family: 'Josefin Sans', 'Futura PT', sans-serif !important;
    font-size: 8.5px !important;
    font-weight: 600 !important;
    letter-spacing: 2.6px !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, .58) !important;
    margin: 0 0 7px !important;
}

/* Title — 20px Cormorant; "Koleksi Minggu Ini" = ~165px, safe on one line */
.mega-feat--jewellery .mega-feat-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    letter-spacing: .01em !important;
    line-height: 1.22 !important;
    color: #ffffff !important;
    margin: 0 0 9px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Description */
.mega-feat--jewellery .mega-feat-desc {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    letter-spacing: .01em !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, .70) !important;
    margin: 0 0 20px !important;
}

/* CTA — ghost button, proportioned to 260px card */
.mega-feat--jewellery .mega-feat-cta {
    display: inline-block !important;
    padding: 9px 20px !important;
    font-family: 'Josefin Sans', 'Futura PT', sans-serif !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border: 1px solid rgba(255, 255, 255, .62) !important;
    background: transparent !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: background .2s ease, border-color .2s ease !important;
}
.mega-feat--jewellery .mega-feat-cta:hover {
    background: rgba(255, 255, 255, .16) !important;
    border-color: rgba(255, 255, 255, .85) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 59 v4 — MAIN NAV HOVER / ACTIVE — TWO-TIER HIERARCHY
   Problem with v3: active and hover/open had identical visual weight
   (same background + same border) → two tabs looked selected at once
   when hovering Barang Kemas while Baharu was the current page.

   Solution — clear two-tier system:
     Tier 1 · Active (current page):  NO background. Thin 1px gold
              underline at 40% opacity. Subtle "you are here" marker.
     Tier 2 · Hover / Open:           Soft 6% gold tint background +
              2px full-opacity #b89b6a underline + weight 500.
              Clearly selected / in-focus. No confusion with Tier 1.

   If active item IS the hovered/open item, :hover specificity (1,2,3)
   beats .active (1,2,2) → full hover treatment shows, correct.
═══════════════════════════════════════════════════════════════════ */

/* ── Base: reserve 2px border slot — no layout shift on hover ────── */
#site-nav .nav-links > li > a {
    border-bottom:    2px solid transparent !important;
    box-sizing:       border-box            !important;
    transition:       color        0.18s ease,
                      border-color  0.18s ease,
                      background   0.18s ease,
                      font-weight  0s          !important;
}

/* ── TIER 1 · Active (current page) — subtle "you are here" marker── */
/*    No background. Thin 1px underline, 40% opacity gold.            */
/*    Does NOT compete visually with open mega menu tab.              */
#site-nav .nav-links > li > a.active {
    background:       transparent                    !important;
    background-color: transparent                    !important;
    color:            #111111                        !important;
    opacity:          1                              !important;
    border-bottom:    1px solid rgba(184,155,106,0.4) !important;
    font-weight:      400                            !important;
}

/* ── TIER 2 · Hover — soft tint + strong gold line ───────────────── */
#site-nav .nav-links > li > a:hover {
    background:       rgba(184, 155, 106, 0.06) !important;
    background-color: rgba(184, 155, 106, 0.06) !important;
    color:            #111111                    !important;
    opacity:          1                          !important;
    border-bottom:    2px solid #b89b6a          !important;
    font-weight:      500                        !important;
}

/* ── TIER 2 · Open (mega menu expanded) — same weight as hover ────── */
#site-nav .nav-links > li.open > a {
    background:       rgba(184, 155, 106, 0.06) !important;
    background-color: rgba(184, 155, 106, 0.06) !important;
    color:            #111111                    !important;
    opacity:          1                          !important;
    border-bottom:    2px solid #b89b6a          !important;
    font-weight:      500                        !important;
}

/* ── Suppress legacy ::after pseudo underlines ───────────────────── */
#site-nav .nav-links > li > a::after,
#site-nav .nav-links > li > a.active::after {
    display: none  !important;
    content: none  !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 60 v2 — MEGA MENU LINK HOVER — TEXT UNDERLINE + NUDGE
   Technique: set text-decoration underline on the base with
   text-decoration-color: transparent, then transition the colour to
   #b89b6a on hover. CSS text-decoration on display:block decorates
   only the actual characters — never the full row width. No box fill.
═══════════════════════════════════════════════════════════════════ */

/* ── Base: pre-wire underline + transform into transition ────────── */
/*    Underline exists from the start but is transparent → no flash   */
.mega-body .mega-link,
.mega-menu .mega-link {
    text-decoration:        underline                 !important;
    text-underline-offset:  3px                       !important;
    text-decoration-color:  transparent               !important;
    text-decoration-thickness: 1px                    !important;
    transition:             color               0.18s ease,
                            transform           0.18s ease,
                            text-decoration-color 0.18s ease !important;
    will-change: transform                            !important;
}

/* ── Hover: darker text + gold underline fades in + 2px nudge ────── */
.mega-body .mega-link:hover,
.mega-body .mega-link:focus,
.mega-menu .mega-link:hover,
.mega-menu .mega-link:focus {
    color:                  #2b2118     !important;
    background:             none        !important;
    transform:              translateX(2px) !important;
    text-decoration-color:  #b89b6a     !important;
}

/* ── Active (current category) — underline locks in stronger ─────── */
.mega-body .mega-link.active,
.mega-menu .mega-link.active {
    color:                  #111111                    !important;
    font-weight:            500                        !important;
    transform:              translateX(2px)             !important;
    text-decoration-color:  rgba(184, 155, 106, 0.70)  !important;
}

/* ── "Lihat Semua" all-link — warm gold on hover, same nudge ─────── */
.mega-body .mega-link.mega-link--all:hover,
.mega-menu .mega-link.mega-link--all:hover,
.mega-body .mega-link.mega-link-all:hover,
.mega-menu .mega-link.mega-link-all:hover {
    color:                  #8A6A40  !important;
    transform:              translateX(2px) !important;
    text-decoration-color:  rgba(184, 155, 106, 0.55) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   § 61 — UTILITY BAR
   Slim desktop-only row between announcement bar and logo header.
   Inspired by luxury jewellery site conventions (Bulgari reference).
   Left:  Find a Store · Services · Contact Us · Search
   Right: My Account · Wishlist · WhatsApp
   All labels from config/site-content.php → utility_bar.
   Hidden on mobile (<1024px) — mobile drawer covers these functions.
═══════════════════════════════════════════════════════════════════ */

/* ── Container ───────────────────────────────────────────────────── */
.utility-bar {
    display:       none;              /* hidden on mobile by default  */
    background:    #ffffff;
    border-bottom: 1px solid #E8E4DE;
    width:         100%;
    position:      relative;
    z-index:       200;
}

@media (min-width: 1024px) {
    .utility-bar {
        display: flex;
        align-items: center;
        height: 38px;
    }
}

/* ── Inner max-width wrapper ─────────────────────────────────────── */
.utility-bar-inner {
    max-width:       1440px;
    margin:          0 auto;
    padding:         0 40px;
    width:           100%;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}

/* ── Left and right groups ───────────────────────────────────────── */
.utility-left,
.utility-right {
    display:     flex;
    align-items: center;
}

/* ── Individual link / button ────────────────────────────────────── */
.utility-link {
    font-family:     'Josefin Sans', 'Futura PT', 'Avenir Next', sans-serif;
    font-size:       10px;
    font-weight:     400;
    letter-spacing:  1.1px;
    text-transform:  uppercase;
    color:           #888880;
    text-decoration: none;
    background:      none;
    border:          none;
    cursor:          pointer;
    padding:         0 13px;
    height:          38px;
    display:         flex;
    align-items:     center;
    gap:             5px;
    white-space:     nowrap;
    transition:      color 0.15s ease;
    line-height:     1;
}

/* ── Thin pipe dividers between items within each group ─────────── */
.utility-left  .utility-link + .utility-link,
.utility-right .utility-link + .utility-link {
    border-left: 1px solid #E0DDD8;
}

/* ── Thin separator between left group and right group ──────────── */
.utility-right {
    border-left: 1px solid #E0DDD8;
}

/* ── Remove outer padding from edge items ────────────────────────── */
.utility-left  .utility-link:first-child { padding-left:  0; }
.utility-right .utility-link:last-child  { padding-right: 0; }

/* ── Hover ───────────────────────────────────────────────────────── */
.utility-link:hover {
    color: #1a1208;
}

/* ── WhatsApp link — slight warm tint on hover ───────────────────── */
.utility-wa:hover {
    color: #4a7c59;
}

/* ── Icons inside links ──────────────────────────────────────────── */
.utility-link svg {
    flex-shrink: 0;
    opacity:     0.65;
    transition:  opacity 0.15s ease;
}

.utility-link:hover svg {
    opacity: 0.9;
}


/* ══════════════════════════════════════════════════════════════
   §62 — Order Option Modal + Select / Order Trigger Buttons
   v42 — 2026-05
   ══════════════════════════════════════════════════════════════ */

/* ── btn-select: product-card "Discover More" CTA ──────────── */
.btn-select {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--font-ui, 'Josefin Sans', sans-serif);
    font-size:       .68rem;
    font-weight:     500;
    letter-spacing:  .14em;
    text-transform:  uppercase;
    text-decoration: none;
    cursor:          pointer;
    background:      transparent;
    color:           #1C1C1C;
    border:          1px solid #1C1C1C;
    border-radius:   0;
    padding:         9px 0;
    transition:      color .2s, border-color .2s;
    white-space:     nowrap;
}
.btn-select:hover,
.btn-select:focus-visible {
    background:   transparent;
    color:        var(--gold-dark, #9A7A20);
    border-color: var(--gold-dark, #9A7A20);
}

/* ── btn-order-trigger: product detail "Tempah Item" CTA ───── */
/* Base (non-WA, used on main product-detail button) */
.btn-order-trigger:not(.btn-wa) {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              8px;
    font-family:      'Josefin Sans', sans-serif;
    font-size:        .84rem;
    font-weight:      600;
    letter-spacing:   .06em;
    text-transform:   uppercase;
    text-decoration:  none;
    cursor:           pointer;
    border:           1px solid var(--dark-brown);
    background:       var(--dark-brown);
    color:            #fff;
    border-radius:    var(--radius-sm);
    padding:          13px 20px;
    transition:       background .18s ease, border-color .18s ease;
    white-space:      nowrap;
}
.btn-order-trigger:not(.btn-wa):hover,
.btn-order-trigger:not(.btn-wa):focus-visible {
    background:       var(--brown);
    border-color:     var(--brown);
}

/* ── Order Option Modal overlay ────────────────────────────── */
.order-option-modal {
    display:          none;
    position:         fixed;
    inset:            0;
    z-index:          9100;
    align-items:      center;
    justify-content:  center;
    padding:          20px;
}
.order-option-modal.is-open {
    display:          flex;
}

/* Backdrop */
.oom-backdrop {
    position:         absolute;
    inset:            0;
    background:       rgba(0, 0, 0, .48);
    backdrop-filter:  blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* Card */
.oom-card {
    position:         relative;
    z-index:          1;
    background:       var(--warm-white);
    border-radius:    var(--radius-lg);
    padding:          36px 28px 28px;
    max-width:        420px;
    width:            100%;
    box-shadow:       var(--shadow-xl);
    animation:        oomSlideIn .22s ease;
}

@keyframes oomSlideIn {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Close button */
.oom-close {
    position:         absolute;
    top:              14px;
    right:            16px;
    background:       none;
    border:           none;
    font-size:        1.5rem;
    line-height:      1;
    cursor:           pointer;
    color:            var(--text-muted);
    padding:          4px 6px;
    border-radius:    var(--radius-xs);
    transition:       color .15s ease, background .15s ease;
}
.oom-close:hover {
    color:            var(--text-primary);
    background:       var(--beige);
}

/* Header text */
.oom-eyebrow {
    font-family:      'Josefin Sans', sans-serif;
    font-size:        .68rem;
    font-weight:      600;
    letter-spacing:   .12em;
    text-transform:   uppercase;
    color:            var(--text-muted);
    margin-bottom:    6px;
}
.oom-title {
    font-family:      'Cormorant Garamond', serif;
    font-size:        1.35rem;
    font-weight:      600;
    color:            var(--text-primary);
    margin-bottom:    4px;
    line-height:      1.2;
}
.oom-product-name {
    font-size:        .84rem;
    color:            var(--text-secondary);
    margin-bottom:    22px;
    min-height:       1.2em;
    font-style:       italic;
}

/* Options container */
.oom-options {
    display:          flex;
    flex-direction:   column;
    gap:              10px;
}

/* Shared option row */
.oom-option {
    display:          flex;
    align-items:      center;
    gap:              14px;
    padding:          16px 18px;
    border-radius:    var(--radius-sm);
    border:           1px solid var(--border);
    text-decoration:  none;
    transition:       transform .15s ease, border-color .2s ease, background .18s ease;
}

/* Option A — WhatsApp */
.oom-option-wa {
    background:       var(--wa-green, #25D366);
    border-color:     var(--wa-green, #25D366);
    color:            #fff;
}
.oom-option-wa:hover,
.oom-option-wa:focus-visible {
    background:       #1fb259;
    border-color:     #1fb259;
    color:            #fff;
    transform:        translateY(-1px);
}

/* Option B — Website (disabled) */
.oom-option-web {
    background:       var(--cream);
    color:            var(--text-muted);
    cursor:           default;
    opacity:          .62;
    user-select:      none;
}

/* Option label & sub */
.oom-option-label {
    display:          block;
    font-family:      'Josefin Sans', sans-serif;
    font-size:        .86rem;
    font-weight:      600;
    letter-spacing:   .03em;
    line-height:      1.3;
}
.oom-option-sub {
    display:          block;
    font-size:        .76rem;
    margin-top:       3px;
    opacity:          .82;
    line-height:      1.35;
}

/* Coming soon badge */
.oom-option-badge {
    display:          inline-block;
    font-family:      'Josefin Sans', sans-serif;
    font-size:        .63rem;
    font-weight:      700;
    letter-spacing:   .08em;
    text-transform:   uppercase;
    background:       var(--gold-lighter);
    color:            var(--gold-dark);
    padding:          2px 8px;
    border-radius:    var(--radius-full);
    white-space:      nowrap;
    flex-shrink:      0;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .oom-card {
        padding: 30px 20px 22px;
    }
    .oom-title {
        font-size: 1.2rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   §63  TRADE-IN ENQUIRY FORM PAGE  —  /trade-in
   Styled to match luxury white cat-hero / catalogue theme.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero — white, matches cat-hero pattern ───────────────────────── */
.tradein-hero {
    background:    #ffffff;
    border-bottom: 1px solid #EBEBEB;
    padding:       44px 0 28px;
    text-align:    center;
}
.tradein-hero-inner {
    max-width: 560px;
    margin:    0 auto;
}
.tradein-hero-eyebrow {
    display:        block;
    font-family:    var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:      .62rem;
    font-weight:    600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color:          #9A7A20;
    margin-bottom:  10px;
}
.tradein-hero-title {
    font-family:    var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:      clamp(1.6rem, 4vw, 2.4rem);
    font-weight:    300;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          #1C1C1C;
    margin:         0 0 10px;
    line-height:    1.1;
}
.tradein-hero-sub {
    font-family: var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:   .84rem;
    color:       #777777;
    max-width:   480px;
    margin:      0 auto;
    line-height: 1.7;
}

/* ── Page wrapper ───────────────────────────────────────────────── */
.tradein-form-wrap {
    max-width: 660px;
    margin:    0 auto;
    padding:   36px 16px 64px;
}

/* ── Form intro hint (below wrapper, above card) ─────────────────── */
.tradein-form-intro {
    font-family:    var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:      .76rem;
    color:          #AAAAAA;
    text-align:     center;
    margin-bottom:  20px;
    letter-spacing: .01em;
    line-height:    1.55;
}

/* ── Form card ──────────────────────────────────────────────────── */
.tradein-form-card {
    background: #ffffff;
    border:     1px solid #EBEBEB;
    box-shadow: 0 2px 20px rgba(0,0,0,.04);
    padding:    36px 32px;
}
@media (max-width: 600px) {
    .tradein-form-card { padding: 24px 16px; }
}

/* ── Form groups ────────────────────────────────────────────────── */
.tradein-form-group { margin-bottom: 22px; }

.tradein-label {
    display:        block;
    font-family:    var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:      .72rem;
    font-weight:    600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:          #555555;
    margin-bottom:  7px;
}
.tradein-label .optional-tag {
    font-weight:    400;
    font-size:      .72rem;
    text-transform: none;
    letter-spacing: 0;
    color:          #AAAAAA;
    margin-left:    4px;
}

/* ── Inputs / Selects / Textarea ────────────────────────────────── */
.tradein-input,
.tradein-select,
.tradein-textarea {
    display:            block;
    width:              100%;
    padding:            10px 14px;
    font-size:          .875rem;
    font-family:        var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    color:              #1C1C1C;
    background:         #ffffff;
    border:             1px solid #E0E0E0;
    border-radius:      0;
    transition:         border-color .15s, box-shadow .15s;
    box-sizing:         border-box;
    -webkit-appearance: none;
    appearance:         none;
}
.tradein-input::placeholder,
.tradein-textarea::placeholder { color: #BBBBBB; }
.tradein-input:focus,
.tradein-select:focus,
.tradein-textarea:focus {
    outline:      none;
    border-color: #9A7A20;
    box-shadow:   0 0 0 3px rgba(154,122,32,.10);
    background:   #ffffff;
}
.tradein-textarea {
    resize:      vertical;
    min-height:  90px;
    line-height: 1.55;
}
.tradein-select {
    cursor:              pointer;
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 14px center;
    padding-right:       36px;
}

/* ── Radio buttons ──────────────────────────────────────────────── */
.tradein-radio-group {
    display:   flex;
    gap:       10px;
    flex-wrap: wrap;
}
.tradein-radio-option {
    display:       flex;
    align-items:   center;
    gap:           8px;
    cursor:        pointer;
    font-family:   var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:     .82rem;
    color:         #555555;
    padding:       9px 18px;
    border:        1px solid #E0E0E0;
    border-radius: 0;
    background:    #ffffff;
    transition:    border-color .15s, background .15s, color .15s;
    user-select:   none;
}
.tradein-radio-option input[type="radio"] {
    accent-color: #9A7A20;
    width:        15px;
    height:       15px;
    cursor:       pointer;
    flex-shrink:  0;
}
.tradein-radio-option:has(input:checked) {
    border-color: #1C1C1C;
    background:   #f9f9f9;
    color:        #1C1C1C;
}

/* ── Section divider / section label ────────────────────────────── */
.tradein-form-divider {
    border:     none;
    border-top: 1px solid #EBEBEB;
    margin:     28px 0;
}
.tradein-form-section-label {
    font-family:    var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:      .62rem;
    font-weight:    600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color:          #9A7A20;
    margin-bottom:  18px;
}

/* ── Field hint ─────────────────────────────────────────────────── */
.tradein-field-hint {
    font-family: var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:   .74rem;
    color:       #AAAAAA;
    margin-top:  4px;
    line-height: 1.4;
}

/* ── Submit button — charcoal fill, gold hover (matches cat-page) ── */
.tradein-submit-btn {
    width:          100%;
    padding:        14px;
    background:     #1C1C1C;
    color:          #ffffff;
    border:         1px solid #1C1C1C;
    border-radius:  0;
    font-family:    var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:      .72rem;
    font-weight:    600;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor:         pointer;
    transition:     background .2s, border-color .2s;
    margin-top:     8px;
}
.tradein-submit-btn:hover  { background: #9A7A20; border-color: #9A7A20; }
.tradein-submit-btn:active { opacity: .9; }

/* ── Success banner ─────────────────────────────────────────────── */
.tradein-success {
    background:    #f9fbf9;
    border:        1px solid #c8dfc9;
    padding:       28px 24px;
    text-align:    center;
    margin-bottom: 28px;
}
.tradein-success-icon {
    font-size:     1.4rem;
    color:         #2d7a47;
    margin-bottom: 10px;
}
.tradein-success-title {
    font-family:    var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:      .82rem;
    font-weight:    600;
    letter-spacing: .10em;
    text-transform: uppercase;
    color:          #1C1C1C;
    margin-bottom:  8px;
}
.tradein-success-body {
    font-family: var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:   .86rem;
    color:       #777777;
    line-height: 1.65;
    max-width:   440px;
    margin:      0 auto;
}

/* ── Validation error block ─────────────────────────────────────── */
.tradein-error-list {
    background:    #fef2f2;
    border:        1px solid #fca5a5;
    padding:       14px 18px;
    margin-bottom: 22px;
    font-family:   var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:     .84rem;
    color:         #dc2626;
}
.tradein-error-list ul {
    margin:       6px 0 0;
    padding-left: 18px;
}
.tradein-error-list li { margin-bottom: 3px; }

/* ══════════════════════════════════════════════════════════════
   §64  LUXURY WORDMARK
   Overrides §13 .header-logo DW block (cascade: last wins).
   All declarations use !important to beat the * { font-family }
   wildcard selector defined at the top of this file.
══════════════════════════════════════════════════════════════ */

/* ── Header height: accommodates larger wordmark with same breathing room ── */
.site-header {
    height: 80px !important;
}

/* ── Anchor wrapper reset ────────────────────────────────────── */
.header-logo {
    display:         flex !important;
    flex-direction:  column !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             0 !important;
    line-height:     1 !important;
    text-decoration: none !important;
    letter-spacing:  0 !important;
    font-size:       inherit !important;
    padding-right:   0 !important;
    padding-top:     3px !important;
    color:           #1a1410 !important;
}

/* ── Main line: SRI TEMASEK ─────────────────────────────────── */
.header-logo .logo-main {
    font-family:    'Cinzel', 'Trajan Pro', 'Times New Roman', serif !important;
    font-size:      38px !important;
    font-weight:    500 !important;
    letter-spacing: 0.18em !important;
    line-height:    1 !important;
    text-transform: uppercase !important;
    color:          #1a1410 !important;
    display:        block !important;
}

/* ── Sub line: FINE JEWELLERY ───────────────────────────────── */
.header-logo .logo-sub {
    font-family:    'Josefin Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size:      12px !important;
    font-weight:    500 !important;
    letter-spacing: 0.38em !important;
    line-height:    1 !important;
    text-transform: uppercase !important;
    color:          #5f5851 !important;
    display:        block !important;
    margin-top:     7px !important;
    padding-right:  0.38em !important;
}

/* ── 900–1079px: slightly compact ───────────────────────────── */
@media (min-width: 900px) and (max-width: 1079px) {
    .header-logo .logo-main {
        font-size:      31px !important;
        letter-spacing: 0.16em !important;
    }
    .header-logo .logo-sub {
        font-size:      11px !important;
        letter-spacing: 0.34em !important;
    }
}

/* ── ≤ 899px (mobile/tablet): hide sub-line, shrink main ─────── */
@media (max-width: 899px) {
    .site-header {
        height: 60px !important;
    }
    .header-logo .logo-main {
        font-size:      21px !important;
        letter-spacing: 0.14em !important;
    }
    .header-logo .logo-sub {
        display: none !important;
    }
}

/* ── ≤ 479px (small phones): shrink further ─────────────────── */
@media (max-width: 479px) {
    .header-logo .logo-main {
        font-size:      19px !important;
        letter-spacing: 0.12em !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   §65  PRE-ORDER ENQUIRY MODAL
   Opened by .btn-preorder-trigger via initPreorderModal().
   Item-specific form — no WhatsApp, no wa.me.
   POST /preorder/enquiry → PreorderEnquiryController@store
══════════════════════════════════════════════════════════════ */

/* ── Overlay (full-screen backdrop + centering) ──────────────── */
.pom-overlay {
    display:         none;
    position:        fixed;
    inset:           0;
    z-index:         1100;
    align-items:     center;
    justify-content: center;
    padding:         16px;
    box-sizing:      border-box;
}
.pom-overlay.is-open {
    display: flex;
}

/* ── Backdrop ────────────────────────────────────────────────── */
.pom-backdrop {
    display:    none;
    position:   fixed;
    inset:      0;
    z-index:    1099;
    background: rgba(0, 0, 0, 0.55);
}
.pom-overlay.is-open ~ .pom-backdrop {
    display: block;
}

/* ── Card ────────────────────────────────────────────────────── */
.pom-card {
    position:         relative;
    background:       #fff;
    border-radius:    10px;
    padding:          32px 28px 28px;
    width:            100%;
    max-width:        460px;
    max-height:       90vh;
    overflow-y:       auto;
    box-shadow:       0 8px 40px rgba(0,0,0,.18);
    z-index:          1101;
}

/* ── Close button ────────────────────────────────────────────── */
.pom-close {
    position:   absolute;
    top:        14px;
    right:      16px;
    background: none;
    border:     none;
    font-size:  1.5rem;
    line-height: 1;
    color:      var(--text-muted, #888);
    cursor:     pointer;
    padding:    4px 8px;
}
.pom-close:hover { color: var(--text-dark, #1a1410); }

/* ── Header ──────────────────────────────────────────────────── */
.pom-eyebrow {
    font-size:      .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--gold, #b8972a);
    margin-bottom:  8px;
}
.pom-title {
    font-family:    'Cinzel', 'Trajan Pro', serif;
    font-size:      1.18rem;
    font-weight:    500;
    letter-spacing: .06em;
    color:          var(--text-dark, #1a1410);
    margin-bottom:  6px;
}
.pom-subtitle {
    font-size:   .82rem;
    color:       var(--text-muted, #888);
    line-height: 1.5;
    margin-bottom: 16px;
}

/* ── Item info strip ─────────────────────────────────────────── */
.pom-item-strip {
    background:    var(--gold-lighter, #fdf7e7);
    border:        1px solid var(--gold-light, #e8d48c);
    border-radius: 6px;
    padding:       10px 14px;
    margin-bottom: 20px;
    font-size:     .82rem;
}
.pom-item-name {
    display:     block;
    font-weight: 600;
    color:       var(--text-dark, #1a1410);
    margin-bottom: 3px;
}
.pom-item-meta {
    display: block;
    color:   var(--text-muted, #888);
    font-size: .78rem;
}

/* ── Section labels ──────────────────────────────────────────── */
.pom-section-label {
    font-size:      .72rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--text-muted, #888);
    margin-bottom:  12px;
    margin-top:     20px;
}
.pom-section-label:first-of-type { margin-top: 0; }

/* ── Field group ─────────────────────────────────────────────── */
.pom-field-group {
    margin-bottom: 16px;
}
.pom-label {
    display:       block;
    font-size:     .82rem;
    font-weight:   600;
    color:         var(--text-dark, #1a1410);
    margin-bottom: 6px;
}
.pom-optional {
    font-weight: 400;
    color:       var(--text-muted, #888);
    font-size:   .78rem;
    margin-left: 4px;
}
.pom-input,
.pom-textarea {
    width:         100%;
    padding:       10px 12px;
    border:        1px solid var(--border, #e0d6c8);
    border-radius: 5px;
    font-size:     .88rem;
    color:         var(--text-dark, #1a1410);
    background:    #fff;
    box-sizing:    border-box;
    transition:    border-color .15s;
}
.pom-input:focus,
.pom-textarea:focus {
    outline:      none;
    border-color: var(--gold, #b8972a);
    box-shadow:   0 0 0 3px rgba(184,151,42,.12);
}
.pom-textarea {
    resize:     vertical;
    min-height: 72px;
}

/* ── Radio group ─────────────────────────────────────────────── */
.pom-radio-group {
    display:   flex;
    flex-wrap: wrap;
    gap:       10px;
}
.pom-radio-option {
    display:        flex;
    align-items:    center;
    gap:            7px;
    font-size:      .86rem;
    color:          var(--text-dark, #1a1410);
    cursor:         pointer;
    padding:        9px 14px;
    border:         1px solid var(--border, #e0d6c8);
    border-radius:  5px;
    flex:           1 1 140px;
    transition:     border-color .15s, background .15s;
}
.pom-radio-option:has(input:checked) {
    border-color: var(--gold, #b8972a);
    background:   var(--gold-lighter, #fdf7e7);
}
.pom-radio-option input[type="radio"] {
    accent-color: var(--gold, #b8972a);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ── Submit button ───────────────────────────────────────────── */
.pom-submit-btn {
    width:          100%;
    padding:        13px 20px;
    background:     var(--gold-dark, #9a7a1e);
    color:          #fff;
    border:         none;
    border-radius:  6px;
    font-size:      .9rem;
    font-weight:    600;
    letter-spacing: .04em;
    cursor:         pointer;
    margin-top:     8px;
    transition:     background .18s, transform .1s;
}
.pom-submit-btn:hover  { background: var(--gold, #b8972a); }
.pom-submit-btn:active { transform: scale(.98); }

/* ── Success banner (shown on product page after POST redirect) ─ */
.pom-success-banner {
    display:       flex;
    align-items:   flex-start;
    gap:           14px;
    background:    #f0fdf4;
    border:        1px solid #86efac;
    border-radius: 8px;
    padding:       18px 20px;
    margin:        0 0 28px;
    max-width:     760px;
    margin-left:   auto;
    margin-right:  auto;
}
.pom-success-icon {
    font-size:    1.3rem;
    color:        #16a34a;
    flex-shrink:  0;
    margin-top:   1px;
}
.pom-success-title {
    font-weight:   700;
    font-size:     .94rem;
    color:         #15803d;
    margin-bottom: 4px;
}
.pom-success-body {
    font-size:  .84rem;
    color:      #166534;
    line-height: 1.5;
}

/* ── Error banner (shown on product page after failed validation) */
.pom-error-banner {
    background:    #fef2f2;
    border:        1px solid #fca5a5;
    border-radius: 8px;
    padding:       14px 18px;
    margin:        0 0 24px;
    font-size:     .84rem;
    color:         #dc2626;
    max-width:     760px;
    margin-left:   auto;
    margin-right:  auto;
}
.pom-error-banner ul {
    margin:       6px 0 0;
    padding-left: 18px;
}
.pom-error-banner li { margin-bottom: 3px; }

/* ── Mobile adjustments ──────────────────────────────────────── */
@media (max-width: 479px) {
    .pom-card {
        padding:    24px 18px 22px;
        max-height: 92vh;
    }
    .pom-title { font-size: 1rem; }
    .pom-radio-option { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   §66  Product detail — size dropdown + dynamic item details
═══════════════════════════════════════════════════════════════ */

.pd-size-group {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.pd-size-label {
    font-size:      .7rem;
    font-weight:    700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--text-muted);
}

.pd-size-select {
    appearance:         none;
    -webkit-appearance: none;
    width:              100%;
    padding:            13px 40px 13px 16px;
    border:             1.5px solid var(--border-strong);
    border-radius:      var(--radius);
    background:         var(--warm-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B7355' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center;
    font-family:        var(--font-ui, sans-serif);
    font-size:          .92rem;
    color:              var(--text-primary);
    cursor:             pointer;
    transition:         border-color .18s;
}

.pd-size-select:focus {
    outline:    none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(196,164,74,.12);
}

.pd-size-select:hover {
    border-color: var(--gold);
}

.pd-item-details {
    background:     var(--bg-section-alt, #f9f7f4);
    border:         1px solid var(--border);
    border-radius:  var(--radius);
    padding:        16px 18px;
    display:        flex;
    flex-direction: column;
    gap:            10px;
    min-height:     80px;
}

.pd-item-details:empty {
    display: none;
}

.pd-detail-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
}

.pd-detail-label {
    font-size:      .73rem;
    font-weight:    600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--text-muted);
    flex-shrink:    0;
}

.pd-detail-value {
    font-size:  .88rem;
    color:      var(--text-primary);
    text-align: right;
}

.pd-mono {
    font-family:    'Courier New', monospace;
    font-size:      .8rem;
    color:          var(--text-secondary);
    letter-spacing: .04em;
}

.pd-price-val {
    font-family: 'Playfair Display', serif;
    font-size:   1rem;
    font-weight: 700;
    color:       var(--gold-dark);
}

.pd-status-pill {
    display:     inline-flex;
    align-items: center;
    padding:     3px 11px;
    border-radius: var(--radius-full);
    font-size:      .72rem;
    font-weight:    700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pd-status-available {
    background: rgba(26,122,74,.07);
    color:      #1A6A42;
    border:     1px solid rgba(26,122,74,.15);
}

.pd-status-preorder {
    background: rgba(196,164,74,.1);
    color:      var(--gold-dark);
    border:     1px solid rgba(196,164,74,.2);
}

#pd-main-cta:disabled,
#pd-sticky-cta:disabled {
    opacity:        .5;
    cursor:         not-allowed;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   §67  Checkout preview modal (temporary, pending real checkout)
═══════════════════════════════════════════════════════════════ */

.cpm-overlay {
    display:         none;
    position:        fixed;
    inset:           0;
    z-index:         1500;
    align-items:     flex-end;
    justify-content: center;
}

.cpm-overlay.is-open {
    display: flex;
}

.cpm-backdrop {
    position:         absolute;
    inset:            0;
    background:       rgba(0,0,0,.45);
    backdrop-filter:  blur(2px);
}

.cpm-card {
    position:      relative;
    background:    var(--warm-white);
    border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
    padding:       28px 24px 32px;
    width:         100%;
    max-width:     480px;
    z-index:       1;
    box-shadow:    0 -4px 24px rgba(0,0,0,.12);
}

@media (min-width: 480px) {
    .cpm-overlay {
        align-items: center;
    }
    .cpm-card {
        border-radius: var(--radius-lg, 16px);
        margin:        16px;
    }
}

.cpm-close {
    position:        absolute;
    top:             14px;
    right:           14px;
    background:      none;
    border:          none;
    cursor:          pointer;
    color:           var(--text-muted);
    padding:         6px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background .15s;
}

.cpm-close:hover {
    background: var(--bg-hover);
}

.cpm-title {
    font-family:    'Cinzel', serif;
    font-size:      .82rem;
    font-weight:    600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--text-secondary);
    margin:         0 0 20px;
}

.cpm-rows {
    display:        flex;
    flex-direction: column;
    gap:            0;
    margin-bottom:  20px;
}

.cpm-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             12px;
    padding:         11px 0;
    border-bottom:   1px solid var(--border);
}

.cpm-row:first-child { padding-top: 0; }

.cpm-row-price {
    border-bottom: none;
    padding-bottom: 0;
}

.cpm-label {
    font-size:      .72rem;
    font-weight:    600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--text-muted);
    flex-shrink:    0;
}

.cpm-value {
    font-size:  .88rem;
    color:      var(--text-primary);
    text-align: right;
}

.cpm-mono {
    font-family:    'Courier New', monospace;
    font-size:      .8rem;
    color:          var(--text-secondary);
    letter-spacing: .04em;
}

.cpm-price {
    font-family: 'Playfair Display', serif;
    font-size:   1.1rem;
    font-weight: 700;
    color:       var(--gold-dark);
}

.cpm-notice {
    display:     flex;
    align-items: flex-start;
    gap:         8px;
    padding:     12px 14px;
    background:  var(--bg-section-alt, #f9f7f4);
    border:      1px solid var(--border);
    border-radius: var(--radius);
    font-size:   .8rem;
    color:       var(--text-muted);
    line-height: 1.5;
    margin-top:  20px;
}

/* ═══════════════════════════════════════════════════════════════
   §68  Product detail — luxury compact two-column layout
   Overrides base grid/gallery/price panel to match premium
   jewellery editorial standard.
═══════════════════════════════════════════════════════════════ */

/* ── Grid proportions ────────────────────────────────────────── */
@media (min-width: 768px) {
    .product-detail              { padding-top: 16px; padding-bottom: 56px; }
    .product-detail-grid         {
        grid-template-columns: 1fr 1fr;
        gap:                   40px;
        align-items:           start;
    }
}

@media (min-width: 1024px) {
    .product-detail-grid {
        grid-template-columns: 1.25fr 1fr;
        gap:                   56px;
        align-items:           start;
    }
}

/* ── Gallery column — sticky on desktop ──────────────────────── */
.pd-gallery {
    width: 100%;
}

@media (min-width: 768px) {
    .pd-gallery {
        position: sticky;
        top:      92px;   /* clears fixed header */
    }
}

/* ── Gallery main frame overrides ────────────────────────────── */
.pd-gallery-main {
    aspect-ratio:  1 / 1;           /* square — clean luxury frame */
    background:    #F7F4EF;         /* warm ivory, lighter than beige */
    border-radius: 6px;
    border:        none;
}

.pd-gallery-main .gallery-main-img {
    object-fit: contain;            /* show full jewellery, no crop */
    padding:    20px;
}

.pd-gallery-main .gallery-placeholder {
    background: linear-gradient(145deg, #F7F4EF 0%, #EDE8E0 100%);
}

/* ── Right info panel ────────────────────────────────────────── */
.product-info-panel {
    gap: 14px;
}

/* Tighter title on product page */
.product-detail-title {
    font-size:   clamp(1.25rem, 3vw, 1.7rem);
    line-height: 1.15;
    margin:      0;
}

/* Optional subtitle (English/secondary name) — already inline-styled, refine here */
.pd-subtitle {
    font-size:  .84rem;
    color:      var(--text-muted);
    margin-top: -6px;
    line-height: 1.4;
}

/* ── Flat price block (replaces boxed product-price-panel) ───── */
.pd-price-block {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    padding:        16px 0;
    border-top:     1px solid var(--border);
    border-bottom:  1px solid var(--border);
}

.pd-price-block .detail-price {
    font-size:   1.85rem;
    line-height: 1;
    color:       var(--dark-brown);
}

.pd-price-note {
    font-size:  .78rem;
    color:      var(--text-muted);
    margin:     0;
    line-height: 1.4;
    min-height: 1.2em;  /* reserve space so layout doesn't jump */
}

/* ── CTA block — remove need for inline margin ───────────────── */
.product-detail-actions {
    margin-top: 4px;
    gap:        10px;
}

/* ── Description section ─────────────────────────────────────── */
.product-desc-section {
    padding-top: 4px;
}

/* ── Mobile: softer gallery frame ────────────────────────────── */
@media (max-width: 767px) {
    .pd-gallery-main {
        aspect-ratio:  4 / 3;
        border-radius: 4px;
    }
    .pd-price-block .detail-price {
        font-size: 1.6rem;
    }
    .product-detail {
        padding-top: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   §69  Luxury product detail — Bulgari-inspired refinements
        ▸ Gallery thumbnail strip (vertical desktop / horizontal mobile)
        ▸ Compact service rows below CTA (removes box from pd-item-details)
        ▸ Description & Details two-column section
        ▸ Container max-width constraint
═══════════════════════════════════════════════════════════════ */

/* ── Container constraint ────────────────────────────────────── */
.product-detail .container {
    max-width: 1060px;
}

/* ── Gallery layout: thumb strip left + main image right ─────── */
.pd-gallery-layout {
    display:     flex;
    flex-direction: row;
    gap:         12px;
    align-items: flex-start;
}

/* Vertical thumbnail column */
.pd-thumbs {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    width:          68px;
    flex-shrink:    0;
}

/* Individual thumbnail button */
.pd-thumb {
    width:           68px;
    height:          68px;
    border:          1.5px solid var(--border);
    border-radius:   4px;
    overflow:        hidden;
    cursor:          pointer;
    background:      #F7F4EF;
    padding:         0;
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      border-color .18s, box-shadow .18s;
}

.pd-thumb:hover {
    border-color: var(--gold-light, #C4A44A);
}

.pd-thumb.active {
    border-color: var(--gold-dark, #8B6914);
    box-shadow:   0 0 0 1px var(--gold-dark, #8B6914);
}

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

.pd-thumb-ph {
    font-family:     var(--font-serif, 'Cormorant Garamond', serif);
    font-size:       .6rem;
    letter-spacing:  .08em;
    color:           var(--text-muted);
}

/* Main image frame fills remaining width */
.pd-gallery-layout > .pd-gallery-main,
.pd-gallery-layout > .gallery-main-wrap {
    flex:      1;
    min-width: 0;
}

/* ── Mobile: thumbs switch to horizontal strip below main image ─ */
@media (max-width: 767px) {
    .pd-gallery-layout {
        flex-direction: column;
    }
    .pd-thumbs {
        flex-direction:            row;
        width:                     auto;
        overflow-x:                auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width:           none;
        padding-bottom:            2px;
    }
    .pd-thumbs::-webkit-scrollbar { display: none; }
    .pd-thumb {
        width:  56px;
        height: 56px;
    }
}

/* ── Compact service rows — remove box, use thin separator lines ─ */
/* Override §66 .pd-item-details box styles */
.pd-item-details {
    background:    none !important;
    border:        none !important;
    border-radius: 0    !important;
    padding:       0    !important;
    gap:           0    !important;
    min-height:    0    !important;
    margin-top:    20px;
}

/* Override §66 .pd-detail-row to use thin border lines */
.pd-item-details .pd-detail-row {
    padding:     10px 0 !important;
    border-top:  none !important;
    border-bottom: 1px solid var(--border) !important;
    gap:         16px !important;
}

.pd-item-details .pd-detail-row:first-child {
    border-top: 1px solid var(--border) !important;
}

/* ── Description & Details two-column section ────────────────── */
.pd-info-section {
    display:               grid;
    grid-template-columns: 1fr 1px 1fr;
    gap:                   0 48px;
    margin-top:            56px;
    padding-top:           44px;
    border-top:            1px solid var(--border);
}

.pd-info-sep {
    background:  var(--border);
    align-self:  stretch;
    min-height:  80px;
}

.pd-info-col {
    /* inherits grid placement */
}

.pd-info-heading {
    font-size:      .68rem;
    font-weight:    700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          var(--text-muted);
    margin-bottom:  18px;
    margin-top:     0;
}

.pd-info-body {
    font-size:   .9rem;
    line-height: 1.75;
    color:       var(--text-secondary);
    margin:      0;
}

.pd-info-empty {
    font-style: italic;
    color:      var(--text-muted);
}

.pd-info-dlist {
    margin:  0;
    padding: 0;
}

.pd-info-drow {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         9px 0;
    border-bottom:   1px solid var(--border);
    gap:             16px;
}

.pd-info-drow:first-child {
    border-top: 1px solid var(--border);
}

.pd-info-drow dt {
    font-size:   .8rem;
    color:       var(--text-muted);
    font-weight: 400;
    flex-shrink: 0;
}

.pd-info-drow dd {
    font-size:   .8rem;
    font-weight: 500;
    color:       var(--dark-brown);
    text-align:  right;
    margin:      0;
}

/* ── Mobile: stack the two columns vertically ────────────────── */
@media (max-width: 767px) {
    .pd-info-section {
        grid-template-columns: 1fr;
        gap:                   28px 0;
        margin-top:            40px;
        padding-top:           32px;
    }
    .pd-info-sep {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   §70  Bulgari-inspired visual refinements
        ▸ Black CTA (explicit, overrides all)
        ▸ Title row with wishlist / share icon buttons
        ▸ Subtle metadata row (replaces chip badges)
        ▸ Bulgari-style service rows (pd-svc-row)
        ▸ Premium gallery placeholder & thumb sizing
        ▸ Typography / spacing tightening
        ▸ Bottom Details: pd-info-selected (JS-populated)
═══════════════════════════════════════════════════════════════ */

/* ── Guaranteed black main CTA — overrides any cascade ──────── */
#pd-main-cta:not(:disabled) {
    background:     #1C1C1C  !important;
    color:          #ffffff  !important;
    border-color:   #1C1C1C  !important;
    box-shadow:     none     !important;
    letter-spacing: .14em   !important;
    font-size:      .7rem   !important;
    font-weight:    500     !important;
    border-radius:  0       !important;
    text-transform: uppercase !important;
}
#pd-main-cta:not(:disabled):hover {
    background:   #2d2d2d !important;
    border-color: #2d2d2d !important;
    transform:    none    !important;
}
#pd-main-cta:disabled {
    background:   rgba(26,26,26,.12) !important;
    color:        rgba(26,26,26,.35) !important;
    border-color: transparent        !important;
    cursor:       not-allowed        !important;
    transform:    none               !important;
}

/* Secondary outline in product detail — matched sizing */
.product-detail-actions .btn-outline-dark {
    letter-spacing: .14em !important;
    font-size:      .7rem !important;
    font-weight:    500   !important;
    border-radius:  0     !important;
    text-transform: uppercase !important;
}

/* ── Title row (title + wishlist/share side by side) ─────────── */
.pd-title-row {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             12px;
}

.pd-title-row .product-detail-title {
    flex:     1;
    min-width: 0;
}

.pd-title-actions {
    display:     flex;
    align-items: center;
    gap:         2px;
    flex-shrink: 0;
    padding-top: 3px;
}

/* ── Wishlist / share icon buttons ───────────────────────────── */
.pd-icon-btn {
    width:           32px;
    height:          32px;
    padding:         0;
    border:          none;
    background:      none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--text-muted);
    border-radius:   50%;
    transition:      color .18s, background .18s;
    flex-shrink:     0;
}

.pd-icon-btn:hover {
    color:      var(--dark-brown);
    background: rgba(26,26,26,.05);
}

/* Heart fills gold when active */
.pd-wishlist-btn.is-active svg {
    fill:   var(--gold, #C4A44A);
    stroke: var(--gold, #C4A44A);
}

/* ── Share feedback label ────────────────────────────────────── */
.pd-share-feedback {
    display:        inline-block;
    font-size:      .69rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--gold-dark, #8B6914);
    padding:        2px 0 4px;
}

/* ── Subtle metadata row (replaces chip badges) ──────────────── */
.pd-meta-row {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         0 6px;
    font-size:   .72rem;
    color:       var(--text-muted);
    line-height: 1.5;
    margin-top:  -2px;
}

.pd-meta-item {
    display: inline;
}

/* Dot separator between items */
.pd-meta-item + .pd-meta-item::before {
    content:      '·';
    margin-right: 6px;
    opacity:      .45;
    font-size:    .8rem;
}

.pd-meta-key {
    font-weight:  600;
    color:        var(--text-secondary);
    margin-right: 2px;
}

.pd-meta-gold {
    color:       var(--gold-dark, #8B6914);
    font-weight: 600;
}

/* ── Size dropdown refinements ───────────────────────────────── */
.pd-size-select {
    padding:          10px 36px 10px 14px !important;
    font-size:        .84rem   !important;
    border-width:     1px      !important;
    border-color:     rgba(26,26,26,.22) !important;
    border-radius:    0        !important;
    background-color: #fff     !important;
    color:            #1C1C1C  !important;
}
.pd-size-select:focus,
.pd-size-select:hover {
    border-color: #1C1C1C    !important;
    box-shadow:   none       !important;
    outline:      none       !important;
}
.pd-size-label {
    font-size:      .64rem   !important;
    letter-spacing: .14em   !important;
    font-weight:    700     !important;
    color:          var(--text-muted) !important;
}

/* ── Price block refinements ─────────────────────────────────── */
.pd-price-block {
    border-top:    1px solid var(--border) !important;
    border-bottom: none   !important;
    padding:       12px 0 8px !important;
}
.pd-price-block .detail-price {
    font-family:    var(--font-serif, 'Cormorant Garamond', serif) !important;
    font-size:      1.6rem !important;
    font-weight:    400    !important;
    letter-spacing: .01em  !important;
    color:          #1C1C1C !important;
    line-height:    1.1    !important;
}

/* ── Product detail actions — remove excessive top margin ────── */
.product-detail-actions {
    gap:        9px !important;
    margin-top: 2px !important;
}

/* ── Service rows — compact Bulgari-style notes below CTA ────── */
/* pd-item-details box reset already in §69;
   these styles define the new svc-row appearance */
.pd-svc-row {
    display:       flex;
    align-items:   flex-start;
    gap:           9px;
    padding:       7px 0;
    border-bottom: 1px solid rgba(26,26,26,.06);
    font-size:     .79rem;
    color:         var(--text-secondary);
    line-height:   1.45;
}
.pd-svc-row:first-child {
    border-top: 1px solid rgba(26,26,26,.06);
}

.pd-svc-dot {
    display:       block;
    width:         4px;
    height:        4px;
    border-radius: 50%;
    background:    var(--gold, #C4A44A);
    flex-shrink:   0;
    margin-top:    5px;
}

.pd-svc-text {
    flex: 1;
    min-width: 0;
}

.pd-svc-key {
    font-size:      .65rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--text-muted);
    margin-right:   4px;
}

.pd-svc-avail {
    font-size:      .7rem;
    font-weight:    700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          #1A6A42;
}

.pd-svc-preorder {
    font-size:      .7rem;
    font-weight:    700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--gold-dark, #8B6914);
}

.pd-svc-note {
    font-size: .74rem;
    color:     var(--text-muted);
}

/* ── Gallery: premium placeholder ───────────────────────────── */
.pd-gallery-main .gallery-placeholder {
    background: linear-gradient(145deg, #F9F6F1 0%, #EDEADE 100%);
}

.pd-gallery-main .ph-initials {
    font-family:    var(--font-serif, 'Cormorant Garamond', serif) !important;
    font-size:      2rem    !important;
    font-weight:    300     !important;
    letter-spacing: .5em    !important;
    color:          rgba(139,103,69,.2) !important;
    text-indent:    .5em    !important;
}

/* Thumbnails: slightly larger for Bulgari feel */
.pd-thumbs    { width: 76px !important; }
.pd-thumb     { width: 76px !important; height: 76px !important; }

@media (max-width: 767px) {
    .pd-thumbs { width: auto !important; }
    .pd-thumb  { width: 58px !important; height: 58px !important; }
}

/* ── Typography refinements ──────────────────────────────────── */
.product-info-panel          { gap: 12px !important; }

.product-detail-category {
    font-size:      .63rem   !important;
    letter-spacing: .2em    !important;
    font-weight:    700     !important;
    text-transform: uppercase !important;
}

.product-detail-title {
    font-size:   clamp(1.1rem, 2.4vw, 1.5rem) !important;
    font-weight: 500  !important;
    line-height: 1.1  !important;
    margin:      0    !important;
}

.pd-subtitle {
    font-size:  .77rem !important;
    color:      var(--text-muted) !important;
    margin-top: -2px  !important;
    margin-bottom: 0  !important;
    line-height: 1.4  !important;
}

.pd-price-note {
    font-size:  .75rem !important;
    color:      var(--text-muted) !important;
    margin-top: 2px   !important;
}

/* ── Bottom Details: pd-info-selected rows ───────────────────── */
.pd-info-selected {
    /* rows appear as seamless continuation of the dl above */
}
.pd-info-selected .pd-info-drow:first-child {
    /* no top border — parent dl ends with border-bottom already */
    border-top: none;
}

/* ── Mobile adjustments ──────────────────────────────────────── */
@media (max-width: 767px) {
    .pd-title-actions { gap: 0; padding-top: 2px; }
    .pd-icon-btn      { width: 28px; height: 28px; }
    .pd-icon-btn svg  { width: 15px; height: 15px; }
    .pd-price-block .detail-price { font-size: 1.4rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   §71  Phase-3 polish
        ▸ Container: 1060px → 1200px (eliminate large side gaps)
        ▸ Grid: 55 / 42 balanced proportions, 44px gap
        ▸ Share feedback: near-icon tooltip via class toggle
        ▸ Status text: charcoal (not green)
        ▸ Dot accent: very subtle
        ▸ Meta-gold: toned down
        ▸ Monospace removed from code/ref spans
        ▸ Heading: PENERANGAN / BUTIRAN uppercase treatment
        ▸ Reduced top spacing (nav → product)
═══════════════════════════════════════════════════════════════ */

/* ── Wider canvas ────────────────────────────────────────────── */
.product-detail .container {
    max-width: 1200px !important;
}

/* ── Balanced grid proportions ───────────────────────────────── */
@media (min-width: 1024px) {
    .product-detail-grid {
        grid-template-columns: 55fr 42fr !important;
        gap:                   44px      !important;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .product-detail-grid {
        grid-template-columns: 3fr 2fr !important;
        gap:                   32px    !important;
    }
}

/* ── Reduced nav → product top gap ──────────────────────────── */
@media (min-width: 768px) {
    .product-detail { padding-top: 10px !important; }
}

/* ── Share feedback: absolute tooltip near icon ──────────────── */
.pd-title-actions {
    position: relative !important;
}
.pd-share-feedback {
    position:       absolute       !important;
    top:            calc(100% + 6px) !important;
    right:          0              !important;
    bottom:         auto           !important;
    display:        block          !important;
    font-size:      .62rem         !important;
    letter-spacing: .12em          !important;
    text-transform: uppercase      !important;
    color:          var(--gold-dark, #8B6914) !important;
    background:     #fff           !important;
    padding:        3px 9px        !important;
    border:         1px solid rgba(139,103,69,.2) !important;
    border-radius:  2px            !important;
    white-space:    nowrap         !important;
    pointer-events: none           !important;
    z-index:        20             !important;
    opacity:        0              !important;
    visibility:     hidden         !important;
    transition:     opacity .18s ease, visibility .18s ease !important;
    line-height:    1.4            !important;
}
.pd-share-feedback.is-visible {
    opacity:    1       !important;
    visibility: visible !important;
}

/* ── Status: charcoal, not green ────────────────────────────── */
.pd-svc-avail {
    color:       #1C1C1C !important;
    font-weight: 600     !important;
}

/* ── Dot: very subtle ────────────────────────────────────────── */
.pd-svc-dot {
    background: rgba(26,26,26,.15) !important;
}

/* ── Meta purity: toned-down (no bright gold) ────────────────── */
.pd-meta-gold {
    color:       var(--text-secondary, #555) !important;
    font-weight: 500 !important;
}

/* ── Remove monospace from code / design-code spans ─────────── */
.pd-mono {
    font-family:    inherit !important;
    letter-spacing: .04em;
    font-size:      inherit !important;
}

/* ── Section headings: clean uppercase treatment ─────────────── */
.pd-info-heading {
    font-size:      .6rem    !important;
    letter-spacing: .22em    !important;
    font-weight:    700      !important;
    text-transform: uppercase !important;
    color:          #1C1C1C  !important;
    margin-bottom:  14px     !important;
    font-family:    var(--font-sans, 'Josefin Sans', sans-serif) !important;
}

/* ── Breadcrumb: less top breathing room ────────────────────── */
.product-breadcrumb {
    padding-top:    4px  !important;
    margin-bottom:  20px !important;
}

/* ═══════════════════════════════════════════════════════════════
   §72  Typography system, colour discipline, panel compaction
        ▸ Unified sans-serif throughout product page
        ▸ Price: clean var(--font-ui), lining figures, no serif
        ▸ Title: uppercase 600 weight, .06em tracking
        ▸ Colour: #1C1C1C / #666 / #888 — gold only for states
        ▸ Right panel: fixed 440px so it's compact, not stretched
        ▸ Compact vertical rhythm (6–10px gaps)
        ▸ Dropdown: thin border #D0CABE → #1C1C1C on focus
        ▸ Service rows: .06em letter-spacing, no code font
        ▸ dt/dd: clean grey label / black value
        ▸ Nav: 1200px container, space-evenly spread
═══════════════════════════════════════════════════════════════ */

/* ── 1. Product title ─────────────────────────────────────── */
.product-detail-title {
    font-family:    var(--font-ui) !important;
    font-size:      clamp(1.3rem, 2.6vw, 1.55rem) !important;
    font-weight:    600 !important;
    letter-spacing: .06em !important;
    line-height:    1.2   !important;
    color:          #1C1C1C !important;
    text-transform: uppercase !important;
    margin:         0 !important;
}
@media (max-width: 767px) {
    .product-detail-title {
        font-size:      clamp(1.1rem, 5vw, 1.3rem) !important;
        letter-spacing: .04em !important;
    }
}

/* ── 2. Price — clean sans-serif, lining figures ─────────── */
.pd-price-block .detail-price {
    font-family:          var(--font-ui) !important;
    font-size:            clamp(1.25rem, 2vw, 1.4rem) !important;
    font-weight:          600 !important;
    letter-spacing:       .01em !important;
    color:                #1C1C1C !important;
    line-height:          1.25 !important;
    font-variant-numeric: lining-nums tabular-nums !important;
}
@media (max-width: 767px) {
    .pd-price-block .detail-price { font-size: 1.25rem !important; }
}

/* ── 3. Category label ────────────────────────────────────── */
.product-detail-category {
    font-family:    var(--font-ui) !important;
    font-size:      .6rem !important;
    letter-spacing: .14em !important;
    color:          #888  !important;
    font-weight:    700   !important;
    text-transform: uppercase !important;
    margin:         0 !important;
}

/* ── 4. Subtitle (secondary lang name) ───────────────────── */
.pd-subtitle {
    font-family:    var(--font-ui) !important;
    font-size:      .75rem !important;
    color:          #888   !important;
    letter-spacing: .01em  !important;
    margin:         0 !important;
    line-height:    1.4 !important;
}

/* ── 5. Meta row (ref / purity / material) ───────────────── */
.pd-meta-row {
    font-family: var(--font-ui) !important;
    color:       #777 !important;
    font-size:   .7rem !important;
}
.pd-meta-key {
    color:       #999 !important;
    font-weight: 500  !important;
}
.pd-meta-gold {
    color:       #666 !important;
    font-weight: 500  !important;
}

/* ── 6. Size label ───────────────────────────────────────── */
.pd-size-label {
    font-family:    var(--font-ui) !important;
    font-size:      .6rem  !important;
    letter-spacing: .1em   !important;
    font-weight:    700    !important;
    color:          #888   !important;
    text-transform: uppercase !important;
}

/* ── 7. Dropdown — clean thin border, black focus ────────── */
.pd-size-select {
    font-family:   var(--font-ui) !important;
    font-size:     .84rem !important;
    border:        1.5px solid #D0CABE !important;
    border-radius: 0 !important;
    color:         #1C1C1C !important;
    padding:       10px 36px 10px 12px !important;
    width:         100% !important;
}
.pd-size-select:focus,
.pd-size-select:hover {
    border-color: #1C1C1C !important;
    box-shadow:   none    !important;
    outline:      none    !important;
}

/* ── 8. Price note ───────────────────────────────────────── */
.pd-price-note {
    font-family:    var(--font-ui) !important;
    font-size:      .72rem !important;
    color:          #777   !important;
    letter-spacing: .01em  !important;
    margin-top:     2px    !important;
}

/* ── 9. CTA button — clean sans-serif, 44px height ──────── */
#pd-main-cta:not(:disabled) {
    font-family:    var(--font-ui) !important;
    font-size:      .66rem !important;
    font-weight:    700    !important;
    letter-spacing: .12em  !important;
    height:         44px   !important;
    line-height:    44px   !important;
    padding-top:    0      !important;
    padding-bottom: 0      !important;
}
.product-detail-actions .btn-outline-dark {
    font-family:    var(--font-ui) !important;
    font-size:      .66rem !important;
    font-weight:    600    !important;
    letter-spacing: .12em  !important;
    border-color:   #1C1C1C !important;
    color:          #1C1C1C !important;
    background:     #fff    !important;
    height:         44px    !important;
    line-height:    44px    !important;
    padding-top:    0       !important;
    padding-bottom: 0       !important;
}
.product-detail-actions .btn-outline-dark:hover {
    background:   #1C1C1C !important;
    color:        #ffffff !important;
    border-color: #1C1C1C !important;
}

/* ── 10. Right panel grid — fixed width, compact ─────────── */
@media (min-width: 1024px) {
    .product-detail-grid {
        grid-template-columns: 1fr 440px !important;
        gap:                   52px      !important;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .product-detail-grid {
        grid-template-columns: 1fr 360px !important;
        gap:                   28px      !important;
    }
}

/* ── 11. Compact vertical rhythm ─────────────────────────── */
.product-info-panel     { gap: 6px !important; }
.pd-size-group          { margin-top: 8px !important; }
.pd-price-block         { padding: 10px 0 8px !important; }
.product-detail-actions { margin-top: 2px !important; gap: 8px !important; }
#pd-item-details        { margin-top: 4px !important; }

/* ── 12. Service rows — clean, no code font ──────────────── */
.pd-svc-row {
    font-family: var(--font-ui) !important;
    font-size:   .78rem !important;
    color:       #444   !important;
    padding:     6px 0  !important;
    gap:         10px   !important;
}
.pd-svc-key {
    font-family:    var(--font-ui) !important;
    font-size:      .62rem !important;
    letter-spacing: .06em  !important;
    font-weight:    700    !important;
    color:          #888   !important;
    text-transform: uppercase !important;
}
.pd-svc-avail {
    font-family:    var(--font-ui) !important;
    color:          #1C1C1C !important;
    font-weight:    600     !important;
    letter-spacing: .04em   !important;
    text-transform: uppercase !important;
    font-size:      .69rem  !important;
}
.pd-svc-preorder {
    font-family:    var(--font-ui) !important;
    color:          #555   !important;
    font-size:      .69rem !important;
    letter-spacing: .04em  !important;
}
.pd-svc-note {
    font-family: var(--font-ui) !important;
    color:       #777  !important;
    font-size:   .73rem !important;
}
.pd-svc-dot {
    background: rgba(26,26,26,.1) !important;
}

/* ── 13. Bottom PENERANGAN / BUTIRAN section ─────────────── */
.pd-info-heading {
    font-family:    var(--font-ui) !important;
    font-size:      .62rem   !important;
    letter-spacing: .14em    !important;
    font-weight:    700      !important;
    color:          #1C1C1C  !important;
    text-transform: uppercase !important;
    margin-bottom:  14px     !important;
    margin-top:     0        !important;
}

.pd-info-body {
    font-family: var(--font-ui) !important;
    font-size:   .87rem !important;
    color:       #555   !important;
    line-height: 1.75   !important;
}

.pd-info-empty {
    color:      #999   !important;
    font-style: italic !important;
}

/* dt: label col */
.pd-info-drow dt {
    font-family:    var(--font-ui) !important;
    font-size:      .63rem !important;
    letter-spacing: .06em  !important;
    font-weight:    600    !important;
    color:          #888   !important;
    text-transform: uppercase !important;
}

/* dd: value col */
.pd-info-drow dd {
    font-family: var(--font-ui) !important;
    font-size:   .84rem  !important;
    color:       #1C1C1C !important;
    font-weight: 400     !important;
    text-align:  right   !important;
    margin:      0       !important;
}

/* ── 14. Navigation — widen container, spread items ─────── */
.nav-inner {
    max-width: 1200px !important;
    padding:   0 24px !important;
}
.nav-links {
    width:           100% !important;
    justify-content: space-evenly !important;
    gap:             0 !important;
}
.nav-links > li > a {
    font-family:    var(--font-ui) !important;
    font-size:      .84rem !important;   /* ≈ 13.4px — readable luxury weight */
    font-weight:    600   !important;
    letter-spacing: .09em !important;
    padding:        0 11px !important;
    color:          #1C1C1C !important;
}
/* Thin black underline for active/hover */
.nav-links > li > a::after {
    background: #1C1C1C !important;
    height:     1px    !important;
    left:       11px   !important;
    right:      11px   !important;
}
@media (max-width: 767px) {
    .nav-links { justify-content: flex-start !important; }
}

/* ═══════════════════════════════════════════════════════════════
   §73  Colour discipline pass
        ▸ Re-scope CSS colour variables inside .product-detail
          so brown/gold token references resolve to clean grey
        ▸ Checkout preview modal: sans-serif, muted-gold price only
        ▸ Breadcrumb: clean grey links
        ▸ Gallery badge: muted, no bright green
═══════════════════════════════════════════════════════════════ */

/* ── Re-scope colour tokens for product detail ───────────── */
/* All existing rules using var(--text-muted), var(--text-secondary),
   var(--dark-brown) etc. inside .product-detail now resolve to
   clean grey/charcoal instead of the original warm-brown tones.  */
.product-detail {
    --text-primary:   #1C1C1C;
    --text-secondary: #666666;
    --text-muted:     #888888;
    --dark-brown:     #1C1C1C;
    --brown:          #444444;
    --brown-mid:      #666666;
    --border:         #E5E0D8;
    --gold-dark:      #9A7A20;
    --gold:           #9A7A20;
}

/* ── Gallery status badge: clean, no bright colours ──────── */
.gallery-status-badge .badge-available {
    background:  rgba(26,26,26,.06) !important;
    color:       #444              !important;
    border:      1px solid rgba(26,26,26,.12) !important;
    font-size:   .6rem             !important;
    font-weight: 600               !important;
    letter-spacing: .1em           !important;
    text-transform: uppercase      !important;
}
.gallery-status-badge .badge-preorder {
    background:  rgba(154,122,32,.07) !important;
    color:       #7a6010            !important;
    border:      1px solid rgba(154,122,32,.2) !important;
    font-size:   .6rem              !important;
    font-weight: 600                !important;
    letter-spacing: .1em            !important;
    text-transform: uppercase       !important;
}

/* ── Breadcrumb: clean grey links, not gold/brown ────────── */
.product-breadcrumb a {
    color: #777 !important;
    text-decoration: none !important;
}
.product-breadcrumb a:hover {
    color: #1C1C1C !important;
}
.product-breadcrumb {
    font-family: var(--font-ui, "Helvetica Neue", Arial, sans-serif) !important;
    font-size:   .68rem !important;
    color:       #999   !important;
}

/* ── Checkout preview modal: clean sans-serif, muted labels ─ */
.cpm-label {
    font-family:    var(--font-ui, "Helvetica Neue", Arial, sans-serif) !important;
    color:          #888   !important;
    letter-spacing: .07em  !important;
    font-size:      .69rem !important;
}
.cpm-value {
    font-family: var(--font-ui, "Helvetica Neue", Arial, sans-serif) !important;
    color:       #1C1C1C !important;
    font-size:   .86rem  !important;
}
/* Item code: remove monospace */
.cpm-mono {
    font-family:    var(--font-ui, "Helvetica Neue", Arial, sans-serif) !important;
    letter-spacing: .03em  !important;
    color:          #1C1C1C !important;
    font-size:      .84rem  !important;
}
/* Price row: muted antique gold only, clean sans-serif */
.cpm-price {
    font-family: var(--font-ui, "Helvetica Neue", Arial, sans-serif) !important;
    font-size:   1.05rem  !important;
    font-weight: 700      !important;
    color:       #9A7A20  !important;
}
.cpm-title {
    font-family:    var(--font-ui, "Helvetica Neue", Arial, sans-serif) !important;
    font-size:      .78rem !important;
    font-weight:    700    !important;
    letter-spacing: .12em  !important;
    text-transform: uppercase !important;
    color:          #1C1C1C !important;
}
.cpm-notice {
    font-family: var(--font-ui, "Helvetica Neue", Arial, sans-serif) !important;
    color:       #888 !important;
    font-size:   .76rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   §74  Pre-order wording & size readability
        ▸ pom-item-meta: semi-bold size value, not faded
        ▸ pom-meta-part: label normal / value semi-bold
        ▸ pd-size-select option: full opacity for pre-order
═══════════════════════════════════════════════════════════════ */

/* Pre-order modal item strip — clear, readable */
.pom-item-name {
    font-family: var(--font-ui, "Helvetica Neue", Arial, sans-serif) !important;
    font-size:   .88rem !important;
    font-weight: 600    !important;
    color:       #1C1C1C !important;
}

.pom-item-meta {
    font-family: var(--font-ui, "Helvetica Neue", Arial, sans-serif) !important;
    font-size:   .78rem !important;
    color:       #555   !important;
    font-weight: 400    !important;
    margin-top:  2px    !important;
}

/* Locale-labelled meta parts (Saiz/Size, Kod/Code) */
.pom-meta-part {
    font-weight:  500 !important;
    color:        #1C1C1C !important;
    white-space:  nowrap  !important;  /* prevent "Pre-Order" breaking at hyphen */
}

.pom-meta-sep {
    color:   #bbb !important;
    padding: 0 2px !important;
}

/* Dropdown — pre-order options must not look disabled */
.pd-size-select option {
    color:   #1C1C1C !important;
    opacity: 1       !important;
}
.pd-size-select option[data-avail="0"] {
    color:   #1C1C1C !important;
    opacity: 1       !important;
}

/* ─────────────────────────────────────────────────────────────
   §75 — Pre-order service row polish + button hover guard
   2026-05-30
   ───────────────────────────────────────────────────────────── */

/* Pre-order status value in service rows — charcoal, slightly bolder */
.pd-svc-preorder {
    color:       #1C1C1C !important;
    font-weight: 500     !important;
}

/* Pre-order note row — muted, not brown */
.pd-svc-note {
    color:     #666666 !important;
    font-size: .8rem   !important;
}

/* Colour discipline — gold/brown accent ONLY on cpm-price; all product-detail
   text tokens resolve to clean charcoal/grey via the §73 re-scope.
   Explicit guard: nothing else in .product-detail should render #9A7A20. */
.product-detail .pd-svc-text,
.product-detail .pd-svc-key,
.product-detail .pd-meta-row,
.product-detail .pd-svc-avail {
    color: inherit !important;
}
.product-detail .pd-svc-avail {
    color: #1C1C1C !important;
}

/* Ensure secondary CTA hover inverts fully to black — guard re-applied
   in case earlier §72 rule is overridden elsewhere */
.product-detail-actions .btn-outline-dark:hover,
.product-detail-actions .btn-outline-dark:focus-visible {
    background:   #1C1C1C !important;
    color:        #ffffff !important;
    border-color: #1C1C1C !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   §76  Pre-Order Modal (POM) + Order Option Modal (OOM) — clean sans-serif
   Re-scopes every decorative serif token back to --font-ui.
   Cinzel / Cormorant Garamond must not appear inside these modals.
   ───────────────────────────────────────────────────────────────────────── */

/* Modal title — was 'Cinzel'/'Trajan Pro' → decorative serif */
.pom-title {
    font-family:     var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
    font-size:       1rem         !important;
    font-weight:     600          !important;
    letter-spacing:  .04em        !important;
    text-transform:  none         !important;
    color:           #1C1C1C      !important;
}

/* Eyebrow label — keep gold accent, tighten to sans */
.pom-eyebrow {
    font-family:     var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
    font-size:       .65rem        !important;
    font-weight:     600           !important;
    letter-spacing:  .1em          !important;
    text-transform:  uppercase     !important;
    color:           #9A7A20       !important;
}

/* Subtitle copy */
.pom-subtitle {
    font-family:     var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
}

/* Form labels and section labels */
.pom-label {
    font-family:     var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
    color:           #1C1C1C !important;
}
.pom-section-label {
    font-family:     var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
    color:           #888888 !important;
}

/* Inputs and textarea */
.pom-input,
.pom-textarea {
    font-family:     var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
}

/* Submit button — was gold (#9a7a1e) → clean charcoal */
.pom-submit-btn {
    background:      #1C1C1C      !important;
    color:           #ffffff      !important;
    font-family:     var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
    text-transform:  uppercase    !important;
    letter-spacing:  .08em        !important;
    border-color:    #1C1C1C      !important;
}
.pom-submit-btn:hover,
.pom-submit-btn:focus-visible {
    background:      #333333      !important;
    border-color:    #333333      !important;
}

/* Order Option Modal (OOM) — was 'Cormorant Garamond' → sans */
.oom-title {
    font-family:     var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
    font-size:       1rem         !important;
    font-weight:     600          !important;
    letter-spacing:  .04em        !important;
    text-transform:  uppercase    !important;
    color:           #1C1C1C      !important;
}

/* OOM product name — remove italic */
.oom-product-name {
    font-style:      normal       !important;
    font-family:     var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §77  CATEGORY PAGE — LUXURY REDESIGN
   Scope: .cat-page — isolated from product detail & catalogue pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ──────────────────────────────────────────────────────────── */
.cat-page {
    background: #ffffff;
}

/* ── Compact hero ──────────────────────────────────────────────────────────── */
.cat-hero {
    background:    #ffffff;
    border-bottom: 1px solid #EBEBEB;
    padding:       44px 0 28px;
    text-align:    center;
}
.cat-hero-inner {
    max-width: 560px;
    margin:    0 auto;
}
.cat-hero-eyebrow {
    display:        block;
    font-family:    var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:      .62rem;
    font-weight:    600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color:          #9A7A20;
    margin-bottom:  10px;
}
.cat-hero-title {
    font-family:    var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:      clamp(1.6rem, 4vw, 2.4rem);
    font-weight:    300;
    letter-spacing: .05em;
    text-transform: uppercase;
    color:          #1C1C1C;
    margin:         0 0 8px;
    line-height:    1.1;
}
.cat-hero-count {
    font-family:    var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:      .77rem;
    color:          #999;
    margin:         0;
    letter-spacing: .04em;
}

/* ── Category nav pills ────────────────────────────────────────────────────── */
.cat-nav-scroll {
    overflow-x:               auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:          none;
    padding:                  20px 0 0;
}
.cat-nav-scroll::-webkit-scrollbar { display: none; }
.cat-nav-pills {
    display:    flex;
    gap:        0;
    flex-wrap:  nowrap;
}
.cat-nav-pill {
    display:         inline-block;
    font-family:     var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:       .65rem;
    font-weight:     400;
    letter-spacing:  .12em;
    text-transform:  uppercase;
    color:           #AAAAAA;
    background:      transparent;
    border:          none;
    border-radius:   0;
    padding:         10px 16px;
    white-space:     nowrap;
    text-decoration: none;
    transition:      color .18s;
}
.cat-nav-pill:hover {
    color:           #1C1C1C;
    text-decoration: none;
}
.cat-nav-pill.active {
    background:               transparent;
    color:                    #1C1C1C;
    font-weight:              600;
    text-decoration:          underline;
    text-underline-offset:    5px;
    text-decoration-thickness: 1.5px;
}

/* ── Filter bar — Bulgari inspired: clean line, no heavy boxes ─────────────── */
.cat-filter-bar {
    display:       flex;
    align-items:   center;
    gap:           28px;
    flex-wrap:     wrap;
    padding:       10px 0;
    border-top:    1px solid #EBEBEB;
    border-bottom: 1px solid #EBEBEB;
    margin-bottom: 16px;
}

/* Status chips — pure text, no border boxes */
.cat-status-chips {
    display:     flex;
    gap:         20px;
    flex-shrink: 0;
}
.cat-chip {
    display:         inline-block;
    font-family:     var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:       .65rem;
    font-weight:     400;
    letter-spacing:  .1em;
    text-transform:  uppercase;
    color:           #AAAAAA;
    background:      transparent;
    border:          none;
    border-radius:   0;
    padding:         6px 0;
    text-decoration: none;
    white-space:     nowrap;
    transition:      color .18s;
}
.cat-chip:hover {
    color:           #1C1C1C;
    text-decoration: none;
}
.cat-chip.active {
    background:               transparent;
    color:                    #1C1C1C;
    font-weight:              600;
    text-decoration:          underline;
    text-underline-offset:    4px;
    text-decoration-thickness: 1px;
}

/* Material + sort form — Bulgari-style: plain text + chevron, no box */
.cat-filter-form {
    display:     flex;
    align-items: center;
    gap:         20px;
    margin-left: auto;
}
.cat-select {
    font-family:        var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:          .65rem;
    font-weight:        500;
    letter-spacing:     .1em;
    text-transform:     uppercase;
    color:              #555;
    background:         transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath d='M0 0l4.5 5 4.5-5z' fill='%23555'/%3E%3C/svg%3E") no-repeat right 2px center;
    background-size:    9px 5px;
    border:             none;
    border-bottom:      1px solid #C8C8C8;
    border-radius:      0;
    padding:            5px 18px 5px 0;
    height:             auto;
    min-width:          90px;
    cursor:             pointer;
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
}
.cat-select:focus {
    outline:             none;
    border-bottom-color: #1C1C1C;
}

/* ── Active filter pills ───────────────────────────────────────────────────── */
.cat-active-filters {
    display:       flex;
    flex-wrap:     wrap;
    gap:           6px;
    margin-bottom: 14px;
}
.cat-active-pill {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    font-family:     var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:       .7rem;
    font-weight:     500;
    color:           #1C1C1C;
    background:      #F5F5F5;
    border:          1px solid #E0E0E0;
    border-radius:   2px;
    padding:         3px 10px;
}
.cat-active-pill a {
    color:           #888;
    text-decoration: none;
    font-size:       .9rem;
    line-height:     1;
}
.cat-active-pill a:hover { color: #c00; }

/* ── Result count ──────────────────────────────────────────────────────────── */
.cat-result-count {
    font-family:    var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:      .75rem;
    color:          #aaa;
    margin:         0 0 16px;
    letter-spacing: .02em;
}

/* ── Product grid ──────────────────────────────────────────────────────────── */
/*
   IMPORTANT: global §DW (line ~6789) sets:
     .product-grid { gap: 1px !important; background: #e0e0e0 !important; }
   That grey IS the "grey block" — the grid container shows through empty cells.
   .cat-page .product-grid has specificity 0,2,0 vs 0,1,0 — when BOTH carry
   !important the higher-specificity rule wins, so our overrides take effect.
*/
.cat-page .product-grid {
    display:               grid !important;
    grid-template-columns: repeat(2, 1fr) !important;  /* mobile: 2 cols */
    gap:                   12px !important;
    background:            transparent !important;      /* KILL the #e0e0e0 grey */
    justify-content:       start !important;
    align-items:           start !important;
}
@media (min-width: 600px) {
    /* auto-fill: as many 240–280 px columns as fit; left-aligned, no stretch */
    .cat-page .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 280px)) !important;
        gap:                   20px !important;
    }
}
@media (min-width: 1024px) {
    .cat-page .product-grid { gap: 24px !important; }
}

/* Card: borderless catalogue item — image area defines the card, no box */
.cat-page .product-card {
    width:         100% !important;
    max-width:     280px !important;
    min-width:     0 !important;
    flex:          none !important;
    background:    #ffffff !important;
    border:        none !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
    transform:     none !important;
}
.cat-page .product-card:hover {
    transform:    translateY(-3px) !important;
    box-shadow:   0 6px 24px rgba(0,0,0,.07) !important;
    border:       none !important;
    background:   #ffffff !important;
}

/* ── Card image overrides ──────────────────────────────────────────────────── */
.cat-page .card-image-wrap {
    aspect-ratio: 1 / 1;
    background:   #F4F4F4 !important;  /* clear grey, distinct from white page */
}
.cat-page .card-img {
    object-fit: contain !important;
    padding:    10px;
}
.cat-page .card-placeholder {
    background: #ECECEC !important;
}
.cat-page .placeholder-initials {
    font-family:    var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:      1rem;
    font-weight:    300;
    letter-spacing: .14em;
    color:          #AAAAAA;
}

/* ── Card body overrides ───────────────────────────────────────────────────── */
.cat-page .card-category {
    font-family:    var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:      .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          #9A7A20;
}
.cat-page .card-item-code {
    font-family: var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:   .6rem;
    color:       #bbb;
}
.cat-page .card-title {
    font-family:    "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size:      13px !important;
    font-weight:    500 !important;
    font-style:     normal !important;
    line-height:    1.4 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color:          #1C1C1C !important;
    margin-bottom:  4px;
}
/* Explicit sans-serif override on the anchor — kills all global Cormorant/Playfair rules */
.cat-page .card-title a,
.cat-page .card-title a:visited {
    font-family:     "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-style:      normal !important;
    color:           inherit;
    text-decoration: none;
}
.cat-page .card-title a:hover,
.cat-page .card-title a:focus { color: #9A7A20; }

.cat-page .card-purity {
    font-family:    var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:      .62rem;
    color:          #AAAAAA;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.cat-page .card-price {
    font-family:    "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size:      .8rem !important;
    font-weight:    500 !important;
    font-style:     normal !important;
    color:          #1C1C1C !important;
    letter-spacing: .01em !important;
    white-space:    nowrap !important;  /* prevent "750" and ".30" splitting across lines */
}
.cat-page .card-upah-label {
    font-family: var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:   .6rem;
    color:       #BBBBBB;
    letter-spacing: .04em;
}

/* ── Card CTA — warm outline, gold hover (no black fill) ───────────────────── */
.cat-page .btn-select {
    font-family:     var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
    font-size:       .62rem !important;
    font-weight:     500 !important;
    letter-spacing:  .12em !important;
    text-transform:  uppercase !important;
    color:           #1C1C1C !important;
    background:      #ffffff !important;
    border:          1px solid #D0C7B8 !important;
    border-radius:   0 !important;
    padding:         8px 0 !important;
    transition:      color .2s, border-color .2s !important;
}
.cat-page .btn-select:hover,
.cat-page .btn-select:focus-visible {
    background:   #ffffff !important;
    color:        #9A7A20 !important;
    border-color: #9A7A20 !important;
}

/* ── Badge overrides ───────────────────────────────────────────────────────── */
.cat-page .badge {
    font-family:    var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:      .57rem;
    letter-spacing: .07em;
}

/* ── Content min-height: keep footer from climbing on sparse results ───────── */
.cat-page > .container { min-height: 55vh; }

/* ── Custom luxury dropdown (replaces native <select>) ─────────────────────── */
.cat-custom-select {
    position: relative;
}
.cat-cs-trigger {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    font-family:    "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:      .65rem;
    font-weight:    500;
    letter-spacing: .10em;
    text-transform: uppercase;
    color:          #555555;
    background:     transparent;
    border:         none;
    border-bottom:  1px solid #C8C8C8;
    border-radius:  0;
    padding:        5px 0;
    cursor:         pointer;
    white-space:    nowrap;
    transition:     color .18s, border-color .18s;
}
.cat-cs-trigger.has-value,
.cat-cs-trigger:hover,
.cat-cs-trigger:focus,
.cat-custom-select.cs-open .cat-cs-trigger {
    color:              #1C1C1C;
    border-bottom-color: #1C1C1C;
    outline:            none;
}
.cat-cs-arrow {
    display:    inline-block;
    flex-shrink: 0;
    transition: transform .2s ease;
    fill:       currentColor;
}
.cat-custom-select.cs-open .cat-cs-arrow { transform: rotate(180deg); }

.cat-cs-panel {
    display:    none;
    position:   absolute;
    top:        calc(100% + 4px);
    left:       0;
    min-width:  160px;
    background: #ffffff;
    border:     1px solid #E8E8E8;
    box-shadow: 0 4px 18px rgba(0,0,0,.07);
    z-index:    500;
    list-style: none;
    padding:    6px 0;
    margin:     0;
    /* No max-height / overflow-y — panel grows to fit content naturally */
}
.cat-custom-select.cs-open .cat-cs-panel { display: block; }

/* ── Desktop: guarantee every option is visible, no internal scrollbar ─────── */
/* !important overrides any global or legacy rule that may set max-height/overflow */
.cat-page .cat-cs-panel {
    top:        calc(100% + 4px) !important;
    min-width:  160px            !important;
    height:     auto             !important;
    max-height: none             !important;
    overflow-y: visible          !important;
    overflow:   visible          !important;
}
/* Ensure parent wrappers do not clip the absolutely-positioned panel */
.cat-page .cat-custom-select,
.cat-page .cat-filter-form,
.cat-page .cat-filter-bar {
    overflow:   visible !important;
    max-height: none    !important;
}

.cat-cs-option {
    display:        block;
    font-family:    "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:      .63rem;
    font-weight:    400;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:          #777777;
    padding:        10px 20px;
    cursor:         pointer;
    white-space:    nowrap;
    transition:     color .15s, background .15s;
    user-select:    none;
}
.cat-cs-option:hover    { color: #1C1C1C; background: #F8F8F8; }
.cat-cs-option.is-active { color: #1C1C1C; font-weight: 600; }

/* Sort panel: right-align to prevent right-edge overflow */
#cat-cs-sort .cat-cs-panel { left: auto; right: 0; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 599px) {
    .cat-hero { padding: 28px 0 20px; }
    .cat-filter-bar { gap: 8px; }
    .cat-filter-form {
        margin-left: 0;
        width:       100%;
    }
    .cat-select {
        flex:      1 1 auto;
        min-width: 110px;
    }
    /* On mobile both panels left-align — avoids off-screen overflow */
    #cat-cs-sort .cat-cs-panel { left: 0; right: auto; }
    .cat-cs-panel {
        min-width:  min(190px, calc(100vw - 40px));
        max-height: 60vh;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #E0E0E0 transparent;
    }
    .cat-cs-panel::-webkit-scrollbar       { width: 4px; }
    .cat-cs-panel::-webkit-scrollbar-thumb { background: #E0E0E0; border-radius: 2px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   §74  Online Order Modal / Order Option Modal
   Uses pom-* base classes. These rules add order-form-specific overrides.
════════════════════════════════════════════════════════════════════════════ */

/* cpm-backdrop and oom-backdrop styles are defined in §67 above.
   No overrides needed here — both use position:absolute inside their
   fixed overlay containers and rely on card z-index to stay in front. */

/* Secondary WhatsApp row below the order form */
.oom-wa-secondary {
    display:        flex;
    align-items:    center;
    justify-content:center;
    gap:            8px;
    margin-top:     18px;
    padding-top:    16px;
    border-top:     1px solid var(--border, #E5DDD0);
    font-size:      0.78rem;
    color:          var(--text-muted, #999);
}
.oom-wa-link {
    font-size:   0.78rem;
    font-weight: 600;
    color:       #25D366;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.oom-wa-link:hover { color: #128C7E; }

/* ════════════════════════════════════════════════════════════════════════════
   §75  Checkout modal UX — review step, radio sublabels, payment note
════════════════════════════════════════════════════════════════════════════ */

/* ── Order summary strip heading ─────────────────────────────────── */
.pom-summary-heading {
    font-size:      .68rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--gold-dark, #9A7A20);
    margin-bottom:  6px;
}

/* Standalone price line inside item strip */
.pom-item-price-display {
    display:     block;
    font-size:   1rem;
    font-weight: 700;
    color:       var(--gold-dark, #9A7A20);
    margin-top:  5px;
}
.pom-item-price-display:empty { display: none; }

/* ── Radio option — two-line stacked label support ───────────────── */
.pom-radio-text {
    display:        flex;
    flex-direction: column;
    gap:            1px;
}
.pom-radio-label {
    font-size:   .86rem;
    font-weight: 500;
    color:       var(--text-dark, #1a1410);
    line-height: 1.3;
}
.pom-radio-sublabel {
    font-size:   .73rem;
    color:       var(--text-muted, #999);
    font-weight: 400;
}

/* Align radio bubble to top when option has a sublabel */
.pom-radio-option:has(.pom-radio-text) {
    align-items: flex-start;
}
.pom-radio-option:has(.pom-radio-text) input[type="radio"] {
    margin-top: 2px;
}

/* Wide option takes full row (e.g. "Sahkan Bayaran Kemudian") */
.pom-radio-option--wide {
    flex: 1 1 100%;
}

/* ── Helper text below form fields ───────────────────────────────── */
.pom-helper-text {
    font-size:   .77rem;
    color:       var(--text-muted, #888);
    margin-top:  6px;
    line-height: 1.55;
}

/* ── Payment gateway notice ──────────────────────────────────────── */
.pom-payment-note {
    background:    rgba(212,175,55,.06);
    border:        1px solid rgba(212,175,55,.2);
    border-radius: 5px;
    padding:       9px 13px;
    font-size:     .76rem;
    color:         var(--text-muted, #888);
    line-height:   1.55;
    margin-top:    10px;
}

/* ── Review box (Step 2) ─────────────────────────────────────────── */
.pom-review-box {
    background:    var(--warm-white, #FAFAF8);
    border:        1px solid var(--border, #E5DDD0);
    border-radius: 8px;
    overflow:      hidden;
    margin-bottom: 18px;
}
.pom-review-section {
    padding:       13px 16px;
    border-bottom: 1px solid var(--border, #E5DDD0);
}
.pom-review-section:last-child { border-bottom: none; }

.pom-review-label {
    font-size:      .66rem;
    font-weight:    700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color:          var(--text-muted, #888);
    margin-bottom:  3px;
}
.pom-review-value {
    font-size:   .88rem;
    font-weight: 600;
    color:       var(--text-dark, #1a1410);
    margin:      0;
}
.pom-review-sub {
    font-size: .79rem;
    color:     var(--text-muted, #888);
    margin:    2px 0 0;
}
.pom-review-price {
    font-size:   .95rem;
    font-weight: 700;
    color:       var(--gold-dark, #9A7A20);
    margin:      3px 0 0;
}

/* ── Back button (step 2 → step 1) ──────────────────────────────── */
.pom-back-btn {
    display:         block;
    width:           100%;
    padding:         9px 16px;
    background:      transparent;
    color:           var(--text-muted, #888);
    border:          1px solid var(--border, #e0d6c8);
    border-radius:   6px;
    font-size:       .84rem;
    cursor:          pointer;
    margin-top:      10px;
    text-align:      center;
    transition:      border-color .15s, color .15s;
}
.pom-back-btn:hover {
    border-color: var(--gold, #b8972a);
    color:        var(--text-dark, #1a1410);
}

/* ════════════════════════════════════════════════════════════════════════════
   §76  Header language pill — EN | BM
════════════════════════════════════════════════════════════════════════════ */
.lang-pill {
    display:     flex;
    align-items: center;
    gap:         5px;
    padding:     0 4px;
}
.lang-pill-opt {
    font-family:     var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size:       10.5px;
    font-weight:     500;
    letter-spacing:  .1em;
    text-transform:  uppercase;
    text-decoration: none;
    color:           #888888;
    padding:         3px 1px;
    border-bottom:   1.5px solid transparent;
    line-height:     1;
    transition:      color .15s, border-color .15s;
}
.lang-pill-opt.is-active {
    color:               #111111;
    border-bottom-color: #111111;
    font-weight:         600;
}
.lang-pill-opt:hover:not(.is-active) {
    color:               #111111;
    border-bottom-color: rgba(0,0,0,.25);
}
.lang-pill-sep {
    font-size:   10px;
    color:       #cccccc;
    font-weight: 300;
    line-height: 1;
    user-select: none;
}

/* Hide on very small screens (≤ 359px) — matches old globe behaviour */
@media (max-width: 359px) {
    .lang-pill { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   §77 — Luxury refinements: product detail typography,
         service-row icons, dark order-summary strip,
         card-style delivery & payment selectors
═══════════════════════════════════════════════════════════════ */

/* ─ 1. Product detail title — bolder desktop presence ─ */
.product-detail-title {
    font-size: clamp(1.45rem, 3.5vw, 1.9rem);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.15;
}

/* ─ 2. Price — stronger visual weight ─ */
#pd-price-display {
    font-size: 2rem;
    letter-spacing: -.01em;
}
.pd-price-note {
    font-size: .8rem;
    letter-spacing: .04em;
    margin-top: 5px;
}

/* ─ 3. Main CTA — comfortable height ─ */
.product-detail-actions .btn {
    padding: 14px 20px;
    font-size: .72rem;
}
@media (max-width: 599px) {
    .product-detail-actions .btn { padding: 13px 16px; }
}

/* ─ 4. Service rows — icon slot ─ */
.pd-svc-row {
    gap: 10px;
    padding: 9px 0;
    align-items: center;
}
.pd-svc-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pd-svc-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}
.pd-svc-key {
    font-size: .67rem;
    min-width: 60px;
}

/* ─ 5. Description / Details section ─ */
.pd-info-body {
    font-size: .88rem;
    line-height: 1.85;
}
.pd-info-dlist .pd-info-drow {
    padding: 8px 0;
}
.pd-info-dlist dt {
    font-size: .67rem;
    letter-spacing: .1em;
    color: var(--text-muted);
    min-width: 112px;
}
.pd-info-dlist dd {
    font-size: .85rem;
    font-weight: 500;
    color: #1C1C1C;
}

/* ─ 6. Checkout modal — slightly wider on larger screens ─ */
@media (min-width: 560px) { .pom-card { max-width: 520px; } }
@media (min-width: 820px) { .pom-card { max-width: 560px; } }

/* ─ 7. Order summary strip — dark luxury card ─ */
.pom-item-strip {
    background: #1C1C1C;
    border-radius: 0;
    padding: 16px 18px;
    margin-bottom: 20px;
}
.pom-summary-heading {
    color: rgba(255,255,255,.55);
    font-size: .62rem;
    letter-spacing: .14em;
    margin-bottom: 6px;
}
.pom-item-name {
    color: #ffffff;
    font-size: .9rem;
    font-weight: 600;
}
.pom-meta-sep,
.pom-meta-part {
    color: rgba(255,255,255,.5);
    font-size: .78rem;
}
.pom-item-price-display {
    color: var(--gold, #C9A84C);
    font-size: 1rem;
    font-weight: 600;
    display: block;
    margin-top: 8px;
}

/* ─ 8. Delivery card selectors ─ */
.pom-delivery-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.pom-delivery-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    border: 1.5px solid var(--border, #e8e4de);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.pom-delivery-card:has(input:checked) {
    border-color: #1C1C1C;
    background: #fafaf8;
}
.pom-delivery-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.pom-dc-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #888);
    margin-top: 1px;
}
.pom-dc-icon svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pom-delivery-card:has(input:checked) .pom-dc-icon { color: #1C1C1C; }
.pom-dc-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pom-dc-label {
    font-size: .71rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #1C1C1C;
    line-height: 1.2;
}
.pom-dc-sub {
    font-size: .71rem;
    color: var(--text-muted, #888);
    line-height: 1.35;
}
@media (max-width: 380px) {
    .pom-delivery-cards { grid-template-columns: 1fr; }
}

/* ─ 9. Payment card selectors ─ */
.pom-payment-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pom-payment-card {
    flex: 1;
    min-width: 120px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border: 1.5px solid var(--border, #e8e4de);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.pom-payment-card:has(input:checked) {
    border-color: #1C1C1C;
    background: #fafaf8;
}
.pom-payment-card--wide { flex-basis: 100%; }
.pom-payment-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.pom-pc-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #888);
}
.pom-pc-icon svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pom-payment-card:has(input:checked) .pom-pc-icon { color: #1C1C1C; }
.pom-pc-label {
    font-size: .71rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: #1C1C1C;
    line-height: 1.3;
}

/* ─ 10. Payment note — subtle strip ─ */
.pom-payment-note {
    font-size: .74rem;
    color: #888888;
    padding: 10px 12px;
    background: #f9f7f4;
    border-left: 2px solid #e0dbd4;
    margin-top: 10px;
    line-height: 1.55;
}

/* ─ 11. Textarea — less heavy ─ */
.pom-textarea { min-height: 72px; resize: vertical; }

/* ─ 12. Submit/back button spacing ─ */
.pom-submit-btn {
    margin-top: 16px;
    padding: 14px 0;
    font-size: .72rem;
    letter-spacing: .1em;
}
.pom-back-btn {
    font-size: .72rem;
    letter-spacing: .06em;
    margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   §78 — Shopping Bag Drawer + Checkout enhancements
   Right-side slide-in panel. z-index above nav (5xxx range).
══════════════════════════════════════════════════════════════════ */

/* ─ 1. Backdrop ─ */
.bag-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.38);
    z-index: 5100;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility .25s;
}
.bag-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

/* ─ 2. Drawer panel ─ */
.bag-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    max-width: 100vw;
    background: #ffffff;
    z-index: 5200;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.bag-drawer.is-open { transform: translateX(0); }

/* ─ 3. Inner layout ─ */
.bdr-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 28px 28px 36px;
}

/* ─ 4. Header ─ */
.bdr-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 22px;
}
.bdr-header-left { flex: 1; }
.bdr-eyebrow {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--gold, #C9A84C);
    margin: 0 0 5px;
}
.bdr-title {
    font-family: var(--font-serif, 'Cinzel', serif);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #1C1C1C;
    margin: 0;
}
.bdr-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: #aaa;
    cursor: pointer;
    padding: 0 0 0 12px;
    margin-top: 2px;
    transition: color .15s;
    flex-shrink: 0;
}
.bdr-close:hover { color: #1C1C1C; }

/* ─ 5. Divider ─ */
.bdr-divider {
    height: 1px;
    background: var(--border, #e8e4de);
    margin: 0 0 22px;
}

/* ─ 6. Item card ─ */
.bdr-item-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}
.bdr-item-thumb {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    background: #f7f5f2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #aaa);
}
.bdr-item-body { flex: 1; min-width: 0; }
.bdr-item-name {
    font-size: .88rem;
    font-weight: 600;
    color: #1C1C1C;
    margin: 0 0 4px;
    line-height: 1.3;
    white-space: normal;
}
.bdr-item-meta {
    font-size: .74rem;
    color: var(--text-muted, #888);
    margin: 0 0 7px;
    line-height: 1.4;
}
.bdr-item-price {
    font-size: .92rem;
    font-weight: 600;
    color: #1C1C1C;
    margin: 0;
}
.bdr-item-qty {
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--border, #e8e4de);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .76rem;
    font-weight: 600;
    color: #1C1C1C;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ─ 7. Summary rows ─ */
.bdr-summary { margin-bottom: 26px; }
.bdr-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: .82rem;
    color: #1C1C1C;
    border-bottom: 1px solid var(--border, #e8e4de);
}
.bdr-summary-row:last-child { border-bottom: none; }
.bdr-summary-row--muted {
    color: var(--text-muted, #888);
    font-size: .76rem;
}

/* ─ 8. Action buttons ─ */
.bdr-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}
.bdr-btn-checkout {
    display: block;
    width: 100%;
    padding: 15px 0;
    background: #1C1C1C;
    color: #ffffff;
    border: none;
    font-family: var(--font-sans, 'Josefin Sans', sans-serif);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
}
.bdr-btn-checkout:hover { background: #333; }
.bdr-btn-continue {
    display: block;
    width: 100%;
    padding: 13px 0;
    background: transparent;
    color: #888;
    border: 1px solid var(--border, #e8e4de);
    font-family: var(--font-sans, 'Josefin Sans', sans-serif);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.bdr-btn-continue:hover { color: #1C1C1C; border-color: #1C1C1C; }

/* ─ 9. Secure note ─ */
.bdr-secure-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: .68rem;
    color: var(--text-muted, #aaa);
    line-height: 1.5;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--border, #e8e4de);
}
.bdr-secure-note svg { flex-shrink: 0; margin-top: 2px; }

/* ─ 10. Mobile ─ */
@media (max-width: 440px) {
    .bag-drawer { width: 100vw; }
    .bdr-inner { padding: 22px 20px 30px; }
}

/* ─ 11. Structured delivery address grid ─ */
.pom-addr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}
.pom-addr-col-full { grid-column: 1 / -1; }
.pom-addr-hidden { display: none !important; }

/* ─ 12. Payment method badge pills ─ */
.pom-pay-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 10px 0 6px;
}
.pom-pay-badge {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted, #888);
    border: 1px solid var(--border, #e8e4de);
    padding: 3px 7px;
    line-height: 1.5;
    border-radius: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   §79  Checkout order summary card + order success page
   ──────────────────────────────────────────────────────────────────
   .pom-order-summary  — neutral warm-white card (replaces dark §77
                         .pom-item-strip in both checkout modals)
   .osc-*              — order success page layout classes
═══════════════════════════════════════════════════════════════════ */

/* ─ 1. Order summary card ─ */
.pom-order-summary {
    background: var(--warm-white, #FAFAF8);
    border: 1px solid var(--border, #E5DDD0);
    border-radius: 4px;
    padding: 13px 16px;
    margin-bottom: 20px;
}
.pom-osum-item-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.pom-osum-info { flex: 1; min-width: 0; }

/* Override the §77 dark-strip colour tokens inside neutral card */
.pom-order-summary .pom-summary-heading {
    font-size: .63rem;
    letter-spacing: .1em;
    color: var(--text-muted, #888);
    margin-bottom: 10px;
}
.pom-order-summary .pom-item-name {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    color: #1C1C1C;
    line-height: 1.35;
    margin-bottom: 3px;
}
.pom-order-summary .pom-item-meta {
    display: block;
    font-size: .74rem;
    color: var(--text-muted, #888);
    line-height: 1.4;
}
.pom-order-summary .pom-item-price-display {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    color: var(--gold-dark, #9A7A20);
    margin-top: 2px;
    white-space: nowrap;
}

/* ─ 2. Order success page ─ */
.osc-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 56px 20px 80px;
}
.osc-icon-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.1);
    border: 2px solid var(--gold, #D4AF37);
    margin: 0 auto 26px;
}
.osc-heading {
    text-align: center;
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: #1C1C1C;
    margin-bottom: 10px;
}
.osc-subtitle {
    text-align: center;
    font-size: .9rem;
    color: var(--text-muted, #888);
    line-height: 1.65;
    margin-bottom: 8px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.osc-no-payment {
    text-align: center;
    font-size: .76rem;
    color: #aaa;
    margin-bottom: 32px;
}
.osc-card {
    background: var(--warm-white, #FAFAF8);
    border: 1px solid var(--border, #E5DDD0);
    border-radius: 10px;
    padding: 26px 28px;
    margin-bottom: 26px;
}
.osc-section {
    border-top: 1px solid var(--border, #E5DDD0);
    padding-top: 16px;
    margin-top: 16px;
}
.osc-section-label {
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted, #888);
    margin-bottom: 8px;
}
.osc-ref-number {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--gold-dark, #9A7A20);
    font-family: monospace;
}
.osc-item-name {
    font-weight: 600;
    font-size: .92rem;
    color: #1C1C1C;
    margin-bottom: 6px;
}
.osc-item-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .82rem;
    color: var(--text-muted, #888);
    line-height: 1.75;
}
.osc-item-row-val {
    font-weight: 500;
    color: #444;
}
.osc-item-price-val {
    font-weight: 600;
    color: var(--gold-dark, #9A7A20);
}
.osc-contact-name {
    font-weight: 500;
    font-size: .88rem;
    color: #1C1C1C;
    margin-bottom: 2px;
}
.osc-contact-sub {
    font-size: .82rem;
    color: var(--text-muted, #888);
    line-height: 1.55;
}
.osc-delivery-val { font-size: .85rem; color: #1C1C1C; }
.osc-delivery-addr {
    font-size: .8rem;
    color: var(--text-muted, #888);
    white-space: pre-line;
    margin-top: 3px;
}
.osc-payment-val { font-size: .88rem; color: #1C1C1C; font-weight: 500; }
.osc-next-box {
    background: rgba(212, 175, 55, 0.06);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 32px;
}
.osc-next-title {
    font-weight: 600;
    font-size: .85rem;
    color: #1C1C1C;
    margin-bottom: 10px;
}
.osc-next-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.osc-next-list li {
    font-size: .8rem;
    color: var(--text-muted, #888);
    line-height: 1.65;
    padding-left: 14px;
    position: relative;
    margin-bottom: 5px;
}
.osc-next-list li::before {
    content: '·';
    position: absolute;
    left: 3px;
    color: var(--gold, #D4AF37);
    font-size: 1rem;
    line-height: 1.4;
}
.osc-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.osc-actions .btn,
.osc-actions .btn-outline-dark {
    flex: 1;
    min-width: 160px;
    text-align: center;
}
@media (max-width: 480px) {
    .osc-card  { padding: 20px 16px; }
    .osc-wrap  { padding: 40px 16px 64px; }
    .osc-actions { flex-direction: column; }
    .osc-actions .btn,
    .osc-actions .btn-outline-dark { flex: none; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   §80  Global Typography Scale — Readability at 100% browser zoom
   ──────────────────────────────────────────────────────────────────
   Systematic uplift across all public storefront pages.
   ▸ Everything < 0.72rem raised to minimum 0.74rem.
   ▸ Key display sizes bumped for better visual hierarchy.
   ▸ !important used only where existing !important already applies.
═══════════════════════════════════════════════════════════════════ */

/* ─ 1. Navigation ─ */
.nav-logo .logo-sub               { font-size: .78rem; }
.lang-btn                         { font-size: .78rem; }

/* ─ 2. Product cards ─ */
.card-category                    { font-size: .8rem; }
.card-item-code                   { font-size: .76rem; }
.card-title                       { font-size: 1rem; }
.card-purity                      { font-size: .8rem; }
.card-weight                      { font-size: .82rem; }
.card-upah-label                  { font-size: .78rem; }
.card-actions .btn                { font-size: .84rem; padding: 9px 10px; }
.card-price                       { font-size: 1.1rem; }

/* ─ 3. Category / listing page filter bar ─ */
.cat-chip                         { font-size: .8rem !important; }
.cat-select                       { font-size: .8rem !important; }
.cat-result-count                 { font-size: .82rem; }
.cat-active-pill                  { font-size: .78rem; }

/* ─ 4. Product detail — breadcrumb, category label, title ─ */
.product-breadcrumb               { font-size: .84rem; }
.product-detail-category          { font-size: .76rem !important; letter-spacing: .15em !important; }
.product-detail-title             { font-size: clamp(1.4rem, 2.8vw, 1.95rem) !important; }

/* ─ 5. Product detail — service rows below CTA ─ */
.pd-svc-row                       { font-size: .86rem; }
.pd-svc-key                       { font-size: .74rem; }
.pd-svc-avail,
.pd-svc-preorder                  { font-size: .79rem; }
.pd-svc-note                      { font-size: .8rem; }

/* ─ 6. Product detail — price, sub-labels, badges ─ */
.pd-price-block .detail-price     { font-size: clamp(1.5rem, 2.5vw, 1.85rem) !important; }
.pd-subtitle                      { font-size: .84rem !important; }
.pd-price-note                    { font-size: .82rem !important; }
.detail-upah-badge                { font-size: .82rem; }
.sticky-wa-bar .sticky-price-label { font-size: .8rem; }

/* ─ 7. Product detail — description / specs section ─ */
.product-desc-section h4          { font-size: 1.05rem; }
.product-desc-section p           { font-size: .95rem; }
.preorder-disclaimer              { font-size: .86rem; }
.pd-detail-label                  { font-size: .78rem; }

/* ─ 8. Shopping bag drawer ─ */
.bdr-eyebrow                      { font-size: .74rem; }
.bdr-item-name                    { font-size: .92rem; }
.bdr-item-meta                    { font-size: .82rem; }
.bdr-item-price                   { font-size: .95rem; }
.bdr-item-qty                     { font-size: .8rem; }
.bdr-summary-row                  { font-size: .86rem; }
.bdr-summary-row--muted           { font-size: .82rem; }
.bdr-btn-checkout                 { font-size: .82rem; letter-spacing: .12em; }
.bdr-btn-continue                 { font-size: .82rem; }
.bdr-secure-note                  { font-size: .76rem; }

/* ─ 9. Checkout modals (pom-*) ─ */
.pom-eyebrow                      { font-size: .72rem !important; }
.pom-section-label                { font-size: .78rem; }
.pom-subtitle                     { font-size: .9rem; }
.pom-label                        { font-size: .86rem; }
.pom-optional                     { font-size: .82rem; }
.pom-helper-text                  { font-size: .82rem; }
.pom-payment-note                 { font-size: .8rem; }
.pom-dc-label                     { font-size: .78rem; }
.pom-dc-sub                       { font-size: .78rem; }
.pom-pc-label                     { font-size: .78rem; }
.pom-pay-badge                    { font-size: .72rem; }
.pom-submit-btn                   { font-size: .8rem; }
.pom-back-btn                     { font-size: .78rem; }
.pom-review-label                 { font-size: .72rem; }
.pom-review-sub                   { font-size: .84rem; }

/* ─ 10. Footer ─ */
.footer-brand .logo-sub           { font-size: .74rem; }
.footer-col-title                 { font-size: .78rem; }
.footer-bottom                    { font-size: .82rem; }
.footer-brand p                   { font-size: .9rem; }
.footer-links a                   { font-size: .86rem; }

/* ─ 11. Mobile responsive adjustments ─ */
@media (max-width: 767px) {
    .product-detail-title         { font-size: clamp(1.25rem, 5.5vw, 1.7rem) !important; }
    .pd-price-block .detail-price { font-size: 1.45rem !important; }
    .cat-chip                     { font-size: .82rem !important; }
    .card-title                   { font-size: 1rem; }
    .card-category                { font-size: .8rem; }
}

/* ═══════════════════════════════════════════════════════════════
   § 81 — COMMERCIAL TYPOGRAPHY READABILITY (CSS v80)
   Practical buyer-readability improvements.
   Areas: CTA button heights, product card/detail weight+contrast,
   category card micro-text, checkout labels, success card labels,
   topbar micro-text, secondary text contrast.
   CSS-only — no layout, logic, route, or DB changes.
═══════════════════════════════════════════════════════════════ */

/* ── 1. Topbar: promo bar + info bar ────────────────────────── */
/* Promo bar: 9.6px → 10.9px — readable scrolling message       */
.promo-set span { font-size: .68rem !important; }
/* Info bar items: 10.2px → 11.2px                               */
.info-item,
.info-bar .info-item,
.info-bar-inner .info-item { font-size: .7rem !important; }

/* ── 2. Product cards — general listing (/products) ─────────── */
/* Title: 16px → 16.8px, weight → 700 for visual confidence      */
.card-title  { font-size: 1.05rem; font-weight: 700; color: #1A1A1A; }
/* Price: 17.6px → 18.4px, weight → 600                          */
.card-price  { font-size: 1.15rem; font-weight: 600; color: #1A1A1A; }
/* Category label: less pale                                      */
.card-category { color: #555; }
/* Card CTA: 40px → 44px height                                  */
.card-actions .btn {
    height:  44px !important;
    font-size: 13px !important;
    letter-spacing: .1em !important;
    padding: 0 16px !important;
}

/* ── 3. Category page cards — defeat !important overrides ────── */
/* Category label: 9.6px → 12.2px (was .6rem, no !important)     */
.cat-page .card-category  { font-size: .76rem; }
/* Item code: 9.6px → 11.5px                                     */
.cat-page .card-item-code { font-size: .72rem; color: #aaa; }
/* Title: 13px/500 → 14px/600 (needs !important to beat earlier) */
.cat-page .card-title {
    font-size:   14px !important;
    font-weight: 600 !important;
}
/* Purity badge: 9.9px → 11.5px                                  */
.cat-page .card-purity { font-size: .72rem; color: #999; }
/* Price: .8rem/500 → .92rem/600 (needs !important)              */
.cat-page .card-price {
    font-size:   .92rem !important;
    font-weight: 600 !important;
}
/* Upah label: 9.6px → 11.2px                                    */
.cat-page .card-upah-label { font-size: .7rem; }
/* Card CTA (btn-select variant): taller + readable               */
.cat-page .btn-select {
    font-size: 12px !important;
    padding:   13px 0 !important;
}
/* Custom dropdown trigger: 10.4px → 12.5px                      */
.cat-cs-trigger { font-size: .78rem; }

/* ── 4. Product detail — buying area ───────────────────────── */
/* Title: weight 600 → 700 for confident display                 */
.product-detail-title {
    font-weight: 700 !important;
    color: #111 !important;
}
/* Service key labels: 11.8px → 12.5px, less pale                */
.pd-svc-key   { font-size: .78rem; color: #555; }
/* Service availability + note: less pale                        */
.pd-svc-avail { color: #444; }
.pd-svc-note  { color: #555; }
/* Detail table labels + values: readable contrast               */
.pd-detail-label { color: #555; font-weight: 600; }
.pd-detail-value { color: #1C1C1C; font-weight: 500; }
/* Primary CTA (ADD TO SHOPPING BAG): 40px → 48px                */
.product-detail-actions .btn { height: 48px !important; }

/* ── 5. Shopping bag drawer ────────────────────────────────── */
/* CHECKOUT button: padding 15px 0 → 18px 0 (≈50px tall)        */
.bdr-btn-checkout {
    padding:        18px 0;
    font-size:      13px;
    letter-spacing: .14em;
    background:     #111;
    color:          #fff;
}
/* Continue shopping: padding 13px 0 → 16px 0 (≈45px tall)      */
.bdr-btn-continue {
    padding:        16px 0;
    font-size:      13px;
    letter-spacing: .1em;
    color:          #555;
    border-color:   #ccc;
}
.bdr-btn-continue:hover { color: #111; border-color: #111; }
/* Item meta: #888 → #666 — less pale for item details           */
.bdr-item-meta   { color: #666; }
/* Summary rows: slightly bolder                                 */
.bdr-summary-row { font-weight: 500; }

/* ── 6. Checkout modal ──────────────────────────────────────── */
/* Field labels: .86rem → .88rem, weight 500, charcoal           */
.pom-label { font-size: .88rem; font-weight: 500; color: #1C1C1C; }
/* Inputs: 14.1px → 14.4px, strong charcoal                     */
.pom-input,
.pom-textarea { font-size: .9rem; color: #1C1C1C; }
/* Delivery card labels: 12.5px → 13.1px, weight 500             */
.pom-dc-label { font-size: .82rem; font-weight: 500; color: #1C1C1C; }
.pom-dc-sub   { font-size: .8rem; color: #666; }
/* Payment card labels: 12.5px → 13.1px                         */
.pom-pc-label { font-size: .82rem; font-weight: 500; color: #1C1C1C; }
/* Helper/payment notes: #888 → #666                             */
.pom-helper-text  { color: #666; }
.pom-payment-note { color: #666; }
/* Pay badges: 11.5px → 11.8px, less pale                        */
.pom-pay-badge { font-size: .74rem; color: #555; }
/* Review labels (step 2 decision point): 11.5px → 12.5px        */
.pom-review-label { font-size: .78rem; font-weight: 600; color: #555; }
/* Submit / Confirm button: padding 14px → 17px (≈47px tall)     */
.pom-submit-btn { padding: 17px 0; }

/* ── 7. Order success page ──────────────────────────────────── */
/* Card section labels: 10.1px → 11.5px, #888 → #555            */
.osc-section-label { font-size: .72rem; color: #555; }
/* Item name: 14.7px → 16px                                      */
.osc-item-name { font-size: 1rem; }
/* Item detail rows: 13.1px + #888 → 13.8px + #666              */
.osc-item-row  { font-size: .86rem; color: #666; }
/* Contact info                                                   */
.osc-contact-name { font-size: .92rem; }
.osc-contact-sub  { font-size: .84rem; color: #666; }
/* Delivery / payment                                             */
.osc-delivery-val  { font-size: .88rem; color: #1C1C1C; }
.osc-delivery-addr { font-size: .82rem; color: #666; }
.osc-payment-val   { font-size: .9rem; font-weight: 500; color: #1C1C1C; }
/* "What happens next?" section                                   */
.osc-next-title   { font-size: .9rem; }
.osc-next-list li { font-size: .84rem; color: #555; }
/* Action buttons: 40px → 48px                                   */
.osc-actions .btn,
.osc-actions .btn-outline-dark { height: 48px !important; }

/* ── 8. Mobile: maintain readability, nothing below 13px ─────── */
@media (max-width: 767px) {
    .card-title                 { font-size: 1rem; }
    .card-price                 { font-size: 1.1rem; }
    .cat-page .card-title       { font-size: 13px !important; }
    .cat-page .card-price       { font-size: .88rem !important; }
    .pom-label                  { font-size: .88rem; }
    .pom-input,
    .pom-textarea               { font-size: .9rem; }
    .osc-section-label          { font-size: .72rem; }
    .osc-item-row               { font-size: .84rem; }
    .osc-actions .btn,
    .osc-actions .btn-outline-dark { height: 44px !important; }
    .product-detail-actions .btn   { height: 48px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   § 82 — VISUAL READABILITY POLISH (CSS v81)
   Final polish: badge contrast, upah label colour, shipping row,
   secure note, checkout section labels, autofill, success page.
   CSS-only — no layout, logic, route, or DB changes.
═══════════════════════════════════════════════════════════════ */

/* ── 1. Product badge (AVAILABLE / IN STOCK) ── */
/* Was .58rem (9.3px) → .74rem (11.8px); slightly more padding   */
.badge { font-size: .74rem !important; padding: 4px 8px !important; }

/* ── 2. Card "Price includes workmanship" ── */
/* Was color #9A9490 (pale warm) → medium grey                    */
.card-upah-label           { color: #777; }
.cat-page .card-upah-label { color: #777; }

/* ── 3. Shopping bag — shipping row + secure note ── */
/* "Shipping / To be confirmed" muted row: #888 → #666            */
.bdr-summary-row--muted { color: #666; }
/* Secure note was #aaa → readable medium grey                    */
.bdr-secure-note { color: #777; }

/* ── 4. Checkout modal — section labels ── */
/* Base .72rem / #888888 !important / letter-spacing .1em          */
/* §80 → .78rem; now slightly bigger + darker + less spacing       */
.pom-section-label {
    font-size:       .82rem !important;
    color:           #444   !important;
    letter-spacing:  .06em  !important;
}

/* ── 5. Browser autofill — ivory/white, not browser blue ── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
    -webkit-box-shadow:      0 0 0 1000px #FDFCF9 inset !important;
    box-shadow:              0 0 0 1000px #FDFCF9 inset !important;
    -webkit-text-fill-color: #1C1C1C !important;
}

/* ── 6. Success page ── */
/* Reduce top gap: 56px → 40px desktop                            */
.osc-wrap { padding-top: 40px !important; }
/* Subtitle: pale #888 → #555                                     */
.osc-subtitle { color: #555; }
/* No-payment note: #aaa → #777, slightly bigger                  */
.osc-no-payment { color: #777; font-size: .78rem; }
/* "Continue Shopping" → black filled primary                     */
.osc-actions .btn:not(.btn-outline-dark) {
    background:   #1C1C1C;
    color:        #fff;
    border-color: #1C1C1C;
}
.osc-actions .btn:not(.btn-outline-dark):hover {
    background:   #333;
    border-color: #333;
}
/* "Back to Home" outline → clean charcoal, not brown             */
.osc-actions .btn-outline-dark {
    color:        #1C1C1C;
    border-color: #1C1C1C;
}
.osc-actions .btn-outline-dark:hover {
    background: rgba(0, 0, 0, .05);
}

/* ── 7. Mobile ── */
@media (max-width: 767px) {
    .osc-wrap { padding-top: 32px !important; }
}