/* =========================================
   NIKE.COM — CUSTOM STYLESHEET v2.0
   Complete CSS overhaul with full responsive
   Fonts: Oswald (headings) + Roboto (body)
   Palette: #111, #fff, #F5F5F5
   ========================================= */

/* ---------- ROOT VARIABLES ---------- */
:root {
    --black: #111111;
    --white: #ffffff;
    --gray-light: #F5F5F5;
    --gray-mid: #e5e5e5;
    --gray-dark: #767676;
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Roboto', sans-serif;
    --transition: 0.3s ease;
    --nav-height: 80px;
    --mega-shadow: 0 24px 64px rgba(0,0,0,0.10);
}
/* Single, centralized offset for the fixed .nike-nav — wraps every page's
   content (see layouts/master.blade.php's <main class="page-content-offset">)
   so no individual page template needs its own hand-picked padding/margin
   to avoid sitting underneath the fixed header. Follows --nav-height's own
   mobile override automatically (56px at <=767px, see below). */
.page-content-offset { padding-top: var(--nav-height); }

/* ---------- BASE RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--font-body);
    background: var(--bg-color);
    color: var(--black);
    font-size: 15px;
    line-height: 1.6;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-weight: 700;
    line-height: 1.05;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; }

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--gray-light); }
::-webkit-scrollbar-thumb { background: var(--black); border-radius: 3px; }

/* ==========================================
   NAVBAR
   ========================================== */
.nike-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--navbar-bg);
    border-bottom: 1px solid var(--gray-mid);
    transition: box-shadow var(--transition);
}
.nike-nav.scrolled {
    box-shadow: 0 2px 24px rgba(0,0,0,0.08);
}
.nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 100%;
    padding: 0 24px;
}
.nav-left {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 4px;
}
.nav-logo {
    grid-column: 2;
    text-align: center;
}
/* Fluid logo: scales smoothly between the mobile floor (32px, matching the
   old <=575px override) and the desktop ceiling (46px, the old base size)
   across the 320-1920px viewport range, instead of jumping at breakpoints. */
.nav-logo-img {
    height: clamp(32px, calc(29px + 0.875vw), 46px);
    width: auto;
    max-width: clamp(110px, calc(88px + 6.875vw), 220px);
    object-fit: contain;
    display: inline-block;
}
.mobile-drawer-brand {
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
}
.mobile-drawer-logo {
    height: 28px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}
.nav-logo svg {
    width: 54px;
    height: auto;
    display: inline-block;
    transition: transform 0.25s ease;
}
.nav-logo svg:hover { transform: scale(1.07); }
.nav-right {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* ---------- NAV LINKS ---------- */
.nav-item-mega {
    position: static;
}
.nav-item-mega > a,
.nav-left > a {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--seller-menu-color, var(--black));
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
    border-radius: 4px;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
}
.nav-item-mega > a:hover,
.nav-left > a:hover {
    background: var(--gray-light);
    color: var(--seller-menu-hover-color, var(--gray-dark));
}
.nav-left > a.active {
    background: var(--gray-light);
    color: var(--seller-primary-color, var(--gray-dark));
}
.nav-item-mega > a::after {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    margin-left: 2px;
    opacity: 0.5;
    transition: transform var(--transition);
}
.nav-item-mega:hover > a::after {
    transform: rotate(-135deg) translateY(-2px);
    opacity: 1;
}

/* ==========================================
   MEGA MENU — CSS-DRIVEN HOVER
   ========================================== */
.mega-menu-wrapper {
    position: fixed;
    top: var(--nav-height);
    left: 0; right: 0;
    background: var(--white);
    border-top: 2px solid var(--black);
    box-shadow: var(--mega-shadow);
    padding: 40px 60px 48px;
    z-index: 999;
    /* Hidden state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
    pointer-events: none;
}
.nav-item-mega:hover .mega-menu-wrapper {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: all;
}

/* Mega columns */
.mega-columns {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}
.mega-col h6 {
    font-size: 10px;
    font-family: var(--font-heading);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-dark);
    border-bottom: 1px solid var(--gray-mid);
    padding-bottom: 10px;
    margin-bottom: 16px;
}
.mega-col ul { list-style: none; }
.mega-col ul li { margin-bottom: 6px; }
.mega-col ul li a {
    font-size: 14px;
    color: var(--seller-menu-color, var(--black));
    font-weight: 400;
    padding: 3px 0;
    display: inline-block;
    position: relative;
    transition: letter-spacing 0.2s ease, color 0.2s ease;
}
.mega-col ul li a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 1px;
    background: var(--primary);
    transition: width 0.2s ease;
}
.mega-col ul li a:hover {
    letter-spacing: 0.03em;
    color: var(--seller-menu-hover-color, var(--black));
}
.mega-col ul li a:hover::after { width: 100%; }

