/* ============================================================
   MODERN E-COMMERCE STYLES - Enhanced Product Experience
   ============================================================ */

/* Product Grid - Beautiful Layout */
.products-grid, .product-list, [class*="products"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 32px !important;
    padding: 24px 0;
}

/* Product Card - Premium Style */
.product-item, .product-card, .tf-product-card {
    background: var(--modern-bg-secondary, #1A1A2E) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    border: 2px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

/* Gradient Border Effect on Hover */
.product-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, #6B5CE7, #00D4FF, #FF6B6B);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.product-item:hover::after {
    opacity: 1;
}

.product-item:hover {
    transform: translateY(-12px) scale(1.03) !important;
    box-shadow: 0 24px 48px rgba(107, 92, 231, 0.3), 0 0 40px rgba(0, 212, 255, 0.2) !important;
    border-color: transparent !important;
}

/* Product Image Wrapper */
.product-image, .card-product-img, .tf-product-img {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: var(--modern-bg-tertiary, #16213E) !important;
    aspect-ratio: 1 / 1;
}

/* Product Image - 3D Transform */
.product-image img, .card-product-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    filter: brightness(0.95);
}

.product-item:hover .product-image img,
.product-item:hover .card-product-img img {
    transform: scale(1.15) rotate(3deg) !important;
    filter: brightness(1.05) saturate(1.1);
}

/* Product Badges - Floating */
.badge-sale, .product-badge, .on-sale, [class*="badge"] {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    background: linear-gradient(135deg, #FF6B6B, #FFD93D) !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 50px !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 16px rgba(255, 107, 107, 0.4) !important;
    z-index: 10 !important;
    animation: badge-float 3s ease-in-out infinite !important;
}

@keyframes badge-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Product Info Section */
.product-info, .card-product-info, .product-content {
    padding: 20px !important;
    background: transparent !important;
}

/* Product Title - Gradient Text */
.product-title, .product-name, .card-product-title {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    background: linear-gradient(135deg, #FFFFFF 0%, #E0E0E0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease !important;
    line-height: 1.4 !important;
}

.product-item:hover .product-title {
    background: linear-gradient(135deg, #6B5CE7 0%, #00D4FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Product Rating Stars */
.product-rating, .rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
}

.product-rating .star, .rating .star {
    color: #FFD93D !important;
    font-size: 1rem;
    text-shadow: 0 0 8px rgba(255, 217, 61, 0.5);
}

/* Product Price - Prominent & Golden */
.product-price, .price, .card-product-price {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    color: #FFD93D !important;
    text-shadow: 0 0 20px rgba(255, 217, 61, 0.4) !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Old Price - Strikethrough */
.product-price .old-price, .price-old {
    font-size: 1.25rem !important;
    color: #9BA4B5 !important;
    text-decoration: line-through !important;
    font-weight: 500 !important;
    text-shadow: none !important;
}

/* Discount Percentage */
.discount-percent {
    background: linear-gradient(135deg, #FF6B6B, #FF4757);
    color: white;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 700;
}

/* Add to Cart Button - Eye-catching */
.add-to-cart-btn, .btn-add-cart, .add-cart {
    width: 100% !important;
    background: linear-gradient(135deg, #6B5CE7 0%, #00D4FF 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 24px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 8px 20px rgba(107, 92, 231, 0.4) !important;
    position: relative !important;
    overflow: hidden !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.add-to-cart-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.add-to-cart-btn:hover::before {
    width: 400px;
    height: 400px;
}

.add-to-cart-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 32px rgba(107, 92, 231, 0.5), 0 0 40px rgba(0, 212, 255, 0.3) !important;
}

.add-to-cart-btn:active {
    transform: translateY(0) !important;
}

/* Quick View & Wishlist Buttons */
.product-actions {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.3s ease;
    z-index: 10;
}

.product-item:hover .product-actions {
    opacity: 1;
    transform: translateX(0);
}

.btn-quick-view, .btn-wishlist {
    width: 44px;
    height: 44px;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.btn-quick-view:hover, .btn-wishlist:hover {
    background: rgba(107, 92, 231, 0.8) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 8px 16px rgba(107, 92, 231, 0.4) !important;
}

/* Category Cards */
.category-card, .product-category-item {
    background: var(--modern-bg-secondary, #1A1A2E) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    border: 2px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.4s ease !important;
    position: relative !important;
}

.category-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(107, 92, 231, 0.1), rgba(0, 212, 255, 0.1));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.category-card:hover::before {
    opacity: 1;
}

.category-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(107, 92, 231, 0.5) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(107, 92, 231, 0.2) !important;
}

/* Cart Page Enhancements */
.cart-item {
    background: var(--modern-bg-secondary, #1A1A2E) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin-bottom: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease !important;
}

.cart-item:hover {
    border-color: rgba(107, 92, 231, 0.3) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

/* Quantity Input - Modern Style */
.quantity-input, input[type="number"].qty {
    background: var(--modern-bg-tertiary, #16213E) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: white !important;
    padding: 8px 12px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
}

.quantity-input:focus {
    outline: none !important;
    border-color: #6B5CE7 !important;
    box-shadow: 0 0 0 3px rgba(107, 92, 231, 0.2) !important;
}

/* Product Filters - Glassmorphism */
.product-filters, .filter-sidebar {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 24px !important;
}

/* Responsive Grid */
@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 24px !important;
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 16px !important;
    }
    
    .product-price {
        font-size: 1.25rem !important;
    }
}

/* Loading Spinner for Products */
.products-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top: 4px solid #6B5CE7;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Success Messages & Notifications */
.success-message, .alert-success {
    background: linear-gradient(135deg, rgba(0, 200, 200, 0.2), rgba(107, 92, 231, 0.2)) !important;
    border: 2px solid rgba(0, 200, 200, 0.5) !important;
    border-radius: 12px !important;
    color: white !important;
    padding: 16px 20px !important;
}
.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: product card UI fixes ===== */
.tf-view-layout-switch.sw-layout-list{display:none!important}
.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) ===== */
.kb-sold-count--empty{visibility:hidden}
@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: mini-cart drawer width (July 2026) ===== */
.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: WhatsApp floating button ===== */
.whatsapp-support-btn{position:fixed!important;bottom:28px!important;left:28px!important;z-index:9999!important;width:52px!important;height:52px!important;border-radius:50%!important;background:#25D366!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 4px 20px rgba(37,211,102,.45)!important;text-decoration:none!important;transition:transform 250ms ease,box-shadow 250ms ease,background 250ms ease!important;border:none!important}
.whatsapp-support-btn:hover{background:#1ebe5d!important;color:#fff!important;transform:scale(1.10)!important;box-shadow:0 6px 28px rgba(37,211,102,.60)!important;text-decoration:none!important}
.whatsapp-support-btn svg{flex-shrink:0}
.whatsapp-support-btn::before{content:''!important;position:absolute!important;inset:-4px!important;border-radius:50%!important;border:2px solid rgba(37,211,102,.45)!important;animation:wa-pulse 2s ease-in-out infinite!important;pointer-events:none!important}
@keyframes wa-pulse{0%{transform:scale(1);opacity:1}70%{transform:scale(1.25);opacity:0}100%{transform:scale(1.25);opacity:0}}
@media(max-width:1199px){.whatsapp-support-btn{bottom:calc(80px + env(safe-area-inset-bottom,0px))!important}}