/*
Theme Name: Bricks
Theme URI: https://bricksbuilder.io/
Author: Bricks
Author URI: https://bricksbuilder.io/
Description: Visual website builder for WordPress.
Version: 1.12.4
License: GPLv2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bricks
*/

/* ===== BPG Guardian Egyp — site fonts (replaced FiraGO) ===== */
/* Default site font — used everywhere. Now served by Noto Sans Georgian
   (variable font, real weights 100–900 across Georgian + Latin). The family is
   still named 'BPGGuardian' so every existing `font-family:'BPGGuardian'` rule
   keeps working — only the underlying file changed. The Caps font
   ('BPGGuardianCaps' below) is intentionally left on BPG Guardian Caps. */
@font-face {
  font-family: 'BPGGuardian';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/wp-content/uploads/2025/05/NotoSansGeorgian-VariableFont.ttf') format('truetype');
}

/* Caps variant — headings / categories (assigned to specific selectors later). */
@font-face {
  font-family: 'BPGGuardianCaps';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/wp-content/uploads/2025/05/BPG%20Guardian%20Egyp%20Caps%20Bold-DZkPsvGd.ttf') format('truetype');
}

/* Enforce BPGGuardian everywhere */
html, body, *, button, input, select, textarea {
  font-family: 'BPGGuardian', sans-serif !important;
}

/* Restore FontAwesome icon fonts — the global rule above (with *, !important) would
   otherwise force BPGGuardian onto <i class="fa-..."> and break every FA glyph. */
.fa-brands, .fab {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}
.fa-solid, .fas {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}
.fa, .fas, .far, .fal, .fa-regular, .fa-light {
  font-family: "Font Awesome 6 Free" !important;
}

/* CSS Variables for consistent spacing */
:root {
    --section-spacing: clamp(2rem, 5vw, 6rem);
    --container-padding: clamp(1rem, 3vw, 2rem);
    --container-max-width: min(100% - var(--container-padding) * 2, 1440px);
    --grid-gap: clamp(1rem, 2vw, 2rem);
}

/* Base styles */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Layout Container */
.page-wrapper {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Hero Section Layout */
.compact-categories-and-banner {
    display: grid;
    grid-template-columns: minmax(250px, 1fr) minmax(auto, 3fr);
    gap: var(--grid-gap);
    margin-bottom: var(--section-spacing);
}

/* Section Spacing */
.popular-products-section,
.single-poster-wrapper,
.coming-soon-products-section,
.four-banners-section,
.sale-products-section {
    margin-bottom: var(--section-spacing);
    width: 100%;
}

/* Responsive Breakpoints */
@media (max-width: 1440px) {
    .compact-categories-and-banner {
        grid-template-columns: minmax(220px, 1fr) minmax(auto, 2.5fr);
    }
}

@media (max-width: 1200px) {
    .compact-categories-and-banner {
        grid-template-columns: minmax(200px, 1fr) minmax(auto, 2fr);
    }
}

@media (max-width: 992px) {
    .compact-categories-and-banner {
        grid-template-columns: 1fr 2fr;
        gap: calc(var(--grid-gap) * 0.75);
    }
}

@media (max-width: 768px) {
    .compact-categories-and-banner {
        grid-template-columns: 1fr;
        gap: var(--grid-gap);
    }

    :root {
        --section-spacing: clamp(1.5rem, 4vw, 3rem);
    }
}

@media (max-width: 480px) {
    :root {
        --container-padding: 1rem;
        --section-spacing: clamp(1.25rem, 3vw, 2rem);
    }
}

@media (max-width: 375px) {
    :root {
        --grid-gap: 0.75rem;
    }
}

@media (max-width: 320px) {
    .page-wrapper {
        padding: 0 0.75rem;
    }
}

/* Clean base styles */
html, body {
    background-color: #ffffff !important;
    font-family: 'BPGGuardian', sans-serif;
    color: #000000;
}

/* Homepage banner + carousel grouping */
.homepage-group {
    margin: 30px 0;
}
.homepage-group .homepage-full-banner {
    margin-bottom: 10px;
}
.homepage-group .new-popular-carousel,
.homepage-group section[class^="carousel-"] {
    margin: 0 !important; /* remove default top margin when inside a group */
}

/* Mobile: tight spacing between carousel groups */
@media (max-width: 768px) {
  .homepage-group {
    padding-top: 0;
  }
  .homepage-group:not(:first-of-type),
  .category-group {
    padding-top: 0;
  }
  /* Tighter vertical gap between consecutive category groups */
  .category-group { padding-top: 0 !important; margin-top: 0; margin-bottom: 10px; }
  /* All carousels use consistent spacing via category-group margin-bottom: 10px */
}

/* All carousel wrappers use consistent spacing - removed special carousel-2 margin adjustments */
/* Uniform spacing is maintained via .category-group { margin-bottom: 10px; } */

/* Final override: tighten spacing for the sale carousel title */
/* Sale carousel section styling - typically carousel-2, but adjust if sale is in different position */
.homepage-group.category-group.carousel-2 > section.carousel-2 .carousel-header { margin-bottom: 0 !important; }
.homepage-group.category-group.carousel-2 > section.carousel-2 .carousel-title { margin: 0 !important; }

/* Basic container */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Carousels Wrapper - spacing from slider-section */
.carousels-wrapper {
    margin-top: 10px;
}

/* Homepage Container */
.homepage-container {
    min-height: 100vh;
    background: #ffffff;
    padding-top: 70px; /* Add space for header */
}

/* Hero Categories Section */
.hero-categories-section {
    padding: 30px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.hero-content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* Categories Sidebar */
.categories-sidebar {
    flex: 0 0 350px;
    background: #ffffff;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border: 1px solid #e9ecef;
}

.categories-title {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 2px solid #242323;
    padding-bottom: 10px;
    font-family: 'BPGGuardian', sans-serif;
}

.categories-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.category-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.category-item:hover {
    background: #242323;
    color: #f7e9cc;
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(220, 38, 38, 0.3);
    border-color: #242323;
}

.category-icon {
    font-size: 24px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.category-item:hover .category-icon {
    background: #ffffff;
    transform: scale(1.1);
}

.category-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.category-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
    font-family: 'BPGGuardian', sans-serif;
}

.category-item:hover .category-name {
    color: #f7e9cc;
}

.category-count {
    font-size: 12px;
    color: #666;
    font-weight: 400;
}

.category-item:hover .category-count {
    color: #f0f0f0;
}

.category-arrow {
    font-size: 18px;
    color: #f7e9cc;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.category-item:hover .category-arrow {
    color: #f7e9cc;
    transform: translateX(5px);
}

/* Products Slider Wrapper */
.products-slider-wrapper {
    flex: 1;
    background: #ffffff;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border: 1px solid #e9ecef;
}

.slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 2px solid #242323;
    padding-bottom: 15px;
}

.slider-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin: 0;
    font-family: 'BPGGuardian', sans-serif;
}

.slider-controls {
    display: flex;
    gap: 10px;
}

.slider-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: #242323;
    color: #f7e9cc;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-btn:hover {
    background: #b91c1c;
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(220, 38, 38, 0.4);
}

/* Products Slider */
.products-slider {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 0;
    scrollbar-width: thin;
    scrollbar-color: #242323 #f1f1f1;
}

.products-slider::-webkit-scrollbar {
    height: 8px;
}

.products-slider::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.products-slider::-webkit-scrollbar-thumb {
    background: #242323;
    border-radius: 10px;
}

.slider-product-card {
    flex: 0 0 250px;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 15px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.slider-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border-color: #242323;
    background: #ffffff;
}

.slider-product-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 12px;
}

.slider-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.slider-product-card:hover .slider-product-image img {
    transform: scale(1.05);
}

.slider-product-info h4 {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
    line-height: 1.3;
    font-family: 'BPGGuardian', sans-serif;
}

.slider-product-info h4 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.slider-product-info h4 a:hover {
    color: #f7e9cc;
}

.slider-product-price {
    font-size: 16px;
    font-weight: 700;
    color: #f7e9cc;
    font-family: 'BPGGuardian', sans-serif;
}

/* Main Content */
.main-content {
    padding: 60px 0;
}

.content-placeholder {
    text-align: center;
    padding: 40px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px dashed #ddd;
}

.content-placeholder h2 {
    color: #333;
    margin-bottom: 1rem;
    font-family: 'BPGGuardian', sans-serif;
}

.content-placeholder p {
    color: #666;
    font-size: 1.1rem;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .hero-content-wrapper {
        flex-direction: column;
        gap: 20px;
    }
    
    .categories-sidebar {
        flex: none;
        width: 100%;
    }
    
    .categories-menu {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .hero-categories-section {
        padding: 20px 0;
    }
    
    .categories-sidebar,
    .products-slider-wrapper {
        padding: 20px;
    }
    
    .categories-title,
    .slider-header h2 {
        font-size: 18px;
    }
    
    .category-item {
        padding: 12px;
    }
    
    .category-icon {
        width: 35px;
        height: 35px;
        font-size: 20px;
        margin-right: 12px;
    }
    
    .category-name {
        font-size: 14px;
    }
    
    .slider-product-card {
        flex: 0 0 200px;
        padding: 12px;
    }
    
    .slider-product-image {
        height: 150px;
    }
    
    .categories-menu {
        grid-template-columns: 1fr;
    }
}

/* ==============================================
   HOMEPAGE - COMPACT CATEGORIES & BANNER SLIDER
   ============================================== */

.homepage-container {
    min-height: 100vh;
    background: #ffffff;
    padding-top: 70px; /* Add space for header */
}

/* Hero Banner Section */
.hero-banner-section {
    padding: 70px 0 30px 0;
    background: #ffffff;
}

.hero-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

/* ====== COMPACT CATEGORIES MENU ====== */
.compact-categories {
    flex: 0 0 270px;
    background: #ffffff;
    border-radius: 8px;
    padding: 15px 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e5e5;
    height: fit-content;
    transition: all 0.3s ease; /* Smooth transition for sticky behavior */
}

/* Hide vertical menu on tablet and mobile */
@media (max-width: 992px) {
    .compact-categories,
    .vertical-menu,
    .vm-shell {
        display: none !important;
    }
}

/* Sticky Categories Menu */
.compact-categories.sticky-categories {
    position: fixed !important;
    top: 90px !important; /* Header height (120px) - 30px offset */
    z-index: 1000 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    background: #ffffff;
    border: 1px solid #e5e5e5;
    animation: slideInFromLeft 0.3s ease-out;
    /* Ensure no shift in positioning */
    transform: translateX(0) !important;
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-20px);
        opacity: 0.8;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.categories-title {
    display: none;
}

.categories-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.compact-category-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 25px;
    text-decoration: none;
    color: #666666;
    border-radius: 0;
    border: none;
    background: #ffffff;
    transition: all 0.3s ease;
    font-family: 'BPGGuardian', sans-serif;
    border-bottom: 1px solid #f0f0f0;
    min-height: 48px;
    box-sizing: border-box;
}

.compact-category-item:last-child {
    border-bottom: none;
}

.compact-category-item:hover {
    background: #f8f9fa;
    color: #f7e9cc;
    transform: translateX(8px);
    min-height: 48px;
}

.compact-category-item .category-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #f0f0f0;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.category-icon-img {
    width: 23px;
    height: 23px;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: brightness(0) saturate(100%) invert(47%) sepia(0%) saturate(2%) hue-rotate(336deg) brightness(95%) contrast(86%);
}

.compact-category-item:hover .category-icon {
    background-color: #242323;
}

.compact-category-item:hover .category-icon-img {
    filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
    transform: none;
}

.category-emoji-fallback {
    font-size: 14px;
    display: none;
}

.compact-category-item .category-name {
    font-size: 14px;
    font-weight: 400;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* ====== BANNER SLIDER ====== */
.banner-slider-wrapper {
    flex: 1;
    position: relative;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e5e5;
    display: flex;
    align-items: stretch;
}

.banner-slider {
    position: relative;
    width: 100%;
    height: 100%; /* Take full height of parent */
    min-height: 500px; /* Increased to match categories menu height */
    overflow: hidden;
    flex: 1;
}

.banner-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    background: linear-gradient(135deg, #242323 0%, #991b1b 100%);
}

.banner-slide.active {
    opacity: 1;
}

.banner-slide:nth-child(2) {
    background: linear-gradient(135deg, #000000 0%, #374151 100%);
}

.banner-slide:nth-child(3) {
    background: linear-gradient(135deg, #242323 0%, #000000 100%);
}

.banner-content {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 40px;
    gap: 40px;
}

.banner-text {
    flex: 1;
    color: #f7e9cc;
}

.banner-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 15px 0;
    font-family: 'BPGGuardian', sans-serif;
    line-height: 1.2;
}

.banner-text p {
    font-size: 1.1rem;
    margin: 0 0 25px 0;
    opacity: 0.9;
    line-height: 1.4;
}

.banner-btn {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: #f7e9cc;
    padding: 12px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.3);
    font-family: 'BPGGuardian', sans-serif;
}

.banner-btn:hover {
    background: white;
    color: #333;
    border-color: #f7e9cc;
    transform: translateY(-2px);
}

.banner-image {
    flex: 0 0 250px;
    text-align: center;
}

.banner-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Banner Navigation */
.banner-navigation {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 15px;
    border-radius: 25px;
    backdrop-filter: blur(10px);
}

.banner-prev,
.banner-next {
    background: rgba(255, 255, 255, 0.2);
    color: #f7e9cc;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-prev:hover,
.banner-next:hover {
    background: white;
    color: #333;
    transform: scale(1.1);
}

.banner-dots {
    display: flex;
    gap: 8px;
}

.banner-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.banner-dot.active {
    background: white;
    transform: scale(1.2);
}

/* ====== POPULAR PRODUCTS CAROUSEL SECTION ====== */
.popular-products-section {
    width: 100%;
    margin-top: 30px;
    background: #ffffff;
}

.popular-products-section .homepage-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    width: 100% !important;
}

.popular-products-section .carousel-content-wrapper {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.popular-products-section .carousel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    width: 100%;
}

.popular-products-section .section-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #000000;
    margin: 0;
    font-family: 'BPGGuardian', sans-serif;
}

.popular-products-section .products-carousel-wrapper {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.popular-products-section .products-carousel {
    display: flex;
    gap: 20px;
    width: 100% !important;
    position: relative;
}

.popular-products-section .carousel-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    cursor: pointer;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666666;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
}

.popular-products-section .carousel-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.popular-products-section .carousel-nav-prev {
    left: 10px;
}

.popular-products-section .carousel-nav-next {
    right: 10px;
}

/* Product Card Styles */
.popular-products-section .product-card {
    flex: 0 0 calc(25% - 15px); /* Exactly 4 cards with 20px gap */
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e5e5;
    transition: all 0.2s ease;
    height: 450px;
    display: flex;
    flex-direction: column;
    max-width: calc(25% - 15px); /* Ensure exactly 4 cards fit */
    min-width: calc(25% - 15px); /* Force minimum width */
}

.popular-products-section .product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    border-color: #242323;
}

