@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
    --bs-body-font-family: 'Outfit', sans-serif !important;
    --title-font: 'Outfit', sans-serif !important;
}

body, html {
    font-family: 'Outfit', sans-serif !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

/* Full-width container override for all pages */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

@media (max-width: 575.98px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Modern Card Layouts */
.card {
    border: 1px solid rgba(220, 220, 220, 0.4) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s ease !important;
}

[theme="dark"] .card {
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
}

/* Clean Typography for Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: -0.02em !important;
}

h2 {
    font-weight: 700 !important;
    font-size: 1.6rem !important;
}

/* Custom modern look for View All and nav links */
.btn-link.text-primary {
    font-weight: 600 !important;
    text-decoration: none !important;
    position: relative;
    padding-bottom: 2px;
    transition: color 0.2s ease !important;
}
.btn-link.text-primary::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--bs-primary);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}
.btn-link.text-primary:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.4) !important;
}

[theme="dark"] ::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.4) !important;
}

::-webkit-scrollbar-thumb {
    background: #00a063 !important;
    border-radius: 100px !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #008854 !important;
}


/* Sticky Header Glassmorphism & Hover states */
.header-main.love-sticky {
    background: #008a9d !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

[theme="dark"] .header-main.love-sticky {
    background: #008a9d !important;
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

.header-main.love-sticky .main-menu > li > a,
.header-main.love-sticky .main-menu > li > span,
.header-main.love-sticky .main-menu > li > a i,
.header-main.love-sticky .main-menu > li > span i {
    color: #ffffff !important;
}

.main-menu > li > a {
    position: relative;
    padding: 12px 16px !important;
    transition: color 0.3s ease !important;
    font-weight: 500 !important;
}

.main-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 16px;
    right: 16px;
    height: 2px;
    background-color: #ffffff !important;
    transform: scaleX(0);
    transition: transform 0.3s ease !important;
    transform-origin: bottom right;
}

.main-menu > li:hover > a::after,
.main-menu > li.active > a::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Responsive Search Bar Modernization */
.responsive-search-bar {
    background: #f8f9fa !important;
    border: 1px solid rgba(220, 220, 220, 0.5) !important;
    border-radius: 30px !important;
    padding: 6px 12px 6px 20px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s ease !important;
}

[theme="dark"] .responsive-search-bar {
    background: #252525 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.responsive-search-bar:focus-within {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.15) !important;
    background: #ffffff !important;
}

[theme="dark"] .responsive-search-bar:focus-within {
    background: #1e1e1e !important;
}

/* Prevent swiper slides from clipping product card borders, shadows, and hover transforms */
.swiper {
    overflow: visible !important;
}

/* Swiper Pagination and Controls */
.swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    background: rgba(255, 255, 255, 0.65) !important;
    opacity: 1 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 50% !important;
}

.swiper-pagination-bullet-active {
    background: #00a063 !important;
    width: 24px !important;
    border-radius: 6px !important;
    box-shadow: 0 0 10px rgba(0, 160, 99, 0.4) !important;
}

.swiper-pagination {
    bottom: 20px !important;
}


/* UI/UX Improvisations for Home Page & Product Cards */

/* Inner section product thumbnail borders — matching .product card border */
.store-product__top {
    border: none !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

.store-product__top:hover,
.store-product:hover .store-product__top {
    transform: none !important;
}

[theme="dark"] .store-product__top {
    background: #202020 !important;
}

/* Find-What-You-Need category item image wrappers */
.find-what-you-need-items .img-wrap,
.auto-col .img-wrap {
    border: 1.5px solid #64748b !important;
    border-radius: 10px !important;
    transition: border-color 0.3s ease !important;
    overflow: hidden !important;
}

.find-what-you-need-items a:hover .img-wrap,
.auto-col a:hover .img-wrap {
    border-color: rgba(0, 160, 99, 0.45) !important;
}

[theme="dark"] .find-what-you-need-items .img-wrap,
[theme="dark"] .auto-col .img-wrap {
    border-color: rgba(255, 255, 255, 0.25) !important;
}



/* ==========================================
   AESTHETIC ANIMATIONS & 3D EFFECTS
   ========================================== */

/* Custom Scroll Animations */
.custom-fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}
.custom-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Ken Burns Effect for Main Banner */
.banner .swiper-slide img {
    transition: transform 10s ease-out !important;
    transform: scale(1) !important;
}
.banner .swiper-slide-active img {
    transform: scale(1.05) !important;
}

