/* ==========================================================================
   Jewellery Theme — Main Stylesheet
   A luxury jewellery showcase theme.
   Color palette: warm gold, deep charcoal, soft ivory, muted sage accents.
   Fonts: Cormorant Garamond (headings), Inter (body).
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Variables / Design Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Color ramps */
    --c-primary-50:  #faf6f0;
    --c-primary-100: #f3e8d8;
    --c-primary-200: #e8d3b3;
    --c-primary-300: #d9b88a;
    --c-primary-400: #c9a06a;
    --c-primary-500: #b8864e;
    --c-primary-600: #a06d3a;
    --c-primary-700: #835530;
    --c-primary-800: #6b4427;
    --c-primary-900: #4d3119;

    --c-neutral-0:   #ffffff;
    --c-neutral-50:  #faf9f7;
    --c-neutral-100: #f3f1ee;
    --c-neutral-200: #e5e2dc;
    --c-neutral-300: #d1ccc3;
    --c-neutral-400: #a8a299;
    --c-neutral-500: #75706a;
    --c-neutral-600: #524e49;
    --c-neutral-700: #3a3733;
    --c-neutral-800: #2a2825;
    --c-neutral-900: #1a1917;

    /* Alukka brand crimson — sampled from the logo (#A9143B).
       The gold ramp above stays the primary surface colour; crimson is
       used for brand moments: logo lockup, active states, key CTAs. */
    --c-brand-50:  #fdf2f5;
    --c-brand-100: #f9dce4;
    --c-brand-300: #e08ba4;
    --c-brand-500: #a9143b;
    --c-brand-600: #94102f;
    --c-brand-700: #7a0c26;

    --c-accent-400: #7a9b7e;
    --c-accent-500: #5e8264;
    --c-accent-600: #4a6b50;

    --c-success: #2d7a4f;
    --c-warning: #c47d2a;
    --c-error:   #b03a2e;

    /* Typography */
    --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Spacing (8px base) */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  24px;
    --sp-6:  32px;
    --sp-7:  48px;
    --sp-8:  64px;
    --sp-9:  96px;

    /* Layout */
    --container-max: 1320px;
    --container-pad: 24px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,.10);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.15);
    --transition: 0.3s cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   Reset & Base
   -------------------------------------------------------------------------- */

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    color: var(--c-neutral-700);
    background: var(--c-neutral-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    color: var(--c-neutral-900);
    margin: 0 0 var(--sp-3);
}

h1 { font-size: clamp(2rem, 4vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
h4 { font-size: 1.125rem; }

p { margin: 0 0 var(--sp-4); }

a { color: var(--c-primary-600); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--c-primary-800); }

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

ul, ol { margin: 0; padding: 0; }

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 9999;
}
.skip-link:focus {
    left: var(--sp-4);
    top: var(--sp-4);
    background: var(--c-neutral-900);
    color: var(--c-neutral-0);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Layout: Container
   -------------------------------------------------------------------------- */

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 12px 28px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    line-height: 1;
}

.btn-primary {
    background: var(--c-primary-600);
    color: var(--c-neutral-0);
    border-color: var(--c-primary-600);
}
.btn-primary:hover {
    background: var(--c-primary-700);
    color: var(--c-neutral-0);
    border-color: var(--c-primary-700);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background: transparent;
    color: var(--c-neutral-700);
    border-color: var(--c-neutral-300);
}
.btn-outline:hover {
    border-color: var(--c-primary-500);
    color: var(--c-primary-600);
}

.btn-outline-light {
    background: transparent;
    color: var(--c-neutral-0);
    border-color: rgba(255,255,255,.5);
}
.btn-outline-light:hover {
    background: rgba(255,255,255,.12);
    color: var(--c-neutral-0);
    border-color: var(--c-neutral-0);
}

.btn-sm  { padding: 8px 18px; font-size: 0.75rem; }
.btn-lg  { padding: 16px 40px; font-size: 1rem; }
.btn-block { display: flex; width: 100%; }
.btn-text {
    background: none;
    border: none;
    color: var(--c-primary-600);
    padding: 8px;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.btn-text:hover { color: var(--c-primary-800); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-neutral-200);
    transition: box-shadow var(--transition);
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }

.header-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
}

.site-logo { flex: 0 0 auto; }
.logo-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-primary-700);
    letter-spacing: 0.02em;
}

.primary-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.nav-list {
    display: flex;
    gap: var(--sp-7);
    list-style: none;
    margin: 0; padding: 0;
}
.nav-list a {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--c-neutral-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    padding: 4px 0;
}
.nav-list a::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 1.5px;
    background: var(--c-primary-500);
    transition: width var(--transition);
}
.nav-list a:hover { color: var(--c-primary-600); }
.nav-list a:hover::after { width: 100%; }

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex: 0 0 auto;
}
.header-search-toggle {
    background: none;
    border: none;
    color: var(--c-neutral-600);
    cursor: pointer;
    padding: 8px;
    transition: color var(--transition);
}
.header-search-toggle:hover { color: var(--c-primary-600); }

.header-search-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
    background: var(--c-neutral-0);
    border-top: 1px solid var(--c-neutral-200);
}
.header-search-panel.open { max-height: 80px; padding: var(--sp-4) 0; }
.header-search-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 var(--container-pad);
    display: flex;
    gap: var(--sp-3);
}
.header-search-form input[type="search"] {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid var(--c-neutral-300);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.9375rem;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.hamburger, .hamburger::before, .hamburger::after {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--c-neutral-700);
    transition: transform var(--transition);
}
.hamburger::before, .hamburger::after {
    content: '';
    position: relative;
}
.hamburger::before { top: -7px; }
.hamburger::after  { top: 5px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
    background: var(--c-neutral-900);
    color: var(--c-neutral-400);
    padding: var(--sp-8) 0 var(--sp-5);
    margin-top: var(--sp-9);
}
.footer-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--sp-7);
}
.footer-logo {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--c-primary-300);
    margin-bottom: var(--sp-2);
}
.footer-tagline { font-size: 0.875rem; margin-bottom: var(--sp-3); }
.footer-col h4 {
    color: var(--c-neutral-200);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--sp-4);
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: var(--sp-2); }
.footer-links a {
    color: var(--c-neutral-400);
    font-size: 0.875rem;
}
.footer-links a:hover { color: var(--c-primary-300); }
.footer-social { display: flex; gap: var(--sp-3); }
.footer-social a {
    color: var(--c-neutral-400);
    transition: color var(--transition);
}
.footer-social a:hover { color: var(--c-primary-300); }
.footer-bottom {
    max-width: var(--container-max);
    margin: var(--sp-6) auto 0;
    padding: var(--sp-4) var(--container-pad);
    border-top: 1px solid rgba(255,255,255,.08);
    text-align: center;
    font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.breadcrumbs { padding: var(--sp-3) 0; background: var(--c-neutral-100); }
.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    gap: var(--sp-2);
    font-size: 0.8125rem;
    color: var(--c-neutral-500);
}
.breadcrumb-list li::after { content: '/'; margin-left: var(--sp-2); color: var(--c-neutral-300); }
.breadcrumb-list li:last-child::after { content: ''; }
.breadcrumb-list a { color: var(--c-neutral-600); }
.breadcrumb-list a:hover { color: var(--c-primary-600); }

/* --------------------------------------------------------------------------
   Section Headers
   -------------------------------------------------------------------------- */

.section-header {
    text-align: center;
    margin-bottom: var(--sp-7);
}
.section-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    color: var(--c-neutral-900);
    margin-bottom: var(--sp-2);
}
.section-subtitle {
    color: var(--c-neutral-500);
    font-size: 1rem;
    font-style: italic;
    margin: 0;
}

