/* ---------------------
   Color Variables
---------------------- */
:root {
    --leobot-green: #32b400;
    --leobot-dark: #222;
    --leobot-light: #f9f9f9;
    --special-offer-color: #32b400;
    /* Ribbon variants */
    --ribbon-danger: #dc3545; /* Out of stock */
    --ribbon-warning: #ff9f1a; /* Coming soon / low stock */
}

/* ---------------------
   Top Green Bar
---------------------- */
.top-bar {
    background-color: var(--leobot-green);
    font-size: 0.875rem;
}

    .top-bar a {
        color: white;
        text-decoration: none;
    }

        .top-bar a:hover {
            text-decoration: underline;
        }
/* Keep top bar above everything and align dropdown properly */
/* Top Green Bar */
.top-bar {
    background-color: var(--leobot-green);
    font-size: 0.875rem;
    /* was: position: sticky; top:0; z-index:1040;  */
    position: static; /* ? not sticky */
}

/* Small round initials badge */
.avatar-initial {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #198754;
    font-weight: 700;
}

/* Safety: if Popper fails, force right-aligned menu */
.top-bar .dropdown-menu {
    right: 0;
    left: auto;
    min-width: 220px;
}

/* ---------------------
   Navigation Bar
---------------------- */
.main-nav .nav-link {
    color: #000;
    font-weight: 500;
    padding: 0.5rem 1rem;
}

    .main-nav .nav-link:hover {
        color: var(--leobot-green);
        text-decoration: none;
    }

    .main-nav .nav-link.text-danger,
    .main-nav .nav-link.text-success {
        font-weight: bold;
    }

/* ---------------------
   Cart & Header Styling
---------------------- */
.cart-display {
    font-weight: bold;
    font-size: 1rem;
}

    .cart-display a:hover {
        color: var(--leobot-green);
    }

/* ---------------------
   Product Grid / Cards
---------------------- */
/* Card shell */
.product-card {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 1rem;
    background: #fff;
    text-align: center;
    position: relative;
    transition: box-shadow .2s ease, transform .1s ease;
}

    .product-card:hover {
        box-shadow: 0 8px 22px rgba(0,0,0,.10);
        transform: translateY(-1px);
    }

    /* Image wrapper (works with either .product-image or the existing .position-relative) */
    .product-card .product-image,
    .product-card .position-relative {
        position: relative;
        overflow: hidden;
    }

.product-image {
    height: 220px; /* consistent height across cards */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .5rem;
    background: #fff;
}

    .product-image img,
    .product-card .position-relative img {
        max-height: 100%;
        width: auto;
        object-fit: contain;
    }

/* Title & price */
.product-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25rem;
    min-height: 2.5rem; /* keeps rows even when names differ */
    margin-bottom: .25rem;
}

.product-price {
    color: var(--leobot-green);
    font-weight: 800;
    margin-bottom: .5rem;
}

/* Make non-button links inside card not underline on hover */
.product-card a:not(.btn):hover {
    text-decoration: none;
}

