:root {
    --bg: #fff;
    --muted: #6b7280;
    --text: #111827;
    --brand: #0f1111;
    --accent: #ffd814;
    --accent-2: #f7f7f7;
    --badge: #f59e0b;
    --pick: #10b981;
    --link: #007185;
    --star: #f59e0b;
    --chip: #1118270f;
    --border: #e5e7eb;
    --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px -12px rgba(0,0,0,.08);
    --radius: 14px;
    --sale-red: #d20000;
}

/* Base styles */
.results-shell {
    max-width: 1300px;
    margin: 0 auto;
    padding: 16px 20px 60px;
    color: var(--text);
    background: var(--bg);
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"
}

/* Responsive results shell */
@media (min-width:1100px) {
    .results-shell {
        max-width: none;
        width: 90vw;
        margin: 0 auto;
    }
}

/* Toolbar styles */
.toolbar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    margin: 6px 0 18px
}

.crumbs {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px
}

    .crumbs a {
        color: var(--link);
        text-decoration: none
    }

    .crumbs .sep {
        margin: 0 6px;
        color: var(--muted)
    }

.toolbar .title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.2px;
    line-height: 1.1
}

.toolbar .meta {
    color: var(--muted);
    font-size: 14px;
    margin-top: 2px
}

.controls {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-self: end
}

.select {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
    font-size: 14px
}

/* Grid layout */
.grid {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    gap: 16px
}

.filters {
    grid-column: span 3;
    display: none;
    align-content: start;
    gap: 12px
}

@media (min-width:1100px) {
    .filters {
        display: grid;
        grid-column: span 2;
    }
}

.results-grid {
    grid-column: 1/-1
}

@media (min-width:1100px) {
    .results-grid {
        grid-column: span 10;
    }
}

.cards {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    gap: 16px
}

.card {
    grid-column: span 12;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
    transition: transform .08s,box-shadow .12s,background .12s;
    overflow: hidden
}

    .card:hover {
        background: var(--accent-2)
    }

@media (min-width:560px) {
    .card {
        grid-column: span 6
    }
}

@media (min-width:900px) {
    .card {
        grid-column: span 3;
    }
}

/* Media handling */
.media-wrap {
    position: relative;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border-bottom: 1px solid var(--border);
    overflow: hidden
}

    .media-wrap img {
        display: block;
        max-width: 88%;
        max-height: 88%;
        object-fit: contain;
        margin: 0 auto;
        transform: translateZ(0)
    }

/* Badges */
.badges {
    position: absolute;
    left: 10px;
    top: 10px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    z-index: 10;
}

