/* ============================================================
   BRIGHTIX — SHARED DESIGN SYSTEM
   Extracted from the reference site's Products page (the
   client's approved visual benchmark). One stylesheet instead
   of duplicating this block into every page.
   ============================================================ */

:root {
    /* Brand blue + green, sampled directly from the Brightix logo */
    --color-primary: #163E8C;
    --color-primary-dark: #0E2A61;
    --color-primary-light: #2E63C7;
    --color-primary-lighter: #85A8E8;

    --color-secondary: #5FA828;
    --color-secondary-light: #EEF6E4;

    --color-background: #FAF8F4;
    --color-surface: #FFFFFF;

    --color-text-primary: #1E2126;
    --color-text-secondary: #667085;
    --color-text-light: #999999;

    --color-border: #E9E7E3;

    --color-success: #2E8B57;
    --color-warning: #2E63C7;
    --color-error: #4B5563;

    --shadow-raised: 4px 4px 12px rgba(34, 34, 34, 0.12), -4px -4px 12px rgba(250, 248, 244, 0.8);
    --shadow-raised-hover: 6px 6px 20px rgba(34, 34, 34, 0.18), -6px -6px 20px rgba(250, 248, 244, 0.9);
    --shadow-pressed: 2px 2px 6px rgba(34, 34, 34, 0.10), -2px -2px 6px rgba(250, 248, 244, 0.7);
    --shadow-inset: inset 2px 2px 6px rgba(34, 34, 34, 0.08), inset -2px -2px 6px rgba(250, 248, 244, 0.6);

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --font-heading: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Manrope', sans-serif;
    --font-quote: 'DM Sans', sans-serif;
    --font-code: 'Source Code Pro', monospace;

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 40px;
    --space-3xl: 48px;
    --space-4xl: 64px;
    --space-5xl: 80px;

    --transition-slow: 600ms ease-in-out;
    --transition-base: 350ms ease-in-out;
    --transition-fast: 200ms ease-in-out;

    --container-max: 1280px;
}

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

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-background);
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .flying-product { display: none !important; }
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.2; color: var(--color-text-primary); letter-spacing: -0.01em; }
.display { font-size: clamp(34px, 5.5vw, 56px); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: var(--color-text-primary); }
h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 700; }
h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: var(--color-text-primary); }

/* ===== WATER FLOW TEXT ANIMATION (headings & subheadings) ===== */
/* A light-blue shimmer sweeps continuously through the letterforms,
   like light moving across flowing water. Applied by default to all
   h1/h2 (page titles + major section headings). */
h1, h2, .display {
    background-image: linear-gradient(
        100deg,
        var(--color-text-primary) 0%,
        var(--color-text-primary) 38%,
        #BFE4FF 48%,
        #6FC6FF 50%,
        #BFE4FF 52%,
        var(--color-text-primary) 62%,
        var(--color-text-primary) 100%
    );
    background-size: 260% 100%;
    background-position: 200% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: waterFlowText 6s ease-in-out infinite;
}
/* Light variant for headings sitting on the dark blue hero band —
   flows white -> bright light-blue -> white instead of dark text. */
.page-hero h1, .page-hero .display {
    background-image: linear-gradient(
        100deg,
        #FFFFFF 0%,
        #FFFFFF 38%,
        #DFF3FF 48%,
        #A8E0FF 50%,
        #DFF3FF 52%,
        #FFFFFF 62%,
        #FFFFFF 100%
    );
    background-size: 260% 100%;
    background-position: 200% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: waterFlowText 6s ease-in-out infinite;
}
@keyframes waterFlowText {
    0%   { background-position: 200% 0; }
    100% { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
    h1, h2, .display, .page-hero h1, .page-hero .display {
        animation: none;
        background: none;
        -webkit-text-fill-color: currentColor;
        color: var(--color-text-primary);
    }
    .page-hero h1, .page-hero .display { color: #FFFFFF; }
}

h3 { font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; }
h4 { font-size: 18px; font-weight: 600; }
.body-large { font-size: 18px; font-weight: 400; line-height: 1.7; }
.body-small { font-size: 14px; font-weight: 500; color: var(--color-text-secondary); }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary-dark); }

