/* =====================================================================
ENTERPRISE VIEWPORT OPTIMIZER: REMOVE TOP STICKY CLUTTER
Hides top sticky description bar, keeps only high-converting bottom sticky cart
===================================================================== */
.klb-single-sticky-titles,
.klb-sticky-title-wrapper,
.single-sticky-titles,
.sticky-titles-wrapper {
display: none !important;
height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Ensure Bottom Sticky Cart is Clean & Uncramped */
.klb-sticky-single-cart,
.sticky-single-cart {
box-shadow: 0 -4px 20px rgba(0,0,0,0.08) !important;
border-top: 1px solid #f1f5f9 !important;
background: rgba(255,255,255,0.98) !important;
backdrop-filter: blur(8px) !important;
}
/* =====================================================================
ENTERPRISE HEADER & CATEGORIES BUTTON POLISH
===================================================================== */
/* 0. Header Brand Logo & Polish (Desktop 70px + Tagline / Mobile Clean Centered Emblem) */
@media screen and (min-width: 64.0625rem) {
.site-header .header-main {
min-height: 116px !important;
height: auto !important;
padding-top: 12px !important;
padding-bottom: 16px !important;
box-sizing: border-box !important;
}
.site-header .header-main .site-brand {
display: inline-flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
margin: 0 !important;
padding: 0 !important;
}
.site-header .header-main .site-brand a {
display: inline-flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-decoration: none !important;
margin: 0 !important;
padding: 0 !important;
}
.site-header .header-main .site-brand img.desktop-logo {
display: block !important;
width: 70px !important;
max-width: 70px !important;
height: auto !important;
max-height: 70px !important;
object-fit: contain !important;
margin-bottom: 2px !important;
}
.site-header .header-main .site-brand img.mobile-logo,
.site-header .header-main .site-brand .mobile-logo {
display: none !important;
height: 0 !important;
width: 0 !important;
visibility: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
.site-header .header-main .site-brand .brand-description {
display: block !important;
font-size: 11px !important;
line-height: 1.2 !important;
color: #71778e !important;
opacity: 0.8 !important;
margin-top: 2px !important;
margin-bottom: 4px !important;
padding: 0 !important;
white-space: nowrap !important;
letter-spacing: 0.02em !important;
}
}
/* Mobile & Tablet (< 1025px): Compact 56px Bar, Centered 68px Circular Emblem (Slight Overhang), No Tagline */
@media screen and (max-width: 64rem) {
.site-header .header-main {
min-height: 56px !important;
height: auto !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
overflow: visible !important;
}
.site-header.mobile-nav-enable .header-main > .container,
.site-header .header-main > .container {
height: 3.5rem !important;
min-height: 3.5rem !important;
align-items: center !important;
display: flex !important;
position: relative !important;
overflow: visible !important;
}
.site-header .header-main .column.column-left {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
flex: 1 !important;
height: 100% !important;
overflow: visible !important;
}
.site-header .header-main .column.column-left .header-buttons {
position: absolute !important;
left: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
z-index: 2 !important;
display: flex !important;
align-items: center !important;
}
.site-header .header-main .column.column-left .site-brand,
.site-header .header-main .site-brand {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto !important;
padding: 0 !important;
line-height: 0 !important;
position: relative !important;
overflow: visible !important;
z-index: 10 !important;
}
.site-header .header-main .site-brand a {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
text-decoration: none !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
overflow: visible !important;
}
.site-header .header-main .site-brand img.desktop-logo,
.site-header .header-main .site-brand .desktop-logo {
display: none !important;
height: 0 !important;
width: 0 !important;
visibility: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
.site-header .header-main .site-brand img.mobile-logo {
display: block !important;
width: 68px !important;
max-width: 68px !important;
height: 68px !important;
max-height: 68px !important;
object-fit: contain !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
z-index: 10 !important;
}
/* Strictly hide tagline on mobile as in original */
.site-header .header-main .site-brand .brand-description,
.brand-description {
display: none !important;
height: 0 !important;
width: 0 !important;
visibility: hidden !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Clean transparent cart on mobile as in screenshot */
.site-header .header-cart.button-item > a {
background: transparent !important;
border: none !important;
padding: 0 !important;
box-shadow: none !important;
}
.site-header .header-cart .cart-price {
margin-right: 8px !important;
}
}
/* Transactional Pages (Cart, Checkout, Account) Clean Spacing & Border */
.woocommerce-cart .site-header .header-main,
.woocommerce-checkout .site-header .header-main,
.woocommerce-account .site-header .header-main {
border-bottom: 1px solid #eaedef !important;
padding-bottom: 18px !important;
}
.woocommerce-cart .site-header .header-nav,
.woocommerce-checkout .site-header .header-nav,
.woocommerce-account .site-header .header-nav,
.woocommerce-cart .site-header .all-categories,
.woocommerce-checkout .site-header .all-categories,
.woocommerce-account .site-header .all-categories {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
.woocommerce-cart .shop-content,
.woocommerce-checkout .shop-content,
.woocommerce-account .shop-content {
padding-top: 10px !important;
}
.woocommerce-cart .shop-content .woocommerce-breadcrumb,
.woocommerce-checkout .shop-content .woocommerce-breadcrumb,
.woocommerce-account .shop-content .woocommerce-breadcrumb {
padding: 10px 0 !important;
margin-top: 6px !important;
margin-bottom: 14px !important;
}
/* Admin View Polish (Never overlap logo or buttons) */
body.admin-bar .site-header .header-main {
position: relative !important;
z-index: 50 !important;
}
body.admin-bar .site-header .header-main .site-brand {
position: relative !important;
z-index: 60 !important;
}
body.admin-bar .site-header .all-categories {
position: relative !important;
top: auto !important;
margin-top: 0 !important;
}
/* 1. "ALL CATEGORIES" Button: Total products badge (Shown for logged-in Admin only) */
body:not(.admin-bar) .site-header .all-categories > a .description,
body:not(.admin-bar) .all-categories .description,
.all-categories .description {
display: none !important;
visibility: hidden !important;
height: 0 !important;
width: 0 !important;
overflow: hidden !important;
}
body.admin-bar .site-header .all-categories > a .description,
body.admin-bar .all-categories .description {
display: inline-flex !important;
visibility: visible !important;
height: 18px !important;
width: auto !important;
overflow: visible !important;
position: absolute !important;
bottom: -8px !important;
left: 18px !important;
align-items: center !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
padding: 0 8px !important;
color: #475569 !important;
background-color: #f1f5f9 !important;
border: 1px solid #ffffff !important;
border-radius: 18px !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
z-index: 5 !important;
}
.site-header .all-categories > a {
position: relative !important;
height: 44px !important;
padding: 0 18px !important;
border-radius: 22px !important;
background: linear-gradient(135deg, #2bbef9 0%, #0284c7 100%) !important;
box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: 0.02em !important;
color: #ffffff !important;
transition: all 0.2s ease !important;
}
.site-header .all-categories > a:hover {
box-shadow: 0 6px 18px rgba(2, 132, 199, 0.35) !important;
transform: translateY(-1px) !important;
}
.site-header .all-categories > a .text {
margin-left: 6px !important;
}
.site-header .all-categories > a:after {
content: '' !important;
display: inline-block !important;
width: 12px !important;
height: 12px !important;
margin-left: 8px !important;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center center !important;
background-size: contain !important;
position: static !important;
}
.site-header .all-categories > a i,
.site-header .all-categories > a i.klbth-icon-menu-thin {
display: inline-flex !important;
align-items: center !important;
}
/* 2. Header Cart Icon & Count Badge Fix */
.header-cart .button-icon i,
.header-cart .button-icon i.klbth-icon-shopping-bag,
.header-cart .button-icon i.klbth-icon-commerce {
display: none !important;
}
.header-cart.button-item > a {
display: inline-flex !important;
align-items: center !important;
position: relative !important;
padding: 6px 14px !important;
border-radius: 12px !important;
background: #fff5f5 !important;
border: 1.5px solid rgba(234, 43, 15, 0.2) !important;
transition: all 0.2s ease !important;
text-decoration: none !important;
}
.header-cart.button-item > a:hover {
background: #fee2e2 !important;
border-color: rgba(234, 43, 15, 0.4) !important;
transform: translateY(-1px) !important;
}
.header-cart .cart-price {
font-weight: 700 !important;
font-size: 14px !important;
color: #16a34a !important;
margin-right: 10px !important;
}
.header-cart .button-icon {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 26px !important;
height: 26px !important;
}
.header-cart .button-icon svg {
width: 24px !important;
height: 24px !important;
stroke: #ea2b0f !important;
}
.header-cart .cart-count-icon {
position: absolute !important;
top: -6px !important;
right: -6px !important;
background: #ea2b0f !important;
color: #ffffff !important;
font-size: 11px !important;
font-weight: 700 !important;
min-width: 18px !important;
height: 18px !important;
border-radius: 9px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 4px !important;
box-shadow: 0 2px 6px rgba(234, 43, 15, 0.4) !important;
border: 1.5px solid #ffffff !important;
}
/* =====================================================================
UNIVERSAL CRISP SLIDER PREV & NEXT ARROWS (CATEGORY & PRODUCT SLIDERS)
Fixes empty white circles by injecting crisp vector SVG arrows
===================================================================== */
.slick-prev,
.slick-next,
.slick-arrow,
.module-category .slick-prev,
.module-category .slick-next,
.site-slider .slick-prev,
.site-slider .slick-next,
.products .slick-prev,
.products .slick-next,
.slider-wrapper .slick-prev,
.slider-wrapper .slick-next,
.swiper-button-prev,
.swiper-button-next {
width: 38px !important;
height: 38px !important;
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 50% !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
z-index: 20 !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
opacity: 0.95 !important;
color: transparent !important;
font-size: 0 !important;
}
.slick-prev:hover,
.slick-next:hover,
.slick-arrow:hover,
.swiper-button-prev:hover,
.swiper-button-next:hover {
background: #ffffff !important;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16) !important;
transform: translateY(-50%) scale(1.1) !important;
opacity: 1 !important;
border-color: #cbd5e1 !important;
}
/* Crisp SVG Left Arrow */
.slick-prev::before,
.slick-arrow.slick-prev::before,
.module-category .slick-prev::before,
.site-slider .slick-prev::before,
.products .slick-prev::before,
.slider-wrapper .slick-prev::before,
.swiper-button-prev::before {
content: '' !important;
display: block !important;
width: 18px !important;
height: 18px !important;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") no-repeat center center !important;
background-size: contain !important;
position: static !important;
}
/* Crisp SVG Right Arrow */
.slick-next::before,
.slick-arrow.slick-next::before,
.module-category .slick-next::before,
.site-slider .slick-next::before,
.products .slick-next::before,
.slider-wrapper .slick-next::before,
.swiper-button-next::before {
content: '' !important;
display: block !important;
width: 18px !important;
height: 18px !important;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat center center !important;
background-size: contain !important;
position: static !important;
}
/* 2. Delivery Estimator & Easy Return Widget Canvas (Zero Pop-in Jump) */
.alikart-delivery-box {
min-height: 120px !important;
contain: layout style !important;
background: #f8fafc !important;
border-radius: 12px !important;
}
.cart-trust-badges {
min-height: 48px !important;
contain: layout style !important;
}
/* Global Font Stack Harmonization (Zero-FOUT & Fallback Metric Match) */
h1, h2, h3, h4, h5, h6, .site-title, .product_title, .entry-title, .price, .woocommerce-Price-amount {
font-family: 'Dosis', 'Dosis-fallback', 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-display: swap;
}
body, p, span, a, li, input, button, select, textarea, .nav-link, .menu-item {
font-family: 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-display: swap;
}
.show-password-input,
span.show-password-input,
button.show-password-input,
.woocommerce-account .show-password-input,
.woocommerce-checkout .show-password-input,
.woocommerce-form-login .show-password-input,
.woocommerce-form-register .show-password-input {
display: none !important;
}
/* Universal Nextend & Social Login 100% Full-Width Formatting */
.nsl-container,
.nsl-container-grid,
.nsl-container-block,
.nsl-container-inline,
div[class*="nsl-container"],
.social-login-container,
.social-login-buttons,
.wc-social-login-buttons,
.wc-social-login,
.ywsl-social-login,
.ywsl_social_login,
.heateor_sl_container,
.the_champ_login_container,
.mo-openid-app-icons,
.social_login {
margin-top: 10px !important;
margin-bottom: 22px !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
align-items: stretch !important;
justify-content: center !important;
box-sizing: border-box !important;
clear: both !important;
}
.nsl-container .nsl-container-buttons,
.nsl-container-grid .nsl-container-buttons,
.nsl-container-block .nsl-container-buttons {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
}
.nsl-container .nsl-button,
.nsl-container-grid .nsl-button,
.nsl-container-block .nsl-button,
.nsl-container-inline .nsl-button,
div[class*="nsl-container"] a[class*="nsl-button"],
.social-login-container a,
.wc-social-login-buttons a,
.wc-social-login a,
.ywsl-social-login a,
.heateor_sl_container a,
.the_champ_login_container a,
.social_login a {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: 48px !important;
border-radius: 12px !important;
margin: 0 !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 14px !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: all 0.25s ease !important;
}
/* Checkout Social Divider */
.ak-social-divider {
display: flex;
align-items: center;
text-align: center;
margin: 20px 0 14px 0;
color: #9ca3af;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
width: 100%;
clear: both;
}
.ak-social-divider::before,
.ak-social-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid #e5e7eb;
}
/* Clean container reset for WooCommerce Lost Password & Reset Password */
body.woocommerce-lost-password .woocommerce,
body.woocommerce-ResetPassword .woocommerce,
body.woocommerce-lost-password .shop-content .container > .woocommerce {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 auto !important;
max-width: 100% !important;
}
/* Lost Password Reset Link Sent & Success Message Styling */
body.woocommerce-lost-password .woocommerce-message,
.ak-reset-sent-wrapper {
background: #ffffff !important;
border-radius: 16px !important;
border: 1.5px solid #10b981 !important;
border-left: 6px solid #10b981 !important;
padding: 24px 28px !important;
box-shadow: 0 15px 30px -5px rgba(16, 185, 129, 0.12) !important;
font-family: 'Poppins', sans-serif !important;
color: #1f2937 !important;
max-width: 500px !important;
margin: 30px auto !important;
box-sizing: border-box !important;
}
.ak-reset-success-card {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 12px !important;
}
.ak-reset-success-header {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
color: #065f46 !important;
font-size: 19px !important;
font-weight: 700 !important;
}
.ak-reset-success-header i {
font-size: 30px !important;
color: #10b981 !important;
}
.ak-reset-success-body {
font-size: 14px !important;
color: #4b5563 !important;
line-height: 1.6 !important;
}
.ak-btn-signin-now {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 12px 28px !important;
background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%) !important;
color: #ffffff !important;
border-radius: 12px !important;
font-size: 14px !important;
font-weight: 600 !important;
text-decoration: none !important;
box-shadow: 0 4px 15px rgba(217, 119, 6, 0.3) !important;
transition: all 0.25s ease !important;
margin-top: 10px !important;
}
.ak-btn-signin-now:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 20px rgba(217, 119, 6, 0.4) !important;
}
.ak-reset-sent-card {
display: flex;
flex-direction: column;
gap: 12px;
}
.ak-reset-sent-header {
display: flex;
align-items: center;
gap: 10px;
color: #065f46;
font-size: 17px;
font-weight: 700;
}
.ak-reset-sent-header i {
font-size: 26px;
color: #10b981;
}
.ak-reset-sent-body {
font-size: 13.5px;
color: #4b5563;
line-height: 1.6;
}
.ak-reset-sent-notice {
background: #ecfdf5;
border: 1px solid #a7f3d0;
border-radius: 10px;
padding: 12px 15px;
font-size: 13px;
color: #047857;
display: flex;
align-items: center;
gap: 10px;
margin-top: 6px;
font-weight: 500;
}
/* Lost Password Page Icons & Layout Enhancements */
.ak-lost-pass-header {
text-align: center !important;
margin-bottom: 25px !important;
}
.ak-lost-pass-icon-badge {
width: 60px !important;
height: 60px !important;
background: #fef3c7 !important;
color: #d97706 !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 30px !important;
margin-bottom: 12px !important;
box-shadow: 0 4px 15px rgba(217, 119, 6, 0.15) !important;
}
.ak-lost-pass-header h2 {
font-size: 22px !important;
font-weight: 700 !important;
color: #1f2937 !important;
margin: 0 0 6px 0 !important;
letter-spacing: -0.5px !important;
}
.ak-lost-pass-header p {
font-size: 13.5px !important;
color: #6b7280 !important;
line-height: 1.5 !important;
margin: 0 !important;
}
.ak-back-to-login {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
margin-top: 20px !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #d97706 !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
.ak-back-to-login:hover {
color: #b45309 !important;
text-decoration: underline !important;
}
.ak-security-badge {
margin-top: 22px !important;
padding-top: 18px !important;
border-top: 1px dashed #e5e7eb !important;
text-align: center !important;
color: #9ca3af !important;
font-size: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
}
.ak-security-badge i {
font-size: 16px !important;
color: #10b981 !important;
}
/* =====================================================================
ENTERPRISE ZERO-LAYOUT-SHIFT (ZERO CLS) ANTI-JUMP ENGINE
Reserves exact aspect-ratio and dimensions before assets finish downloading
===================================================================== */
/* 1. Standardized Full-In-Box Product Image Canvas (Zero Awkward Gaps / 100% Organized Symmetrical Layout) */
.product-wrapper .thumbnail-wrapper,
.woocommerce ul.products li.product .thumbnail-wrapper,
.product-type-simple .product-thumbnails,
.products .product .thumbnail-wrapper {
aspect-ratio: 1 / 1 !important;
width: 100% !important;
background-color: #fff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
border-radius: 12px 12px 0 0;
position: relative;
}
.product-wrapper .thumbnail-wrapper > a,
.woocommerce ul.products li.product .thumbnail-wrapper > a,
.products .product .thumbnail-wrapper > a {
display: block !important;
width: 100% !important;
height: 100% !important;
aspect-ratio: 1 / 1 !important;
overflow: hidden !important;
}
.product-wrapper .thumbnail-wrapper img,
.woocommerce ul.products li.product .thumbnail-wrapper img,
.products .product .thumbnail-wrapper img,
.thumbnail-wrapper > a img,
.thumbnail-wrapper img {
aspect-ratio: 1 / 1 !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center !important;
padding: 0 !important;
box-sizing: border-box !important;
display: block !important;
transition: transform 0.3s ease;
}
.product-wrapper:hover .thumbnail-wrapper img,
.woocommerce ul.products li.product:hover .thumbnail-wrapper img {
transform: scale(1.04);
}
/* 2. Prevent Top Notification & Header Shifting */
.top-notification {
min-height: 38px;
contain: layout size;
}
/* 3. Prevent Category Slider & Icon Jumping */
.ak-cat-item .cat-icon-wrapper,
.category-item .category-image {
aspect-ratio: 1 / 1 !important;
min-width: 60px;
min-height: 60px;
contain: layout size;
}
/* 4. Prevent Font Swap Jumping (CLS) */
body, h1, h2, h3, h4, h5, h6, p, a, span {
text-rendering: optimizeLegibility;
font-display: swap;
}
/* 5. Smooth Content Visibility */
.site-content {
content-visibility: visible;
}
/* =====================================================================
ENTERPRISE ZERO-FOUT & FONT METRICS MATCHING ENGINE
Eliminates Flash of Unstyled Text & Font Layout Jumps
===================================================================== */
/* 1. Perfect Metric-Matched Fallback Fonts (Zero Width / Height Shift) */
@font-face {
font-family: 'Roboto-Fallback';
src: local('Segoe UI'), local('Arial'), local('Helvetica');
ascent-override: 92.77%;
descent-override: 24.41%;
line-gap-override: 0%;
/* size-adjust: 100.2%; */
}
@font-face {
font-family: 'Inter-Fallback';
src: local('Segoe UI'), local('Arial'), local('Helvetica');
ascent-override: 90%;
descent-override: 22.4%;
line-gap-override: 0%;
/* size-adjust: 107.5%; */
}
/* 2. Apply Unified Font Stack with Fallback Matching */
body, button, input, select, textarea {
font-family: 'Inter', 'Roboto', 'Inter-Fallback', 'Roboto-Fallback', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
text-rendering: optimizeSpeed;
-webkit-font-smoothing: antialiased;
}
/* 3. Lock Critical Header, Title, and Navigation Heights */
.site-header {
min-height: 80px;
}
.site-header .header-main {
min-height: 60px;
contain: layout size;
}
.product-title, .entry-title, .product_title {
line-height: 1.3 !important;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.woocommerce-loop-product__title {
min-height: 2.6em;
line-height: 1.3em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.price {
min-height: 1.5em;
line-height: 1.5em;
}
/* 4. Reserve Exact Image Canvas to Prevent Cumulative Layout Shift (CLS) */
.products:not(.cart-dropdown .products) > .product > .product-wrapper > .thumbnail-wrapper,
.site-main .product-wrapper > .thumbnail-wrapper,
.content-wrapper .product-wrapper > .thumbnail-wrapper {
aspect-ratio: 1 / 1 !important;
min-height: 180px;
contain: layout paint;
position: relative;
}
/* Fix Mini-Cart & Cart Drawer Thumbnails (Zero Stretched/Tall Images) */
.cart-dropdown .thumbnail-wrapper,
.cart-dropdown-wrapper .thumbnail-wrapper,
.widget_shopping_cart .thumbnail-wrapper,
.woocommerce-mini-cart-item .thumbnail-wrapper,
.fl-mini-cart-content .thumbnail-wrapper,
.cart-dropdown .product-wrapper .thumbnail-wrapper {
flex: 0 0 64px !important;
width: 64px !important;
max-width: 64px !important;
min-height: 64px !important;
max-height: 64px !important;
height: 64px !important;
aspect-ratio: 1 / 1 !important;
border-radius: 10px !important;
overflow: hidden !important;
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 4px !important;
margin-right: 12px !important;
}
.cart-dropdown .thumbnail-wrapper img,
.cart-dropdown-wrapper .thumbnail-wrapper img,
.widget_shopping_cart img,
.woocommerce-mini-cart-item img,
.fl-mini-cart-content img,
.cart-dropdown .product-wrapper .thumbnail-wrapper img {
width: 100% !important;
height: 100% !important;
max-height: 56px !important;
object-fit: contain !important;
aspect-ratio: 1 / 1 !important;
border-radius: 6px !important;
}
/* =====================================================================
ENTERPRISE SKELETON SHIMMER & MICRO-INTERACTIONS ENGINE
===================================================================== */
@keyframes akShimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.product-wrapper .thumbnail-wrapper:not(:has(img[src])):not(:has(img[srcset])),
.thumbnail-wrapper.is-loading {
background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%) !important;
background-size: 200% 100% !important;
animation: akShimmer 1.5s infinite linear !important;
}
/* 1. Interactive Toastify & AJAX Add-to-Cart Notification Card */
.toastify {
position: fixed !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
max-width: 95vw !important;
width: auto !important;
z-index: 9999999 !important;
pointer-events: auto !important;
}
.toastify.toastify-top {
top: calc(15px + env(safe-area-inset-top, 0px)) !important;
bottom: auto !important;
}
.toastify.toastify-bottom {
bottom: calc(25px + env(safe-area-inset-bottom, 0px)) !important;
top: auto !important;
}
.toastify.toastify-right { right: 25px !important; left: auto !important; }
.toastify.toastify-left { left: 25px !important; right: auto !important; }
.toastify.toastify-center { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; }
/* Tablet, iPad & Mobile: Force Top center */
@media (max-width: 1024px) {
.toastify {
max-width: calc(100vw - 24px) !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
display: flex !important;
justify-content: center !important;
top: calc(15px + env(safe-area-inset-top, 0px)) !important;
bottom: auto !important;
}
.toastify.toastify-bottom {
top: calc(15px + env(safe-area-inset-top, 0px)) !important;
bottom: auto !important;
}
}
.ak-cart-toast {
display: flex !important;
align-items: center !important;
gap: 12px !important;
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border: 1px solid rgba(234, 43, 15, 0.22) !important;
border-radius: 14px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(234, 43, 15, 0.1) !important;
padding: 9px 14px !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
color: #0f172a !important;
width: 100% !important;
max-width: 440px !important;
box-sizing: border-box !important;
animation: akToastSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
will-change: transform, opacity;
}
.toastify.toastify-top .ak-cart-toast {
animation: akToastSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.toastify.toastify-bottom .ak-cart-toast {
animation: akToastSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@keyframes akToastSlideDown {
from { transform: translateY(-25px) scale(0.96); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes akToastSlideUp {
from { transform: translateY(25px) scale(0.96); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.ak-toast-thumb {
width: 44px !important;
height: 44px !important;
border-radius: 10px !important;
object-fit: cover !important;
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
flex-shrink: 0 !important;
}
.ak-toast-info {
flex: 1 1 auto !important;
min-width: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
.ak-toast-title {
font-size: 13px !important;
font-weight: 700 !important;
color: #0f172a !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
margin: 0 0 3px 0 !important;
line-height: 1.25 !important;
}
.ak-toast-msg {
font-size: 12px !important;
color: #16a34a !important;
font-weight: 600 !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
margin: 0 !important;
white-space: nowrap !important;
line-height: 1 !important;
}
.ak-toast-btn {
background: linear-gradient(135deg, #ea2b0f 0%, #ff5722 100%) !important;
color: #ffffff !important;
padding: 8px 15px !important;
border-radius: 10px !important;
font-size: 13px !important;
font-weight: 700 !important;
text-decoration: none !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
transition: all 0.2s ease !important;
box-shadow: 0 4px 12px rgba(234, 43, 15, 0.32) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
}
.ak-toast-btn:hover {
transform: translateY(-1px) !important;
box-shadow: 0 6px 16px rgba(234, 43, 15, 0.45) !important;
color: #ffffff !important;
}
.ak-toast-btn:active {
transform: scale(0.97) !important;
}
.ak-toast-qty-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: #ea2b0f !important;
color: #ffffff !important;
font-size: 11px !important;
font-weight: 800 !important;
padding: 1px 7px !important;
border-radius: 999px !important;
margin-left: 5px !important;
letter-spacing: 0.3px !important;
box-shadow: 0 2px 6px rgba(234, 43, 15, 0.35) !important;
animation: akToastBadgePop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.ak-toast-badge-pill {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: #fee2e2 !important;
color: #b91c1c !important;
font-size: 11px !important;
font-weight: 800 !important;
padding: 1px 6px !important;
border-radius: 6px !important;
margin-left: 6px !important;
border: 1px solid rgba(234, 43, 15, 0.25) !important;
vertical-align: middle !important;
animation: akToastBadgePop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
@keyframes akToastBadgePop {
0% { transform: scale(0.6); opacity: 0; }
70% { transform: scale(1.15); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
.ak-toast-thumb-fallback {
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #fff5f5 !important;
border: 1px solid rgba(234, 43, 15, 0.2) !important;
}
/* 2. Interactive Circular Scroll Progress Indicator & Back to Top Button */
.ak-scroll-progress-wrap {
position: fixed;
bottom: 24px;
right: 24px;
height: 42px;
width: 42px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
z-index: 9999;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
background: #ffffff;
border: 1px solid #e2e8f0;
}
.ak-scroll-progress-wrap.active-progress {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.ak-scroll-progress-wrap:hover {
box-shadow: 0 6px 20px rgba(234, 43, 15, 0.25);
transform: translateY(-2px);
border-color: rgba(234, 43, 15, 0.3);
}
.ak-scroll-progress-wrap::after {
content: '' !important;
position: absolute;
width: 16px;
height: 16px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ea2b0f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E") no-repeat center center !important;
background-size: contain !important;
transition: all 0.2s ease;
}
.ak-scroll-progress-wrap:hover::after {
transform: translate(-50%, -58%) !important;
}
.ak-scroll-progress-wrap svg.progress-circle path {
stroke: #ea2b0f;
stroke-width: 4;
box-sizing: border-box;
transition: all 0.2s linear;
}
/* 3. Micro-Interaction: Button Click Ripple & Depth */
button:active, .button:active, .single_add_to_cart_button:active {
transform: scale(0.98) !important;
transition: transform 0.08s ease !important;
}
/* 4. One-Click Coupon Pill & Social Share Button */
.ak-coupon-pill, .coupon-code {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 4px 10px !important;
background: #f0fdf4 !important;
border: 1px dashed #16a34a !important;
border-radius: 8px !important;
color: #16a34a !important;
font-weight: 700 !important;
font-size: 12px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
user-select: all !important;
}
.ak-coupon-pill:hover, .coupon-code:hover {
background: #dcfce7 !important;
transform: translateY(-1px) !important;
}
.ak-share-product {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 8px 14px !important;
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 10px !important;
color: #334155 !important;
font-size: 13px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
text-decoration: none !important;
}
.ak-share-product:hover {
background: #f1f5f9 !important;
color: #ea2b0f !important;
border-color: #cbd5e1 !important;
transform: translateY(-1px) !important;
}
/* =====================================================================
ENTERPRISE CONTENT-VISIBILITY (80% FASTER INITIAL PAGE RENDER)
Skips rendering calculations for off-screen products until scrolled
===================================================================== */
.products:not(.cart-dropdown .products) > .product {
content-visibility: auto;
contain-intrinsic-size: 240px 380px;
}
/* =====================================================================
SINGLE PRODUCT AJAX ADD-TO-CART BUTTON STATES
===================================================================== */
.single_add_to_cart_button.loading {
opacity: 0.75 !important;
position: relative !important;
}
.single_add_to_cart_button.loading::after {
content: "" !important;
display: inline-block !important;
width: 14px !important;
height: 14px !important;
margin-left: 8px !important;
border: 2px solid rgba(255, 255, 255, 0.4) !important;
border-top-color: #ffffff !important;
border-radius: 50% !important;
animation: akSpin 0.6s linear infinite !important;
vertical-align: middle !important;
}
@keyframes akSpin {
to { transform: rotate(360deg); }
}
.single_add_to_cart_button.added {
background: #16a34a !important;
border-color: #16a34a !important;
color: #ffffff !important;
}
/* =====================================================================
APP-LIKE MOBILE BOTTOM NAVIGATION BAR
===================================================================== */
@media (max-width: 768px) {
.ak-mobile-app-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-top: 1px solid #e2e8f0;
display: flex;
align-items: center;
justify-content: space-around;
z-index: 9999;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}
.ak-mobile-nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
color: #64748b;
font-size: 10px;
font-weight: 600;
position: relative;
flex: 1;
height: 100%;
transition: color 0.15s ease;
}
.ak-mobile-nav-item.active,
.ak-mobile-nav-item:active {
color: #ea2b0f;
}
.ak-mobile-nav-item svg {
width: 20px;
height: 20px;
margin-bottom: 2px;
}
.ak-mobile-nav-badge {
position: absolute;
top: 6px;
right: calc(50% - 16px);
background: #ea2b0f;
color: #ffffff;
font-size: 9px;
font-weight: 800;
min-width: 15px;
height: 15px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 3px;
}
body {
padding-bottom: 60px !important;
}
}
/* =====================================================================
ENTERPRISE GPU HARDWARE ACCELERATION LAYER
Offloads interactive animations to device GPU for 120 FPS smoothness
===================================================================== */
.product-wrapper,
.product-wrapper:hover,
.slick-prev,
.slick-next,
.ak-cart-toast,
.ak-scroll-progress-wrap,
.header-cart,
.site-header {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
perspective: 1000px;
}
/* =====================================================================
GOOGLE SITE KIT ADMIN BAR FRONTEND DROPDOWN FIX
Fixes narrow vertical squishing and restores full responsive grid
===================================================================== */
#wpadminbar #wp-admin-bar-google-site-kit .ab-sub-wrapper,
#wpadminbar #wp-admin-bar-google-site-kit.menupop .ab-sub-wrapper {
min-width: 360px !important;
width: max-content !important;
max-width: 90vw !important;
white-space: normal !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
border-radius: 0 0 12px 12px !important;
overflow: visible !important;
z-index: 999999 !important;
background: #1e1e1e !important;
padding: 12px 16px !important;
}
#wpadminbar #wp-admin-bar-google-site-kit .googlesitekit-adminbar,
#wpadminbar #wp-admin-bar-google-site-kit .googlesitekit-adminbar-container {
display: block !important;
min-width: 320px !important;
width: 100% !important;
padding: 0 !important;
box-sizing: border-box !important;
line-height: 1.5 !important;
}
#wpadminbar #wp-admin-bar-google-site-kit .googlesitekit-adminbar__item,
#wpadminbar #wp-admin-bar-google-site-kit .googlesitekit-data-block {
display: inline-block !important;
min-width: 130px !important;
margin: 6px !important;
vertical-align: top !important;
}
#wpadminbar #wp-admin-bar-google-site-kit li,
#wpadminbar #wp-admin-bar-google-site-kit .ab-item {
height: auto !important;
line-height: 1.5 !important;
white-space: normal !important;
width: auto !important;
}
/* =====================================================================
ENTERPRISE 404 PAGE — ALIKART ECOMMERCE
===================================================================== */
/* Hide old default 404 styles to avoid conflicts */
.page-not-found,
.page-not-found--inner {
display: none !important;
}
.ak-404-hero {
min-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
padding: 60px 20px 80px;
position: relative;
overflow: hidden;
}
.ak-404-container {
max-width: 680px;
width: 100%;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 2;
}
/* ── Visual / Icon ─────────────────────────────────────────────── */
.ak-404-visual {
position: relative;
display: flex;
justify-content: center;
margin-bottom: 32px;
}
.ak-404-icon-ring {
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(135deg, #fff5f0 0%, #fff0e6 100%);
border: 3px solid rgba(248, 125, 9, 0.15);
display: flex;
align-items: center;
justify-content: center;
position: relative;
animation: ak404Pulse 3s ease-in-out infinite;
}
.ak-404-cart-icon {
width: 72px;
height: 72px;
color: #f87d09;
}
.ak-404-float-dot {
position: absolute;
border-radius: 50%;
opacity: 0.6;
animation: ak404Float 4s ease-in-out infinite;
}
.ak-404-float-dot--1 {
width: 12px;
height: 12px;
background: #2bbef9;
top: 10px;
left: calc(50% - 110px);
animation-delay: 0s;
}
.ak-404-float-dot--2 {
width: 8px;
height: 8px;
background: #f87d09;
top: 30px;
right: calc(50% - 105px);
animation-delay: 1s;
}
.ak-404-float-dot--3 {
width: 16px;
height: 16px;
background: #34d399;
bottom: 10px;
left: 50%;
animation-delay: 2s;
}
@keyframes ak404Pulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(248, 125, 9, 0.12); }
50% { transform: scale(1.03); box-shadow: 0 0 0 18px rgba(248, 125, 9, 0); }
}
@keyframes ak404Float {
0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
50% { transform: translateY(-12px) scale(1.2); opacity: 1; }
}
/* ── Content ───────────────────────────────────────────────────── */
.ak-404-content {
margin-bottom: 36px;
}
.ak-404-badge {
display: inline-block;
padding: 5px 16px;
border-radius: 20px;
background: #fff0e6;
color: #f87d09;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 16px;
border: 1px solid rgba(248, 125, 9, 0.15);
}
.ak-404-title {
font-size: 7rem;
font-weight: 900;
line-height: 1;
margin: 0 0 12px;
background: linear-gradient(135deg, #f87d09 0%, #e06d04 50%, #f87d09 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.03em;
}
.ak-404-subtitle {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
margin: 0 0 10px;
line-height: 1.3;
}
.ak-404-desc {
font-size: 0.95rem;
color: #64748b;
max-width: 440px;
margin: 0 auto;
line-height: 1.6;
}
/* ── Search ────────────────────────────────────────────────────── */
.ak-404-search-wrap {
position: relative;
display: flex;
align-items: center;
max-width: 520px;
width: 100%;
margin: 0 auto 20px;
background: #ffffff;
border: 2px solid #e2e8f0;
border-radius: 16px;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
z-index: 100;
}
.ak-404-search-wrap:focus-within {
border-color: #f87d09;
box-shadow: 0 0 0 4px rgba(248, 125, 9, 0.1), 0 8px 30px rgba(0, 0, 0, 0.06);
}
.ak-404-search-icon {
margin-left: 18px;
color: #94a3b8;
flex-shrink: 0;
pointer-events: none;
}
.ak-404-search-input {
flex: 1;
border: none;
outline: none;
padding: 16px 12px;
font-size: 1rem;
color: #1e293b;
background: transparent;
font-family: inherit;
min-width: 0;
}
.ak-404-search-input::placeholder {
color: #94a3b8;
}
/* Keyboard shortcut badge */
.ak-404-kbd {
display: inline-flex;
align-items: center;
padding: 4px 8px;
border-radius: 6px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
color: #94a3b8;
font-size: 11px;
font-family: inherit;
font-weight: 600;
flex-shrink: 0;
margin-right: 14px;
line-height: 1;
pointer-events: none;
}
/* ── AJAX Results Dropdown ─────────────────────────────────────── */
.ak-404-results {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
max-height: 380px;
overflow-y: auto;
z-index: 999;
padding: 6px;
}
.ak-404-result-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: 10px;
text-decoration: none;
color: #1e293b;
transition: background 0.15s ease;
}
.ak-404-result-item:hover,
.ak-404-result-active {
background: #fff7f0;
}
.ak-404-result-img {
width: 48px;
height: 48px;
border-radius: 10px;
object-fit: cover;
background: #f8fafc;
border: 1px solid #f1f5f9;
flex-shrink: 0;
}
.ak-404-result-info {
display: flex;
flex-direction: column;
min-width: 0;
gap: 2px;
}
.ak-404-result-title {
font-size: 0.9rem;
font-weight: 600;
color: #1e293b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ak-404-result-price {
font-size: 0.85rem;
font-weight: 700;
color: #f87d09;
}
.ak-404-result-empty,
.ak-404-result-loading {
padding: 20px 16px;
text-align: center;
color: #64748b;
font-size: 0.9rem;
}
.ak-404-result-view-all {
display: block;
text-align: center;
padding: 12px 16px;
margin: 4px 6px 6px;
border-radius: 10px;
background: #f8fafc;
color: #f87d09;
font-size: 0.85rem;
font-weight: 700;
text-decoration: none;
border: 1px solid #f1f5f9;
transition: all 0.2s ease;
}
.ak-404-result-view-all:hover {
background: #fff5f0;
border-color: #f87d09;
}
.ak-404-spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2.5px solid #e2e8f0;
border-top-color: #f87d09;
border-radius: 50%;
animation: ak404Spin 0.7s linear infinite;
vertical-align: middle;
margin-right: 8px;
}
@keyframes ak404Spin {
to { transform: rotate(360deg); }
}
/* ── Recent Searches ───────────────────────────────────────────── */
.ak-404-recent {
display: none;
align-items: center;
justify-content: center;
gap: 8px;
max-width: 520px;
width: 100%;
margin: 0 auto 20px;
flex-wrap: wrap;
}
.ak-404-recent-label {
font-size: 0.75rem;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0;
}
.ak-404-recent-chips {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.ak-404-recent-chip {
display: inline-block;
padding: 5px 12px;
border-radius: 8px;
background: #f8fafc;
border: 1px solid #e2e8f0;
color: #475569;
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
}
.ak-404-recent-chip:hover {
background: #fff5f0;
border-color: #f87d09;
color: #f87d09;
}
.ak-404-recent-clear {
padding: 5px 10px;
border-radius: 8px;
border: none;
background: transparent;
color: #94a3b8;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: color 0.2s;
font-family: inherit;
}
.ak-404-recent-clear:hover {
color: #ef4444;
}
/* ── Buttons ───────────────────────────────────────────────────── */
.ak-404-btn-row {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 8px;
margin-bottom: 8px;
}
.ak-404-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 28px;
border-radius: 12px;
font-size: 0.9rem;
font-weight: 700;
text-decoration: none;
transition: all 0.2s ease;
font-family: inherit;
}
.ak-404-btn--primary {
background: linear-gradient(135deg, #f87d09 0%, #ff7b00 100%);
color: #ffffff;
box-shadow: 0 4px 14px rgba(248, 125, 9, 0.3);
}
.ak-404-btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(248, 125, 9, 0.4);
background: linear-gradient(135deg, #e06d04 0%, #f87d09 100%);
}
.ak-404-btn--secondary {
background: #ffffff;
color: #334155;
border: 2px solid #e2e8f0;
}
.ak-404-btn--secondary:hover {
border-color: #f87d09;
color: #f87d09;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
/* ── Quick Links / Chips ───────────────────────────────────────── */
.ak-404-quick-links {
border-top: 1px solid #f1f5f9;
padding-top: 32px;
}
.ak-404-quick-title {
font-size: 0.8rem;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0 0 14px;
}
.ak-404-chips {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.ak-404-chip {
display: inline-block;
padding: 8px 18px;
border-radius: 10px;
background: #f8fafc;
border: 1.5px solid #e2e8f0;
color: #475569;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
}
.ak-404-chip:hover {
background: #fff5f0;
border-color: #f87d09;
color: #f87d09;
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(248, 125, 9, 0.1);
}
/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
.ak-404-hero {
min-height: 60vh;
padding: 40px 16px 60px;
}
.ak-404-icon-ring {
width: 120px;
height: 120px;
}
.ak-404-cart-icon {
width: 56px;
height: 56px;
}
.ak-404-title {
font-size: 4.5rem;
}
.ak-404-subtitle {
font-size: 1.2rem;
}
.ak-404-desc {
font-size: 0.9rem;
}
.ak-404-btn {
padding: 12px 22px;
font-size: 0.85rem;
}
.ak-404-chip {
padding: 7px 14px;
font-size: 0.8rem;
}
.ak-404-kbd {
display: none;
}
.ak-404-search-input {
padding: 14px 10px;
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
.ak-404-title {
font-size: 3.5rem;
}
.ak-404-search-wrap {
border-radius: 12px;
}
.ak-404-results {
border-radius: 12px;
max-height: 300px;
}
.ak-404-result-img {
width: 40px;
height: 40px;
}
.ak-404-btn-row {
flex-direction: column;
width: 100%;
}
.ak-404-btn {
width: 100%;
justify-content: center;
}
}
/* =====================================================================
ENTERPRISE BANNER & LOCAL ZONE PICKUP — MOBILE/TABLET ALIGNMENT ENGINE
Fixes: Hidden banner on mobile, nested HTML doc structure,
Local Zone slider edge alignment on mobile Chrome (360–414px)
CTO APPROVED — ECOMMERCE STANDARDS COMPLIANT
===================================================================== */
/* ── 1. Force-show Welcome Banner on Mobile & Tablet ────────────────── */
/* Overrides Elementor's elementor-hidden-mobile / elementor-hidden-tablet */
.elementor-element-4d9f652.elementor-hidden-mobile,
.elementor-element-4d9f652.elementor-hidden-tablet {
display: block !important;
visibility: visible !important;
height: auto !important;
overflow: visible !important;
}
/* ── 2. Strip Nested HTML Document Structure (Elementor Text-Editor Bug) */
/* The banner widget contains a full —
these nested tags cause mobile Chrome to break layout. Hide them. */
.elementor-element-4d9f652 .elementor-widget-container {
display: block !important;
}
.elementor-element-4d9f652 .elementor-widget-container > .banner-container {
display: flex !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Hide everything in the widget container that isn't the banner or styles */
.elementor-element-4d9f652 .elementor-widget-container > *:not(.banner-container):not(style):not(link):not(meta) {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ── 3. Welcome Banner — Mobile/Tablet Alignment ─────────────────────── */
@media (max-width: 1024px) {
.elementor-element-4d9f652 {
width: 100% !important;
max-width: 100% !important;
padding: 0 16px !important;
box-sizing: border-box !important;
}
.elementor-element-4d9f652 .elementor-widget-container {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
.banner-container {
border: 2px solid #FF9933 !important;
background-color: #fffaf5 !important;
padding: 16px 14px !important;
margin: 10px 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
border-radius: 8px !important;
overflow: hidden !important;
}
.banner-title {
font-size: 18px !important;
line-height: 1.3 !important;
text-align: center !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
justify-content: center !important;
}
.banner-text {
font-size: 13px !important;
line-height: 1.5 !important;
text-align: center !important;
padding: 0 4px !important;
}
.flag-icon {
width: 20px !important;
height: auto !important;
}
}
@media (max-width: 480px) {
.elementor-element-4d9f652 {
padding: 0 12px !important;
}
.banner-container {
padding: 14px 12px !important;
border-radius: 6px !important;
}
.banner-title {
font-size: 16px !important;
}
.banner-text {
font-size: 12px !important;
}
}
/* ── 3b. Mobile: Fix Elementor boxed sections overflowing (1200px) ───── */
/* Root-cause fix: page-50's `.elementor-container` keeps its desktop
width (1200px) on phones because Elementor's mobile width:100% reset
isn't applied, clipping/overlapping the hot-deal + catalog blocks.
Force boxed sections to full width under 768px. */
@media (max-width: 767px) {
body.elementor-page-50 .elementor-section {
width: 100%;
}
body.elementor-page-50 .elementor-section > .elementor-container {
width: 100%;
max-width: 100%;
flex-basis: 100%;
}
}
/* ── 4. Local Zone Pickup Slider — Mobile/Tablet Alignment ───────────── */
@media (max-width: 1024px) {
/* Fix the 94% width — align with page content edges */
.custom-beverage-slider-wrapper {
width: 100% !important;
max-width: 100% !important;
padding: 20px 16px !important;
box-sizing: border-box !important;
margin: 0 auto !important;
overflow: hidden !important;
}
/* Fix Elementor section that wraps the slider */
.elementor-section.elementor-reverse-mobile {
overflow: visible !important;
}
/* Ensure the Elementor widget container doesn't clip */
.elementor-element-f7563d3 .elementor-widget-container {
width: 100% !important;
max-width: 100% !important;
overflow: visible !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
.elementor-element-f7563d3 {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* Align the slider header with page content */
.custom-slider-header {
padding: 0 4px 15px 4px !important;
}
.custom-slider-title {
font-size: 22px !important;
}
.custom-slider-see-all {
font-size: 13px !important;
}
}
@media (max-width: 480px) {
.custom-beverage-slider-wrapper {
padding: 16px 12px !important;
}
.custom-slider-title {
font-size: 20px !important;
}
/* Ensure swiper slides don't overflow on narrow screens */
.custom-beverage-slider-wrapper [class*="swiper-container-woo_slider"] {
overflow: hidden !important;
padding: 10px 4px 25px 4px !important;
}
}
/* ── 5. Fix ALL Elementor Sections Containing Banners/Sliders ────────── */
/* Ensure no horizontal overflow on mobile Chrome */
@media (max-width: 768px) {
.elementor-section.elementor-top-section {
overflow: visible !important;
}
.elementor-column.elementor-col-100 {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
}
.elementor-widget-wrap.elementor-element-populated {
padding: 0 !important;
width: 100% !important;
}
}
/* =====================================================================
WCAG 2.1 SKIP-NAVIGATION LINK
Visually hidden until focused via keyboard (Tab key)
===================================================================== */
.skip-link.screen-reader-text {
position: absolute;
top: -100%;
left: 50%;
transform: translateX(-50%);
z-index: 9999999;
background: #f87d09;
color: #ffffff;
font-size: 14px;
font-weight: 700;
padding: 10px 24px;
border-radius: 0 0 8px 8px;
text-decoration: none;
box-shadow: 0 4px 12px rgba(248, 125, 9, 0.4);
transition: top 0.2s ease;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.skip-link.screen-reader-text:focus {
top: 0;
outline: 3px solid #fff;
outline-offset: 2px;
}
/* =====================================================================
CTO APPROVED — ECOMMERCE STANDARDS: VISIBLE H1 FOR HOMEPAGE
H1 is hidden by Elementor; CSS override to expose it for SEO/a11y
===================================================================== */
.home .elementor-section .elementor-heading-title.elementor-size-default[style*="display: none"],
.home .elementor-section h1[style*="display: none"],
.home h1.elementor-heading-title[style*="display: none"] {
display: block !important;
visibility: visible !important;
height: auto !important;
overflow: visible !important;
clip: auto !important;
position: relative !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* =====================================================================
CTO APPROVED — ECOMMERCE STANDARDS: PRODUCT CARD BUTTON CLIPPING FIX
On mobile Chrome, the add-to-cart button gets clipped by overflow:hidden
on .product-inner. Fix: ensure no overflow clip on the card container.
===================================================================== */
@media (max-width: 768px) {
.product-inner,
.product {
overflow: visible !important;
}
.product-inner .add_to_cart_button,
.product-inner .custom-add-to-cart-plus,
.product-inner .button {
position: relative;
z-index: 2;
}
}
/* =====================================================================
CTO APPROVED — ECOMMERCE STANDARDS: BROKEN IMAGE PLACEHOLDER
For images with empty src (Elementor bug), show a styled placeholder
===================================================================== */
img[src=""],
img[src="data:,"] {
visibility: hidden !important;
}
img[src=""]::after,
img[src="data:,"]::after {
content: "Image unavailable";
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 120px;
background: #f8f9fa;
color: #6b7280;
font-size: 13px;
font-family: 'Inter', sans-serif;
text-align: center;
}
/* =====================================================================
MODERN OFFER COUNTDOWN TIMER (single product + Elementor widget)
Light & clean: soft cream banner, orange accents, dark digits.
===================================================================== */
.klb-product-time-countdown {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
margin-bottom: 20px !important;
padding: 16px 14px 14px;
box-sizing: border-box;
background: linear-gradient(160deg, #fffaf5 0%, #ffffff 100%);
border: 1px solid #f7e2cf;
border-radius: 16px;
box-shadow: 0 6px 20px rgba(248, 125, 9, 0.08);
}
/* Header: clock icon + label */
.klb-product-time-countdown .expired-text {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 7px;
margin: 0 !important;
max-width: none !important;
padding: 0 0 2px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
white-space: nowrap;
text-align: center;
color: #f87d09;
font-family: "Inter", "Inter-fallback", sans-serif;
}
.klb-product-time-countdown .expired-text::before {
content: "";
width: 15px;
height: 15px;
flex: 0 0 15px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f87d09' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l3 2'/%3E%3Cpath d='M9 2h6'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Countdown row */
.klb-product-time-countdown .countdown,
.countdown {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 10px;
font-family: "Inter", "Inter-fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-weight: 700 !important;
}
/* Remove the raw colon separators */
.klb-product-time-countdown .countdown > span,
.countdown > span {
display: none !important;
}
.countdown .count-item {
display: inline-flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
width: auto;
min-width: 58px;
height: 62px;
padding: 8px 12px 7px;
border-radius: 14px;
color: #1e293b !important;
background: linear-gradient(180deg, #ffffff 0%, #fff6ee 100%) !important;
border: 1px solid #ffdcc0 !important;
box-shadow: inset 0 -3px 0 rgba(248, 125, 9, 0.10), 0 6px 14px rgba(248, 125, 9, 0.10) !important;
font-size: 26px !important;
font-weight: 800 !important;
line-height: 1;
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
box-sizing: border-box;
}
.countdown .count-item::after {
content: "HRS";
font-size: 9px;
font-weight: 700;
letter-spacing: 0.16em;
line-height: 1;
text-transform: uppercase;
color: #f87d09;
margin-top: 1px;
}
.countdown .count-item.hours::after { content: "HRS"; }
.countdown .count-item.minutes::after { content: "MIN"; }
.countdown .count-item.second::after { content: "SEC"; }
/* =====================================================================
MOBILE: organized equal-width tiles inside the banner
===================================================================== */
@media (max-width: 480px) {
.klb-product-time-countdown {
gap: 8px;
padding: 12px 10px 12px;
}
/* Single product banner: split the three tiles evenly, no overflow */
.klb-product-time-countdown .countdown {
display: flex !important;
width: 100%;
gap: 6px;
}
.klb-product-time-countdown .countdown .count-item {
flex: 1 1 0;
min-width: 0;
max-width: 84px;
height: 56px;
padding: 6px 4px;
font-size: 21px !important;
border-radius: 12px;
}
.klb-product-time-countdown .expired-text {
font-size: 10px;
letter-spacing: 0.14em;
white-space: normal;
}
/* Widget / card countdowns: stay compact */
.countdown .count-item {
min-width: 42px;
height: 46px;
padding: 5px 8px;
font-size: 18px !important;
border-radius: 10px;
}
}
/* =====================================================================
PER-CONTAINER IMAGE PRELOADER (None full-page — only on the loading
product card / gallery / deal container)
===================================================================== */
.ak-img-loading {
position: relative;
}
/* Shimmer skeleton overlay only while the container's image is loading */
.ak-img-loading::after {
content: "";
position: absolute;
inset: 0;
z-index: 9;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(100deg, #f1f5f9 20%, #e2e8f0 40%, #f1f5f9 60%, #f1f5f9 100%);
background-size: 250% 100%;
animation: ak-img-shimmer 1.5s linear infinite;
}
@keyframes ak-img-shimmer {
0% { background-position: 120% 0; }
100% { background-position: -120% 0; }
}
/* Fade out the skeleton when the image finishes loading */
.ak-img-loaded::after {
opacity: 0;
animation: none;
transition: opacity 0.45s ease;
}
/* Keep the reserved canvas visible while loading so the card never jumps */
.ak-img-loading img {
opacity: 1;
}
/* =====================================================================
MOBILE MINI-CART: COMPACT DROPDOWN PANEL (FIX full-page override)
On mobile the mini-cart was styled as a 100vh drawer (.widget_shopping_cart_content),
so opening the header cart covered the whole page. Constrain it to a
small dropdown panel that sits under the cart icon and scrolls internally.
The live JS toggles the .show class to open the header cart on mobile.
===================================================================== */
@media (max-width: 1024px) {
/* Opened header cart = compact panel, not a full-screen drawer. */
.site-header .header-cart .cart-dropdown.show,
.site-header .header-cart .cart-dropdown:not(.hide) {
top: calc(100% + 0.625rem);
right: 0;
left: auto;
min-width: 18.75rem;
max-width: min(21rem, calc(100vw - 1.25rem));
width: auto;
z-index: 200000;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
/* Narrowest phones: keep it from touching the screen edges. */
@media (max-width: 360px) {
.site-header .header-cart .cart-dropdown.show,
.site-header .header-cart .cart-dropdown:not(.hide) {
min-width: 16rem;
max-width: calc(100vw - 1rem);
}
}
/* Cap the mini-cart height so it no longer stretches to 100vh. */
.site-header .header-cart .cart-dropdown .widget_shopping_cart_content {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
/* Keep only the item list tall/scrollable, everything else compact. */
.site-header .header-cart .cart-dropdown .woocommerce-mini-cart.cart_list {
max-height: 45vh !important;
min-height: 0 !important;
overflow-y: auto !important;
}
.site-header .header-cart .cart-dropdown .alikart-cart-footer {
position: static !important;
bottom: auto !important;
box-shadow: none !important;
padding-bottom: 15px !important;
}
.site-header .header-cart .cart-dropdown .alikart-shipping-tracker {
margin-right: 15px !important;
margin-left: 15px !important;
}
/* Closed state: always fully hidden regardless of hover. */
.site-header .header-cart .cart-dropdown.hide:not(.show) {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
}
/* =====================================================================
ENTERPRISE MODERN CSS & ACCESSIBILITY ENHANCEMENTS (WCAG 2.2 / HTML5)
===================================================================== */
/* Modern Dynamic Viewport Support (with 100vh fallback) */
@supports (height: 100dvh) {
.ak-spotlight-modal,
.mobile-nav-wrapper,
.site-scroll {
max-height: 100dvh !important;
}
}
/* Mobile & Touch Target Compliance (WCAG 2.2 Target Size - min 44x44px) */
@media (pointer: coarse) {
.site-header .header-buttons .button-item a,
.header-canvas a,
.site-header .header-cart .cart-button,
.quick-view-button,
.wishlist-button,
.compare-button,
.ak-thumb-btn,
.pwa-close-btn,
.pwa-install-btn,
.pwa-later-btn {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
/* Prefers-Reduced-Motion: Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Modern High-Resolution Print Optimization */
@media print {
.site-header,
.site-footer,
.site-sidebar,
.header-buttons,
.pwa-install-banner,
.ak-spotlight-overlay,
.ak-spotlight-modal,
.klb-sticky-single-cart {
display: none !important;
}
body, main, .content-primary {
background: #fff !important;
color: #000 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
}
a {
text-decoration: underline !important;
color: #000 !important;
}
}
/* =====================================================================
ENTERPRISE MODERN ECOMMERCE ENGINE: SUBGRID, CONTAINER QUERIES & MICRO-INTERACTIONS
===================================================================== */
/* 1. Container Queries: Responsive Product Grid Adaptation */
.products,
.products-wrapper,
.site-main .products {
container-type: inline-size;
container-name: product-grid;
}
@container product-grid (max-width: 480px) {
.product-wrapper .product-title {
font-size: 0.8125rem !important;
line-height: 1.3 !important;
}
.product-wrapper .price {
font-size: 0.875rem !important;
}
.product-wrapper .product-footer .button,
.product-wrapper .add-to-cart-button {
padding: 6px 10px !important;
font-size: 0.75rem !important;
}
}
/* 2. CSS Subgrid Alignment for Uniform Rows across Cards */
@supports (grid-template-rows: subgrid) {
.products.grid-layout {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
grid-auto-rows: auto;
gap: 16px;
}
.products.grid-layout > .product,
.products.grid-layout > .product-wrapper {
display: grid;
grid-row: span 5;
grid-template-rows: subgrid;
height: 100%;
}
}
/* 3. Core Web Vitals: Zero CLS Aspect Ratio on Images */
.product-wrapper .thumbnail-wrapper img,
.product-card .thumbnail-wrapper img,
.products .product img.attachment-woocommerce_thumbnail {
aspect-ratio: 1 / 1;
object-fit: contain;
width: 100%;
height: auto;
}
/* 4. Modern Micro-Interactions & Tap Feedback (Mobile App Feel) */
.button,
button,
.add-to-cart-button,
.cart-button,
.ak-filter-apply-btn,
.ak-pill-btn,
.site-header .header-cart .cart-button {
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, box-shadow 0.2s ease !important;
}
.button:active,
button:active,
.add-to-cart-button:active,
.cart-button:active,
.ak-filter-apply-btn:active,
.ak-pill-btn:active {
transform: scale(0.97) !important;
}
/* 5. Modern Card Elevation on Hover */
.product-wrapper,
.product.type-product {
transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
border-radius: 8px;
}
/* 6. Modern Glassmorphism on Sticky Bars */
.site-header.sticky-header,
.klb-sticky-single-cart,
.mobile-nav-wrapper {
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
}
/* 7. Modern Badge Aesthetics */
.product-wrapper .product-badges .badge,
.product-badges .badge,
.onsale {
border-radius: 6px !important;
font-weight: 700 !important;
letter-spacing: 0.03em !important;
text-transform: uppercase !important;
font-size: 0.6875rem !important;
padding: 3px 8px !important;
}
/* =====================================================================
slider.IN STYLE HIGH-CONVERTING WHOLESALE STOREFRONT ENGINE
===================================================================== */
.native-homepage-storefront.slider-homepage-engine {
padding-top: 0;
padding-bottom: 60px;
background-color: #f8fafc;
}
/* 1. Top Factory Marquee Ticker */
.ak-slider-ticker-wrap {
background: linear-gradient(90deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
color: #ffffff;
padding: 10px 0;
overflow: hidden;
white-space: nowrap;
border-bottom: 2px solid #ea2b0f;
margin-bottom: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.ak-slider-ticker-track {
display: inline-flex;
gap: 40px;
animation: akTickerScroll 35s linear infinite;
}
.ak-ticker-item {
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.04em;
color: #f1f5f9;
display: inline-flex;
align-items: center;
gap: 8px;
}
.ak-ticker-item strong {
color: #ffedd5;
font-weight: 800;
}
@keyframes akTickerScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* 2. AliKart Hero Section */
.ak-slider-hero-section {
margin-bottom: 28px;
}
.ak-slider-hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 992px) {
.ak-slider-hero-grid {
grid-template-columns: 2fr 1fr;
}
}
.ak-slider-main-banner {
background: linear-gradient(135deg, #09101f 0%, #172554 100%);
color: #ffffff;
padding: 40px 32px;
border-radius: 18px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 0 12px 30px -6px rgba(15, 23, 42, 0.16);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.ak-slider-main-banner::after {
content: '';
position: absolute;
right: -40px;
bottom: -40px;
width: 260px;
height: 260px;
background: radial-gradient(circle, rgba(234, 43, 15, 0.25) 0%, transparent 70%);
pointer-events: none;
}
.ak-slider-side-banners {
display: flex;
flex-direction: column;
gap: 16px;
}
.ak-slider-card-amber {
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
border: 1.5px solid #fde68a;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.06);
}
.ak-slider-card-emerald {
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
border: 1.5px solid #bbf7d0;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.06);
}
/* 3. Circular Category Avatars Carousel */
.ak-slider-categories-section {
margin-bottom: 32px;
}
.ak-slider-cat-grid {
display: flex;
gap: 16px;
min-width: max-content;
padding: 6px 4px;
}
.ak-slider-cat-card {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 16px;
padding: 16px 14px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
min-width: 116px;
text-decoration: none !important;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.ak-slider-cat-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 22px -4px rgba(234, 43, 15, 0.12);
border-color: #ea2b0f;
}
.ak-dd-cat-avatar {
width: 68px;
height: 68px;
border-radius: 50%;
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
overflow: hidden;
border: 2px solid #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
transition: transform 0.2s ease;
}
.ak-slider-cat-card:hover .ak-dd-cat-avatar {
transform: scale(1.08);
}
.ak-dd-cat-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ak-dd-cat-emoji {
font-size: 32px;
}
.ak-dd-cat-label {
font-size: 13px;
font-weight: 700;
color: #1e293b;
line-height: 1.25;
margin-bottom: 3px;
max-width: 95px;
}
.ak-dd-cat-qty {
font-size: 11px;
color: #64748b;
font-weight: 500;
}
/* 4. AliKart Signature Budget Stores Bar */
.ak-slider-budget-section {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 22px;
margin-bottom: 32px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}
.ak-budget-stores-header {
margin-bottom: 16px;
}
.ak-budget-title-tag {
font-size: 11px;
font-weight: 800;
color: #ea2b0f;
letter-spacing: 0.04em;
text-transform: uppercase;
display: block;
margin-bottom: 3px;
}
.ak-budget-heading {
font-size: 1.15rem;
font-weight: 800;
color: #0f172a;
margin: 0;
}
.ak-budget-stores-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.ak-budget-pill {
padding: 14px 16px;
border-radius: 12px;
display: flex;
align-items: center;
gap: 12px;
text-decoration: none !important;
transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.ak-budget-pill:hover {
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}
.ak-pill-pink {
background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
border: 1.5px solid #fbcfe8;
color: #9d174d !important;
}
.ak-pill-orange {
background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
border: 1.5px solid #fed7aa;
color: #c2410c !important;
}
.ak-pill-purple {
background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
border: 1.5px solid #e9d5ff;
color: #7e22ce !important;
}
.ak-pill-blue {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
border: 1.5px solid #bfdbfe;
color: #1d4ed8 !important;
}
.ak-pill-green {
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
border: 1.5px solid #bbf7d0;
color: #15803d !important;
}
.ak-pill-icon {
font-size: 22px;
flex-shrink: 0;
}
.ak-pill-text {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.ak-pill-text strong {
font-size: 13.5px;
font-weight: 800;
line-height: 1.2;
}
.ak-pill-text span {
font-size: 11px;
opacity: 0.85;
margin-top: 1px;
}
.ak-pill-arrow {
font-size: 16px;
font-weight: 800;
}
/* 5. AliKart Flash Sale Section */
.ak-slider-flash-section {
background: linear-gradient(180deg, #fff1f0 0%, #fff7ed 100%);
border: 2px solid #fca5a5;
border-radius: 18px;
padding: 24px;
margin-bottom: 36px;
box-shadow: 0 8px 24px rgba(234, 43, 15, 0.06);
}
.ak-flash-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 22px;
}
.ak-flash-badge {
font-size: 11.5px;
font-weight: 800;
color: #ea2b0f;
letter-spacing: 0.05em;
display: block;
margin-bottom: 4px;
text-transform: uppercase;
}
/* 6. AliKart High-Converting Product Card Engine */
.ak-slider-products-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px !important;
}
@media (min-width: 768px) {
.ak-slider-products-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 16px !important;
}
}
@media (min-width: 1024px) {
.ak-slider-products-grid {
grid-template-columns: repeat(4, 1fr) !important;
gap: 18px !important;
}
}
.ak-slider-card {
list-style: none;
margin: 0 !important;
display: flex;
}
.ak-dd-card-inner {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 12px;
width: 100%;
display: flex;
flex-direction: column;
position: relative;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.ak-slider-card:hover .ak-dd-card-inner {
transform: translateY(-4px);
box-shadow: 0 12px 24px -4px rgba(15, 23, 42, 0.1);
border-color: #cbd5e1;
}
.ak-dd-thumb-wrap {
position: relative;
width: 100%;
padding-top: 100%;
background: #f8fafc;
border-radius: 10px;
overflow: hidden;
margin-bottom: 10px;
}
.ak-dd-img-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.ak-dd-img-link img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.3s ease;
}
.ak-slider-card:hover .ak-dd-img-link img {
transform: scale(1.06);
}
.ak-dd-discount-badge {
position: absolute;
top: 8px;
left: 8px;
background: #ea2b0f;
color: #ffffff;
font-size: 10.5px;
font-weight: 800;
padding: 3px 8px;
border-radius: 6px;
z-index: 2;
box-shadow: 0 2px 6px rgba(234, 43, 15, 0.3);
}
.ak-dd-hot-badge {
position: absolute;
top: 8px;
left: 8px;
background: #f59e0b;
color: #ffffff;
font-size: 10.5px;
font-weight: 800;
padding: 3px 8px;
border-radius: 6px;
z-index: 2;
}
.ak-dd-body {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.ak-dd-cat {
font-size: 11px;
color: #94a3b8;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 3px;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ak-dd-title {
font-size: 13.5px;
font-weight: 700;
color: #1e293b;
line-height: 1.35;
margin: 0 0 6px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 36px;
}
.ak-dd-title a {
color: #1e293b;
text-decoration: none !important;
}
.ak-dd-title a:hover {
color: #ea2b0f;
}
.ak-dd-rating {
display: inline-flex;
align-items: center;
gap: 4px;
margin-bottom: 8px;
}
.ak-dd-stars {
background: #fef3c7;
color: #92400e;
font-size: 10.5px;
font-weight: 800;
padding: 2px 6px;
border-radius: 4px;
}
.ak-dd-reviews {
font-size: 11px;
color: #94a3b8;
}
.ak-dd-price-row {
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
margin-top: auto;
margin-bottom: 8px;
}
.ak-dd-price {
font-size: 16.5px;
font-weight: 800;
color: #0f172a;
}
.ak-dd-mrp {
font-size: 12px;
font-weight: 500;
color: #94a3b8;
text-decoration: line-through;
}
.ak-dd-save-badge {
font-size: 10.5px;
font-weight: 700;
color: #16a34a;
background: #dcfce7;
padding: 2px 6px;
border-radius: 4px;
}
.ak-dd-stock-bar-wrap {
margin-bottom: 10px;
}
.ak-dd-stock-bar {
width: 100%;
height: 6px;
background: #fee2e2;
border-radius: 10px;
overflow: hidden;
margin-bottom: 3px;
}
.ak-dd-stock-fill {
height: 100%;
background: linear-gradient(90deg, #f97316 0%, #ea2b0f 100%);
border-radius: 10px;
}
.ak-dd-stock-text {
font-size: 10.5px;
font-weight: 700;
color: #ea2b0f;
display: block;
}
.ak-dd-moq-tag {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 10px;
}
.ak-dd-moq-pill {
background: #eff6ff;
color: #1d4ed8;
font-size: 10px;
font-weight: 800;
padding: 1px 5px;
border-radius: 3px;
text-transform: uppercase;
}
.ak-dd-moq-text {
font-size: 11px;
color: #64748b;
font-weight: 500;
}
.ak-dd-footer .button {
width: 100%;
text-align: center;
background: #ea2b0f !important;
color: #ffffff !important;
font-weight: 800 !important;
font-size: 13px !important;
padding: 9px 12px !important;
border-radius: 8px !important;
border: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-decoration: none !important;
transition: background 0.2s ease, transform 0.1s ease !important;
}
.ak-dd-footer .button:hover {
background: #d02005 !important;
}
.ak-dd-footer .button:active {
transform: scale(0.97);
}
/* 7. AliKart 3-Column Promo Split Grid */
.ak-slider-promo-banners {
margin-bottom: 36px;
}
.ak-slider-banner-trio {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 768px) {
.ak-slider-banner-trio {
grid-template-columns: repeat(3, 1fr);
}
}
.ak-dd-promo-box {
border-radius: 16px;
padding: 28px 22px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ak-dd-promo-box:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}
.ak-banner-coral {
background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
border: 1.5px solid #fecdd3;
}
.ak-banner-sky {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border: 1.5px solid #bae6fd;
}
.ak-banner-emerald {
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
border: 1.5px solid #bbf7d0;
}
.ak-dd-promo-badge {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #ea2b0f;
margin-bottom: 8px;
display: inline-block;
}
.ak-banner-sky .ak-dd-promo-badge { color: #0284c7; }
.ak-banner-emerald .ak-dd-promo-badge { color: #16a34a; }
.ak-dd-promo-content h3 {
font-size: 1.15rem;
font-weight: 800;
color: #0f172a;
line-height: 1.3;
margin: 0 0 6px 0;
}
.ak-dd-promo-content p {
font-size: 12.5px;
color: #475569;
margin: 0 0 16px 0;
line-height: 1.45;
}
.ak-dd-promo-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 800;
color: #0f172a;
text-decoration: none !important;
}
.ak-dd-promo-btn:hover {
color: #ea2b0f;
}
/* 8. Showcase Sections & Section Headers */
.ak-slider-showcase-section {
margin-bottom: 36px;
}
.ak-section-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid #e2e8f0;
}
.ak-section-title-wrap {
display: flex;
flex-direction: column;
}
.ak-section-pill {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
display: inline-block;
margin-bottom: 4px;
}
.ak-pill-red { color: #dc2626; }
.ak-pill-orange { color: #ea580c; }
.ak-pill-cyan { color: #0891b2; }
.ak-pill-purple { color: #9333ea; }
.ak-pill-green { color: #16a34a; }
.ak-section-title {
font-size: 1.25rem;
font-weight: 800;
color: #0f172a;
margin: 0;
letter-spacing: -0.01em;
}
.ak-section-subtitle {
font-size: 12px;
color: #64748b;
display: block;
margin-top: 3px;
}
.ak-view-all-link {
font-size: 13px;
font-weight: 700;
color: #ea2b0f;
text-decoration: none !important;
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.ak-view-all-link:hover {
text-decoration: underline !important;
}
/* Under 99 Specific Highlight Wrapper */
.ak-under99-highlight {
background: #f0fdf4;
border: 1.5px solid #86efac;
border-radius: 18px;
padding: 24px;
}
.ak-under99-highlight .ak-section-header {
border-bottom-color: #bbf7d0;
}
/* 9. AliKart 5-Pillar Direct Factory Guarantees */
.ak-slider-trust-pillars {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 18px;
padding: 32px 24px;
margin-bottom: 36px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}
.ak-pillars-heading-box {
text-align: center;
margin-bottom: 28px;
}
.ak-pillars-tag {
font-size: 11.5px;
font-weight: 800;
color: #ea2b0f;
letter-spacing: 0.05em;
text-transform: uppercase;
display: block;
margin-bottom: 6px;
}
.ak-pillars-heading-box h3 {
font-size: 1.35rem;
font-weight: 800;
color: #0f172a;
margin: 0;
}
.ak-pillars-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.ak-pillar-item {
display: flex;
gap: 14px;
align-items: flex-start;
}
.ak-pillar-icon {
font-size: 30px;
flex-shrink: 0;
background: #f8fafc;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid #e2e8f0;
}
.ak-pillar-text h4 {
font-size: 14px;
font-weight: 700;
color: #0f172a;
margin: 0 0 4px 0;
}
.ak-pillar-text p {
font-size: 12px;
color: #64748b;
margin: 0;
line-height: 1.45;
}
/* 10. AliKart Wholesale Stats Bar */
.ak-slider-stats-section {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
border-radius: 16px;
padding: 28px 24px;
margin-bottom: 36px;
color: #ffffff;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}
.ak-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
text-align: center;
}
@media (min-width: 768px) {
.ak-stats-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.ak-stat-number {
font-size: clamp(1.4rem, 2.5vw, 1.9rem);
font-weight: 800;
color: #ffedd5;
display: block;
margin-bottom: 4px;
}
.ak-stat-label {
font-size: 12px;
color: #94a3b8;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* =====================================================================
SKU COPY BUTTON
===================================================================== */
.ak-copy-sku {
--ak-copy-size: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: var(--ak-copy-size);
height: var(--ak-copy-size);
padding: 0;
margin: 0 0 0 8px;
border: 1px solid #cdd5e0;
border-radius: 7px;
background: #ffffff;
color: #52627a;
cursor: pointer;
vertical-align: middle;
line-height: 1;
box-sizing: border-box;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.ak-copy-sku svg {
display: block;
width: 14px;
height: 14px;
pointer-events: none;
}
.ak-copy-sku:hover {
background: #f3f5f8;
border-color: #a8b3c2;
color: #0f1730;
box-shadow: 0 2px 6px rgba(16, 24, 40, 0.10);
}
.ak-copy-sku:active {
box-shadow: none;
}
.ak-copy-sku.copied {
background: #ecfdf5;
border-color: #10b981;
color: #047857;
}
.sku-wrapper,
.product_meta .sku_wrapper {
display: inline-flex;
align-items: center;
-webkit-box-align: center;
}
.ak-stat-label {
font-size: 12px;
color: #94a3b8;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* =====================================================================
SKU COPY BUTTON
===================================================================== */
.ak-copy-sku {
--ak-copy-size: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: var(--ak-copy-size);
height: var(--ak-copy-size);
padding: 0;
margin: 0 0 0 8px;
border: 1px solid #cdd5e0;
border-radius: 7px;
background: #ffffff;
color: #52627a;
cursor: pointer;
vertical-align: middle;
line-height: 1;
box-sizing: border-box;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.ak-copy-sku svg {
display: block;
width: 14px;
height: 14px;
}
/* =====================================================================
1. SINGLE PRODUCT HERO PRICE (PROMINENT, BOLD & MODERN)
===================================================================== */
.single-product .product-detail .price,
.single-product .column > .price,
.single-product p.price,
.single-product .entry-summary .price {
display: inline-flex !important;
align-items: baseline !important;
gap: 10px !important;
margin: 8px 0 16px 0 !important;
line-height: 1.1 !important;
flex-wrap: wrap !important;
}
/* Single Product Strikethrough Regular Price (MRP) */
.single-product .product-detail .price del,
.single-product .product-detail .price del *,
.single-product .column > .price del,
.single-product .column > .price del *,
.single-product p.price del,
.single-product p.price del *,
.single-product .entry-summary .price del,
.single-product .entry-summary .price del * {
font-size: 16px !important;
font-weight: 500 !important;
color: #ef4444 !important;
text-decoration: line-through !important;
text-decoration-color: #ef4444 !important;
text-decoration-thickness: 1.8px !important;
opacity: 0.88 !important;
margin-right: 4px !important;
display: inline-block !important;
vertical-align: baseline !important;
}
.single-product .product-detail .price del .woocommerce-Price-currencySymbol,
.single-product p.price del .woocommerce-Price-currencySymbol {
font-size: 14px !important;
}
/* Single Product Active Sale Price (Big & Eye-Catching) */
.single-product .product-detail .price ins,
.single-product .product-detail .price ins *,
.single-product .column > .price ins,
.single-product .column > .price ins *,
.single-product p.price ins,
.single-product p.price ins *,
.single-product .entry-summary .price ins,
.single-product .entry-summary .price ins *,
.single-product .product-detail .price > .amount,
.single-product .product-detail .price > bdi,
.single-product .product-detail .price > .woocommerce-Price-amount,
.single-product p.price > .amount,
.single-product p.price > bdi,
.single-product p.price > .woocommerce-Price-amount {
font-size: 28px !important;
font-weight: 800 !important;
color: #10b981 !important;
text-decoration: none !important;
letter-spacing: -0.02em !important;
display: inline-block !important;
vertical-align: baseline !important;
}
.single-product .product-detail .price ins .woocommerce-Price-currencySymbol,
.single-product p.price ins .woocommerce-Price-currencySymbol,
.single-product p.price > .amount .woocommerce-Price-currencySymbol {
font-size: 22px !important;
font-weight: 700 !important;
}
/* =====================================================================
2. PRODUCT CARDS & LOOP GRIDS (BALANCED, CRISP & HIGH CONVERTING)
===================================================================== */
.products .product .price,
.products .type-product .price,
.product-wrapper .price,
.product-content .price,
.site-slider .product .price,
.alikart-rv .price,
.related.products .price,
.akps-prices,
.product-price {
display: inline-flex !important;
align-items: baseline !important;
gap: 6px !important;
margin: 4px 0 6px 0 !important;
line-height: 1.2 !important;
flex-wrap: wrap !important;
}
/* Card Regular Price in RED with clean strikethrough */
body:not(.single-product) .price del,
body:not(.single-product) .price del *,
.products .product .price del,
.products .product .price del *,
.products .type-product .price del,
.products .type-product .price del *,
.product-wrapper .price del,
.product-wrapper .price del *,
.product-content .price del,
.product-content .price del *,
.related.products .price del,
.related.products .price del *,
.alikart-rv .price del,
.alikart-rv .price del *,
.site-slider .product .price del,
.site-slider .product .price del *,
.akps-prices del,
.akps-prices del *,
.product-price del,
.product-price del * {
color: #ef4444 !important;
text-decoration: line-through !important;
text-decoration-color: #ef4444 !important;
text-decoration-thickness: 1.5px !important;
opacity: 0.88 !important;
font-weight: 500 !important;
font-size: 13.5px !important;
margin-right: 2px !important;
display: inline-block !important;
vertical-align: baseline !important;
}
/* Card Sale Price in BOLD EMERALD GREEN */
body:not(.single-product) .price ins,
body:not(.single-product) .price ins *,
.products .product .price ins,
.products .product .price ins *,
.products .type-product .price ins,
.products .type-product .price ins *,
.product-wrapper .price ins,
.product-wrapper .price ins *,
.product-content .price ins,
.product-content .price ins *,
.related.products .price ins,
.related.products .price ins *,
.alikart-rv .price ins,
.alikart-rv .price ins *,
.site-slider .product .price ins,
.site-slider .product .price ins *,
.akps-prices ins,
.akps-prices ins *,
.product-price ins,
.product-price ins * {
color: #10b981 !important;
text-decoration: none !important;
font-style: normal !important;
font-weight: 800 !important;
font-size: 18px !important;
display: inline-block !important;
vertical-align: baseline !important;
}
/* Card Regular price when NO sale price exists (or price ranges) -> GREEN */
body:not(.single-product) .price > .amount,
body:not(.single-product) .price > bdi,
body:not(.single-product) .price:not(:has(del)) .amount,
.products .product .price > .amount,
.products .product .price > bdi,
.products .product .price > .woocommerce-Price-amount,
.products .product .price:not(:has(del)) .amount,
.products .type-product .price > .amount,
.products .type-product .price:not(:has(del)) .amount,
.product-wrapper .price:not(:has(del)) .amount,
.related.products .price:not(:has(del)) .amount,
.alikart-rv .price:not(:has(del)) .amount,
.akps-prices:not(:has(del)) .amount,
.product-price:not(:has(del)) .amount {
color: #10b981 !important;
font-weight: 800 !important;
font-size: 18px !important;
}
.products .type-product .price ins,
.product-wrapper .price ins,
.related.products .price ins,
.alikart-rv .price ins {
color: #10b981 !important;
text-decoration: none !important;
font-style: normal !important;
font-weight: 800 !important;
font-size: 17px !important;
display: inline-block !important;
vertical-align: baseline !important;
}
/* Regular price when NO sale price exists (or price ranges) -> GREEN */
.price > .amount,
.price > bdi,
.price:not(:has(del)) .amount,
.akps-prices:not(:has(del)) .amount,
.akps-prices:not(:has(del)) bdi,
.price:not(:has(del)) bdi,
.product-price:not(:has(del)) .amount,
.products .product .price:not(:has(del)) .amount,
.products .type-product .price:not(:has(del)) .amount,
.product-wrapper .price:not(:has(del)) .amount,
.related.products .price:not(:has(del)) .amount,
.alikart-rv .price:not(:has(del)) .amount {
color: #10b981 !important;
font-weight: 800 !important;
font-size: 17px !important;
}
/* Attractive High-Converting Discount Badges */
.akps-chip.off,
.product-badge.sale,
.onsale,
.discount-badge,
.product-discount-badge {
background: linear-gradient(135deg, #ff1744 0%, #d50000 100%) !important;
color: #ffffff !important;
font-weight: 800 !important;
border-radius: 7px !important;
letter-spacing: 0.4px !important;
box-shadow: 0 3px 10px rgba(220, 20, 60, 0.45) !important;
text-transform: uppercase !important;
border: none !important;
}
/* =====================================================================
SIGNATURE YELLOW (#FFCC00) STYLING FOR ALL ADD TO CART BUTTONS
===================================================================== */
.products .product a.button.button-primary,
.products .product a.button.add_to_cart_button,
.product-detail form.cart button.single_add_to_cart_button,
.single-product .single_add_to_cart_button,
.single-product form.cart .button,
.single-product .button.alt,
.single_add_to_cart_button,
.klb-sticky-add-to-cart .button,
.sticky-add-to-cart .button,
.site-footer-sticky .button,
.klb-sticky-bar .button,
a.button.add_to_cart_button,
.button.product_type_simple,
.sticky-add-to-cart a.button,
.custom-add-to-cart-plus,
.ak-add-to-cart-plus {
background: #FFCC00 !important;
background-color: #FFCC00 !important;
color: #14181f !important;
border: none !important;
border-color: #FFCC00 !important;
font-weight: 800 !important;
box-shadow: 0 4px 12px rgba(255, 204, 0, 0.4) !important;
transition: all 0.2s ease !important;
}
.products .product a.button.button-primary:hover,
.products .product a.button.add_to_cart_button:hover,
.product-detail form.cart button.single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button:hover,
.single-product form.cart .button:hover,
.klb-sticky-add-to-cart .button:hover,
.sticky-add-to-cart .button:hover,
.site-footer-sticky .button:hover,
.sticky-add-to-cart a.button:hover,
.custom-add-to-cart-plus:hover,
.ak-add-to-cart-plus:hover {
background: #ffd333 !important;
background-color: #ffd333 !important;
color: #14181f !important;
border-color: #ffd333 !important;
box-shadow: 0 6px 16px rgba(255, 204, 0, 0.55) !important;
transform: scale(1.04) !important;
}
.custom-add-to-cart-plus,
.custom-add-to-cart-plus.add_to_cart_button,
.custom-add-to-cart-plus.ak-variable-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
padding: 0 !important;
border-radius: 50% !important;
background: #FFCC00 !important;
border: none !important;
text-decoration: none !important;
line-height: 1 !important;
box-shadow: 0 4px 12px rgba(255, 204, 0, 0.45) !important;
overflow: visible !important;
}
.custom-add-to-cart-plus svg,
.custom-add-to-cart-plus.add_to_cart_button svg,
.custom-add-to-cart-plus.ak-variable-btn svg {
display: block !important;
width: 20px !important;
height: 20px !important;
stroke: #14181f !important;
stroke-width: 2.4 !important;
fill: none !important;
pointer-events: none !important;
margin: 0 auto !important;
}
/* Action Wrapper States: Cart Button vs Quantity Pill */
.ak-cart-action-wrapper {
display: inline-flex !important;
align-items: center;
position: relative;
}
.ak-cart-action-wrapper:not(.is-in-cart) .ak-qty-pill {
display: none !important;
}
.ak-cart-action-wrapper.is-in-cart .custom-add-to-cart-plus,
.ak-cart-action-wrapper.is-in-cart .custom-add-to-cart-plus.add_to_cart_button {
display: none !important;
}
.ak-cart-action-wrapper.is-in-cart .ak-qty-pill {
display: inline-flex !important;
}
/* Zero-Shimmer / Instant Cached Image Display on Reload */
.ak-img-loading::after,
.ak-img-loaded::after,
.thumbnail-wrapper.is-loading,
.akps-skel {
display: none !important;
animation: none !important;
opacity: 0 !important;
}
/* =====================================================================
ALIKART PREMIUM COLOR SWATCHES & VARIATION SELECTORS
===================================================================== */
.klbtheme-terms {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px 10px !important;
align-items: center !important;
margin: 8px 0 14px 0 !important;
}
.klbtheme-type-color .klbtheme-term {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
max-width: 32px !important;
max-height: 32px !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
position: relative !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0 !important;
border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
}
.klbtheme-type-color .klbtheme-term:hover {
transform: translateY(-2px) scale(1.15) !important;
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18) !important;
}
.klbtheme-type-color span.klbtheme-term.klbtheme-selected {
transform: translateY(-2px) scale(1.18) !important;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4.5px #233a95, 0 4px 12px rgba(35, 58, 149, 0.35) !important;
border: 1.5px solid transparent !important;
}
/* Global Color Term Fallbacks */
.klbtheme-type-color .klbtheme-term[data-term*="black"] { background: #111827 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="blue"] { background: #2563eb !important; }
.klbtheme-type-color .klbtheme-term[data-term*="navy"] { background: #0f172a !important; }
.klbtheme-type-color .klbtheme-term[data-term*="sky"] { background: #38bdf8 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="teal"] { background: #0d9488 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="cyan"] { background: #06b6d4 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="aqua"] { background: #06b6d4 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="brown"] { background: #78350f !important; }
.klbtheme-type-color .klbtheme-term[data-term*="coffee"] { background: #4a2c11 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="chocolate"] { background: #3d1c06 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="tan"] { background: #d4a373 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="khaki"] { background: #c2a649 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="green"] { background: #16a34a !important; }
.klbtheme-type-color .klbtheme-term[data-term*="olive"] { background: #65a30d !important; }
.klbtheme-type-color .klbtheme-term[data-term*="emerald"] { background: #059669 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="mint"] { background: #34d399 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="sage"] { background: #84a98c !important; }
.klbtheme-type-color .klbtheme-term[data-term*="grey"],
.klbtheme-type-color .klbtheme-term[data-term*="gray"] { background: #6b7280 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="silver"] { background: linear-gradient(135deg, #d1d5db 0%, #f3f4f6 50%, #9ca3af 100%) !important; border: 1.5px solid #cbd5e1 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="charcoal"] { background: #374151 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="gunmetal"] { background: #2a3439 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="slate"] { background: #64748b !important; }
.klbtheme-type-color .klbtheme-term[data-term*="red"] { background: #dc2626 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="maroon"] { background: #800000 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="burgundy"] { background: #581845 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="crimson"] { background: #990000 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="wine"] { background: #722f37 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="ruby"] { background: #9b111e !important; }
.klbtheme-type-color .klbtheme-term[data-term*="coral"] { background: #f43f5e !important; }
.klbtheme-type-color .klbtheme-term[data-term*="pink"] { background: #ec4899 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="rose"] { background: #f43f5e !important; }
.klbtheme-type-color .klbtheme-term[data-term*="rosegold"],
.klbtheme-type-color .klbtheme-term[data-term*="rose-gold"] { background: linear-gradient(135deg, #b76e79 0%, #f7cac9 50%, #e0a899 100%) !important; }
.klbtheme-type-color .klbtheme-term[data-term*="magenta"] { background: #d946ef !important; }
.klbtheme-type-color .klbtheme-term[data-term*="fuchsia"] { background: #c026d3 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="peach"] { background: #fb923c !important; }
.klbtheme-type-color .klbtheme-term[data-term*="gold"],
.klbtheme-type-color .klbtheme-term[data-term*="golden"] { background: linear-gradient(135deg, #d4af37 0%, #f9d976 50%, #e6ca65 100%) !important; }
.klbtheme-type-color .klbtheme-term[data-term*="yellow"] { background: #eab308 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="mustard"] { background: #ca8a04 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="amber"] { background: #f59e0b !important; }
.klbtheme-type-color .klbtheme-term[data-term*="orange"] { background: #f97316 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="tangerine"] { background: #f28500 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="purple"] { background: #9333ea !important; }
.klbtheme-type-color .klbtheme-term[data-term*="violet"] { background: #7c3aed !important; }
.klbtheme-type-color .klbtheme-term[data-term*="lavender"] { background: #c084fc !important; }
.klbtheme-type-color .klbtheme-term[data-term*="white"] { background: #ffffff !important; border: 1.5px solid #cbd5e1 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="offwhite"],
.klbtheme-type-color .klbtheme-term[data-term*="off-white"],
.klbtheme-type-color .klbtheme-term[data-term*="ivory"],
.klbtheme-type-color .klbtheme-term[data-term*="cream"],
.klbtheme-type-color .klbtheme-term[data-term*="beige"] { background: #f5f5dc !important; border: 1.5px solid #cbd5e1 !important; }
.klbtheme-type-color .klbtheme-term[data-term*="multi"],
.klbtheme-type-color .klbtheme-term[data-term*="rainbow"],
.klbtheme-type-color .klbtheme-term[data-term*="mix"],
.klbtheme-type-color .klbtheme-term[data-term*="assorted"] { background: linear-gradient(135deg, #ef4444 0%, #f59e0b 25%, #10b981 50%, #3b82f6 75%, #8b5cf6 100%) !important; }
.klbtheme-type-color .klbtheme-term[data-term*="transparent"],
.klbtheme-type-color .klbtheme-term[data-term*="clear"] { background: repeating-linear-gradient(45deg, #e2e8f0 0, #e2e8f0 4px, #ffffff 4px, #ffffff 8px) !important; border: 1.5px solid #cbd5e1 !important; }
/* Image Swatches */
.klbtheme-type-image .klbtheme-term {
height: 44px !important;
width: 44px !important;
border-radius: 8px !important;
overflow: hidden !important;
border: 1.5px solid #e2e8f0 !important;
transition: all 0.2s ease !important;
}
.klbtheme-type-image .klbtheme-term img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
.klbtheme-type-image span.klbtheme-term.klbtheme-selected {
border-color: #233a95 !important;
box-shadow: 0 0 0 2px #233a95 !important;
}
/* Button Swatches */
.klbtheme-type-button .klbtheme-term {
border-radius: 8px !important;
border: 1.5px solid #e2e8f0 !important;
padding: 7px 14px !important;
height: auto !important;
line-height: 1.2 !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #1e293b !important;
background: #ffffff !important;
transition: all 0.2s ease !important;
}
.klbtheme-type-button span.klbtheme-term:hover {
border-color: #94a3b8 !important;
background: #f8fafc !important;
}
.klbtheme-type-button span.klbtheme-term.klbtheme-selected {
border-color: #233a95 !important;
background: #eff6ff !important;
color: #233a95 !important;
font-weight: 700 !important;
box-shadow: 0 0 0 1px #233a95 !important;
}
/* =====================================================================
ENTERPRISE RESPONSIVE HEADER ENGINE (PC, IPAD, MOBILE)
===================================================================== */
@media screen and (max-width: 64rem) { /* <= 1024px (Mobile & iPad Tablet) */
.site-header .header-main {
min-height: 56px !important;
height: auto !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
overflow: visible !important;
}
.site-header.mobile-nav-enable .header-main > .container,
.site-header .header-main > .container {
height: 3.5rem !important;
min-height: 3.5rem !important;
align-items: center !important;
display: flex !important;
position: relative !important;
overflow: visible !important;
justify-content: space-between !important;
}
.site-header .header-main .column.column-left {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
position: static !important;
flex: 0 0 auto !important;
height: 100% !important;
overflow: visible !important;
z-index: 15 !important;
}
.site-header .header-main .column.column-left .header-buttons {
position: relative !important;
left: auto !important;
top: auto !important;
transform: none !important;
margin: 0 !important;
z-index: 16 !important;
display: flex !important;
align-items: center !important;
}
.site-header .header-main .column.column-center {
display: none !important;
}
.site-header .header-main .column.column-left .site-brand,
.site-header .header-main .site-brand {
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
overflow: visible !important;
z-index: 20 !important;
pointer-events: auto !important;
}
.site-header .header-main .site-brand a {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
text-decoration: none !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
overflow: visible !important;
}
.site-header .header-main .site-brand img.desktop-logo,
.site-header .header-main .site-brand .desktop-logo {
display: none !important;
height: 0 !important;
width: 0 !important;
visibility: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
.site-header .header-main .site-brand img.mobile-logo {
display: block !important;
width: 68px !important;
max-width: 68px !important;
height: 68px !important;
max-height: 68px !important;
object-fit: contain !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
z-index: 20 !important;
}
.site-header .header-main .site-brand .brand-description,
.brand-description {
display: none !important;
height: 0 !important;
width: 0 !important;
visibility: hidden !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
.site-header .header-main .column.column-right {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
margin-left: auto !important;
position: relative !important;
z-index: 15 !important;
flex: 0 0 auto !important;
}
.site-header .header-cart.button-item > a {
background: transparent !important;
border: none !important;
padding: 0 !important;
box-shadow: none !important;
}
.site-header .header-cart .cart-price {
margin-right: 8px !important;
}
}
/* =====================================================================
FIX SINGLE PRODUCT GALLERY BOX JUMPING & SHIFTING
Enforces a rock-solid 1:1 square aspect ratio stage so switching
images of different sizes never causes the container box to move!
===================================================================== */
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery__wrapper {
aspect-ratio: 1 / 1 !important;
max-height: 520px !important;
width: 100% !important;
background-color: #ffffff !important;
border-radius: 14px !important;
border: 1px solid #eef2f6 !important;
overflow: hidden !important;
transition: none !important;
position: relative !important;
box-sizing: border-box !important;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image,
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
background-color: #ffffff !important;
padding: 12px !important;
box-sizing: border-box !important;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image.ak-active-slide,
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image.ak-active-slide {
display: flex !important;
z-index: 2;
}
.woocommerce-product-gallery__image a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
}
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery .wp-post-image {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center !important;
margin: auto !important;
}
/* =========================================================
Alikart Mini-Cart & Cart Drawer Architecture (Consolidated)
========================================================= */
body header,
body .site-header,
body .header-top,
body .klb-top-header,
body .announcement-bar,
body #header .top-bar,
body .top-notice,
body [class*="announcement-bar"],
body [class*="header-top"] {
z-index: 999 !important;
}
body .cart-sidebar,
body .klb-cart-sidebar,
body .mini-cart-drawer,
body .woocommerce-mini-cart-side,
body .side-cart-panel,
body .cart-menu-wrapper {
z-index: 999999 !important;
background: #ffffff !important;
}
.klb-free-shipping,
.free-shipping-bar,
.wac-progress-bar,
.theme-injected-extras [class*="shipping"],
.theme-injected-extras [class*="progress"],
.theme-injected-extras [class*="progress"],
.klb-free-progress-bar,
.theme-injected-extras {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
visibility: hidden !important;
}
.widget_shopping_cart_content {
display: flex !important;
flex-direction: column !important;
height: 100vh !important;
max-height: 100vh !important;
overflow: hidden !important;
position: relative !important;
background: #ffffff !important;
background-color: #ffffff !important;
}
.alikart-shipping-tracker {
flex: 0 0 auto !important;
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 16px 15px !important;
margin: 10px 15px 15px 15px !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
}
.alikart-shipping-tracker p {
font-size: 14px !important;
font-weight: 700 !important;
color: #0f1111 !important;
margin: 0 0 10px 0 !important;
text-align: center !important;
}
.alikart-shipping-tracker p span {
color: #16a34a !important;
font-weight: 700 !important;
}
.alikart-progress-bar {
background: #f1f5f9 !important;
border-radius: 10px !important;
height: 8px !important;
width: 100% !important;
overflow: hidden !important;
}
.alikart-progress-fill {
background: linear-gradient(90deg, #00bdf2 0%, #16a34a 100%) !important;
height: 100% !important;
border-radius: 10px !important;
transition: width 0.8s ease-in-out !important;
}
.woocommerce-mini-cart.cart_list {
flex: 1 1 auto !important;
overflow-y: auto !important;
overflow-x: hidden !important;
max-height: calc(100vh - 510px) !important;
min-height: 120px !important;
padding: 0 15px !important;
margin: 0 0 10px 0 !important;
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
background: #ffffff !important;
}
.woocommerce-mini-cart.cart_list::-webkit-scrollbar { width: 5px; }
.woocommerce-mini-cart.cart_list::-webkit-scrollbar-track { background: transparent; }
.woocommerce-mini-cart.cart_list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
.woocommerce-mini-cart-item {
margin-bottom: 14px !important;
border-bottom: 1px dashed #e2e8f0 !important;
padding-bottom: 14px !important;
transition: all 0.3s ease;
list-style: none !important;
min-height: auto !important;
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
box-sizing: border-box !important;
display: block !important;
overflow: hidden !important;
transform: none !important;
position: relative !important;
background: #ffffff !important;
}
.woocommerce-mini-cart-item:last-child {
border-bottom: none !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.woocommerce-mini-cart-item .product-wrapper {
display: flex !important;
align-items: center !important;
gap: 12px !important;
position: relative !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.woocommerce-mini-cart-item .thumbnail-wrapper {
flex: 0 0 64px !important;
max-width: 64px !important;
height: 64px !important;
overflow: hidden !important;
border-radius: 8px !important;
border: 1px solid #e2e8f0 !important;
background: #ffffff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.woocommerce-mini-cart-item .thumbnail-wrapper img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
padding: 2px !important;
}
.woocommerce-mini-cart-item .content-wrapper {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding-right: 40px !important;
overflow: hidden !important;
}
.woocommerce-mini-cart-item .product-title {
margin: 0 0 4px 0 !important;
line-height: 1.4 !important;
}
.woocommerce-mini-cart-item .product-title a {
color: #0f1111 !important;
transition: 0.2s;
font-size: 14px !important;
font-weight: 600 !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;
}
.woocommerce-mini-cart-item .entry-price {
font-size: 13px !important;
color: #64748b !important;
font-weight: 500 !important;
}
.woocommerce-mini-cart-item .entry-price .quantity {
color: #64748b !important;
}
.woocommerce-mini-cart-item .entry-price amount,
.woocommerce-mini-cart-item .entry-price .woocommerce-Price-amount,
.woocommerce-mini-cart-item .entry-price woocommerce-Price-amount {
color: #16a34a !important;
font-weight: 700 !important;
}
.woocommerce-mini-cart-item .remove_from_cart_button {
position: absolute !important;
right: 5px !important;
left: auto !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: #ffffff !important;
border: 1px solid #fee2e2 !important;
color: #ef4444 !important;
width: 34px !important;
height: 34px !important;
font-size: 16px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.2s ease !important;
box-shadow: 0 2px 5px rgba(0,0,0,0.03) !important;
border-radius: 50% !important;
z-index: 10 !important;
margin: 0 !important;
}
.woocommerce-mini-cart-item .remove_from_cart_button:hover {
background: #ef4444 !important;
color: #ffffff !important;
border-color: #ef4444 !important;
}
.alikart-cart-footer {
flex: 0 0 auto !important;
background: #ffffff !important;
background-color: #ffffff !important;
padding: 15px !important;
border-top: 1px solid #e2e8f0 !important;
margin-top: auto !important;
position: sticky !important;
bottom: 0 !important;
z-index: 9999 !important;
box-sizing: border-box !important;
width: 100% !important;
box-shadow: 0 -4px 12px rgba(0,0,0,0.04) !important;
}
.woocommerce-mini-cart__total {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
font-size: 16px !important;
font-weight: 700 !important;
color: #94a3b8 !important;
margin-bottom: 15px !important;
}
.woocommerce-mini-cart__total amount,
.woocommerce-mini-cart__total .woocommerce-Price-amount {
color: #16a34a !important;
font-size: 18px !important;
font-weight: 800 !important;
}
.woocommerce-mini-cart__buttons {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
margin: 0 !important;
}
.woocommerce-mini-cart__buttons .button {
width: 100% !important;
text-align: center !important;
padding: 13px 15px !important;
font-size: 14px !important;
font-weight: 700 !important;
border-radius: 8px !important;
transition: all 0.2s ease !important;
text-transform: uppercase !important;
margin: 0 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
box-sizing: border-box !important;
letter-spacing: 0.5px !important;
}
.woocommerce-mini-cart__buttons .button:not(.checkout) {
background: #ffffff !important;
color: #475569 !important;
border: 1px solid #cbd5e1 !important;
}
.woocommerce-mini-cart__buttons .button:not(.checkout):hover {
background: #f8fafc !important;
color: #0f1111 !important;
}
.woocommerce-mini-cart__buttons .checkout {
background: #ff6a00 !important;
color: #ffffff !important;
border: none !important;
}
.woocommerce-mini-cart__buttons .checkout:hover {
background: #f06200 !important;
}
.cart-trust-badges {
margin-top: 15px !important;
text-align: center !important;
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 12px 10px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.cart-trust-badges .badge-flex {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 8px !important;
margin-bottom: 8px !important;
flex-wrap: wrap !important;
}
.cart-trust-badges .safe-text {
color: #475569 !important;
margin: 0 !important;
font-size: 12px !important;
font-weight: 600 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
}
.item-removing { opacity: 0; transform: translateX(30px) !important; pointer-events: none; }
@media (max-width: 768px) {
.woocommerce-mini-cart.cart_list {
max-height: calc(100vh - 560px) !important;
}
.alikart-cart-footer {
padding-bottom: 80px !important;
background: #ffffff !important;
background-color: #ffffff !important;
}
}
/* =========================================================
Global Swiper Structural Architecture & Category Zero-CLS
========================================================= */
.swiper, .swiper-container {
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
display: block;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
box-sizing: border-box;
}
.swiper-slide {
flex-shrink: 0 !important;
height: auto;
position: relative;
display: block;
box-sizing: border-box;
}
/* Raichur Categories Zero-CLS Pre-Render Horizontal Layout */
.rs-cat-wrapper {
width: 100%;
max-width: 100% !important;
margin: 0 auto 30px auto;
overflow: hidden;
position: relative;
}
.rs-cat-wrapper .swiper.rs-swiper {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
padding: 10px 45px 35px 45px !important;
box-sizing: border-box !important;
}
.rs-cat-wrapper .swiper-wrapper {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
gap: 18px !important;
}
.rs-cat-wrapper .swiper-wrapper::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
.rs-cat-wrapper .swiper-slide.rs-cat-item {
flex: 0 0 145px !important;
width: 145px !important;
min-width: 145px !important;
max-width: 145px !important;
flex-shrink: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
.rs-cat-wrapper .swiper.swiper-initialized .swiper-wrapper {
overflow-x: visible !important;
gap: 0 !important;
}
/* =========================================================
Alikart Custom Product Slider Architecture (Consolidated)
========================================================= */
.akps-wrap{position:relative;width:min(1440px,96%);margin:0 auto;padding:34px 0;font-family:inherit;}
.akps-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 14px 20px;}
.akps-heading{display:flex;align-items:center;gap:12px;min-width:0;}
.akps-heading::before{content:"";flex:none;width:5px;height:26px;border-radius:99px;background:#FFCC00;}
.akps-title{font-size:clamp(19px,2.4vw,27px);font-weight:800;color:#14181f;margin:0;line-height:1.15;text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.akps-all{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:#2874F0;text-decoration:none;padding:9px 16px;border-radius:99px;border:1.5px solid #dfe7f5;background:#fff;transition:all .22s ease;}
.akps-all:hover{background:#2874F0;border-color:#2874F0;color:#fff;transform:translateX(2px);}
.akps-all svg{width:13px;height:13px;}
.akps-skel{display:none !important;}
.akps-swiper{display:block !important;padding:4px 14px 28px !important;overflow:hidden !important;width:100% !important;box-sizing:border-box !important;}
.akps-swiper .swiper-wrapper{display:flex !important;align-items:stretch !important;box-sizing:border-box !important;}
.akps-swiper .swiper-slide{height:auto !important;display:flex !important;flex-shrink:0 !important;box-sizing:border-box !important;max-width:100% !important;}
.akps-swiper:not(.swiper-initialized) .swiper-slide{width:calc((100% - 10px) / 2) !important;margin-right:10px !important;}
@media(min-width:480px){.akps-swiper:not(.swiper-initialized) .swiper-slide{width:calc((100% - 15px) / 2.2) !important;margin-right:12px !important;}}
@media(min-width:768px){.akps-swiper:not(.swiper-initialized) .swiper-slide{width:calc((100% - 28px) / 3) !important;margin-right:14px !important;}}
@media(min-width:1024px){.akps-swiper:not(.swiper-initialized) .swiper-slide{width:calc((100% - 48px) / 4) !important;margin-right:16px !important;}}
@media(min-width:1280px){.akps-swiper:not(.swiper-initialized) .swiper-slide{width:calc((100% - 72px) / 5) !important;margin-right:18px !important;}}
.akps-card{position:relative;display:flex;flex-direction:column;width:100% !important;max-width:100% !important;height:100%;background:#fff;border:1px solid #e9ecf1;border-radius:14px;overflow:hidden;box-sizing:border-box;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
@media(hover:hover){
.akps-card:hover{transform:translateY(-4px);border-color:#dde2ea;box-shadow:0 14px 30px rgba(20,24,31,.09);}
}
.akps-media{position:relative;padding:12px 12px 8px;background:#fff;width:100%;box-sizing:border-box;}
.akps-media-link{display:block;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:10px;}
.akps-img{width:100% !important;height:100% !important;max-width:100% !important;object-fit:cover !important;object-position:center !important;display:block;transition:transform .3s ease;}
@media(hover:hover){.akps-card:hover .akps-img{transform:scale(1.05);}}
.is-oos .akps-img{filter:grayscale(1);opacity:.72;}
.akps-badges{position:absolute;top:10px;left:10px;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.akps-chip{font-size:11px;font-weight:800;line-height:1;padding:5px 9px;border-radius:7px;color:#fff;letter-spacing:.4px;box-shadow:0 3px 8px rgba(0,0,0,.15);text-transform:uppercase;}
.akps-chip.off{background:linear-gradient(135deg, #ff1744 0%, #d50000 100%);box-shadow:0 3px 10px rgba(220, 20, 60, 0.45);}
.akps-chip.new{background:#14181f;box-shadow:0 2px 6px rgba(0,0,0,.25);}
.akps-oos-overlay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.35);}
.akps-oos-ribbon{background:#ef4444;color:#fff;padding:8px 16px;border-radius:8px;font-weight:900;font-size:13px;letter-spacing:.5px;text-transform:uppercase;transform:rotate(-9deg);box-shadow:0 6px 14px rgba(239,68,68,.35);}
.akps-info{display:flex;flex-direction:column;gap:7px;flex:1;padding:6px 14px 14px;}
.akps-name{margin:0;font-size:14px;font-weight:600;color:#232a35;line-height:1.42;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(2 * 1.42em);}
.akps-name a{color:inherit;text-decoration:none;}
.akps-name a:hover{color:#2874F0;}
.akps-meta{display:flex;align-items:center;gap:8px;min-height:19px;}
.akps-stars{display:inline-flex;align-items:center;gap:4px;background:#16a34a;color:#fff;font-size:11px;font-weight:800;padding:3px 7px;border-radius:5px;line-height:1;}
.akps-count{font-size:11.5px;color:#8b93a1;font-weight:600;}
.akps-low{font-size:11.5px;font-weight:700;color:#ea580c;}
.akps-price-row{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:6px;}
.akps-prices{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;min-width:0;font-size:17px;font-weight:800;color:#10b981;line-height:1.2;}
.akps-prices .amount,
.akps-prices bdi,
.akps-prices .woocommerce-Price-currencySymbol,
.akps-prices .woocommerce-Price-amount{color:#10b981 !important;font-weight:800 !important;font-size:inherit;}
.akps-prices ins,
.akps-prices ins .amount,
.akps-prices ins bdi,
.akps-prices ins .woocommerce-Price-currencySymbol{text-decoration:none !important;color:#10b981 !important;font-style:normal;font-weight:800 !important;}
.akps-prices del,
.akps-prices del .amount,
.akps-prices del bdi,
.akps-prices del .woocommerce-Price-currencySymbol{color:#ef4444 !important;text-decoration:line-through !important;text-decoration-color:#ef4444 !important;font-size:13px !important;font-weight:600 !important;margin-right:2px;opacity:0.9 !important;}
.custom-add-to-cart-plus{flex:none;width:40px;height:40px;border-radius:50%;background:#FFCC00;color:#14181f !important;display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;text-decoration:none;box-shadow:0 4px 12px rgba(255,204,0,.45);transition:transform .2s cubic-bezier(0.34, 1.56, 0.64, 1),background .2s ease,box-shadow .2s ease;z-index:4;position:relative;outline:none;}
.custom-add-to-cart-plus svg{width:19px;height:19px;transition:transform .2s ease;}
.custom-add-to-cart-plus:active{transform:scale(0.85);}
@media(hover:hover){.custom-add-to-cart-plus:hover{transform:scale(1.12);background:#ffd333;box-shadow:0 6px 16px rgba(255,204,0,.6);}}
.custom-add-to-cart-plus.loading{opacity:.6;pointer-events:none;}
.custom-add-to-cart-plus.is-animating{animation:akpsCartBounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;background:#10b981 !important;color:#fff !important;box-shadow:0 4px 14px rgba(16, 185, 129, 0.45) !important;}
@keyframes akpsCartBounce{0%{transform:scale(0.85)}50%{transform:scale(1.22)}100%{transform:scale(1)}}
.akps-card a.added_to_cart{display:none !important;}
.ak-cart-action-wrapper{display:inline-flex !important;align-items:center;position:relative;}
.ak-cart-action-wrapper .custom-add-to-cart-plus{display:inline-flex !important;}
.ak-cart-action-wrapper .ak-qty-pill{display:none !important;}
.ak-cart-action-wrapper.is-in-cart .custom-add-to-cart-plus{display:none !important;}
.ak-cart-action-wrapper.is-in-cart .ak-qty-pill{display:inline-flex !important;}
.ak-qty-pill{display:inline-flex;align-items:center;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:99px;padding:2px 5px;box-shadow:0 2px 8px rgba(0,0,0,0.06);animation:akpsPillExpand 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;gap:4px;z-index:4;}
@keyframes akpsPillExpand{from{opacity:0;transform:scale(0.75)}to{opacity:1;transform:scale(1)}}
.ak-qty-btn{width:28px;height:28px;border-radius:50%;border:none;background:#FFCC00;color:#14181f;font-size:15px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 0.15s ease,background 0.15s ease;padding:0;line-height:1;user-select:none;}
.ak-qty-btn:active{transform:scale(0.88);}
.ak-qty-btn.plus{background:#10b981;color:#fff;}
.ak-qty-btn.plus:hover{background:#059669;}
.ak-qty-btn.minus{background:#e2e8f0;color:#475569;}
.ak-qty-btn.minus:hover{background:#cbd5e1;}
.ak-qty-num{min-width:20px;text-align:center;font-size:13.5px;font-weight:800;color:#1e293b;user-select:none;}
.akps-oos-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:99px;font-size:12px;font-weight:800;color:#2874F0 !important;background:transparent;border:1.5px solid #c9d8f6;cursor:pointer;transition:all .2s ease;}
.akps-oos-btn:hover{background:#eef4ff;border-color:#2874F0;}
.akps-swiper .swiper-button-next,.akps-swiper .swiper-button-prev{top:42%;width:44px !important;height:44px !important;background:rgba(255,255,255,.97);border:1px solid #e8ebf0;border-radius:50%;box-shadow:0 6px 16px rgba(20,24,31,.12);transition:all .25s ease;}
.akps-swiper .swiper-button-next::after,.akps-swiper .swiper-button-prev::after{font-size:15px !important;font-weight:900;color:#232a35;}
.akps-swiper .swiper-button-next:hover,.akps-swiper .swiper-button-prev:hover{background:#FFCC00;border-color:#FFCC00;}
.akps-swiper .swiper-button-next:hover::after,.akps-swiper .swiper-button-prev:hover::after{color:#14181f;}
.akps-swiper .swiper-button-lock{display:none;}
.custom-notify-modal-wrapper{display:none;position:fixed;z-index:100000;left:0;top:0;width:100%;height:100%;background:rgba(15,18,25,.55);align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.custom-notify-modal-wrapper.active{display:flex;}
.custom-notify-modal-content{background:#fff;border-radius:18px;padding:34px 28px 28px;width:min(92%,400px);box-shadow:0 24px 60px rgba(0,0,0,.22);position:relative;animation:akpsPop .3s ease;}
@keyframes akpsPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.custom-notify-modal-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:#8b93a1;cursor:pointer;background:#f3f5f8;line-height:1;transition:.2s;}
.custom-notify-modal-close:hover{background:#e8ebf0;color:#14181f;}
.custom-notify-modal-content h3{color:#14181f;font-size:19px;font-weight:800;margin:0 0 8px;text-align:center;}
.custom-notify-modal-content p{color:#66707e;font-size:13.5px;line-height:1.55;margin:0 0 20px;text-align:center;font-weight:500;}
.custom-notify-form label{display:block;font-size:12.5px;font-weight:700;color:#3a424e;margin-bottom:8px;}
.custom-notify-form label span{color:#ef4444;}
.custom-notify-input{width:100%;padding:13px 14px;border-radius:11px;border:1.5px solid #e2e6ec;font-size:14px;color:#14181f;margin-bottom:16px;box-sizing:border-box;outline:none;transition:border-color .2s;}
.custom-notify-input:focus{border-color:#2874F0;box-shadow:0 0 0 3px rgba(40,116,240,.12);}
.custom-notify-submit{background:#2874F0;color:#fff !important;border:none;width:100%;padding:13px;border-radius:11px;font-weight:800;font-size:14.5px;letter-spacing:.3px;cursor:pointer;display:block;transition:.2s;}
.custom-notify-submit:hover{background:#1e63d6;}
.akps-card a:focus-visible,.akps-oos-btn:focus-visible{outline:2px solid #FFCC00;outline-offset:2px;border-radius:8px;}
@media(max-width:767px){
.akps-wrap{padding:22px 0;}
.akps-head{padding:0 12px 14px;}
.akps-swiper{padding-left:12px !important;padding-right:12px !important;}
.akps-swiper .swiper-button-next,.akps-swiper .swiper-button-prev{display:none !important;}
}
@media(max-width:639px){
.akps-name{font-size:13px;}
.custom-add-to-cart-plus{width:36px;height:36px;}
}
@media(prefers-reduced-motion:reduce){
.akps-swiper,.akps-card,.akps-img{animation:none !important;transition:none !important;}
}
/* =========================================================
SweetAlert Modern Product Image Preview Lightbox
========================================================= */
.swal2-popup.swal-product-preview-popup {
border-radius: 20px !important;
padding: 24px 20px 20px !important;
max-width: 400px !important;
width: 90vw !important;
background: #ffffff !important;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2) !important;
border: 1px solid rgba(226, 232, 240, 0.9) !important;
overflow: hidden !important;
}
.swal-product-preview-popup .swal2-html-container {
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.swal-product-preview-popup .swal2-close {
width: 32px !important;
height: 32px !important;
top: 12px !important;
right: 12px !important;
border-radius: 50% !important;
background: #f1f5f9 !important;
color: #64748b !important;
font-size: 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.2s ease !important;
outline: none !important;
border: none !important;
}
.swal-product-preview-popup .swal2-close:hover {
background: #e2e8f0 !important;
color: #0f172a !important;
transform: scale(1.08) !important;
}
.swal-product-preview-card {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.swal-product-preview-img-wrap {
width: 100%;
height: 280px;
background: #f8fafc;
border: 1px solid #edf2f7;
border-radius: 16px;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-sizing: border-box;
}
.swal-product-preview-img-wrap img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
border-radius: 8px;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.06));
transition: transform 0.25s ease;
}
.swal-product-preview-title {
font-size: 15px !important;
font-weight: 700 !important;
color: #1e293b !important;
line-height: 1.45 !important;
margin: 16px 0 4px 0 !important;
padding: 0 6px !important;
text-align: center !important;
font-family: inherit !important;
}
@media (max-width: 480px) {
.swal2-popup.swal-product-preview-popup {
padding: 20px 16px 16px !important;
max-width: 340px !important;
}
.swal-product-preview-img-wrap {
height: 230px;
padding: 12px;
}
.swal-product-preview-title {
font-size: 13.5px !important;
}
}
/* =========================================================
Ultra Clean Full-Image Lightbox Modal (ZERO Empty White Spaces)
========================================================= */
.swal2-container .swal2-popup.swal-product-full-lightbox {
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
width: auto !important;
max-width: min(92vw, 440px) !important;
border-radius: 20px !important;
overflow: hidden !important;
border: none !important;
}
.swal-product-full-lightbox .swal2-html-container {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
.swal-lightbox-wrap {
position: relative;
background: #ffffff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.45);
display: flex;
flex-direction: column;
}
.swal-lightbox-media {
position: relative;
width: 100%;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 0;
}
.swal-lightbox-media img.swal-full-lightbox-img {
width: 100% !important;
height: auto !important;
max-height: 70vh !important;
object-fit: contain !important;
display: block !important;
margin: 0 !important;
border-radius: 20px 20px 0 0 !important;
}
.swal-lightbox-close {
position: absolute;
top: 12px;
right: 12px;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(15, 23, 42, 0.72) !important;
color: #ffffff !important;
font-size: 24px !important;
line-height: 1 !important;
border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
cursor: pointer;
z-index: 99;
display: flex !important;
align-items: center !important;
justify-content: center !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: all 0.2s ease;
padding: 0;
}
.swal-lightbox-close:hover {
background: rgba(15, 23, 42, 0.95) !important;
transform: scale(1.08);
}
.swal-lightbox-caption {
padding: 16px 20px 18px;
background: #ffffff;
text-align: center;
border-top: 1px solid #f1f5f9;
}
.swal-lightbox-title {
font-size: 15px;
font-weight: 700;
color: #0f172a;
line-height: 1.45;
margin: 0;
}
/* Fallback: if browser cache serves the old Swal.fire with native imageUrl */
.swal2-container .swal2-popup:has(.swal2-image) {
padding: 0 0 16px 0 !important;
max-width: min(92vw, 440px) !important;
border-radius: 20px !important;
overflow: hidden !important;
}
.swal2-container .swal2-popup .swal2-image {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: 70vh !important;
object-fit: contain !important;
margin: 0 !important;
border-radius: 20px 20px 0 0 !important;
}
.swal2-container .swal2-popup .swal2-title {
padding: 14px 18px 0 !important;
margin: 0 !important;
font-size: 15px !important;
font-weight: 700 !important;
}
/* =========================================================
Top Announcement Bar Zero-FOUC Head Styles
========================================================= */
.ak-announcement-bar {
background: #090d16 !important;
color: #ffffff !important;
padding: 0 !important;
margin: 0 !important;
height: 42px !important;
position: relative !important;
width: 100% !important;
z-index: 99999 !important;
font-size: 13px !important;
font-weight: 600 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
overflow: hidden !important;
white-space: nowrap !important;
box-sizing: border-box !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.ak-announcement-bar * {
box-sizing: border-box !important;
}
.ak-marquee {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
width: max-content !important;
height: 100% !important;
animation: ak-marquee-scroll 75s linear infinite !important;
will-change: transform;
}
.ak-marquee-content {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-shrink: 0 !important;
height: 100% !important;
}
.ak-item {
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
padding: 0 4px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
height: 100% !important;
}
.ak-text {
font-weight: 700 !important;
color: #f8fafc !important;
letter-spacing: 0.3px !important;
font-size: 13px !important;
display: inline-block !important;
line-height: 1 !important;
}
.ak-badge {
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
padding: 2px 8px !important;
border-radius: 6px !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 0.5px !important;
margin-right: 8px !important;
color: #ffffff !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
text-transform: uppercase !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
.ak-badge-orange { background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%) !important; }
.ak-badge-green { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important; }
.ak-badge-blue { background: linear-gradient(135deg, #00b4db 0%, #0083b0 100%) !important; }
.ak-badge-purple { background: linear-gradient(135deg, #8e2de2 0%, #4a00e0 100%) !important; }
.ak-sep {
margin: 0 16px !important;
color: #38bdf8 !important;
font-size: 13px !important;
opacity: 0.85 !important;
display: inline-block !important;
line-height: 1 !important;
}
@keyframes ak-marquee-scroll {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}
/* =====================================================================
ENTERPRISE MODERN ALIKART NEWSLETTER SECTION & FEATURE
===================================================================== */
.site-footer .footer-subscribe {
display: none !important; /* Hide old blue subscribe banner completely */
}
.ak-newsletter-section {
padding: 35px 0 25px;
background-color: transparent;
position: relative;
z-index: 5;
}
.ak-newsletter-card {
background: linear-gradient(135deg, #0b1120 0%, #161f36 50%, #0f172a 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
padding: 40px 48px;
box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}
.ak-newsletter-card::before {
content: '';
position: absolute;
top: -80px;
right: -80px;
width: 320px;
height: 320px;
background: radial-gradient(circle, rgba(234, 43, 15, 0.22) 0%, transparent 70%);
pointer-events: none;
border-radius: 50%;
filter: blur(40px);
}
.ak-newsletter-card::after {
content: '';
position: absolute;
bottom: -80px;
left: -80px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(43, 190, 249, 0.16) 0%, transparent 70%);
pointer-events: none;
border-radius: 50%;
filter: blur(40px);
}
.ak-news-content {
position: relative;
z-index: 2;
}
.ak-news-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(234, 43, 15, 0.14);
border: 1px solid rgba(234, 43, 15, 0.32);
color: #ff6b4a;
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
padding: 4px 12px;
border-radius: 50px;
margin-bottom: 14px;
}
.ak-badge-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #ea2b0f;
box-shadow: 0 0 8px #ea2b0f;
display: inline-block;
}
.ak-news-title {
font-size: 2.1rem;
font-weight: 800;
color: #ffffff;
line-height: 1.25;
margin-bottom: 12px;
letter-spacing: -0.5px;
}
.ak-news-highlight {
background: linear-gradient(135deg, #ff9900 0%, #ff5722 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 900;
display: inline-block;
}
.ak-news-desc {
color: #94a3b8;
font-size: 14px;
line-height: 1.6;
margin-bottom: 24px;
max-width: 520px;
}
.ak-news-form {
position: relative;
z-index: 3;
}
.ak-news-input-wrap {
display: flex;
align-items: center;
background: #ffffff;
border-radius: 12px;
padding: 5px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
max-width: 520px;
transition: box-shadow 0.2s, border-color 0.2s;
border: 2px solid transparent;
}
.ak-news-input-wrap:focus-within {
border-color: #ff5722;
box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.25);
}
.ak-news-input-icon {
padding: 0 12px;
color: #94a3b8;
font-size: 20px;
display: flex;
align-items: center;
}
.ak-news-input {
flex: 1;
border: none !important;
outline: none !important;
font-size: 14px !important;
color: #0f172a !important;
padding: 10px 4px !important;
background: transparent !important;
box-shadow: none !important;
}
.ak-news-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #ea2b0f 0%, #ff6a00 100%) !important;
color: #ffffff !important;
border: none !important;
border-radius: 9px !important;
padding: 12px 22px !important;
font-weight: 700 !important;
font-size: 13.5px !important;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(234, 43, 15, 0.35);
}
.ak-news-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(234, 43, 15, 0.45);
}
.ak-news-feedback {
margin-top: 14px;
max-width: 520px;
border-radius: 8px;
padding: 12px 16px;
font-size: 13px;
font-weight: 600;
}
.ak-news-success {
background: rgba(22, 163, 74, 0.15);
border: 1px solid rgba(22, 163, 74, 0.35);
color: #4ade80;
}
.ak-feedback-content {
display: flex;
align-items: center;
gap: 10px;
}
.ak-feedback-content i {
font-size: 20px;
}
.ak-coupon-pill {
background: #16a34a;
color: #ffffff;
padding: 2px 7px;
border-radius: 4px;
font-weight: 800;
letter-spacing: 0.5px;
margin-left: 4px;
display: inline-block;
}
.ak-news-error {
background: rgba(220, 38, 38, 0.15);
border: 1px solid rgba(220, 38, 38, 0.35);
color: #f87171;
}
.ak-news-perks {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 18px;
margin-top: 20px;
}
.ak-perk-item {
display: inline-flex;
align-items: center;
gap: 6px;
color: #cbd5e1;
font-size: 12.5px;
font-weight: 500;
}
.ak-perk-item i {
color: #2bbef9;
font-size: 16px;
}
.ak-news-visual {
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding: 10px;
z-index: 2;
}
.ak-news-image-wrapper {
position: relative;
max-width: 360px;
width: 100%;
}
.ak-news-img {
width: 100%;
height: auto;
border-radius: 18px;
display: block;
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
animation: akFloatBanner 4s ease-in-out infinite alternate;
}
@keyframes akFloatBanner {
0% { transform: translateY(0px); }
100% { transform: translateY(-8px); }
}
.ak-floating-badge {
position: absolute;
background: rgba(15, 23, 42, 0.88);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 10px;
padding: 8px 12px;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
z-index: 4;
}
.ak-floating-deals {
top: 15px;
left: -15px;
}
.ak-floating-deals i {
color: #ff5722;
font-size: 22px;
}
.ak-floating-users {
bottom: 15px;
right: -15px;
}
.ak-floating-users i {
color: #2bbef9;
font-size: 22px;
}
.ak-float-title {
display: block;
font-size: 12px;
font-weight: 800;
color: #ffffff;
line-height: 1.2;
}
.ak-float-sub {
display: block;
font-size: 10px;
color: #94a3b8;
font-weight: 500;
}
/* =====================================================================
ENTERPRISE VIBRANT PAYMENT BADGES ENGINE (Mobile / Tablet / PC)
===================================================================== */
.ak-payment-badges-wrap {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 10px;
vertical-align: middle;
}
.ak-pay-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 6px !important;
padding: 3px 8px !important;
height: 28px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
flex-shrink: 0;
box-sizing: border-box;
}
.ak-pay-badge:hover {
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1) !important;
border-color: #cbd5e1 !important;
}
.ak-pay-badge svg {
height: 20px;
width: auto;
max-height: 20px;
display: block;
}
.ak-pay-badge.ak-pay-upi svg { height: 18px; }
.ak-pay-badge.ak-pay-rupay svg { height: 16px; }
.ak-pay-badge.ak-pay-visa svg { height: 14px; }
.ak-pay-badge.ak-pay-mastercard svg { height: 18px; }
.ak-pay-badge.ak-pay-cod svg { height: 18px; }
/* Footer bottom alignment */
.site-footer .site-payments {
display: flex;
align-items: center;
margin-left: auto;
padding-left: 20px;
}
/* =====================================================================
DEVICE RESPONSIVE BREAKPOINTS (Mobile / Tablet / PC)
===================================================================== */
/* Tablet (769px - 991px) */
@media screen and (max-width: 991px) {
.ak-newsletter-card {
padding: 32px 28px;
}
.ak-news-title {
font-size: 1.7rem;
}
.ak-news-visual {
margin-top: 24px;
}
.ak-news-image-wrapper {
max-width: 290px;
}
.ak-floating-deals {
left: -5px;
}
.ak-floating-users {
right: -5px;
}
.ak-payment-badges-wrap {
gap: 6px 8px;
}
.ak-pay-badge {
height: 26px !important;
padding: 2px 6px !important;
}
.ak-pay-badge.ak-pay-upi svg { height: 16px; }
.ak-pay-badge.ak-pay-rupay svg { height: 14px; }
.ak-pay-badge.ak-pay-visa svg { height: 13px; }
.ak-pay-badge.ak-pay-mastercard svg { height: 16px; }
.ak-pay-badge.ak-pay-cod svg { height: 16px; }
}
/* Mobile & Small Screens (<= 768px) */
@media screen and (max-width: 768px) {
.site-footer .footer-bottom .container {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 14px !important;
}
.site-footer .site-copyright {
text-align: center !important;
width: 100% !important;
}
.site-footer .site-payments {
margin: 0 auto !important;
padding: 0 !important;
width: 100% !important;
justify-content: center !important;
}
.site-footer .site-payments .ak-payment-badges-wrap {
justify-content: center !important;
}
}
/* Extra Small Mobile (<= 576px) */
@media screen and (max-width: 576px) {
.ak-newsletter-section {
padding: 20px 0 15px;
}
.ak-newsletter-card {
padding: 22px 16px;
border-radius: 16px;
}
.ak-news-badge {
font-size: 10.5px;
padding: 3px 10px;
margin-bottom: 10px;
}
.ak-news-title {
font-size: 1.35rem;
margin-bottom: 8px;
}
.ak-news-desc {
font-size: 13px;
margin-bottom: 18px;
}
.ak-news-input-wrap {
flex-direction: column;
background: transparent;
box-shadow: none;
gap: 10px;
padding: 0;
border: none;
position: relative;
}
.ak-news-input {
width: 100% !important;
background: #ffffff !important;
border-radius: 10px !important;
padding: 12px 14px 12px 38px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
box-sizing: border-box !important;
}
.ak-news-input-icon {
position: absolute;
left: 10px;
top: 13px;
z-index: 5;
}
.ak-news-btn {
width: 100% !important;
justify-content: center !important;
padding: 12px 20px !important;
font-size: 14px !important;
border-radius: 10px !important;
}
.ak-news-perks {
gap: 8px 14px;
margin-top: 16px;
}
.ak-perk-item {
font-size: 11.5px;
}
.ak-news-visual {
margin-top: 20px;
padding: 0;
}
.ak-news-image-wrapper {
max-width: 220px;
}
.ak-floating-badge {
padding: 5px 8px;
gap: 6px;
border-radius: 8px;
}
.ak-floating-deals {
top: 8px;
left: -8px;
}
.ak-floating-users {
bottom: 8px;
right: -8px;
}
.ak-float-title {
font-size: 10.5px;
}
.ak-float-sub {
font-size: 9px;
}
/* Payment Badges on Mobile */
.ak-payment-badges-wrap {
justify-content: center;
gap: 6px 6px;
width: 100%;
}
.ak-pay-badge {
height: 24px !important;
padding: 2px 5px !important;
border-radius: 5px !important;
}
.ak-pay-badge.ak-pay-upi svg { height: 14px; }
.ak-pay-badge.ak-pay-rupay svg { height: 13px; }
.ak-pay-badge.ak-pay-visa svg { height: 12px; }
.ak-pay-badge.ak-pay-mastercard svg { height: 15px; }
.ak-pay-badge.ak-pay-cod svg { height: 15px; }
}
/* =====================================================================
ALIKART ZERO-CLS SINGLE PRODUCT CONTENT ICONS (FOUT FIX)
Single-product "AliKart Assured" icons must NOT shift left/right on
first paint while the async boxicons pictogram font is still loading.
Strategy (CTO standard, all devices / OS):
1. boxicons.woff2 is has ZERO
width until the stylesheet + pictogram font arrive, so adjacent text
first renders left of its final position and then jumps right when the
glyph paints — the classic icon FOUT visible across every page (drawer
menu, checkout/cart headers, footer links, etc.).
Fix: give every boxicons glyph a reserved inline-box from the very first
synchronous stylesheet. The glyph paints INSIDE that reserved slot when it
arrives, so it never shifts sibling text. The preloaded boxicons.woff2
(caching-performance.php) makes the slot filled by first paint in practice.
===================================================================== */
.bx {
display: inline-block !important;
text-align: center !important;
min-width: 1.1em !important;
line-height: 1 !important;
-webkit-font-smoothing: antialiased;
}
/* Fixed icon slots keep their own exact reserves (already defined above) —
higher specificity beats the generic rule, so nothing here can overflow them. */
/* Homepage icon-boxes: pictograms appear inside the fixed 45px circle and
never alter the item width (icon cell is flex:0 0 45px). */
.elementor-widget-bacola-icon-list .iconboxes-widget .item {
display: flex !important;
align-items: center !important;
}
.elementor-widget-bacola-icon-list .iconboxes-widget .item .icon {
flex: 0 0 45px !important;
width: 45px !important;
height: 45px !important;
}
/* Optimistic cart-count bump: brief pop when Add-to-Cart is tapped */
span.cart-count-icon.ak-bump {
animation: ak-cart-pop 0.8s ease;
}
@keyframes ak-cart-pop {
0% { transform: scale(1); }
35% { transform: scale(1.35); }
70% { transform: scale(0.92); }
100% { transform: scale(1); }
}
/* =====================================================================
PRODUCT CARD BOXES & DELIVERY PILL ENHANCEMENT
Provides crisp card separation, defined grid borders, and polished delivery badges
===================================================================== */
.products:not(.products-list):not(.woocommerce-mini-cart) .product {
border-right: 1px solid #eaebf2 !important;
border-bottom: 1px solid #eaebf2 !important;
background: #ffffff !important;
padding-bottom: 10px !important;
box-sizing: border-box !important;
transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.products:not(.products-list):not(.woocommerce-mini-cart) .product:hover {
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important;
z-index: 3 !important;
}
/* Delivery Pill Badge (⚡ 4-Hour Express / 🚚 Standard) */
.alikart-loop-delivery-tag {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 6px 14px 4px 14px !important;
padding: 5px 10px !important;
border-radius: 6px !important;
font-size: 11px !important;
font-weight: 700 !important;
text-align: center !important;
line-height: 1.3 !important;
box-sizing: border-box !important;
}
.alikart-loop-delivery-tag.local {
background: #eff6ff !important;
color: #1d4ed8 !important;
border: 1px solid #dbeafe !important;
}
.alikart-loop-delivery-tag.standard {
background: #f0fdf4 !important;
color: #15803d !important;
border: 1px solid #dcfce7 !important;
}
/* =====================================================================
SUBCATEGORY CARDS PERFECT ALIGNMENT (FULL WEBSITE)
Pins all red [XX ITEMS] badges to the exact same baseline across all cards
===================================================================== */
.ak-subcat-card {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
border-radius: 10px !important;
padding: 16px 8px 14px 8px !important;
text-align: center !important;
height: 195px !important;
width: 100% !important;
text-decoration: none !important;
box-sizing: border-box !important;
position: relative !important;
transition: all 0.2s ease !important;
}
.ak-subcat-img {
width: 70px !important;
height: 70px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 8px !important;
flex-shrink: 0 !important;
}
.ak-subcat-img img {
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
mix-blend-mode: multiply !important;
}
.ak-subcat-title {
font-size: 13px !important;
font-weight: 800 !important;
color: #111827 !important;
margin: 0 0 6px 0 !important;
line-height: 1.3 !important;
font-family: "Inter", sans-serif !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
height: 34px !important;
max-height: 34px !important;
text-align: center !important;
flex-shrink: 0 !important;
}
.ak-subcat-count {
background-color: #ef4444 !important;
color: #ffffff !important;
font-size: 11px !important;
font-weight: 800 !important;
padding: 5px 16px !important;
border-radius: 20px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
margin-top: auto !important;
margin-bottom: 0 !important;
white-space: nowrap !important;
box-shadow: 0 2px 4px rgba(239, 68, 68, 0.15) !important;
flex-shrink: 0 !important;
}
@media (max-width: 767px) {
.ak-subcat-card {
height: 155px !important;
padding: 12px 6px 12px 6px !important;
border-radius: 8px !important;
justify-content: flex-start !important;
}
.ak-subcat-img {
width: 50px !important;
height: 50px !important;
margin-bottom: 6px !important;
flex-shrink: 0 !important;
}
.ak-subcat-title {
font-size: 11px !important;
height: 28px !important;
max-height: 28px !important;
margin: 0 0 4px 0 !important;
line-height: 1.25 !important;
flex-shrink: 0 !important;
}
.ak-subcat-count {
padding: 4px 10px !important;
font-size: 9px !important;
border-radius: 20px !important;
margin-top: auto !important;
margin-bottom: 0 !important;
flex-shrink: 0 !important;
}
}
/* =====================================================================
ALIKART 2026-09-28: CART COLUMN ALIGNMENT (mobile + tablet)
-------------------------------------------------------------------------
Problem: on <=768px the cart row becomes a CSS grid
(grid-template-columns:85px 1fr) but the table's header row is
left in normal table flow, so the header labels (Product / Price /
Quantity / Subtotal) sit above a grid that no longer uses table
columns. On top of that .product-price is set to display:none, so
the unit price disappears entirely and Price/Subtotal can end up
reading as the same number. base.min.css additionally hides only
td.product-subtotal at <=36rem (not the matching th), so header and
body disagree.
Fix: make the header consistent with the grid by hiding it on the
grid layouts, and label each value inline so every figure is
unambiguous. Desktop (>768px) is left completely untouched.
===================================================================== */
@media screen and (max-width: 768px) {
/* The grid row replaces table columns, so the header row is
redundant and is the source of the misalignment. Hide it. */
.modern-cart-layout .woocommerce-cart-form__contents thead,
.modern-cart-layout .woocommerce-cart-form__contents thead th {
display: none !important;
}
/* Show the unit price again and give it its own labelled row so
Price and Subtotal are never confused. */
.modern-cart-layout .product-price {
display: block !important;
grid-column: 2;
grid-row: 2;
width: 100%;
margin: 0;
text-align: left;
font-size: 13px;
font-weight: 500;
color: #64748b;
}
.modern-cart-layout .product-price::before {
content: "Price: ";
font-weight: 600;
color: #0f1111;
}
/* Quantity gets row 3, subtotal row 4. */
.modern-cart-layout .product-quantity {
grid-column: 2;
grid-row: 3;
width: 100%;
margin: 6px 0 0;
display: flex;
justify-content: flex-start;
align-items: center;
}
.modern-cart-layout .product-quantity::before {
content: "Quantity: ";
font-weight: 600;
font-size: 14px;
color: #0f1111;
margin-right: 8px;
}
.modern-cart-layout .product-subtotal {
grid-column: 2;
grid-row: 4;
font-size: 16px;
font-weight: 700;
text-align: left;
position: static;
margin-top: 6px;
}
.modern-cart-layout .product-subtotal::before {
content: "Subtotal: ";
font-weight: 700;
}
/* Four rows now, so let the thumbnail span them all. */
.modern-cart-layout .product-thumbnail {
grid-row: 1 / 5;
}
.modern-cart-layout .product-name {
grid-row: 1;
}
/* Neutralise the base.min.css rule that hid only the subtotal . */
.modern-cart-layout .woocommerce-cart-form__contents
td.product-subtotal {
display: block !important;
}
/* Keep numeric columns optically aligned on the right of their
labels rather than stretching full width. */
.modern-cart-layout .product-price,
.modern-cart-layout .product-subtotal {
display: flex !important;
align-items: baseline;
gap: 6px;
}
}
/* =====================================================================
ALIKART 2026-09-28 (part 2): BEAT base.min.css !important ON THE CART
-------------------------------------------------------------------------
base.min.css @media (max-width:36rem) contains:
.woocommerce-cart-form table th.product-price,
th.product-subtotal, th.product-remove {display:none !important}
.woocommerce-cart-form table td.product-price {display:none !important}
Consequences at <=576px:
- td.product-price is force-hidden, so unit price is invisible even
though the earlier block re-showed it.
- th.product-price is NOT in that hide list, so the Price HEADER
survives while its body cells are gone -> an orphan "Price"
column header floating above the cart (the reported symptom).
Fix: match the !important specificity, and hide the whole thead
rather than cherry-picking individual th cells, so header and body
can never disagree again.
===================================================================== */
@media screen and (max-width: 36rem) {
/* Kill the ENTIRE header row, not selected th cells. The grid layout
supplies its own inline labels, so a header row is redundant and
is the source of every alignment complaint. */
.modern-cart-layout .woocommerce-cart-form__contents thead,
.modern-cart-layout .woocommerce-cart-form__contents thead tr,
.modern-cart-layout .woocommerce-cart-form__contents thead th,
.modern-cart-layout .woocommerce-cart-form__contents th.product-price,
.modern-cart-layout .woocommerce-cart-form__contents th.product-subtotal,
.modern-cart-layout .woocommerce-cart-form__contents th.product-remove,
.modern-cart-layout .woocommerce-cart-form__contents th.product-quantity,
.modern-cart-layout .woocommerce-cart-form__contents th.product-name,
.modern-cart-layout .woocommerce-cart-form__contents th.product-thumbnail {
display: none !important;
}
/* Restore the unit price with matching !important specificity so it
actually shows next to its "Price:" label. */
.modern-cart-layout .woocommerce-cart-form__contents td.product-price,
.modern-cart-layout .woocommerce-cart-form__contents .product-price {
display: flex !important;
align-items: baseline;
gap: 6px;
grid-column: 2;
grid-row: 2;
width: 100%;
margin: 0;
text-align: left;
font-size: 13px;
font-weight: 500;
color: #64748b;
}
.modern-cart-layout .woocommerce-cart-form__contents .product-price::before {
content: "Price: ";
font-weight: 600;
color: #0f1111;
}
/* Keep subtotal visible and consistent with the price row. */
.modern-cart-layout .woocommerce-cart-form__contents td.product-subtotal,
.modern-cart-layout .woocommerce-cart-form__contents .product-subtotal {
display: flex !important;
align-items: baseline;
gap: 6px;
grid-column: 2;
grid-row: 4;
width: 100%;
margin-top: 6px;
font-size: 16px;
font-weight: 700;
text-align: left;
position: static;
}
.modern-cart-layout .woocommerce-cart-form__contents .product-subtotal::before {
content: "Subtotal: ";
font-weight: 700;
}
/* Quantity on its own row with a label, spanning the 4-row grid. */
.modern-cart-layout .woocommerce-cart-form__contents .product-quantity {
grid-column: 2;
grid-row: 3;
width: 100%;
margin: 6px 0 0;
display: flex;
justify-content: flex-start;
align-items: center;
}
.modern-cart-layout .woocommerce-cart-form__contents .product-quantity::before {
content: "Quantity: ";
font-weight: 600;
font-size: 14px;
color: #0f1111;
margin-right: 8px;
}
.modern-cart-layout .woocommerce-cart-form__contents .product-thumbnail {
grid-row: 1 / 5;
}
.modern-cart-layout .woocommerce-cart-form__contents .product-name {
grid-row: 1;
}
}
/* =====================================================================
DEFENSIVE SIDE-CART FIX: Ensure smooth drawer slide-in and overlay
===================================================================== */
.cart-widget-side {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: auto !important;
width: 380px !important;
max-width: 90vw !important;
height: 100% !important;
height: 100vh !important;
height: 100dvh !important;
z-index: 100005 !important;
transform: translateX(100%) !important;
-webkit-transform: translateX(100%) !important;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
visibility: hidden !important;
pointer-events: none !important;
background: #ffffff !important;
box-shadow: -5px 0 25px rgba(0, 0, 0, 0.18) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
display: block !important;
}
.cart-widget-side.active,
.cart-widget-side.open,
.site-drawer-open .cart-widget-side {
transform: translateX(0) !important;
-webkit-transform: translateX(0) !important;
visibility: visible !important;
pointer-events: auto !important;
}
.cart-widget-side .cart-side-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 1rem 1.25rem !important;
border-bottom: 1px solid #e2e8f0 !important;
}
.cart-widget-side .cart-side-header .cart-side-title {
font-size: 1.125rem !important;
font-weight: 700 !important;
color: #1e293b !important;
}
.cart-widget-side .cart-side-header .cart-side-close {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 2.25rem !important;
height: 2.25rem !important;
border-radius: 50% !important;
background: #f1f5f9 !important;
color: #64748b !important;
font-size: 1.25rem !important;
cursor: pointer !important;
transition: background-color 0.2s, color 0.2s !important;
}
.cart-widget-side .cart-side-header .cart-side-close:hover {
background: #e2e8f0 !important;
color: #0f172a !important;
}
.site-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
background-color: rgba(0, 0, 0, 0.5) !important;
backdrop-filter: blur(2px) !important;
-webkit-backdrop-filter: blur(2px) !important;
z-index: 100000 !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity 0.3s ease, visibility 0.3s ease !important;
}
.site-overlay.active,
.site-drawer-open .site-overlay {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
display: block !important;
}
body.side-cart-open {
overflow: hidden !important;
}
/* =====================================================================
ENTERPRISE WELCOME BANNER - PERFECT ALIGNMENT (CTO APPROVED)
===================================================================== */
.elementor-element-4d9f652 .elementor-widget-container > .banner-container,
.banner-container {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
background: linear-gradient(135deg, #fffcf7 0%, #fff6ec 100%) !important;
border: 2px solid #FF9933 !important;
border-radius: 14px !important;
padding: 22px 28px !important;
margin: 15px auto 25px auto !important;
box-shadow: 0 4px 20px rgba(255, 153, 51, 0.12) !important;
overflow: hidden !important;
}
.banner-container .banner-title {
font-size: 28px !important;
font-weight: 800 !important;
color: #111827 !important;
line-height: 1.25 !important;
margin: 0 0 10px 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
text-align: center !important;
letter-spacing: -0.02em !important;
}
.banner-container .banner-title .flag-icon {
width: 32px !important;
height: 32px !important;
object-fit: contain !important;
vertical-align: middle !important;
display: inline-block !important;
}
.banner-container .banner-text {
font-size: 16px !important;
line-height: 1.6 !important;
color: #374151 !important;
margin: 0 !important;
text-align: center !important;
font-weight: 500 !important;
max-width: 800px !important;
}
.banner-container .banner-text .highlight-orange {
color: #ff9933 !important;
font-weight: 700 !important;
}
.banner-container .banner-text .highlight-grey {
color: #128807 !important;
font-weight: 700 !important;
}
.banner-container .banner-text .highlight-green {
color: #000080 !important;
font-weight: 700 !important;
text-decoration: underline !important;
}
@media (max-width: 768px) {
.banner-container .banner-title {
font-size: 20px !important;
gap: 8px !important;
}
.banner-container .banner-title .flag-icon {
width: 24px !important;
height: 24px !important;
}
.banner-container .banner-text {
font-size: 14px !important;
}
.elementor-element-4d9f652 .elementor-widget-container > .banner-container,
.banner-container {
padding: 16px 18px !important;
}
}
/* ==========================================================================
ALIKART ZERO-FLICKER CHECKOUT ORDER SUMMARY & PLACE ORDER STABILITY
Fixes: White screen / blank overlay flash during initial load & AJAX updates
========================================================================== */
.woocommerce-checkout .ak-checkout-card,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-checkout #payment,
.woocommerce-checkout #order_review_heading {
opacity: 1 !important;
visibility: visible !important;
transition: none !important;
}
/* Eliminate Blinding White BlockUI Overlay over Order Summary */
.woocommerce-checkout #order_review .blockUI.blockOverlay,
.woocommerce-checkout .woocommerce-checkout-review-order .blockUI.blockOverlay,
.woocommerce-checkout .ak-checkout-card .blockUI.blockOverlay,
.woocommerce-checkout #payment .blockUI.blockOverlay {
background: transparent !important;
background-color: transparent !important;
opacity: 0 !important;
pointer-events: none !important;
display: none !important;
}
/* Keep Content Solid & Crisp during update_order_review AJAX */
.woocommerce-checkout #order_review.processing,
.woocommerce-checkout .woocommerce-checkout-review-order.processing,
.woocommerce-checkout form.checkout.processing {
opacity: 1 !important;
filter: none !important;
}
/* Ensure Place Order Button Remains Visible & Crisp without Blanking Out */
.woocommerce-checkout #payment #place_order,
.woocommerce-checkout #order_review button[type="submit"] {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
cursor: pointer !important;
}
/* Elegant micro-loader for order review when updating */
.woocommerce-checkout .ak-checkout-card {
position: relative;
}
.woocommerce-checkout .woocommerce-checkout-review-order.processing::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #f87d09 0%, #2bbef9 50%, #f87d09 100%);
background-size: 200% 100%;
animation: akCheckoutLoadingBar 1.2s infinite linear;
z-index: 10;
}
@keyframes akCheckoutLoadingBar {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ==========================================================================
ALIKART PERFECT CENTER ALIGNMENT FOR PLACE ORDER BUTTON
========================================================================== */
.woocommerce-checkout #payment #place_order,
.woocommerce-checkout #order_review button#place_order,
.woocommerce-checkout #order_review button[type="submit"],
.woocommerce-checkout .place-order button {
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
text-align-last: center !important;
}
/* =====================================================================
FIX MOBILE BLUR & GOOGLE SITE KIT ADMIN BAR CHARTS
===================================================================== */
/* Crisp Solid Mobile Header (No blurry ghost container) */
.site-header.sticky-header,
.site-header,
.mobile-nav-wrapper {
background: #ffffff !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Ensure Hot Deal timer label is perfectly centered */
.ak-timer-wrapper,
.ak-timer-label-top {
text-align: center !important;
}
.ak-timer-boxes {
justify-content: center !important;
}
/* Fix Google Site Kit chart and admin bar display on frontend */
#wpadminbar #wp-admin-bar-google-site-kit {
z-index: 9999999 !important;
}
#wpadminbar #wp-admin-bar-google-site-kit .googlesitekit-adminbar {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 12px !important;
}
#wpadminbar #wp-admin-bar-google-site-kit .googlesitekit-adminbar__item {
display: inline-flex !important;
flex-direction: column !important;
min-width: 140px !important;
}
#wpadminbar #wp-admin-bar-google-site-kit canvas,
#wpadminbar #wp-admin-bar-google-site-kit svg {
max-width: 100% !important;
height: auto !important;
}
/* ==========================================================================
AliKart Modern Cart Scrollbar (Exact match to Checkout review table)
========================================================================== */
.ak-cart-scroll-wrap {
max-height: 440px;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding-right: 6px;
margin-bottom: 5px;
scrollbar-width: thin;
scrollbar-color: #cbd5e1 #f8f9fa;
border-bottom: 1px solid #f1f1f1;
position: relative;
}
/* Sticky Cart Header on Scroll */
.ak-cart-scroll-wrap thead th {
position: sticky;
top: 0;
background: #ffffff !important;
z-index: 10;
box-shadow: 0 1px 0 #f1f1f1;
}
/* Elegant Custom Scrollbar (WebKit / Chrome / Safari / Edge) */
.ak-cart-scroll-wrap::-webkit-scrollbar {
width: 6px;
}
.ak-cart-scroll-wrap::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 8px;
}
.ak-cart-scroll-wrap::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 8px;
transition: background 0.2s ease;
}
.ak-cart-scroll-wrap::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
.ak-cart-bottom-actions {
width: 100%;
}
.ak-cart-bottom-actions .actions-wrapper {
padding: 18px 0 0 0 !important;
}
/* Sticky Cart Totals on Desktop */
@media (min-width: 992px) {
.modern-cart-layout .content-secondary {
position: sticky;
top: 25px;
align-self: flex-start;
}
}
@media (max-width: 768px) {
.ak-cart-scroll-wrap {
max-height: 480px;
padding-right: 4px;
margin-bottom: 15px;
}
}