/* =========================================================
   CANDELZE - DARK THEME STYLE
   Black background, white text
   Black header/footer with yellow text
========================================================= */

/* ---------- Base ---------- */
:root {
    --bg: #000000;
    --ink: #ffffff;
    --accent: #7c3aed;
    --highlight: #facc15;
    --radius: 14px;
}
/* --- Floating WhatsApp icon (always visible, small, fixed right side) --- */
.whatsapp-float {
    position: fixed;
    top: 50%; /* vertical center of screen */
    right: 12px; /* stick close to right edge */
    transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1000;
    width: 48px; /* small size */
    height: 48px;
    cursor: pointer;
}

    .whatsapp-float img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        opacity: 0.75; /* slightly transparent */
        transition: transform 0.25s ease, opacity 0.25s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    }

        .whatsapp-float img:hover {
            opacity: 1;
            transform: scale(1.15);
        }
/* --- Floating Instagram icon (same size & style as WhatsApp) --- */
.instagram-float {
    position: fixed;
    top: 58%; /* slightly below WhatsApp */
    right: 12px;
    transform: translateY(-50%);
    z-index: 999;
    width: 48px;
    height: 48px;
    cursor: pointer;
}

    .instagram-float img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        opacity: 0.75;
        transition: transform 0.25s ease, opacity 0.25s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    }

        .instagram-float img:hover {
            opacity: 1;
            transform: scale(1.15);
        }

@font-face {
    font-family: 'Dream Avenue';
    src: url('fonts/DreamAvenue.ttf') format('truetype');
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: 'Meiryo', 'Segoe UI', sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
}

/* ---------- Header ---------- */
.site-header {
    background: #000;
    color: var(--highlight);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    
}

.brand {
    display: flex;
    flex-direction: column; /* stack vertically */
    align-items: flex-start; /* keep aligned to left */
    gap: 4px; /* small space between logo and phone */
}

    .brand .logo-text {
        font-size: 42px;
        font-weight: 800;
        color: #facc15; /* yellow */
        font-family: 'Dream Avenue', cursive, sans-serif;
        text-shadow: 0 0 8px rgba(255, 255, 0, 0.3);
        text-decoration: none;
    }

        .brand .logo-text:hover {
            color: #fde047;
            text-shadow: 0 0 12px rgba(255, 255, 0, 0.5);
        }

   

.actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

    .actions input[type="search"],
    .actions select {
        background: #111;
        color: #fff;
        border: 1px solid #333;
        padding: 8px 10px;
        border-radius: var(--radius);
    }

.cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 20px;
    background: #111; /* black */
    color: #facc15; /* yellow */
    font-weight: 700;
    border: 1px solid rgba(255,255,255,.15);
    text-decoration: none;
    cursor: pointer;
    transition: all .25s ease;
}


.cart-count {
    background: #e11d48;
    color: #fff;
    min-width: 18px;
    height: 18px;
    font-size: 12px;
    line-height: 18px;
    border-radius: 50%;
    padding: 0 5px;
    margin-left: 4px;
}

/* ---------- Logo ---------- */
.logo-text {
    font-size: 42px;
    font-weight: 800;
    color: var(--highlight);
    letter-spacing: 1px;
    font-family: 'Dream Avenue', cursive, sans-serif;
    text-shadow: 0 0 8px rgba(255, 255, 0, 0.3);
    text-decoration: none;
}

    .logo-text:hover {
        color: #fde047;
        text-shadow: 0 0 12px rgba(255, 255, 0, 0.5);
    }

/* --- Tabs (black pills w/ yellow text; hover invert) --- */
.category-nav {
    display: flex;
    justify-content: center;
    margin: 40px auto 20px;
}

    .category-nav .tabs {
        list-style: none;
        display: flex;
        gap: 14px;
        padding: 0;
        margin: 0;
        flex-wrap: wrap;
    }

    /* pill */
    .category-nav .tab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 22px;
        border-radius: 20px;
        background: var(--highlight);
        color: #111;
        font-weight: 700;
        text-decoration: none;
        border: 1px solid rgba(255,255,255,.15);
        transition: all .2s ease;
    }

        .category-nav .tab:hover {
            background: #111;
            color: var(--highlight);
            transform: translateY(-2px);
        }
        /* ===== Cart — make it match category pills ===== */