/* ===== LAYOUT ===== */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-lg); }
.section { padding: var(--space-5xl) 0; }
.section-alt { background-color: var(--color-surface); }
.grid { display: grid; gap: var(--space-xl); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ===== CLAY CARD ===== */
.clay-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-raised);
    padding: var(--space-xl);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    border: 1px solid var(--color-border);
}
.clay-card:hover { box-shadow: var(--shadow-raised-hover); transform: translateY(-4px); }
.clay-card:active { box-shadow: var(--shadow-pressed); transform: translateY(0) scale(0.98); }

/* ===== BLOB BUTTON ===== */
.blob-btn {
    z-index: 1; position: relative; padding: 10px 16px; text-align: center; text-transform: uppercase;
    color: var(--color-primary); font-size: 13px; font-weight: 700; font-family: var(--font-code);
    background-color: transparent; outline: none; border: none; transition: color 0.5s; cursor: pointer;
    border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; letter-spacing: 0.05em; min-width: 60px; height: 40px; flex: 1;
}
.blob-btn:before {
    content: ""; z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    border: 2px solid var(--color-primary); border-radius: var(--radius-md);
}
.blob-btn:after {
    content: ""; z-index: -2; position: absolute; left: 3px; top: 3px; width: 100%; height: 100%;
    transition: all 0.3s 0.2s; border-radius: var(--radius-md);
}
.blob-btn:hover { color: var(--color-surface); border-radius: var(--radius-md); }
.blob-btn:hover:after { transition: all 0.3s; left: 0; top: 0; border-radius: var(--radius-md); }
.blob-btn__inner {
    z-index: -1; overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    border-radius: var(--radius-md); background: var(--color-surface);
}
.blob-btn__blobs { position: relative; display: block; height: 100%; filter: url('#goo'); }
.blob-btn__blob {
    position: absolute; top: 2px; width: 25%; height: 100%; background: var(--color-primary);
    border-radius: 100%; transform: translate3d(0, 150%, 0) scale(1.7); transition: transform 0.45s;
}
@supports (filter: url('#goo')) { .blob-btn__blob { transform: translate3d(0, 150%, 0) scale(1.4); } }
.blob-btn__blob:nth-child(1) { left: 0%; transition-delay: 0s; }
.blob-btn__blob:nth-child(2) { left: 30%; transition-delay: 0.08s; }
.blob-btn__blob:nth-child(3) { left: 60%; transition-delay: 0.16s; }
.blob-btn__blob:nth-child(4) { left: 90%; transition-delay: 0.24s; }
.blob-btn:hover .blob-btn__blob { transform: translateZ(0) scale(1.7); }
@supports (filter: url('#goo')) { .blob-btn:hover .blob-btn__blob { transform: translateZ(0) scale(1.4); } }
.blob-btn .btn-text { position: relative; z-index: 2; font-weight: 700; letter-spacing: 0.05em; }
.blob-btn-sm { padding: 10px 16px; font-size: 13px; min-width: 60px; height: 40px; flex: 1; }
.blob-btn-lg { padding: 18px 40px; font-size: 18px; min-width: 180px; }
.blob-btn-success { color: var(--color-success); }
.blob-btn-success:before { border-color: var(--color-success); }
.blob-btn-success .blob-btn__blob { background: var(--color-success); }
.blob-btn-outline { background: transparent; color: var(--color-text-primary); border: 2px solid var(--color-primary); }