.empty-state {
    text-align: center;
    padding: var(--sp-8) var(--sp-4);
    color: var(--c-neutral-500);
}
.empty-state .btn { margin-top: var(--sp-4); }

/* Static pages (page.php) */
.static-page { padding: var(--sp-7) 0; }
.static-page-content { max-width: 760px; margin: 0 auto; }
.static-page-thumbnail { margin: var(--sp-5) 0; border-radius: var(--radius-lg); overflow: hidden; }
.static-page-thumbnail img { width: 100%; display: block; }
.static-page-body { font-size: 1rem; line-height: 1.75; color: var(--c-neutral-700); }
.static-page-body p { margin-bottom: var(--sp-4); }
.static-page-body h2, .static-page-body h3 { margin: var(--sp-6) 0 var(--sp-3); color: var(--c-neutral-900); }
.static-page-body ul, .static-page-body ol { margin: 0 0 var(--sp-4) var(--sp-5); }
.static-page-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); }

/* 404 (404.php) */
.error-404-page { padding: var(--sp-8) 0; }
.error-404-state { max-width: 480px; margin: 0 auto; }
.error-404-code {
    font-family: var(--font-heading, serif);
    font-size: 4rem;
    line-height: 1;
    color: var(--c-primary-300);
    margin-bottom: var(--sp-2);
}
.error-404-actions {
    display: flex;
    gap: var(--sp-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--sp-4);
}
.error-404-state .search-form,
.error-404-state form[role="search"] { margin-top: var(--sp-6); }

/* --------------------------------------------------------------------------
   Collection Landing
   -------------------------------------------------------------------------- */

.collection-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-color: var(--c-neutral-800);
}
.collection-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 100%);
}
.collection-hero-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    padding: var(--sp-8) var(--container-pad);
    color: var(--c-neutral-0);
}
.collection-eyebrow {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--c-primary-300);
    margin-bottom: var(--sp-3);
}
.collection-hero-title {
    color: var(--c-neutral-0);
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: var(--sp-4);
}
.collection-hero-excerpt {
    font-size: 1.125rem;
    color: rgba(255,255,255,.85);
    margin-bottom: var(--sp-5);
}
.collection-hero-actions {
    display: flex;
    gap: var(--sp-3);
    justify-content: center;
    flex-wrap: wrap;
}

.collection-story-section { padding: var(--sp-8) 0; background: var(--c-neutral-0); }
.collection-story-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.collection-story-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--c-primary-500);
    margin-bottom: var(--sp-4);
}
.collection-story-text {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--c-neutral-600);
}
.collection-story-text p { margin-bottom: var(--sp-4); }

.collection-video-section { padding: 0 0 var(--sp-8); background: var(--c-neutral-0); }
.collection-video-wrapper { max-width: 900px; margin: 0 auto; }
.collection-video-placeholder {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--c-neutral-800);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--transition);
}
.collection-video-placeholder:hover { transform: scale(1.01); }
.video-play-btn {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255,255,255,.4);
    color: var(--c-neutral-0);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
}
.video-play-btn:hover {
    background: var(--c-primary-500);
    border-color: var(--c-primary-500);
    transform: scale(1.1);
}
.video-label {
    color: var(--c-neutral-0);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.collection-video-embed {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--radius-lg);
    display: block;
    background: var(--c-neutral-800);
}

.collection-featured-section { padding: var(--sp-8) 0; background: var(--c-neutral-50); }
.collection-categories-section { padding: var(--sp-7) 0; background: var(--c-neutral-0); }
.category-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sp-4);
}
.category-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-5) var(--sp-4);
    background: var(--c-neutral-50);
    border: 1px solid var(--c-neutral-200);
    border-radius: var(--radius-md);
    text-align: center;
    transition: all var(--transition);
}
.category-tile:hover {
    border-color: var(--c-primary-400);
    background: var(--c-primary-50);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.category-tile-name {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--c-neutral-800);
}
.category-tile-count {
    font-size: 0.8125rem;
    color: var(--c-neutral-500);
}

.collection-cta-section { padding: var(--sp-8) 0; background: var(--c-primary-50); }
.cta-banner {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}
.cta-banner-title { margin-bottom: var(--sp-3); }
.cta-banner-text {
    color: var(--c-neutral-600);
    font-size: 1.0625rem;
    margin-bottom: var(--sp-5);
}

.collection-consultation-section { padding: var(--sp-7) 0 var(--sp-9); background: var(--c-neutral-900); }
.consultation-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    flex-wrap: wrap;
}
.consultation-cta-text h2 { color: var(--c-neutral-0); margin-bottom: var(--sp-2); }
.consultation-cta-text p { color: var(--c-neutral-400); margin: 0; max-width: 500px; }

/* --------------------------------------------------------------------------
   PLP (Product Listing Page)
   -------------------------------------------------------------------------- */

.plp-banner {
    position: relative;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, var(--c-primary-800), var(--c-primary-600));
}
.plp-banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.15);
}
.plp-banner-content {
    position: relative;
    z-index: 1;
    padding: var(--sp-7) var(--container-pad);
}
.plp-banner-title {
    color: var(--c-neutral-0);
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--sp-2);
}
.plp-banner-subtitle {
    color: rgba(255,255,255,.85);
    font-size: 1.0625rem;
    margin: 0;
}

.plp-layout { padding: var(--sp-5) 0 var(--sp-8); }
.plp-container {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--sp-6);
    align-items: start;
}

.plp-sidebar {
    position: sticky;
    top: 88px;
    background: var(--c-neutral-0);
    border: 1px solid var(--c-neutral-200);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
}
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-5);
}
.sidebar-title {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}
.sidebar-close {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--c-neutral-500);
}

.filter-group { margin-bottom: var(--sp-5); }
.filter-group-title {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-neutral-700);
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--c-neutral-100);
}
.filter-options { display: flex; flex-direction: column; gap: var(--sp-2); }
.filter-option {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.875rem;
    color: var(--c-neutral-600);
    cursor: pointer;
    transition: color var(--transition);
}
.filter-option:hover { color: var(--c-primary-600); }
.filter-option input { accent-color: var(--c-primary-500); }
.filter-option em { font-style: normal; color: var(--c-neutral-400); font-size: 0.8125rem; }

.filter-price-range .price-inputs {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.filter-price-range input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--c-neutral-300);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.875rem;
}
.price-separator { color: var(--c-neutral-400); }

.filter-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-neutral-100);
}

.plp-main { min-width: 0; }

.plp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--c-neutral-200);
    flex-wrap: wrap;
}
.filter-toggle { display: none; }
.plp-result-count {
    font-size: 0.875rem;
    color: var(--c-neutral-500);
}
.plp-sort {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.plp-sort label { font-size: 0.8125rem; color: var(--c-neutral-500); }
.plp-sort select {
    padding: 8px 12px;
    border: 1px solid var(--c-neutral-300);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.875rem;
    background: var(--c-neutral-0);
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Product Grid & Card
   -------------------------------------------------------------------------- */

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-5);
}

.product-card {
    background: var(--c-neutral-0);
    border: 1px solid var(--c-neutral-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    border-color: var(--c-primary-300);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.product-card-image-wrap {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--c-neutral-100);
}
.product-card-link { display: block; width: 100%; height: 100%; }
.product-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--transition), transform .6s ease;
}
.product-card-image.hover {
    position: absolute;
    inset: 0;
    opacity: 0;
}
.product-card:hover .product-card-image.primary { opacity: 0; }
.product-card:hover .product-card-image.hover { opacity: 1; transform: scale(1.03); }
.product-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
    color: var(--c-neutral-400);
    font-size: 0.875rem;
}