/* Make product page Add to Cart match card buttons */
.product-detail .add-to-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 20px;
    background: #111;
    color: #facc15;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.25s ease;
    cursor: pointer;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .product-detail .add-to-cart:hover {
        background: #facc15;
        color: #111;
        transform: translateY(-2px);
    }



/* ===== Hero Banner ===== */
.hero {
    position: relative;
    margin: 14px auto 24px;
    max-width: 1200px;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

    /* keep a nice, responsive aspect ratio (16:9) */
    .hero::before {
        content: "";
        display: block;
        padding-top: 56.25%;
    }

.hero-track {
    position: absolute;
    inset: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    transition: transform .6s ease;
}

.hero-slide {
    position: relative;
}

    .hero-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Controls */
.hero-btn {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 2;
    border: none;
    background: rgba(0,0,0,.45);
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    font-size: 28px;
    line-height: 42px;
    text-align: center;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease;
}

    .hero-btn:hover {
        background: rgba(0,0,0,.65);
    }

    .hero-btn:active {
        transform: translateY(-50%) scale(.97);
    }

    .hero-btn.prev {
        left: 10px;
    }

    .hero-btn.next {
        right: 10px;
    }

/* Dots */
.hero-dots {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translate(0, -50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

    .hero-dots button {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        border: 0;
        background: rgba(255,255,255,.45);
        cursor: pointer;
    }

        .hero-dots button[aria-selected="true"] {
            background: #fff;
        }

/* Respect dark theme if you have one */
@media (hover: none) {
    .hero-btn {
        display: none;
    }
    /* hide arrows on touch devices if you prefer */
}

/* Hide extra actions if they still exist in HTML */
#cartCopy,
#emailCheckout { display: none !important; }

/* Cart header + totals */
.cart-page h2 { color: var(--highlight); margin: 8px 0 12px; }
.cart-total { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.cart-total strong { color: #fff; font-weight: 800; }

/* Cart item row */
.cart-item{
  background:#111;border:1px solid #333;border-radius:var(--radius);
  padding:12px;display:grid;grid-template-columns:60px 1fr auto auto;gap:12px;align-items:center
}
.cart-item .ci-img{width:56px;height:56px;object-fit:contain;border-radius:8px;background:#0f0f0f}
.cart-item .ci-name{font-weight:700;color:#fff}
.cart-item .ci-price{color:#fff}

/* Re-usable pill (same as category tab) */
.cart-pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 18px;border-radius:20px;background:#111;color:var(--highlight);
  font-weight:700;text-decoration:none;border:1px solid rgba(255,255,255,.15);
  transition:all .2s ease; cursor:pointer
}
.cart-pill:hover{ background:var(--highlight); color:#111; transform:translateY(-2px) }

/* Apply pill to cart page buttons */
.cart-actions .btn,
#cartClear,
#waCheckout,
.ci-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 20px;
    background: #111;
    color: var(--highlight);
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.15);
    transition: all .2s ease;
    cursor: pointer;
}

    .cart-actions .btn:hover,
    #cartClear:hover,
    #waCheckout:hover,
    .ci-del:hover {
        background: var(--highlight);
        color: #111;
        transform: translateY(-2px);
    }
/* Back button (same pill as tabs) */
.tab,
.back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 20px;
    background: #111;
    color: #facc15;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.15);
    transition: all .25s ease;
}

    .tab:hover,
    .back-btn:hover {
        background: #facc15;
        color: #111;
        transform: translateY(-2px);
    }
.desc {
    display: none !important;
}
/* Quantity controls (smaller pills) */
.ci-qty .btn,
.qty-inc,.qty-dec{
  all:unset; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:999px; background:#111; color:var(--highlight);
  border:1px solid rgba(255,255,255,.15); font-weight:900; line-height:1; cursor:pointer;
  transition:all .2s ease;
}
.ci-qty .btn:hover,
.qty-inc:hover,.qty-dec:hover{ background:var(--highlight); color:#111; transform:translateY(-1px) }
.ci-qty span{ min-width:24px; text-align:center; font-weight:700; }

/* Cart foot layout on small screens */
.cart-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.cart-actions{ display:flex; gap:8px; flex-wrap:wrap }

@media (max-width:700px){
  .cart-item{ grid-template-columns:50px 1fr auto; grid-auto-rows:auto }
  .ci-qty{ order:3 }
}

    /* dropdown container */
    .category-nav .has-sub {
        position: relative;
    }

    /* Our Products dropdown: 2 rows × 5 columns */
    .category-nav .has-sub {
        position: relative;
    }

.category-nav .sub {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    display: none; /* hidden by default */
    padding: 12px;
    background: rgba(0, 0, 0, .92);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 16px;
    z-index: 40;
    grid-template-columns: repeat(4, minmax(180px, 1fr)); /* 4 columns × 2 rows = 8 items */
    grid-auto-rows: 44px;
    gap: 10px 12px;
    width: max-content;
}

    /* ✅ Only visible while hovering over parent */
.category-nav .has-sub:hover > .sub {
    display: grid;
    /* Important: delay visibility change when hiding */
    transition: opacity .20s ease, transform .20s ease, visibility 0s linear 1s; /* wait 1s before applying visibility:hidden */
}

    .category-nav .sub li {
        list-style: none;
    }

    .category-nav .sub a {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #111; /* black pill */
        color: #facc15; /* yellow text */
        text-decoration: none;
        padding: 10px 14px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, .12);
        font-weight: 600;
        transition: all .2s ease;
        white-space: nowrap;
    }

        .category-nav .sub a:hover {
            background: #facc15;
            color: #111;
            transform: translateY(-1px);
        }
/* === DESKTOP DROPDOWN — delayed hide (FINAL override) === */
@media (min-width: 769px) {
    /* Make sure the host can position the submenu */
    .category-nav .has-sub {
        position: relative;
    }

    /* Base state: keep submenu in layout; hidden via opacity/visibility */
    .category-nav .sub {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(180px, 1fr)); /* match 4 columns */
        grid-auto-rows: 44px;
        gap: 10px 12px;
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        transform: translate(-50%, 6px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        /* ⏱ change the 1s to your preferred delay */
        transition: opacity .20s ease, transform .20s ease, visibility 0s linear 1s; /* wait 1s before applying visibility:hidden */
    }

    /* Visible on hover/focus — show immediately (no delay when opening) */
    .category-nav .has-sub:hover > .sub,
    .category-nav .has-sub:focus-within > .sub {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0);
        transition: opacity .20s ease, transform .20s ease, visibility 0s;
    }

    /* Hover bridge so moving from tab down to menu doesn't flicker */
    .category-nav .has-sub::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 14px; /* transparent buffer area */
    }
}

/* Responsive: adjust columns */
@media (max-width: 900px) {
    .category-nav .sub {
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }
}

@media (max-width: 600px) {
    .category-nav .sub {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
}

/* ---------- Product Grid ---------- */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.card {
    background: #111;
    border: 1px solid #333;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(255,255,255,0.05);
    transition: transform .1s ease, box-shadow .2s ease;
}

    .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(255,255,255,0.1);
    }

.thumb {
    background: #0f0f0f;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 240px;
    overflow: hidden;
}

    .thumb img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

.body {
    padding: 14px;
}

.name {
    
    margin: 0 0 6px;
    font-size: 14px;
    color: #fff;
}

.desc {
    margin: 0 0 10px;
    font-size: 14px;
    color: #ccc;
}

.meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #aaa;
}

.price {
    font-weight: bold;
    color: #fff;
}

/* ---------- About Section ---------- */
.about {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
    text-align: left;
}

    .about h2 {
        color: var(--highlight);
        font-size: 32px;
        text-align: center;
        margin-bottom: 16px;
        letter-spacing: 1px;
    }

    .about p1 {
        display: block;
        text-align: center;
        font-size: 18px;
        line-height: 1.6;
        margin: 10px auto 20px;
        max-width: 700px;
        color: #fff;
    }

    .about p {
        font-size: 16px;
        margin: 8px 0 16px;
        text-align: left;
        color: #ddd;
    }

    .about ul {
        list-style-type: none;
        padding-left: 0;
    }

        .about ul li {
            margin: 6px 0;
            padding-left: 20px;
            position: relative;
            color: #fff;
        }

            .about ul li::before {
                content: "•";
                position: absolute;
                left: 0;
                color: var(--highlight);
            }
.card .btn.add-to-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 20px; /* same pill shape as category */
    background: #111; /* black background */
    color: #facc15; /* yellow text */
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.25s ease;
    cursor: pointer;
    width: 100%; /* optional: make full width inside card */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    /* Hover effect: invert colors */
    .card .btn.add-to-cart:hover {
        background: #facc15; /* yellow background */
        color: #111; /* black text */
        transform: translateY(-2px);
    }
.card .card-actions {
    margin-top: 10px;
    text-align: center;
}
/* ---------- Cart Page ---------- */
.wrap {
    max-width: 900px;
    margin: 20px auto;
    padding: 0 16px;
    color: #fff;
}

.cart-item {
    background: #111;
    border: 1px solid #333;
    border-radius: var(--radius);
    padding: 10px;
    display: grid;
    grid-template-columns: 60px 1fr auto auto;
    gap: 10px;
    align-items: center;
}

.ci-name,
.ci-price {
    color: #fff;
}

/* ---------- Footer ---------- */
.site-footer {
    background: #000;
    color: var(--highlight);
    text-align: center;
    padding: 24px 10px;
    
    font-size: 14px;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .site-header {
        flex-direction: column;
        align-items: flex-start;
    }
    

    .actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 8px;
    }

    .grid {
        padding: 10px;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .thumb {
        height: 180px;
    }
    /* DESKTOP ONLY: delayed hide on hover-out for Our Products */
    @media (min-width: 769px) {
        .category-nav .has-sub {
            position: relative;
        }

            /* keep it in the layout so we can animate; start hidden */
            .category-nav .has-sub > .sub {
                display: grid; /* was: none */
                grid-template-columns: repeat(5, minmax(160px,1fr));
                grid-auto-rows: 44px;
                gap: 10px 12px;
                position: absolute;
                top: calc(100% + 8px);
                left: 50%;
                transform: translate(-50%, 6px); /* slight drop */
                background: rgba(0,0,0,.92);
                border: 1px solid rgba(255,255,255,.15);
                border-radius: 16px;
                padding: 12px;
                width: max-content;
                z-index: 40;
                /* hidden state */
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                /* Delay hiding by 1 second */
                transition: opacity 0.6s ease, transform 0.3s ease, visibility 0s linear 1s;
            }

                
                

            /* show immediately on hover/focus, allow clicks */
            .category-nav .has-sub:hover > .sub,
            .category-nav .has-sub:focus-within > .sub {
                opacity: 1;
                visibility: visible;
                transform: translate(-50%, 0);
                pointer-events: auto;
                transition: opacity .20s ease, transform .20s ease, visibility 0s; /* no delay when showing */
            }


    }


    /* ===== Our Products — mobile bottom-sheet ===== */
    @media (max-width: 768px) {
        .category-nav {
            margin: 16px auto 8px;
        }

            .category-nav .tabs {
                justify-content: center;
            }

            /* host must not clip the sheet */
            .category-nav .has-sub {
                position: static;
            }

            /* Backdrop */
            .category-nav .sub-backdrop {
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,.55);
                backdrop-filter: blur(2px);
                opacity: 0;
                visibility: hidden;
                transition: opacity .2s ease, visibility .2s ease;
                z-index: 1000;
            }

            .category-nav .has-sub.open .sub-backdrop {
                opacity: 1;
                visibility: visible;
            }

            /* Sheet */
            .category-nav .sub {
                display: grid !important; /* override desktop display:none */
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                grid-template-columns: 1fr 1fr; /* 2 columns on phones */
                gap: 10px;
                padding: 16px;
                background: #111;
                border-top-left-radius: 18px;
                border-top-right-radius: 18px;
                border: 1px solid rgba(255,255,255,.15);
                transform: translateY(100%); /* hidden by default */
                opacity: 0;
                visibility: hidden;
                transition: transform .25s ease, opacity .25s ease, visibility .25s;
                z-index: 1001;
                max-height: 70vh;
                overflow: auto;
            }

            .category-nav .has-sub.open .sub {
                transform: translateY(0);
                opacity: 1;
                visibility: visible;
            }

            .category-nav .sub a {
                display: block;
                text-decoration: none;
                background: #0f0f0f;
                color: #facc15;
                border: 1px solid rgba(255,255,255,.12);
                border-radius: 14px;
                padding: 12px 14px;
                text-align: center;
                font-weight: 700;
            }

                .category-nav .sub a:hover {
                    background: #facc15;
                    color: #111;
                }
    }

    /* FORCE-OPEN mobile sheet when JS adds .force-open (works even if media CSS fails) */
    .category-nav .sub-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.55);
        backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s ease;
        z-index: 1000;
    }

    /* visible when host has .open (JS toggles it) */
    .category-nav .has-sub.open .sub-backdrop {
        opacity: 1;
        visibility: visible;
    }

    /* bottom sheet layout when JS adds .force-open */
    .category-nav .sub.force-open {
        display: grid !important; /* override any display:none */
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        grid-template-columns: 1fr 1fr; /* 2 columns on phones */
        gap: 10px;
        padding: 16px;
        background: #111;
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
        border: 1px solid rgba(255,255,255,.15);
        max-height: 70vh;
        overflow: auto;
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 1001;
    }

        /* submenu item look */
        .category-nav .sub.force-open a {
            display: block;
            text-decoration: none;
            background: #0f0f0f;
            color: #facc15;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 14px;
            padding: 12px 14px;
            text-align: center;
            font-weight: 700;
        }

            .category-nav .sub.force-open a:hover {
                background: #facc15;
                color: #111;
            }
    /* ===== Mobile sheet for “Our Products” (independent of the old submenu CSS) ===== */
    .mobile-sheet {
        position: fixed;
        inset: 0;
        display: none;
        background: rgba(0,0,0,.55);
        backdrop-filter: blur(2px);
        z-index: 9999;
    }

        .mobile-sheet.open {
            display: block;
        }

    .mobile-sheet__panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: #111;
        color: #facc15;
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
        border: 1px solid rgba(255,255,255,.15);
        padding: 16px;
        max-height: 75vh;
        overflow: auto;
        box-shadow: 0 -12px 30px rgba(0,0,0,.35);
        animation: sheetUp .18s ease-out;
    }

    @keyframes sheetUp {
        from {
            transform: translateY(14px);
            opacity: .0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .mobile-sheet__grid {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 10px;
    }

        /* submenu pills inside the sheet */
        .mobile-sheet__grid a {
            display: block;
            text-align: center;
            text-decoration: none;
            font-weight: 700;
            background: #0f0f0f;
            color: #facc15;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 14px;
            padding: 12px 14px;
        }

            .mobile-sheet__grid a:hover {
                background: #facc15;
                color: #111;
            }

    /* (Optional) slightly wider grid on tablets */
    @media (min-width:560px) and (max-width:768px) {
        .mobile-sheet__grid {
            grid-template-columns: repeat(3,1fr);
        }
    }

    /* ============================
   MOBILE: Match Search + Sort width to Home button width
   ============================ */
    @media (max-width: 768px) {

        /* 1. Define the button width (match HOME button) */
        :root {
            --mobile-btn-width: 170px; /* adjust to your exact HOME width */
        }

        /* 2. Search input */
        .actions .search input[type="search"] {
            width: var(--mobile-btn-width);
            max-width: var(--mobile-btn-width);
            min-width: var(--mobile-btn-width);
            margin: 0 auto;
            display: block;
            text-align: left;
        }

            .actions .search input[type="search"]::placeholder {
                text-align: left;
            }

        /* 3. Sort dropdown */
        #sort {
            width: calc(var(--mobile-btn-width) * 0.87);
            max-width: calc(var(--mobile-btn-width) * 0.87);
            min-width: calc(var(--mobile-btn-width) * 0.87);
            margin: 10px auto 0 auto;
            display: block;
        }

        /* If label is used ("Sort By:") center it too */
        .sort-label {
            width: var(--mobile-btn-width);
            max-width: var(--mobile-btn-width);
            margin: 10px auto 0 auto;
            text-align: center;
            display: block;
        }
    }

    /* =========================================================
   MOBILE: put Search + Sort + Cart on a single row
   (Assumes header markup: .actions contains #q, #sort, .cart-btn)
   ========================================================= */
    @media (max-width: 768px) {
        /* make the controls share one row */
        .site-header {
            padding-bottom: 10px;
        }

        .actions {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            margin-top: 10px;
        }

            /* search grows to fill remaining space */
            .actions input[type="search"] {
                flex: 1 1 auto;
                min-width: 0; /* allow shrinking */
                height: 42px;
                padding: 8px 12px;
                font-size: 14px;
            }

            /* sort: fixed fraction width so row stays tidy */
            .actions select {
                flex: 0 0 38%;
                min-width: 120px;
                height: 42px;
                padding: 8px 10px;
                font-size: 14px;
            }

            /* cart: compact square pill, centered icon; badge stays readable */
            .actions .cart-btn {
                flex: 0 0 56px; /* fixed width for the cart button */
                height: 42px;
                padding: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 12px;
                position: relative;
                white-space: nowrap;
            }

            .actions .cart-count {
                position: absolute;
                top: -6px;
                right: -6px;
                min-width: 18px;
                height: 18px;
                line-height: 18px;
                font-size: 12px;
                padding: 0 5px;
                border: 2px solid #000; /* black ring for dark header */
                border-radius: 50%;
            }
    }

    /* Extra-tight phones (≤380px): give Sort a bit less room */
    @media (max-width: 380px) {
        .actions select {
            flex-basis: 34%;
            min-width: 105px;
        }

        .actions .cart-btn {
            flex-basis: 50px;
            height: 40px;
        }

        .actions input[type="search"] {
            height: 40px;
        }
    }

    /* =========================================================
  /* --- Our Products: mobile bottom-sheet with 8 equal tabs --- */
    @media (max-width: 768px) {
        /* host shouldn't clip the sheet */
        .category-nav .has-sub {
            position: static !important;
        }

            /* backdrop behind the sheet */
            .category-nav .has-sub > .sub-backdrop {
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,.55);
                opacity: 0;
                visibility: hidden;
                transition: opacity .2s ease, visibility .2s ease;
                z-index: 1000;
            }

            .category-nav .has-sub.open > .sub-backdrop {
                opacity: 1;
                visibility: visible;
            }

            /* the sheet itself (hidden by default) */
            .category-nav .has-sub > .sub {
                display: grid !important; /* grid so all tabs size evenly */
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                background: #111;
                border-top-left-radius: 18px;
                border-top-right-radius: 18px;
                border: 1px solid rgba(255,255,255,.15);
                padding: 16px;
                max-height: 70vh;
                overflow: auto;
                grid-template-columns: repeat(2, 1fr); /* 2 columns on phones */
                gap: 12px;
                transform: translateY(100%);
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transition: transform .25s ease, opacity .25s ease, visibility .25s;
                z-index: 1001;
            }

            /* show when .open is on the host */
            .category-nav .has-sub.open > .sub {
                transform: translateY(0);
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
            }

        /* equal-looking tab buttons */
        .category-nav .sub li {
            list-style: none;
        }

        .category-nav .sub a {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 56px; /* same height for all */
            background: #0f0f0f;
            color: #facc15;
            text-decoration: none;
            font-weight: 700;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 14px;
            text-align: center;
            white-space: normal;
            line-height: 1.2;
        }

            .category-nav .sub a:hover {
                background: #facc15;
                color: #111;
            }
    }