/* Featured image in mega menu */
.mega-featured {
    grid-column: span 1;
}
.mega-featured-img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    background: var(--gray-light);
    margin-bottom: 12px;
    transition: transform 0.4s ease;
}
.mega-featured:hover .mega-featured-img { transform: scale(1.03); }
.mega-featured-label {
    font-family: var(--font-heading);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ==========================================
   PILL SEARCH BAR
   ========================================== */
.nav-search {
    display: flex;
    align-items: center;
    background: var(--gray-light);
    border-radius: 50px;
    padding: 8px 16px;
    gap: 8px;
    width: 190px;
    transition: width 0.35s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.nav-search:focus-within {
    width: 240px;
    box-shadow: 0 0 0 2px var(--primary);
    background: var(--white);
}
.nav-search input {
    border: none;
    background: transparent;
    outline: none;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--black);
    width: 100%;
    min-width: 0;
}
.nav-search input::placeholder { color: var(--gray-dark); }
.nav-search svg { flex-shrink: 0; color: var(--gray-dark); }
/* Wishlist icon link (frontend/shopify-template/partials/wishlist.blade.php)
   uses Bootstrap's .text-dark utility (!important), so it needs its own
   !important override to follow Menu Link Color/Hover Color. */
#wishlistIcon a {
    color: var(--seller-menu-color, var(--black)) !important;
}
#wishlistIcon a:hover {
    color: var(--seller-menu-hover-color, var(--black)) !important;
}
.nav-search-btn {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--seller-menu-color, var(--black));
}
.nav-search-btn:hover { color: var(--seller-menu-hover-color, var(--black)); }

/* ---------- NAV ICON BUTTONS ---------- */
.nav-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--seller-menu-color, var(--black));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background var(--transition), color var(--transition);
    position: relative;
}
.nav-icon-btn:hover { background: var(--gray-light); color: var(--seller-menu-hover-color, var(--black)); }
.cart-badge {
    position: absolute;
    top: 1px; right: 1px;
    background: var(--primary);
    color: var(--white);
    border-radius: 50%;
    font-size: 9px;
    width: 16px; height: 16px;
    display: none; /* hidden by default, shown by JS when count > 0 */
    align-items: center; justify-content: center;
    font-family: var(--font-heading);
    transition: transform 0.2s ease;
}

/* ---------- HAMBURGER ---------- */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 8px;
    border-radius: 4px;
    transition: background var(--transition);
}
.hamburger:hover { background: var(--gray-light); }
.hamburger:hover span { background: var(--seller-menu-hover-color, var(--black)); }
.hamburger span {
    display: block;
    width: 22px; height: 2px;
    background: var(--seller-menu-color, var(--black));
    border-radius: 2px;
    transition: all 0.3s ease, background 0.2s ease;
    transform-origin: left center;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translateY(-1px); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translateY(1px); }

/* ==========================================
   MOBILE DRAWER MENU
   ========================================== */
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    backdrop-filter: blur(2px);
}
.mobile-overlay.open {
    opacity: 1;
    visibility: visible;
}
.mobile-drawer {
    position: fixed;
    top: 0; left: 0;
    width: 320px;
    max-width: 90vw;
    height: 100vh;
    background: var(--white);
    z-index: 2000;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.mobile-drawer.open { transform: translateX(0); }

.mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-mid);
    background: var(--white);
    flex-shrink: 0;
    z-index: 1;
}
.mobile-drawer-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
}
.mobile-drawer-close:hover { background: var(--gray-light); }

.mobile-drawer-body {
    flex: 1;
    min-height: 0;
    padding: 8px 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* .mobile-drawer-body has 0 horizontal padding (rows below like .mobile-nav-plain
   supply their own 24px), but the search form had none of its own, so the input
   and button sat flush against the drawer edges. 24px matches the drawer's
   existing horizontal rhythm (.mobile-drawer-header, .mobile-nav-plain). */
.mobile-drawer-search {
    padding: 8px 24px 12px;
    align-items: center;
}

/* Mobile nav accordion */
.mobile-nav-item {
    border-bottom: 1px solid var(--gray-mid);
}
.mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: var(--font-heading);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    color: var(--primary, var(--black));
    transition: background var(--transition);
}
.mobile-nav-toggle:hover { background: var(--gray-light); }
.mobile-nav-toggle .arrow {
    width: 10px; height: 10px;
    border-right: 2px solid var(--gray-dark);
    border-bottom: 2px solid var(--gray-dark);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.mobile-nav-toggle.open .arrow {
    transform: rotate(-135deg) translateY(2px);
}
.mobile-sub-menu {
    display: none;
    padding: 4px 0 12px;
    background: var(--gray-light);
}
.mobile-sub-menu.open { display: block; }
.mobile-sub-category {
    padding: 10px 24px 4px;
    font-family: var(--font-heading);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gray-dark);
}
.mobile-sub-menu a {
    display: block;
    padding: 9px 32px;
    font-size: 14px;
    color: var(--primary, var(--black));
    transition: background var(--transition);
}
.mobile-sub-menu a:hover { background: var(--gray-mid); }

.mobile-nav-plain {
    display: block;
    padding: 16px 24px;
    font-family: var(--font-heading);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--seller-menu-color, var(--black));
    border-bottom: 1px solid var(--gray-mid);
    transition: background var(--transition), color var(--transition);
}
.mobile-nav-plain:hover { background: var(--gray-light); color: var(--seller-menu-hover-color, var(--black)); }