.product-card-actions {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    display: flex;
    gap: 1px;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(8px);
    transform: translateY(100%);
    transition: transform var(--transition);
}
.product-card:hover .product-card-actions { transform: translateY(0); }
.card-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 8px;
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--c-neutral-700);
    cursor: pointer;
    transition: all var(--transition);
}
.card-action-btn:hover { background: var(--c-primary-50); color: var(--c-primary-600); }

.product-card-info { padding: var(--sp-4); }
.product-card-title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--sp-1);
    line-height: 1.3;
}
.product-card-title a { color: var(--c-neutral-900); }
.product-card-title a:hover { color: var(--c-primary-600); }

.product-card-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: 0.8125rem;
    color: var(--c-neutral-500);
    margin-bottom: var(--sp-2);
}
.meta-sep { color: var(--c-neutral-300); }

.product-card-price {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--c-primary-700);
    margin-bottom: var(--sp-3);
}

.product-card-details { margin-top: var(--sp-2); }

.matching-card-wrap {
    position: relative;
}
.matching-label {
    position: absolute;
    top: var(--sp-2); left: var(--sp-2);
    z-index: 2;
    background: var(--c-primary-600);
    color: var(--c-neutral-0);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   PDP (Product Detail Page)
   -------------------------------------------------------------------------- */

.pdp-layout { padding: var(--sp-5) 0 var(--sp-8); }
.pdp-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-7);
    align-items: start;
}

/* Gallery */
.pdp-gallery { position: sticky; top: 88px; }
.gallery-main {
    aspect-ratio: 1;
    background: var(--c-neutral-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--c-neutral-200);
    margin-bottom: var(--sp-3);
}
.gallery-main img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.gallery-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
    color: var(--c-neutral-400);
}

.gallery-media-toggles {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.media-toggle {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 10px;
    background: var(--c-neutral-0);
    border: 1px solid var(--c-neutral-300);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--c-neutral-700);
    cursor: pointer;
    transition: all var(--transition);
}
.media-toggle:hover, .media-toggle.active {
    border-color: var(--c-primary-500);
    color: var(--c-primary-600);
    background: var(--c-primary-50);
}

.gallery-thumbnails {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    padding-bottom: var(--sp-2);
}
.gallery-thumb {
    flex: 0 0 72px;
    height: 72px;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background: none;
    transition: border-color var(--transition);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.active { border-color: var(--c-primary-500); }
.gallery-thumb:hover { border-color: var(--c-primary-300); }

/* Info Stack */
.pdp-info { padding: 0; }
.pdp-category-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-primary-500);
    margin-bottom: var(--sp-2);
}
.pdp-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin-bottom: var(--sp-2);
}
.pdp-short-desc {
    font-size: 1rem;
    color: var(--c-neutral-500);
    margin-bottom: var(--sp-4);
}

.pdp-price-row { margin-bottom: var(--sp-5); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--c-neutral-200); }
.pdp-price-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-neutral-500);
    margin-bottom: 2px;
}
.pdp-price-value {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--c-primary-700);
}

.pdp-key-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}
.spec-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-3);
    background: var(--c-neutral-50);
    border-radius: var(--radius-sm);
}
.spec-label {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-neutral-500);
}
.spec-value {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--c-neutral-800);
}

.pdp-stone-details { margin-bottom: var(--sp-5); }
.stone-details-title {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--sp-3);
}
.stone-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.stone-table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.stone-table th {
    text-align: left;
    padding: var(--sp-2);
    background: var(--c-neutral-100);
    font-weight: 600;
    color: var(--c-neutral-600);
    border-bottom: 1px solid var(--c-neutral-200);
}
.stone-table td {
    padding: var(--sp-2);
    border-bottom: 1px solid var(--c-neutral-100);
    color: var(--c-neutral-700);
}

/* CTA Stack */
.pdp-cta-stack { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.cta-row { display: flex; gap: var(--sp-2); }
.cta-row .btn { flex: 1; }


/* --------------------------------------------------------------------------
   Accordion
   -------------------------------------------------------------------------- */

.pdp-accordion-section { padding: var(--sp-7) 0; background: var(--c-neutral-50); }
.accordion { max-width: 800px; margin: 0 auto; }
.accordion-item {
    background: var(--c-neutral-0);
    border: 1px solid var(--c-neutral-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-3);
    overflow: hidden;
}
.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--sp-4) var(--sp-5);
    background: none;
    border: none;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--c-neutral-800);
    cursor: pointer;
    transition: background var(--transition);
}
.accordion-header:hover { background: var(--c-primary-50); }
.accordion-icon { transition: transform var(--transition); flex-shrink: 0; }
.accordion-header[aria-expanded="true"] .accordion-icon { transform: rotate(180deg); }
.accordion-panel-inner { padding: 0 var(--sp-5) var(--sp-5); }
.accordion-panel-inner p { color: var(--c-neutral-600); line-height: 1.7; }
.accordion-specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
}
.accordion-specs-grid div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-2);
    border-bottom: 1px solid var(--c-neutral-100);
}
.accordion-specs-grid strong {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-neutral-500);
    font-weight: 500;
}
.accordion-specs-grid span { font-size: 0.9375rem; color: var(--c-neutral-800); }

/* --------------------------------------------------------------------------
   Trust Strip
   -------------------------------------------------------------------------- */

.trust-strip {
    padding: var(--sp-5) 0;
    background: var(--c-neutral-900);
}
.trust-strip-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-5);
}
.trust-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--c-neutral-300);
}
.trust-icon { color: var(--c-primary-400); display: flex; }
.trust-label {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.03em;
}

/* --------------------------------------------------------------------------
   PDP Recommendations
   -------------------------------------------------------------------------- */

.pdp-recommendations { padding: var(--sp-8) 0; background: var(--c-neutral-50); }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.pagination, .wp-pagination {
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-7);
}
.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--sp-2);
    border: 1px solid var(--c-neutral-300);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--c-neutral-700);
    text-decoration: none;
    transition: all var(--transition);
}
.page-numbers:hover, .page-numbers.current {
    background: var(--c-primary-600);
    color: var(--c-neutral-0);
    border-color: var(--c-primary-600);
}

/* --------------------------------------------------------------------------
   Page Container (fallback)
   -------------------------------------------------------------------------- */

.page-container { padding: var(--sp-8) 0; min-height: 50vh; }
.page-title { margin-bottom: var(--sp-5); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .pdp-container { grid-template-columns: 1fr; gap: var(--sp-5); }
    .pdp-gallery { position: static; }
}