/* Glowing Pulse for CTA Buttons */
@keyframes btn-pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 160, 99, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(0, 160, 99, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 160, 99, 0); }
}

.add-to-cart, .buy-now, .btn-primary {
    transition: all 0.3s ease !important;
}

.btn-primary:hover {
    box-shadow: 0 0 15px rgba(0, 160, 99, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================
   PRODUCT CARDS & LAYOUT
   ========================================== */
/* 1. Product Cards Premium Apple/Amazon Style Overrides */
.product,
.swiper .product,
.swiper-slide .product,
.product-list-view .product,
#filtered-products .product,
.store-product {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    padding: 16px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

[theme="dark"] .product,
[theme="dark"] .store-product {
    background: #181818 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.product:hover,
.store-product:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    border-color: rgba(0, 160, 99, 0.15) !important;
}

[theme="dark"] .product:hover,
[theme="dark"] .store-product:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}


/* Sidebar 'More from the store' product cards styling */
.card.border-primary-light {
    border: 1.5px solid #64748b !important;
    border-radius: 12px !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.card.border-primary-light:hover {
    border-color: rgba(0, 160, 99, 0.5) !important;
    box-shadow: 0 4px 14px rgba(0, 160, 99, 0.12) !important;
}

[theme="dark"] .card.border-primary-light {
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Glow effect for Discount & Flash Deal Badges */
.product__discount-badge {
    display: inline-block !important;
    background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-secondary) 100%) !important;
    box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.3) !important;
    border-radius: 50rem !important;
    font-weight: 700 !important;
    animation: pulseGlow 3s infinite alternate !important;
}

@keyframes pulseGlow {
    0% { box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.3); }
    100% { box-shadow: 0 4px 18px rgba(var(--bs-primary-rgb), 0.6); }
}

/* Smooth Micro-interactions on Product actions */
.product .product__actions {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    opacity: 0 !important;
    transform: translateX(10px) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    z-index: 5 !important;
}

.product:hover .product__actions {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.product__actions a {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04) !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

[theme="dark"] .product__actions a {
    background: #252525 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

.product__actions a:hover {
    background: #00a063 !important;
    color: #ffffff !important;
    border-color: #00a063 !important;
    transform: scale(1.1) !important;
}

/* Rounded and Elevated Thumbnail styling */
.product__thumbnail {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* FIX: Images scale DOWN to fit the fixed 180px container.
   max-width/max-height 100% ensures they never overflow their wrapper.
   object-fit:contain preserves aspect ratio (no cropping, no stretch).
   width/height are NOT forced to 100% so a narrow portrait image
   stays centred rather than being width-stretched. */
.product__thumbnail img,
.product__top img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.04)) !important;
    transition: transform 0.4s ease !important, filter 0.4s ease !important;
}

/* Store-product images keep their 1:1 cover behaviour */
.store-product__top img,
.store-product img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.04)) !important;
    transition: transform 0.4s ease !important, filter 0.4s ease !important;
}

.product:hover .product__top {
    transform: translateY(-6px) scale(1.03) !important;
    filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.15)) !important;
}


/* 5. Minimalist Swiper Slider Buttons */
.swiper-button-next,
.swiper-button-prev {
    width: 44px !important;
    height: 44px !important;
    background: #ffffff !important;
    border: 1px solid rgba(220, 220, 220, 0.5) !important;
    border-radius: 50% !important;
    color: #00a063 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-50%) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
}

.swiper-button-next {
    inset-inline-end: -22px !important;
    inset-inline-start: auto !important;
}

.swiper-button-prev {
    inset-inline-start: -22px !important;
    inset-inline-end: auto !important;
}

[theme="dark"] .swiper-button-next,
[theme="dark"] .swiper-button-prev {
    background: #202020 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #00a063 !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: #00a063 !important;
    color: #ffffff !important;
    border-color: #00a063 !important;
    transform: translateY(-50%) scale(1.06) !important;
    box-shadow: 0 6px 20px rgba(0, 160, 99, 0.25) !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 13px !important;
    font-weight: 800 !important;
}