/* ================================
   DESKTOP PRODUCT-CARD GRID FIX
   ================================ */
@media (min-width: 769px) {

    /* Turn each card into a 4-row table */
    .card {
        display: grid !important;
        grid-template-rows:
            240px       /* Image */
            66px        /* Name (3 lines) */
            auto        /* Price + SKU */
            60px;       /* Add to Cart button */
        height: 100%;
    }

    /* --- Row 1: Image --- */
    .card .thumb {
        height: 240px !important;
        overflow: hidden;
    }

    /* --- Row 2: Name → Exactly 3 lines --- */
    .card .name {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 66px;
        max-height: 66px;
        line-height: 1.2;
        margin: 8px 0;
    }

    /* Remove description completely on desktop */
    .card .desc {
        display: none !important;
    }

    /* --- Row 3: Price + SKU --- */
    .card .meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 6px 0 10px 0;
    }

    .card .sku {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* --- Row 4: Add to Cart, pinned bottom --- */
    .card .card-actions {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .card .add-to-cart {
        width: 90%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

    /* Tablet can show 4 per row if you like */
    @media (min-width: 560px) and (max-width: 768px) {
        .category-nav .has-sub > .sub {
            grid-template-columns: repeat(4, 1fr); /* 8 items → 2 rows */
        }
    }

    /* Desktop stays hover dropdown (unchanged) */
    @media (min-width: 769px) {
        .category-nav .has-sub {
            position: relative;
        }

            .category-nav .has-sub > .sub {
                position: absolute;
                top: calc(100% + 8px);
                left: 50%;
                transform: translateX(-50%);
                background: rgba(0,0,0,.92);
                border: 1px solid rgba(255,255,255,.15);
                border-radius: 16px;
                padding: 12px;
                z-index: 40;
                grid-template-columns: repeat(4, 1fr);
                grid-auto-rows: 44px;
                gap: 10px 12px;
                display: none; /* hover to show */
            }

            .category-nav .has-sub:hover > .sub {
                display: grid;
            }
    }
    /* Force the mobile sheet to appear whenever .open is set */
    @media (max-width: 768px) {
        .category-nav .has-sub.open > .sub {
            display: grid !important;
            transform: translateY(0) !important;
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
        }
    }
    /* --- Simple mobile dropdown for "Our Products" --- */
    @media (max-width: 768px) {
        .category-nav .has-sub {
            position: relative;
        }

            /* keep the trigger tappable */
            .category-nav .has-sub > .tab {
                pointer-events: auto;
            }

            /* closed state */
            .category-nav .has-sub > .sub {
                position: absolute;
                left: 0;
                right: 0;
                top: calc(100% + 8px);
                display: none;
                background: #0f0f0f;
                padding: 12px;
                border-radius: 14px;
                box-shadow: 0 12px 30px rgba(0,0,0,.5);
                z-index: 1000;
                /* grid layout */
                display: none; /* important: default hidden */
                grid-template-columns: 1fr 1fr; /* 2 columns on phones */
                gap: 10px;
                max-height: 60vh; /* scroll if long */
                overflow: auto;
                border: 1px solid rgba(255,255,255,.12);
            }

            /* open state */
            .category-nav .has-sub.open > .sub {
                display: grid !important;
            }

        /* item look */
        .category-nav .sub a {
            display: block;
            text-decoration: none;
            background: #0f0f0f;
            color: #facc15;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 14px;
            padding: 12px 14px;
            text-align: center;
            font-weight: 700;
        }
    }
    /* === MOBILE: force a simple dropdown for "Our Products" === */
    @media (max-width: 768px) {
        /* nothing should clip the menu */
        .category-nav,
        .category-nav .tabs {
            overflow: visible !important;
        }

            .category-nav .has-sub {
                position: relative !important;
            }

                /* reset ALL bottom-sheet / desktop leftovers */
                .category-nav .has-sub > .sub {
                    position: absolute !important;
                    top: calc(100% + 8px) !important;
                    left: 0 !important;
                    right: auto !important;
                    bottom: auto !important;
                    display: none !important;
                    opacity: 0 !important;
                    visibility: hidden !important;
                    pointer-events: none !important;
                    transform: none !important; /* kill translateY(...) */
                    width: min(92vw, 520px) !important; /* readable width */
                    max-height: 70vh !important;
                    overflow: auto !important;
                    background: #0f0f0f;
                    border: 1px solid rgba(255,255,255,.12);
                    border-radius: 14px;
                    padding: 12px;
                    z-index: 1001;
                    display: none !important;
                    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                    grid-auto-rows: 48px;
                    gap: 10px;
                }

                /* show when JS adds .open */
                .category-nav .has-sub.open > .sub {
                    display: grid !important;
                    opacity: 1 !important;
                    visibility: visible !important;
                    pointer-events: auto !important;
                }

            /* items */
            .category-nav .sub li {
                list-style: none;
                margin: 0;
            }

            .category-nav .sub a {
                display: block;
                text-align: center;
                text-decoration: none;
                font-weight: 700;
                background: #0f0f0f;
                color: #facc15;
                border: 1px solid rgba(255,255,255,.12);
                border-radius: 14px;
                padding: 12px 14px;
            }

            /* ensure any old backdrop doesn't cover the dropdown */
            .category-nav .sub-backdrop {
                display: none !important;
            }
    }

    /* === Mobile: 4 main tabs → 2 per row === */
    @media (max-width: 768px) {
        .category-nav {
            position: relative;
        }
            /* anchor for the dropdown */
            .category-nav .tabs {
                display: flex;
                flex-wrap: wrap;
                gap: 10px 12px; /* row/column gaps */
                padding: 0 8px; /* little breathing room */
            }

                .category-nav .tabs > li {
                    flex: 1 1 calc(50% - 12px); /* two per row */
                }

            .category-nav .tab {
                width: 100%; /* each pill fills its half */
                justify-content: center;
            }
    }


    /* === Mobile: open "Our Products" menu from the left of the screen === */
    @media (max-width: 768px) {
        /* The dropdown should be positioned relative to the whole nav, not only the li */
        .category-nav {
            position: relative !important;
        }

            .category-nav .has-sub > .sub {
                position: absolute !important;
                /* span nearly full width of the screen/nav, starting at the left */
                left: 8px !important;
                right: 8px !important; /* keep a small gutter on the right */
                top: calc(100% + 8px) !important; /* just below the tabs */
                transform: none !important;
                /* keep the simple grid look */
                grid-template-columns: repeat(2, minmax(0,1fr)) !important;
                gap: 10px;
                z-index: 1002;
            }
    }
    /* === MOBILE: equal-size main tabs (2 per row, same width + height) === */
    @media (max-width: 768px) {

        .category-nav .tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            padding: 0 8px;
        }

            /* each <li> takes 50% width */
            .category-nav .tabs > li {
                flex: 1 1 calc(50% - 12px);
            }

        /* all tabs same height & width */
        .category-nav .tab {
            width: 100%;
            min-height: 70px; /* ✅ make all same height */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 14px 10px; /* same internal padding */
            font-size: 18px;
            line-height: 1.2;
            text-align: center;
        }
    }



    /* === MOBILE: elongated dropdown, perfectly equal tab sizes === */
    @media (max-width: 768px) {

        /* ✅ Elongate the entire dropdown container */
        .category-nav .has-sub > .sub {
            left: 8px !important;
            right: 8px !important;
            padding: 22px 14px !important;
            border-radius: 18px !important;
            background: #0f0f0f;
            /* ✅ make the dropdown box taller */
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
            /* ✅ perfect 2-column grid */
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 14px !important;
        }

        /* ✅ ALL tabs: SAME width, SAME height, SAME spacing */
        .category-nav .sub a {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            /* ✅ uniform button height */
            height: 60px !important;
            /* ✅ uniform style */
            padding: 10px !important;
            border-radius: 12px !important;
            font-size: 17px !important;
            font-weight: 700 !important;
            text-align: center !important;
            line-height: 1.2 !important;
            white-space: normal !important; /* allow wrapping */
        }
    }

    
/* Keep the footer area rigid and at the bottom */
.card .body{ flex:1; display:flex; flex-direction:column; }
.card .meta, .card .card-actions{ flex-shrink:0; }
.card .meta{ margin-top:auto; }   /* pushes price/sku + button down */
.card .card-actions{ margin-top:12px; }
    /* ================================
   MOBILE (≤768px): keep your stacked layout
   Pins price+button to bottom using flex
================================ */
    @media (max-width: 768px) {
        .card {
            display: flex;
            flex-direction: column;
        }

            .card .body {
                flex: 1;
                display: flex;
                flex-direction: column;
            }

            .card .meta {
                margin-top: auto;
            }
            /* pushes price/sku down */
            .card .card-actions {
                margin-top: 12px;
            }
            /* gap above the button */

            /* 2 lines on mobile is usually nicer; keep if you like */
            .card .name {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                min-height: 44px; /* ~2 lines at 16px */
            }
    }
    /* ============================
   MOBILE: Move cart to top-right
   ============================ */
    @media (max-width: 768px) {
        .site-header {
            position: relative;
        }

        .cart-btn {
            position: absolute;
            top: -70px; /* adjust up/down */
            right: 70px; /* adjust left/right */
            z-index: 9999;
            background: transparent;
            padding: 0;
            margin: 0;
        }

            /* Make badge look good in mobile too */
            .cart-btn .cart-count {
                top: -8px;
                right: -8px;
                transform: scale(1.1);
            }

        /* Prevent other header elements from pushing it */
        .actions {
            padding-right: 48px; /* space so search doesn't overlap cart */
        }
    }

    /* ================================
   DESKTOP (≥769px): table-like 4-row grid
   1) Image  2) 3-line Name  3) Price+SKU  4) Add to Cart
================================ */
    @media (min-width: 769px) {
        /* each card is a 4-row grid */
        .card {
            display: grid !important;
            grid-template-rows: 240px /* image */
            66px /* name (3 lines) */
            auto /* price + sku */
            60px; /* button */
            height: 100%;
        }

            .card .thumb {
                height: 240px !important;
                overflow: hidden;
            }

            /* exactly 3 lines for name even if shorter */
            .card .name {
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
                min-height: 66px;
                max-height: 66px;
                line-height: 1.2;
                margin: 8px 0;
            }

            /* hide description on desktop */
            .card .desc {
                display: none !important;
            }

            /* price + sku row */
            .card .meta {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 6px 0 10px 0;
            }

            .card .sku {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            /* button row pinned at bottom */
            .card .card-actions {
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .card .add-to-cart {
                width: 90%;
                height: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
    }

}