.mobile-drawer-footer {
    padding: 24px;
    border-top: 1px solid var(--gray-mid);
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
    background: var(--white);
}

/* ==========================================
   HERO SECTION
   ========================================== */
.hero-section {
    position: relative;
    height: 100vh;
    min-height: 600px;
    max-height: 900px;
    overflow: hidden;
    display: flex;
    align-items: center;
    /*margin-top: var(--nav-height);*/
}
/* Hero carousel — Bootstrap's native carousel (already loaded site-wide) wraps
   one .hero-bg/.hero-overlay/.hero-content trio per uploaded slider image, so
   every configured banner rotates instead of only ever showing one at random.
   Scoped to .hero-carousel so it doesn't affect any other .carousel instance. */
.hero-carousel,
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item {
    height: 100%;
}
.hero-carousel .carousel-item {
    display: flex;
    align-items: center;
    position: relative;
}
.hero-bg {
    position: absolute;
    inset: 0;
    background: var(--black);
}
.hero-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.65;
    transform: scale(1.05);
    animation: heroZoom 12s ease forwards;
}
@keyframes heroZoom {
    from { transform: scale(1.05); }
    to   { transform: scale(1.00); }
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgba(0,0,0,0.80) 0%,
        rgba(0,0,0,0.35) 55%,
        transparent 100%
    );
}
.hero-content {
    position: relative;
    z-index: 2;
    padding: 0 80px;
    max-width: 700px;
}
.hero-tag {
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.hero-tag::before {
    content: '';
    display: inline-block;
    width: 28px; height: 1px;
    background: rgba(255,255,255,0.45);
    flex-shrink: 0;
}
.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(52px, 8vw, 108px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    color: var(--white);
    line-height: 0.92;
    margin-bottom: 24px;
}
.hero-subtitle {
    font-family: var(--font-body);
    font-size: 15px;
    color: rgba(255,255,255,0.72);
    margin-bottom: 40px;
    max-width: 420px;
    line-height: 1.75;
}
.hero-cta-group {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
/* Scroll indicator */
.hero-scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.45);
    font-size: 10px;
    font-family: var(--font-heading);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    animation: bounce 2.2s ease infinite;
}
@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(8px); }
}

/* ==========================================
   BUTTONS
   ========================================== */
.btn-nike-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    padding: 15px 40px;
    border-radius: 50px;
    border: 2px solid var(--primary);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}
.btn-nike-primary:hover {
    background: var(--hov-primary);
    border-color: var(--hov-primary);
    color: var(--white);
    transform: translateY(-2px);
}
.btn-nike-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--secondary-base);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    padding: 15px 40px;
    border-radius: 50px;
    border: 2px solid var(--secondary-base);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}
/* Mobile "Filters" trigger — roughly half its old full-width (w-100)
   footprint, centered, same border/type/color as .btn-nike-secondary. */
.filter-trigger-btn {
    display: flex;
    width: 50%;
    max-width: 180px;
    margin-inline: auto;
    padding: 10px 16px;
}
.btn-nike-secondary:hover {
    background: var(--hov-secondary-base);
    border-color: var(--hov-secondary-base);
    color: var(--white);
    transform: translateY(-2px);
}
.btn-nike-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    padding: 15px 40px;
    border-radius: 50px;
    border: 2px solid var(--primary);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}
.btn-nike-dark:hover {
    background: transparent;
    color: var(--primary);
    transform: translateY(-2px);
}

/* Bridge raw Bootstrap controls (used directly in some views) to the
   dynamic Appearance colors, since this stylesheet otherwise never
   touches .btn-primary/.pagination/.form-control, leaving Bootstrap's
   default blue in place. */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--hov-primary);
    border-color: var(--hov-primary);
    color: var(--white);
}
.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}
.btn-outline-primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem var(--soft-primary);
}
.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}
.pagination .page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}
.pagination .page-link {
    color: var(--black);
}
.pagination .page-link:hover {
    color: var(--primary);
}

/* ==========================================
   SECTION HEADERS
   ========================================== */
.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 36px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-mid);
    gap: 16px;
}
.section-title {
    font-family: var(--font-heading);
    font-size: clamp(24px, 4vw, 44px);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--black);
    line-height: 1;
}
.section-link {
    font-family: var(--font-heading);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--black);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: gap 0.25s ease;
}
.section-link:hover { gap: 12px; }

/* frontend/shopify-template/partials/product_box_1.blade.php (the partial actually
   rendered by search/category/brand/related-products listings) uses a handful of
   AIZ-core utility classes that this theme never loads (no aiz-core.css include —
   only Bootstrap + nike.css). Left undefined, .text-truncate-2 never clamps long
   titles and .absolute-top-left never takes the discount badge out of flow, so
   either one silently makes that one card taller than its row siblings. Defined
   here to match aiz-core.css's own rules exactly, without touching the partial
   or redesigning the card to nike.css's separate .product-card component below. */
.text-truncate-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.absolute-top-left {
    position: absolute;
    top: 0;
    left: 0;
}
.img-fit {
    max-height: 100%;
    width: 100%;
    object-fit: cover;
}