@media only screen and (max-width: 767px) {
    .swiper-button-next,
    .swiper-button-prev {
        width: 32px !important;
        height: 32px !important;
    }
    .swiper-button-next {
        inset-inline-end: 2px !important;
    }
    .swiper-button-prev {
        inset-inline-start: 2px !important;
    }
    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 10px !important;
    }
}

/* Ensure swiper navigation buttons and card borders/shadows are not clipped vertically or horizontally */
.swiper-container {
    overflow: hidden !important;
    padding: 16px 24px !important;
    margin: -16px -24px !important;
}

@media only screen and (max-width: 767px) {
    .swiper-container {
        padding: 16px 12px !important;
        margin: -16px -12px !important;
    }
}

/* Reset global swiper padding/margin for Quickview/Detail Image sliders to prevent next slide bleed */
.quickviewSlider,
.quickviewSlider2,
.quickviewSliderThumb,
.quickviewSliderThumb2 {
    padding: 0 !important;
    margin: 0 !important;
}

/* Sizing and positioning overrides for Detail Page/Quickview thumbnail slider arrows */
.quickviewSliderThumb2 .swiper-button-next,
.quickviewSliderThumb2 .swiper-button-prev {
    width: 28px !important;
    height: 28px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    z-index: 10 !important;
    transform: translateY(-50%) !important;
}

.quickviewSliderThumb2 .swiper-button-next {
    inset-inline-end: 0px !important;
    inset-inline-start: auto !important;
}

.quickviewSliderThumb2 .swiper-button-prev {
    inset-inline-start: 0px !important;
    inset-inline-end: auto !important;
}

.quickviewSliderThumb2 .swiper-button-next:hover,
.quickviewSliderThumb2 .swiper-button-prev:hover {
    transform: translateY(-50%) scale(1.05) !important;
}

.quickviewSliderThumb2 .swiper-button-next::after,
.quickviewSliderThumb2 .swiper-button-prev::after {
    font-size: 10px !important;
    font-weight: 800 !important;
}

/* 6. Soft Gradient Section Backgrounds */
.bg-primary-light {
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.04) 0%, rgba(255, 255, 255, 0) 100%) !important;
}

[theme="dark"] .bg-primary-light {
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.08) 0%, rgba(20, 20, 20, 0) 100%) !important;
}

/* 7. Store Cards Premium Modern Styling */
.swiper-slide.align-items-start.bg-light.rounded {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.swiper-slide.align-items-start.bg-light.rounded > div {
    background: #f8f9fa !important;
    border: 1px solid rgba(220, 220, 220, 0.4) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

[theme="dark"] .swiper-slide.align-items-start.bg-light.rounded > div {
    background: #1e1e1e !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.swiper-slide.align-items-start.bg-light.rounded:hover > div {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06) !important;
    border-color: rgba(0, 160, 99, 0.3) !important;
}


/* Store Inner Products Styling - Merged above */

/* Coupon tags custom modern styling */
.offer-text {
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.1) 0%, rgba(var(--bs-secondary-rgb), 0.1) 100%) !important;
    color: var(--bs-primary) !important;
    border: 1px dashed rgba(var(--bs-primary-rgb), 0.3) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
}

/* Circular Category Lists (Find What You Need) Section Redesign */
.find-what-you-need-items {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 20px !important;
    padding: 10px 5px !important;
    scrollbar-width: none; /* Firefox */
}

/* Hide scrollbar for Chrome/Safari/Opera */
.find-what-you-need-items::-webkit-scrollbar {
    display: none !important;
}

.find-what-you-need-items a {
    flex: 0 0 90px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
}

.find-what-you-need-items a .img-wrap {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    background: #f8fafc !important;
    border: 2px solid rgba(220, 220, 220, 0.4) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

[theme="dark"] .find-what-you-need-items a .img-wrap {
    background: #1e1e1e !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.find-what-you-need-items a:hover .img-wrap {
    transform: translateY(-4px) scale(1.05) !important;
    border-color: #00a063 !important;
    box-shadow: 0 8px 20px rgba(0, 160, 99, 0.12) !important;
}

.find-what-you-need-items a .img-wrap img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
}