.badge {
    font-size: 11px;
    font-weight: 700;
    color: #111;
    background: #fff;
    border-radius: 999px;
    padding: 5px 9px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

    .badge.best {
        background: color-mix(in oklab,var(--badge) 22%,#fff);
        border-color: color-mix(in oklab,var(--badge) 40%,#fff)
    }

    .badge.pick {
        background: color-mix(in oklab,var(--pick) 22%,#fff);
        border-color: color-mix(in oklab,var(--pick) 40%,#fff)
    }

/* Content styling */
.content {
    padding: 12px 14px 14px;
    display: grid;
    gap: 8px
}

.brand {
    font-size: 14px;
    color: var(--muted)
}

.title-link {
    text-decoration: none;
    color: var(--text)
/*    font-weight: 900 !important;
*/}

.product-title {
    font-size: 1.75em !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.desc {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px
}

.meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted)
}

.stars {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--star)
}

    .stars svg {
        width: 14px;
        height: 14px
    }

.chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

.chip {
    font-size: 11px;
    color: var(--brand);
    background: var(--chip);
    border: 1px dashed var(--border);
    padding: 4px 8px;
    border-radius: 999px
}

/* Pricing */
.price-row {
    display: flex;
    align-items: baseline;
    gap: 8px
}

.price-label {
    font-size: 12px;
    font-weight: 400;
    color: var(--muted)
}

.price {
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -.2px
}

.strike {
    text-decoration: line-through;
    color: var(--muted);
    font-size: 12px
}

/* Call to action */
.cta-row {
    margin-top: 4px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap
}
h3.product-title {

    font-size: 1em !important;
    font-weight: 500
}


/*.btn {
    border: 1px solid #d5d9d9;
    background: linear-gradient(#f7f8f8,#e7e9ec);
    border-radius: 999px;
    padding: 12px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .12s,transform .08s
}
*/
    .btn:hover {
        filter: brightness(.98)
    }

    .btn:active {
        transform: translateY(1px)
    }

    .btn.primary {
        border-color: #fcd200;
        background: linear-gradient(#ffd814,#f7ca00)
    }

.link {
    color: var(--link);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600
}

/* Skeleton loading */
.skeleton {
    animation: pulse 1.2s ease-in-out infinite;
    background: #f3f4f6;
    border-radius: 8px
}

@keyframes pulse {
    0%, 100% {
        opacity: .9
    }

    50% {
        opacity: .5
    }
}

/* Facets */
.facet-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
    padding: 12px
}

.facet-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px
}

.facet-title {
    font-weight: 800;
    font-size: 14px
}

.facet {
    margin-top: 10px
}

    .facet .opt {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 6px 0;
        font-size: 13px
    }

        .facet .opt input[type="checkbox"] {
            width: 16px;
            height: 16px
        }

    .facet .count {
        margin-left: auto;
        color: var(--muted);
        font-size: 12px
    }

    .facet .more-hidden {
        display: none
    }

    .facet .toggle-more {
        margin-top: 4px;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer
    }

/* Price inputs */
.price-row-inputs {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px
}

.price-input {
    width: 90px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 13px;
}

.price-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px
}

.btn.sm {
    padding: 6px 10px;
    font-size: 12px
}

/* Pagination */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 18px 0 4px
}

.page-btn {
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: var(--shadow);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer
}

    .page-btn[disabled] {
        opacity: .5;
        cursor: not-allowed
    }

    .page-btn[aria-current="page"] {
        border-color: #fcd200;
        background: linear-gradient(#ffd814,#f7ca00)
    }

.page-ellipsis {
    padding: 0 4px;
    color: var(--muted)
}

/* Sale styling */
.price.on-sale {
    color: var(--sale-red);
    font-weight: 900;
}

.sale-tag {
    font-weight: 700;
    color: var(--sale-red);
    margin-left: 8px;
    font-size: 14px;
}

/* Hero layout */
#hero-rotator {
    position: relative;
    overflow: hidden;
}

.hero-slide {
    display: none;
    opacity: 0;
    transition: opacity .8s ease-in-out;
}

    .hero-slide.active {
        display: block;
        opacity: 1;
    }

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

#mobile-hero-rotator {
    position: relative;
    overflow: hidden;
}

.m-hero-slide {
    display: none;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

    .m-hero-slide.active {
        display: block;
        opacity: 1;
    }

.thebest {
    background-position-x: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    min-height: 45vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .thebest .row {
        width: 100%;
        margin: 0;
    }

.phone-hero-text-style-1,
.phone-hero-text-style-2,
.phone-hero-text-style-3 {
    display: flex;
    margin: 0.15rem 0;
    text-align: center;
}

.phone-hero-text-style-3 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.m-cta {
    max-width: 320px;
}

.sa-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}

.sa-brand-text {
    display: flex;
    align-items: baseline;
    gap: .4rem;
}

.sa-brand-title {
    font-weight: 700;
}

.sa-brand-sub {
    opacity: .9;
}

/* New sale badge styling */
.sale-badge-container {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}

    .sale-badge-container .sale-tag {
        font-size: 13px;
        font-weight: 800;
        line-height: 1;
        color: #fff;
        background: var(--sale-red);
        border-radius: 999px;
        padding: 6px 10px;
        text-transform: uppercase;
        box-shadow: 0 1px 4px rgba(0,0,0,.2);
        margin: 0;
    }


.sticky-top {
    background-color: #033c73;
}

/* Container width helper */
.max-w-90 {
    max-width: 90% !important;
    margin-left: auto;
    margin-right: auto;
}



/* Only remove underline in nav/menu links */
#responsive_nav a,
#responsive_nav .nav-link,
#responsive_nav .dropdown-item {
    text-decoration-line: none !important;
}

    #responsive_nav a:hover,
    #responsive_nav .nav-link:hover,
    #responsive_nav .dropdown-item:hover,
    #responsive_nav .nav-link.active,
    #responsive_nav .dropdown-item.active {
        text-decoration-line: none !important;
    }