/* ==========================================
   PRODUCT CARD
   ========================================== */
.product-card {
    /*background: var(--card-bg);*/
    border: none;
    cursor: pointer;
    position: relative;
    transition: transform 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.product-card:hover { transform: translateY(-6px); }

.product-card-img-wrap {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    background: var(--gray-light);
}
.product-card-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.product-card:hover .product-card-img-wrap img {
    transform: scale(1.09);
}

.product-badge {
    position: absolute;
    top: 12px; left: 12px;
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    z-index: 2;
}

.product-wishlist {
    position: absolute;
    top: 10px; right: 10px;
    background: var(--white);
    border: none;
    cursor: pointer;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transform: scale(0.75);
    transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.product-card:hover .product-wishlist {
    opacity: 1;
    transform: scale(1);
}
.product-wishlist:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.product-wishlist.wishlisted svg { fill: var(--primary); }

.product-card-body {
    padding: 14px 0 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.product-category {
    font-size: 11px;
    color: var(--gray-dark);
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}
.product-name {
    font-family: var(--font-heading);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--black);
    margin-bottom: 6px;
    transition: letter-spacing 0.25s ease;
    line-height: 1.2;
}
/* Only the homepage cards use bare .product-name (unclamped, causing long
   titles to wrap uncapped and make that one card taller than its row
   siblings). The related-products strip already pairs it with Bootstrap's
   .text-truncate for single-line ellipsis, so this is scoped to avoid
   reserving extra height there. */
.product-name:not(.text-truncate) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}
.product-card:hover .product-name { letter-spacing: 0.01em; }

.product-colors {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
}
.color-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.12);
    cursor: pointer;
    transition: transform 0.2s ease;
}
.color-dot:hover { transform: scale(1.25); }

.product-price {
    font-family: var(--font-heading);
    font-size: 15px;
    color: var(--black);
    letter-spacing: 0.02em;
    margin-top: auto;
}
.product-price .original {
    color: var(--gray-dark);
    text-decoration: line-through;
    font-size: 13px;
    margin-right: 6px;
}
.product-price .sale { color: #c0392b; }

/* Quick-add */
.quick-add-btn {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: var(--primary);
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    padding: 11px;
    border: none;
    cursor: pointer;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.28s ease, transform 0.28s ease;
    backdrop-filter: blur(4px);
}
.product-card:hover .quick-add-btn {
    opacity: 1;
    transform: translateY(0);
}
.quick-add-btn:hover { background: var(--hov-primary); }

/* ==========================================
   MARQUEE BANNER
   ========================================== */
.marquee-banner {
    background: var(--secondary-base);
    color: var(--white);
    overflow: hidden;
    white-space: nowrap;
    padding: 13px 0;
    margin-top: 30px;
}
.marquee-inner {
    display: inline-flex;
    animation: marquee 22s linear infinite;
}
.marquee-inner:hover { animation-play-state: paused; }
.marquee-inner span {
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 0 36px;
}
.marquee-inner .dot { color: var(--gray-dark); padding: 0; }
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ==========================================
   CATEGORY STRIP
   ========================================== */
.category-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    overflow: hidden;
}
.cat-tile {
    position: relative;
    height: 500px;
    overflow: hidden;
    cursor: pointer;
}
.cat-tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.3s ease;
    filter: brightness(0.65);
}
.cat-tile:hover img {
    transform: scale(1.07);
    filter: brightness(0.5);
}
.cat-tile-label {
    position: absolute;
    bottom: 28px; left: 24px;
    z-index: 2;
}
.cat-tile-label h3 {
    color: var(--white);
    font-size: 26px;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ==========================================
   SECTION UTILITIES
   ========================================== */
.section-pad    { padding: 80px 0; }
.section-pad-sm { padding: 48px 0; }

/* ==========================================
   BREADCRUMB
   ========================================== */
.breadcrumb-bar {
    padding: 14px 0;
    border-bottom: 1px solid var(--gray-mid);
}
.breadcrumb-bar .breadcrumb {
    margin: 0;
    font-size: 12px;
    font-family: var(--font-body);
}
.breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before {
    content: '›';
    color: var(--gray-dark);
}
.breadcrumb-bar .breadcrumb-item.active { color: var(--primary); font-weight: 500; }
.breadcrumb-bar .breadcrumb-item a {
    color: var(--gray-dark);
    transition: color var(--transition);
}
.breadcrumb-bar .breadcrumb-item a:hover { color: var(--black); }

/* ==========================================
   SCROLL REVEAL
   ========================================== */
.fade-in-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   PRODUCTS PAGE — SIDEBAR
   ========================================== */
.products-page {
    min-height: 100vh;
}
/* .page-header/.products-header had no padding/margin at all (the global
   reset zeroes h1/p margins too), so the title, sort bar and product grid
   rendered flush against each other. Add breathing room between them. */
.page-header {
    padding: 32px 0 20px;
}
.page-header .page-subtitle {
    margin-top: 8px;
    color: var(--gray-dark);
}
.products-header {
    margin-bottom: 20px;
}
.products-layout {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.sidebar {
    width: 260px;
    flex-shrink: 0;
    padding: 32px 28px 32px 0;
    border-right: 1px solid var(--gray-mid);
    position: sticky;
    top: var(--nav-height);
    height: calc(100vh - var(--nav-height));
    overflow-y: auto;
}
.sidebar::-webkit-scrollbar { width: 3px; }

.sidebar-section {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--gray-mid);
}
.sidebar-section:last-child { border-bottom: none; margin-bottom: 0; }

.sidebar-title {
    font-family: var(--font-heading);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 16px;
    color: var(--black);
}

/* Filter chips */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.filter-chip {
    font-family: var(--font-heading);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 7px 16px;
    border: 1px solid var(--gray-mid);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--white);
    color: var(--black);
    user-select: none;
}
.filter-chip:hover  {
    border-color: var(--primary);
    background: var(--gray-light);
}
.filter-chip.active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

