.ecommerce-products__featured,.ecommerce-products__grid,.ecommerce-products__list,.ecommerce-products__slider{position:relative}.ecommerce-products__list-item{background-color:var(--bs-body-bg);transition:box-shadow .2s ease}.ecommerce-products__list-item:hover{box-shadow:0 4px 12px rgba(0,0,0,.06)}.ecommerce-products__featured-hero{min-height:320px;overflow:hidden}.ecommerce-products__featured-overlay{background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));color:var(--bs-white,#fff)}.ecommerce-products__view-all .btn{min-width:180px}.ecommerce-categories__card{transition:transform .2s ease}.ecommerce-categories__card:hover{transform:translateY(-4px)}.ecommerce-categories__thumb{aspect-ratio:1/1;background-color:var(--bs-light,#f8f9fa)}.ecommerce-categories__thumb img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%}.ecommerce-categories__list-item .badge{font-weight:500}.ecommerce-brands__logo{opacity:.7;transition:opacity .2s ease}.ecommerce-brands__logo:hover{opacity:1}.ecommerce-flash-sale__banner{background-color:var(--ecommerce-flash-sale-bg,#1a1a1a);background-blend-mode:multiply}.ecommerce-flash-sale__countdown{--countdown-block-bg:var(--ecommerce-countdown-bg,#000)}.ecommerce-flash-sale__countdown-block{min-width:64px}.ecommerce-product-groups__tab-nav .nav-link{font-weight:500}.ecommerce-product-groups__column-item{border-bottom:1px solid var(--bs-border-color,#e5e5e5);padding-bottom:.75rem}.ecommerce-product-groups__column-item:last-child{border-bottom:0;padding-bottom:0}.ecommerce-product-groups__bundle-plus{color:var(--bs-secondary,#6c757d)}.ecommerce-product-groups__bundle-total{color:var(--bs-primary,#1a1a1a)}.ecommerce-coupons__card{transition:box-shadow .2s ease}.ecommerce-coupons__card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}.ecommerce-coupons__value{min-width:84px}.ecommerce-collections__card{transition:transform .25s ease}.ecommerce-collections__card:hover{transform:translateY(-4px)}.ecommerce-collections__thumb img{width:100%;height:auto;transition:transform .4s ease}.ecommerce-collections__card:hover .ecommerce-collections__thumb img{transform:scale(1.05)}.ecommerce-collections__overlay{background:linear-gradient(180deg,transparent,rgba(0,0,0,.6))}.recently-viewed-products__slider{position:relative}
/* ============================================================================
   Kingster custom storefront overrides.
   IMPORTANT: keep this file identical in BOTH locations —
     platform/themes/kingster/public/css/ecommerce.css   (source of truth)
     public/themes/kingster/css/ecommerce.css            (published copy)
   `cms:publish:assets` (runs on composer/plugin operations) copies source →
   published; edits made only to the published copy get wiped.
   ========================================================================== */

/* ===== Kingster: Product card image containment fix ===== */
.card-product_wrapper .product-img{display:block;width:100%;height:100%}
.card-product_wrapper .img-product,
.card-product_wrapper .img-hover{width:100%;height:100%;object-fit:cover}

/* ===== Kingster: Ensure category grid images are contained ===== */
.ecommerce-categories__thumb img,
.collection-item img{max-width:100%;object-fit:cover}

/* ===== Kingster: hide topbar announcement slider arrows ===== */
.tf-topbar .nav-prev-swiper,
.tf-topbar .nav-next-swiper{display:none!important}

/* ===== Kingster: hide header-bottom toggle (grid) button ===== */
.box-open-header-bottom{display:none!important}

/* ===== Kingster: Responsive audit fixes (July 2026) ===== */
/* warranty status result box full width on phones */
#warrantyResultContainer{width:100%!important;max-width:720px;margin:0 auto}
/* quick-view drawer never wider than viewport (iPad portrait) */
@media (min-width:768px){.canvas-quickview{width:min(848px,100vw)!important}}
/* newsletter popup input usable on phones, no iOS zoom */
@media (max-width:575px){.newsletter-popup.modal .bb-newsletter-popup-form input[type=email]{padding:0 110px 0 16px!important;font-size:16px!important}}
/* back-to-top clear of bottom toolbar and sticky ATC bar */
@media (max-width:1199px){
#goTop{bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}
body:has(.tf-sticky-btn-atc) #goTop{bottom:calc(170px + env(safe-area-inset-bottom,0px))!important}
}
/* auth inputs 16px to prevent iOS zoom */
@media (max-width:767px){body#page-auth .kingster-auth-card .form-control,body#page-auth .kingster-auth-card .form-select{font-size:16px!important}}
/* parallax banner heading cap on phones */
@media (max-width:767px){.parallax-banner .text.h1{font-size:36px!important}}
/* contact map height on phones */
@media (max-width:575px){.section-contact iframe{height:300px!important}}
/* payment method logos never overflow */
.widget-payment-methods img{max-width:120px;height:auto}
.widget-payment-methods .d-flex,.widget-payment-methods ul{flex-wrap:wrap}


/* ===== Kingster: hide Orders pending badge ===== */
.pending-orders,.ecommerce-count{display:none!important}

/* ===== Kingster: banner-to-products gap ===== */
body section.ecommerce-products.flat-spacing.pt-0,
body section.flat-spacing.pt-0 {
    padding-top: 80px !important;
    margin-top: 0 !important;
}
body .hero-banner-slider-wrap,
body [class*=hero-banner] {
    margin-bottom: 0 !important;
}
@media (max-width: 767px) {
    body section.ecommerce-products.flat-spacing.pt-0,
    body section.flat-spacing.pt-0 { padding-top: 48px !important; }
}

/* ===== Kingster: card meta row — info left, Add to cart right (July 2026) ===== */
/* Single row on ALL screen sizes (owner request): sold count / rating / price
   stacked on the left, quick-add button on the right. */
.kingster-card-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;width:100%;min-width:0}
.kingster-card-meta_left{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto}
.kingster-card-meta_left .card-product__price{flex-wrap:wrap}
.card-product .kingster-quick-add{margin-top:0;width:auto;flex-shrink:0}
.card-product .kingster-quick-add .tf-btn{width:auto;white-space:nowrap;padding-left:18px;padding-right:18px;border:1px solid rgba(120,120,120,.25)}
@media (max-width:1199px){.card-product .kingster-quick-add .tf-btn{min-height:44px}}
/* phones: keep the same single row, just tighter button padding */
@media (max-width:575px){
.kingster-card-meta{gap:8px}
.card-product .kingster-quick-add .tf-btn{padding-left:12px;padding-right:12px;font-size:13px}
}

/* ===== Kingster: dark shop page fixes (July 2026) ===== */
/* filter sidebar: theme paints it white (var(--white)) — use dark surface so no
   white slivers show behind the rounded widget boxes (also keeps the mobile
   filter drawer readable) */
.sidebar-filter{background-color:var(--surface,#111315)!important}
.sidebar-filter .canvas-body{background-color:transparent}
/* shop toolbar: same white-background problem — dark rounded bar instead */
.tf-shop-control{background:var(--surface,#111315)!important;border-radius:12px}
/* keep only the grid view switch (owner request) — hide the list toggle */
.tf-view-layout-switch.sw-layout-list{display:none!important}
/* product-card action buttons: quick-view rendered square — make all three
   icons the same circle */
.card-product .box-icon,
.product-action_list .box-icon,
.btn-icon-quick_view{border-radius:50%!important;overflow:hidden}

/* ===== Kingster: sold-count placeholder + mobile card layout (July 2026) ===== */
/* invisible sold-count keeps its line height so cards align when a product
   has no sales yet */
.kb-sold-count--empty{visibility:hidden}
/* phones: one product per row, quick-add button full width BELOW the price
   (overrides the single-row rule that applies from 576px up) */
@media (max-width:575px){
.kingster-card-meta{flex-direction:column;align-items:stretch;gap:8px}
.card-product .kingster-quick-add{width:100%}
.card-product .kingster-quick-add .tf-btn{width:100%;min-height:44px;font-size:14px}
.tf-grid-layout.tf-col-2:has(.card-product){grid-template-columns:1fr!important}
}

/* ===== Kingster: smaller quick-add button on phones (owner request) ===== */
@media (max-width:575px){
.card-product .kingster-quick-add .tf-btn{min-height:38px;padding-top:6px;padding-bottom:6px;font-size:13px}
}

/* ===== Kingster: offcanvas drawers dark base (July 2026) ===== */
/* theme.css paints .offcanvas literal white; the dark skin (brand-system)
   forces all drawer text to silver but never darkens the drawer itself, so
   the mini-cart header showed a white block. Dark base fixes cart / quick
   view / mobile menu drawers alike. */
.offcanvas{background-color:var(--surface,#111315)!important}
.offcanvas .popup-header .title,
.offcanvas .canvas-header .title{color:#fff!important}

/* ===== Kingster: dark-theme sweep — containers the base theme paints white (July 2026) ===== */
/* customer dashboard (plugin views use Bootstrap white cards) */
.bb-customer-page .bb-customer-profile-wrapper,
.bb-customer-page .bb-customer-profile{background:var(--surface,#111315)!important;color:#c9ced6;border-radius:14px}
.bb-customer-page .bb-customer-profile .text-muted{color:#98a1ab!important}
.bb-customer-page .bg-white{background-color:var(--surface,#111315)!important}
.bb-customer-page .card{background-color:#16191d;border-color:rgba(120,120,120,.2);color:#c9ced6}
.bb-customer-page .table{color:#c9ced6}
/* header dropdowns & menus */
.sub-menu,
.has-sub-nav-category .sub-nav-category,
.box-nav-category,
.nav-account .dropdown-account,
.select-category .select-options,
.tf-dropdown-select.style-default>.dropdown-menu{background-color:#16191d!important;color:#c9ced6}
.tf-dropdown-select.style-default>.dropdown-menu:after{background-color:#16191d!important}
/* popups / modals */
.modalDemo .modal-content,
.modal-quickadd .modal-content,
.tf-product-modal .modal-content,
.newsletter-popup.modal .modal-content{background-color:var(--surface,#111315)!important;color:#c9ced6}
/* drawer body + white controls inside drawers */
.canvas-body{background-color:var(--surface,#111315)!important}
.offcanvas .tf-mini-cart-tool-btn,
.offcanvas .tf-mini-cart-tool-openable .tf-mini-cart-tool-content{background-color:#1a1e23!important}
/* mobile bottom toolbar + sticky add-to-cart bar */
.tf-toolbar-bottom,
.tf-sticky-btn-atc{background-color:#111315!important;border-top:1px solid rgba(120,120,120,.25)}
/* invoices widget */
.wg-invoice{background-color:var(--surface,#111315)!important;color:#c9ced6}

/* ===== Kingster: mini-cart inner panels painted white by theme (July 2026) ===== */
.popup-shopping-cart .canvas-wrapper,
.popup-shopping-cart .tf-minicart-recommendations{background:var(--surface,#111315)!important}

/* ===== Kingster: mini-cart drawer width (July 2026) ===== */
/* the 740px drawer reserves a 260px recommendations column; when that panel
   is hidden (no recommendations configured) the drawer showed a big empty
   gutter — collapse it to just the cart column. */
.popup-shopping-cart:has(.tf-minicart-recommendations[hidden]){max-width:480px!important}
.popup-shopping-cart:has(.tf-minicart-recommendations[hidden]) .canvas-wrapper{max-width:100%}

/* ===== Kingster: customer dashboard dark cards — full bb-customer family (July 2026) ===== */
/* Orders / Purchased Products / Invoices / Reviews / Warranties / Replacements /
   Downloads / Returns / Addresses / Account Settings all use bb-customer-* cards
   that ship white while the dark skin turns their headings light — making titles
   invisible. Dark cards + explicit text colors fix every page at once. */
.bb-customer-page .bb-customer-content-wrapper,
.bb-customer-page .bb-customer-card,
.bb-customer-page .wg-invoice{background:var(--surface,#111315)!important;border-color:rgba(120,120,120,.22)!important;color:#c9ced6}
.bb-customer-page .bb-customer-card-header,
.bb-customer-page .bb-customer-card-footer{background:transparent!important;border-color:rgba(120,120,120,.22)!important}
.bb-customer-page .bb-customer-card-title,
.bb-customer-page .bb-customer-card-name,
.bb-customer-page .bb-section-title,
.bb-customer-page h1,.bb-customer-page h2,.bb-customer-page h3,
.bb-customer-page h4,.bb-customer-page h5,.bb-customer-page h6{color:#fff!important}
.bb-customer-page .bb-customer-card-info,
.bb-customer-page .bb-customer-card-meta,
.bb-customer-page .bb-customer-card-details,
.bb-customer-page .bb-order-info-item,
.bb-customer-page .bb-order-total-item,
.bb-customer-page p, .bb-customer-page li, .bb-customer-page td, .bb-customer-page th,
.bb-customer-page label, .bb-customer-page span{color:#c9ced6}
.bb-customer-page .text-muted, .bb-customer-page small{color:#98a1ab!important}
.bb-customer-page .bg-light{background:#16191d!important}
.bb-customer-page .border, .bb-customer-page .border-bottom, .bb-customer-page .border-top{border-color:rgba(120,120,120,.22)!important}
/* status/marketing banners inside cards (e.g. waiting-for-review yellow strip) */
.bb-customer-page .waiting-review-card .bb-customer-card-header{background:rgba(217,164,6,.14)!important}
.bb-customer-page .waiting-review-card .bb-customer-card-header *{color:#eab308!important}
/* buttons: outline variants must stay visible on dark */
.bb-customer-page .btn-outline-secondary,
.bb-customer-page .btn-outline-primary{color:#c9ced6;border-color:rgba(150,150,150,.45)}
.bb-customer-page .btn-outline-secondary:hover,
.bb-customer-page .btn-outline-primary:hover{background:#22262b;color:#fff}

/* ===== Kingster: customer dashboard buttons — one consistent style (July 2026) ===== */
/* the three overview quick-actions used btn-primary / btn-success / btn-warning,
   each themed differently; on the white pill the arrow icon rendered white-on-white.
   Unify all solid buttons in the customer area: white pill, dark text, dark arrow. */
.bb-customer-page a.btn-primary,
.bb-customer-page button.btn-primary,
.bb-customer-page a.btn-success,
.bb-customer-page a.btn-warning{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    background:#fff!important;border-color:#fff!important;color:#101418!important;
    border-radius:100px;padding:8px 18px;font-weight:600;
}
.bb-customer-page a.btn-primary *,
.bb-customer-page button.btn-primary *,
.bb-customer-page a.btn-success *,
.bb-customer-page a.btn-warning *{color:#101418!important;stroke:currentColor}
.bb-customer-page a.btn-primary svg,
.bb-customer-page a.btn-success svg,
.bb-customer-page a.btn-warning svg{width:16px;height:16px;flex-shrink:0}
.bb-customer-page a.btn-primary:hover,
.bb-customer-page button.btn-primary:hover,
.bb-customer-page a.btn-success:hover,
.bb-customer-page a.btn-warning:hover{background:#e8ebee!important;border-color:#e8ebee!important}
/* keep the danger button (address Remove) red but readable */
.bb-customer-page .btn-danger, .bb-customer-page .btn-danger *{color:#fff!important}

/* ===== Kingster: unify solid Bootstrap buttons storefront-wide (July 2026) ===== */
/* Plugin-rendered pages (warranty forms, modals, compare, coupons…) emit
   btn-primary/success/warning in Bootstrap's default colors, clashing with the
   theme's white-pill buttons and sometimes hiding icons. One consistent style,
   dark text and icons always visible. Auth pages keep their own custom design. */
body:not(#page-auth) .btn.btn-primary,
body:not(#page-auth) .btn.btn-success,
body:not(#page-auth) .btn.btn-warning,
body:not(#page-auth) .btn.btn-info{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    background:#fff!important;border-color:#fff!important;color:#101418!important;
    border-radius:100px;font-weight:600;
}
body:not(#page-auth) .btn.btn-primary *,
body:not(#page-auth) .btn.btn-success *,
body:not(#page-auth) .btn.btn-warning *,
body:not(#page-auth) .btn.btn-info *{color:#101418!important;stroke:currentColor}
body:not(#page-auth) .btn.btn-primary:hover,
body:not(#page-auth) .btn.btn-success:hover,
body:not(#page-auth) .btn.btn-warning:hover,
body:not(#page-auth) .btn.btn-info:hover{background:#e8ebee!important;border-color:#e8ebee!important}
body:not(#page-auth) .btn.btn-danger,
body:not(#page-auth) .btn.btn-danger *{color:#fff!important}

/* ===== Kingster: remaining white-background elements (July 2026) ===== */
/* footer newsletter subscribe box */
.tf-footer .footer-col-block .form-sub,
.tf-footer.footer-s5 .footer-col-block .form-sub{background:var(--surface,#111315)!important;border:1px solid rgba(120,120,120,.3)}
.tf-footer .footer-col-block .form-sub input{background:transparent!important;color:#e6e9ec!important}
/* pagination pills */
.box-nav-pag{background:transparent!important}
.box-nav-pag .pagination-item,
.box-nav-pag a, .box-nav-pag span{color:#c9ced6}
/* quantity stepper inside the mini-cart drawer */
.tf-mini-cart-items .wg-quantity--mini{background:#1a1e23!important}
.tf-mini-cart-items .wg-quantity--mini input,
.tf-mini-cart-items .wg-quantity--mini button{background:transparent!important;color:#e6e9ec!important}
/* compare page controls */
.tf-compare-list .tf-compare-item .icon,
.tf-table-compare .remove{background:#1a1e23!important;color:#e6e9ec!important}
/* newsletter popup outer dialog frame */
.newsletter-popup.modal .modal-dialog{background:transparent!important}
/* product gallery hover icons */
.gallery-item .box-icon{background:#1a1e23!important;color:#e6e9ec!important}