/* Theme colors */
.darkblue-bg {
    background-color: #00004d;
}

.lightblue-bg {
    background-color: #4d4dff;
}

.dropdown-styling {
    color: #ffffff !important;
}

.offcanvas-styling {
    color: #ffffff !important;
}

.top-header-styling {
    color: #ffffff !important;
}

.sa-brand-title {
    text-transform: none !important;
}

.sa-brand-sub {
    text-transform: lowercase;
    /* Use a smaller, responsive font size for the subtitle on larger screens */
    font-size: min(13px, 1.25vw);
    font-weight: 500;
}



/* Mobile menu button size */
#mobileMenuBtn {
    padding: 0.25rem 0.5rem;
}



/* Offcanvas tweaks (fallback when JS API not available) */
.offcanvas.show {
    visibility: visible;
}



/* Offcanvas background + readable text */
#offcanvasRight,
#offcanvasRight .offcanvas-header,
#offcanvasRight .offcanvas-body {
    background-color: #2c9ad9 !important;
}

    #offcanvasRight .nav-link,
    #offcanvasRight .dropdown-item,
    #offcanvasRight .offcanvas-logo-text {
        color: #ffffff !important;
    }



    /* Keep the close button visible on the new background */
    #offcanvasRight .btn-close {
        filter: invert(1);
    }



    /* Optional: if you use dropdowns inside the offcanvas and want them light */
    #offcanvasRight .dropdown-menu {
        background-color: #ffffff;
    }



/* Scale down phone/email/upload block */
.top-header-links a {
    font-size: 90% !important; /* shrink text */
    line-height: 1 !important;
    white-space: nowrap;
}

.top-header-links img {
    width: 20px !important; /* roughly 2/3 of 31px */
    height: 20px !important;
}

/* ORIGINAL RULE: (kept for context, though less effective than targeting .dropdown-menu) */
.darkblue-bg .dropdown-styling {
    z-index: 11 !important;
}

/* Z-INDEX FIX: Ensures ALL dropdown menus within the sticky nav render on top. */
#responsive_nav .dropdown-menu {
    z-index: 1051 !important; /* Higher than Bootstrap's default sticky z-index (1020) */
}



/* --- Centered search + right-aligned utilities on the top (dark) bar --- */

/* DEFAULT: Mobile layout (xs, sm) - Brand (left), Search (center, full width), Hamburger (right) */
.sa-nav-grid {
    display: grid;
    grid-template-columns: auto 1fr auto; /* logo | search (fills) | hamburger */
    align-items: center;
    gap: .75rem;
    width: 100%;
}



/* MD+ Layout (desktop) - Brand/Help (left), Search (center, constrained), Account/Cart (right) */
@media (min-width: 768px) {
    .sa-nav-grid {
        grid-template-columns: 1fr auto 1fr; /* left | center | right */
    }
}

.sa-nav-left {
    justify-self: start;
}

.sa-nav-center {
    justify-self: center;
}

.sa-nav-right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: .75rem;
}



/* Make the desktop search a reasonable max width while staying centered */
#searchFormLg {
    width: 100%;
}

.sa-search-lg {
    width: 100%;
    max-width: 640px;
}



/* tune as desired */

/* Mobile search should span nicely and stay centered - now fills the 1fr space in the grid */
.sa-search-sm {
    width: 100%;
}



/* Optional: tighten the input-group so button snugs up to input */
.input-group > .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}



/* Hide helpers for specific breakpoints */

/* Renamed to clearly indicate hidden ranges */
.hide-md-below {
    display: none !important;
}

@media (min-width: 768px) {
    .hide-md-below {
        display: block;
    }
}



/* Hide specific desktop elements on LG (992px) and below */
.hide-lg-below {
    display: block;
}