/* Price range */
.price-range-display {
    font-family: var(--font-heading);
    font-size: 13px;
    color: var(--gray-dark);
    margin-bottom: 10px;
}
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 2px;
    background: var(--gray-mid);
    outline: none;
    border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    transition: transform 0.2s ease;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }

/* Sort bar */
.products-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0;
    border-bottom: 1px solid var(--gray-mid);
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 12px;
}
.products-count {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--gray-dark);
}
.sort-select {
    font-family: var(--font-heading);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid var(--gray-mid);
    border-radius: 50px;
    padding: 9px 20px;
    outline: none;
    cursor: pointer;
    background: var(--white);
    color: var(--black);
    transition: border-color var(--transition);
}
.sort-select:hover, .sort-select:focus { border-color: var(--primary); }

.products-main {
    flex: 1;
    padding: 0 0 40px 40px;
    min-width: 0;
}

/* Grid loading */
.grid-loading {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.grid-loading.active { display: flex; }
.spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--gray-mid);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================
   PRODUCT DETAIL PAGE
   ========================================== */
/* .detail-page's top offset now comes from the shared .page-content-offset
   wrapper in layouts/master.blade.php (see :root above) — no longer needed here. */

/* Shared static pages (About/Contact/Privacy/Terms/Return/Seller/Support) get
   their top offset from the shared .page-content-offset wrapper in
   layouts/master.blade.php now (see :root above) — .static-page-offset is
   kept as a harmless no-op class on those pages' markup, no rule needed here. */

.detail-img-col {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 14px;
    align-items: start;
}
.thumb-rail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: calc(var(--nav-height) + 24px);
}
.thumb-item {
    width: 78px; height: 78px;
    background: var(--gray-light);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
    flex-shrink: 0;
}
.thumb-item.active, .thumb-item:hover { border-color: var(--primary); }
.thumb-item img { width: 100%; height: 100%; object-fit: cover; }

.main-image-wrap {
    position: relative;
    width: 100%;
    padding-top: 100%;
    background: var(--gray-light);
    overflow: hidden;
    cursor: zoom-in;
}
.main-image-wrap img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, opacity 0.25s ease;
}
.main-image-wrap:hover img { transform: scale(1.04); }

/* Sticky checkout panel */
.checkout-panel {
    position: sticky;
    top: calc(var(--nav-height) + 24px);
}
.product-detail-name {
    font-family: var(--font-heading);
    font-size: clamp(26px, 3.5vw, 44px);
    text-transform: uppercase;
    letter-spacing: -0.025em;
    line-height: 1;
    margin-bottom: 8px;
}
.product-detail-category {
    font-size: 13px;
    color: var(--gray-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}
.product-detail-price {
    font-family: var(--font-heading);
    font-size: 22px;
    margin-bottom: 24px;
}

/* Size selector */
.size-label {
    font-family: var(--font-heading);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
}
.size-label a { color: var(--gray-dark); font-size: 11px; text-decoration: underline; }
.size-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 22px;
}
.size-btn {
    aspect-ratio: 1;
    border: 1px solid var(--gray-mid);
    background: var(--white);
    font-family: var(--font-heading);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex; align-items: center; justify-content: center;
}
.size-btn:hover { border-color: var(--primary); background: var(--gray-light); }
.size-btn.selected  { background: var(--primary); color: var(--white); border-color: var(--primary); }
.size-btn.unavailable {
    opacity: 0.3;
    cursor: not-allowed;
    text-decoration: line-through;
    pointer-events: none;
}

/* Add to cart */
.add-to-cart-btn {
    width: 100%;
    padding: 17px;
    background: var(--primary);
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: 2px solid transparent;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-bottom: 12px;
}
.add-to-cart-btn:hover {
    background: var(--hov-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.16);
}