.find-what-you-need-items a .img-wrap .ov-hidden {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
}

/* Hide floating item count badges to look clean and premium */
.find-what-you-need-items a .img-wrap .floting-text {
    display: none !important;
}

.find-what-you-need-items a .truncate {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: #475569 !important;
    margin-top: 8px !important;
    white-space: normal !important;
    text-align: center !important;
    text-overflow: clip !important;
    overflow: visible !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

[theme="dark"] .find-what-you-need-items a .truncate {
    color: #cbd5e1 !important;
}

/* Mobile UX Bottom sticky nav styling */
.app-bar, #mobile_app_bar {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05) !important;
    border-radius: 24px 24px 0 0 !important;
}

[theme="dark"] .app-bar, [theme="dark"] #mobile_app_bar {
    background: rgba(18, 18, 18, 0.95) !important;
    border-top-color: rgba(255, 255, 255, 0.05) !important;
}

/* Newsletter Modernized */
.newsletter-signup {
    border-radius: 16px !important;
    overflow: hidden !important;
}
.newsletter-signup input {
    border-radius: 30px 0 0 30px !important;
    border: 1px solid rgba(220, 220, 220, 0.5) !important;
    padding-left: 20px !important;
}
.newsletter-signup button {
    border-radius: 0 30px 30px 0 !important;
    background: #00a063 !important;
    border-color: #00a063 !important;
}

/* Premium Product Showcase Overrides */
/* FIX: Uniform fixed height on image container so tall portrait images
   (e.g. 428×1016px Lenovo ThinkCentre) don't expand the card vertically.
   overflow:hidden clips anything taller than 180px; position:relative anchors
   the absolutely-positioned Sold Out / countdown banners to this box. */
.product__top {
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    background: radial-gradient(circle, rgba(0, 160, 99, 0.03) 0%, #f8fafc 100%) !important;
    border-radius: 12px !important;
    overflow: hidden !important;       /* clip tall images — do NOT use visible here */
    position: relative !important;     /* anchor for .product__notify / countdown */
    height: 180px !important;          /* uniform card image area across all aspect ratios */
    width: 100% !important;
    transition: all 0.3s ease !important;
}
.product__top::after {
    border-radius: 12px !important;
    top: -1px !important;
    left: -1px !important;
    width: calc(100% + 2px) !important;
    height: calc(100% + 2px) !important;
}
[theme="dark"] .product__top {
    background: radial-gradient(circle, rgba(0, 160, 99, 0.08) 0%, #1a1a1a 100%) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}
.product:hover .product__top {
    border-color: #00a063 !important;
    background: radial-gradient(circle, rgba(0, 160, 99, 0.05) 0%, #ffffff 100%) !important;
}
[theme="dark"] .product:hover .product__top {
    background: radial-gradient(circle, rgba(0, 160, 99, 0.12) 0%, #121212 100%) !important;
}
.product__title a, .product__title, .store-product a.fs-16, .store-product h6 {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #334155 !important;
    transition: color 0.2s ease !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    height: 2.8em !important;
    line-height: 1.4em !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
}
.product__title a:hover, .product:hover .product__title, .store-product:hover a.fs-16 {
    color: #00a063 !important;
}
.product .product__price {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 2px !important;
}
.product__new-price {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #00a063 !important;
}

/* Radio & Checkbox Green Outline & Accent Overrides */
input[type="radio"]:checked,
input[type="checkbox"]:checked,
.form-check-input:checked {
    background-color: #00a063 !important;
    border-color: #00a063 !important;
}

input[type="radio"],
input[type="checkbox"],
.form-check-input {
    accent-color: #00a063 !important;
}

.form-check-input:focus {
    border-color: #00a063 !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 160, 99, 0.25) !important;
}

/* Custom product details and option checked buttons border */
.option-select-btn.custom_01_option label input:checked ~ * {
    border: 2px solid #ffffff !important;
    outline: 2px solid #00a063 !important;
}

.color_variant_active {
    border: 3px solid #ffffff !important;
    outline: 2px solid #00a063 !important;
}

/* Why Choose Us Redesign Custom Overrides */
@media (min-width: 992px) {
    .col-lg-2-4 {
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }
}
.why-choose-us-section {
    background: #f8fafc !important;
}
.transition-hover {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.transition-hover:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.05) !important;
    border-color: #00a063 !important;
}

/* Sidebar Filter Scrollbars */
.products_aside_brands::-webkit-scrollbar,
.products_aside_categories::-webkit-scrollbar,
.filter-toggle-aside::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

.products_aside_brands::-webkit-scrollbar-track,
.products_aside_categories::-webkit-scrollbar-track,
.filter-toggle-aside::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.4) !important;
}

[theme="dark"] .products_aside_brands::-webkit-scrollbar-track,
[theme="dark"] .products_aside_categories::-webkit-scrollbar-track,
[theme="dark"] .filter-toggle-aside::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.4) !important;
}