/* ===== PRODUCT CARD (primary reference component) ===== */
.product-card {
    background: #f2f2f2; border-radius: var(--radius-lg);
    box-shadow: 8px 8px 16px rgba(34, 34, 34, 0.15), -8px -8px 16px rgba(255, 255, 255, 0.8),
                4px 4px 12px rgba(34, 34, 34, 0.10), -4px -4px 12px rgba(255, 255, 255, 0.6);
    overflow: hidden; transition: all var(--transition-base); border: 1px solid var(--color-border);
    position: relative; display: flex; flex-direction: column; height: 100%; min-height: 380px; width: 100%;
}
.product-card:hover {
    box-shadow: 12px 12px 24px rgba(34, 34, 34, 0.20), -12px -12px 24px rgba(255, 255, 255, 0.9),
                6px 6px 16px rgba(34, 34, 34, 0.12), -6px -6px 16px rgba(255, 255, 255, 0.7);
    transform: translateY(-4px);
}
.product-card-image {
    position: relative; overflow: hidden; aspect-ratio: 1; background: #f2f2f2;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 100%; cursor: pointer;
}
.product-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.product-card:hover .product-card-image img { transform: scale(1.05); }
.product-card-badges { position: absolute; top: var(--space-md); left: var(--space-md); display: flex; gap: var(--space-sm); flex-wrap: wrap; z-index: 2; pointer-events: none; }
.clay-badge { display: inline-block; padding: 4px 12px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; color: var(--color-surface); background: var(--color-primary); text-transform: uppercase; letter-spacing: 0.05em; }
.clay-badge-best-seller { background: var(--color-warning); }
.clay-badge-new { background: var(--color-primary); }
.clay-badge-sale { background: var(--color-secondary); }
.clay-badge-out-of-stock { background: #4B5563; }
.product-card-body { padding: var(--space-md) var(--space-lg) var(--space-lg); flex: 1; display: flex; flex-direction: column; justify-content: space-between; background: #f2f2f2; }
.product-card-title { font-family: var(--font-heading); font-size: 17px; font-weight: 600; margin-bottom: var(--space-xs); min-height: 48px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--color-text-primary); }
.product-card-title a { color: var(--color-text-primary); text-decoration: none; transition: color var(--transition-fast); }
.product-card-title a:hover { color: var(--color-primary); }
.product-card-reference { font-size: 12px; font-weight: 500; color: var(--color-text-light); font-style: italic; margin-bottom: var(--space-xs); margin-top: -2px; }
.product-card-category { font-size: 12px; color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-xs); }
.product-card-price { font-size: 18px; font-weight: 600; color: var(--color-primary); }
.product-card-price.is-inquiry { font-size: 14px; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.product-card.is-out-of-stock { opacity: 0.7; }
.product-card.is-out-of-stock .product-card-image img { filter: grayscale(40%); }
.product-card-price-original { font-size: 14px; color: var(--color-text-secondary); text-decoration: line-through; margin-left: var(--space-sm); }
.product-card-actions { display: flex; gap: 8px; margin-top: var(--space-md); position: relative; z-index: 3; }
.product-card-actions .blob-btn { flex: 1; min-width: 60px; height: 40px; padding: 10px 16px; font-size: 13px; }
.product-card-actions .blob-btn .btn-text { font-size: 13px; display: flex; align-items: center; justify-content: center; }
.product-card-actions .blob-btn-icon { flex: 1; min-width: 60px; height: 40px; padding: 10px 16px; }
.product-card-actions .blob-btn-icon .btn-text { font-size: 16px; display: flex; align-items: center; justify-content: center; }
.product-card-rating { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.product-card-rating .stars { color: var(--color-warning); font-size: 14px; letter-spacing: 1px; }
.product-card-rating .count { font-size: 13px; color: var(--color-text-secondary); }

/* ===== CATEGORY CIRCLE ROW — one line on desktop/tablet, auto-sliding on mobile ===== */
.category-circle-desktop-row {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: var(--space-xl);
    max-width: 960px;
    margin: 0 auto;
}
.category-circle-desktop-row .category-circle { flex: 0 1 140px; }
.category-circle-mobile-slider { display: none; }

.category-circle {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    text-decoration: none; color: inherit; gap: var(--space-sm);
}
.category-circle-image {
    width: 128px; height: 128px; border-radius: 50%; overflow: hidden;
    background: var(--color-surface); display: flex; align-items: center; justify-content: center;
    box-shadow: 6px 6px 14px rgba(34, 34, 34, 0.14), -6px -6px 14px rgba(255, 255, 255, 0.8);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
    flex-shrink: 0;
}
.category-circle-image img { width: 68%; height: 68%; object-fit: contain; transition: transform var(--transition-slow); }
.category-circle:hover .category-circle-image {
    box-shadow: 9px 9px 20px rgba(34, 34, 34, 0.20), -9px -9px 20px rgba(255, 255, 255, 0.9);
    transform: translateY(-4px);
}
.category-circle:hover .category-circle-image img { transform: scale(1.08); }
.category-circle-label { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--color-text-primary); }

/* Mobile auto-sliding marquee */
@media (max-width: 768px) {
    .category-circle-desktop-row { display: none; }
    .category-circle-mobile-slider {
        display: block;
        overflow: hidden;
        width: 100%;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    }
    .category-circle-slider-track {
        display: flex;
        gap: var(--space-lg);
        width: max-content;
        animation: categorySlide 16s linear infinite;
    }
    .category-circle-mobile-slider:hover .category-circle-slider-track,
    .category-circle-mobile-slider:active .category-circle-slider-track {
        animation-play-state: paused;
    }
    .category-circle-image { width: 96px; height: 96px; }
    .category-circle-label { font-size: 13px; }
}
@keyframes categorySlide {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .category-circle-slider-track { animation: none; }
}

/* ===== COMING SOON TEASER CARD ===== */
.coming-soon-card { text-align: center; padding: var(--space-2xl) var(--space-lg); opacity: 0.85; position: relative; }
.coming-soon-card h4 { color: var(--color-text-secondary); margin-top: var(--space-sm); }
.coming-soon-badge { display: inline-block; background: var(--color-secondary-light); color: var(--color-secondary); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 12px; border-radius: var(--radius-sm); }

/* ===== CATEGORY CARD (larger rectangular variant — kept for potential future use) ===== */
.category-card {
    background: var(--color-surface); border-radius: var(--radius-xl);
    box-shadow: 8px 8px 16px rgba(34, 34, 34, 0.15), -8px -8px 16px rgba(255, 255, 255, 0.8);
    overflow: hidden; border: 1px solid var(--color-border); transition: all var(--transition-base);
    display: flex; flex-direction: column; text-decoration: none; color: inherit; position: relative;
}
.category-card:hover { box-shadow: 12px 12px 28px rgba(34, 34, 34, 0.20), -12px -12px 28px rgba(255, 255, 255, 0.9); transform: translateY(-6px); }
.category-card-image { aspect-ratio: 3 / 2; overflow: hidden; background: #f2f2f2; }
.category-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.category-card:hover .category-card-image img { transform: scale(1.04); }
.category-card-body { padding: var(--space-xl); }
.category-card-body h3 { margin-bottom: var(--space-xs); }
.category-card-body p { color: var(--color-text-secondary); font-size: 15px; margin-bottom: var(--space-md); }
.category-card-count { font-size: 13px; font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.04em; }
.category-card-cta { position: absolute; top: var(--space-md); right: var(--space-md); background: var(--color-surface); color: var(--color-primary); font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: var(--radius-sm); box-shadow: var(--shadow-raised); text-transform: uppercase; letter-spacing: 0.04em; }

/* ===== IMAGE PLACEHOLDER STATE ===== */
.img-placeholder { background: #f2f2f2; display: flex; align-items: center; justify-content: center; }
.img-placeholder img { width: 100%; height: 100%; object-fit: contain !important; padding: 8%; }

/* ===== FLYING PRODUCT ANIMATION ===== */
.flying-product { position: fixed; z-index: 99999; pointer-events: none; width: 50px; height: 50px; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-raised-hover); display: flex; align-items: center; justify-content: center; font-size: 24px; border: 2px solid var(--color-primary); transition: none; opacity: 1; }
.cart-bounce { animation: cartBounce 0.5s ease; }
@keyframes cartBounce { 0% { transform: scale(1); } 30% { transform: scale(1.3); } 50% { transform: scale(0.9); } 70% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* ===== TOP BAR / HEADER ===== */
.top-bar { background: var(--color-surface); box-shadow: var(--shadow-raised); transition: box-shadow var(--transition-base); position: sticky; top: 0; z-index: 1001; }
.top-bar.scrolled { box-shadow: var(--shadow-raised-hover); }
.site-header { background: var(--color-surface); padding: 0 var(--space-lg); }
.nav-container { display: flex; align-items: center; justify-content: space-between; height: 72px; max-width: var(--container-max); margin: 0 auto; }
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 50px; width: auto; display: block; }
.nav-primary { display: flex; align-items: center; gap: var(--space-xl); margin-left: auto; margin-right: var(--space-xl); }
.nav-primary a { font-weight: 500; font-size: 14px; color: var(--color-text-primary); transition: color var(--transition-fast); position: relative; padding: 4px 0; }
.nav-primary a:hover, .nav-primary a.active { color: var(--color-primary); }
.nav-primary a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--color-primary); transition: width var(--transition-fast); }
.nav-primary a:hover::after, .nav-primary a.active::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: var(--space-md); flex-shrink: 0; }
.icon-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: transparent; border: none; cursor: pointer; transition: all var(--transition-fast); padding: 0; position: relative; }
.icon-btn:hover { box-shadow: var(--shadow-raised); background: var(--color-background); }
.icon-btn lord-icon { width: 24px; height: 24px; }
.icon-btn .continuous-animation { animation: iconFloat 2s ease-in-out infinite; }
@keyframes iconFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
.cart-badge { position: relative; }
.cart-count { position: absolute; top: -2px; right: -2px; background: var(--color-error); color: var(--color-surface); font-size: 10px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: none; align-items: center; justify-content: center; z-index: 2; }
.cart-count.active { display: flex; }
.mobile-nav-toggle { display: none; background: transparent; border: none; cursor: pointer; padding: 8px; color: var(--color-text-primary); }
.mobile-nav-toggle svg { width: 24px; height: 24px; stroke: currentColor; }
.mobile-menu { display: none; position: fixed; top: 72px; left: 0; right: 0; bottom: 0; background: var(--color-surface); padding: var(--space-xl); z-index: 9999; overflow-y: auto; box-shadow: var(--shadow-raised-hover); border-top: 1px solid var(--color-border); }
.mobile-menu.active { display: block; }
.mobile-menu a { display: block; padding: var(--space-md) 0; font-size: 18px; font-weight: 500; color: var(--color-text-primary); border-bottom: 1px solid var(--color-border); }
.mobile-menu a:hover { color: var(--color-primary); }