@media (max-width: 991.98px) { /* BS5 LG breakpoint is 992px */
    .hide-lg-below {
        display: none !important;
    }
}




/* Inline brand row (keeps text and flag neatly aligned) */
.sa-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sa-brand-text {
    display: flex;
    align-items: baseline;
    gap: .4rem;
}

.sa-brand-title {
    font-weight: 700;
}

.sa-brand-sub {
    opacity: .9;
}



/* New: Ensure mobile phone number bar doesn't wrap on small screens */
.mobile-contact-bar {
    white-space: nowrap;
}



/* Removed W-100 to allow menu items to sit closer together on LG+ */
@media (min-width: 992px) {
    #navbarNavDropdown .navbar-nav {
        width: auto;
    }
        /* PATCH: Shrink the text in the main light blue navbar on desktop (LG+) to save space */
        #navbarNavDropdown .navbar-nav .nav-item .nav-link {
            font-size: 95%; /* Make the text slightly smaller */
            padding-left: .5rem !important; /* Adjust horizontal padding */
            padding-right: .5rem !important; /* Adjust horizontal padding */
        }
}
.header-z-index {
    z-index: 1050; /* A high value to override other sticky elements */
}

/* ---- Reset-ish ---- */
.sa-bs-wrapper {
    --gap: 1rem;
    --radius: 1.25rem;
    --bg: #0b1020;
    --card: #111729;
    --muted: #8ea0b8;
    --text: #e8f0ff;
    --accent: #FFD814; /* Amazon yellow */
    --accent-2: #22c55e;
    --chip: #1f2a44;
    --ring: #2a3a5f;
    --shadow: 0 10px 30px rgba(0,0,0,.25);
}