@media (max-width: 768px) {
    .primary-nav { display: none; }
    .mobile-menu-toggle { display: block; }
    .header-cta { display: none; }

    .primary-nav.open {
        display: flex;
        position: fixed;
        top: 72px; left: 0; right: 0;
        bottom: 0;
        background: var(--c-neutral-0);
        flex-direction: column;
        padding: var(--sp-5);
        z-index: 99;
    }
    .primary-nav.open .nav-list {
        flex-direction: column;
        gap: var(--sp-4);
    }

    .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }

    .plp-container { grid-template-columns: 1fr; }
    .plp-sidebar {
        position: fixed;
        top: 0; left: 0;
        height: 100vh;
        width: 85%;
        max-width: 320px;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform var(--transition);
        overflow-y: auto;
        border-radius: 0;
    }
    .plp-sidebar.open { transform: translateX(0); }
    .sidebar-close { display: block; }
    .filter-toggle { display: inline-flex; }

    .plp-toolbar { justify-content: space-between; }

    .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
    .product-card-actions { transform: translateY(0); position: static; }
    .card-action-btn { font-size: 0.625rem; padding: 8px 4px; }

    .pdp-key-specs { grid-template-columns: 1fr; }
    .accordion-specs-grid { grid-template-columns: 1fr; }

    .trust-strip-grid { gap: var(--sp-3); }
    .trust-item { flex: 0 0 calc(50% - var(--sp-3)); }

    .consultation-cta { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
    .product-grid { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr; }
    .collection-hero { min-height: 50vh; }
    .cta-row { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   Animations / Micro-interactions
   -------------------------------------------------------------------------- */

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

.product-card {
    animation: fadeInUp 0.4s ease both;
}
.product-card:nth-child(1) { animation-delay: 0.05s; }
.product-card:nth-child(2) { animation-delay: 0.10s; }
.product-card:nth-child(3) { animation-delay: 0.15s; }
.product-card:nth-child(4) { animation-delay: 0.20s; }
.product-card:nth-child(5) { animation-delay: 0.25s; }
.product-card:nth-child(6) { animation-delay: 0.30s; }

.collection-hero-content, .plp-banner-content {
    animation: fadeInUp 0.6s ease both;
}

/* Respect users who have asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* PLP overlay for mobile filter */
.plp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 199;
}
.plp-overlay.active { display: block; }


/* Footer store list (store_location CPT): name left, number right. */
.footer-stores .footer-links li{margin-bottom:8px;line-height:1.4}
/* Name and number share a line when they fit. When the column is too
   narrow the number drops to its own line instead of the name breaking
   mid-way — "Mayur Vihar III" must never split as "Mayur Vihar / III". */
.footer-store{display:flex;align-items:baseline;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.footer-store > a:first-child{flex:0 1 auto;white-space:nowrap}
.footer-store-phone{flex:0 0 auto;font-size:.82rem;opacity:.8;white-space:nowrap;margin-left:auto}


/* ---------------------------------------------------------------------
 * Alukka brand accents
 * ------------------------------------------------------------------ */
.site-logo .logo-text{color:var(--c-brand-500)}
.header-cta{border-color:var(--c-brand-500);color:var(--c-brand-500)}
.header-cta:hover{background:var(--c-brand-500);color:var(--c-neutral-0)}
.jcore-lead-submit{background:var(--c-brand-500)}
.jcore-lead-submit:hover{background:var(--c-brand-600)}
.cta-banner{background:var(--c-brand-500);color:var(--c-neutral-0)}
.cta-banner .btn-primary{background:var(--c-neutral-0);color:var(--c-brand-500)}
.cta-banner .btn-text{color:var(--c-neutral-0);text-decoration:underline}
/* Background artwork is injected as inline CSS from functions.php, using
   WordPress's real uploads URL — a relative path here would break on
   multisite or a custom uploads directory. */
.site-footer{background-size:cover;background-position:center}
.home-collections{background-size:cover;background-position:top center}




/* Two category tiles per row on phones — one-per-row made the section
   an endless scroll. */

/* =====================================================================
   HOMEPAGE — Alukka retail layout
   ===================================================================== */

/* --- Banner carousel --- */
.jtheme-banners{position:relative;background:var(--c-neutral-900);overflow:hidden}
.jtheme-banners-track{position:relative}
.jtheme-banner{display:none}
.jtheme-banner.is-active{display:block;animation:bannerFade .5s ease both}
@keyframes bannerFade{from{opacity:0}to{opacity:1}}
.jtheme-banner-link{display:block;position:relative;text-decoration:none;color:inherit}
.jtheme-banner-image{display:block;width:100%;height:auto}
/* Photographic banners get an overlay; artwork banners are shown whole. */
.jtheme-banner.is-photo .jtheme-banner-image{aspect-ratio:24/10;object-fit:cover}
.jtheme-banner-overlay{position:absolute;inset:0;display:flex;align-items:center;
	background:linear-gradient(90deg,rgba(26,25,23,.76) 0%,rgba(26,25,23,.35) 60%,transparent 100%);color:var(--c-neutral-0)}
.jtheme-banner-eyebrow{margin:0 0 8px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.jtheme-banner-title{margin:0 0 10px;font-family:var(--font-heading);font-size:clamp(1.8rem,4vw,3rem);line-height:1.1}
.jtheme-banner-excerpt{margin:0 0 20px;max-width:46ch;line-height:1.6;opacity:.92}

.jtheme-banner-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
	width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	background:rgba(255,255,255,.88);color:var(--c-neutral-800);transition:background .2s ease}
.jtheme-banner-nav:hover{background:var(--c-neutral-0)}
.jtheme-banner-nav.prev{left:14px}
.jtheme-banner-nav.next{right:14px}
.jtheme-banner-dots{position:absolute;left:0;right:0;bottom:14px;z-index:3;display:flex;justify-content:center;gap:8px}
.jtheme-banner-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
	background:rgba(255,255,255,.55);transition:background .2s ease,width .2s ease}
.jtheme-banner-dot.is-active{background:var(--c-brand-500);width:26px;border-radius:5px}

.jtheme-banner-actions{background:var(--c-neutral-0);padding:20px 0 4px}
.jtheme-banner-actions .container{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* --- Gold rate strip --- */
.jcore-rate-strip{background:var(--c-brand-500);color:var(--c-neutral-0)}
.jcore-rate-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 28px;padding:12px 24px}
.jcore-rate-heading{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;opacity:.9}
.jcore-rate-list{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0;list-style:none}
.jcore-rate-item{display:flex;align-items:baseline;gap:6px}
.jcore-rate-label{font-size:.82rem;opacity:.9}
.jcore-rate-value{font-family:var(--font-heading);font-size:1.22rem;font-weight:600}
.jcore-rate-unit{font-size:.72rem;opacity:.8}
.jcore-rate-updated{font-size:.72rem;opacity:.78}

/* --- Shop by category --- */
.home-categories{padding:clamp(44px,6vw,76px) 0;background:var(--c-neutral-0)}
.category-tiles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
.category-tile{display:flex;flex-direction:column;align-items:center;text-align:center;
	text-decoration:none;color:inherit;padding:16px 10px 18px;border-radius:12px;
	background:var(--c-neutral-50);border:1px solid var(--c-neutral-200);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.category-tile:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.09);border-color:var(--c-primary-300)}
.category-tile-media{display:block;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--c-neutral-100);max-width:150px;margin-bottom:12px}
.category-tile-media img{width:100%;height:100%;object-fit:cover}
.category-tile-placeholder{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--c-primary-100),var(--c-neutral-100))}
.category-tile-name{font-family:var(--font-heading);font-size:1.02rem;font-weight:600;color:var(--c-neutral-900)}
.category-tile-count{font-size:.74rem;color:var(--c-neutral-500);margin-top:2px}

/* --- New arrivals --- */
.home-latest{padding:clamp(44px,6vw,76px) 0;background:var(--c-neutral-50)}
.home-latest-more{margin:32px 0 0;text-align:center}

/* --- Showrooms --- */
.home-branches{padding:clamp(44px,6vw,76px) 0 0;background:var(--c-neutral-0)}
.branch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.branch-card{position:relative;padding:24px 22px;border-radius:12px;background:var(--c-neutral-50);border:1px solid var(--c-neutral-200)}
.branch-card.is-flagship{border-color:var(--c-brand-300);background:var(--c-brand-50)}
.branch-flag{position:absolute;top:14px;right:14px;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
	background:var(--c-brand-500);color:var(--c-neutral-0);padding:3px 9px;border-radius:20px}