/* ===== STICKY MINI CTA BAR ===== */
.sticky-cta-bar { position: fixed; top: 72px; left: 0; right: 0; z-index: 999; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 8px var(--space-lg); box-shadow: var(--shadow-raised); transform: translateY(-100%); opacity: 0; transition: transform var(--transition-base), opacity var(--transition-base); display: flex; align-items: center; justify-content: space-between; max-width: var(--container-max); margin: 0 auto; border-radius: 0 0 var(--radius-md) var(--radius-md); border: 1px solid var(--color-border); }
.sticky-cta-bar.visible { transform: translateY(0); opacity: 1; }
.sticky-cta-bar .logo-mark { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--color-text-primary); }
.sticky-cta-bar .logo-mark span { font-weight: 300; color: var(--color-text-light); }
.sticky-cta-bar .blob-btn { padding: 8px 20px; font-size: 13px; min-width: 100px; }

/* ===== PAGE HERO ===== */
.page-hero { background: var(--color-primary); color: white; padding: var(--space-5xl) 0 var(--space-4xl); text-align: center; position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity: 0.3; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero .display { margin-bottom: var(--space-md); }
.page-hero p { color: rgba(255,255,255,0.8); max-width: 600px; margin: 0 auto; font-size: 18px; }

/* ===== FILTER / SORT BAR ===== */
.filter-bar { background: var(--color-surface); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border); position: sticky; top: 72px; z-index: 100; }
.filter-bar .filter-container { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; justify-content: space-between; }
.filter-bar .filter-group { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.filter-bar select { padding: 6px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 13px; color: var(--color-text-primary); background: var(--color-surface); cursor: pointer; outline: none; transition: border-color var(--transition-fast); }
.filter-bar select:focus { border-color: var(--color-primary); }

/* ===== CATEGORY / SUBCATEGORY PILLS ===== */
.pill-row { display: flex; gap: var(--space-sm); flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pill-row::-webkit-scrollbar { display: none; }
.pill { flex-shrink: 0; padding: 8px 18px; border-radius: 999px; border: 1.5px solid var(--color-border); background: var(--color-surface); font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--color-text-primary); cursor: pointer; transition: all var(--transition-fast); text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; }
.pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pill.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-surface); }
.pill .pill-count { margin-left: 6px; opacity: 0.7; font-weight: 500; }