.favourite-btn {
    width: 100%;
    padding: 17px;
    background: transparent;
    color: var(--secondary-base);
    font-family: var(--font-heading);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: 2px solid var(--secondary-base);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.favourite-btn:hover {
    border-color: var(--hov-secondary-base);
    background: var(--gray-light);
}

/* Accordion */
.detail-accordion { margin-top: 28px; border-top: 1px solid var(--gray-mid); }
.acc-item { border-bottom: 1px solid var(--gray-mid); }
.acc-toggle {
    width: 100%;
    background: none;
    border: none;
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--black);
    transition: color var(--transition);
}
.acc-toggle:hover { color: var(--gray-dark); }
.acc-toggle .icon {
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.acc-body {
    display: none;
    padding: 0 0 20px;
    font-size: 14px;
    color: var(--gray-dark);
    line-height: 1.8;
}

/* ==========================================
   FOOTER
   ========================================== */
.site-footer {
    background: var(--footer-bg);
    color: rgba(255,255,255,0.6);
    padding: 64px 0 32px;
    margin-top: 80px;
}
.footer-logo { margin-bottom: 48px; }
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 56px;
}
.footer-col h6 {
    font-family: var(--font-heading);
    font-size: 14px;
    color: var(--white);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a {
    font-size: 13px;
    color: rgba(255,255,255,0.50);
    transition: color var(--transition);
}
.footer-col ul li a:hover { color: var(--white); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.footer-bottom p { font-size: 12px; color: rgba(255,255,255,0.3); }
.footer-bottom a { font-size: 12px; color: rgba(255,255,255,0.3); }
.footer-bottom a:hover { color: rgba(255,255,255,0.7); }

/* ==========================================
   BADGE TAGS
   ========================================== */
.tag-new       { background: #58f08a; color: #000; }
.tag-sale      { background: #e74c3c; color: #fff; }
.tag-exclusive { background: var(--secondary-base); color: #fff; }
.tag-member    { background: #f39c12; color: #000; }

/* ==========================================
   TOAST & NOTIFICATION
   ========================================== */
.toast-notify {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: var(--secondary-base);
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 14px 28px;
    border-radius: 50px;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 9999;
    white-space: nowrap;
    pointer-events: none;
}
.toast-notify.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ==========================================
   RESPONSIVE — LARGE (≤1200px)
   ========================================== */
@media (max-width: 1199px) {
    .mega-columns { grid-template-columns: repeat(4, 1fr); gap: 28px; }
    .mega-menu-wrapper { padding: 36px 48px 44px; }
    .hero-content { padding: 0 60px; }
    .sidebar { width: 230px; }
    .products-main { padding-left: 28px; }
    .category-strip { grid-template-columns: repeat(4, 1fr); }
    .cat-tile { height: 400px; }
}

/* ==========================================
   RESPONSIVE — MEDIUM (≤991px)
   ========================================== */
@media (max-width: 991px) {
    /* Show hamburger, hide desktop nav */
    .nav-left { display: none; }
    .hamburger { display: flex; }
    /* Collapse search */
    .nav-search { width: 140px; }
    .nav-search:focus-within { width: 200px; }
    /* Hero */
    .hero-content { padding: 0 40px; max-width: 580px; }
    .hero-section { height: 80vh; max-height: 700px; }
    /* Sidebar hidden on tablet — show mobile filter btn */
    .sidebar { display: none; }
    .products-main { padding-left: 0; }
    /* Category strip 2-col */
    .category-strip { grid-template-columns: repeat(2, 1fr); }
    .cat-tile { height: 360px; }
    /* Detail page */
    .detail-img-col {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .thumb-rail {
        flex-direction: row;
        position: relative;
        top: 0;
        overflow-x: auto;
        padding-bottom: 4px;
        margin-top: 12px;
        order: 2;
    }
    .thumb-item { width: 72px; height: 72px; flex-shrink: 0; }
    .checkout-panel { position: relative; top: 0; }
    /* Footer */
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    /* Size grid */
    .size-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ==========================================
   RESPONSIVE — SMALL (≤767px)
   ========================================== */
@media (max-width: 767px) {
    :root { --nav-height: 56px; }
    /* Navbar */
    .nav-inner { padding: 0 16px; }
    .nav-logo svg { width: 44px; }
    .nav-search { display: none; }  /* hidden on small — use a search icon instead */
    /* Hero */
    .hero-section { min-height: 520px; height: 90vh; max-height: 600px; }
    .hero-content { padding: 0 24px; max-width: 100%; }
    .hero-title { font-size: 44px; }
    .hero-subtitle { font-size: 14px; max-width: 320px; }
    .hero-cta-group .btn-nike-primary,
    .hero-cta-group .btn-nike-secondary { font-size: 12px; padding: 13px 28px; }
    /* Category strip */
    .category-strip { grid-template-columns: repeat(2, 1fr); }
    .cat-tile { height: 260px; }
    .cat-tile-label h3 { font-size: 20px; }
    .cat-tile-label .btn-nike-primary { font-size: 11px; padding: 8px 20px; }
    /* Section pad */
    .section-pad { padding: 56px 0; }
    /* Product cards */
    .product-name { font-size: 14px; }
    /* Footer */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .site-footer { padding: 48px 0 28px; margin-top: 56px; }
    /* Detail img */
    .detail-img-col { grid-template-columns: 1fr; }
    .thumb-rail { flex-direction: row; overflow-x: auto; }
}

/* ==========================================
   RESPONSIVE — XS (≤575px)
   ========================================== */
@media (max-width: 575px) {
    /* Hero */
    .hero-section { min-height: 320px; height: 40vh; max-height: 420px; }
    .hero-content { padding: 0 20px; }
    .hero-title { font-size: 38px; }
    .hero-cta-group { flex-direction: column; }
    .hero-cta-group .btn-nike-primary,
    .hero-cta-group .btn-nike-secondary { width: 100%; text-align: center; justify-content: center; }
    /* Category strip single col */
    .category-strip { grid-template-columns: 1fr 1fr; }
    .cat-tile { height: 220px; }
    /* Products */
    .products-topbar { flex-direction: column; align-items: flex-start; }
    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 20px; }
    .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
    /* Size grid */
    .size-grid { grid-template-columns: repeat(4, 1fr); }
    /* Section header */
    .section-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    /* Btn */
    .btn-nike-primary,
    .btn-nike-secondary,
    .btn-nike-dark { padding: 13px 28px; font-size: 12px; }
    .marquee-banner {
        margin-top: 30px !important;
    }

    .nav-logo{
        grid-column: 1 !important;
        text-align: start !important;
    }
    .nav-right {

        gap: 30px;
    }
}

/* ==========================================
   CART DRAWER — Nike-style slide-in panel
   ========================================== */

/* Shared overlay (reused for both mobile nav + cart) */
.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.50);
    z-index: 2099;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    backdrop-filter: blur(2px);
}
.cart-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Drawer panel */
.cart-drawer {
    position: fixed;
    top: 0; right: 0;
    width: 420px;
    max-width: 100vw;
    height: 100vh;
    background: var(--white);
    z-index: 2100;
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 48px rgba(0,0,0,0.12);
}
.cart-drawer.open {
    transform: translateX(0);
}

/* Header */
.cart-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 20px;
    border-bottom: 1px solid var(--gray-mid);
    flex-shrink: 0;
}
.cart-drawer-title {
    font-family: var(--font-heading);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cart-drawer-title .item-count-pill {
    background: var(--secondary-base);
    color: var(--white);
    font-size: 10px;
    font-family: var(--font-heading);
    border-radius: 50px;
    padding: 2px 9px;
    letter-spacing: 0.05em;
    min-width: 22px;
    text-align: center;
}
.cart-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black);
    transition: background var(--transition);
}
.cart-close-btn:hover { background: var(--gray-light); }

/* Free shipping progress bar */
.cart-shipping-bar {
    padding: 14px 24px;
    background: var(--gray-light);
    border-bottom: 1px solid var(--gray-mid);
    flex-shrink: 0;
}
.cart-shipping-bar p {
    font-size: 12px;
    color: var(--black);
    margin-bottom: 8px;
    font-family: var(--font-body);
}
.cart-shipping-bar p strong { font-family: var(--font-heading); }
.shipping-progress-track {
    height: 3px;
    background: var(--gray-mid);
    border-radius: 3px;
    overflow: hidden;
}
.shipping-progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Scrollable items body */
.cart-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}
.cart-drawer-body::-webkit-scrollbar { width: 3px; }
.cart-drawer-body::-webkit-scrollbar-thumb { background: var(--gray-mid); }

/* Single cart item row */
.cart-item {
    display: flex;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-mid);
    position: relative;
    animation: cartItemIn 0.3s ease forwards;
}
@keyframes cartItemIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
.cart-item-img {
    width: 90px;
    height: 90px;
    background: var(--gray-light);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}
.cart-item-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.cart-item:hover .cart-item-img img { transform: scale(1.06); }

.cart-item-details { flex: 1; min-width: 0; }
.cart-item-category {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--gray-dark);
    margin-bottom: 3px;
}
.cart-item-name {
    font-family: var(--font-heading);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cart-item-meta {
    font-size: 12px;
    color: var(--gray-dark);
    margin-bottom: 12px;
}
.cart-item-meta span { margin-right: 8px; }

/* Qty + price row */
.cart-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cart-qty-control {
    display: flex;
    align-items: center;
    border: 1px solid var(--gray-mid);
    border-radius: 50px;
    overflow: hidden;
}
.cart-qty-btn {
    width: 30px; height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--black);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--transition);
    flex-shrink: 0;
}
.cart-qty-btn:hover { background: var(--gray-light); }
.cart-qty-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.cart-qty-control input[type="number"] {
    width: 44px;
    border: none;
    background: none;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 13px;
    color: var(--black);
    -moz-appearance: textfield;
}
.cart-qty-control input[type="number"]::-webkit-outer-spin-button,
.cart-qty-control input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
@media (max-width: 575px) {
    .pd-qty-control { width: 100%; max-width: 140px; }
}
.cart-qty-val {
    font-family: var(--font-heading);
    font-size: 13px;
    min-width: 28px;
    text-align: center;
    user-select: none;
}
.cart-item-price {
    font-family: var(--font-heading);
    font-size: 15px;
    color: var(--black);
}
.cart-item-price .was {
    font-size: 11px;
    color: var(--gray-dark);
    text-decoration: line-through;
    margin-right: 4px;
}
.cart-item-price .now-sale { color: #c0392b; }

/* Remove button */
.cart-remove-btn {
    position: absolute;
    top: 18px; right: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--gray-dark);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: color var(--transition), background var(--transition);
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
}
.cart-item:hover .cart-remove-btn { opacity: 1; }
.cart-remove-btn:hover { color: var(--black); background: var(--gray-light); }