.sa-bs-wrapper {
    color: var(--text);
    background: linear-gradient(180deg, #0b1020, #0c1226 35%, #0d142d);
    padding: 1.25rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.sa-bs-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

.sa-bs-title {
    font-size: clamp(1.1rem, 1vw + 1rem, 1.6rem);
    font-weight: 800;
    margin: 0;
    letter-spacing: .2px;
}

.sa-bs-sub {
    color: var(--muted);
    font-size: .9rem;
}

.sa-bs-grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(1, minmax(0,1fr));
}

@media (min-width: 640px) {
    .sa-bs-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (min-width: 1024px) {
    .sa-bs-grid {
        grid-template-columns: repeat(5, minmax(0,1fr));
    }
}

.sa-bs-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #121a33, #0f1831);
    border: 1px solid var(--ring);
    border-radius: var(--radius);
    overflow: hidden;
    transform: translateZ(0);
}

    .sa-bs-card:hover {
        border-color: #38548f;
        box-shadow: 0 12px 40px rgba(0,0,0,.35);
        transform: translateY(-2px);
        transition: all .25s ease;
    }

.sa-badge {
    position: absolute;
    top: .6rem;
    left: .6rem; /* PATCH: Reverting back to top left for the default/rank badge */
    background: linear-gradient(135deg, var(--accent), #60a5fa);
    color: white;
    font-weight: 800;
    font-size: .85rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(59,130,246,.35);
    z-index: 2;
}


    /* --- MODIFIED CSS: RED ON-SALE PILL (Positioned Top Right) --- */
    .sa-badge.on-sale {
        left: auto; /* PATCH: Undo default left position */
        right: .6rem; /* PATCH: Force top right position for sale pill */
        background: linear-gradient(135deg, #ff4141, #ff0000); /* Red Gradient */
        box-shadow: 0 6px 20px rgba(255, 0, 0, .35);
        z-index: 10;
    }


/* ------------------------------------- */
.sa-img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #0e162c;
    display: block;
    overflow: hidden;
}

    .sa-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .4s ease;
    }

.sa-bs-card:hover .sa-img img {
    transform: scale(1.03);
}

.sa-content {
    padding: .9rem .9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}


/* Title now 75% of original 1rem -> 0.75rem */
.sa-title {
    margin-bottom: 2%;
    font-size: 0.35rem;
    font-weight: 700;
    line-height: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* 3-line clamped, HTML-free description */
.sa-desc {
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sa-brand {
    color: var(--muted);
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .2px;
    text-transform: uppercase;
}

.sa-price {
    font-weight: 800;
    letter-spacing: .2px;
}


    /* --- MODIFIED CSS: RED PRICE TEXT --- */
    .sa-price.on-sale-text {
        color: #ff4141; /* Bright Red */
        font-weight: 800;
    }


/* ---------------------------------- */
.sa-meta {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .1rem;
}

.sa-chip {
    background: var(--chip);
    color: #c8d6ff;
    border: 1px solid var(--ring);
    padding: .25rem .5rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
}

.sa-actions {
    margin-top: auto;
    display: flex;
    gap: .5rem;
}


/* keep using accent (Amazon yellow) */
.sa-btn {
    appearance: none;
    border: 2px solid #ffd814 !important;
    background: #ffd814 !important;
    color: #000000;
    font-weight: 800;
    padding: .6rem .75rem !important;
    border-radius: .9rem;
    cursor: pointer;
    transition: filter .2s ease, transform .04s ease;
}
    .sa-btn:active {
        transform: translateY(1px);
    }

.sa-btn.secondary {
    background: #ffd814 !important;
    color: #000000 !important;
    border: 1px solid #ffd814 !important;
    box-shadow: none;
}


/* Skeletons */
.sa-skeleton .sk {
    position: relative;
    overflow: hidden;
    background: #142143;
    border-radius: .6rem;
}

    .sa-skeleton .sk::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
        animation: sa-shimmer 1.4s infinite;
    }

.sk-line {
    height: 16px;
    margin: .3rem 0;
}

    .sk-line.short {
        width: 60%;
    }

.sk-pill {
    height: 24px;
    width: 90px;
    border-radius: 999px;
    display: inline-block;
}

.sk-btn {
    height: 40px;
    width: 120px;
    border-radius: .9rem;
    margin-top: .5rem;
}

@keyframes sa-shimmer {
    100% {
        transform: translateX(100%);
    }
}


/* Error */
.sa-bs-error {
    margin-top: .75rem;
}

.sa-error-card {
    background: #1a243f;
    border: 1px solid #2a3a5f;
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
}

.sa-error-title {
    font-weight: 800;
    margin-bottom: .25rem;
}

.sa-error-sub {
    color: var(--muted);
    margin-bottom: .75rem;
}
<style >
/* ---- Reset-ish ---- */
.sa-bs-wrapper {
    --gap: 1rem;
    --radius: 1.25rem;
    --bg: #0b1020;
    --card: #111729;
    --muted: #8ea0b8;
    --text: #e8f0ff;
    --accent: #FFD814; /* Amazon yellow */
    --accent-2: #22c55e;
    --chip: #1f2a44;
    --ring: #2a3a5f;
    --shadow: 0 10px 30px rgba(0,0,0,.25);
}

.sa-bs-wrapper {
    color: var(--text);
    background: linear-gradient(180deg, #0b1020, #0c1226 35%, #0d142d);
    padding: 1.25rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.sa-bs-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

.sa-bs-title {
    font-size: clamp(1.1rem, 1vw + 1rem, 1.6rem);
    font-weight: 800;
    margin: 0;
    letter-spacing: .2px;
}

.sa-bs-sub {
    color: var(--muted);
    font-size: .9rem;
}

.sa-bs-grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(1, minmax(0,1fr));
}

@media (min-width: 640px) {
    .sa-bs-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (min-width: 1024px) {
    .sa-bs-grid {
        grid-template-columns: repeat(5, minmax(0,1fr));
    }
}

.sa-bs-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #121a33, #0f1831);
    border: 1px solid var(--ring);
    border-radius: var(--radius);
    overflow: hidden;
    transform: translateZ(0);
}

    .sa-bs-card:hover {
        border-color: #38548f;
        box-shadow: 0 12px 40px rgba(0,0,0,.35);
        transform: translateY(-2px);
        transition: all .25s ease;
    }

.sa-badge {
    position: absolute;
    top: .6rem;
    left: .6rem; /* PATCH: Reverting back to top left for the default/rank badge */
    background: linear-gradient(135deg, var(--accent), #60a5fa);
    color: white;
    font-weight: 800;
    font-size: .85rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(59,130,246,.35);
    z-index: 2;
}


    /* --- MODIFIED CSS: RED ON-SALE PILL (Positioned Top Right) --- */
    .sa-badge.on-sale {
        left: auto; /* PATCH: Undo default left position */
        right: .6rem; /* PATCH: Force top right position for sale pill */
        background: linear-gradient(135deg, #ff4141, #ff0000); /* Red Gradient */
        box-shadow: 0 6px 20px rgba(255, 0, 0, .35);
        z-index: 10;
    }


/* ------------------------------------- */
.sa-img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #0e162c;
    display: block;
    overflow: hidden;
}

    .sa-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .4s ease;
    }

.sa-bs-card:hover .sa-img img {
    transform: scale(1.03);
}

.sa-content {
    padding: .9rem .9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}


/* Title now 75% of original 1rem -> 0.75rem */
.sa-title {
    margin-bottom: 2%;
    font-size: 0.35rem;
    font-weight: 700;
    line-height: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* 3-line clamped, HTML-free description */
.sa-desc {
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sa-brand {
    color: var(--muted);
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .2px;
    text-transform: uppercase;
}

.sa-price {
    font-weight: 800;
    letter-spacing: .2px;
}


    /* --- MODIFIED CSS: RED PRICE TEXT --- */
    .sa-price.on-sale-text {
        color: #ff4141; /* Bright Red */
        font-weight: 800;
    }


/* ---------------------------------- */
.sa-meta {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .1rem;
}

.sa-chip {
    background: var(--chip);
    color: #c8d6ff;
    border: 1px solid var(--ring);
    padding: .25rem .5rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
}

.sa-actions {
    margin-top: auto;
    display: flex;
    gap: .5rem;
}


/* keep using accent (Amazon yellow) */
.sa-btn {
    appearance: none;
    border: 0;
    background: #ffd814;
    color: #111;
    font-weight: 800;
    padding: .6rem .75rem;
    border-radius: .9rem;
    cursor: pointer;
    transition: filter .2s ease, transform .04s ease;
    box-shadow: 0 8px 20px rgba(59,130,246,.35);
}

    .sa-btn:active {
        transform: translateY(1px);
    }

    .sa-btn.secondary {
        background: #ffd814;
        color: #e5ecff;
        border: 1px solid var(--ring);
        box-shadow: none;
    }


/* Skeletons */
.sa-skeleton .sk {
    position: relative;
    overflow: hidden;
    background: #142143;
    border-radius: .6rem;
}

    .sa-skeleton .sk::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
        animation: sa-shimmer 1.4s infinite;
    }

.sk-line {
    height: 16px;
    margin: .3rem 0;
}

    .sk-line.short {
        width: 60%;
    }

.sk-pill {
    height: 24px;
    width: 90px;
    border-radius: 999px;
    display: inline-block;
}

.sk-btn {
    height: 40px;
    width: 120px;
    border-radius: .9rem;
    margin-top: .5rem;
}

@keyframes sa-shimmer {
    100% {
        transform: translateX(100%);
    }
}


/* Error */
.sa-bs-error {
    margin-top: .75rem;
}

.sa-error-card {
    background: #1a243f;
    border: 1px solid #2a3a5f;
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
}

.sa-error-title {
    font-weight: 800;
    margin-bottom: .25rem;
}

.sa-error-sub {
    color: var(--muted);
    margin-bottom: .75rem;
}

/* ---- FINAL OFFCANVAS DROPDOWN CONTRAST OVERRIDES ---- */
#offcanvasRight .dropdown-menu {
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Limit the “white text” style to top-level links only (not menu items) */
#offcanvasRight > .offcanvas-body > .navbar-nav > .nav-item > .nav-link {
    color: #fff !important;
}

/* Make dropdown *items* readable on the light menu */
#offcanvasRight .dropdown-menu .dropdown-item {
    color: #0b2239 !important;
}

    #offcanvasRight .dropdown-menu .dropdown-item:hover,
    #offcanvasRight .dropdown-menu .dropdown-item:focus {
        background: #eef5ff !important;
        color: #0b2239 !important;
    }