.products_aside_brands::-webkit-scrollbar-thumb,
.products_aside_categories::-webkit-scrollbar-thumb,
.filter-toggle-aside::-webkit-scrollbar-thumb {
    background: #00a063 !important;
    border-radius: 100px !important;
    border: 1px solid transparent !important;
    background-clip: padding-box !important;
}

.products_aside_brands::-webkit-scrollbar-thumb:hover,
.products_aside_categories::-webkit-scrollbar-thumb:hover,
.filter-toggle-aside::-webkit-scrollbar-thumb:hover {
    background: #008854 !important;
}

/* ==========================================
   RESPONSIVENESS AND LAYOUT FIXES
   ========================================== */

/* Restore row layout for horizontal product list view */
.product-list-view .product {
    flex-direction: row !important;
    align-items: center !important;
    gap: 20px !important;
}

@media (max-width: 575.98px) {
    /* Optimize Grid Layout Cards for Mobile Viewports */
    .product,
    .swiper .product,
    .swiper-slide .product,
    #filtered-products .product {
        padding: 10px !important;
        border-radius: 12px !important;
        gap: 8px !important;
    }

    .product__summary {
        gap: 4px !important;
        padding-bottom: 8px !important;
    }

    .product__new-price {
        font-size: 0.9rem !important;
    }

    .product__old-price {
        font-size: 0.75rem !important;
    }

    .product__title {
        font-size: 0.8rem !important;
        margin-bottom: 4px !important;
    }

    /* On small screens keep the container square and capped — still fixed, not auto */
    .product .product__top {
        height: 150px !important;   /* slightly smaller on mobile */
        aspect-ratio: unset !important;
    }
}

/* Swiper Slide Equal Heights & Bottom Aligned Pricing */
.swiper-slide {
    height: auto !important;
}