.popular-products-section .product-image-wrapper {
    position: relative;
    overflow: hidden;
    height: 300px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.popular-products-section .product-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.popular-products-section .product-card:hover .product-image {
    transform: scale(1.02);
}

.popular-products-section .product-info {
    padding: 10px 15px 15px 15px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    height: 150px;
    flex-grow: 1;
}

.popular-products-section .product-title {
    margin: 2px 0 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    height: 54px;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
}

.popular-products-section .product-title a {
    color: #000000;
    text-decoration: none;
    font-family: 'BPGGuardian', sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popular-products-section .product-title a:hover {
    color: #f7e9cc;
}

.popular-products-section .product-meta-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 2px;
    height: 40px;
    justify-content: flex-start;
}

.popular-products-section .price {
    font-size: 15px;
    font-weight: 700;
    color: #f7e9cc;
    font-family: 'BPGGuardian', sans-serif;
    line-height: 1.2;
    margin-bottom: 2px;
    height: 20px;
    display: flex;
    align-items: center;
}

.popular-products-section .price del {
    font-size: 12px;
    color: #6b7280;
    text-decoration: line-through;
    text-decoration-color: #6b7280;
    opacity: 1;
    margin-right: 5px;
    display: inline-block;
}

.popular-products-section .installment-info {
    font-size: 11px;
    color: #000000;
    font-family: 'BPGGuardian', sans-serif;
    margin: 0 0 4px 0;
    line-height: 1.2;
    height: 16px;
    display: flex;
    align-items: center;
}

.popular-products-section .installment-price {
    color: #f7e9cc;
    font-weight: 600;
}

.popular-products-section .product-actions {
    margin-top: auto;
    margin-bottom: 0;
    height: 70px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding-bottom: 15px;
}

.popular-products-section .add-to-cart-btn {
    font-size: 14px !important;
    padding: 8px 16px !important;
    background-color: #242323 !important;
    color: #f7e9cc !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    align-self: flex-start !important;
    border: none !important;
    cursor: pointer !important;
    width: auto !important;
    min-width: 100px !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    margin: 6px 0 0 0 !important;
}

.popular-products-section .add-to-cart-btn:hover {
    background-color: #242323 !important;
    transform: translateY(-1px) !important;
}

.popular-products-section .add-to-cart-btn.loading {
    background-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

.popular-products-section .add-to-cart-btn.disabled {
    background-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.popular-products-section .add-to-cart-btn.in-cart {
    background-color: #28a745 !important;
    color: #f7e9cc !important;
    cursor: default !important;
}

/* Mobile Responsive */
@media (max-width: 1200px) {
    .popular-products-section .product-card {
        flex: 0 0 calc(25% - 15px);
        min-width: calc(25% - 15px);
        max-width: calc(25% - 15px);
    }
}

@media (max-width: 991px) {
    .popular-products-section .product-card {
        flex: 0 0 calc(25% - 15px);
        min-width: calc(25% - 15px);
        max-width: calc(25% - 15px);
    }
}

@media (max-width: 768px) {
    .popular-products-section .product-card {
        flex: 0 0 calc(25% - 15px);
        min-width: calc(25% - 15px);
        max-width: calc(25% - 15px);
        height: 400px;
    }

    .popular-products-section .product-image-wrapper {
        height: 200px;
    }

    .popular-products-section .product-info {
        height: 200px;
    }

    .popular-products-section .section-title {
        font-size: 1.5rem;
    }
}

/* ====== SINGLE POSTER SECTION ====== */

/* Full-width homepage banner under popular carousel */

/* Ensure sale section is visible */
.products-section.sale-section { display: block !important; visibility: visible !important; }
.products-section.sale-section .products-carousel { display: flex; gap: 20px; }
.products-section.sale-section .carousel-product-card { flex: 0 0 260px; }
.homepage-full-banner {
  width: 100%;
  background: #ffffff;
  margin: 20px 0 40px 0;
}

.homepage-banner-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.homepage-banner-link,
.homepage-banner-image {
  display: block;
  width: 100%;
}

.homepage-banner-image {
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border: 1px solid #e5e5e5;
}

@media (max-width: 768px) {
  .homepage-full-banner { margin: 0 0 20px 0; }
  .homepage-banner-container { padding: 0 15px; }
}

@media (max-width: 576px) {
  /* Align banner left padding with carousel at small mobile sizes */
  .homepage-full-banner { margin-top: 0; }
  .homepage-banner-container { padding: 0 10px; }
}

.single-poster-section {
    padding: 40px 0;
    background: #ffffff;
}

.single-poster-section .homepage-container {
    display: flex;
    align-items: flex-start;
    gap: 0;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.single-poster-wrapper {
    position: relative;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e5e5;
    margin: 0;
    padding: 0;
}

.single-poster {
    position: relative;
    width: 100%;
    height: auto; /* Will be set by JavaScript to match categories menu */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.poster-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.poster-link:hover {
    transform: scale(1.02);
}

.poster-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

/* Placeholder styling */
.single-poster.placeholder {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.poster-placeholder-content {
    text-align: center;
    color: #666;
    padding: 40px;
}

.poster-placeholder-content h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
    font-family: 'BPGGuardian', sans-serif;
}

.poster-placeholder-content p {
    font-size: 16px;
    line-height: 1.5;
    color: #666;
    max-width: 400px;
}

/* ====== RESPONSIVE DESIGN ====== */
@media (max-width: 768px) {
    .hero-wrapper {
        flex-direction: column;
        gap: 30px;
    }
    
    /* HIDE COMPACT CATEGORIES MENU ON MOBILE HOMEPAGE */
    .compact-categories {
        display: none !important;
    }
    
    /* MOVE BANNER SLIDER UP - Remove extra margin and white background */
    .banner-slider-wrapper {
        flex: none;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        order: -1; /* Move slider to top */
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    
    .categories-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }
    
    .compact-category-item {
        padding: 12px 20px;
        font-size: 14px;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .compact-category-item:last-child {
        border-bottom: none;
    }
    
    }
    
    .compact-category-item .category-name {
        font-size: 14px;
    }
    
    /* Disable sticky behavior on mobile */
    .compact-categories.sticky-categories {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        z-index: auto !important;
    }
    
    /* FIXED CAROUSEL POSITIONING */
    .carousel-product-card {
        flex: 0 0 calc(25% - 15px) !important; /* Desktop format for all screens */
        min-width: calc(25% - 15px) !important;
        max-width: calc(25% - 15px) !important;
        height: 350px !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    
    .carousel-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    /* Mobile Navigation Arrows: hide on mobile */
    .carousel-nav-btn { display: none !important; }
    .carousel-nav-prev { display: none !important; }
    .carousel-nav-next { display: none !important; }
    
    .banner-slider {
        height: 300px;
    }
    
    .banner-content {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
        gap: 20px;
    }
    
    .banner-text h2 {
        font-size: 1.8rem;
    }
    
    .banner-image {
        flex: none;
    }
    
    .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }
    
    .featured-product-card .product-image {
        height: 200px;
    }
    
    /* Single poster responsive */
    .single-poster-section .homepage-container {
        flex-direction: column;
        gap: 20px;
    }
    
    .single-poster-section .homepage-container > div:first-child {
        width: 100% !important;
        display: none; /* Hide empty space on mobile */
    }
    
    .single-poster-section .homepage-container > div:last-child {
        margin: 0 10px !important;
    }
    
    .single-poster {
        min-height: 300px;
        height: auto; /* Allow natural height on mobile */
    }
}

@media (max-width: 480px) {
    .homepage-container {
        padding-top: 100px; /* Less padding on mobile */
    }
    
    .hero-wrapper {
        padding: 0 10px;
        gap: 15px;
        flex-direction: row;
        align-items: flex-start;
    }
    
    .compact-categories {
        display: none !important; /* Ensure hidden on smallest screens too */
    }
    
    .banner-slider-wrapper {
        flex: 1;
        width: 50%;
        margin: 0 !important;
        padding: 0 !important;
        order: 0; /* Side by side with carousel */
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    
    .categories-list {
        grid-template-columns: 1fr;
    }
    
    .compact-category-item {
        padding: 10px 20px;
        font-size: 13px;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .compact-category-item:last-child {
        border-bottom: none;
    }
    
    .compact-category-item:hover {
        padding-left: 25px;
    }
    
    .compact-category-item .category-icon {
        width: 32px;
        height: 32px;
        background: #f0f0f0;
        border-radius: 8px;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .compact-category-item:hover .category-icon {
        background-color: #242323;
    }
    
    .compact-category-item:hover .category-icon-img {
        filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
    }
    
    .category-icon-img {
        width: 23px;
        height: 23px;
    }
    
    .compact-category-item .category-name {
        font-size: 13px;
    }
    
    .banner-slider {
        height: 250px;
    }
    
    .banner-text h2 {
        font-size: 1.5rem;
    }
    
    .banner-text p {
        font-size: 1rem;
    }
    
    /* NARROWER CARDS FOR VERY SMALL SCREENS - shorter height */
    .carousel-product-card {
        flex: 0 0 calc(60% + 30px - 6px) !important; /* Wider cards for mobile */
        min-width: calc(60% + 30px - 6px) !important;
        max-width: calc(60% + 30px - 6px) !important;
        height: 320px !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    
    .carousel-header {
        text-align: center;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    /* Extra small mobile navigation */
    .carousel-nav-btn {
        width: 35px;
        height: 35px;
    }
    
    .carousel-nav-prev {
        left: 5px;
    }
    
    .carousel-nav-next {
        right: 5px;
    }
    
    /* Products section side by side on 480px too */
    .products-section {
        flex: 1;
        width: 50% !important;
        max-width: 50% !important;
        margin-bottom: 0 !important;
    }

    /* Single poster mobile */
    .single-poster-section .homepage-container > div:last-child {
        margin: 0 !important;
    }
    
    .single-poster {
        min-height: 180px !important;
        height: 180px !important; /* Fixed height to prevent white space */
        max-height: 180px !important;
        overflow: hidden !important;
    }
    
    .single-poster .poster-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }
    
    .poster-placeholder-content h3 {
        font-size: 20px;
    }
    
    .poster-placeholder-content p {
        font-size: 14px;
    }
}

/* ====== FORCE DEL ELEMENT STYLING - HIGHEST PRIORITY ====== */
html body.home .popular-products-section del,
html body.home .carousel-product-card del,
html body.home .products-carousel del,
html body.home .products-carousel-wrapper del,
html body .popular-products-section del[aria-hidden="true"],
html body .carousel-product-card del[aria-hidden="true"],
html body .products-carousel del[aria-hidden="true"],
html body .products-carousel-wrapper del[aria-hidden="true"] {
    font-size: 12px !important;
    color: #444444 !important;
    text-decoration: line-through !important;
    text-decoration-color: #242323 !important;
    opacity: 1 !important;
    margin-right: 5px !important;
    display: inline-block !important;
    font-weight: normal !important;
}

/* Footer Styles */
.site-footer {
    background-color: #242323;
    color: #ffffff;
    padding: 60px 0;
    margin-top: 60px;
}

/* Ensure all footer text, including plain <li> address, inherits white color */
.footer-menu-section,
.footer-menu-section * {
    color: inherit;
}
.footer-menu-section .contact-info li,
.footer-menu-section .contact-info li a,
.footer-menu-section .contact-info li span {
    color: #f7e9cc !important;
}

/* Social icons: improve contrast/visibility */
.social-icons {
    display: flex;
    gap: 10px;
    margin-top: 30px;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 10px;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.social-icons a:hover {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.6);
    transform: translateY(-1px);
}

/* Force icon glyphs to render white */
.social-icons a svg,
.social-icons a i,
.social-icons a img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    background-color: #242323;
}

.footer-column h3 {
    color: #f7e9cc;
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 600;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 12px;
}

.footer-column ul li a {
    color: #f7e9cc;
    text-decoration: none;
    font-size: 14px;
    transition: opacity 0.3s ease;
}

.footer-column ul li a:hover {
    opacity: 0.8;
}

.contact-info li a {
    font-size: 16px !important;
}

/* Remove any border or underline that might be present */
.social-icons::before,
.social-icons::after {
    display: none !important;
}

.social-icons h3,
.footer-column .social-icons h3 {
    display: none !important;
}

/* Align icons with multiline text in footer contact */
.footer-menu-section .contact-info li a {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
}
.footer-menu-section .contact-info li a img {
    flex: 0 0 16px;
    margin-top: 2px;
}

/* Responsive Footer */
@media (max-width: 991px) {
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .footer-container {
        grid-template-columns: 1fr;
    }
    
    .footer-column {
        text-align: center;
    }
    
    .social-icons {
        justify-content: center;
    }
}

/* Mobile Menu Improvements */
@media (max-width: 768px) {
    .mobile-menu {
        position: fixed;
        top: 105px; /* Pre-header (35px) + Header (70px) */
        left: -100%;
        width: 100%;
        height: calc(100vh - 105px);
        background: #ffffff;
        transition: left 0.3s ease;
        z-index: 999;
        overflow-y: auto;
        padding: 0;
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    .mobile-menu.active {
        left: 0;
    }

    .mobile-menu-items {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 20px;
    }

    /* DESKTOP DROPDOWN STYLE FOR MOBILE MENU */
    .mobile-menu-item {
        padding: 16px 20px;
        border-radius: 0;
        background: transparent;
        color: #333333;
        font-family: 'BPGGuardian', sans-serif;
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.3s ease;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        gap: 15px;
        position: relative;
    }

    .mobile-menu-item:last-child {
        border-bottom: none;
    }

    .mobile-menu-item:hover {
        background: #f8f9fa;
        color: #f7e9cc;
        transform: translateX(8px);
        padding-left: 28px;
    }

    /* Add category icons to mobile menu */
    .mobile-menu-item::before {
        content: '';
        width: 24px;
        height: 24px;
        background: #f0f0f0;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.3s ease;
    }

    .mobile-menu-item:hover::before {
        background: #242323;
        color: #f7e9cc;
    }

    /* Mobile Search Improvements */
    .mobile-search {
        position: relative;
        margin: 20px;
        margin-bottom: 0;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 20px;
    }

    .mobile-search input {
        width: 100%;
        padding: 15px 20px;
        border: 2px solid #f0f0f0;
        border-radius: 12px;
        font-size: 16px;
        font-family: 'BPGGuardian', sans-serif;
        background: #f8f9fa;
        transition: all 0.3s ease;
    }

    .mobile-search input:focus {
        outline: none;
        border-color: #242323;
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
    }

    .mobile-search input::placeholder {
        color: #999999;
        font-weight: 400;
    }
}

/* Mobile Carousel Improvements - FIXED POSITIONING */
@media (max-width: 768px) {
    /* Force all carousels to move left by 60px on mobile */
    .popular-products-section .carousel-content-wrapper,
    .coming-soon-section .carousel-content-wrapper,
    .sale-section .carousel-content-wrapper {
        margin-left: 60px !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
    }
    
    .products-carousel-wrapper {
        margin-top: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
    }

    .products-carousel {
        display: flex !important;
        gap: 15px !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 20px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .products-carousel::-webkit-scrollbar {
        display: none !important;
    }

    .carousel-product-card {
        flex: 0 0 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
        scroll-snap-align: start !important;
        background: #ffffff !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        overflow: hidden !important;
        height: 350px !important;
        /* FIXED: Perfect size for mobile visibility */
        margin-right: 0 !important;
        margin-left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        border: 1px solid #e5e5e5 !important;
    }

    /* FIXED: Last card should not have margin */
    .carousel-product-card:last-child {
        margin-right: 0 !important;
    }

    .carousel-product-image {
        height: 220px !important;
        background: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .carousel-product-info {
        padding: 12px 15px 15px 15px !important;
        display: flex !important;
        flex-direction: column !important;
        height: 130px !important;
        flex-grow: 1 !important;
    }

    .carousel-product-title {
        font-size: 14px !important;
        line-height: 1.3 !important;
        margin: 2px 0 auto 0 !important;
        height: 36px !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        color: #333333 !important;
        font-weight: 600 !important;
        font-family: 'BPGGuardian', sans-serif !important;
    }

    .carousel-product-title a {
        color: #333333 !important;
        text-decoration: none !important;
        font-family: 'BPGGuardian', sans-serif !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .carousel-product-price {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #7f170e !important;
        font-family: 'BPGGuardian', sans-serif !important;
        line-height: 1.1 !important;
        margin-bottom: 1px !important;
        height: 16px !important;
        display: flex !important;
        align-items: center !important;
    }

    .carousel-product-pricing {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-bottom: 4px !important;
        height: 30px !important;
        justify-content: flex-start !important;
    }

    .carousel-installment-info {
        font-size: 10px !important;
        color: #000000 !important;
        font-family: 'BPGGuardian', sans-serif !important;
        margin: 0 0 2px 0 !important;
        line-height: 1.1 !important;
        height: 12px !important;
        display: flex !important;
        align-items: center !important;
    }

    .carousel-product-actions {
        margin-top: auto !important;
        margin-bottom: 0 !important;
        height: 40px !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        padding-bottom: 8px !important;
    }

    .carousel-add-to-cart-btn {
        position: relative !important;
        margin: 0 !important;
        padding: 4px 16px !important;
        background: #e93323 !important;
        background-color: #e93323 !important;
        color: #f7e9cc !important; /* show real text to avoid iOS duplicate */
        font-size: 11px !important;
        text-indent: 0 !important;
        border: none !important;
        border-radius: 12px !important;
        display: inline-block !important;
        float: left !important;
        min-height: 20px !important;
        line-height: 20px !important;
        width: auto !important;
        min-width: 80px !important;
    }

    /* Remove pseudo label; prevents double text on iOS */
    .carousel-add-to-cart-btn::before { content: none !important; }

    .carousel-nav-btn {
        display: none !important;
    }

    /* Carousel Section Headers */
    .carousel-header {
        padding: 0 15px !important;
        margin-bottom: 20px !important;
    }

    .carousel-header h2 {
        font-size: 20px !important;
        margin: 0 !important;
    }
}

/* Mobile Bottom Navigation Bar — Floating Glass Pill */
.mobile-bottom-nav {
    --ax-mobile-nav-bar-height: 70px;
    position: fixed;
    left: 50%;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 430px;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
    z-index: 2147483647;
    display: none;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
                padding 0.28s ease,
                box-shadow 0.28s ease,
                background 0.28s ease;
}

/* Subtle liquid / glass movement (sits behind the icons, never blocks taps) */
.mobile-bottom-nav::before {
    content: '';
    position: absolute;
    inset: -45%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 25% 35%, rgba(36,35,35, 0.12), transparent 45%),
        radial-gradient(circle at 78% 68%, rgba(120, 170, 255, 0.12), transparent 45%);
    opacity: 0.9;
    will-change: transform;
    animation: axNavLiquid 16s ease-in-out infinite;
}

@keyframes axNavLiquid {
    0%, 100% { transform: translate3d(-4%, -2%, 0) scale(1); }
    33%      { transform: translate3d(3%, 2%, 0) scale(1.08); }
    66%      { transform: translate3d(2%, -3%, 0) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-bottom-nav::before {
        animation: none;
    }
}

/* Mobile cart bar — liquid pill above category bottom nav */
.ax-mobile-cart-bar {
    --ax-mobile-cart-bar-inner-height: 56px;
    display: none;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 430px;
    z-index: 2147483646;
    box-sizing: border-box;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ax-mobile-cart-bar.is-visible {
    display: block;
    bottom: calc(var(--ax-mobile-nav-bar-height, 70px) + 18px + env(safe-area-inset-bottom, 0px) + var(--mobile-bottom-offset, 0px));
    pointer-events: auto;
}

/* Match the bottom nav's scroll-shrink so widths stay exactly equal */
.ax-mobile-cart-bar.is-scrolled {
    transform: translateX(-50%) scale(0.94);
}

.ax-mobile-cart-bar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    padding: 6px 8px 6px 8px;
    min-height: var(--ax-mobile-cart-bar-inner-height);
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.ax-mobile-cart-bar-go {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.ax-mobile-cart-bar-thumbs,
.ax-mobile-cart-bar-meta,
.ax-mobile-cart-bar-clear,
.ax-mobile-cart-bar-cta {
    position: relative;
    z-index: 1;
}

.ax-mobile-cart-bar-thumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0;
    pointer-events: none;
}

.ax-mobile-cart-bar-thumbs::-webkit-scrollbar {
    display: none;
}

.ax-mobile-cart-bar-thumb {
    flex: 0 0 auto;
    line-height: 0;
    pointer-events: none;
}

.ax-mobile-cart-bar-link::before {
    content: '';
    position: absolute;
    inset: -45%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 25% 35%, rgba(36,35,35, 0.12), transparent 45%),
        radial-gradient(circle at 78% 68%, rgba(120, 170, 255, 0.12), transparent 45%);
    opacity: 0.9;
    animation: axNavLiquid 16s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .ax-mobile-cart-bar-link::before {
        animation: none;
    }
}

.ax-mobile-cart-bar-img,
.ax-mobile-cart-bar-thumb img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    pointer-events: none;
}

.ax-mobile-cart-bar-meta {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    padding-left: 4px;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    min-width: 72px;
    pointer-events: none;
}

.ax-mobile-cart-bar-label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    line-height: 1.2;
    white-space: nowrap;
}

.ax-mobile-cart-bar-amount {
    font-size: 16px;
    font-weight: 800;
    color: #f7e9cc;
    line-height: 1.2;
    white-space: nowrap;
}

.ax-mobile-cart-bar-amount .amount {
    color: inherit;
    font-weight: inherit;
}

.ax-mobile-cart-bar-clear {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    color: #9ca3af;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: none !important;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.ax-mobile-cart-bar-clear svg {
    display: block;
    color: #9ca3af;
    stroke: #9ca3af;
    transition: color 0.2s ease, stroke 0.2s ease;
}

.ax-mobile-cart-bar-clear:hover,
.ax-mobile-cart-bar-clear:focus-visible,
.ax-mobile-cart-bar-clear:active {
    color: #f7e9cc;
    border-color: #f7e9cc !important;
    background: #fff !important;
    box-shadow: none !important;
}

.ax-mobile-cart-bar-clear:hover svg,
.ax-mobile-cart-bar-clear:focus-visible svg,
.ax-mobile-cart-bar-clear:active svg {
    color: #f7e9cc;
    stroke: #242323;
}

.ax-mobile-cart-bar-clear:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #fff !important;
}

.ax-mobile-cart-bar-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    background: #242323;
    color: #f7e9cc;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(36,35,35, 0.35);
    pointer-events: none;
}

/* Scroll-shrink state (toggled via JS when scroll position > 20px) */
.mobile-bottom-nav.is-scrolled {
    transform: translateX(-50%) scale(0.94);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05);
}

.mobile-bottom-nav.is-scrolled .mobile-bottom-nav-items {
    padding-top: 3px;
    padding-bottom: 3px;
}

.mobile-bottom-nav-items {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 6px 8px;
    height: var(--ax-mobile-nav-bar-height);
    gap: 2px;
    transition: padding 0.28s ease;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #666666;
    transition: color 0.2s ease;
    padding: 8px 0;
    min-width: 0;
    width: auto;
    height: 60px;
    flex: 1 1 0;
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
    color: #242323;
}

/* არჩეული/დაჭერილი კატეგორია → აიქონი (currentColor) + დასახელება ბორდოსფერი */
.mobile-nav-item.is-active,
.mobile-nav-item.is-active .mobile-nav-label,
.mobile-nav-item:active {
    color: #7f170e;
}

/* აიქონის inline SVG — explicit stroke, რომ currentColor-ის მიუხედავად ზუსტად #7f170e გახდეს */
.mobile-bottom-nav .mobile-nav-item.is-active .mobile-nav-icon svg,
.mobile-bottom-nav .mobile-nav-item.is-active .mobile-nav-icon svg *,
.mobile-bottom-nav .mobile-nav-item:active .mobile-nav-icon svg,
.mobile-bottom-nav .mobile-nav-item:active .mobile-nav-icon svg * {
    stroke: #7f170e !important;
    color: #7f170e !important;
}

/* Deals icon color */
.mobile-nav-item.deals .mobile-nav-icon svg,
.mobile-nav-item.deals .mobile-nav-icon img { filter: none; fill: #242323; color: #242323; }

.mobile-nav-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 2px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-nav-icon svg,
.mobile-nav-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mobile-bottom-nav .mobile-nav-icon img,
.mobile-bottom-nav .mobile-nav-icon svg {
    width: 26px;
    height: 26px;
}

.mobile-nav-label {
    font-size: 11px;
    font-weight: 500;
    font-family: 'BPGGuardian', sans-serif;
    text-align: center;
    white-space: nowrap; /* avoid broken/wrapped labels */
    line-height: 1.2;
    margin: 0;
}

/* Show bottom nav on mobile and tablet */
@media (max-width: 991px) {
    :root {
        --mobile-bottom-offset: 0px;
        --ax-mobile-cart-bar-height: 0px;
    }

    body.has-mobile-cart-bar {
        --ax-mobile-cart-bar-height: calc(var(--ax-mobile-cart-bar-inner-height, 52px) + 10px);
    }

    .mobile-bottom-nav {
        display: flex;
        align-items: center;
    }

    .mobile-bottom-nav-items {
        flex: 1;
        gap: 2px;
        padding: 3px 8px;
        height: var(--ax-mobile-nav-bar-height);
        min-height: var(--ax-mobile-nav-bar-height);
        align-items: center;
    }

    .mobile-bottom-nav .mobile-nav-item {
        position: relative;
        height: auto;
        min-height: 0;
        align-self: stretch;
        justify-content: center;
        padding: 5px 2px 4px;
        border-radius: 20px;
    }

    /* Faint translucent dividers between categories (fade out at the ends) */
    .mobile-bottom-nav .mobile-nav-item:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 50%;
        right: -1px;
        transform: translateY(-50%);
        width: 1px;
        height: 56%;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.08) 50%,
            rgba(0, 0, 0, 0) 100%
        );
        pointer-events: none;
    }

    /* Hide the dividers flanking the active item so they don't cut its highlight */
    .mobile-bottom-nav .mobile-nav-item.is-active::after,
    .mobile-bottom-nav .mobile-nav-item:has(+ .is-active)::after {
        opacity: 0;
    }

    /* Default: gray icons (icons-only minimal style) */
    .mobile-bottom-nav .mobile-nav-item {
        color: #757575;
        background-color: transparent;
        transition: background-color 0.2s ease, transform 0.18s ease;
    }

    .mobile-bottom-nav .mobile-nav-item .mobile-nav-icon img {
        filter: brightness(0) saturate(100%) invert(47%) sepia(0%) saturate(2%) hue-rotate(336deg) brightness(95%) contrast(86%);
        transition: filter 0.2s ease, transform 0.18s ease;
    }

    /* Neutralize stray WP/Woo active classes — only .is-active controls the highlight */
    .mobile-bottom-nav .mobile-nav-item.active,
    .mobile-bottom-nav .mobile-nav-item.current-menu-item,
    .mobile-bottom-nav .mobile-nav-item.current-cat,
    .mobile-bottom-nav .mobile-nav-item.selected {
        background-color: transparent;
        color: #757575;
    }

    .mobile-bottom-nav .mobile-nav-item.active .mobile-nav-icon img,
    .mobile-bottom-nav .mobile-nav-item.current-menu-item .mobile-nav-icon img,
    .mobile-bottom-nav .mobile-nav-item.current-cat .mobile-nav-icon img,
    .mobile-bottom-nav .mobile-nav-item.selected .mobile-nav-icon img {
        filter: brightness(0) saturate(100%) invert(47%) sepia(0%) saturate(2%) hue-rotate(336deg) brightness(95%) contrast(86%);
    }

    /* Single controlled active state: soft light-gray rounded background + brand-orange icon */
    .mobile-bottom-nav .mobile-nav-item.is-active {
        background-color: rgba(0, 0, 0, 0.06);
        color: #f7e9cc;
    }

    .mobile-bottom-nav .mobile-nav-item.is-active .mobile-nav-icon img {
        filter: brightness(0) saturate(100%) invert(47%) sepia(83%) saturate(2462%) hue-rotate(341deg) brightness(99%) contrast(93%);
    }

    .mobile-bottom-nav .mobile-nav-item:active {
        transform: scale(0.94) !important;
    }

    /* Category shortcuts: compact visible labels under each icon */
    .mobile-bottom-nav .mobile-nav-item .mobile-nav-label {
        position: static;
        display: block;
        width: auto;
        height: auto;
        margin: 1px 0 0;
        padding: 0;
        overflow: visible;
        clip: auto;
        border: 0;
        white-space: normal;
        font-size: 8px;
        line-height: 1.1;
        text-align: center;
    }

    /* Dining sets icon: larger image, same layout slot */
    .mobile-bottom-nav .mobile-nav-item--dining-sets .mobile-nav-icon {
        overflow: visible;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-bottom-nav .mobile-nav-item--dining-sets .mobile-nav-icon img {
        width: 26px;
        height: 26px;
        transform: scale(1.9) translateY(1px);
        transform-origin: center center;
    }

    /* Chair, table, sofa-bed icons: scale up in place (labels unchanged) */
    .mobile-bottom-nav .mobile-nav-item--chair .mobile-nav-icon,
    .mobile-bottom-nav .mobile-nav-item--tables .mobile-nav-icon,
    .mobile-bottom-nav .mobile-nav-item--sofa-bed .mobile-nav-icon {
        overflow: visible;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-bottom-nav .mobile-nav-item--chair .mobile-nav-icon img {
        width: 26px;
        height: 26px;
        transform: scale(1.3) translateY(-4px);
        transform-origin: center center;
    }

    .mobile-bottom-nav .mobile-nav-item--tables .mobile-nav-icon img {
        width: 26px;
        height: 26px;
        transform: scale(1.3) translateY(-2px);
        transform-origin: center center;
    }

    .mobile-bottom-nav .mobile-nav-item--sofa-bed .mobile-nav-icon img {
        width: 26px;
        height: 26px;
        transform: scale(1.3);
        transform-origin: center center;
    }

    /* Corner sofa icon: larger scale, same layout slot */
    .mobile-bottom-nav .mobile-nav-item--corner-sofa .mobile-nav-icon {
        overflow: visible;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-bottom-nav .mobile-nav-item--corner-sofa .mobile-nav-icon img {
        width: 26px;
        height: 26px;
        transform: scale(1.85) translateY(-1px);
        transform-origin: center center;
    }
    
    /* Add bottom padding to body to account for the floating bottom nav + optional cart bar */
    body {
        padding-bottom: calc(var(--ax-mobile-nav-bar-height, 64px) + var(--ax-mobile-cart-bar-height, 0px) + 28px + env(safe-area-inset-bottom, 0px) + var(--mobile-bottom-offset, 0px)) !important;
    }

    /* Homepage carousel: no sideways offset (prevents horizontal page scroll) */
    body.home .popular-products-section {
        margin-top: 0 !important;
        margin-left: 0 !important;
    }
    
    body.home .coming-soon-section {
        margin-left: 0 !important;
        margin-top: 0 !important;
    }
}

/* Four Banners Grid Mobile Styles - FORCE VISIBILITY (homepage only) */
@media (max-width: 991px) {
    body.home .four-banners-grid,
    body.home section.four-banners-grid {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 70px auto !important;
        margin-left: 0 !important;
        padding: 0 20px !important;
        max-width: 100% !important;
        width: 100% !important;
        position: relative !important;
        z-index: 10 !important;
        background: #ffffff !important;
        min-height: 200px !important;
        transform: none !important;
    }
    
    body.home .banners-grid-wrapper {
        margin-left: 0 !important;
        margin-top: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    body.home .banners-grid-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    body.home .banner-item {
        aspect-ratio: 2.2/1 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        background: #f0f0f0 !important;
        position: relative !important;
        width: 100% !important;
        min-height: 80px !important;
    }

    body.home .banner-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* Mobile and Tablet Product Carousel Modifications (homepage layout only) */
@media (max-width: 991px) {
    body.home .compact-categories {
        display: none !important;
    }
    
    body.home .popular-products-section .carousel-content-wrapper,
    body.home .coming-soon-section .carousel-content-wrapper,
    body.home .sale-section .carousel-content-wrapper {
        margin-left: 15px !important;
        margin-right: 15px !important;
        margin-top: 0 !important;
    }

    body.home .coming-soon-section {
        padding-top: 0 !important;
        transform: none !important;
    }
    
    body.home .sale-section {
        transform: none !important;
    }
    
    body.home .features-section {
        transform: translateY(1400px) !important;
        z-index: 998 !important;
        position: relative !important;
        background: #ffffff !important;
        overflow: visible !important;
        min-height: 600px !important;
        padding-bottom: 100px !important;
        margin-bottom: -1000px !important;
    }

    body.home .site-footer::after {
        content: '' !important;
        display: block !important;
        height: 1px !important;
        background: transparent !important;
        margin-bottom: -1px !important;
    }

    body.home main,
    body.home .main-content,
    body.home #main,
    body.home .content,
    body.home .homepage-container {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body.home footer.site-footer {
        position: relative !important;
        bottom: 0 !important;
    }
    
    body.home .popular-products-section .carousel-product-card,
    body.home .coming-soon-section .carousel-product-card,
    body.home .sale-section .carousel-product-card,
    body.home .products-carousel .carousel-product-card {
        width: calc(60% + 30px) !important;
        min-width: calc(60% + 30px) !important;
        max-width: calc(60% + 30px) !important;
        flex: 0 0 calc(60% + 30px) !important;
    }
    
    /* Adjust first feature item position */
    .features-section .feature-item:nth-child(1) {
        transform: translateY(0px) translateX(0px) !important;
    }
    
    /* Adjust specific features items position */
    .features-section .feature-item:nth-child(2) {
        transform: translateY(0px) translateX(0px) !important;
    }
    
   /* Adjust specific features items position */
   body.home .features-section .feature-item:nth-child(3),
   .features-section .feature-item:nth-child(3) {
    transform: translateY(200px) translateX(0) !important;
}

   /* Adjust specific features items position */
   body.home .features-section .feature-item:nth-child(4),
   .features-section .feature-item:nth-child(4) {
    transform: translateY(200px) translateX(0) !important;
}
    
    /* Adjust hero wrapper for mobile/tablet - horizontal layout */
    .hero-wrapper {
        flex-direction: row;
        gap: 15px;
        align-items: flex-start;
    }
    
    /* Banner slider takes half width */
    .banner-slider-wrapper {
        flex: 1;
        width: 50%;
        margin: 0 !important;
        padding: 0 10px;
        order: 0;
    }
    
    /* Product carousel containers - flex layout for side by side */
    .homepage-container {
        padding: 0 10px !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Fix products section layout - left side */
    .products-section,
    .coming-soon-section,
    .sale-section {
        flex: 1;
        width: 50% !important;
        max-width: 50% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Remove empty space div and fix carousel container */
    .products-section .homepage-container > div:first-child,
    .coming-soon-section .homepage-container > div:first-child,
    .sale-section .homepage-container > div:first-child {
        display: none !important;
    }
    
    .products-section .homepage-container > div:last-child,
    .coming-soon-section .homepage-container > div:last-child,
    .sale-section .homepage-container > div:last-child {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        flex: none !important;
        width: 100% !important;
    }
    
    /* Products carousel wrapper centering */
    .products-carousel-wrapper {
        width: 100% !important;
        margin-top: 0 !important;
        margin-right: auto !important;
        margin-bottom: 0 !important;
        margin-left: 30px !important;
        padding: 0 !important;
        position: relative !important;
    }
    
    /* Products carousel - show exactly 4 cards */
    .products-carousel {
        display: flex !important;
        gap: 10px !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 15px !important;
        margin: 0 auto !important;
        width: calc(100% - 30px) !important;
        box-sizing: border-box !important;
    }
    
    .products-carousel::-webkit-scrollbar {
        display: none !important;
    }
    
    /* Show narrower product cards for mobile - shorter height */
    .carousel-product-card {
        flex: 0 0 calc(60% + 30px - 6px) !important;
        min-width: calc(60% + 30px - 6px) !important;
        max-width: calc(60% + 30px - 6px) !important;
        scroll-snap-align: start !important;
        background: #ffffff !important;
        border-radius: 6px !important;
        box-shadow: 0 1px 5px rgba(0,0,0,0.05) !important;
        overflow: hidden !important;
        height: 320px !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        border: 1px solid #e5e5e5 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Product image adjustments */
    .carousel-product-image {
        height: 220px !important;
        background: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .carousel-product-image img {
        max-width: 90% !important;
        max-height: 90% !important;
        object-fit: contain !important;
    }
    
    /* Product info section */
    .carousel-product-info {
        padding: 8px 12px 12px 12px !important;
        display: flex !important;
        flex-direction: column !important;
        height: 110px !important;
        flex-grow: 1 !important;
    }
    
    /* Product pricing */
    .carousel-product-pricing {
        margin-bottom: 6px !important;
    }
    
    .carousel-product-price {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #7f170e !important;
    }
    
    /* Installment info */
    .carousel-installment-info {
        font-size: 12px !important;
        color: #666666 !important;
        margin-bottom: 4px !important;
    }
    
    /* Product title */
    .carousel-product-title {
        margin: 2px 0 auto 0 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        height: 54px !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }
    
    .carousel-product-title a {
        color: #333333 !important;
        text-decoration: none !important;
    }
    
    /* Add to cart button */
    .carousel-product-actions {
        margin-top: auto !important;
        margin-bottom: 0 !important;
        padding-bottom: 15px !important;
    }
    
    .carousel-add-to-cart-btn {
        background: #242323 !important;
        color: #f7e9cc !important;
        padding: 10px 18px !important;
        border-radius: 6px !important;
        text-decoration: none !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-align: center !important;
        display: block !important;
        transition: all 0.2s ease !important;
    }
    
    .carousel-add-to-cart-btn:hover {
        background: #b91c1c !important;
    }
    
    /* Navigation arrows for carousels */
    .carousel-nav-btn {
        width: 35px !important;
        height: 35px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid #e5e5e5 !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }
    
    .carousel-nav-prev {
        left: 5px !important;
    }
    
    .carousel-nav-next {
        right: 5px !important;
    }
    
    /* Carousel header adjustments */
    .carousel-header {
        margin-bottom: 15px !important;
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .section-title {
        font-size: 18px !important;
        font-weight: 700 !important;
        margin: 0 !important;
        text-align: left !important;
    }
    
    /* Products section spacing */
    .products-section {
        margin-top: 30px !important;
        margin-bottom: 30px !important;
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure carousel content is properly aligned */
    .carousel-product-card {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Tablet specific adjustments */
@media (min-width: 769px) and (max-width: 991px) {
    /* Slightly larger cards for tablet */
    .carousel-product-card {
        min-height: 320px !important;
    }
    
        .carousel-product-image {
        height: 230px !important;
        background: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .carousel-product-info {
        height: 120px !important;
        padding: 10px 15px 15px 15px !important;
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important;
    }
    
    .carousel-product-title {
        font-size: 12px !important;
        height: 35px !important;
    }
    
    .carousel-product-price {
        font-size: 13px !important;
    }
    
    .carousel-installment-info {
        font-size: 11px !important;
    }
    
    .carousel-add-to-cart-btn {
        font-size: 11px !important;
        padding: 8px 14px !important;
    }
}

/* --- POWER FIX: Mobile carousel full width and visible cards --- */
@media (max-width: 768px) {
  .products-carousel-wrapper,
  .products-carousel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    display: flex !important;
  }
  .carousel-product-card {
    flex: 0 0 calc(90vw + 30px) !important;
    min-width: calc(90vw + 30px) !important;
    max-width: calc(90vw + 30px) !important;
    height: auto !important;
    margin: 0 5vw 0 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    border: 1px solid #e5e5e5 !important;
    background: #fff !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .carousel-product-card:last-child {
    margin-right: 0 !important;
  }
}

/* Desktop shop cards: keep the card size unchanged, but scale the product
   photo down slightly inside the image area so tall products fit comfortably. */
@media (min-width: 769px) {
  body.woocommerce ul.products li.rp-shop-card .rp-image,
  body.woocommerce-page ul.products li.rp-shop-card .rp-image {
    max-width: 88% !important;
    max-height: 88% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

@media (max-width: 768px) {
  body.home > .popular-products-section,
  body.home > .popular-products-section[style],
  html body.home .popular-products-section,
  html body.home section.popular-products-section,
  body.home section.popular-products-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 991px) {
  .single-poster-section {
    margin-top: -150px !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 768px) {
    .coming-soon-section {
      margin-top: -340px !important;
      margin-left: -40px !important;
    }
  .single-poster-section {
    margin-bottom: 300px !important;
    margin-top: -500px !important;
  }
  
  /* Reduce single poster height on mobile to prevent white space */
  .single-poster {
    min-height: 180px !important;
    height: 180px !important;
    max-height: 180px !important;
    overflow: hidden !important;
  }
  
  .single-poster .poster-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* ULTIMATE FORCE: Make all carousel cards 30px wider on mobile/tablet */
@media (max-width: 991px) {
    html body .carousel-product-card,
    html body .products-carousel .carousel-product-card,
    html body .popular-products-section .carousel-product-card,
    html body .coming-soon-section .carousel-product-card,
    html body .sale-section .carousel-product-card,
    html body div.carousel-product-card,
    html body li.carousel-product-card {
        width: calc(60% + 30px) !important;
        min-width: calc(60% + 30px) !important;
        max-width: calc(60% + 30px) !important;
        flex: 0 0 calc(60% + 30px) !important;
        flex-basis: calc(60% + 30px) !important;
    }
}

/* ULTIMATE FORCE: Reduce banner slider height on mobile and remove white background */
@media (max-width: 768px) {
    html body .banner-slider-wrapper,
    html body .banner-slider-wrapper .banner-slider,
    html body div.banner-slider-wrapper,
    html body section .banner-slider-wrapper,
    html body .hero-wrapper .banner-slider-wrapper,
    html body .hero-banner-section .banner-slider-wrapper {
        height: 120px !important;
        min-height: 120px !important;
        max-height: 120px !important;
        overflow: visible !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    html body .banner-slider,
    html body .banner-slider-wrapper .banner-slider {
        height: 120px !important;
        min-height: 120px !important;
        max-height: 120px !important;
        overflow: visible !important;
        background: transparent !important;
        border-radius: 0 !important;
    }
    
    html body .banner-slide,
    html body .banner-slider .banner-slide,
    html body .banner-slide.active {
        height: 120px !important;
        min-height: 120px !important;
        max-height: 120px !important;
        overflow: visible !important;
        border-radius: 0 !important;
    }
    
    html body .banner-content {
        height: 120px !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        margin: 0 !important;
        position: relative !important;
    }
    
    /* Ensure banner images fill the main container area but leave space for navigation */
    html body .banner-slide .banner-image img,
    html body .banner-content .banner-image img {
        width: 100% !important;
        height: 100px !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    
    /* Hide text content on mobile to show only image */
    html body .banner-text {
        display: none !important;
    }
    
    /* Make banner image take most space but leave room for navigation */
    html body .banner-image {
        flex: 1 !important;
        width: 100% !important;
        height: 100px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 20px !important;
    }
    
    /* Adjust banner navigation for mobile */
    html body .banner-navigation {
        bottom: 10px !important;
        padding: 4px 10px !important;
        border-radius: 15px !important;
        background: rgba(0, 0, 0, 0.5) !important;
    }
    
    html body .banner-prev,
    html body .banner-next {
        width: 25px !important;
        height: 25px !important;
        font-size: 12px !important;
    }
    
    html body .banner-dot {
        width: 6px !important;
        height: 6px !important;
    }
    
    html body .banner-dots {
                 gap: 4px !important;
     }
  }

/* Homepage mobile: no extra top offset on first carousel */
@media (max-width: 768px) {
    html body.home .popular-products-section,
    html body.home section.popular-products-section,
    body.home .popular-products-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
        transform: translateY(0) !important;
        position: relative !important;
        top: 0 !important;
    }
}

/* Homepage only: keep carousel sections aligned (no sideways shift) */
@media (max-width: 768px) {
    body.home .popular-products-section,
    body.home section.popular-products-section {
        margin-left: 0 !important;
        transform: none !important;
        position: relative !important;
        left: auto !important;
    }
}

/* ULTIMATE FORCE: Adjust four-banners-grid size on mobile to match single poster */
@media (max-width: 768px) {
    .four-banners-grid,
    section.four-banners-grid,
    html body .four-banners-grid {
        width: calc(100% + 40px) !important;
        margin-left: -20px !important;
        padding: 0 !important;
        max-width: none !important;
    }

    .four-banners-grid .banners-grid-container,
    section.four-banners-grid .banners-grid-container,
    html body .four-banners-grid .banners-grid-container {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }

    .four-banners-grid .banner-item,
    section.four-banners-grid .banner-item {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* ULTIMATE FORCE: Footer layout fix for mobile */
@media (max-width: 768px) {
    .footer-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto auto !important;
        row-gap: 40px !important;
        column-gap: 30px !important;
        padding: 20px !important;
    }

    .footer-column {
        width: 100% !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .footer-column h3 {
        font-size: 14px !important;
        padding-bottom: 12px !important;
        margin-bottom: 15px !important;
    }

    .footer-column h3::after {
        width: 100% !important;
        max-width: 150px !important;
    }

    .footer-column ul {
        margin: 0 !important;
        padding: 0 !important;
    }

    .footer-column ul li {
        margin-bottom: 10px !important;
    }

    .footer-column ul li a {
        font-size: 12px !important;
    }

    .contact-info li a {
        font-size: 14px !important;
    }
}

/* Footer title underlines */
.footer-column h3 {
    position: relative !important;
    padding-bottom: 15px !important;
    margin-bottom: 20px !important;
}

.footer-column h3::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 200px !important;
    height: 1px !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Footer Contact Icons */
.footer-column .contact-info a[href^="mailto:"]::before {
    content: '' !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url('/wp-content/uploads/2025/07/mail-icon.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    vertical-align: middle !important;
    margin-right: 10px !important;
}

.footer-column .contact-info a[href^="tel:"]::before {
    content: '' !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url('/wp-content/uploads/2025/07/call-icon.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    vertical-align: middle !important;
    margin-right: 10px !important;
}

/* Standardize footer font sizes */
.footer-column ul li a {
    font-size: 14px !important;
}

.contact-info li a {
    font-size: 14px !important;
}

.footer-column .contact-info a,
.footer-column .contact-info span {
    font-size: 14px !important;
}

/* Remove question marks */
.footer-column .contact-info *::before,
.footer-column .contact-info *::after {
    content: none !important;
}

.footer-column .contact-info i,
.footer-column .contact-info .question-mark,
.footer-column .contact-info .icon-question {
    display: none !important;
}

.footer-column .contact-info a[href^="tel:"],
.footer-column .contact-info a[href^="mailto:"] {
    display: inline-flex !important;
    align-items: center !important;
}

.footer-column .contact-info a[href^="tel:"] > *:not(img),
.footer-column .contact-info a[href^="mailto:"] > *:not(img) {
    display: none !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .footer-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto auto !important;
        row-gap: 40px !important;
        column-gap: 30px !important;
        padding: 20px !important;
    }

    .footer-column {
        width: 100% !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .footer-column h3 {
        font-size: 14px !important;
        padding-bottom: 12px !important;
        margin-bottom: 15px !important;
    }

    .footer-column h3::after {
        width: 100% !important;
        max-width: 150px !important;
    }

    .footer-column ul {
        margin: 0 !important;
        padding: 0 !important;
    }

    .footer-column ul li {
        margin-bottom: 10px !important;
    }

    .footer-column ul li a {
        font-size: 12px !important;
    }

    .contact-info li a {
        font-size: 12px !important;
    }

    .footer-column .contact-info a,
    .footer-column .contact-info span {
        font-size: 12px !important;
    }

    .footer-column .contact-info a[href^="mailto:"]::before,
    .footer-column .contact-info a[href^="tel:"]::before {
        width: 16px !important;
        height: 16px !important;
        margin-right: 8px !important;
    }
}

@media (max-width: 991px) {
    /* Full document scroll on all pages (do not lock html/body to viewport height) */
    html,
    body {
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    footer.site-footer,
    .site-footer-bottom {
        transform: none !important;
        position: relative !important;
        visibility: visible !important;
    }

    /* Homepage: cancel legacy transform offsets (blog row → footer gap) */
    body.home .features-section {
        position: relative !important;
        z-index: 998 !important;
        background: #ffffff !important;
        overflow: visible !important;
        min-height: auto !important;
        padding-bottom: 30px !important;
        margin-bottom: 0 !important;
        transform: none !important;
    }

    body.home footer.site-footer,
    footer.site-footer {
        position: relative !important;
        z-index: 999 !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        padding-bottom: 0 !important;
        transform: none !important;
    }

    body.home .homepage-blog-row {
        margin-bottom: var(--section-spacing, 24px) !important;
    }
}

@media (max-width: 768px) {
    body.home .homepage-container > * {
        transform: none;
    }
    
    /* Ensure the transform doesn't affect fixed elements */
    .mobile-menu {
        transform: none;
    }

    /* Floating bottom nav must keep its horizontal centering transform */
    .mobile-bottom-nav {
        transform: translateX(-50%);
    }

    .mobile-bottom-nav.is-scrolled {
        transform: translateX(-50%) scale(0.94);
    }

    .popular-products-section {
        background: transparent !important;
        overflow: visible !important;
        z-index: 1 !important;
        position: relative !important;
    }

    .products-carousel-wrapper {
        background: transparent !important;
        overflow: visible !important;
        z-index: 2 !important;
        position: relative !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    .products-carousel {
        background: transparent !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        padding: 10px 0 !important;
        margin: 0 !important;
        width: 100% !important;
        display: flex !important;
        gap: 15px !important;
    }

    .carousel-product-card {
        background: #ffffff !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        border: 1px solid #e5e5e5 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        z-index: 3 !important;
    }

    /* Remove any potential white backgrounds from parent containers */
    .homepage-container,
    .homepage-container > * {
        background: transparent !important;
        overflow: visible !important;
    }
}

/* Remove any top borders or lines from footer */
.site-footer,
.footer-menu-section,
.services-section {
    border-top: none !important;
    position: relative;
}

.site-footer::before,
.site-footer::after,
.footer-menu-section::before,
.footer-menu-section::after,
.services-section::before,
.services-section::after {
    display: none !important;
    content: none !important;
}

/* Product badges styling */
.popular-products-section .product-badges {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.popular-products-section .sale-percentage {
    background: #242323 !important;
    color: #f7e9cc !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: 'BPGGuardian', sans-serif !important;
    text-align: center !important;
    min-width: 40px !important;
    line-height: 1.2 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    letter-spacing: 0.5px !important;
}

/* Ensure product cards have relative positioning for badges */
.popular-products-section .product-card {
    position: relative !important;
}

/* Reset spacing for hero and popular products sections */
.hero-section {
    position: relative;
    width: 100%;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
}

@media (min-width: 992px) {
    .hero-section {
        margin-top: 0 !important;
        height: auto !important;
    }

    .hero-container {
        display: flex !important;
        align-items: stretch !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .hero-section .slider-section {
        margin-top: 0 !important;
        transform: none !important;
        top: auto !important;
    }
}

/* Maintain consistent spacing across breakpoints */
@media (max-width: 992px) {
    .hero-section {
        margin-bottom: 30px !important;
    }
    .popular-products-section {
        margin-top: 0 !important;
    }
}

@media (max-width: 768px) {
    .hero-section {
        margin-bottom: 10px !important;
    }
    .popular-products-section {
        margin-top: 0 !important;
    }
}

@media (max-width: 576px) {
    .hero-section {
        margin-bottom: 10px !important;
    }
    .popular-products-section {
        margin-top: 0 !important;
    }
}

.hero-section {
    position: relative;
    width: 100%;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    height: auto !important;
}

.popular-products-section {
    position: relative;
    width: 100%;
    margin-top: 0 !important;
    background: #ffffff;
    padding: 0;
}

/* Mobile styles */
@media (max-width: 768px) {
    .hero-section {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .hero-container {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .hero-section .slider-section {
        margin-top: 0 !important;
        top: auto !important;
        transform: none !important;
    }

    .popular-products-section {
        margin-top: 0 !important;
        position: relative !important;
        transform: none !important;
    }

    .popular-products-section .carousel-content-wrapper {
        margin-left: 15px !important;
        margin-right: 15px !important;
        margin-top: 0 !important;
        padding: 0 !important;
    }

    /* Ensure consistent spacing */
    .hero-wrapper {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Reset any transforms */
    .hero-section,
    .popular-products-section,
    .carousel-content-wrapper {
        transform: none !important;
    }
}

/* Small mobile styles */
@media (max-width: 576px) {
    .hero-section {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .popular-products-section {
        margin-top: 0 !important;
    }

    .popular-products-section .carousel-content-wrapper {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
}

/* Base carousel styles */
.products-carousel {
    display: flex;
    gap: 20px;
    width: 100%;
    position: relative;
    transition: transform 0.3s;
    box-sizing: border-box;
    background: transparent;
}

.products-carousel-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Hide scrollbar but keep functionality */
.products-carousel::-webkit-scrollbar {
    display: none;
}

.products-carousel {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Tablet Styles */
@media (max-width: 991px) {
    .products-carousel {
        gap: 12px !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 15px !important;
        width: calc(100% - 30px) !important;
        margin: 0 auto !important;
    }

    .products-carousel-wrapper {
        overflow: visible !important;
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    .products-carousel {
        gap: 15px !important;
        padding: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .products-carousel-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Small Mobile Styles */
@media (max-width: 576px) {
    .products-carousel {
        gap: 10px !important;
        padding: 10px !important;
    }
}

/* Force consistent card dimensions across all devices */
html body .carousel-product-card,
html body .products-carousel .carousel-product-card,
html body .popular-products-section .carousel-product-card,
html body .coming-soon-section .carousel-product-card,
html body .sale-section .carousel-product-card,
html body div.carousel-product-card,
html body li.carousel-product-card {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    flex: 0 0 300px !important;
    flex-basis: 300px !important;
    box-sizing: border-box !important;
}

/* Products Carousel Base Styles */
.products-carousel {
    display: flex !important;
    gap: 20px !important;
    width: 100% !important;
    position: relative !important;
    transition: transform 0.3s !important;
    box-sizing: border-box !important;
    background: transparent !important;
    padding: 15px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
}

.products-carousel-wrapper {
    width: 100% !important;
    position: relative !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide scrollbar but keep functionality */
.products-carousel::-webkit-scrollbar {
    display: none !important;
}

.products-carousel {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* Override any responsive styles */
@media (max-width: 991px), 
       (max-width: 768px), 
       (max-width: 576px) {
    html body .carousel-product-card,
    html body .products-carousel .carousel-product-card,
    html body .popular-products-section .carousel-product-card,
    html body .coming-soon-section .carousel-product-card,
    html body .sale-section .carousel-product-card,
    html body div.carousel-product-card,
    html body li.carousel-product-card {
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
        flex: 0 0 300px !important;
        flex-basis: 300px !important;
    }

    .products-carousel {
        gap: 20px !important;
        padding: 15px !important;
    }

    .products-carousel-wrapper {
        overflow: visible !important;
    }
}

/* Move carousel to the right on mobile */
@media (max-width: 768px) {
    .popular-products-section .carousel-content-wrapper,
    .coming-soon-section .carousel-content-wrapper,
    .sale-section .carousel-content-wrapper {
        margin-right: 40px !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 576px) {
    .popular-products-section .carousel-content-wrapper,
    .coming-soon-section .carousel-content-wrapper,
    .sale-section .carousel-content-wrapper {
        margin-right: 30px !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
    }
}

/* Remove entire carousel section */
.popular-products-section {
    display: none !important;
}

.coming-soon-section {
    display: none !important;
}

.sale-section {
    display: none !important;
}

/* New Popular Products Carousel */
.new-popular-carousel,
section[class^="carousel-"] {
    width: 100%;
    margin: 30px 0 0 0;
    background: #ffffff;
    padding: 0;
}

.new-popular-carousel .carousel-container,
section[class^="carousel-"] .carousel-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
    position: relative; /* ensure arrows position against the sale container */
}

.new-popular-carousel .carousel-header,
section[class^="carousel-"] .carousel-header {
    margin-bottom: 20px;
}

/* Make sale carousel title-to-cards spacing tighter - typically carousel-2 */
.homepage-group.category-group.carousel-2 > section.carousel-2 .carousel-header { margin-bottom: 0; }
.homepage-group.category-group.carousel-2 > section.carousel-2 .carousel-title { margin: 0 0 5px 0; }

.new-popular-carousel .carousel-title,
section[class^="carousel-"] .carousel-title {
    font-size: 24px;
    font-weight: 700;
    color: #333333;
    font-family: 'BPGGuardian', sans-serif;
    margin: 0 0 15px 0;
}

.new-popular-carousel .carousel-wrapper,
section[class^="carousel-"] .carousel-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.new-popular-carousel .carousel-wrapper:hover,
section[class^="carousel-"] .carousel-wrapper:hover {
    padding-top: 0;
    margin-bottom: 0;
}

.new-popular-carousel .carousel-track,
section[class^="carousel-"] .carousel-track {
    display: flex;
    gap: 20px;
    width: 100%;
    transition: transform 0.3s ease;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.new-popular-carousel .carousel-track::-webkit-scrollbar,
section[class^="carousel-"] .carousel-track::-webkit-scrollbar { display: none; }
.new-popular-carousel .carousel-card,
section[class^="carousel-"] .carousel-card { scroll-snap-align: start; }

.new-popular-carousel .carousel-card,
section[class^="carousel-"] .carousel-card {
    flex: 0 0 300px;
    min-width: 300px;
    max-width: 300px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    min-height: 400px;
    height: auto;
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e5e5;
    transition: all 0.2s ease;
}

.new-popular-carousel .carousel-card:hover,
section[class^="carousel-"] .carousel-card:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-color: #e5e5e5;
    border-top: 1px solid #e5e5e5;
}

.new-popular-carousel .card-image,
section[class^="carousel-"] .card-image {
    height: 250px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.new-popular-carousel .card-image img,
section[class^="carousel-"] .card-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.new-popular-carousel .carousel-card:hover .card-image img,
section[class^="carousel-"] .carousel-card:hover .card-image img {
    transform: scale(1.02);
}

.new-popular-carousel .card-info,
section[class^="carousel-"] .card-info {
    padding: 15px;
    display: flex;
    flex-direction: column;
    height: 150px;
    flex-grow: 1;
}

.new-popular-carousel .card-title,
section[class^="carousel-"] .card-title {
    font-size: 16px;
    line-height: 1.3;
    margin: 0 0 8px 0;
    height: auto;
    display: block;
    color: #333333;
    font-weight: 600;
    font-family: 'BPGGuardian', sans-serif;
}

.new-popular-carousel .card-title a,
section[class^="carousel-"] .card-title a {
    color: #333333;
    text-decoration: none;
    font-family: 'BPGGuardian', sans-serif;
    display: inline;
}

.new-popular-carousel .card-price,
section[class^="carousel-"] .card-price {
    font-size: 16px;
    font-weight: 700;
    color: #f7e9cc;
    font-family: 'BPGGuardian', sans-serif;
    line-height: 1.1;
    margin-bottom: 4px;
    height: 18px;
    display: flex;
    /* Baseline so the smaller strikethrough price sits on the same visual
       line as the active sale price (instead of being centered against the
       active price's box, which makes it look slightly raised). */
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.new-popular-carousel .card-installment,
section[class^="carousel-"] .card-installment {
    font-size: 12px;
    color: #000000;
    font-family: 'BPGGuardian', sans-serif;
    margin: 0 0 8px 0;
    line-height: 1.1;
    height: 14px;
    display: flex;
    align-items: center;
}

.new-popular-carousel .card-installment .installment-price,
section[class^="carousel-"] .card-installment .installment-price {
    color: #f7e9cc;
}

.new-popular-carousel .card-actions,
section[class^="carousel-"] .card-actions {
    margin-top: auto;
    margin-bottom: 0;
}

/* Match shop add-to-cart button styles inside carousel */
.new-popular-carousel .carousel-add-to-cart-btn,
section[class^="carousel-"] .carousel-add-to-cart-btn {
    background: #242323 !important;
    color: #f7e9cc !important;
    padding: 12px 20px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-family: 'BPGGuardian', sans-serif !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    border: none !important;
    cursor: pointer !important;
    min-height: 40px !important;
}

.new-popular-carousel .carousel-add-to-cart-btn:hover,
section[class^="carousel-"] .carousel-add-to-cart-btn:hover {
    background: #242323 !important;
    transform: translateY(-1px) !important;
}

/* Frameless card + centered text + full-width „არჩევა" button (carousel) */
.new-popular-carousel .carousel-card,
section[class^="carousel-"] .carousel-card,
.new-popular-carousel .carousel-card:hover,
section[class^="carousel-"] .carousel-card:hover {
    border: none !important;
    box-shadow: none !important;
}
.new-popular-carousel .card-info,
section[class^="carousel-"] .card-info { text-align: center; }
.new-popular-carousel .card-price,
section[class^="carousel-"] .card-price { justify-content: center; }
.new-popular-carousel .carousel-add-to-cart-btn,
section[class^="carousel-"] .carousel-add-to-cart-btn { display: flex !important; width: 100% !important; }

.new-popular-carousel .add-to-cart-btn,
section[class^="carousel-"] .add-to-cart-btn {
    width: 100%;
    background: #242323;
    color: #f7e9cc;
    border: none;
    border-radius: 6px;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'BPGGuardian', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
}

.new-popular-carousel .add-to-cart-btn:hover,
section[class^="carousel-"] .add-to-cart-btn:hover {
    background: #b91c1c;
    transform: translateY(-1px);
}

.new-popular-carousel .carousel-nav,
section[class^="carousel-"] .carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #242323;
    border: 1px solid #242323;
    border-radius: 50%;
    cursor: pointer;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f7e9cc;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.new-popular-carousel .carousel-nav:hover,
section[class^="carousel-"] .carousel-nav:hover {
    background: #242323;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: #f7e9cc;
}

.new-popular-carousel .carousel-nav.prev,
section[class^="carousel-"] .carousel-nav.prev {
    left: 10px;
}

.new-popular-carousel .carousel-nav.next,
section[class^="carousel-"] .carousel-nav.next {
    right: 10px;
}

.new-popular-carousel .carousel-nav:disabled,
section[class^="carousel-"] .carousel-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Responsive Design */

/* Hide carousel arrows at <= 992px */
@media (max-width: 992px) {
  .new-popular-carousel .carousel-nav,
  section[class^="carousel-"] .carousel-nav { display: none !important; }
}
@media (max-width: 1200px) {
    .new-popular-carousel .carousel-card,
    section[class^="carousel-"] .carousel-card {
        flex: 0 0 280px;
        min-width: 280px;
        max-width: 280px;
        height: 380px;
    }
    
    .new-popular-carousel .card-image,
    section[class^="carousel-"] .card-image {
        height: 230px;
    }
}

@media (max-width: 992px) {
    .new-popular-carousel .carousel-card,
    section[class^="carousel-"] .carousel-card {
        flex: 0 0 260px;
        min-width: 260px;
        max-width: 260px;
        height: 360px;
    }
    
    .new-popular-carousel .card-image,
    section[class^="carousel-"] .card-image {
        height: 210px;
    }
    
    .new-popular-carousel .card-info,
    section[class^="carousel-"] .card-info {
        padding: 12px;
        height: 150px;
    }
    
    /* Enable horizontal scroll at <= 992px */
    .new-popular-carousel .carousel-track,
    section[class^="carousel-"] .carousel-track {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .new-popular-carousel .carousel-track::-webkit-scrollbar,
    section[class^="carousel-"] .carousel-track::-webkit-scrollbar { display: none; }
    .new-popular-carousel .carousel-card,
    section[class^="carousel-"] .carousel-card { scroll-snap-align: start; }
}

/* Desktop: keep all carousel cards the same height so image/title/price align
   on the same baseline across cards. Images use object-fit: contain, so
   they are never cropped inside the fixed container. */
@media (min-width: 992px) {
    .new-popular-carousel .carousel-card,
    section[class^="carousel-"] .carousel-card {
        height: 400px !important;
    }
    .new-popular-carousel .card-image,
    section[class^="carousel-"] .card-image {
        height: 250px !important;
        flex: 0 0 250px;
    }
    .new-popular-carousel .card-info,
    section[class^="carousel-"] .card-info {
        height: 150px !important;
        flex: 0 0 150px;
    }
    .new-popular-carousel .card-image img,
    section[class^="carousel-"] .card-image img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
    .new-popular-carousel .card-image a,
    section[class^="carousel-"] .card-image a {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .new-popular-carousel,
    section[class^="carousel-"] {
        margin-top: 150px;
    }
    
    /* Sale and category carousel margin adjustments */
    section.carousel-2,
    section.carousel-3,
    section.carousel-4,
    section.carousel-5,
    section.carousel-6,
    section.carousel-7,
    section.carousel-8 { margin-top: 10px !important; }
    
    .new-popular-carousel .carousel-container,
    section[class^="carousel-"] .carousel-container {
        padding-left: 15px;
        padding-right: 0;
    }
    
    .new-popular-carousel .carousel-track,
    section[class^="carousel-"] .carousel-track {
        gap: 15px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .new-popular-carousel .carousel-track:hover,
    section[class^="carousel-"] .carousel-track:hover {
        padding-top: 0;
        margin-bottom: 0;
    }
    
    .new-popular-carousel .carousel-track::-webkit-scrollbar,
    section[class^="carousel-"] .carousel-track::-webkit-scrollbar {
        display: none;
    }
    
    /* Use viewport-based card width so 2 full cards fit + a peek of 3rd */
    .new-popular-carousel,
    section[class^="carousel-"] { --pad: 15px; }
    .new-popular-carousel .carousel-card,
    section[class^="carousel-"] .carousel-card {
        /* account only left padding so right edge is flush; keep 3rd-card peek */
        flex: 0 0 calc((100vw - var(--pad) - 15px) / 2 - 8px);
        min-width: calc((100vw - var(--pad) - 15px) / 2 - 8px);
        max-width: calc((100vw - var(--pad) - 15px) / 2 - 8px);
        height: 350px;
        scroll-snap-align: start;
    }
    
    .new-popular-carousel .carousel-card:hover,
    section[class^="carousel-"] .carousel-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.15), inset 0 3px 0 0 #242323;
    }
    
    .new-popular-carousel .card-image,
    section[class^="carousel-"] .card-image {
        height: 230px;
    }
    
    .new-popular-carousel .card-info,
    section[class^="carousel-"] .card-info {
        padding: 10px 12px;
        height: 150px;
    }
    
    .new-popular-carousel .carousel-nav,
    section[class^="carousel-"] .carousel-nav {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .new-popular-carousel .carousel-container,
    section[class^="carousel-"] .carousel-container {
        padding-left: 10px;
        padding-right: 0;
    }
    
    .new-popular-carousel .carousel-track,
    section[class^="carousel-"] .carousel-track {
        gap: 12px;
    }
    
    .new-popular-carousel,
    section[class^="carousel-"] { --pad: 10px; }
    .new-popular-carousel .carousel-card,
    section[class^="carousel-"] .carousel-card {
        /* account only left padding so right edge is flush; keep 3rd-card peek */
        flex: 0 0 calc((100vw - var(--pad) - 12px) / 2 - 8px);
        min-width: calc((100vw - var(--pad) - 12px) / 2 - 8px);
        max-width: calc((100vw - var(--pad) - 12px) / 2 - 8px);
        height: 320px;
    }
    
    .new-popular-carousel .card-image,
    section[class^="carousel-"] .card-image {
        height: 210px;
    }
    
    .new-popular-carousel .card-info,
    section[class^="carousel-"] .card-info {
        padding: 8px 10px;
        height: 140px;
    }
    
    .new-popular-carousel .card-title,
    section[class^="carousel-"] .card-title {
        font-size: 14px;
        height: auto;
    }
    
    .new-popular-carousel .card-price,
    section[class^="carousel-"] .card-price {
        font-size: 14px;
    }
    
    .new-popular-carousel .add-to-cart-btn,
    section[class^="carousel-"] .add-to-cart-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* Popular Carousel Section - Matches Hero Container Width */
.popular-carousel-section {
    width: 100%;
    background: #ffffff;
    padding: 40px 0;
    margin-top: 0;
}

.popular-carousel-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

.popular-carousel-header {
    margin-bottom: 25px;
    text-align: left;
}

.popular-carousel-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin: 0;
    font-family: 'BPGGuardian', sans-serif;
    position: relative;
    padding-bottom: 10px;
}

.popular-carousel-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: #242323;
    border-radius: 2px;
}

.popular-carousel-wrapper {
    position: relative;
    overflow: hidden;
    padding: 0 50px;
}

.popular-carousel-track {
    display: flex;
    gap: 20px;
    transition: transform 0.3s ease;
    padding: 10px 0;
}

.popular-carousel-card {
    flex: 0 0 260px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.popular-carousel-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border-color: #242323;
}

.popular-card-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.popular-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.popular-carousel-card:hover .popular-card-image img {
    transform: scale(1.05);
}

.popular-card-info {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.popular-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0;
    line-height: 1.4;
    font-family: 'BPGGuardian', sans-serif;
}

.popular-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.popular-card-title a:hover {
    color: #f7e9cc;
}

.popular-card-price {
    font-size: 16px;
    font-weight: 700;
    color: #f7e9cc;
    font-family: 'BPGGuardian', sans-serif;
}

.popular-card-installment {
    font-size: 12px;
    color: #666;
    font-weight: 500;
    font-family: 'BPGGuardian', sans-serif;
}

.popular-card-actions {
    margin-top: auto;
}

.popular-add-to-cart-btn {
    display: inline-block;
    width: 100%;
    padding: 10px 15px;
    background: #242323;
    color: #f7e9cc;
    text-decoration: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid #242323;
    font-family: 'BPGGuardian', sans-serif;
}

.popular-add-to-cart-btn:hover {
    background: #ffffff;
    color: #f7e9cc;
    transform: translateY(-2px);
}

.popular-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #ffffff;
    border: 2px solid #e5e5e5;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.popular-carousel-nav:hover {
    background: #242323;
    color: #f7e9cc;
    border-color: #242323;
    box-shadow: 0 4px 12px rgba(36,35,35, 0.3);
}

.popular-carousel-nav.prev {
    left: 0;
}

.popular-carousel-nav.next {
    right: 0;
}

.popular-carousel-nav:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .popular-carousel-card {
        flex: 0 0 240px;
    }
    
    .popular-card-image {
        height: 180px;
    }
}

@media (max-width: 992px) {
    .popular-carousel-container {
        padding: 0 15px;
    }
    
    .popular-carousel-card {
        flex: 0 0 220px;
    }
    
    .popular-card-image {
        height: 160px;
    }
    
    .popular-carousel-title {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .popular-carousel-section {
        padding: 30px 0;
    }
    
    .popular-carousel-container {
        padding: 0 15px;
    }
    
    .popular-carousel-wrapper {
        padding: 0 40px;
    }
    
    .popular-carousel-track {
        gap: 15px;
    }
    
    .popular-carousel-card {
        flex: 0 0 200px;
    }
    
    .popular-card-image {
        height: 170px;
    }
    
    .popular-card-info {
        padding: 12px;
    }
    
    .popular-carousel-nav {
        width: 36px;
        height: 36px;
    }
    
    .popular-carousel-title {
        font-size: 22px;
    }
}

@media (max-width: 576px) {
    .popular-carousel-container {
        padding: 0 15px;
    }
    
    .popular-carousel-wrapper {
        padding: 0 35px;
    }
    
    .popular-carousel-track {
        gap: 12px;
    }
    
    .popular-carousel-card {
        flex: 0 0 180px;
    }
    
    .popular-card-image {
        height: 120px;
    }
    
    .popular-card-info {
        padding: 10px;
    }
    
    .popular-card-title {
        font-size: 12px;
        line-height: 1.3;
    }
    
    .popular-card-price {
        font-size: 14px;
    }
    
    .popular-add-to-cart-btn {
        font-size: 11px;
        padding: 8px 12px;
    }
    
    .popular-carousel-nav {
        width: 32px;
        height: 32px;
    }
    
    .popular-carousel-title {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .new-popular-carousel,
    section[class^="carousel-"] {
        margin-top: 190px; /* +40px from original 150px for 767px width */
        margin-left: 5px;
    }
}

@media (max-width: 575px) {
    .new-popular-carousel,
    section[class^="carousel-"] {
        margin-top: 150px; /* 190px - 10px */
    }
}

/* Single product - Related carousel mobile spacing (raise by 60px) */
@media (max-width: 768px){
  .related-carousel { margin-top: 30px !important; } /* 150 - 120 */
}
@media (max-width: 767px){
  .related-carousel { margin-top: 70px !important; } /* 190 - 120 */
}
@media (max-width: 575px){
  .related-carousel { margin-top: 30px !important; } /* 150 - 120 */
}

/* Single product - Related carousel had 0 margin-bottom on mobile, so the
   last row's price/button sat flush against the footer with no breathing
   room (measured: 0px gap). */
@media (max-width: 768px){
  .related-carousel { margin-bottom: 40px !important; }
}

/* Single product - Related carousel mobile horizontal alignment (shift left by 20px) */
@media (max-width: 768px){
  .related-carousel .carousel-container { 
    padding-left: 0 !important; 
    padding-right: 0 !important; 
    /* 50px narrower than viewport (10px prior + 40px more) */
    width: calc(100vw - 50px) !important;
    margin-left: calc(50% - 50vw + 25px) !important;
    margin-right: calc(50% - 50vw + 25px) !important;
  }
}
@media (max-width: 575px){
  .related-carousel .carousel-container { 
    padding-left: 0 !important; 
    padding-right: 0 !important; 
    width: calc(100vw - 50px) !important;
    margin-left: calc(50% - 50vw + 25px) !important;
    margin-right: calc(50% - 50vw + 25px) !important;
  }
}

/* Align related carousel flush with viewport on mobile */
@media (max-width: 768px){
  .related-carousel { margin-left: 0 !important; }
}
@media (max-width: 575px){
  .related-carousel { margin-left: 0 !important; }
}

/* Single product - Related carousel: show second card fully on mobile (no third peek) */
@media (max-width: 768px){
  .related-carousel .carousel-track { gap: 12px !important; }
  .related-carousel .carousel-card{
    /* Show a peek of the 3rd card on the right: subtract extra 20px */
    /* 2*card + 2*gaps + peek = 100%  -> card = (100% - 24px - 20px)/2 */
    flex: 0 0 calc((100% - 24px - 20px) / 2) !important;
    min-width: calc((100% - 24px - 20px) / 2) !important;
    max-width: calc((100% - 24px - 20px) / 2) !important;
  }
}
@media (max-width: 575px){
  .related-carousel .carousel-track { gap: 12px !important; }
  .related-carousel .carousel-card{
    /* Keep same peek behavior on smaller phones */
    flex: 0 0 calc((100% - 24px - 20px) / 2) !important;
    min-width: calc((100% - 24px - 20px) / 2) !important;
    max-width: calc((100% - 24px - 20px) / 2) !important;
  }
}

/* === Mobile: unify all product carousel card sizes (match related-products carousel)
   AND left-align the container so it starts at the same x-position as the slider
   photos and homepage banners (15px on tablets/large mobile, 10px on small mobile). === */
@media (max-width: 768px) {
  .new-popular-carousel .carousel-container,
  section[class^="carousel-"] .carousel-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .new-popular-carousel .carousel-track,
  section[class^="carousel-"] .carousel-track {
    gap: 12px !important;
  }
  /* 2 full cards + 1/3 peek of the 3rd visible.
     Container inner width = 100vw - 15px (padding-left); gap = 12px between cards.
     2c + 2*gap + c/3 = inner  =>  c = (inner - 2*gap) * 3/7 = (100vw - 39px) * 3/7 */
  .new-popular-carousel .carousel-card,
  section[class^="carousel-"] .carousel-card {
    flex: 0 0 calc((100vw - 39px) * 3 / 7) !important;
    min-width: calc((100vw - 39px) * 3 / 7) !important;
    max-width: calc((100vw - 39px) * 3 / 7) !important;
  }
}
@media (max-width: 575px) {
  .new-popular-carousel .carousel-container,
  section[class^="carousel-"] .carousel-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .new-popular-carousel .carousel-track,
  section[class^="carousel-"] .carousel-track {
    gap: 12px !important;
  }
  /* 1/3 peek with container padding-left 10px: c = (100vw - 34px) * 3/7 */
  .new-popular-carousel .carousel-card,
  section[class^="carousel-"] .carousel-card {
    flex: 0 0 calc((100vw - 34px) * 3 / 7) !important;
    min-width: calc((100vw - 34px) * 3 / 7) !important;
    max-width: calc((100vw - 34px) * 3 / 7) !important;
  }
}

/* === Single Product page: carousels start from the SAME x-position as the
   homepage carousels on mobile. The Bricks single-product section adds its
   own horizontal padding, which would push our carousels to the right. We
   break the container out of that parent padding using the 100vw +
   margin-left:calc(50% - 50vw) trick so the carousel-container always spans
   the full viewport width and starts exactly at 15px (or 10px on small mobile)
   from the viewport's left edge — identical to homepage carousels. === */
@media (max-width: 768px) {
  body.single-product .new-popular-carousel .carousel-container,
  body.single-product section[class^="carousel-"] .carousel-container {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 15px !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 575px) {
  body.single-product .new-popular-carousel .carousel-container,
  body.single-product section[class^="carousel-"] .carousel-container {
    padding-left: 10px !important;
  }
}

/* Single Product mobile: carousel banners align with carousel start, nearly full width */
@media (max-width: 768px) {
  body.single-product .homepage-full-banner {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body.single-product .homepage-banner-container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 15px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  body.single-product .homepage-banner-image {
    width: 100% !important;
    border-radius: 8px;
  }
}

@media (max-width: 575px) {
  body.single-product .homepage-banner-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* Out-of-stock state: render as plain red text instead of a button.
   Higher-specificity selectors (.new-popular-carousel ... .disabled and
   section[class^="carousel-"] ... .disabled) are required to beat the base
   .new-popular-carousel .carousel-add-to-cart-btn { background:#242323;
   padding:12px 20px; ... } rule defined above with !important. */
.carousel-add-to-cart-btn.disabled,
.carousel-add-to-cart-btn[aria-disabled="true"],
.new-popular-carousel .carousel-add-to-cart-btn.disabled,
.new-popular-carousel .carousel-add-to-cart-btn[aria-disabled="true"],
section[class^="carousel-"] .carousel-add-to-cart-btn.disabled,
section[class^="carousel-"] .carousel-add-to-cart-btn[aria-disabled="true"] {
  background: transparent !important;
  background-color: transparent !important;
  color: #dc2626 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  text-align: left !important;
  font-weight: 700 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: 1 !important;
  display: inline-block !important;
  width: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  transform: none !important;
  transition: none !important;
}

.carousel-add-to-cart-btn.disabled:hover,
.carousel-add-to-cart-btn[aria-disabled="true"]:hover,
.new-popular-carousel .carousel-add-to-cart-btn.disabled:hover,
.new-popular-carousel .carousel-add-to-cart-btn[aria-disabled="true"]:hover,
section[class^="carousel-"] .carousel-add-to-cart-btn.disabled:hover,
section[class^="carousel-"] .carousel-add-to-cart-btn[aria-disabled="true"]:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: #dc2626 !important;
  transform: none !important;
}

/* --- Price color overrides for homepage carousels --- */
.new-popular-carousel .card-price .woocommerce-Price-amount,
section[class^="carousel-"] .card-price .woocommerce-Price-amount,
.new-popular-carousel .card-price ins .woocommerce-Price-amount,
section[class^="carousel-"] .card-price ins .woocommerce-Price-amount,
.new-popular-carousel .card-price bdi,
section[class^="carousel-"] .card-price bdi,
.new-popular-carousel .card-price ins bdi,
section[class^="carousel-"] .card-price ins bdi,
.new-popular-carousel .card-price .amount,
section[class^="carousel-"] .card-price .amount {
    color: #7f170e !important;
}

/* Keep installment numeric value orange */
.new-popular-carousel .card-installment .installment-price,
section[class^="carousel-"] .card-installment .installment-price {
    color: #7f170e !important;
}

/* === Price color system (orange current, gray regular with orange strike) === */
/* Homepage carousels */
.new-popular-carousel .card-price ins,
section[class^="carousel-"] .card-price ins,
.new-popular-carousel .card-price ins .woocommerce-Price-amount,
section[class^="carousel-"] .card-price ins .woocommerce-Price-amount,
.new-popular-carousel .card-price ins bdi,
section[class^="carousel-"] .card-price ins bdi,
.new-popular-carousel .card-price .woocommerce-Price-amount:not(del .woocommerce-Price-amount),
section[class^="carousel-"] .card-price .woocommerce-Price-amount:not(del .woocommerce-Price-amount),
.new-popular-carousel .card-price bdi:not(del bdi),
section[class^="carousel-"] .card-price bdi:not(del bdi) {
	color: #7f170e !important;
}

.new-popular-carousel .card-price del,
section[class^="carousel-"] .card-price del {
	color: #6b7280 !important; /* dark gray */
    text-decoration: line-through;
    text-decoration-color: #6b7280 !important;
    text-decoration-thickness: 1px; /* thinner strike for clarity */
    font-size: 14px; /* larger old price on carousel cards */
}

.new-popular-carousel .card-price del .woocommerce-Price-amount,
section[class^="carousel-"] .card-price del .woocommerce-Price-amount,
.new-popular-carousel .card-price del bdi,
section[class^="carousel-"] .card-price del bdi {
	color: #6b7280 !important;
    text-decoration: none;
}

/* Shop archive grid */
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins .woocommerce-Price-amount,
.woocommerce ul.products li.product .price ins bdi,
.woocommerce-page ul.products li.product .price ins,
.woocommerce-page ul.products li.product .price ins .woocommerce-Price-amount,
.woocommerce-page ul.products li.product .price ins bdi,
.woocommerce ul.products li.product .price > .amount,
.woocommerce ul.products li.product .price bdi,
.woocommerce-page ul.products li.product .price > .amount,
.woocommerce-page ul.products li.product .price bdi {
	color: #7f170e !important;
}

.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del {
	color: #6b7280 !important;
	text-decoration: line-through;
	text-decoration-color: #6b7280 !important;
	text-decoration-thickness: 1.5px;
}

.woocommerce ul.products li.product .price del .woocommerce-Price-amount,
.woocommerce ul.products li.product .price del bdi,
.woocommerce-page ul.products li.product .price del .woocommerce-Price-amount,
.woocommerce-page ul.products li.product .price del bdi {
	color: #6b7280 !important;
	text-decoration: none;
}

/* Single product page */
.single-product .summary .price ins,
.single-product .summary .price ins .woocommerce-Price-amount,
.single-product .summary .price ins bdi,
.single-product .summary .price > .amount,
.single-product .summary .price bdi {
	color: #7f170e !important;
}

.single-product .summary .price del {
	color: #6b7280 !important;
	text-decoration: line-through;
	text-decoration-color: #6b7280 !important;
	text-decoration-thickness: 1.5px;
}

.single-product .summary .price del .woocommerce-Price-amount,
.single-product .summary .price del bdi {
	color: #6b7280 !important;
	text-decoration: none;
}

/* Homepage Blog Row */
.homepage-blog-row { margin-top: 40px; margin-bottom: var(--section-spacing); }
.homepage-blog-row .carousel-header { margin-bottom: 20px; padding: 0; }
.homepage-blog-row .carousel-header h2 { font-size: 24px; margin: 0; }
.homepage-blog-row .carousel-header h2 a { text-decoration: none; color: inherit; }
.blog-row-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.blog-row-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }

/* Blog carousel */
.blog-carousel-wrapper { position: relative; }
.blog-carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.blog-carousel-track::-webkit-scrollbar { display: none; }
.blog-carousel-track .blog-card { scroll-snap-align: start; }

/* Card widths per breakpoint (3 / 2 / 1) */
.blog-carousel-track .blog-card {
  flex: 0 0 calc((100% - 40px) / 3);
}
@media (max-width: 1024px) {
  .blog-carousel-track .blog-card {
    flex: 0 0 calc((100% - 20px) / 2);
  }
}
@media (max-width: 640px) {
  .blog-carousel-track .blog-card {
    /* Show two cards on mobile */
    flex: 0 0 calc((100% - 20px) / 2);
  }
}

/* Mobile tweaks: show a peek of the 3rd blog card like popular carousel */
@media (max-width: 768px) {
  .homepage-blog-row { --pad: 15px; }
  .blog-row-container { padding-left: var(--pad); padding-right: 0; }
  .blog-carousel-track { gap: 15px; }
  .blog-carousel-track .blog-card {
    /* two full cards + little peek of the 3rd */
    flex: 0 0 calc((100vw - var(--pad) - 15px) / 2 - 8px);
  }
}

/* Blog carousel arrows - match popular carousel positioning & design */
.blog-carousel-wrapper .carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #e5e5e5;
  border-radius: 50%;
  cursor: pointer;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666666;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.blog-carousel-wrapper .carousel-nav:hover {
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  color: #f7e9cc;
}
.blog-carousel-wrapper .carousel-nav.prev { left: 10px; }
.blog-carousel-wrapper .carousel-nav.next { right: 10px; }
.blog-carousel-wrapper .carousel-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}
@media (max-width: 992px) {
  .blog-carousel-wrapper .carousel-nav { display: none !important; }
}
.blog-card { display: block; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.06); overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.blog-card:hover { box-shadow: 0 12px 30px rgba(0,0,0,.10); transform: translateY(-2px); }
.homepage-blog-row .blog-card,
.blog-index .blog-card { box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; }
.homepage-blog-row .blog-card:hover,
.blog-index .blog-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15), inset 0 3px 0 0 #242323 !important; transform: none; border-color: #242323; border-top: 1px solid #242323; }
.blog-card-thumb-link { display: block; }
.blog-card-title-link { text-decoration: none; color: inherit; }
.blog-card-thumb { aspect-ratio: 16 / 9; overflow: hidden; background: #f2f2f2; }
.blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-body { padding: 14px 16px 16px; }
.blog-card-date { display: block; margin-top: 0; color: #777; font-size: 13px; }
.blog-card-title { margin: 8px 0 12px; font-size: clamp(16px, 2vw, 20px); line-height: 1.35; font-weight: 600; }
@media (max-width: 480px) {
  .homepage-blog-row .blog-card-title,
  .blog-index .blog-card-title {
    font-size: 12px;
    line-height: 1.35;
  }
}
.blog-card-actions { margin-top: 4px; }
.blog-card-readmore { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; background: #242323; color: #f7e9cc; border: none; border-radius: 6px; text-decoration: none; font-size: 13px; font-weight: 700; min-height: 40px; transition: all 0.2s ease; }
.blog-card-readmore:hover { background: #7f170e; }

@media (max-width: 1024px) {
  .blog-row-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .blog-row-grid { grid-template-columns: 1fr; }
}

/* Blog index page */
.blog-index {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 20px;
}
.blog-index .blog-hero {
  margin-top: 70px;
  margin-bottom: 24px;
}
.blog-index .blog-title {
  font-weight: 800;
  font-size: 32px;
  line-height: 1.2;
  margin: 0;
}
.blog-index .featured-blogs {
  margin-bottom: 28px;
}
.blog-index .blog-row-grid--rest {
  margin-top: 28px;
}
.blog-index .blog-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 24px 0;
}
.blog-index .blog-empty {
  margin: 0;
}

/* Single Homepage Blog - layout fixes */
.single-homepage-blog { padding-top: 90px; }
.single-homepage-blog .page-wrapper { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.single-homepage-blog .article-header { margin-bottom: 16px; }
.single-homepage-blog .article-title { margin: 0 0 8px; line-height: 1.25; }
.single-homepage-blog .article-date { color: #777; font-size: 14px; }
.single-homepage-blog .article-thumb { max-width: 1100px; margin: 20px auto; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.08); background: #fff; }
.single-homepage-blog .article-thumb img { width: 100%; height: auto; display: block; object-fit: cover; }

@media (max-width: 768px) {
	.single-homepage-blog { padding-top: 80px; }
	.single-homepage-blog .article-thumb { margin: 12px auto; }
}

/* Homepage Blog Modal */
.blog-modal { position: fixed; inset: 0; display: none; z-index: 1000000; }
.blog-modal.is-open { display: block; }
.blog-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(1px); }
.blog-modal-dialog { position: relative; max-width: 960px; width: calc(100% - 40px); max-height: calc(100% - 80px); margin: 40px auto; background: #fff; border-radius: 14px; overflow: auto; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.blog-modal-close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: none; background: #242323; color: #f7e9cc; font-size: 20px; line-height: 40px; text-align: center; cursor: pointer; z-index: 2; display: inline-flex; align-items: center; justify-content: center; }
.blog-modal-body { padding: 20px; }
.blog-modal-title { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(36,35,35,.25); font-size: clamp(24px, 3vw, 34px); }
.blog-modal-date { display: block; color: #777; font-size: 14px; margin-bottom: 12px; }
.blog-modal-thumb { margin: 10px auto 16px; max-width: 900px; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.blog-modal-thumb img { display: block; width: 100%; height: auto; object-fit: cover; }
.blog-modal-content { font-size: 16px; line-height: 1.7; }
@media (max-width: 640px) { .blog-modal-dialog { margin: 20px auto; max-height: calc(100% - 40px); } }

.blog-modal-thumb { min-height: 200px; background: #f6f6f6; }

.blog-modal-content p { text-indent: 0.6em; margin-top: 0.8em; }
.blog-modal-content p:first-child { margin-top: 0.6em; }

.blog-modal-content h1 { font-size: clamp(20px, 2.4vw, 26px); }
.blog-modal-content h2 { font-size: clamp(18px, 2.1vw, 24px); }
.blog-modal-content h3 { font-size: clamp(16px, 1.9vw, 22px); }

/* ==========================================================================
   AX: High Quality Images - Slider and Blog (Original Quality)
   ========================================================================== */

/* Homepage slider images - original quality */
.main-slider img,
.slider-section img,
.slide img,
.hero-section img {
	image-rendering: auto !important;
	-ms-interpolation-mode: bicubic !important;
}

/* Blog post images - original quality */
.blog-card-thumb img,
.blog-modal-thumb img,
.article-thumb img,
.blog-card .thumb img,
.homepage-blog-article img,
.blog-row-container img,
.blog-grid img {
	image-rendering: auto !important;
	-ms-interpolation-mode: bicubic !important;
}

/* AX: Mobile carousel cards — square image area + auto card height.
   Product photos are square, so the image container takes a 1:1 aspect ratio
   based on the card width and the card grows naturally with the info area. */
@media (max-width: 768px) {
  .new-popular-carousel .carousel-card,
  section[class^="carousel-"] .carousel-card {
    height: auto !important;
    /* Reduce mobile card height: size to content (image + info) instead of the
       400px desktop min-height. Equal heights kept via flex-row stretch. */
    min-height: 0 !important;
  }

  .new-popular-carousel .card-image,
  section[class^="carousel-"] .card-image {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  .popular-carousel-card {
    height: auto !important;
    min-height: 0 !important;
  }

  .popular-card-image {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  /* Keep image rendering uncropped */
  .new-popular-carousel .card-image img,
  section[class^="carousel-"] .card-image img,
  .popular-card-image img,
  .carousel-product-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
    transform: none !important;
    transform-origin: center center !important;
  }

  .new-popular-carousel .card-image a,
  section[class^="carousel-"] .card-image a,
  .carousel-product-image > a {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 576px) {
  .new-popular-carousel .carousel-card,
  section[class^="carousel-"] .carousel-card {
    height: auto !important;
  }

  .new-popular-carousel .card-image,
  section[class^="carousel-"] .card-image {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  .popular-carousel-card {
    height: auto !important;
  }

  .popular-card-image {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  .new-popular-carousel .card-image img,
  section[class^="carousel-"] .card-image img,
  .popular-card-image img,
  .carousel-product-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    transform-origin: center center !important;
  }
}

/* AX: Ensure product images are fully visible (no crop) in all carousel cards */
.new-popular-carousel .card-image,
section[class^="carousel-"] .card-image,
.popular-card-image,
.carousel-product-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.new-popular-carousel .card-image img,
section[class^="carousel-"] .card-image img,
.popular-card-image img,
.carousel-product-image img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  transform: none !important;
  transform-origin: center center !important;
}

/* === Mobile: unified spacing between every carousel title and its cards.
   Earlier rules across the file produced inconsistent gaps (carousel-2 sale
   block was tight, others were 15-20px, single-product page carousels could
   inherit yet another value). Force a single consistent gap on ALL product
   carousels (homepage + single-product) for mobile breakpoints. === */
@media (max-width: 768px) {
  .new-popular-carousel .carousel-header,
  section[class^="carousel-"] .carousel-header {
    margin-bottom: 12px !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .new-popular-carousel .carousel-title,
  section[class^="carousel-"] .carousel-title {
    margin: 0 !important;
  }
  /* Override the special tight spacing for the Sale (carousel-2) block */
  .homepage-group.category-group.carousel-2 > section.carousel-2 .carousel-header {
    margin-bottom: 12px !important;
  }
  .homepage-group.category-group.carousel-2 > section.carousel-2 .carousel-title {
    margin: 0 !important;
  }
}
@media (max-width: 576px) {
  .new-popular-carousel .carousel-header,
  section[class^="carousel-"] .carousel-header {
    margin-bottom: 12px !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .new-popular-carousel .carousel-title,
  section[class^="carousel-"] .carousel-title {
    margin: 0 !important;
  }
  .homepage-group.category-group.carousel-2 > section.carousel-2 .carousel-header {
    margin-bottom: 12px !important;
  }
  .homepage-group.category-group.carousel-2 > section.carousel-2 .carousel-title {
    margin: 0 !important;
  }
}

/* Mobile: product card title font-size = 10px for all product carousels.
   Also relax the fixed title height (was 42px / 36px) so 2 lines of 10px
   fit naturally without leaving empty space below the title. */
@media (max-width: 768px) {
  .new-popular-carousel .card-title,
  section[class^="carousel-"] .card-title {
    font-size: 12px !important;
    line-height: 1.3 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .new-popular-carousel .card-title a,
  section[class^="carousel-"] .card-title a {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
}

/* Mobile: "დამატება" button — 10px font with proportionally reduced padding
   and radius. Applies to all carousel cards AND shop grid cards (both share
   the .carousel-add-to-cart-btn class). The .disabled / [aria-disabled]
   override above keeps higher specificity, so out-of-stock plain text is
   not affected by this rule.

   NOTE on specificity: mu-plugins/axalia-custom.css defines an active button
   rule with `html body.woocommerce ul.products li.product
   .carousel-add-to-cart-btn` (specificity 0,4,4). To override it we use the
   same `html body.woocommerce(-page)` prefix and add `.rp-shop-card` /
   `.product` doubled on `<li>` so our selector reaches at least 0,5,4. */
@media (max-width: 768px) {
  .new-popular-carousel .carousel-add-to-cart-btn,
  section[class^="carousel-"] .carousel-add-to-cart-btn,
  html body.woocommerce ul.products li.product .carousel-add-to-cart-btn,
  html body.woocommerce-page ul.products li.product .carousel-add-to-cart-btn,
  html body.woocommerce ul.products li.product.rp-shop-card .carousel-add-to-cart-btn,
  html body.woocommerce-page ul.products li.product.rp-shop-card .carousel-add-to-cart-btn {
    font-size: 10px !important;
    padding: 7px 12px !important;
    border-radius: 5px !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
  }
}

/* === Mobile: unify carousel-card AND shop-card info layout so titles,
   prices, installment and "დამატება" button sit on the SAME y-axis across
   every card in a row. Approach:
   - Card-info is a flex column with tight gaps (height: auto, no flex-grow).
   - Title slot: fixed 2-line height (10px × 1.3 × 2 = ~26px).
   - Price / installment: 10px font; each is a fixed 1-line slot (~13px).
   - When .card-installment / .rp-installment is absent we reserve its
     vertical space using a :has() rule on the actions area so the button
     never moves up. (Modern browser support is fine in 2026.) */
@media (max-width: 768px) {
  /* --- CAROUSEL cards -------------------------------------------------- */
  .new-popular-carousel .card-info,
  section[class^="carousel-"] .card-info {
    display: flex !important;
    flex-direction: column !important;
    padding: 8px 12px !important;
    gap: 2px !important;
    height: auto !important;
    flex-grow: 0 !important;
    flex: 0 0 auto !important;
  }
  .new-popular-carousel .card-title,
  section[class^="carousel-"] .card-title {
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 2px 0 !important;
    overflow: visible !important;
  }
  .new-popular-carousel .card-price,
  section[class^="carousel-"] .card-price {
    /* Sale / active price ("ფასდაკლებული") = 14px on mobile */
    font-size: 14px !important;
    line-height: 1.3 !important;
    min-height: 18px !important;
    margin: 0 !important;
    /* Use baseline alignment so the digits of the strikethrough (12px)
       and the active price (14px) sit on the same visual line. */
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    /* Tight gap so the strikethrough price sits close to the active price. */
    gap: 3px !important;
    flex-wrap: wrap !important;
  }
  /* Regular / strikethrough price ("მიმდინარე") = 12px on mobile */
  .new-popular-carousel .card-price del,
  section[class^="carousel-"] .card-price del,
  .new-popular-carousel .card-price del .woocommerce-Price-amount,
  section[class^="carousel-"] .card-price del .woocommerce-Price-amount,
  .new-popular-carousel .card-price del bdi,
  section[class^="carousel-"] .card-price del bdi {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  .new-popular-carousel .card-price del,
  section[class^="carousel-"] .card-price del {
    display: inline-flex !important;
    align-items: baseline !important;
  }
  .new-popular-carousel .card-installment,
  section[class^="carousel-"] .card-installment {
    font-size: 8px !important;
    line-height: 1.3 !important;
    min-height: 11px !important;
    margin: 0 !important;
  }
  /* Compact gap between pricing area and the action button (no flex-grow
     "push to bottom" so the gap looks like the one on shop cards). */
  .new-popular-carousel .card-actions,
  section[class^="carousel-"] .card-actions {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
  }
  /* Reserve the installment row even when the product has no installment
     so the "დამატება" button stays on the same y across all cards. */
  .new-popular-carousel .card-info:not(:has(.card-installment)) .card-actions,
  section[class^="carousel-"] .card-info:not(:has(.card-installment)) .card-actions {
    margin-top: 17px !important; /* 11px reserved installment slot + 2px gap + 4px base */
  }

  /* --- SHOP cards ------------------------------------------------------ */
  html body.woocommerce ul.products li.product.rp-shop-card .rp-price,
  html body.woocommerce-page ul.products li.product.rp-shop-card .rp-price,
  ul.products li.rp-shop-card .rp-price {
    /* Sale / active price ("ფასდაკლებული") = 14px on mobile */
    font-size: 14px !important;
    line-height: 1.3 !important;
    min-height: 18px !important;
    /* Use baseline alignment so the digits of the strikethrough (12px)
       and the active price (14px) sit on the same visual line. */
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    /* Tight gap so the strikethrough price sits close to the active price. */
    gap: 3px !important;
    flex-wrap: wrap !important;
  }
  /* Regular / strikethrough price ("მიმდინარე") = 12px on shop cards mobile */
  html body.woocommerce ul.products li.product.rp-shop-card .rp-price del,
  html body.woocommerce-page ul.products li.product.rp-shop-card .rp-price del,
  ul.products li.rp-shop-card .rp-price del,
  ul.products li.rp-shop-card .rp-price del .woocommerce-Price-amount,
  ul.products li.rp-shop-card .rp-price del bdi {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  html body.woocommerce ul.products li.product.rp-shop-card .rp-price del,
  html body.woocommerce-page ul.products li.product.rp-shop-card .rp-price del,
  ul.products li.rp-shop-card .rp-price del {
    display: inline-flex !important;
    align-items: baseline !important;
  }
  html body.woocommerce ul.products li.product.rp-shop-card .rp-installment,
  html body.woocommerce-page ul.products li.product.rp-shop-card .rp-installment,
  ul.products li.rp-shop-card .rp-installment {
    font-size: 8px !important;
    line-height: 1.3 !important;
    min-height: 11px !important;
  }
  /* Reserve a fixed price+installment area so price/installment/button align
     across cards in the same row regardless of installment presence.
     (18px price slot + 11px installment slot + 2px gap = 31px) */
  ul.products li.rp-shop-card .rp-pricing {
    min-height: 31px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  ul.products li.rp-shop-card .rp-title {
    min-height: 26px !important;
    max-height: 26px !important;
    margin-bottom: 2px !important;
    overflow: hidden !important;
  }
  /* Compact gap between pricing and the button on shop cards too */
  ul.products li.rp-shop-card .rp-actions {
    margin-top: 4px !important;
  }
}

/* =================================================================
   Product-card price typography
   - Sale (current) price ............. BPGGuardian
   - Regular (strikethrough) price .... BPGGuardian
   - Installment price ................ BPGGuardian
   Targets every carousel variant (related, category, sale, popular,
   new-popular) AND shop cards. The base "*" rule at the top of this
   file sets BPGGuardian on every element with !important, so each
   override below must also use !important and explicitly target inner
   descendants (woocommerce-Price-amount, bdi, ins, .installment-price,
   .amt, etc.) – font-family is set directly on every element by the
   base rule, so inheritance alone is not enough.
   ================================================================= */

/* --- 1. Sale (current/active) price = BPGGuardian -------------- */
.new-popular-carousel .card-price,
.new-popular-carousel .card-price *,
section[class^="carousel-"] .card-price,
section[class^="carousel-"] .card-price *,
.popular-card-price,
.popular-card-price *,
.popular-products-section .price,
.popular-products-section .price *,
html body.woocommerce ul.products li.product.rp-shop-card .rp-price,
html body.woocommerce ul.products li.product.rp-shop-card .rp-price *,
html body.woocommerce-page ul.products li.product.rp-shop-card .rp-price,
html body.woocommerce-page ul.products li.product.rp-shop-card .rp-price *,
ul.products li.rp-shop-card .rp-price,
ul.products li.rp-shop-card .rp-price * {
  font-family: 'BPGGuardianCaps', sans-serif !important;
}

/* --- 2. Regular (strikethrough) price = BPGGuardianCaps -------------- */
/* The BPGGuardian .ttf is defined at font-weight:400. The parent
   .card-price / .rp-price elements set font-weight:700, which makes the
   browser synthesize a faux-bold from Regular. That synthesis is what the
   homepage carousel currently shows ("correct" per the user). On some
   contexts (shop / single-product carousels) the browser was rendering
   the actual designed Regular at weight 400 (thinner), causing the
   inconsistency. We pin font-weight:700 explicitly here so every browser
   on every page renders the SAME synthesized-bold BPGGuardian. */
.new-popular-carousel .card-price del,
.new-popular-carousel .card-price del *,
section[class^="carousel-"] .card-price del,
section[class^="carousel-"] .card-price del *,
.popular-card-price del,
.popular-card-price del *,
.popular-products-section .price del,
.popular-products-section .price del *,
html body.woocommerce ul.products li.product.rp-shop-card .rp-price del,
html body.woocommerce ul.products li.product.rp-shop-card .rp-price del *,
html body.woocommerce-page ul.products li.product.rp-shop-card .rp-price del,
html body.woocommerce-page ul.products li.product.rp-shop-card .rp-price del *,
ul.products li.rp-shop-card .rp-price del,
ul.products li.rp-shop-card .rp-price del * {
  font-family: 'BPGGuardianCaps', sans-serif !important;
  font-weight: 700 !important;
}

/* --- 3. Installment price = BPGGuardian -------------------------- */
.new-popular-carousel .card-installment,
.new-popular-carousel .card-installment *,
section[class^="carousel-"] .card-installment,
section[class^="carousel-"] .card-installment *,
.popular-card-installment,
.popular-card-installment *,
.popular-products-section .installment-info,
.popular-products-section .installment-info *,
.popular-products-section .installment-price,
html body.woocommerce ul.products li.product.rp-shop-card .rp-installment,
html body.woocommerce ul.products li.product.rp-shop-card .rp-installment *,
html body.woocommerce-page ul.products li.product.rp-shop-card .rp-installment,
html body.woocommerce-page ul.products li.product.rp-shop-card .rp-installment *,
ul.products li.rp-shop-card .rp-installment,
ul.products li.rp-shop-card .rp-installment * {
  font-family: 'BPGGuardian', sans-serif !important;
}

/* Desktop: regular/current strikethrough price must stay 14px on shop cards
   and single-product carousel cards. */
@media (min-width: 769px) {
  body.single-product .new-popular-carousel .card-price del,
  body.single-product .new-popular-carousel .card-price del *,
  body.single-product section[class^="carousel-"] .card-price del,
  body.single-product section[class^="carousel-"] .card-price del *,
  html body.woocommerce ul.products li.product.rp-shop-card .rp-price del,
  html body.woocommerce ul.products li.product.rp-shop-card .rp-price del *,
  html body.woocommerce-page ul.products li.product.rp-shop-card .rp-price del,
  html body.woocommerce-page ul.products li.product.rp-shop-card .rp-price del *,
  ul.products li.rp-shop-card .rp-price del,
  ul.products li.rp-shop-card .rp-price del * {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
}

/* AX: Remove installment display site-wide. PHP templates no longer render it,
   but this also hides any legacy/alternate markup and removes reserved gaps. */
.card-installment,
.popular-card-installment,
.carousel-installment-info,
.installment-info,
.rp-installment,
.woocommerce-price-installment,
.single-installment-button,
.single-installment-info,
.ax-installment-inline,
.ax-installment-amount,
.ax-installment-suffix {
  display: none !important;
}

.ax-price-with-installment {
  display: inline !important;
}

.new-popular-carousel .card-info:not(:has(.card-installment)) .card-actions,
section[class^="carousel-"] .card-info:not(:has(.card-installment)) .card-actions {
  margin-top: 4px !important;
}

ul.products li.rp-shop-card .rp-pricing {
  min-height: 18px !important;
  gap: 0 !important;
}

/* Homepage carousel-1: remove the extra top gap inside the carousel wrapper. */
body.home .homepage-group.category-group.carousel-1 > section.carousel-1 .carousel-wrapper,
body.home .homepage-group.category-group.carousel-1 > section.carousel-1 .carousel-track {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Homepage carousel-2: keep 15px gap below title. */
body.home .homepage-group.category-group.carousel-2 > section.carousel-2 .carousel-title {
  margin-bottom: 15px !important;
}

/* Single product related carousel: remove the extra top gap above cards. */
body.single-product .new-popular-carousel.related-carousel .carousel-wrapper,
body.single-product .new-popular-carousel.related-carousel .carousel-track {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Single product summary price typography. */
body.single-product .summary.entry-summary .price,
body.single-product .summary.entry-summary .price *,
body.single-product .summary.entry-summary .price ins,
body.single-product .summary.entry-summary .price ins * {
  font-family: 'BPGGuardianCaps', sans-serif !important;
}

body.single-product .summary.entry-summary .price del,
body.single-product .summary.entry-summary .price del * {
  font-family: 'BPGGuardianCaps', sans-serif !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

@media (min-width: 769px) {
  body.single-product .summary.entry-summary .price del,
  body.single-product .summary.entry-summary .price del * {
    font-size: 22px !important;
  }
}

/* ===== niamori: current/active price = dark red #7f170e (old/crossed = grey) ===== */
.woocommerce-Price-amount,
ul.products li.rp-shop-card .rp-price,
ul.products li.rp-shop-card .rp-price bdi,
ul.products li.rp-shop-card .rp-price ins bdi,
ul.products li.rp-shop-card .rp-installment .installment-price,
.single-product .summary .ax-installment-amount,
.single-installment-button .installment-amount,
.fs-search-dropdown .ls-price-current .woocommerce-Price-amount,
.fs-search-dropdown .ls-price-current .woocommerce-Price-amount bdi,
.fs-search-dropdown .ls-price-current .woocommerce-Price-amount .woocommerce-Price-currencySymbol { color: #7f170e !important; }
del .woocommerce-Price-amount,
del .woocommerce-Price-amount bdi,
.fs-search-dropdown .ls-price-old .woocommerce-Price-amount,
.fs-search-dropdown .ls-price-old .woocommerce-Price-amount .woocommerce-Price-currencySymbol { color: #999999 !important; }

/* ===== BPGGuardianCaps — headings / categories (overrides the BPGGuardian default) ===== */
/* 1. Flyout / vertical menu categories — high specificity to beat Bricks customCss
      (.vertical-menu-list li a { font-family:'FiraGO-SemiBold.otf' !important }) */
.hero-section .vertical-menu a,
.hero-section .vertical-menu .vm-submenu a,
.hero-section .vm-flyout-panel a,
.vertical-menu li a,
.vm-flyout-panel li a {
  font-family: 'BPGGuardianCaps' !important;
}
/* 2. Header nav dropdown + mobile menu categories */
.fs-nav-item.ax-nav-link,
.fs-nav-subitem {
  font-family: 'BPGGuardianCaps' !important;
}
/* 3. Shop filter categories */
.category-filter .checkbox-label {
  font-family: 'BPGGuardianCaps' !important;
}
/* 4. Search dropdown categories */
.fs-dropdown-categories a,
.fs-dropdown-title {
  font-family: 'BPGGuardianCaps' !important;
}
/* 5. Carousel section titles (carousel.php / coming-soon; carousel-template.php set inline) */
.section-title {
  font-family: 'BPGGuardianCaps' !important;
}
/* 6. Product accordion headers */
.ax-acc-header,
.ax-acc-title {
  font-family: 'BPGGuardianCaps' !important;
}

/* ===== BPGGuardianCaps — 4 CTA buttons (higher specificity to beat existing BPGGuardian rules) ===== */
/* 1a. Product-page add-to-cart "დამატება" (beats .woocommerce form.cart .single_add_to_cart_button 0,3,1) */
.woocommerce div.product form.cart .single_add_to_cart_button {
  font-family: 'BPGGuardianCaps' !important;
}
/* 1b. Carousel / loop add-to-cart "დამატება" (beats .woocommerce-page ul.products li.product .carousel-add-to-cart-btn 0,4,2) */
body .woocommerce-page ul.products li.product .carousel-add-to-cart-btn,
body .woocommerce ul.products li.product .carousel-add-to-cart-btn,
.carousel-add-to-cart-btn {
  font-family: 'BPGGuardianCaps' !important;
}
/* 2. Mobile cart bar "გაგრძელება" */
#axMobileCartBar .ax-mobile-cart-bar-cta {
  font-family: 'BPGGuardianCaps' !important;
}
/* 3. Cart page "შემდეგი" */
.z-btn.z-btn-primary.z-btn-xl {
  font-family: 'BPGGuardianCaps' !important;
}
/* 4. Checkout "შეკვეთის განთავსება" */
body.woocommerce-checkout #payment #place_order,
body.woocommerce-checkout #place_order {
  font-family: 'BPGGuardianCaps' !important;
}

/* ===== BPGGuardianCaps — header cart/account buttons + footer headings ===== */
/* Header cart + account (ID + descendants — beats the global * rule on inner text spans) */
#fsCartBtn, #fsCartBtn *,
#fsAccountBtn, #fsAccountBtn * {
  font-family: 'BPGGuardianCaps' !important;
}
/* Footer column headings (კომპანია / გადახდები / გამომყევი / კონტაქტი) */
.footer-menu-column h4,
.footer-menu-section h4 {
  font-family: 'BPGGuardianCaps' !important;
}

/* ===== BPGGuardianCaps — "დამატება" in carousel cards + product cards (beat carousel/loop BPGGuardian rules) ===== */
body section[class^="carousel-"] .carousel-add-to-cart-btn,
body .new-popular-carousel .carousel-add-to-cart-btn,
body .woocommerce-page ul.products li.product .carousel-add-to-cart-btn,
body .woocommerce ul.products li.product .carousel-add-to-cart-btn,
body ul.products li.rp-shop-card .carousel-add-to-cart-btn,
body .popular-add-to-cart-btn,
body .carousel-add-to-cart-btn {
  font-family: 'BPGGuardianCaps' !important;
}

/* ===== BPGGuardianCaps — shop / archive product-card "დამატება" (bulletproof: #products-container id + a.class) ===== */
html body #products-container li.product a.carousel-add-to-cart-btn,
html body.woocommerce-page ul.products li.product.rp-shop-card a.carousel-add-to-cart-btn,
html body.woocommerce ul.products li.product.rp-shop-card a.carousel-add-to-cart-btn,
html body.woocommerce-page ul.products li.product a.carousel-add-to-cart-btn {
  font-family: 'BPGGuardianCaps' !important;
}

/* ===== BPGGuardianCaps — cart dropdown, preheader delivery, carousel titles, blog read-more ===== */
/* 1. Cart dropdown: total price "ჯამური ფასი" + "კალათის ნახვა" button */
.fs-cart-dropdown .woocommerce-mini-cart__total,
.fs-cart-dropdown .woocommerce-mini-cart__total *,
.fs-cart-dropdown a.wc-forward,
.fs-cart-dropdown .button.wc-forward {
  font-family: 'BPGGuardianCaps' !important;
}
/* 2. Preheader "მიწოდება" (delivery link) */
.fs-preheader-right > a.fs-ph-item,
.fs-preheader-right > a.fs-ph-item * {
  font-family: 'BPGGuardianCaps' !important;
}
/* 3. Main-page carousel titles (.carousel-title / .popular-carousel-title) */
.carousel-title, .carousel-title *,
.popular-carousel-title, .popular-carousel-title * {
  font-family: 'BPGGuardianCaps' !important;
}
/* 4. Blog section "სრულად" read-more button */
.blog-card-readmore, .blog-card-readmore * {
  font-family: 'BPGGuardianCaps' !important;
}

/* =========================================================================
   Full product titles + equal-height cards (Farfetch/Jacquemus)
   Titles show in full (no line-clamp / fixed height). Image area stays a
   uniform fixed height; the text area (.card-info) flexes to fit the title;
   cards grow via min-height and, being flex-row items with the default
   align-items:stretch, all cards in a row match the tallest.
   Placed last so it overrides the scattered per-breakpoint fixed heights.
   ========================================================================= */
.new-popular-carousel .carousel-card,
section[class^="carousel-"] .carousel-card {
    height: auto !important;
    min-height: 400px;
}
.new-popular-carousel .card-info,
section[class^="carousel-"] .card-info {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    flex-grow: 1 !important;
}
.new-popular-carousel .card-title,
section[class^="carousel-"] .card-title {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    text-overflow: clip !important;
}
.new-popular-carousel .card-title a,
section[class^="carousel-"] .card-title a {
    display: inline !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    text-overflow: clip !important;
}
/* Shop / category grid card */
ul.products li.rp-shop-card .rp-card { height: auto !important; min-height: 400px; }
ul.products li.rp-shop-card .rp-info { height: auto !important; }
ul.products li.rp-shop-card .rp-title {
    height: auto !important;
    max-height: none !important;
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    text-overflow: clip !important;
}

/* =========================================================================
   "წარწერის გრავირებით" note — bordeaux, on its own line UNDER the product
   title in every carousel card and shop/category card.
   ========================================================================= */
.ax-engrave-note {
    display: block !important;
    color: #7f170e !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
    font-family: 'BPGGuardian', sans-serif !important;
    /* სათაურსა და ფასს შორის ცენტრში: title mb=8 + note mt=0 (ზემოთ 8) = note mb=8 + price mt=0 (ქვემოთ 8) */
    margin: 0 0 8px 0 !important;
}
/* Shop card is a reordered flex column (title:1, pricing:2, actions:3).
   Give the note order:1 so it sits right below the title, above the price. */
ul.products li.rp-shop-card .rp-info .ax-engrave-note { order: 1 !important; }

/* =========================================================================
   Desktop footer typography: section headings 16px, category links 14px.
   ========================================================================= */
@media (min-width: 769px) {
    .footer-menu-column h4,
    .footer-menu-section h4 {
        font-size: 16px !important;
    }
    .footer-menu-section .footer-menu-column ul li a,
    .footer-menu-column ul li a {
        font-size: 14px !important;
    }
}

/* =========================================================================
   Mobile card typography: product title 12px, engrave note 10px
   (carousel .card-title handled in the max-768 block above; here: shop
   .rp-title + the shared .ax-engrave-note).
   ========================================================================= */
@media (max-width: 768px) {
    ul.products li.rp-shop-card .rp-title {
        font-size: 12px !important;
    }
    .ax-engrave-note {
        font-size: 10px !important;
    }
}

/* =========================================================================
   Mobile footer typography: section headings 14px, ALL category text 12px
   (menu-column links AND the contact section: phone / address).
   ========================================================================= */
@media (max-width: 768px) {
  .footer-menu-column h4,
  .footer-menu-section h4 {
    font-size: 14px !important;
  }
  .footer-menu-section .footer-menu-column ul li a,
  .footer-menu-column ul li a,
  .footer-menu-section .contact-info li a,
  .footer-menu-section .contact-info li a .phone-text,
  .footer-menu-section .contact-info li a .email-text,
  .footer-menu-section .contact-info li a .branch-text,
  .footer-menu-section .contact-info li a .address-text,
  .footer-menu-column .contact-info .email-text {
    font-size: 10px !important;
  }
  /* Street line ("ვარლამ ჩერქეზიშვილი") + postal line smaller on mobile only */
  .footer-menu-section .contact-info .address-text .ax-addr-street,
  .footer-menu-section .contact-info .address-text .ax-addr-postal {
    font-size: 10px !important;
  }
  /* A bit more spacing between contact-section items on mobile */
  .footer-menu-section .footer-menu-column .contact-info li {
    margin-bottom: 14px !important;
  }
  /* A bit more gap between the contact icon and its text on mobile */
  .footer-menu-section .footer-menu-column .contact-info li a {
    gap: 16px !important;
  }
  /* "როგორ მოვიდე საამქროში?" — its paper-plane icon fills its box less, so
     the text looks farther. Tighten this one item's gap to match the others. */
  .footer-menu-section .footer-menu-column .contact-info li a[href="#"] {
    gap: 8px !important;
  }
}

/* =========================================================================
   Footer: only the section headings are cream #f7e9cc; all other text white.
   (SVG icons use stroke/fill, so `color` here doesn't affect them.)
   ========================================================================= */
.footer-menu-section h4 {
  color: #f7e9cc !important;
}
.footer-menu-section a,
.footer-menu-section span,
.footer-menu-section li,
.footer-menu-section p,
.footer-menu-section .contact-info li a,
.footer-menu-section .contact-info li a * {
  color: #ffffff !important;
}

/* =========================================================================
   "დამატება" (add-to-cart) button text = cream #f7e9cc everywhere
   (carousel + shop cards + popular + single product). Disabled / out-of-stock
   buttons are excluded.
   ========================================================================= */
body section[class^="carousel-"] .carousel-add-to-cart-btn:not(.disabled):not([aria-disabled="true"]),
body .new-popular-carousel .carousel-add-to-cart-btn:not(.disabled):not([aria-disabled="true"]),
body .woocommerce ul.products li.product .carousel-add-to-cart-btn:not(.disabled):not([aria-disabled="true"]),
body .woocommerce-page ul.products li.product .carousel-add-to-cart-btn:not(.disabled):not([aria-disabled="true"]),
body ul.products li.rp-shop-card .carousel-add-to-cart-btn:not(.disabled):not([aria-disabled="true"]),
body .popular-add-to-cart-btn:not(.disabled):not([aria-disabled="true"]),
body .carousel-add-to-cart-btn:not(.disabled):not([aria-disabled="true"]),
body .woocommerce div.product form.cart .single_add_to_cart_button,
body .single_add_to_cart_button {
  color: #f7e9cc !important;
}

/* =========================================================================
   Cream #f7e9cc text on the site's dark #242323 elements — badges, dark
   buttons, blog buttons/modal. (Footer intentionally excluded — it keeps its
   own heading-cream / body-white scheme.) Beats inline color:#f7e9cc via !important.
   ========================================================================= */
.sale-percentage,
.popular-products-section .sale-percentage,
.product-badges .sale-percentage,
.new-badge,
.coming-soon-badge,
ul.products li.rp-shop-card .rp-badge,
ul.products li.rp-shop-card .button,
.blog-card-readmore,
.blog-card-readmore *,
.blog-modal-close {
  color: #f7e9cc !important;
}

/* =========================================================================
   Cream #f7e9cc text on ALL always-dark #242323 buttons & badges.
   Excluded: footer, hover-only dark states, transparent-base nav buttons,
   and +/- qty controls (their color is managed separately).
   ========================================================================= */
.popular-add-to-cart-btn,
.new-popular-carousel .add-to-cart-btn,
section[class^="carousel-"] .add-to-cart-btn,
.add-to-cart-btn,
.ax-mobile-cart-bar-cta,
.slider-btn,
.apply-filter-btn,
.woocommerce form.cart .single_add_to_cart_button,
ul.products li.rp-shop-card .button,
.mobile-filter-header .close-filter,
.woocommerce-error .button,
.woocommerce-notices-wrapper .woocommerce-error .button,
.ax-account-edit .woocommerce-Button.button,
.woocommerce-account .ax-address-card-actions .z-btn,
.fs-cart-dropdown .woocommerce-mini-cart__buttons a.button,
.fs-cart-dropdown .woocommerce-mini-cart__buttons a.checkout,
.fs-cart-dropdown .woocommerce-mini-cart__buttons a.wc-forward,
.woocommerce-pagination .page-numbers span.current,
.fs-sale-nav-btn,
.single-product-badge,
.single-product-sale-badge,
.badge.onsale,
.z-btn.z-btn-primary,
.z-btn.z-btn-primary.z-btn-xl,
.z-summary-box .z-btn-xl,
body.woocommerce-checkout #place_order,
#place_order {
  color: #f7e9cc !important;
}

/* =========================================================================
   Shop toolbar buttons — BPGGuardianCaps: ფილტრი / გასუფთავება / სორტირება
   ========================================================================= */
.mobile-filter-button,
.mobile-filter-button *,
.filter-title,
.clear-filter,
.clear-filter *,
.sorting-button,
.sorting-button * {
  font-family: 'BPGGuardianCaps' !important;
}

/* Shop filter labels — Caps: ფასი/შეთავაზებები/პროდუქცია (.filter-title) + დან:/მდე: */
.filter-title,
.filter-title *,
.price-input-label,
.price-input-label * {
  font-family: 'BPGGuardianCaps' !important;
}

/* Bulletproof: shop filter-title Caps (highest specificity to beat any override) */
#category-filter .filter-title,
.category-filter .filter-title,
.shop-filter .filter-title,
.filter-content .filter-title,
h4.filter-title,
h4.filter-title * {
  font-family: 'BPGGuardianCaps' !important;
}

/* "ბლოგი" title — BPGGuardianCaps (homepage carousel + blog page) */
.homepage-blog-row .carousel-header h2,
.blog-title-link,
.blog-title-link *,
.blog-title,
.blog-title * {
  font-family: 'BPGGuardianCaps' !important;
}

/* Search: "ძიება..." placeholder + dropdown "კატეგორიები" — BPGGuardianCaps */
.fs-search-input,
.fs-search-input::placeholder,
.fs-search-input::-webkit-input-placeholder,
.fs-search-input::-moz-placeholder,
.fs-search-input:-ms-input-placeholder,
.fs-dropdown-title {
  font-family: 'BPGGuardianCaps' !important;
}

/* Bulletproof: search placeholder + dropdown "კატეგორიები" Caps (ID-level specificity) */
#fsSearchInput,
#fsMobileSearchInput,
#fsSearchInput::placeholder,
#fsMobileSearchInput::placeholder,
#fsSearchInput::-webkit-input-placeholder,
#fsMobileSearchInput::-webkit-input-placeholder,
#fsSearchInput::-moz-placeholder,
#fsMobileSearchInput::-moz-placeholder,
#fsSearchDropdown .fs-dropdown-title,
#fsMobileSearchDropdown .fs-dropdown-title,
.fs-search-dropdown .fs-dropdown-title {
  font-family: 'BPGGuardianCaps' !important;
}

/* FIX: vendor-prefixed placeholders must be in SEPARATE rules — grouping them
   with standard selectors invalidates the whole rule in Chrome/Firefox. */
#fsSearchInput,
#fsMobileSearchInput,
#fsSearchInput::placeholder,
#fsMobileSearchInput::placeholder,
#fsSearchDropdown .fs-dropdown-title,
#fsMobileSearchDropdown .fs-dropdown-title,
.fs-search-dropdown .fs-dropdown-title {
  font-family: 'BPGGuardianCaps' !important;
}
#fsSearchInput::-webkit-input-placeholder { font-family: 'BPGGuardianCaps' !important; }
#fsMobileSearchInput::-webkit-input-placeholder { font-family: 'BPGGuardianCaps' !important; }
#fsSearchInput::-moz-placeholder { font-family: 'BPGGuardianCaps' !important; }
#fsMobileSearchInput::-moz-placeholder { font-family: 'BPGGuardianCaps' !important; }
#fsSearchInput:-ms-input-placeholder { font-family: 'BPGGuardianCaps' !important; }
#fsMobileSearchInput:-ms-input-placeholder { font-family: 'BPGGuardianCaps' !important; }

/* ==========================================================================
   AX: Caps font (BPGGuardianCaps) for specific storefront text.
   - Product TITLE everywhere: single product page, shop cards, all carousel
     cards, related products, cart / mini-cart / checkout.
   - "წარწერის გრავირებით" engrave badge in product + carousel cards.
   - Product PRICES in product + carousel cards.
   The descendant `*` selectors are required because the global
   `html, body, *, ... { font-family:'BPGGuardian' !important }` rule matches
   inner nodes directly (price <span>/<bdi>, card-title <a>) and would beat
   inherited font. !important + a class selector outranks that global `*`.
   ========================================================================== */
/* --- Product titles: everywhere --- */
.rp-title, .rp-title *,
.card-title, .card-title *,
.carousel-product-title, .carousel-product-title *,
.woocommerce div.product .product_title, .woocommerce div.product .product_title *,
h1.product_title, h1.product_title *,
.woocommerce-cart-form .product-name a,
.woocommerce-mini-cart .mini_cart_item > a:not(.remove),
.woocommerce-checkout-review-order-table .product-name {
  font-family: 'BPGGuardianCaps', sans-serif !important;
}
/* --- Engrave badge (product + carousel cards) --- */
.ax-engrave-note, .ax-engrave-note * {
  font-family: 'BPGGuardianCaps', sans-serif !important;
}
/* --- Prices: EVERYWHERE (cards, single product, cart, mini-cart, checkout,
   totals). .woocommerce-Price-amount is the wrapper WooCommerce puts around
   every rendered price amount, so it covers all contexts; the card/price
   wrappers below are kept explicit for the custom markup. --- */
.woocommerce-Price-amount, .woocommerce-Price-amount *,
.rp-price, .rp-price *,
.card-price, .card-price *,
.carousel-product-price, .carousel-product-price *,
.woocommerce div.product p.price, .woocommerce div.product p.price *,
.woocommerce div.product .summary .price, .woocommerce div.product .summary .price * {
  font-family: 'BPGGuardianCaps', sans-serif !important;
}

/* --- Cart page + mini-cart dropdown prices → Caps.
   These use ≥3-class specificity (0,3,0) to beat the generic BPGGuardian
   price rules (functions.php wp_head inline `.woocommerce-Price-amount` and a
   ~(0,2,2) cart rule) that otherwise win over the (0,1,0) rule above. --- */
.z-item-main .z-item-price .woocommerce-Price-amount,
.z-item-main .z-item-price .woocommerce-Price-amount *,
.z-summary-box .z-summary-total .woocommerce-Price-amount,
.z-summary-box .z-summary-total .woocommerce-Price-amount *,
.fs-cart-dropdown .widget_shopping_cart_content .woocommerce-Price-amount,
.fs-cart-dropdown .widget_shopping_cart_content .woocommerce-Price-amount *,
.fs-cart-dropdown .woocommerce-mini-cart .woocommerce-Price-amount,
.fs-cart-dropdown .woocommerce-mini-cart .woocommerce-Price-amount *,
.fs-cart-wrapper .woocommerce-mini-cart__total .woocommerce-Price-amount,
.fs-cart-wrapper .woocommerce-mini-cart__total .woocommerce-Price-amount * {
  font-family: 'BPGGuardianCaps', sans-serif !important;
}

/* --- Cart page text → Caps: header ("შენს კალათაში X ნივთია"), summary total
   label ("ჯამური ფასი") and product title. The cart template (template-cart.php)
   has a blanket inline rule `body.page-template-template-cart.woocommerce-cart *
   { font-family:BPGGuardian !important }` at specificity (0,2,1), so these
   overrides carry the same body prefix to reach (0,3,1) and win. --- */
body.page-template-template-cart.woocommerce-cart .z-cart-header,
body.page-template-template-cart.woocommerce-cart .z-cart-header *,
body.page-template-template-cart.woocommerce-cart .z-summary-total,
body.page-template-template-cart.woocommerce-cart .z-summary-total *,
body.page-template-template-cart.woocommerce-cart .z-item-title,
body.page-template-template-cart.woocommerce-cart a.z-item-title,
body.page-template-template-cart.woocommerce-cart .z-empty h2,
body.page-template-template-cart.woocommerce-cart .z-empty .z-btn {
  font-family: 'BPGGuardianCaps', sans-serif !important;
}
/* --- Checkout: billing + order-review headings → Caps.
   (Checkout product name already Caps via the product-title rule.) --- */
.woocommerce-billing-fields h3,
#order_review_heading {
  font-family: 'BPGGuardianCaps', sans-serif !important;
}
/* --- Checkout: field labels (name, surname, phone, email, country, city,
   shipping address, additional info) + the whole order-review table
   (product name/total, subtotal, shipping, total) → Caps. --- */
.woocommerce-billing-fields label,
.woocommerce-additional-fields label,
.woocommerce-checkout .form-row.notes label,
.woocommerce-checkout-review-order-table,
.woocommerce-checkout-review-order-table *,
/* price amounts need (0,2,0) to beat the wp_head inline .woocommerce-Price-amount (0,1,0) */
.woocommerce-checkout-review-order-table .woocommerce-Price-amount,
.woocommerce-checkout-review-order-table .woocommerce-Price-amount * {
  font-family: 'BPGGuardianCaps', sans-serif !important;
}

/* --- Mobile cart bar price → Caps. (0,2,0) on the inner .woocommerce-Price-amount
   to beat the wp_head inline .woocommerce-Price-amount (0,1,0). --- */
.ax-mobile-cart-bar-amount,
.ax-mobile-cart-bar-amount *,
.ax-mobile-cart-bar-amount .woocommerce-Price-amount,
.ax-mobile-cart-bar-amount .woocommerce-Price-amount * {
  font-family: 'BPGGuardianCaps', sans-serif !important;
}

/* --- Blog card title → Caps --- */
.blog-card-title,
.blog-card-title * {
  font-family: 'BPGGuardianCaps', sans-serif !important;
}

/* --- Shop "no products found" heading + button → Caps --- */
.no-products-found h2,
.no-products-found .button,
.no-products-found .button * {
  font-family: 'BPGGuardianCaps', sans-serif !important;
}

/* --- Quantity number (input) → Caps everywhere. The body-prefixed selector
   beats the cart template's blanket rule (0,2,1). --- */
.mini-qty-input,
input.qty,
body.page-template-template-cart.woocommerce-cart .mini-qty-input {
  font-family: 'BPGGuardianCaps', sans-serif !important;
}
/* Mini-cart dropdown lives inside .fs-header-wrapper, whose inline rule
   `.fs-header-wrapper *` (0,1,1) forces BPGGuardian — need (0,2,0) to win. */
.fs-cart-dropdown .mini-qty-input,
.fs-cart-wrapper .mini-qty-input,
.woocommerce-mini-cart .mini-qty-input,
.widget_shopping_cart_content .mini-qty-input {
  font-family: 'BPGGuardianCaps', sans-serif !important;
}