/* ===== BREADCRUMB ===== */
.breadcrumb { display: flex; align-items: center; gap: 8px; padding: var(--space-md) 0; font-size: 13px; color: var(--color-text-light); flex-wrap: wrap; }
.breadcrumb a { color: var(--color-text-secondary); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb .separator { color: var(--color-border); }

/* ===== SUCCESS MESSAGE ===== */
.success-msg { background: #4CAF50; color: white; padding: 10px 20px; border-radius: 6px; margin-bottom: 20px; text-align: center; animation: slideDown 0.5s ease; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }

/* ===== FOOTER ===== */
.site-footer { background: var(--color-text-primary); color: var(--color-surface); padding: var(--space-4xl) 0 var(--space-lg); margin-top: auto; }
.site-footer .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-xl); padding-bottom: var(--space-2xl); border-bottom: 1px solid rgba(255,255,255,0.12); }
.site-footer .footer-brand p { color: rgba(255,255,255,0.65); font-size: 14px; margin-top: var(--space-sm); line-height: 1.7; }
.site-footer h4 { color: var(--color-surface); font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-md); }
.site-footer ul { list-style: none; }
.site-footer ul li { margin-bottom: var(--space-sm); }
.site-footer a { color: rgba(255,255,255,0.7); font-size: 14px; transition: color var(--transition-fast); }
.site-footer a:hover { color: var(--color-surface); }
.footer-bottom { text-align: center; font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 500; padding-top: var(--space-lg); }
.footer-bottom .registered { font-size: 9px; vertical-align: super; }