.swiper-slide .product {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.swiper-slide .product .product__summary {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.swiper-slide .product .product__summary .mt-auto {
    margin-top: auto !important;
}

/* ==========================================
   NEUTRALIZE LEGACY SIZE-LIMITING CLASSES ON PRODUCT SLIDES
   These classes were preventing uniform card widths across all sliders
   ========================================== */

/* Prevent mx-w300 from limiting slides to 300px */
.swiper-slide.mx-w300 {
    max-inline-size: none !important;
    min-inline-size: 0 !important;
}

/* Neutralize auto-item-width constraints on product-slider swiper slides (exclude details/quickview thumbnails) */
.swiper:not(.quickviewSliderThumb):not(.quickviewSliderThumb2) .auto-item-width .swiper-slide,
.swiper-container:not(.quickviewSliderThumb):not(.quickviewSliderThumb2) .auto-item-width .swiper-slide {
    max-inline-size: none !important;
    min-inline-size: 0 !important;
}

/* Ensure all swiper slides inside product sliders fill their container */
.swiper-wrapper > .swiper-slide {
    box-sizing: border-box !important;
}

/* ==========================================
   PRODUCT DETAIL PAGE — THUMBNAIL STRIP FIX
   Scoped exclusively to .quickviewSliderThumb2.
   Does NOT affect homepage sliders, product listing,
   related products carousel, category pages,
   or any other image gallery.
   ========================================== */

/* 1. Lock the thumbnail container to a compact, fixed-height horizontal strip */
.quickviewSliderThumb2 {
    height: 80px !important;          /* compact fixed height for the whole strip */
    max-height: 80px !important;
    overflow: hidden !important;      /* clip anything that grows beyond the strip */
    padding: 0 28px !important;       /* horizontal room for prev/next arrow buttons */
    margin: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* 2. Prevent the swiper-wrapper from growing vertically */
.quickviewSliderThumb2 .swiper-wrapper {
    align-items: center !important;   /* vertically centre all slides in the strip */
    height: 100% !important;
    flex-direction: row !important;
}

/* 3. Each thumbnail slide: fixed square, no overflow */
.quickviewSliderThumb2 .swiper-slide {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    border: 1.5px solid rgba(214, 214, 214, 0.7) !important;
    background: #f8fafc !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
    /* Override any aspect-ratio that might be driving height from width */
    aspect-ratio: unset !important;
}

[theme="dark"] .quickviewSliderThumb2 .swiper-slide {
    background: #1e1e1e !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.quickviewSliderThumb2 .swiper-slide:hover,
.quickviewSliderThumb2 .swiper-slide-thumb-active {
    border-color: #00a063 !important;
    box-shadow: 0 0 0 2px rgba(0, 160, 99, 0.2) !important;
}

/* 4. Images inside the thumbnail slides: fill the square without distortion */
.quickviewSliderThumb2 .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    display: block !important;
    /* Undo any drop-shadow or transform that adds visual height */
    filter: none !important;
    transform: none !important;
    transition: none !important;
}

/* 5. Center navigation arrows vertically within the fixed-height strip */
.quickviewSliderThumb2 .swiper-button-prev,
.quickviewSliderThumb2 .swiper-button-next {
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    margin-top: 0 !important;
}

.quickviewSliderThumb2 .swiper-button-prev:hover,
.quickviewSliderThumb2 .swiper-button-next:hover {
    transform: translateY(-50%) scale(1.08) !important;
}

/* 6. Tablet (≤ 991px): slightly smaller thumbnails */
@media (max-width: 991.98px) {
    .quickviewSliderThumb2 {
        height: 70px !important;
        max-height: 70px !important;
        padding: 0 26px !important;
    }

    .quickviewSliderThumb2 .swiper-slide {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
    }
}

/* 7. Mobile (≤ 575px): compact thumbnails that stay proportional */
@media (max-width: 575.98px) {
    .quickviewSliderThumb2 {
        height: 62px !important;
        max-height: 62px !important;
        padding: 0 22px !important;
    }

    .quickviewSliderThumb2 .swiper-slide {
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
    }

    .quickviewSliderThumb2 .swiper-button-prev,
    .quickviewSliderThumb2 .swiper-button-next {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ==========================================
   JUST FOR YOU — IMAGE QUALITY & PROPORTION FIX
   Scoped EXCLUSIVELY via .jfy-img-wrap / .jfy-img.
   These classes exist ONLY inside the Just For You
   section — zero impact on any other component.
   ========================================== */

/* Image container: fixed square, centred, no overflow, no border */
.just-for-you .jfy-img-wrap {
    width: 130px;
    height: 130px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: transparent !important;
    border: none !important;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Image itself: scale DOWN to fit, never scale up, no stretching */
.just-for-you .jfy-img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    /* Ensure aspect-ratio attribute is ignored/overridden */
    aspect-ratio: unset !important;
    /* Crisp rendering for small thumbnails */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: auto;
    display: block !important;
    border-radius: 8px !important;
    filter: none !important;
    /* Support the hover scale/popup transition effect */
    transition: transform 0.2s ease-in-out !important;
}

/* Hover popup/zoom effect */
.just-for-you a:hover .jfy-img {
    transform: scale(1.1) !important;
}

/* Keep the discount badge anchored top-left of the wrapper */
.just-for-you .jfy-img-wrap .product__discount-badge {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    z-index: 2 !important;
}

/* Product link: centre items including the price row */
.just-for-you a.hover-zoom-in {
    align-items: center !important;
}

/* Tablet (≤ 991px): slightly smaller containers */
@media (max-width: 991.98px) {
    .just-for-you .jfy-img-wrap {
        width: 110px;
        height: 110px;
    }
}

/* Mobile (≤ 575px): compact but still proportional */
@media (max-width: 575.98px) {
    .just-for-you .jfy-img-wrap {
        width: 90px;
        height: 90px;
        border-radius: 8px;
    }
}