.branch-name{margin:0 0 10px;font-family:var(--font-heading);font-size:1.25rem}
.branch-name a{text-decoration:none;color:var(--c-neutral-900)}
.branch-name a:hover{color:var(--c-brand-500)}
.branch-address{font-style:normal;font-size:.9rem;line-height:1.6;color:var(--c-neutral-600);margin:0 0 10px}
.branch-hours{font-size:.82rem;color:var(--c-neutral-500);margin:0 0 12px}
.branch-actions{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:16px}
.branch-phone,.branch-directions{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;text-decoration:none;color:var(--c-brand-600)}
.branch-phone:hover,.branch-directions:hover{text-decoration:underline}
.branches-see-in-person{display:flex;justify-content:center;margin-top:clamp(28px,4vw,44px);padding:clamp(28px,4vw,44px) 0;border-top:1px solid var(--c-neutral-200)}

@media(max-width:768px){
	.jtheme-banner.is-photo .jtheme-banner-image{aspect-ratio:4/3}
	.jtheme-banner-overlay{background:linear-gradient(180deg,rgba(26,25,23,.35) 0%,rgba(26,25,23,.82) 100%);align-items:flex-end;padding-bottom:34px}
	.jtheme-banner-nav{width:34px;height:34px}
	.jtheme-banner-actions .container{flex-direction:column}
	.jtheme-banner-actions .btn{width:100%}
	.category-tiles-grid{grid-template-columns:repeat(2,1fr);gap:14px}
	.jcore-rate-inner{gap:8px 18px;padding:10px 16px}
	.jcore-rate-value{font-size:1.05rem}
}

/* =====================================================================
   CATALOGUE (PLP / PDP) — Jos Alukkas style: white cards, dense grid,
   filters given real prominence.
   ===================================================================== */

/* Denser grid — four across on desktop rather than three. */
.product-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}

/* Clean white product cards: the jewellery carries the page, not the card. */
.product-card{border-color:var(--c-neutral-200);border-radius:8px;box-shadow:none}
.product-card:hover{border-color:var(--c-primary-300);box-shadow:0 10px 24px rgba(0,0,0,.08);transform:translateY(-2px)}
.product-card-image-wrap{background:var(--c-neutral-0);aspect-ratio:1}
.product-card-image-wrap img{object-fit:contain;padding:8px}
.product-card-info{padding:12px 14px 16px}
.product-card-title{font-family:var(--font-body);font-size:.9rem;font-weight:500;line-height:1.4;margin:0 0 4px;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-card-meta{font-size:.74rem;color:var(--c-neutral-500);margin-bottom:6px}
.product-card-price{font-family:var(--font-heading);font-size:1rem;font-weight:600;color:var(--c-brand-600)}

/* Slimmer PLP banner — the catalogue starts sooner. */
.plp-banner{min-height:150px;background:linear-gradient(135deg,var(--c-brand-700),var(--c-brand-500))}
.plp-banner-title{font-size:clamp(1.6rem,3.4vw,2.3rem)}
.plp-banner-subtitle{font-size:.92rem;opacity:.9}

/* Filters read as a real tool, not an afterthought. */
.plp-container{grid-template-columns:250px 1fr;gap:28px}
.plp-sidebar{background:var(--c-neutral-0);border:1px solid var(--c-neutral-200);border-radius:10px;padding:18px 16px;position:sticky;top:90px}
.filter-group{border-bottom:1px solid var(--c-neutral-200);padding-bottom:14px;margin-bottom:14px}
.filter-group:last-of-type{border-bottom:0}
.filter-group-title{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-neutral-700);margin-bottom:10px}
.filter-option{font-size:.86rem;padding:3px 0}
.plp-toolbar{background:var(--c-neutral-0);border:1px solid var(--c-neutral-200);border-radius:8px;padding:10px 14px;margin-bottom:18px}
.plp-result-count{font-size:.86rem;color:var(--c-neutral-600)}

@media(max-width:900px){
	.plp-container{grid-template-columns:1fr}
	.plp-sidebar{position:static}
}
@media(max-width:560px){
	.product-grid{grid-template-columns:repeat(2,1fr);gap:12px}
	.product-card-info{padding:10px}
	.product-card-title{font-size:.82rem}
}

/* The base .cta-banner was designed as a narrow centred text block. Now it
   is a full-width brand band, so reset the width and force legible colours —
   the inherited dark body colour was unreadable on crimson. */
.cta-banner{max-width:none;margin:0;text-align:left;padding:clamp(34px,5vw,56px) 0}
.cta-banner .cta-banner-title{color:var(--c-neutral-0);margin-bottom:8px}
.cta-banner .cta-banner-text{color:var(--c-neutral-0);margin-bottom:0}
.cta-banner .cta-banner-text p{color:rgba(255,255,255,.9);margin:0}
.cta-banner .btn-primary{background:var(--c-neutral-0);color:var(--c-brand-600);border-color:var(--c-neutral-0)}
.cta-banner .btn-primary:hover{background:var(--c-brand-50);color:var(--c-brand-700)}

/* Rounded square rather than a circle: several category images carry a
   caption near the bottom edge that a circular mask would crop away. */
.category-tile-media{border-radius:10px;max-width:100%;aspect-ratio:4/5}
.category-tile-media img{object-fit:cover}

@media(max-width:768px){
	.cta-banner{text-align:center}
	.cta-banner .cta-banner-inner{flex-direction:column}
}

/* =====================================================================
   PALETTE DISCIPLINE
   The page was carrying four competing accents — crimson, gold/bronze,
   near-black and pink. One action colour (crimson), gold demoted to fine
   detail only, and the heavy black bands lightened.
   ===================================================================== */

/* Every primary action is crimson. Gold buttons were reading as a second,
   unrelated brand. */
.btn-primary{background:var(--c-brand-500);border-color:var(--c-brand-500);color:var(--c-neutral-0);background-image:none}
.btn-primary:hover{background:var(--c-brand-600);border-color:var(--c-brand-600);color:var(--c-neutral-0)}
.btn-outline{border-color:var(--c-neutral-300);color:var(--c-neutral-800)}
.btn-outline:hover{border-color:var(--c-brand-500);color:var(--c-brand-600);background:transparent}

/* Price is information, not an action — neutral keeps the grid calm. */
.product-card-price{color:var(--c-neutral-900)}
.pdp-price-value{color:var(--c-neutral-900)}

/* Trust strip: a light rule rather than a heavy black band. */
.trust-strip{background:var(--c-neutral-50);border-top:1px solid var(--c-neutral-200);border-bottom:1px solid var(--c-neutral-200)}
.trust-item,.trust-label{color:var(--c-neutral-700)}
.trust-icon{color:var(--c-primary-600)}

/* Flagship branch: a crimson edge, not a pink fill. */
.branch-card.is-flagship{background:var(--c-neutral-50);border-color:var(--c-brand-500);border-width:1px;box-shadow:inset 3px 0 0 var(--c-brand-500)}

/* Gold survives as fine detail: eyebrows, rules and small labels. */
.section-title{color:var(--c-neutral-900)}
.jtheme-banner-eyebrow,.filter-group-title,.spec-label{color:var(--c-primary-600)}

/* Carousel: a plain light frame instead of a black void around short art. */
.jtheme-banners{background:var(--c-neutral-100)}
.jtheme-banner-actions{padding:18px 0 6px;border-bottom:1px solid var(--c-neutral-200)}

/* =====================================================================
   HEADER — brand crimson, matching the logo lockup
   ===================================================================== */
.site-header{background:var(--c-brand-500);border-bottom:1px solid var(--c-brand-600)}
.site-header.scrolled{box-shadow:0 2px 14px rgba(0,0,0,.18)}
/* Scoped to top-level items only: the mega panel sits on a white
   background, so white link text there would be invisible. */