/* ---------------------
   Diagonal Ribbons (Special / Out of Stock / Coming Soon)
   Usage:
   <div class="ribbon"><span>Special Offer</span></div>
   <div class="ribbon ribbon-tr ribbon-danger"><span>Out of Stock</span></div>
---------------------- */
.ribbon {
    position: absolute;
    z-index: 3;
    top: 18px;
    left: -62px; /* pushes diagonal neatly into corner */
    pointer-events: none; /* never blocks clicks */
    width: 240px; /* wide enough for long labels */
    height: 34px;
}

    .ribbon > span {
        display: block;
        width: 100%;
        height: 100%;
        line-height: 34px; /* vertical centering */
        text-align: center;
        white-space: nowrap;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 0.75rem;
        letter-spacing: .05em;
        color: #fff;
        border-radius: 2px;
        text-shadow: 0 1px 1px rgba(0,0,0,.25);
        /* default (special) gradient */
        --ribbon-main: var(--special-offer-color, #32b400);
        background: linear-gradient( 135deg, var(--ribbon-main) 0%, color-mix(in srgb, var(--ribbon-main) 85%, #000) 100% );
        box-shadow: 0 2px 8px rgba(0,0,0,.25);
        transform: rotate(-45deg);
    }

    /* right-hand corner */
    .ribbon.ribbon-tr {
        left: auto;
        right: -62px;
    }

        .ribbon.ribbon-tr > span {
            transform: rotate(45deg);
        }

    /* color variants */
    .ribbon.ribbon-danger > span {
        --ribbon-main: var(--ribbon-danger);
    }

    .ribbon.ribbon-warning > span {
        --ribbon-main: var(--ribbon-warning);
    }

    /* folded end caps */
    .ribbon > span::before,
    .ribbon > span::after {
        content: "";
        position: absolute;
        bottom: -6px;
        border-top: 6px solid rgba(0,0,0,.25); /* fold shadow */
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
    }

    .ribbon > span::before {
        left: 0;
    }

    .ribbon > span::after {
        right: 0;
    }

/* scale down slightly on phones */
@media (max-width: 576px) {
    .ribbon {
        width: 200px;
        height: 30px;
        left: -52px;
    }

        .ribbon.ribbon-tr {
            right: -52px;
        }

        .ribbon > span {
            line-height: 30px;
            font-size: 0.7rem;
        }
}

/* ---------------------
   Search Box
---------------------- */
.search-bar input[type="search"] {
    border: 1px solid #ccc;
    border-radius: 0.25rem;
}

.search-bar button {
    background-color: var(--leobot-green);
    color: white;
    border: none;
}

    .search-bar button:hover {
        background-color: #28a300;
    }

/* ---------------------
   Footer
---------------------- */
footer {
    background-color: #222;
    color: #aaa;
    font-size: 0.9rem;
}

    footer a {
        color: #ddd;
    }

        footer a:hover {
            color: white;
        }

/* ---------------------
   Global Fixes
---------------------- */
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--leobot-light);
    color: #222;
}

a {
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

/* Dropdown hover behavior for navbar */
.dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
}

.dropdown-menu {
    border-radius: 0;
    border: 1px solid #ccc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

.dropdown-toggle::after {
    display: none;
}

/* ---------------------
   Product page polish
---------------------- */
.product-page .product-main-wrapper {
    border-radius: .5rem;
}

.product-page .product-main {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    padding: .5rem;
    border-radius: .5rem;
}

.thumb-strip .thumb img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.thumb-strip .thumb.active img {
    outline: 2px solid var(--bs-primary);
}

.object-contain {
    object-fit: contain;
}

.qty-stepper .form-control {
    max-width: 80px;
}

.qty-stepper .btn {
    width: 2.2rem;
}

.product-card .card-img-top {
    background: transparent;
}

.object-fit-cover {
    object-fit: cover;
}

.qty-stepper .form-control {
    max-width: 70px;
}

.qty-stepper .btn {
    width: 2rem;
}
/* --- Sticky nav & glass effect --- */
.sticky-nav {
    position: sticky;
    top: 0; /* ? sticks to the top of the viewport */
    z-index: 1030; /* above content, below offcanvas (1045) */
    /* was adding backdrop-filter – remove it, it breaks offcanvas */
    /* backdrop-filter: saturate(160%) blur(6px);  ? */
    background: #fff;
    transition: box-shadow .2s ease, background-color .2s ease;
}

    .sticky-nav.scrolled {
        box-shadow: 0 8px 24px rgba(0,0,0,.06);
    }

/* --- Nav underline interaction --- */
.nav-underline .nav-link {
    position: relative;
    color: #000;
    font-weight: 600;
}
.nav-underline .nav-link:hover { color: var(--leobot-green); text-decoration: none; }
.nav-underline .nav-link::after {
    content: "";
    position: absolute;
    left: .75rem; right: .75rem; bottom: -8px;
    height: 2px; background: var(--leobot-green);
    transform: scaleX(0); transform-origin: left;
    transition: transform .2s ease;
}
.nav-underline .nav-link:hover::after,
.nav-underline .nav-link.active::after { transform: scaleX(1); }

/* --- Mega dropdown (desktop) --- */
.mega-menu {
    min-width: 640px;
    max-width: min(90vw, 980px);
    border-radius: .25rem;
    border: 1px solid #ccc;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.mega-menu .dropdown-item { border-radius: .25rem; }
.mega-menu .dropdown-item:hover {
    background: rgba(50,180,0,.08);
    color: var(--leobot-dark);
}

/* Hover open already enabled below; keep for desktop */
.dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }

/* --- Cart badge --- */
.cart-link .cart-badge {
    position: absolute;
    top: -6px; right: -10px;
    font-size: .75rem;
    padding: .25rem .45rem;
}

/* --- Search polish --- */
.search-bar input[type="search"] {
    border: 1px solid #ccc;
    border-radius: .5rem;
    transition: box-shadow .2s ease, width .25s ease;
}
.search-bar input[type="search"]:focus {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(50,180,0,.15);
}
/* --- Search polish (fixed) --- */
.search-bar {
    display: flex;
    align-items: stretch;
    gap: .5rem;
}

    .search-bar input[type="search"] {
        border: 1px solid #ccc;
        border-radius: .5rem;
        transition: box-shadow .2s ease; /* no width transition */
        flex: 1 1 560px; /* responsive, reserves space for the button */
        min-width: 320px;
    }

        .search-bar input[type="search"]:focus {
            outline: none;
            box-shadow: 0 0 0 .2rem rgba(50,180,0,.15);
        }

@media (min-width: 992px) {
    .search-bar input[type="search"] {
        flex-basis: 620px;
    }
    /* wider on lg+, still stable */
}

.search-bar button {
    background-color: var(--leobot-green);
    color: #fff;
    border: none;
    border-radius: .5rem;
    padding-inline: .9rem;
    flex: 0 0 auto; /* don’t stretch */
}

    .search-bar button:hover {
        background-color: #28a300;
    }

.search-bar button {
    background-color: var(--leobot-green);
    color: #fff;
    border: none;
    border-radius: .5rem;
    padding-inline: .9rem;
}
.search-bar button:hover { background-color: #28a300; }

/* Keep your existing rules: */
.main-nav .nav-link { color:#000; font-weight:500; padding:.5rem 1rem; }

/* Offcanvas tweaks on mobile */
.offcanvas .dropdown-item { padding: .5rem .25rem; }

/* Preserve your existing dropdown styling */
.dropdown-menu {
    border-radius: .25rem;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    z-index: 1000;
}

/* --- Sticky nav & glass effect --- */
.sticky-nav {
    position: sticky;
    top: 0; /* ? sticks to the top of the viewport */
    z-index: 1030; /* above content, below offcanvas (1045) */
    /* was adding backdrop-filter – remove it, it breaks offcanvas */
    /* backdrop-filter: saturate(160%) blur(6px);  ? */
    background: #fff;
    transition: box-shadow .2s ease, background-color .2s ease;
}

    .sticky-nav.scrolled {
        box-shadow: 0 8px 24px rgba(0,0,0,.06);
    }

/* --- Nav underline interaction --- */
.nav-underline .nav-link {
    position: relative;
    color: #000;
    font-weight: 600;
}

    .nav-underline .nav-link:hover {
        color: var(--leobot-green);
        text-decoration: none;
    }

    .nav-underline .nav-link::after {
        content: "";
        position: absolute;
        left: .75rem;
        right: .75rem;
        bottom: -8px;
        height: 2px;
        background: var(--leobot-green);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .2s ease;
    }

    .nav-underline .nav-link:hover::after,
    .nav-underline .nav-link.active::after {
        transform: scaleX(1);
    }

/* --- Mega dropdown (desktop) --- */
.mega-menu {
    min-width: 640px;
    max-width: min(90vw, 980px);
    border-radius: .25rem;
    border: 1px solid #ccc;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

    .mega-menu .dropdown-item {
        border-radius: .25rem;
    }

        .mega-menu .dropdown-item:hover {
            background: rgba(50,180,0,.08);
            color: var(--leobot-dark);
        }

/* Hover open already enabled below; keep for desktop */
.dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
}

/* --- Cart badge --- */
.cart-link .cart-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    font-size: .75rem;
    padding: .25rem .45rem;
}

/* --- Search polish --- */
.search-bar input[type="search"] {
    border: 1px solid #ccc;
    border-radius: .5rem;
    transition: box-shadow .2s ease, width .25s ease;
}

    .search-bar input[type="search"]:focus {
        outline: none;
        box-shadow: 0 0 0 .2rem rgba(50,180,0,.15);
    }

/* --- Search polish (fixed) --- */
.search-bar {
    display: flex;
    align-items: stretch;
    gap: .5rem;
}

    .search-bar input[type="search"] {
        border: 1px solid #ccc;
        border-radius: .5rem;
        transition: box-shadow .2s ease; /* no width transition */
        flex: 1 1 560px; /* responsive, reserves space for the button */
        min-width: 320px;
    }

        .search-bar input[type="search"]:focus {
            outline: none;
            box-shadow: 0 0 0 .2rem rgba(50,180,0,.15);
        }

@media (min-width: 992px) {
    .search-bar input[type="search"] {
        flex-basis: 620px;
    }
    /* wider on lg+, still stable */
}

.search-bar button {
    background-color: var(--leobot-green);
    color: #fff;
    border: none;
    border-radius: .5rem;
    padding-inline: .9rem;
    flex: 0 0 auto; /* don’t stretch */
}

    .search-bar button:hover {
        background-color: #28a300;
    }


.search-bar button {
    background-color: var(--leobot-green);
    color: #fff;
    border: none;
    border-radius: .5rem;
    padding-inline: .9rem;
}

    .search-bar button:hover {
        background-color: #28a300;
    }

/* Keep your existing rules: */
.main-nav .nav-link {
    color: #000;
    font-weight: 500;
    padding: .5rem 1rem;
}

/* Offcanvas tweaks on mobile */
.offcanvas .dropdown-item {
    padding: .5rem .25rem;
}

/* Preserve your existing dropdown styling */
.dropdown-menu {
    border-radius: .25rem;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    z-index: 1000;
}
/* Ensure diagonal ribbons can extend past the corner */
.product-media,
.product-card {
    position: relative;
    overflow: visible; /* important: allow the rotated band to show */
}
/* Brand blurb (center of header) */
.brand-blurb {
    line-height: 1.3;
}

    .brand-blurb .kv-pill {
        display: inline-block;
        margin: .15rem .25rem .15rem 0;
        padding: .2rem .5rem;
        border: 1px solid #e6f4e6;
        background: #f6fff6;
        border-radius: 999px;
        font-weight: 600;
        color: #2a6a2a;
        white-space: nowrap;
    }

@media (max-width: 576px) {
    .brand-blurb .kv-pill {
        font-weight: 500;
    }
}
/* 1) Compact brand line & chips */
.brand-blurb .fw-bold {
    font-size: 1rem;
    line-height: 1.2;
}

.brand-blurb .kv-pill {
    padding: .15rem .45rem;
    font-size: .8rem;
    border-radius: 999px;
}

@media (max-width: 576px) {
    .brand-blurb .kv-pill:nth-child(n+3) {
        display: none;
    }
    /* show only 2 on phones */
}

/* 2) Card button hierarchy */
.product-card .btn-add {
    background: #32b400;
    border-color: #32b400;
    color: #fff;
    font-weight: 700;
}

    .product-card .btn-add:hover {
        background: #28a300;
        border-color: #28a300;
    }

.product-card .btn-view {
    border-color: #32b400;
    color: #2a6a2a;
    font-weight: 600;
}

    .product-card .btn-view:hover {
        background: #f1faef;
    }

/* 3) Price emphasis */
.product-price {
    font-size: 1.05rem;
    letter-spacing: .1px;
}

/* 4) Make sure ribbons never clip */
.product-card, .product-media {
    position: relative;
    overflow: visible;
}
/* Offcanvas polish (white panel, softer backdrop) */
.offcanvas {
    background: #fff;
    color: #212529;
}

.offcanvas-backdrop.show {
    opacity: .35;
}
/* Make the stretched overlay sit *under* our CTAs */
.product-card .stretched-link::after {
    /* BS sets position:absolute; inset:0; content:""; z-index:1; */
    z-index: 1;
}

/* Put interactive controls above the overlay */
.product-card form,
.product-card .btn,
.product-card .d-grid {
    position: relative;
    z-index: 2;
}

/* Optional: ensure buttons still accept pointer events explicitly */
.product-card .btn {
    pointer-events: auto;
}