/*
 * OnLimit.Shop — "Elevated Agrarian" Design System
 * Override layer — loaded AFTER main.css
 * Rollback: remove the <link> in css.blade.php or git reset --hard 0d03d3d
 *
 * Design tokens from DESIGN.md:
 *   Primary  #2a6c17   Secondary  #b22200
 *   Surface  #f5f7f0   Dark text  #101c2a
 */

/* ===================================================================
   0. Google Fonts
   =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ===================================================================
   1. CSS Custom Properties
   =================================================================== */
:root {
    /* Brand palette */
    --ol-primary:       #2a6c17;
    --ol-primary-light: #6eb356;
    --ol-primary-rgb:   42,108,23;
    --ol-secondary:     #b22200;
    --ol-secondary-rgb: 178,34,0;

    /* Surfaces */
    --ol-surface:       #f5f7f0;
    --ol-surface-alt:   #eef2e8;
    --ol-surface-card:  #ffffff;

    /* Text */
    --ol-dark:          #101c2a;
    --ol-body:          #3a4a3a;
    --ol-muted:         #6b7c6b;

    /* Shadows & effects */
    --ol-shadow:        0px 12px 32px rgba(16,28,42,0.06);
    --ol-shadow-hover:  0px 16px 40px rgba(16,28,42,0.10);
    --ol-glass-bg:      rgba(255,255,255,0.80);
    --ol-glass-blur:    20px;

    /* Radii */
    --ol-radius-sm:     0.75rem;   /* 12px */
    --ol-radius-md:     1.5rem;    /* 24px — rounded-md */
    --ol-radius-lg:     2rem;      /* 32px — rounded-lg for cards */
    --ol-radius-full:   9999px;    /* pill buttons */

    /* Spacing base */
    --ol-space-base:    1rem;      /* 16px */

    /* Typography */
    --ol-font-serif:    'Newsreader', Georgia, 'Times New Roman', serif;
    --ol-font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Gradient */
    --ol-gradient-primary: linear-gradient(135deg, #2a6c17 0%, #6eb356 100%);
    --ol-gradient-primary-hover: linear-gradient(135deg, #1f5212 0%, #5a9e44 100%);
}

/* ===================================================================
   2. Global Reset & Typography
   =================================================================== */

/* Body */
body {
    font-family: var(--ol-font-sans) !important;
    color: var(--ol-dark) !important;
    background-color: var(--ol-surface) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* All headings → Newsreader serif */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.gshop-title,
.section-title h4,
.section-title h2 {
    font-family: var(--ol-font-serif) !important;
    color: var(--ol-dark) !important;
}

/* No pure black anywhere */
.text-dark, .text-black {
    color: var(--ol-dark) !important;
}

p, li, span, a, label, td, th, div {
    /* Only where color was explicitly #000 */
}

/* Mark elements (used in headings) */
mark, .text-secondary, .gshop-subtitle {
    color: var(--ol-secondary) !important;
}

/* ===================================================================
   3. Buttons — Gradient Primary, Rounded-Full
   =================================================================== */

.btn-primary,
a.btn-primary,
button.btn-primary {
    background: var(--ol-gradient-primary) !important;
    border: none !important;
    border-radius: var(--ol-radius-full) !important;
    color: #fff !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 14px rgba(42,108,23,0.25) !important;
    transition: all 0.3s ease !important;
    padding: 0.625rem 1.75rem !important;
}

.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
.btn-primary:focus {
    background: var(--ol-gradient-primary-hover) !important;
    box-shadow: 0 6px 20px rgba(42,108,23,0.35) !important;
    transform: translateY(-1px);
}

/* Secondary buttons (Add to Cart, etc.) */
.btn-secondary,
a.btn-secondary,
button.btn-secondary {
    background: var(--ol-secondary) !important;
    border: none !important;
    border-radius: var(--ol-radius-full) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(178,34,0,0.20) !important;
    transition: all 0.3s ease !important;
}

.btn-secondary:hover,
a.btn-secondary:hover,
button.btn-secondary:hover {
    background: #8f1b00 !important;
    box-shadow: 0 6px 20px rgba(178,34,0,0.30) !important;
    transform: translateY(-1px);
}

/* Outline secondary → outline with rounded-full */
.btn-outline-secondary,
a.btn-outline-secondary {
    border: 2px solid var(--ol-primary) !important;
    color: var(--ol-primary) !important;
    background: transparent !important;
    border-radius: var(--ol-radius-full) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.btn-outline-secondary:hover,
a.btn-outline-secondary:hover {
    background: var(--ol-gradient-primary) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(42,108,23,0.25) !important;
    transform: translateY(-1px);
}

/* ===================================================================
   4. Header / Navbar — Glassmorphism
   =================================================================== */

/* Top bar — keep brand-colored but soften */
.gheader .ghead-topbar,
.gheader .ghead-topbar.bg-primary {
    background: var(--ol-primary) !important;
}

/* Main navigation — glassmorphic */
.gheader .gshop-header-mid,
.gheader .header-mid-area,
header.gheader {
    transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

/* When header is sticky / scrolled */
.gheader.header-sticky.sticky,
header.gheader.sticky {
    background: var(--ol-glass-bg) !important;
    backdrop-filter: blur(var(--ol-glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--ol-glass-blur)) !important;
    box-shadow: var(--ol-shadow) !important;
    border-bottom: none !important;
}

/* Navigation links */
.gheader .gshop_header_nav .nav-link,
.gheader .header-mid-area a {
    color: var(--ol-dark) !important;
    font-weight: 500;
    transition: color 0.2s ease;
}

.gheader .gshop_header_nav .nav-link:hover,
.gheader .gshop_header_nav .nav-link.active {
    color: var(--ol-primary) !important;
}

/* Search bar */
.gshop_search .search-form,
.header-search-form {
    border-radius: var(--ol-radius-full) !important;
    border: 2px solid var(--ol-surface-alt) !important;
    overflow: hidden;
    box-shadow: none !important;
}

.gshop_search .search-form:focus-within,
.header-search-form:focus-within {
    border-color: var(--ol-primary) !important;
    box-shadow: 0 0 0 3px rgba(42,108,23,0.10) !important;
}

/* ===================================================================
   5. Product Cards — Rounded, No Borders, Ambient Shadow
   =================================================================== */

.vertical-product-card {
    border-radius: var(--ol-radius-lg) !important;
    border: none !important;
    background: var(--ol-surface-card) !important;
    box-shadow: var(--ol-shadow) !important;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.vertical-product-card:hover {
    box-shadow: var(--ol-shadow-hover) !important;
    transform: translateY(-4px);
}

/* Product card thumbnail area */
.vertical-product-card .thumbnail {
    background: var(--ol-surface) !important;
    border-radius: var(--ol-radius-lg) var(--ol-radius-lg) 0 0 !important;
    border: none !important;
}

.vertical-product-card .thumbnail img {
    border-radius: var(--ol-radius-md) !important;
    transition: transform 0.4s ease;
}

.vertical-product-card:hover .thumbnail img {
    transform: scale(1.03);
}

/* Card content padding */
.vertical-product-card .card-content {
    padding: 1rem 1.25rem !important;
}

/* Card title */
.vertical-product-card .card-title {
    font-family: var(--ol-font-sans) !important;
    color: var(--ol-dark) !important;
    font-weight: 600 !important;
}

/* Card price — glassmorphic pill */
.vertical-product-card .price {
    display: inline-block;
    background: rgba(42,108,23,0.08);
    padding: 0.25rem 0.75rem;
    border-radius: var(--ol-radius-full);
    color: var(--ol-primary) !important;
    font-weight: 700 !important;
    font-size: 1rem;
}

.vertical-product-card .price .old-price,
.vertical-product-card .price del {
    color: var(--ol-muted) !important;
}

/* Card "Add to Cart" button area */
.vertical-product-card .card-btn {
    padding: 0 1.25rem 1.25rem !important;
    background: transparent !important;
    border-top: none !important;
}

.vertical-product-card .card-btn .btn {
    border-radius: var(--ol-radius-full) !important;
}

/* Offer badge */
.vertical-product-card .offer-badge {
    border-radius: 0 0 var(--ol-radius-sm) 0 !important;
    z-index: 2;
}

/* Quick action buttons on product cards */
.vertical-product-card .product-btns .rounded-btn {
    background: var(--ol-glass-bg) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(16,28,42,0.08) !important;
    border-radius: 50% !important;
    transition: all 0.2s ease;
}

.vertical-product-card .product-btns .rounded-btn:hover {
    background: var(--ol-primary) !important;
    color: #fff !important;
}

.vertical-product-card .product-btns .rounded-btn:hover i {
    color: #fff !important;
}

/* Horizontal product card */
.horizontal-product-card {
    border-radius: var(--ol-radius-md) !important;
    border: none !important;
    box-shadow: var(--ol-shadow) !important;
    overflow: hidden;
}

/* ===================================================================
   6. Category Section — Rounded, Tonal Backgrounds
   =================================================================== */

.gshop-category-box {
    border: none !important;
    background: var(--ol-surface-card) !important;
    border-radius: var(--ol-radius-lg) !important;
    box-shadow: var(--ol-shadow) !important;
    padding: 2.5rem !important;
}

.gshop-animated-iconbox {
    border: none !important;
    border-radius: var(--ol-radius-md) !important;
    background: var(--ol-surface) !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
}

.gshop-animated-iconbox:hover {
    background: var(--ol-surface-alt) !important;
    box-shadow: var(--ol-shadow) !important;
    transform: translateY(-4px);
}

.gshop-animated-iconbox.color-2 {
    background: var(--ol-surface-alt) !important;
}

.gshop-animated-iconbox .animated-icon {
    background: rgba(42,108,23,0.08) !important;
    border: none !important;
}

.gshop-animated-iconbox .explore-btn {
    background: var(--ol-primary) !important;
    color: #fff !important;
    border-radius: var(--ol-radius-sm) !important;
}

/* Category listing page */
.gshop-category-section {
    background: var(--ol-surface) !important;
}

/* ===================================================================
   7. Hero Section
   =================================================================== */

.gshop-hero {
    background: var(--ol-surface) !important;
}

.gshop-hero .hero-left-content h1,
.gshop-hero .display-4 {
    font-family: var(--ol-font-serif) !important;
    color: var(--ol-dark) !important;
    font-weight: 700;
}

.gshop-hero .gshop-subtitle {
    font-family: var(--ol-font-serif) !important;
    color: var(--ol-secondary) !important;
    font-style: italic;
}

/* ===================================================================
   8. Sections — Remove Dividers, Tonal Shifts, Spacing
   =================================================================== */

/* Remove all section border/divider lines */
section {
    border-top: none !important;
    border-bottom: none !important;
}

/* Alternate section backgrounds for visual separation */
.gshop-category-section,
.best-deal-section,
.feedback-section,
.blog-section {
    background: var(--ol-surface) !important;
}

.featured-product-section,
.trending-product-section,
.gshop-products-section {
    background: #fff !important;
}

/* Remove the curve separator between sections */
.footer-curve,
.section-curve-wrapper {
    display: none !important;
}

/* Generous section spacing */
section,
.pt-120 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

/* Gradient spacer in footer → subtle tonal line */
.gradient-spacer {
    background: rgba(255,255,255,0.10) !important;
    height: 1px !important;
    border: none !important;
}

/* ===================================================================
   9. Footer
   =================================================================== */

.gshop-footer {
    background: var(--ol-dark) !important;
    border-top: none !important;
}

.gshop-footer h5,
.gshop-footer .text-white {
    font-family: var(--ol-font-serif) !important;
}

.gshop-footer .footer-nav a {
    color: rgba(255,255,255,0.65) !important;
    transition: color 0.2s ease;
}

.gshop-footer .footer-nav a:hover {
    color: var(--ol-primary-light) !important;
}

.gshop-footer .subscribe_form {
    border-radius: var(--ol-radius-full) !important;
    overflow: hidden;
    box-shadow: var(--ol-shadow) !important;
}

.gshop-footer .subscribe_form .btn {
    border-radius: 0 var(--ol-radius-full) var(--ol-radius-full) 0 !important;
}

/* ===================================================================
   10. Breadcrumb
   =================================================================== */

.breadcrumb-section,
.gshop-breadcrumb {
    background: var(--ol-surface-alt) !important;
    border: none !important;
    border-radius: 0 !important;
}

.breadcrumb-section h1,
.breadcrumb-section h2,
.breadcrumb-section h3,
.breadcrumb-section .breadcrumb-title {
    font-family: var(--ol-font-serif) !important;
}

/* ===================================================================
   11. Blog Cards
   =================================================================== */

.blog-card,
.gshop-blog-card,
.blog-post-card {
    border-radius: var(--ol-radius-lg) !important;
    border: none !important;
    box-shadow: var(--ol-shadow) !important;
    overflow: hidden;
    background: var(--ol-surface-card) !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.blog-card:hover,
.gshop-blog-card:hover,
.blog-post-card:hover {
    box-shadow: var(--ol-shadow-hover) !important;
    transform: translateY(-4px);
}

.blog-card img,
.gshop-blog-card img {
    border-radius: var(--ol-radius-lg) var(--ol-radius-lg) 0 0 !important;
}

/* ===================================================================
   12. Contact & About Pages
   =================================================================== */

.contact-form,
.contact-form-wrap {
    border-radius: var(--ol-radius-lg) !important;
    border: none !important;
    box-shadow: var(--ol-shadow) !important;
    background: var(--ol-surface-card) !important;
    padding: 2rem !important;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    border-radius: var(--ol-radius-sm) !important;
    border: 2px solid var(--ol-surface-alt) !important;
    transition: border-color 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: var(--ol-primary) !important;
    box-shadow: 0 0 0 3px rgba(42,108,23,0.10) !important;
}

/* ===================================================================
   13. General Cards & Containers
   =================================================================== */

.card,
.rounded-2,
.rounded-3 {
    border: none !important;
}

/* Override Bootstrap card */
.card {
    border-radius: var(--ol-radius-md) !important;
    box-shadow: var(--ol-shadow) !important;
    border: none !important;
    background: var(--ol-surface-card) !important;
}

/* Swiper slides that contain product cards */
.swiper-slide .vertical-product-card {
    margin: 0.5rem !important;
}

/* ===================================================================
   14. Forms & Inputs (site-wide)
   =================================================================== */

.form-control,
.form-select {
    border-radius: var(--ol-radius-sm) !important;
    border: 2px solid var(--ol-surface-alt) !important;
    color: var(--ol-dark) !important;
    font-family: var(--ol-font-sans) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ol-primary) !important;
    box-shadow: 0 0 0 3px rgba(42,108,23,0.10) !important;
}

/* ===================================================================
   15. Checkout & Cart
   =================================================================== */

.cart-table,
.checkout-card,
.order-summary {
    border-radius: var(--ol-radius-md) !important;
    border: none !important;
    box-shadow: var(--ol-shadow) !important;
    background: var(--ol-surface-card) !important;
}

/* ===================================================================
   16. Campaign / Deal Banners
   =================================================================== */

.banner-card,
.gshop-banner,
.deal-banner,
.best-deal-card {
    border-radius: var(--ol-radius-lg) !important;
    overflow: hidden;
    border: none !important;
}

/* ===================================================================
   17. Badges & Tags
   =================================================================== */

.badge {
    border-radius: var(--ol-radius-full) !important;
    font-weight: 600 !important;
}

.badge.bg-primary,
.badge-primary {
    background: var(--ol-primary) !important;
}

.badge.bg-danger {
    background: var(--ol-secondary) !important;
}

/* ===================================================================
   18. Pagination
   =================================================================== */

.pagination .page-link {
    border-radius: var(--ol-radius-sm) !important;
    border: none !important;
    color: var(--ol-dark) !important;
    font-weight: 500;
    margin: 0 2px;
    transition: all 0.2s ease;
}

.pagination .page-item.active .page-link,
.pagination .page-link:hover {
    background: var(--ol-primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(42,108,23,0.20);
}

/* ===================================================================
   19. Modals (Quick View, etc.)
   =================================================================== */

.modal-content {
    border-radius: var(--ol-radius-lg) !important;
    border: none !important;
    box-shadow: 0 24px 64px rgba(16,28,42,0.12) !important;
    overflow: hidden;
}

.modal-header {
    border-bottom: none !important;
    background: var(--ol-surface) !important;
}

.modal-footer {
    border-top: none !important;
    background: var(--ol-surface) !important;
}

/* ===================================================================
   20. Scrollbar & Misc
   =================================================================== */

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--ol-surface);
}
::-webkit-scrollbar-thumb {
    background: rgba(42,108,23,0.25);
    border-radius: var(--ol-radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--ol-primary);
}

/* Scroll-to-top button */
.scroll-top-btn {
    background: var(--ol-gradient-primary) !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(42,108,23,0.30) !important;
    color: #fff !important;
}

/* ===================================================================
   21. Bootstrap Overrides for Brand Colors
   =================================================================== */

.bg-primary {
    background-color: var(--ol-primary) !important;
}

.bg-secondary {
    background-color: var(--ol-secondary) !important;
}

.text-primary {
    color: var(--ol-primary) !important;
}

.text-secondary {
    color: var(--ol-secondary) !important;
}

.border-primary {
    border-color: var(--ol-primary) !important;
}

.border-secondary {
    border-color: var(--ol-secondary) !important;
}

/* ===================================================================
   22. Quick View Modal Product Details
   =================================================================== */

.product-detail-section,
.product-details-wrap {
    background: var(--ol-surface) !important;
}

.product-detail-section .product-title,
.product-details-wrap h2 {
    font-family: var(--ol-font-serif) !important;
    color: var(--ol-dark) !important;
}

/* ===================================================================
   23. Product Listing / Filtering Sidebar
   =================================================================== */

.product-filter-sidebar,
.sidebar-filter,
.shop-sidebar {
    border-radius: var(--ol-radius-md) !important;
    border: none !important;
    box-shadow: var(--ol-shadow) !important;
    background: var(--ol-surface-card) !important;
    padding: 1.5rem !important;
}

/* ===================================================================
   24. Offcanvas Menu (Mobile)
   =================================================================== */

.offcanvas {
    border: none !important;
}

.offcanvas-body {
    background: var(--ol-surface-card) !important;
}

.offcanvas-header {
    background: var(--ol-surface) !important;
    border-bottom: none !important;
}

/* ===================================================================
   25. Feedback / Testimonial Section
   =================================================================== */

.feedback-card,
.testimonial-card {
    border-radius: var(--ol-radius-lg) !important;
    border: none !important;
    background: var(--ol-surface-card) !important;
    box-shadow: var(--ol-shadow) !important;
    padding: 2rem !important;
}

/* ===================================================================
   26. Company / Seller Cards
   =================================================================== */

.seller-card,
.company-card,
.brand-card {
    border-radius: var(--ol-radius-lg) !important;
    border: none !important;
    background: var(--ol-surface-card) !important;
    box-shadow: var(--ol-shadow) !important;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.seller-card:hover,
.company-card:hover,
.brand-card:hover {
    box-shadow: var(--ol-shadow-hover) !important;
    transform: translateY(-4px);
}

/* ===================================================================
   27. Bottom Mobile Toolbar
   =================================================================== */

.bottom-toolbar,
.gshop-bottom-toolbar {
    background: var(--ol-glass-bg) !important;
    backdrop-filter: blur(var(--ol-glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--ol-glass-blur)) !important;
    border-top: none !important;
    box-shadow: 0 -4px 20px rgba(16,28,42,0.06) !important;
}

/* ===================================================================
   28. Progress Bar (Deals)
   =================================================================== */

.card-progressbar {
    background: var(--ol-surface-alt) !important;
    border-radius: var(--ol-radius-full) !important;
    overflow: hidden;
}

.card-progressbar .card-progress,
.card-progressbar .bg-primary {
    background: var(--ol-gradient-primary) !important;
    border-radius: var(--ol-radius-full) !important;
}

/* ===================================================================
   29. Dropdown Menus
   =================================================================== */

.dropdown-menu {
    border-radius: var(--ol-radius-md) !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(16,28,42,0.10) !important;
    overflow: hidden;
    padding: 0.5rem !important;
}

.dropdown-item {
    border-radius: var(--ol-radius-sm) !important;
    transition: background-color 0.15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--ol-surface) !important;
    color: var(--ol-primary) !important;
}

/* ===================================================================
   30. Toasts & Notifications
   =================================================================== */

.toast {
    border-radius: var(--ol-radius-md) !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(16,28,42,0.12) !important;
}

/* ===================================================================
   31. Animations
   =================================================================== */

@keyframes olFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation disabled — caused invisible cards in some browsers */
.vertical-product-card,
.gshop-animated-iconbox,
.blog-card,
.gshop-blog-card {
    opacity: 1 !important;
}

/* ===================================================================
   32. Print Styles
   =================================================================== */

@media print {
    body {
        background: #fff !important;
    }
    .gheader, .gshop-footer, .bottom-toolbar, .scroll-top-btn {
        display: none !important;
    }
}

/* ===================================================================
   33. Responsive Adjustments
   =================================================================== */

@media (max-width: 767.98px) {
    section, .pt-120 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .vertical-product-card {
        border-radius: var(--ol-radius-md) !important;
    }

    .gshop-category-box {
        padding: 1.5rem !important;
        border-radius: var(--ol-radius-md) !important;
    }

    .modal-content {
        border-radius: var(--ol-radius-md) !important;
    }
}

/* ===================================================================
   34. Transition smoothing
   =================================================================== */

a, button, .btn, input, select, textarea,
.vertical-product-card, .gshop-animated-iconbox,
.card, .blog-card, .badge {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===================================================================
   35. Product Cards — Elevated Agrarian Design
   Always-visible "Add to Cart", no hover-only reveal.
   =================================================================== */

/* Override main.css hover-only card-btn: make it always visible, in-flow */
.vertical-product-card .card-btn {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    padding: 0 1.25rem 1.25rem !important;
    background: transparent !important;
    border-top: none !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    z-index: 1 !important;
}

/* Button style — primary gradient per DESIGN.md */
.vertical-product-card .card-btn .btn {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    border-radius: 999px !important;            /* rounded-full per design system */
    background: linear-gradient(135deg, #2a6c17, #6eb356) !important;
    border: none !important;
    color: #fff !important;
    font-family: var(--ol-font-sans, Inter, sans-serif) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    padding: 0.65rem 1.5rem !important;
    transition: box-shadow 0.3s ease, transform 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(42, 108, 23, 0.25) !important;
    letter-spacing: 0.01em;
}

.vertical-product-card .card-btn .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(42, 108, 23, 0.35) !important;
}

/* Out of Stock button — muted style */
.vertical-product-card .card-btn .btn:only-child:not(.add-to-cart-text):not([onclick*="showProductDetailsModal"]) {
    background: #e2e8f0 !important;
    color: #64748b !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

/* Card layout: flex column so card-btn sits at bottom */
.vertical-product-card {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}

.vertical-product-card .card-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0.75rem 1.25rem !important;
}

/* Thumbnail fixed height for consistency */
.vertical-product-card .thumbnail {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 220px !important;
    overflow: hidden !important;
    padding: 0.75rem !important;
}

.vertical-product-card .thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: var(--ol-radius-md, 1.5rem) !important;
}

/* Price — glassmorphic pill per DESIGN.md */
.vertical-product-card .price {
    display: inline-block !important;
    background: rgba(42,108,23,0.08) !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 999px !important;
    color: var(--ol-primary, #2a6c17) !important;
    font-weight: 700 !important;
}

/* Campaign/trending grid equal heights */
.trending-products-area .col-xxl-3,
.trending-products-area .col-lg-4,
.trending-products-area .col-md-6,
.trending-products-area .col-sm-10 {
    display: flex !important;
}

.trending-products-area .vertical-product-card {
    width: 100% !important;
    height: 100% !important;
}

/* Campaign thumbnail images */
.trending-products-area .vertical-product-card .thumbnail img,
.tt-campaigns .vertical-product-card .thumbnail img {
    max-height: 200px !important;
    object-fit: contain !important;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .vertical-product-card .thumbnail {
        height: 180px !important;
    }
    .vertical-product-card .card-btn {
        padding: 0.5rem 1rem 1rem !important;
    }
    .vertical-product-card .card-btn .btn {
        font-size: 0.85rem !important;
        padding: 0.6rem 1rem !important;
    }
}

/* Disable the hover-only reveal from main.css */
.vertical-product-card:hover .card-btn {
    opacity: 1 !important;
    visibility: visible !important;
}

/* === Related products on product detail page === */
.related-product-slider .swiper-slide {
    max-width: 280px !important;
    width: 280px !important;
}
.related-product-slider .vertical-product-card {
    max-width: 280px !important;
}
/* If only 1 product, center it */
.related-product-slider .swiper-wrapper {
    justify-content: center;
}

/* === Discount badge smaller === */
.offer-badge {
    font-size: 9px !important;
    padding: 5px 10px !important;
    border-radius: 0 0 8px 0 !important;
}

/* === Image placeholder: show logo while loading === */
.vertical-product-card .thumbnail,
.trending-product-card .thumbnail,
.horizontal-product-card .thumbnail {
    background-image: url('/uploads/media/lvKHhoY1lEqcAHlMH3gsmjAAxQQIy5CVTOtHRX2q.png');
    background-size: 40%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f5f7f0;
}
.swiper-slide {
    background-color: #f5f7f0;
}

/* === Force category dropdown to work === */
.category-dropdown-box.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    top: 40px !important;
    z-index: 9999 !important;
}



/* ===================================================================
   Campaign Index — Card with product previews
   =================================================================== */
.tt-campaign-card {
    border-radius: 16px;
    background: var(--ol-surface-card, #fff);
    box-shadow: 0 4px 24px rgba(16, 28, 42, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}
.tt-campaign-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(16, 28, 42, 0.14);
}

/* Banner area */
.tt-campaign-banner {
    position: relative;
    min-height: 200px;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
}
.tt-campaign-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.15) 100%);
    z-index: 0;
}
.tt-campaign-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.tt-campaign-title {
    font-family: var(--ol-font-serif, 'Newsreader', serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.tt-campaign-discount {
    display: inline-block;
    background: #ff0406;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}

/* Timer */
.tt-campaign-banner .countdown-timer {
    position: relative;
    z-index: 1;
    list-style: none;
    padding: 0;
    margin: 0;
}
/* Timer items — override main.css white background */
.tt-campaign-banner .timing-countdown li {
    background: rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    min-width: 48px !important;
    height: auto !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}
.tt-campaign-banner .timing-countdown li::before {
    display: none !important;
}
.tt-campaign-banner .timing-countdown li h5,
.tt-campaign-banner .timing-countdown li .h5,
.tt-campaign-banner .timing-countdown li span {
    color: #fff !important;
}
.tt-campaign-banner .timing-countdown li h5,
.tt-campaign-banner .timing-countdown li .h5 {
    font-size: 1.1rem !important;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
}
.tt-campaign-banner .timing-countdown li .gshop-subtitle,
.tt-campaign-banner .tt-timer-label {
    color: rgba(255,255,255,0.7) !important;
    font-size: 0.6rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-top: 0 !important;
}

/* Product preview strip */
.tt-campaign-products {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--ol-surface-card, #fff);
}
.tt-campaign-thumbs {
    display: flex;
    gap: 8px;
}
.tt-campaign-thumb {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--ol-surface, #f5f7f0);
    flex-shrink: 0;
}
.tt-campaign-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}
.tt-thumb-badge {
    position: absolute;
    top: 2px;
    left: 2px;
    background: #ff0406;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 4px;
    line-height: 1.3;
}
.tt-campaign-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.tt-product-count {
    font-size: 0.8rem;
    color: var(--ol-muted, #64748b);
    font-weight: 500;
}
.tt-campaign-cta {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ol-primary, #2a6c17);
}
.tt-campaign-card:hover .tt-campaign-cta {
    text-decoration: underline;
}

/* Mobile */
@media (max-width: 575px) {
    .tt-campaign-banner {
        min-height: 160px;
        padding: 16px;
    }
    .tt-campaign-title {
        font-size: 1.1rem;
    }
    .tt-campaign-thumb {
        width: 44px;
        height: 44px;
    }
    .tt-campaign-products {
        padding: 10px 14px;
    }
}

/* ===================================================================
   DARK MODE — Override all hardcoded light colors
   =================================================================== */
[data-bs-theme="dark"] {
    --ol-surface:       #1e293b;
    --ol-surface-alt:   #243247;
    --ol-surface-card:  #2a3a50;
    --ol-dark:          #e2e8f0;
    --ol-body:          #cbd5e1;
    --ol-muted:         #94a3b8;
    --ol-shadow:        0px 12px 32px rgba(0,0,0,0.25);
    --ol-shadow-hover:  0px 16px 40px rgba(0,0,0,0.35);
    --ol-glass-bg:      rgba(30,41,59,0.85);
}

/* Body & page backgrounds */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .main-wrapper {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Cards: product cards, campaign cards, any .olCard, .card */
[data-bs-theme="dark"] .vertical-product-card,
[data-bs-theme="dark"] .trending-product-card,
[data-bs-theme="dark"] .horizontal-product-card,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .tt-campaign-card,
[data-bs-theme="dark"] .tt-campaign-products {
    background: var(--ol-surface-card) !important;
    color: #e2e8f0 !important;
}

/* Card content text */
[data-bs-theme="dark"] .card-title,
[data-bs-theme="dark"] .vertical-product-card .card-title,
[data-bs-theme="dark"] .vertical-product-card .card-content {
    color: #e2e8f0 !important;
}

/* Card button area */
[data-bs-theme="dark"] .vertical-product-card .card-btn {
    background: transparent !important;
}

/* Thumbnail backgrounds */
[data-bs-theme="dark"] .vertical-product-card .thumbnail,
[data-bs-theme="dark"] .trending-product-card .thumbnail,
[data-bs-theme="dark"] .horizontal-product-card .thumbnail {
    background-color: #243247 !important;
    background-image: none !important;
}

/* Sections with light backgrounds */
[data-bs-theme="dark"] .featured-product-section,
[data-bs-theme="dark"] .trending-products-area,
[data-bs-theme="dark"] .tt-campaigns,
[data-bs-theme="dark"] section {
    background-color: transparent !important;
}
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light {
    background-color: var(--ol-surface-card) !important;
}

/* Header & topbar */
[data-bs-theme="dark"] .gheader {
    background: #1e293b !important;
}
[data-bs-theme="dark"] .ghead-topbar {
    background: #162032 !important;
}
[data-bs-theme="dark"] .ghead-navbar {
    background: var(--ol-surface-card) !important;
}

/* Category dropdown */
[data-bs-theme="dark"] .category-dropdown-box {
    background: var(--ol-surface-card) !important;
}
[data-bs-theme="dark"] .category-dropdown-box a {
    color: #e2e8f0 !important;
}

/* Search */
[data-bs-theme="dark"] .search-form input,
[data-bs-theme="dark"] .search-bar input {
    background: #243247 !important;
    color: #e2e8f0 !important;
    border-color: #3a4a64 !important;
}

/* Hero/banner sections */
[data-bs-theme="dark"] .gshop-hero-section,
[data-bs-theme="dark"] .hero-slider-section {
    background: #1e293b !important;
}

/* Footer */
[data-bs-theme="dark"] .gshop-footer {
    background: #162032 !important;
}
[data-bs-theme="dark"] .gshop-footer .footer-widget h5,
[data-bs-theme="dark"] .gshop-footer .footer-widget h6 {
    color: #e2e8f0 !important;
}

/* Price styling in dark */
[data-bs-theme="dark"] .vertical-product-card .price {
    background: rgba(110,179,86,0.15) !important;
    color: #8fd47a !important;
}
[data-bs-theme="dark"] .price .text-danger {
    color: #ff6b6b !important;
}

/* Breadcrumb */
[data-bs-theme="dark"] .gstore-breadcrumb {
    background-color: #243247 !important;
}

/* Swiper / carousel backgrounds */
[data-bs-theme="dark"] .swiper-slide {
    background-color: #243247 !important;
}

/* Inputs / form controls */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] input[type="text"],
[data-bs-theme="dark"] input[type="email"],
[data-bs-theme="dark"] input[type="search"],
[data-bs-theme="dark"] textarea {
    background-color: #243247 !important;
    color: #e2e8f0 !important;
    border-color: #3a4a64 !important;
}

/* Modal / offcanvas */
[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .modal-content {
    background: var(--ol-surface-card) !important;
    color: #e2e8f0 !important;
}

/* Product detail modal */
[data-bs-theme="dark"] .quickview-content {
    background: var(--ol-surface-card) !important;
}

/* Text that was forced to dark color */
[data-bs-theme="dark"] .fw-bold,
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .h1, [data-bs-theme="dark"] .h2,
[data-bs-theme="dark"] .h3, [data-bs-theme="dark"] .h4,
[data-bs-theme="dark"] .h5, [data-bs-theme="dark"] .h6 {
    color: #e2e8f0 !important;
}

/* Muted text */
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .gshop-subtitle,
[data-bs-theme="dark"] .fs-xxs {
    color: #94a3b8 !important;
}

/* Links */
[data-bs-theme="dark"] a:not(.btn) {
    color: #8fd47a;
}

/* Tables */
[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] table {
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent !important;
    color: #e2e8f0 !important;
}

/* Checkout & cart sidebar */
[data-bs-theme="dark"] .checkout-sidebar,
[data-bs-theme="dark"] .cart-sidebar {
    background: var(--ol-surface-card) !important;
}

/* Badges and chips */
[data-bs-theme="dark"] .badge {
    color: #fff !important;
}

/* Countdown timer */
[data-bs-theme="dark"] .timing-countdown li::before {
    background-color: #2a3a50 !important;
}
[data-bs-theme="dark"] .timing-countdown li h5,
[data-bs-theme="dark"] .timing-countdown li .h5 {
    color: #e2e8f0 !important;
}

/* Tabs & navs */
[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: #94a3b8 !important;
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background: var(--ol-surface-card) !important;
    color: #e2e8f0 !important;
}

/* Product quick action buttons */
[data-bs-theme="dark"] .vertical-product-card .product-btns .rounded-btn {
    background: rgba(30,41,59,0.85) !important;
}

/* Dividers */
[data-bs-theme="dark"] hr,
[data-bs-theme="dark"] .border-bottom {
    border-color: #3a4a64 !important;
}

/* Select2 */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: #243247 !important;
    border-color: #3a4a64 !important;
    color: #e2e8f0 !important;
}

/* Pagination */
[data-bs-theme="dark"] .page-link {
    background-color: #243247 !important;
    border-color: #3a4a64 !important;
    color: #e2e8f0 !important;
}

/* Campaign card specific */
[data-bs-theme="dark"] .tt-campaign-card {
    box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}
[data-bs-theme="dark"] .tt-campaign-products {
    background: var(--ol-surface-card) !important;
}
[data-bs-theme="dark"] .tt-product-count {
    color: #94a3b8 !important;
}

/* Card "Add to Cart" button in dark — keep green gradient */
[data-bs-theme="dark"] .vertical-product-card .card-btn .btn {
    background: linear-gradient(135deg, #2a6c17, #6eb356) !important;
    color: #fff !important;
}

/* Progress bars backgrounds */
[data-bs-theme="dark"] .card-progressbar {
    background: #3a4a64 !important;
}

/* Preloader overlay */
[data-bs-theme="dark"] #preloader {
    background: #1e293b !important;
}

/* ===================================================================
   Preloader — Logo + 8 animated dots orbiting
   =================================================================== */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f7f0;
    transition: opacity 0.4s ease;
}
[data-bs-theme="dark"] #preloader {
    background: #1e293b;
}
.ol-preloader-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}
.ol-preloader-logo {
    width: 80px;
    height: 80px;
    animation: ol-logo-pulse 2s ease-in-out infinite;
}
.ol-preloader-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@keyframes ol-logo-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: 0.85; }
}

/* 8 dots orbiting in a circle */
.ol-preloader-dots {
    position: relative;
    width: 48px;
    height: 48px;
}
.ol-preloader-dots span {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2a6c17;
    animation: ol-dot-fade 1.2s linear infinite;
}
[data-bs-theme="dark"] .ol-preloader-dots span {
    background: #6eb356;
}
/* Position each dot around a circle (radius 20px, center 20px) */
.ol-preloader-dots span:nth-child(1) { top: 0;    left: 20px; animation-delay: 0s; }
.ol-preloader-dots span:nth-child(2) { top: 6px;  left: 34px; animation-delay: -0.15s; }
.ol-preloader-dots span:nth-child(3) { top: 20px; left: 40px; animation-delay: -0.3s; }
.ol-preloader-dots span:nth-child(4) { top: 34px; left: 34px; animation-delay: -0.45s; }
.ol-preloader-dots span:nth-child(5) { top: 40px; left: 20px; animation-delay: -0.6s; }
.ol-preloader-dots span:nth-child(6) { top: 34px; left: 6px;  animation-delay: -0.75s; }
.ol-preloader-dots span:nth-child(7) { top: 20px; left: 0;    animation-delay: -0.9s; }
.ol-preloader-dots span:nth-child(8) { top: 6px;  left: 6px;  animation-delay: -1.05s; }

@keyframes ol-dot-fade {
    0%, 40%, 100% { opacity: 0.2; transform: scale(0.6); }
    20% { opacity: 1; transform: scale(1); }
}

/* ===================================================================
   Hero Section — Transparent/Glassmorphism
   =================================================================== */
.gshop-hero {
    background: transparent !important;
}
.gshop-hero .gshop-hero-single {
    background: transparent !important;
}
.gshop-hero .hero-left-content {
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 20px;
    padding: 32px;
    border: 1px solid rgba(255,255,255,0.4);
}
[data-bs-theme="dark"] .gshop-hero .hero-left-content {
    background: rgba(30,41,59,0.65);
    border: 1px solid rgba(255,255,255,0.08);
}

/* ===================================================================
   About Us page — Dark mode + Design fixes
   =================================================================== */
[data-bs-theme="dark"] .ab-about-section,
[data-bs-theme="dark"] .about-section,
[data-bs-theme="dark"] .about-us-section,
[data-bs-theme="dark"] .brands-section {
    background-color: #1e293b !important;
}
[data-bs-theme="dark"] .bg-shade {
    background-color: #243247 !important;
}
[data-bs-theme="dark"] .horizontal-counter,
[data-bs-theme="dark"] .horizontal-icon-box,
[data-bs-theme="dark"] .image-box {
    background: var(--ol-surface-card) !important;
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .horizontal-counter h3,
[data-bs-theme="dark"] .horizontal-icon-box h5,
[data-bs-theme="dark"] .image-box h4 {
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .horizontal-counter .text-gray,
[data-bs-theme="dark"] .horizontal-icon-box p,
[data-bs-theme="dark"] .image-box p {
    color: #94a3b8 !important;
}
[data-bs-theme="dark"] .brand-wrapper {
    background: #243247 !important;
}
[data-bs-theme="dark"] .brand-item {
    background: #2a3a50 !important;
}
[data-bs-theme="dark"] .ab-quote {
    background: rgba(42,108,23,0.8) !important;
}

/* About page — Elevated Agrarian design touches */
.horizontal-counter,
.horizontal-icon-box {
    border: none !important;
    box-shadow: var(--ol-shadow) !important;
    border-radius: var(--ol-radius-md) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.horizontal-counter:hover,
.horizontal-icon-box:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--ol-shadow-hover) !important;
}
.image-box {
    border-radius: var(--ol-radius-md) !important;
    border: none !important;
    box-shadow: var(--ol-shadow) !important;
}

/* ===================================================================
   Fix 1: Newsletter email form — dark mode border/rounding fix
   =================================================================== */
.gshop-newsletter .form-control,
.newsletter-form .form-control,
input[name="email"].form-control {
    border-radius: var(--ol-radius-full) !important;
    border: 2px solid rgba(42,108,23,0.2) !important;
    padding: 12px 20px !important;
    background: var(--ol-surface-card, #fff) !important;
    color: var(--ol-dark, #101c2a) !important;
}
[data-bs-theme="dark"] .gshop-newsletter .form-control,
[data-bs-theme="dark"] .newsletter-form .form-control,
[data-bs-theme="dark"] input[name="email"].form-control {
    background: #243247 !important;
    color: #e2e8f0 !important;
    border-color: #3a4a64 !important;
}
.gshop-newsletter .btn,
.newsletter-form .btn {
    border-radius: var(--ol-radius-full) !important;
}

/* ===================================================================
   Fix 2: Mobile toolbar — align search icon with others
   =================================================================== */
@media (max-width: 991px) {
    .mobile-toolbar-item {
        vertical-align: middle !important;
    }
    .gshop-header-search.mobile-toolbar-item {
        vertical-align: middle !important;
    }
    .gshop-header-search .header-icon {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }
    .gshop-header-search .header-icon .mobile-toolbar-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 24px !important;
    }
    .gshop-header-search .header-icon .mobile-toolbar-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
    .mobile-toolbar .d-table-cell {
        vertical-align: bottom !important;
    }
}

/* ===================================================================
   Fix 3: Testimonial/feedback text — transparent background
   =================================================================== */
.gshop-feedback-slider .swiper-slide,
.feedback-slider-2 .swiper-slide,
.gshop-feedback-single,
.feedback-single {
    background: transparent !important;
}
.gshop-feedback-single p,
.feedback-single p,
.gshop-feedback-slider p {
    background: transparent !important;
}
/* The entire feedback/testimonial section */
.feedback-section,
.gshop-feedback-section {
    background: transparent !important;
}
/* Individual testimonial cards — glassmorphism */
.gshop-feedback-single,
.feedback-single,
.gshop-feedback-card {
    background: rgba(255,255,255,0.5) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: var(--ol-radius-lg) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    padding: 24px !important;
}
[data-bs-theme="dark"] .gshop-feedback-single,
[data-bs-theme="dark"] .feedback-single,
[data-bs-theme="dark"] .gshop-feedback-card {
    background: rgba(30,41,59,0.5) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* ===================================================================
   Fix 4: Top-Kategorien heading — transparent background
   =================================================================== */
.top-category-section h4.bg-white,
h4.bg-white,
.section-title h4.bg-white {
    background: transparent !important;
}
[data-bs-theme="dark"] .top-category-section h4,
[data-bs-theme="dark"] h4.d-inline-block.bg-white {
    background: transparent !important;
    color: #e2e8f0 !important;
}