.site-header .nav-list > li > a,
.site-header .logo-text,
.site-header .header-search-toggle,
.site-header .mobile-menu-toggle{color:var(--c-neutral-0)}
.site-header .nav-list > li > a:hover{color:var(--c-primary-200)}
.site-header .nav-list > li > a::after{background:var(--c-primary-300)}
.site-header .header-cta{border-color:rgba(255,255,255,.7);color:var(--c-neutral-0);background:transparent}
.site-header .header-cta:hover{background:var(--c-neutral-0);color:var(--c-brand-600);border-color:var(--c-neutral-0)}
.site-header .hamburger,.site-header .hamburger::before,.site-header .hamburger::after{background:var(--c-neutral-0)}
/* The logo file has its own crimson panel — let it sit flush on the bar. */
.site-header .site-logo img{display:block;mix-blend-mode:normal}
.header-search-panel{background:var(--c-brand-600)}
.header-search-panel input[type="search"]{background:var(--c-neutral-0)}
@media(max-width:900px){
	.site-header .primary-nav{background:var(--c-brand-500)}
}

/* =====================================================================
   ARCHIVES — collections and stores
   ===================================================================== */
.archive-banner{min-height:170px}
.container-narrow{max-width:860px}

/* --- Collections archive --- */
.collection-archive-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:26px;padding:clamp(28px,4vw,44px) 0}
.collection-item{background:var(--c-neutral-0);border:1px solid var(--c-neutral-200);border-radius:12px;overflow:hidden;
	display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.collection-item:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.09)}
.collection-item-media{display:block;background:var(--c-neutral-100);line-height:0}
.collection-item-media img{width:100%;height:auto;display:block}
.collection-item-placeholder{display:block;width:100%;aspect-ratio:24/10;background:linear-gradient(135deg,var(--c-primary-100),var(--c-neutral-100))}
.collection-item-body{padding:20px 22px 24px}
.collection-item-title{margin:0 0 8px;font-family:var(--font-heading);font-size:1.4rem}
.collection-item-title a{text-decoration:none;color:var(--c-neutral-900)}
.collection-item-title a:hover{color:var(--c-brand-500)}
.collection-item-excerpt{margin:0 0 16px;font-size:.92rem;line-height:1.6;color:var(--c-neutral-600)}
.collection-item-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.collection-item-count{font-size:.8rem;color:var(--c-neutral-500)}

/* --- Store map --- */
.store-map-wrap{padding:clamp(24px,4vw,40px) 0 0}
.store-map{height:clamp(340px,46vh,480px);border-radius:12px;overflow:hidden;border:1px solid var(--c-neutral-200);background:var(--c-neutral-100)}
.store-map-note{margin:10px 0 0;font-size:.8rem;color:var(--c-neutral-500);text-align:center}

/* --- Store list: vertical, gold separator between entries --- */
.store-archive{padding-top:clamp(28px,4vw,44px)}
.store-list{list-style:none;margin:0;padding:0}
.store-list-item{position:relative;padding:0 0 8px;text-align:center}
.store-list-head{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:10px}
.store-list-name{margin:0;font-family:var(--font-heading);font-size:clamp(1.5rem,3vw,2rem)}
.store-list-name a{text-decoration:none;color:var(--c-neutral-900)}
.store-list-name a:hover{color:var(--c-brand-500)}
.store-list-address{font-style:normal;font-size:1.02rem;line-height:1.7;color:var(--c-neutral-700);margin:0 0 8px}
.store-list-hours{font-size:.9rem;color:var(--c-neutral-500);margin:0 0 12px}
.store-list-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 22px;margin-bottom:6px}
.store-separator{display:block;margin:26px auto 30px;color:var(--c-primary-400);line-height:0}
.store-list-item:last-child .store-separator{display:none}
.store-list-item.is-flagship .store-list-name a{color:var(--c-brand-600)}

/* --- Single store --- */
.store-single-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.store-single-intro{color:var(--c-neutral-600);margin-bottom:24px}
.store-single-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:24px;
	padding:24px 0;border-top:1px solid var(--c-neutral-200);border-bottom:1px solid var(--c-neutral-200)}
.store-single-label{margin:0 0 6px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-primary-600)}
.store-single-actions{display:flex;gap:12px;flex-wrap:wrap;padding:26px 0}

@media(max-width:560px){
	.store-list-actions{flex-direction:column;gap:10px}
	.store-single-actions .btn{width:100%}
}

/* The flagship badge is absolutely positioned inside branch cards; in the
   centred store list it needs to sit inline next to the name. */
.store-list-head .branch-flag,
.store-single-head .branch-flag{position:static;top:auto;right:auto}

/* =====================================================================
   MEGA MENU
   ===================================================================== */
.mega-nav{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.mega-item{position:static}
.mega-top-link{display:inline-flex;align-items:center;gap:5px;padding:10px 14px;
	font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
	color:var(--c-neutral-0);border-radius:4px;transition:background .18s ease,color .18s ease;white-space:nowrap}
.mega-top-link:hover,.mega-item.is-open > .mega-top-link{background:rgba(255,255,255,.14);color:var(--c-neutral-0)}
.mega-caret{opacity:.75;transition:transform .18s ease}
.mega-item.is-open .mega-caret{transform:rotate(180deg)}

/* The panel spans the viewport, anchored to the header. */
.mega-panel{position:absolute;left:0;right:0;top:100%;z-index:120;
	background:var(--c-neutral-0);border-top:1px solid var(--c-neutral-200);
	box-shadow:0 18px 40px rgba(0,0,0,.14);animation:megaIn .16s ease both}
.mega-panel[hidden]{display:none}
@keyframes megaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mega-panel-inner{display:grid;grid-template-columns:auto 2fr auto auto;gap:34px;padding:28px 24px 32px;align-items:start}
.mega-col-title{margin:0 0 14px;padding-bottom:8px;font-family:var(--font-body);
	font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-neutral-800);
	border-bottom:2px solid var(--c-primary-400);display:inline-block}
.mega-links{list-style:none;margin:0;padding:0}
.mega-links li{margin:0 0 4px}
.mega-links a{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 0;
	font-size:.92rem;color:var(--c-neutral-700);text-decoration:none;border-radius:6px;transition:color .15s ease}
.mega-links a:hover{color:var(--c-brand-500)}
.mega-links-grid{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));column-gap:26px}
.mega-icon{flex:0 0 34px;width:34px;height:34px;border-radius:50%;overflow:hidden;
	background:var(--c-neutral-100);display:inline-flex;align-items:center;justify-content:center}
.mega-icon img{width:100%;height:100%;object-fit:cover}
.mega-promo{display:block;width:190px;text-decoration:none;border-radius:10px;overflow:hidden;background:var(--c-neutral-100)}
.mega-promo img{display:block;width:100%;height:150px;object-fit:cover}
.mega-promo-label{display:block;padding:9px 10px;font-size:.8rem;text-align:center;
	color:var(--c-neutral-0);background:var(--c-brand-500)}

@media(max-width:1180px){
	.mega-panel-inner{grid-template-columns:auto 2fr auto;gap:26px}
	.mega-promo{display:none}
	.mega-top-link{padding:10px 10px;font-size:.76rem}
}
@media(max-width:900px){
	/* Mobile: panels stack inside the drawer instead of overlaying. */
	.mega-nav{flex-direction:column;align-items:stretch;gap:0}
	.mega-top-link{justify-content:space-between;padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.18)}
	.mega-panel{position:static;box-shadow:none;border-top:0;background:transparent;animation:none}
	.mega-panel-inner{grid-template-columns:1fr;gap:18px;padding:14px 4px 18px}
	.mega-col-title{color:var(--c-primary-200);border-bottom-color:rgba(255,255,255,.3)}
	.mega-links a{color:rgba(255,255,255,.92)}
	.mega-links a:hover{color:var(--c-neutral-0)}
	.mega-links-grid{grid-template-columns:1fr}
	.mega-icon{background:rgba(255,255,255,.14)}
}

