/* =========================================================
           FIKFU VOLTAGE — storefront design tokens
           Premium streetwear / graphic tee aesthetic
           ========================================================= */
        :root {
            /* Brand */
            --fk-brand:        #FF2D2D;   /* FIKFU red — primary CTA */
            --fk-brand-hover:  #E5141A;
            --fk-brand-deep:   #B8000A;
            --fk-accent:       #FFE600;   /* Electric yellow — sale, highlights */
            --fk-electric:     #3D5AFE;   /* Secondary accent */

            /* Neutrals */
            --fk-ink:          #0A0A0A;   /* Primary text, dark bg */
            --fk-ink-soft:     #1A1A1A;
            --fk-ink-2:        #2B2B2E;
            --fk-muted:        #6B6B72;   /* Muted text */
            --fk-line:         #E6E4DE;   /* Default border */
            --fk-line-soft:    #F0EEE8;

            /* Surfaces */
            --fk-bone:         #F6F5F0;   /* Light page base */
            --fk-bone-2:       #EEEDE6;
            --fk-paper:        #FFFFFF;   /* Card surface */
            --fk-dark:         #0A0A0A;   /* Dark sections */
            --fk-dark-2:       #141418;

            /* Status */
            --fk-success:      #10B981;
            --fk-warning:      #F59E0B;
            --fk-error:        #EF4444;
            --fk-sale:         #FFE600;

            /* Legacy aliases (kept for back-compat with older classes) */
            --sf-primary:      var(--fk-brand);
            --sf-accent:       var(--fk-ink);
            --sf-bg:           var(--fk-bone);
            --sf-bg-deep:      var(--fk-bone-2);
            --sf-card:         var(--fk-paper);
            --sf-text:         var(--fk-ink);
            --sf-muted:        var(--fk-muted);
            --sf-border:       var(--fk-line);
            --sf-shadow:       0 1.2rem 2.6rem rgba(10, 10, 10, 0.08);

            /* Effects */
            --fk-shadow-sm:    0 0.3rem 0.8rem rgba(10, 10, 10, 0.06);
            --fk-shadow-md:    0 1rem 2.2rem rgba(10, 10, 10, 0.08);
            --fk-shadow-lg:    0 1.8rem 3.6rem rgba(10, 10, 10, 0.12);
            --fk-radius:       1rem;
            --fk-radius-lg:    1.4rem;

            /* Bootstrap overrides */
            --bs-primary:      var(--fk-brand);
            --bs-primary-rgb:  255, 45, 45;
            --bs-link-color:   var(--fk-ink);
            --bs-link-hover-color: var(--fk-brand);
            --bs-border-color: var(--fk-line);
            --bs-body-color:   var(--fk-ink);
            --bs-body-font-family: "Inter", system-ui, -apple-system, sans-serif;
        }

        * { -webkit-font-smoothing: antialiased; }

        html, body { background: var(--fk-bone); }

        body {
            min-height: 100vh;
            background:
                radial-gradient(circle at 85% -10%, rgba(255, 45, 45, 0.06), transparent 45%),
                radial-gradient(circle at -10% 10%, rgba(255, 230, 0, 0.08), transparent 40%),
                var(--fk-bone);
            color: var(--fk-ink);
            font-family: "Inter", system-ui, -apple-system, sans-serif;
            font-weight: 400;
            letter-spacing: -0.005em;
            display: flex;
            flex-direction: column;
        }

        /* Typography ------------------------------------------------ */
        h1, h2, h3, h4, h5, .display-brand {
            font-family: "Archivo Black", "Inter", sans-serif;
            font-weight: 900;
            letter-spacing: -0.025em;
            line-height: 1.02;
            text-transform: none;
            color: var(--fk-ink);
        }

        .display-1, .display-2, .display-3, .display-4, .display-5 {
            font-family: "Archivo Black", "Inter", sans-serif;
            font-weight: 900;
            letter-spacing: -0.035em;
            line-height: 0.95;
        }

        .eyebrow,
        .hero-badge,
        .brand-mark {
            font-family: "Inter", sans-serif;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            font-size: 0.74rem;
        }

        .muted-copy { color: var(--fk-muted); }

        /* Announcement bar ----------------------------------------- */
        .announcement-bar {
            background: linear-gradient(90deg, var(--fk-ink) 0%, #1a1a1a 50%, var(--fk-ink) 100%);
            color: #fff;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            font-size: 0.72rem;
            padding: 0.55rem 0;
            border-bottom: 2px solid var(--fk-brand);
            position: relative;
            overflow: hidden;
        }
        .announcement-bar .container { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
        .announcement-bar .pulse-dot {
            width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--fk-brand);
            box-shadow: 0 0 0 0 rgba(255, 45, 45, 0.7);
            animation: fkPulse 1.8s infinite;
            flex-shrink: 0;
        }
        /* Cycling message stage — fixed-height viewport with each slide
           absolutely positioned inside so the bar doesn't reflow as messages
           swap. Only one slide is visible at a time; others sit opacity:0. */
        .announcement-bar-stage {
            position: relative;
            height: 1em;
            min-width: 180px;
            flex: 1 1 0%;
            text-align: center;
        }
        .announcement-bar-slide {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transform: translateY(8px);
            transition: opacity 0.45s ease, transform 0.45s ease;
            white-space: nowrap;
            pointer-events: none;
        }
        .announcement-bar-slide.is-active {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        .announcement-bar-slide.is-leaving {
            opacity: 0;
            transform: translateY(-8px);
        }
        @keyframes fkPulse {
            0%   { box-shadow: 0 0 0 0 rgba(255, 45, 45, 0.7); }
            70%  { box-shadow: 0 0 0 8px rgba(255, 45, 45, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 45, 45, 0); }
        }
        @media (prefers-reduced-motion: reduce) {
            .announcement-bar-slide { transition: opacity 0.2s ease; transform: none; }
            .announcement-bar-slide.is-leaving { transform: none; }
            .announcement-bar .pulse-dot { animation: none; }
        }

        /* Navbar ---------------------------------------------------- */
        .navbar-shell {
            backdrop-filter: saturate(1.2) blur(14px);
            -webkit-backdrop-filter: saturate(1.2) blur(14px);
            background: rgba(246, 245, 240, 0.88);
            border-bottom: 1px solid var(--fk-line);
            box-shadow: 0 0.5rem 1.5rem rgba(10,10,10,0.03);
        }
        .navbar-shell .navbar-brand { gap: 0.2rem !important; }
        .brand-mark { color: var(--fk-ink); font-size: 1.15rem; letter-spacing: 0.22em; }
        .brand-mark-tag {
            color: var(--fk-muted);
            font-size: 0.62rem;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.18em;
        }
        .nav-link {
            color: var(--fk-ink) !important;
            font-weight: 600;
            font-size: 0.92rem;
            padding: 0.5rem 0.9rem !important;
            position: relative;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            left: 0.9rem; right: 0.9rem; bottom: 0.35rem;
            height: 2px;
            background: var(--fk-brand);
            transform: scaleX(0);
            transform-origin: left center;
            transition: transform 0.25s ease;
        }
        .nav-link.active::after,
        .nav-link:hover::after { transform: scaleX(1); }
        .nav-link.active,
        .nav-link:hover { color: var(--fk-brand) !important; }

        .nav-icon-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.5rem; height: 2.5rem;
            border-radius: 999px;
            border: 1px solid var(--fk-line);
            background: var(--fk-paper);
            color: var(--fk-ink);
            position: relative;
            transition: all 0.2s ease;
        }
        .nav-icon-link:hover { border-color: var(--fk-ink); color: var(--fk-ink); transform: translateY(-1px); }
        .nav-icon-link svg { width: 1.05rem; height: 1.05rem; }

        /* Buttons --------------------------------------------------- */
        .btn {
            font-family: "Inter", sans-serif;
            font-weight: 700;
            letter-spacing: 0.01em;
            border-radius: 999px;
            transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        }
        .btn-lg { padding: 0.85rem 1.6rem; font-size: 0.98rem; }

        .btn-brand {
            --bs-btn-color: #fff;
            --bs-btn-bg: var(--fk-brand);
            --bs-btn-border-color: var(--fk-brand);
            --bs-btn-hover-color: #fff;
            --bs-btn-hover-bg: var(--fk-brand-hover);
            --bs-btn-hover-border-color: var(--fk-brand-hover);
            --bs-btn-active-bg: var(--fk-brand-deep);
            --bs-btn-active-border-color: var(--fk-brand-deep);
            --bs-btn-disabled-bg: var(--fk-brand);
            --bs-btn-disabled-border-color: var(--fk-brand);
            box-shadow: 0 0.6rem 1.4rem rgba(255, 45, 45, 0.28);
        }
        .btn-brand:hover { transform: translateY(-1px); box-shadow: 0 0.9rem 1.9rem rgba(255, 45, 45, 0.35); }

        .btn-ink {
            --bs-btn-color: #fff;
            --bs-btn-bg: var(--fk-ink);
            --bs-btn-border-color: var(--fk-ink);
            --bs-btn-hover-color: #fff;
            --bs-btn-hover-bg: #000;
            --bs-btn-hover-border-color: #000;
        }

        .btn-outline-ink {
            --bs-btn-color: var(--fk-ink);
            --bs-btn-bg: transparent;
            --bs-btn-border-color: var(--fk-ink);
            --bs-btn-hover-color: #fff;
            --bs-btn-hover-bg: var(--fk-ink);
            --bs-btn-hover-border-color: var(--fk-ink);
            border-width: 2px;
        }

        .btn-soft {
            --bs-btn-color: var(--fk-ink);
            --bs-btn-bg: var(--fk-paper);
            --bs-btn-border-color: var(--fk-line);
            --bs-btn-hover-color: #fff;
            --bs-btn-hover-bg: var(--fk-ink);
            --bs-btn-hover-border-color: var(--fk-ink);
            border-width: 1px;
            box-shadow: var(--fk-shadow-sm);
        }

        .btn-product-view {
            --bs-btn-color: var(--fk-ink);
            --bs-btn-bg: var(--fk-paper);
            --bs-btn-border-color: var(--fk-line);
            --bs-btn-hover-color: #fff;
            --bs-btn-hover-bg: var(--fk-ink);
            --bs-btn-hover-border-color: var(--fk-ink);
            border-width: 1px;
        }

        /* Cards & surfaces ----------------------------------------- */
        .surface-editorial,
        .surface-clean,
        .surface-playful {
            background: var(--fk-paper);
        }

        .section-card,
        .product-card,
        .story-card,
        .policy-card {
            background: var(--fk-paper);
            border: 1px solid var(--fk-line);
            border-radius: var(--fk-radius-lg);
            box-shadow: var(--fk-shadow-sm);
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        }

        .product-card {
            overflow: hidden;
            position: relative;
        }
        .product-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--fk-shadow-lg);
            border-color: rgba(10,10,10,0.18);
        }

        /* Hero ------------------------------------------------------ */
        .hero-panel {
            position: relative;
            overflow: hidden;
            border-radius: var(--fk-radius-lg);
            background:
                radial-gradient(circle at 85% 10%, rgba(255, 45, 45, 0.25), transparent 50%),
                radial-gradient(circle at 10% 90%, rgba(255, 230, 0, 0.12), transparent 45%),
                linear-gradient(135deg, #0A0A0A 0%, #141418 55%, #1A1A1A 100%);
            color: #fff;
            border: 1px solid rgba(255,255,255,0.06);
            box-shadow: var(--fk-shadow-lg);
        }
        .hero-panel::before {
            content: '';
            position: absolute; inset: 0;
            background-image:
                repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 14px);
            pointer-events: none;
        }
        .hero-panel h1,
        .hero-panel h2,
        .hero-panel .display-brand { color: #fff; }
        .hero-panel .muted-copy,
        .hero-panel .text-white-50 { color: rgba(255,255,255,0.68) !important; }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.45rem 0.85rem;
            border-radius: 999px;
            background: var(--fk-brand);
            color: #fff;
            font-size: 0.7rem;
        }
        .hero-badge::before {
            content: '';
            width: 0.45rem; height: 0.45rem;
            border-radius: 999px;
            background: #fff;
        }

        .hero-product-preview {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.08);
            backdrop-filter: blur(8px);
            border-radius: var(--fk-radius);
        }

        /* Product media -------------------------------------------- */
        .product-media,
        .product-detail-media {
            position: relative;
            border-radius: var(--fk-radius);
            background:
                radial-gradient(circle at top, #FFFFFF, #F0EEE8 85%);
            border: 1px solid var(--fk-line);
            padding: 0;
            overflow: hidden;
        }
        .product-detail-media { padding: 0; }

        .product-card img,
        .hero-image,
        .product-detail-image,
        .product-card-image,
        .cart-item-image {
            aspect-ratio: 4 / 5;
            width: 100%;
            background:
                radial-gradient(circle at top, #FFFFFF, #EEEDE6);
        }
        .hero-image,
        .product-detail-image { object-fit: cover; border-radius: var(--fk-radius); }

        .product-video-player {
            width: 100%;
            border-radius: var(--fk-radius);
            background: #000;
        }

        /* Mobile product page order: image → picker/cart → extras */
        @media (max-width: 991.98px) {
            .product-detail-row {
                display: flex;
                flex-direction: column;
            }
            .product-col-media  { order: 1; }
            .product-col-buy    { order: 2; }
            .product-col-extras { order: 3; }
        }

        .product-card-image {
            display: block;
            object-fit: cover;
            object-position: center 22%;
            transition: transform 0.5s ease;
        }
        .product-card:hover .product-card-image { transform: scale(1.035); }

        .cart-item-thumb {
            border-radius: var(--fk-radius);
            background: #FFFFFF;
            border: 1px solid var(--fk-line);
            padding: 0.35rem;
            overflow: hidden;
        }
        .cart-item-image {
            display: block;
            object-fit: contain;
            object-position: center;
            border-radius: 0.75rem;
        }

        /* Zoom ------------------------------------------------------ */
        .zoom-trigger {
            position: absolute;
            top: 0.85rem; right: 0.85rem;
            z-index: 2;
            width: 2.35rem; height: 2.35rem;
            border: 1px solid var(--fk-line);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            color: var(--fk-ink);
            display: inline-flex; align-items: center; justify-content: center;
            box-shadow: var(--fk-shadow-md);
            transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
        }
        .zoom-trigger:hover {
            transform: scale(1.06);
            background: var(--fk-ink);
            color: #fff;
        }
        .zoom-trigger svg { width: 1rem; height: 1rem; }
        .zoom-modal .modal-content {
            border-radius: var(--fk-radius-lg);
            border: 0;
            overflow: hidden;
            background: #0A0A0A;
            color: #fff;
        }
        .zoom-modal .modal-header { border-bottom-color: rgba(255,255,255,0.10); }
        .zoom-modal-image-wrap { padding: 1rem 1rem 1.5rem; }
        .zoom-modal-image {
            display: block; width: 100%; max-height: 78vh;
            object-fit: contain; border-radius: 0.75rem;
            background: rgba(255,255,255,0.04);
        }

        /* Price & badges ------------------------------------------- */
        .fk-price {
            font-family: "Archivo Black", "Inter", sans-serif;
            font-size: 1.35rem;
            letter-spacing: -0.02em;
            color: var(--fk-ink);
        }
        .fk-price-lg {
            font-family: "Archivo Black", "Inter", sans-serif;
            font-size: 2rem;
            letter-spacing: -0.03em;
            color: var(--fk-ink);
        }

        .fk-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.3rem 0.65rem;
            border-radius: 999px;
            font-size: 0.68rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            line-height: 1;
        }
        .fk-badge-sale  { background: var(--fk-accent); color: var(--fk-ink); }
        .fk-badge-new   { background: var(--fk-ink); color: #fff; }
        .fk-badge-hot   { background: var(--fk-brand); color: #fff; }
        .fk-badge-soft  { background: var(--fk-bone-2); color: var(--fk-ink); }

        /* Pills / chips / tags ------------------------------------- */
        .stat-pill,
        .tag-chip {
            border: 1px solid var(--fk-line);
            background: var(--fk-paper);
            border-radius: 999px;
            padding: 0.55rem 0.95rem;
            font-size: 0.84rem;
            font-weight: 600;
            color: var(--fk-ink);
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
        }
        a.tag-chip {
            color: var(--fk-ink);
            text-decoration: none;
            transition: all 0.2s ease;
        }
        a.tag-chip:hover {
            background: var(--fk-ink);
            border-color: var(--fk-ink);
            color: #fff;
            transform: translateY(-1px);
        }

        .category-filter-link {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.32rem 0.7rem;
            border-radius: 999px;
            border: 1px solid var(--fk-ink);
            background: var(--fk-ink);
            color: #fff;
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-decoration: none;
            text-transform: uppercase;
            transition: all 0.2s ease;
        }
        .category-filter-link:hover {
            background: var(--fk-brand);
            border-color: var(--fk-brand);
            color: #fff;
        }

        /* Forms ----------------------------------------------------- */
        .form-control, .form-select {
            border-radius: 0.75rem;
            border: 1px solid var(--fk-line);
            padding: 0.7rem 0.9rem;
            font-weight: 500;
            background: var(--fk-paper);
        }
        .form-control:focus, .form-select:focus {
            border-color: var(--fk-ink);
            box-shadow: 0 0 0 3px rgba(10,10,10,0.08);
        }
        .form-label { font-weight: 600; font-size: 0.85rem; color: var(--fk-ink); }

        /* Variant chips -------------------------------------------- */
        .variant-chip {
            border: 1.5px solid var(--fk-line);
            background: var(--fk-paper);
            color: var(--fk-ink);
            border-radius: 0.75rem;
            padding: 0.65rem 0.95rem;
            font-size: 0.88rem;
            font-weight: 600;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.18s ease;
        }
        .variant-chip:hover { border-color: var(--fk-ink); transform: translateY(-1px); }
        .variant-chip.active {
            border-color: var(--fk-ink);
            background: var(--fk-ink);
            color: #fff;
        }
        .variant-chip.unavailable {
            opacity: 0.42;
            border-style: dashed;
            color: var(--fk-muted);
            background: var(--fk-paper);
        }
        .variant-chip:disabled { cursor: not-allowed; transform: none; }
        .variant-color-dot {
            width: 1rem; height: 1rem;
            border-radius: 999px;
            border: 1px solid rgba(10,10,10,0.2);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
            flex: 0 0 auto;
        }

        /* Footer ---------------------------------------------------- */
        .footer-shell {
            background: var(--fk-ink);
            color: rgba(255,255,255,0.82);
            position: relative;
            overflow: hidden;
        }
        .footer-shell::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--fk-brand) 0%, var(--fk-brand) 30%, var(--fk-accent) 30%, var(--fk-accent) 60%, #fff 60%, #fff 100%);
        }
        .footer-shell h2 { color: #fff; }
        .footer-link {
            color: rgba(255,255,255,0.7);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.2s ease;
        }
        .footer-link:hover { color: var(--fk-brand); }

        /* Trust strip ---------------------------------------------- */
        .trust-strip {
            background: var(--fk-ink);
            color: #fff;
            border-radius: var(--fk-radius);
            padding: 1.1rem 1.25rem;
            display: flex;
            align-items: center;
            gap: 1.1rem;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .trust-item {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            font-weight: 600;
            font-size: 0.88rem;
            letter-spacing: 0.01em;
        }
        .trust-item svg { width: 1.2rem; height: 1.2rem; color: var(--fk-accent); flex: 0 0 auto; }

        /* Alerts --------------------------------------------------- */
        .alert { border-radius: var(--fk-radius); border: 1px solid var(--fk-line); }

        /* Cart badge ----------------------------------------------- */
        .cart-badge {
            min-width: 1.2rem;
            background: var(--fk-brand) !important;
            color: #fff !important;
            font-size: 0.68rem;
            font-weight: 800;
            position: absolute;
            top: -4px; right: -4px;
            border: 2px solid var(--fk-bone);
        }

        /* Small polish --------------------------------------------- */
        a { color: var(--fk-ink); }
        a:hover { color: var(--fk-brand); }
        ::selection { background: var(--fk-accent); color: var(--fk-ink); }

        /* ── Tablet (< 992px) ───────────────────────────── */
        @media (max-width: 991.98px) {
            .hero-panel { padding: 2rem !important; }
            .display-2 { font-size: 2.6rem; }
            .display-3, .display-4 { font-size: 2.2rem; }
            .display-5 { font-size: 1.6rem; }
        }

        /* ── Mobile (< 576px) — 77% of users ─────────── */
        @media (max-width: 575.98px) {
            /* Typography: scale headings for 375px */
            .display-1 { font-size: 2rem; }
            .display-2 { font-size: 1.75rem; }
            .display-3 { font-size: 1.5rem; }
            .display-4 { font-size: 1.4rem; }
            .display-5 { font-size: 1.2rem; }
            h1 { font-size: 1.5rem; }
            h2 { font-size: 1.25rem; }
            .lead { font-size: 0.95rem; }
            .eyebrow { letter-spacing: 0.1em; font-size: 0.6rem; }

            /* Spacing: reduce padding to reclaim screen space */
            .hero-panel { padding: 1.25rem !important; }
            .container, .container-fluid { padding-left: 1rem; padding-right: 1rem; }
            .section-card, .policy-card { padding: 1rem !important; }
            .p-4 { padding: 1rem !important; }
            .p-lg-5 { padding: 1rem !important; }
            .gap-4 { gap: 0.75rem !important; }
            .gap-3 { gap: 0.65rem !important; }
            .mb-5 { margin-bottom: 2rem !important; }
            .mt-5 { margin-top: 2rem !important; }

            /* Touch targets: min 44px for all interactive elements */
            .zoom-trigger { width: 2.75rem; height: 2.75rem; }
            .zoom-trigger svg { width: 1.1rem; height: 1.1rem; }
            .category-filter-link { padding: 0.5rem 0.85rem; font-size: 0.72rem; min-height: 2.75rem; display: inline-flex; align-items: center; }
            .variant-chip { padding: 0.6rem 0.9rem; font-size: 0.85rem; min-height: 2.75rem; }
            .variant-color-chip { min-height: 2.75rem; }
            .form-control, .form-select { padding: 0.75rem 0.85rem; font-size: 1rem; min-height: 2.75rem; }
            .btn { min-height: 2.75rem; }
            .btn-sm { min-height: 2.25rem; padding: 0.4rem 0.75rem; }
            .btn-lg { padding: 0.75rem 1.2rem; font-size: 0.95rem; }

            /* Hero: fit buttons and content */
            .hero-panel .d-flex.gap-3 { gap: 0.5rem !important; }
            .hero-panel .btn-lg { width: 100%; }

            /* Trust strip: stack vertically */
            .trust-strip { flex-direction: column; gap: 0.5rem !important; align-items: flex-start !important; }
            .trust-strip > span { font-size: 0.78rem; }

            /* Product page: tighter layout */
            .product-detail-media { padding: 0 !important; }
            .fk-price-lg { font-size: 1.5rem; }

            /* Cart: better stacking */
            .cart-item-thumb { max-width: 100px; }

            /* Footer: reduce spacing */
            footer .row { gap: 1rem !important; }
            footer .col-sm-6 { padding-bottom: 0.5rem; }

            /* Announcement bar: constrain */
            .announcement-bar-stage { min-width: 140px; font-size: 0.72rem; }

            /* Scroll-to-top: iPhone safe area */
            .fk-scroll-top { right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); width: 48px; height: 48px; }
            .fk-scroll-top svg { width: 20px; height: 20px; }

            /* Product video: constrain height */
            .product-video-player { max-height: 375px; }

            /* Product cards: compact for 2-column mobile grid */
            .product-card .p-3 { padding: 0.65rem !important; }
            .product-card h3.h5 { font-size: 0.78rem; line-height: 1.3; }
            .product-card .small { font-size: 0.7rem; }
            .product-card .btn-sm { font-size: 0.7rem; padding: 0.35rem 0.6rem; }
            .product-card .category-filter-link { font-size: 0.6rem; padding: 0.25rem 0.5rem; min-height: unset; }
            .product-card:hover { transform: none; } /* no hover lift on mobile */

            /* Related products: 2-column on mobile */
            .related-products-grid .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
        }

        /* Global toast / flash popup ------------------------------- */
        .fk-toast-layer {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            z-index: 1090;
            padding: 1rem;
        }
        .fk-toast {
            pointer-events: auto;
            display: inline-flex;
            align-items: center;
            gap: 0.9rem;
            padding: 1.05rem 1.5rem 1.05rem 1.1rem;
            background: var(--fk-ink);
            color: #fff;
            border-radius: 1rem;
            box-shadow: 0 2.2rem 4.5rem rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255,255,255,0.06);
            font-family: "Inter", sans-serif;
            font-weight: 600;
            font-size: 0.95rem;
            line-height: 1.35;
            min-width: 240px;
            max-width: min(440px, calc(100vw - 2rem));
            opacity: 0;
            transform: scale(0.9) translateY(10px);
            transition: opacity 0.22s ease, transform 0.32s cubic-bezier(.2,.9,.3,1.2);
        }
        .fk-toast.visible { opacity: 1; transform: scale(1) translateY(0); }
        .fk-toast.leaving { opacity: 0; transform: scale(0.95) translateY(-6px); }
        .fk-toast-icon {
            width: 2.15rem;
            height: 2.15rem;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            font-weight: 900;
            font-size: 1.1rem;
            line-height: 1;
        }
        .fk-toast.success .fk-toast-icon { background: #10B981; color: #fff; }
        .fk-toast.error   .fk-toast-icon { background: var(--fk-brand); color: #fff; }
        .fk-toast.info    .fk-toast-icon { background: var(--fk-accent); color: var(--fk-ink); }
        .fk-toast-body { flex: 1; word-wrap: break-word; }
        @media (prefers-reduced-motion: reduce) {
            .fk-toast { transition: opacity 0.2s ease; transform: none; }
            .fk-toast.visible { transform: none; }
        }

        /* --- Social share buttons -------------------------------------- */
        .fk-share-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid var(--fk-line, #e5e4df);
            background: #fff;
            color: var(--fk-ink, #0A0A0A);
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
            padding: 0;
        }
        .fk-share-btn:hover,
        .fk-share-btn:focus-visible {
            background: var(--fk-ink, #0A0A0A);
            border-color: var(--fk-ink, #0A0A0A);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(10, 10, 10, 0.18);
            outline: none;
        }

        /* --- Sale badge for product cards ------------------------------ */
        .fk-sale-badge {
            position: absolute;
            top: 0.75rem;
            left: 0.75rem;
            z-index: 3;
            background: var(--fk-brand, #FF2D2D);
            color: #fff;
            font-family: 'Archivo Black', sans-serif;
            font-size: 0.7rem;
            letter-spacing: 0.08em;
            padding: 0.35rem 0.6rem;
            border-radius: 999px;
            border: 2px solid var(--fk-ink, #0A0A0A);
            box-shadow: 0 4px 12px rgba(255, 45, 45, 0.35);
            text-transform: uppercase;
            pointer-events: none;
        }
        .product-media { position: relative; }

        /* --- Scroll-to-top button -------------------------------------- */
        .fk-scroll-top {
            position: fixed;
            right: 1.5rem;
            bottom: 1.5rem;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            border: 3px solid var(--fk-ink, #0A0A0A);
            background: var(--fk-brand, #FF2D2D);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 1040;
            opacity: 0;
            transform: translateY(24px) scale(0.8);
            pointer-events: none;
            box-shadow: 0 10px 28px rgba(255, 45, 45, 0.38), 0 4px 10px rgba(10, 10, 10, 0.22);
            transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                        opacity 0.25s ease,
                        background-color 0.2s ease,
                        box-shadow 0.2s ease;
        }
        .fk-scroll-top.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
            animation: fkScrollTopFloat 3.4s ease-in-out infinite;
        }
        .fk-scroll-top:hover,
        .fk-scroll-top:focus-visible {
            background: var(--fk-accent, #FFE600);
            color: var(--fk-ink, #0A0A0A);
            transform: translateY(-4px) scale(1.06);
            box-shadow: 0 16px 34px rgba(255, 230, 0, 0.45), 0 6px 14px rgba(10, 10, 10, 0.28);
            outline: none;
            animation: none;
        }
        .fk-scroll-top:active { transform: translateY(0) scale(0.94); }
        .fk-scroll-top svg { width: 24px; height: 24px; stroke-width: 3; }
        .fk-scroll-top-ring {
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            pointer-events: none;
            background: conic-gradient(var(--fk-accent, #FFE600) calc(var(--fk-scroll-progress, 0) * 1%), rgba(255,255,255,0) 0);
            -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%);
                    mask: radial-gradient(circle, transparent 52%, #000 54%);
            opacity: 0.85;
        }
        @keyframes fkScrollTopFloat {
            0%, 100% { transform: translateY(0) scale(1); }
            50%      { transform: translateY(-4px) scale(1); }
        }
        @media (prefers-reduced-motion: reduce) {
            .fk-scroll-top { transition: opacity 0.2s ease; }
            .fk-scroll-top.visible { animation: none; transform: none; }
            .fk-scroll-top:hover { transform: none; }
        }
        @media (max-width: 575px) {
            .fk-scroll-top { right: 1rem; bottom: 1rem; width: 50px; height: 50px; }
            .fk-scroll-top svg { width: 22px; height: 22px; }
        }