/* Empty cart state */
.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 32px;
    text-align: center;
    height: 100%;
}
.cart-empty svg { color: var(--gray-mid); margin-bottom: 20px; }
.cart-empty h4 {
    font-family: var(--font-heading);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.cart-empty p {
    font-size: 13px;
    color: var(--gray-dark);
    margin-bottom: 28px;
    line-height: 1.7;
}

/* Footer — totals + checkout */
.cart-drawer-footer {
    padding: 20px 24px 28px;
    border-top: 1px solid var(--gray-mid);
    flex-shrink: 0;
    background: var(--white);
}
.cart-subtotal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.cart-subtotal-row .label {
    font-size: 13px;
    color: var(--gray-dark);
}
.cart-subtotal-row .value {
    font-family: var(--font-heading);
    font-size: 15px;
}
.cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--gray-mid);
    margin-bottom: 20px;
}
.cart-total-row .label {
    font-family: var(--font-heading);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cart-total-row .value {
    font-family: var(--font-heading);
    font-size: 20px;
}
.cart-checkout-btn {
    width: 100%;
    padding: 17px;
    background: var(--primary);
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: 2px solid transparent;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-bottom: 12px;
    display: block;
    text-align: center;
    text-decoration: none;
}
.cart-checkout-btn:hover {
    background: var(--hov-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}
.cart-view-bag-link {
    display: block;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--black);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition);
}
.cart-view-bag-link:hover { color: var(--gray-dark); }