/* Panel links live on white and must not inherit the header's white text. */
.site-header .mega-panel a{color:var(--c-neutral-700)}
.site-header .mega-panel a:hover{color:var(--c-brand-500)}
.site-header .mega-panel .mega-promo-label{color:var(--c-neutral-0)}
.mega-link-label{line-height:1.3}

/* Keep the bar on one line at laptop widths without crowding. */
.header-inner{gap:12px}
.primary-nav{min-width:0;flex:1 1 auto;display:flex;justify-content:center}
.mega-nav{flex-wrap:nowrap;overflow:visible}
@media(max-width:1320px){.mega-top-link{padding:10px 9px;font-size:.72rem;letter-spacing:.03em}}
@media(max-width:1100px){.mega-nav .mega-item:nth-last-child(-n+2) .mega-top-link{padding-left:7px;padding-right:7px}}
@media(max-width:900px){
	.site-header .mega-panel a{color:rgba(255,255,255,.92)}
	.site-header .mega-panel a:hover{color:var(--c-neutral-0)}
	.mega-nav{flex-wrap:wrap}
}

/* Two-row header: logo and actions on top, navigation on its own row —
   eight top-level entries cannot share a line with the logo and CTA. */
@media(min-width:901px){
	.header-inner{flex-wrap:wrap;row-gap:0}
	.site-logo{order:1}
	.header-actions{order:2;margin-left:auto}
	.mega-nav{padding:2px 0}
	.mega-top-link{padding:11px 13px;font-size:.78rem;letter-spacing:.05em}
	/* Panel hangs off the header, so anchor to the header not the row. */
	.site-header{position:relative}
}

/* =====================================================================
   FIXES: header height, compact mega panel
   ===================================================================== */

/* The bar had a fixed 72px height, so a taller logo spilled out of it.
   Give the row real height and cap the logo so it always sits inside. */
.header-inner{height:auto;min-height:78px;padding-top:10px;padding-bottom:0}
.site-logo img,.custom-logo{display:block;max-height:56px;width:auto;height:auto}
@media(min-width:901px){
	.header-inner{padding-bottom:0}
	.primary-nav{margin-top:8px}
}
@media(max-width:900px){
	.header-inner{min-height:66px;padding-bottom:10px}
	.site-logo img,.custom-logo{max-height:44px}
}

/* --- Compact mega panel -------------------------------------------------
   It was tall enough to blanket the page. Tighter rows, smaller icons and
   a capped height keep the navigation itself visible above it. */
.mega-panel-inner{gap:22px;padding:18px 24px 20px;max-height:min(58vh,440px);overflow-y:auto}
.mega-col-title{margin:0 0 9px;padding-bottom:5px;font-size:.66rem;letter-spacing:.12em}
.mega-links li{margin:0}
.mega-links a{gap:8px;padding:4px 6px 4px 0;font-size:.85rem}
.mega-links-grid{column-gap:18px}
.mega-icon{flex:0 0 26px;width:26px;height:26px}
.mega-promo{width:150px}
.mega-promo img{height:110px}
.mega-promo-label{padding:6px 8px;font-size:.72rem}
@media(max-width:900px){
	.mega-panel-inner{max-height:none;overflow:visible;padding:12px 4px 16px}
}

/* --- Stores: map left, addresses right ------------------------------- */
.store-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.72fr);gap:38px;align-items:start;
	padding:clamp(24px,4vw,40px) 0}
.store-map-col{position:sticky;top:96px}
.store-map{height:clamp(420px,58vh,560px);width:100%}
.store-map-note{text-align:left}
/* Addresses read as a column beside the map, not a centred page. */
.store-list-col .store-list-item{text-align:left}
.store-list-col .store-list-head{justify-content:flex-start}
.store-list-col .store-list-actions{justify-content:flex-start}
.store-list-col .store-separator{margin-left:0}
.store-list-col .store-list-name{font-size:clamp(1.3rem,2.2vw,1.6rem)}
.store-list-col .store-list-address{font-size:.96rem}

@media(max-width:1000px){
	.store-layout{grid-template-columns:1fr;gap:26px}
	.store-map-col{position:static}
	.store-map{height:360px}
	.store-list-col .store-list-item{text-align:center}
	.store-list-col .store-list-head,
	.store-list-col .store-list-actions{justify-content:center}
	.store-list-col .store-separator{margin-left:auto}
	.store-map-note{text-align:center}
}

/* =====================================================================
   NAV BAR — light row beneath the crimson brand bar (Malabar pattern).
   Dark text on white reads far better than eight items in white on
   crimson, and it leaves room for the live rate inline.
   ===================================================================== */


/* Panel now hangs off a white bar. */
@media(min-width:901px){
	.mega-panel{border-top:1px solid var(--c-neutral-200)}
}
@media(max-width:900px){
			}

/* =====================================================================
   COMMITMENT STRIP — line-art icons, two-line labels
   ===================================================================== */
.trust-strip{background:var(--c-neutral-50);padding:26px 0}
.trust-strip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:18px 10px}
.trust-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px}
.trust-icon{color:var(--c-neutral-500);line-height:0}
.trust-icon svg{width:42px;height:42px}
.trust-label{font-size:.82rem;line-height:1.35;color:var(--c-neutral-700);max-width:13ch}
@media(max-width:640px){
	.trust-strip-grid{grid-template-columns:repeat(3,1fr);gap:20px 8px}
	.trust-icon svg{width:34px;height:34px}
	.trust-label{font-size:.74rem}
}

/* =====================================================================
   HEADER STRUCTURE: crimson brand bar + white navigation bar
   ===================================================================== */
.header-nav-bar{background:var(--c-neutral-0);border-top:1px solid var(--c-brand-600);
	box-shadow:inset 0 -1px 0 var(--c-neutral-200)}
.header-nav-inner{display:flex;align-items:center;gap:18px;min-height:46px}
.header-nav-inner .primary-nav{flex:1 1 auto;min-width:0;display:flex;align-items:center;background:transparent;margin:0;border:0}
.header-nav-bar .nav-list{flex-wrap:wrap}
.header-nav-bar .mega-top-link{color:var(--c-neutral-800);font-weight:500;position:relative}
.header-nav-bar .mega-top-link:hover,
.header-nav-bar .mega-item.is-open > .mega-top-link{color:var(--c-brand-500);background:transparent}
.header-nav-bar .mega-item.is-open > .mega-top-link::after,
.header-nav-bar .mega-top-link:hover::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:var(--c-brand-500)}
.header-nav-bar .mega-caret{opacity:.55}

/* The panel drops from the navigation bar, not the brand bar. */
.mega-panel{top:100%}

@media(max-width:900px){
	.header-nav-bar{background:var(--c-brand-500);border-top:1px solid rgba(255,255,255,.2);box-shadow:none}
	.header-nav-inner{flex-direction:column;align-items:stretch;padding-bottom:10px}
	.header-nav-bar .mega-top-link{color:var(--c-neutral-0)}
	.header-nav-bar .mega-top-link:hover,
	.header-nav-bar .mega-item.is-open > .mega-top-link{color:var(--c-neutral-0)}
}

/* The crimson-bar rule (.site-header .nav-list > li > a) is more specific
   than .header-nav-bar .mega-top-link, so it was still painting the nav
   links white — invisible on the white bar. Match its weight here. */
