/* ============================================================
   BRAND DESIGN SYSTEM OVERRIDE - WHITE + ORANGE LIGHT THEME
   Loaded AFTER style.min.css / custom_style.css so it safely
   overrides the theme's default skin sitewide without touching
   the original (vendor) CSS files. Change the variables below
   and the whole storefront updates - no other file needs editing.
   ============================================================ */

:root{
    --brand-primary: #131921;      /* header/nav background: Amazon-style dark navy */
    --brand-primary-text: #FFFFFF; /* text/icons on the dark header */
    --brand-primary-2: #232F3E;    /* second header row (menu bar) - slightly lighter navy */
    --brand-secondary: #FD6000;    /* orange accent (buttons, prices, hovers, search button) */
    --brand-secondary-hover: #E05500;
    --brand-body-bg-1: #FAFAFA;    /* very light gray, alternating sections */
    --brand-body-bg-2: #FFFFFF;    /* main page background */
    --brand-border: #ECECEC;
    --brand-footer-bg: #0F2A1A;    /* dark green footer, matching reference */
    --brand-footer-text: #D8D8D8;
    --brand-text-dark: #1B1B1B;
    --brand-text-muted: #6B7280;
    --brand-font: 'Plus Jakarta Sans', 'Inter', Arial, Helvetica, sans-serif;
}

body{
    font-family: var(--brand-font) !important;
    background-color: var(--brand-body-bg-2);
    color: var(--brand-text-dark);
}

h1, h2, h3, h4, h5, h6, .title{
    font-family: var(--brand-font) !important;
    font-weight: 700;
}

h1{ font-weight: 800; }
h2{ font-weight: 700; }
h3, h4{ font-weight: 600; }
h5, h6{ font-weight: 600; }

p, span, li, a, label, input, textarea, select{
    font-family: var(--brand-font) !important;
}

.btn, button{
    font-weight: 600;
    font-family: var(--brand-font) !important;
}

/* ---------- Header / nav backgrounds: Amazon-style dark navy ---------- */
.topbar-section,
.home4_primary,
.home4_primary_color,
.header-categories .category-toggle,
.mobile-header.sticky-header,
.header-section{
    background: var(--brand-primary) !important;
    color: var(--brand-primary-text) !important;
    border-bottom: none !important;
}

.topbar-section *,
.header-section *:not(.amz-account-label):not(.amz-line1):not(.amz-line2){
    color: var(--brand-primary-text) !important;
}

/* Logo: on a dark header, force it visible (white/light) if the source
   logo file is dark-on-transparent - remove this if your logo is already
   light-colored / has its own background chip. */
.header-section .header-logo img{
    filter: none !important;
}

.home4_primary_color:hover,
.site-main-menu > ul > li > a:hover{
    color: var(--brand-secondary) !important;
    background: rgba(255,255,255,.06) !important;
}

.header-tools .header-login:hover,
.header-tools .header-wishlist:hover,
.header-tools .header-cart:hover{
    background: rgba(255,255,255,.08) !important;
}

.amz-hover-box:hover{
    border-color: var(--brand-secondary) !important;
    background: rgba(255,255,255,.08) !important;
}