/* ===== WHATSAPP FLOATING BUTTON ===== */
.whatsapp-float { position: fixed; bottom: 24px; right: 24px; z-index: 9999; width: 60px; height: 60px; border-radius: 50%; background: #25D366; color: white; border: none; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); cursor: pointer; transition: all var(--transition-base); display: flex; align-items: center; justify-content: center; animation: whatsappPulse 2s infinite; }
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(37, 211, 102, 0.5); }
.whatsapp-float svg { width: 32px; height: 32px; fill: white; }
@keyframes whatsappPulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }
.whatsapp-tooltip { position: absolute; right: 70px; top: 50%; transform: translateY(-50%); background: var(--color-surface); color: var(--color-text-primary); padding: 8px 16px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; white-space: nowrap; box-shadow: var(--shadow-raised); opacity: 0; pointer-events: none; transition: opacity var(--transition-base); border: 1px solid var(--color-border); }
.whatsapp-float:hover .whatsapp-tooltip { opacity: 1; }

/* ===== PRODUCT DETAIL PAGE ===== */
.product-section { padding: var(--space-2xl) 0 var(--space-4xl); }
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: start; }
.product-image-wrapper { position: relative; aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; background: #f2f2f2; box-shadow: var(--shadow-raised); border: 1px solid var(--color-border); }
.product-image-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.product-badges { position: absolute; top: var(--space-md); left: var(--space-md); display: flex; gap: var(--space-sm); z-index: 2; }
.product-badge { display: inline-block; padding: 5px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; color: var(--color-surface); background: var(--color-primary); text-transform: uppercase; letter-spacing: 0.05em; }
.product-badge-best-seller { background: var(--color-warning); }
.product-badge-new { background: var(--color-primary); }
.product-badge-sale { background: var(--color-secondary); }
.product-info .category-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary); margin-bottom: var(--space-sm); }
.product-info h1 { margin-bottom: var(--space-xs); }
.product-info .reference-name { font-size: 15px; font-style: italic; color: var(--color-text-light); margin-bottom: var(--space-md); }
.product-info .tagline { color: var(--color-text-secondary); font-size: 17px; margin-bottom: var(--space-md); }
.product-info .rating { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-md); }
.product-info .rating .stars { color: var(--color-warning); }
.product-info .rating .count { font-size: 14px; color: var(--color-text-secondary); }
.product-info .price { font-size: 28px; font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-lg); }
.product-info .price .original { font-size: 16px; color: var(--color-text-secondary); text-decoration: line-through; margin-left: var(--space-sm); font-weight: 400; }
.product-info .price.is-inquiry { font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); }
.stock-badge { display: inline-block; padding: 5px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-md); }
.stock-badge-out { background: #F1F2F4; color: #4B5563; }
.product-info .description { margin-bottom: var(--space-lg); color: var(--color-text-primary); line-height: 1.8; }
.product-info .missing-info-note { font-size: 13px; color: var(--color-text-light); font-style: italic; margin-bottom: var(--space-lg); padding: var(--space-sm) var(--space-md); background: var(--color-secondary-light); border-radius: var(--radius-sm); border: 1px dashed var(--color-border); }
.features-list { list-style: none; margin-bottom: var(--space-lg); }
.features-list li { padding: 8px 0 8px 28px; position: relative; color: var(--color-text-primary); border-bottom: 1px solid var(--color-border); }
.features-list li::before { content: '✓'; position: absolute; left: 0; color: var(--color-secondary); font-weight: 700; }
.specs-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-lg); }
.specs-table tr { border-bottom: 1px solid var(--color-border); }
.specs-table td { padding: 10px 0; font-size: 14px; }
.specs-table td:first-child { color: var(--color-text-secondary); font-weight: 600; width: 40%; }
.size-selector { margin-bottom: var(--space-lg); }
.size-selector label { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-sm); color: var(--color-text-secondary); }
.size-options { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.size-btn { padding: 10px 18px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); background: var(--color-surface); font-family: var(--font-body); font-weight: 600; cursor: pointer; transition: all var(--transition-fast); }
.size-btn:hover { border-color: var(--color-primary); }
.size-btn.selected { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-surface); }
.add-to-cart { display: flex; gap: var(--space-md); margin-bottom: var(--space-xl); }
.qty-selector { display: flex; align-items: center; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.qty-selector button { width: 40px; height: 48px; background: var(--color-background); border: none; font-size: 18px; cursor: pointer; color: var(--color-text-primary); }
.qty-selector input { width: 48px; height: 48px; border: none; text-align: center; font-family: var(--font-body); font-size: 16px; font-weight: 600; }
.add-to-cart .blob-btn { flex: 1; height: 48px; }
.trust-badges { display: flex; gap: var(--space-lg); flex-wrap: wrap; padding-top: var(--space-lg); border-top: 1px solid var(--color-border); }
.trust-badge { display: flex; align-items: center; gap: var(--space-sm); font-size: 13px; color: var(--color-text-secondary); }
.trust-badge .icon { font-size: 22px; }
.related-section { padding: var(--space-4xl) 0; background: var(--color-surface); }
.related-section h2 { text-align: center; }
.related-section .subtitle { text-align: center; color: var(--color-text-secondary); margin-bottom: var(--space-2xl); }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(3, 1fr); }
    .related-grid { grid-template-columns: repeat(3, 1fr); }
    .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
    .filter-bar { top: 72px; }
}
@media (max-width: 768px) {
    .nav-primary, .nav-actions .icon-btn:first-child { display: none; }
    .mobile-nav-toggle { display: block; }
    .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .related-grid { grid-template-columns: repeat(2, 1fr); }
    .product-layout { grid-template-columns: 1fr; }
    .filter-bar { position: static; }
    .filter-bar .filter-container { justify-content: flex-start; }
    .sticky-cta-bar { top: 0; }
    .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
    .product-card-actions .blob-btn { font-size: 12px; padding: 8px 10px; }
}
@media (max-width: 480px) {
    .grid-4, .grid-3, .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .related-grid { grid-template-columns: repeat(2, 1fr); }
    .product-card { min-height: 320px; }
    .product-card-title { font-size: 15px; min-height: 40px; }
    .product-card-body { padding: var(--space-sm) var(--space-md) var(--space-md); }
    .product-card-actions .blob-btn .btn-text { font-size: 11px; }
    .site-footer .footer-grid { grid-template-columns: 1fr; }
    .whatsapp-float { width: 52px; height: 52px; bottom: 16px; right: 16px; }
    .whatsapp-float svg { width: 28px; height: 28px; }
    .whatsapp-tooltip { display: none; }
    .add-to-cart { flex-direction: column; }
    .category-circle-image { width: 84px; height: 84px; }
}