/* Trust badges in footer */
.cart-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    color: var(--gray-dark);
    margin-top: 14px;
    font-family: var(--font-body);
}

/* Cart icon bump animation */
@keyframes cartBump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.5) rotate(-10deg); }
    70%  { transform: scale(0.9) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.cart-bump { animation: cartBump 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97); }

/* Cart item removal animation */
.cart-item.removing {
    animation: cartItemOut 0.28s ease forwards;
}
@keyframes cartItemOut {
    from { opacity: 1; transform: translateX(0); max-height: 140px; }
    to   { opacity: 0; transform: translateX(40px); max-height: 0; padding: 0; margin: 0; }
}

/* Responsive */
@media (max-width: 480px) {
    .cart-drawer { width: 100vw; }
    .cart-item-img { width: 72px; height: 72px; }
}

/* ==========================================
   PRODUCT FILTERS SIDEBAR (checkbox filters)
   ========================================== */
/* .filters-sidebar / #filterOffcanvas: below 992px this is Bootstrap's
   native .offcanvas-lg drawer (fixed, backdrop, close/Esc/scroll-lock — all
   untouched, all still Bootstrap's own JS/CSS). At >=992px every property
   that could possibly make it render as an overlay is explicitly forced back
   to normal in-flow sidebar values below — deliberately not left to rely on
   Bootstrap's own >=992px .offcanvas-lg reset (which only touches
   background-color/.offcanvas-header/.offcanvas-body, not position/
   visibility/transform/width/height, since those live entirely inside its
   own max-width:991.98px block and were never guaranteed to be "reset" by
   anything — they simply don't apply there by default). This block removes
   that ambiguity with an explicit, self-contained, !important-guaranteed
   desktop state instead. */
.filters-sidebar {
    padding-right: 8px;
}
#filterOffcanvas.offcanvas-lg { --bs-offcanvas-width: min(340px, 88vw); }

@media (min-width: 992px) {
    #filterOffcanvas {
        position: static !important;
        inset: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: auto !important;
        visibility: visible !important;
        transform: none !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        box-shadow: none !important;
        border: 0 !important;
        background-color: transparent !important;
        transition: none !important;
    }
    #filterOffcanvas .offcanvas-header {
        display: none !important;
    }
    #filterOffcanvas .offcanvas-body {
        display: block !important;
        flex-grow: 0 !important;
        height: auto !important;
        padding: 0 !important;
        overflow: visible !important;
        background-color: transparent !important;
    }
    /* Safety net: Bootstrap's JS only ever creates a backdrop in response to
       the (d-lg-none, unclickable at this width) trigger button, but this
       guarantees no leftover/stray backdrop can ever visually block the page. */
    .offcanvas-backdrop {
        display: none !important;
    }
}
.filter-section {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--gray-mid);
}
.filter-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.filter-title {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
    color: var(--black);
}
.filter-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.filter-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--gray-dark);
    cursor: pointer;
    transition: color var(--transition);
}
.filter-label:hover {
    color: var(--black);
}
.filter-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
}
.filter-label .color-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--gray-mid);
    flex-shrink: 0;
    display: inline-block;
}
/* Cap attribute/color value lists so a long list (e.g. 100 colors) scrolls
   internally instead of growing the sidebar and breaking the page layout.
   Scoped to .filter-values-list only — Category keeps its normal height. */
.filter-values-list {
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}
@media (max-width: 991px) {
    .filters-sidebar {
        padding-right: 0;
        margin-bottom: 24px;
    }
}