@media(min-width:901px){
	.site-header .header-nav-bar .nav-list > li > a{color:var(--c-neutral-800)}
	.site-header .header-nav-bar .nav-list > li > a:hover,
	.site-header .header-nav-bar .mega-item.is-open > .mega-top-link{color:var(--c-brand-500)}
}
@media(max-width:900px){
	.site-header .header-nav-bar .nav-list > li > a{color:var(--c-neutral-0)}
}

/* =====================================================================
   NAV ITEMS — icon above a two-line label, matching the category tiles
   ===================================================================== */
.header-nav-inner{min-height:0}
.mega-nav{gap:2px;justify-content:center;width:100%}
.header-nav-inner .primary-nav{justify-content:center}

.mega-top-link{flex-direction:column;align-items:center;gap:5px;
	padding:12px 16px 11px;text-transform:none;letter-spacing:0;line-height:1.2;text-align:center}
.mega-top-icon{display:block;color:var(--c-primary-600);line-height:0}
.mega-top-icon svg{width:26px;height:26px}
.mega-top-text{display:flex;flex-direction:column;align-items:center;gap:1px}
.mega-top-primary{font-size:.92rem;font-weight:600;color:inherit}
.mega-top-secondary{font-size:.72rem;font-weight:400;opacity:.72}
.mega-caret{position:absolute;right:5px;top:14px;opacity:.4}

/* Hover/active: crimson type, gold icon warms, underline along the base. */
.header-nav-bar .mega-top-link:hover .mega-top-icon,
.header-nav-bar .mega-item.is-open > .mega-top-link .mega-top-icon{color:var(--c-brand-500)}
.header-nav-bar .mega-item.is-open > .mega-top-link::after,
.header-nav-bar .mega-top-link:hover::after{left:8px;right:8px;bottom:0}

@media(max-width:1200px){
	.mega-top-link{padding:11px 10px 10px}
	.mega-top-primary{font-size:.85rem}
	.mega-top-secondary{font-size:.68rem}
	.mega-top-icon svg{width:23px;height:23px}
}
@media(max-width:900px){
	/* Drawer: back to a single line per item, icon on the left. */
	.mega-nav{justify-content:stretch}
	.mega-top-link{flex-direction:row;justify-content:flex-start;gap:10px;text-align:left;padding:12px 4px}
	.mega-top-text{flex-direction:row;align-items:baseline;gap:5px}
	.mega-top-icon svg{width:20px;height:20px}
	.mega-top-icon{color:rgba(255,255,255,.85)}
	.mega-caret{position:static;margin-left:auto}
}

/* `.nav-list a` is (0,1,1) and outranks `.mega-top-link` (0,1,0), so the
   base uppercase styling was still winning. `.mega-nav .mega-top-link` is
   (0,2,0), which beats it. */
.mega-nav .mega-top-link{text-transform:none;letter-spacing:0;font-size:1rem;
	flex-direction:column;align-items:center;gap:6px;padding:12px 18px 11px;line-height:1.2;text-align:center}
.mega-nav .mega-top-link .mega-top-primary{text-transform:none;letter-spacing:0;
	font-size:.94rem;font-weight:600}
.mega-nav .mega-top-link .mega-top-secondary{text-transform:none;letter-spacing:0;
	font-size:.73rem;font-weight:400;opacity:.7}
/* The base rule also draws an underline on hover; the item-level one is enough. */
.mega-nav .mega-top-link::after{display:none}
.header-nav-bar .mega-nav .mega-item.is-open > .mega-top-link::before,
.header-nav-bar .mega-nav .mega-top-link:hover::before{content:"";position:absolute;
	left:10px;right:10px;bottom:0;height:2px;background:var(--c-brand-500)}
.mega-nav{gap:6px}
.header-nav-inner{padding-top:2px;padding-bottom:2px}

@media(max-width:1200px){
	.mega-nav .mega-top-link{padding:11px 11px 10px}
	.mega-nav .mega-top-link .mega-top-primary{font-size:.86rem}
	.mega-nav .mega-top-link .mega-top-secondary{font-size:.68rem}
}
@media(max-width:900px){
	.mega-nav .mega-top-link{flex-direction:row;justify-content:flex-start;gap:10px;text-align:left;padding:12px 4px}
	.mega-nav .mega-top-link .mega-top-primary{font-size:.95rem}
}

/* Google Maps embeds (keyless iframes) */
.store-map{overflow:hidden;border-radius:12px;border:1px solid var(--c-neutral-200);background:var(--c-neutral-100)}
.store-map iframe{display:block;width:100%;height:100%;border:0}
.store-single-map{margin:24px 0 0;height:340px;border-radius:12px;overflow:hidden;border:1px solid var(--c-neutral-200)}
.store-single-map iframe{display:block;width:100%;height:100%;border:0}

/* The Visit Us column carries a name plus a phone number on one line, so
   it needs more room than the plain link columns. */
@media(min-width:901px){
	.footer-inner{grid-template-columns:1.6fr 1fr 1fr 1.5fr;gap:var(--sp-6)}
}

/* PDP actions on one line: request, share, and the try-on button. */
.pdp-cta-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:22px}
.pdp-cta-row .btn{display:inline-flex;align-items:center;gap:8px}
.pdp-cta-main{flex:1 1 210px;justify-content:center}
.pdp-cta-share{flex:0 0 auto}
/* Camweara injects its own button here; collapse the slot when empty. */
.pdp-tryon-mount:empty{display:none}
.pdp-tryon-mount{flex:0 0 auto;display:inline-flex;align-items:center}
@media(max-width:480px){
	.pdp-cta-row{gap:8px}
	.pdp-cta-main{flex:1 1 100%}
	.pdp-cta-share,.pdp-tryon-mount,.jcore-tryon-open{flex:1 1 calc(50% - 4px)}
	.pdp-cta-share,.jcore-tryon-open{justify-content:center}
}

/* --- Blog --- */
.blog-intro{max-width:720px;margin:0 auto clamp(24px,4vw,40px);color:var(--c-neutral-600);text-align:center}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;padding:clamp(20px,3vw,32px) 0 clamp(44px,6vw,72px)}
.blog-card{display:flex;flex-direction:column;padding:24px 22px;border-radius:12px;background:var(--c-neutral-50);border:1px solid var(--c-neutral-200)}
.blog-card-eyebrow{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-brand-500);margin-bottom:10px}
.blog-card-title{margin:0 0 10px;font-family:var(--font-heading);font-size:1.15rem;line-height:1.35}
.blog-card-title a{color:var(--c-neutral-900);text-decoration:none}
.blog-card-title a:hover{color:var(--c-brand-500)}
.blog-card-excerpt{flex:1 1 auto;font-size:.88rem;line-height:1.6;color:var(--c-neutral-600);margin:0 0 16px}
.blog-card-link{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;font-weight:600;color:var(--c-brand-600);text-decoration:none;align-self:flex-start}
.blog-card-link:hover{text-decoration:underline}

/* --- Search results --- */
.search-results-list{list-style:none;margin:0;padding:clamp(20px,3vw,32px) 0;max-width:760px}
.search-results-list.has-products-above{border-top:1px solid var(--c-neutral-200);margin-top:clamp(24px,4vw,40px)}
.search-result-item{padding:18px 0;border-bottom:1px solid var(--c-neutral-200)}
.search-result-item:first-child{padding-top:0}
.search-result-type{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-brand-500)}
.search-result-title{margin:4px 0 6px;font-family:var(--font-heading);font-size:1.2rem}
.search-result-title a{color:var(--c-neutral-900);text-decoration:none}
.search-result-title a:hover{color:var(--c-brand-500)}
.search-result-excerpt{margin:0;font-size:.9rem;line-height:1.6;color:var(--c-neutral-600)}