.header-login .amz-line1{ color: #ccc !important; }
.header-login .amz-line2{ color: #fff !important; }

/* Search bar: white input + orange search button, Amazon-style */
.header6-search input{
    background: #fff !important;
    color: #1B1B1B !important;
}
.header6-search button{
    background: var(--brand-secondary) !important;
    color: #fff !important;
}
.header6-search button:hover{
    background: var(--brand-secondary-hover) !important;
}

/* Category strip (2nd row under the logo) - slightly lighter navy,
   white text, orange "All Categories" CTA - matches the reference. */
.site-menu-section{
    background: var(--brand-primary-2) !important;
    color: #fff !important;
    border-bottom: none !important;
}
.site-menu-section *{
    color: #fff !important;
}
.site-menu-section a:hover{
    color: var(--brand-secondary) !important;
}
.site-menu-section .category-toggle{
    background: var(--brand-secondary) !important;
    border: none; color: #fff !important; font-weight: 700;
}
.site-menu-section .category-toggle:hover{ background: var(--brand-secondary-hover) !important; }
.site-menu-section .category-toggle *{ color: #fff !important; }

/* ---------- Secondary/accent orange: buttons, prices, badges ---------- */
.btn-primary,
.btn-dark,
.header-category-list .hcl-toggle,
.product-badges .hot,
.product-badges .sale,
.price .new,
a:hover .title,
.title a:hover{
    background-color: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
}
.btn-primary:hover,
.btn-dark:hover{
    background-color: var(--brand-secondary-hover) !important;
    border-color: var(--brand-secondary-hover) !important;
}

.price .new,
.product-price .new{
    color: var(--brand-secondary) !important;
    background-color: transparent !important;
}

a{ color: var(--brand-text-dark); }
a:hover{ color: var(--brand-secondary); }

/* Product / info cards: light, clean, subtle shadow instead of heavy borders */
.product-cart-wrap,
.card,
.category-boxes .category-box{
    background: #fff;
    border: 1px solid var(--brand-border) !important;
    border-radius: 10px;
    transition: box-shadow .2s ease, transform .2s ease;
}
.product-cart-wrap:hover,
.category-boxes .category-box:hover{
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    transform: translateY(-2px);
}

/* Section-level backgrounds: alternate white / very-light-gray, no more warm cream */
.section-fluid.section-padding:nth-of-type(odd){
    background-color: var(--brand-body-bg-1);
}

/* ---------- Footer: kept dark for contrast against the light site, orange accents ---------- */
.site-footer-newsletter{ background: var(--brand-footer-bg) !important; border-bottom: 1px solid rgba(255,255,255,.08); }
.site-footer-bottom{ background: var(--brand-footer-bg) !important; border-top: 1px solid rgba(255,255,255,.08); }
.site-footer-main{ background: var(--brand-footer-bg) !important; }
.site-footer-bottom p{ color: var(--brand-footer-text) !important; }
.site-footer-main .footer-col-title{ color: #fff !important; }
.site-footer-main .footer-brand-logo,
.site-footer-main .footer-brand-logo i{ color: #fff !important; }
.site-footer-main .footer-brand-tagline,
.site-footer-main .footer-brand-desc{ color: #B9C4BD !important; }
.site-footer-main .footer-link-list a,
.site-footer-main .footer-contact-list li{ color: #D8D8D8 !important; }
.site-footer-main .footer-link-list a:hover{ color: var(--brand-secondary) !important; }
.site-footer-main .footer-contact-list i{ color: var(--brand-secondary) !important; }
.site-footer-main .footer-social a{ background: rgba(255,255,255,.08) !important; color: #fff !important; }
.site-footer-main .footer-social a:hover{ background: var(--brand-secondary) !important; }

/* ============================================================
   HOMEPAGE PRODUCT CARDS - modern polish
   Targets the homepage/flash-sale card wrapper
   (.products .col > .border.rounded.bg-white) so products,
   prices and offers stand out immediately, per the redesign brief.
   ============================================================ */
.products .col > .border.rounded.bg-white{
    border-color: var(--brand-border) !important;
    border-radius: 14px !important;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.products .col > .border.rounded.bg-white:hover{
    box-shadow: 0 12px 28px rgba(0,0,0,.10);
    transform: translateY(-4px);
    border-color: var(--brand-secondary) !important;
}
.products .product-thumb .image img{
    transition: transform .5s ease;
}
.products .col > .border.rounded.bg-white:hover .product-thumb .image img{
    transform: scale(1.05);
}
.products .product-info{
    padding: 10px 12px 14px;
    text-align: left;
}
.products .product-info .title{
    font-size: 14.5px;
    font-weight: 600;
    color: var(--brand-text-dark);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.products .product-info .title a{ color: inherit; }
.products .product-info .price{
    display: block;
    margin-bottom: 10px;
}
.products .product-info .price .old{
    color: var(--brand-text-muted);
    text-decoration: line-through;
    font-size: 13px;
    margin-right: 6px;
}
.products .product-info .price .new{
    color: var(--brand-secondary) !important;
    font-weight: 800;
    font-size: 16px;
}

/* "Order Now" button - was an unstyled text link (previously a
   button2.gif placeholder that didn't navigate anywhere); now a real,
   prominent call-to-action consistent with the rest of the storefront. */
.btn-order-now{
    display: block;
    width: 100%;
    text-align: center;
    background: var(--brand-secondary) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 9px 10px;
    border-radius: 8px;
    border: none;
    transition: background .2s ease, transform .15s ease;
}
.btn-order-now:hover{
    background: var(--brand-secondary-hover) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* Section headings - a bit more breathing room + visual weight so
   offers/section titles stand out per the redesign brief. */
.section-title2 .title{
    color: var(--brand-text-dark);
    font-weight: 800;
}
.section-title2 p{
    color: var(--brand-text-muted);
}

/* Deal of the Day panel - lift it off the flat background with a card
   treatment instead of a plain colored strip. */
.product-deal-content .title{
    color: var(--brand-text-dark);
}
.product-deal-content .btn-dark{
    background: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
    border-radius: 30px;
    padding: 13px 34px;
    font-weight: 700;
    letter-spacing: .5px;
    transition: transform .2s ease, background .2s ease;
}
.product-deal-content .btn-dark:hover{
    background: var(--brand-secondary-hover) !important;
    border-color: var(--brand-secondary-hover) !important;
    transform: translateY(-3px);
}
.countdown1 .count span.amount{
    color: var(--brand-secondary);
}

/* Category banners (real, DB-driven images) - same hover-lift language
   as the product cards so the whole homepage feels consistent. */
.category-banner4{
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}
.category-banner4:hover{
    box-shadow: 0 12px 26px rgba(0,0,0,.10);
    transform: translateY(-4px);
}
.category-banner4 img{
    transition: transform .5s ease;
}
.category-banner4:hover img{
    transform: scale(1.04);
}
.about-us2 .inner h2{
    font-weight: 800;
    color: var(--brand-text-dark);
}
.about-us2 .inner .sub-title{
    color: var(--brand-text-muted);
    font-weight: 500;
}

/* ============================================================
   Card grid gutter fix.
   The base theme applies a very tight inline `padding:2px 0px`
   on each grid column, which was fine for flat cards but clips/
   overlaps the new hover-lift shadow between neighboring cards.
   Give cards real breathing room (uses !important because the
   tight spacing is set as an inline style in the Blade markup).
   ============================================================ */
.products.row > .col{
    padding: 8px !important;
}

/* Wishlist heart + sale badge: consistent placement/spacing on
   every card grid (homepage, flash sale, shop, category, search). */
.product-thumb .add-to-wishlist{
    top: 10px;
    right: 10px;
}
.product-badges .hot,
.product-badges .onsale{
    top: 10px;
    left: 10px;
    border-radius: 6px;
    font-weight: 800;
    letter-spacing: .2px;
}

/* Pagination (Shop / Category / Search pages) */
.pagination .page-link{
    color: var(--brand-text-dark);
    border-color: var(--brand-border);
    margin: 0 3px;
    border-radius: 8px !important;
    font-weight: 600;
}
.pagination .page-item.active .page-link{
    background-color: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
    color: #fff;
}
.pagination .page-link:hover{
    background-color: #FFF4EC;
    color: var(--brand-secondary);
}

/* Others dropdown - About Us & Contact Us */
.site-menu-section .site-main-menu .has-children > .sub-menu,
.site-menu-section .site-main-menu .has-children > .sub-menu li,
.site-menu-section .site-main-menu .has-children > .sub-menu li a,
.site-menu-section .site-main-menu .has-children > .sub-menu li a span.menu-text {
    color: #1B1B1B !important;
    background-color: #FFFFFF !important;
}

.site-menu-section .site-main-menu .has-children > .sub-menu li a:hover,
.site-menu-section .site-main-menu .has-children > .sub-menu li a:hover span.menu-text {
    color: #FD6000 !important;
    background-color: #F5F5F5 !important;
}