/*
Theme Name: Aura Suits Pro
Theme URI: https://dosanitechnologies.com
Description: Proprietary high-speed, conversion-optimized ladies fashion eCommerce engine with full WooCommerce support, animated hero slider, AJAX cart, and zero-config setup.
Version: 5.5.0
Author: Dosani Technologies
Author URI: https://dosanitechnologies.com
Text Domain: ladies-expo-pro
Requires PHP: 7.4
*/

/* =========================================================
   0. ROOT VARIABLES & RESET
========================================================= */
:root {
    --primary-gold: #D4AF37;
    --royal-pink: #E91E63;
    --royal-pink-dark: #C1134E;
    --dark-slate: #2C3E50;
    --clean-white: #FAFAFA;
    --text-grey: #6b7280;
    --border-light: #eee;
    --container-width: 1240px;
    --radius: 10px;
    --shadow-soft: 0 8px 24px rgba(44, 62, 80, 0.08);
    --shadow-hover: 0 20px 40px rgba(233, 30, 99, 0.15);
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    --transition-fast: 0.25s ease;
    --transition-med: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    background-color: var(--clean-white);
    color: var(--dark-slate);
    line-height: 1.7;
    font-size: 15px;
    overflow-x: hidden;
}
a { text-decoration: none; color: inherit; transition: color var(--transition-fast); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--dark-slate); line-height: 1.3; }
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }

.screen-reader-text {
    border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
    height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
    width: 1px; word-wrap: normal !important;
}
:focus-visible { outline: 2px solid var(--royal-pink-dark); outline-offset: 2px; }

img.lexpo-lazy-img, .product-img img, .category-card img {
    opacity: 0; transition: opacity 0.6s ease;
}
img.lexpo-lazy-img.is-loaded, .product-img img.is-loaded, .category-card img.is-loaded,
.product-img img, .category-card img { opacity: 1; }

/* =========================================================
   1. PRELOADER
========================================================= */
#lexpo-preloader {
    position: fixed; inset: 0; background: #fff; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
#lexpo-preloader.loaded { opacity: 0; visibility: hidden; }
.lexpo-spinner {
    width: 52px; height: 52px; border-radius: 50%;
    border: 4px solid rgba(233, 30, 99, 0.15);
    border-top-color: var(--royal-pink);
    animation: lexpo-spin 0.8s linear infinite;
}
@keyframes lexpo-spin { to { transform: rotate(360deg); } }

/* =========================================================
   2. HEADER
========================================================= */
.top-bar { background: var(--dark-slate); color: #fff; font-size: 12.5px; }
.top-bar-flex { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; }
.top-bar-right { display: flex; align-items: center; gap: 16px; }
.top-bar-right a { color: #fff; opacity: 0.85; }
.top-bar-right a:hover { opacity: 1; color: var(--primary-gold); }

.site-header { background: #fff; padding: 14px 0; box-shadow: var(--shadow-soft); position: sticky; top: 0; z-index: 999; transition: padding var(--transition-fast); }
.site-header.is-scrolled { padding: 8px 0; box-shadow: 0 10px 25px rgba(0,0,0,0.09); }
.header-flex { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.site-branding h1, .site-branding .site-title-text { font-size: 26px; color: var(--royal-pink); font-weight: 800; letter-spacing: 0.5px; font-family: var(--font-heading); line-height: 1.3; }
.site-branding img { max-height: 60px; width: auto; }

.main-nav ul { display: flex; gap: 28px; align-items: center; }
.main-nav ul li { position: relative; }
.main-nav ul li a { font-weight: 600; font-size: 14.5px; color: var(--dark-slate); transition: color var(--transition-fast); position: relative; padding: 6px 0; display: inline-block; }
.main-nav ul li a:hover { color: var(--royal-pink); }
.main-nav ul li a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--royal-pink); transition: width var(--transition-fast); }
.main-nav ul li a:hover::after { width: 100%; }
.main-nav ul li.menu-item-has-children > a::after { display: none; }
.lexpo-submenu-toggle { display: none; }
.main-nav ul ul { position: absolute; top: 100%; left: 0; background: #fff; min-width: 200px; box-shadow: var(--shadow-soft); border-radius: 8px; padding: 10px 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: var(--transition-fast); flex-direction: column; gap: 0; z-index: 50; }
.main-nav ul li:hover > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav ul ul li a { display: block; padding: 8px 18px; }

.header-actions { display: flex; align-items: center; gap: 18px; }
.header-search-toggle, .header-account { font-size: 18px; color: var(--dark-slate); transition: color var(--transition-fast); }
.header-search-toggle:hover, .header-account:hover { color: var(--royal-pink); }

.header-cart { position: relative; font-size: 20px; color: var(--royal-pink); }
.header-cart a { color: inherit; display: inline-flex; }
.header-cart.bump a { animation: lexpo-bump 0.5s ease; }
@keyframes lexpo-bump { 0%,100% { transform: scale(1); } 35% { transform: scale(1.3) rotate(-8deg); } 65% { transform: scale(1.1) rotate(5deg); } }
.cart-badge { position: absolute; top: -9px; right: -12px; background: var(--royal-pink-dark); color: #fff; font-size: 10.5px; width: 19px; height: 19px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; }

.mobile-menu-toggle { display: none; flex-direction: column; gap: 5px; width: 26px; }
.mobile-menu-toggle span { display: block; height: 2.5px; background: var(--dark-slate); border-radius: 2px; transition: var(--transition-fast); }
.mobile-menu-toggle.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.header-search-box { max-height: 0; overflow: hidden; background: #fff; transition: max-height var(--transition-med); border-top: 0 solid var(--border-light); }
.header-search-box.active { max-height: 90px; border-top: 1px solid var(--border-light); }
.lexpo-search-form { display: flex; gap: 10px; padding: 16px 0; }
.lexpo-search-form input { flex: 1; padding: 12px 16px; border: 1px solid var(--border-light); border-radius: 6px; font-size: 14px; }
.lexpo-search-form input:focus { outline: none; border-color: var(--royal-pink); }
.lexpo-search-form button { background: var(--royal-pink-dark); color: #fff; padding: 0 22px; border-radius: 6px; transition: background var(--transition-fast); }
.lexpo-search-form button:hover { background: var(--royal-pink); }

/* ---- Mini Cart Dropdown ---- */
.mini-cart-content { position: absolute; top: 42px; right: 0; width: 320px; background: #fff; border: 1px solid var(--border-light); box-shadow: var(--shadow-hover); border-radius: var(--radius); padding: 18px; z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(12px); transition: var(--transition-med); }
.mini-cart-content.active { opacity: 1; visibility: visible; transform: translateY(0); }
.mini-cart-list { list-style: none; max-height: 260px; overflow-y: auto; margin-bottom: 15px; }
.mini-cart-list li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f5f5f5; align-items: center; position: relative; }
.mini-cart-thumb img { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; }
.mini-cart-info { display: flex; flex-direction: column; flex: 1; }
.mini-cart-info .name { font-size: 13.5px; font-weight: 600; }
.mini-cart-info .qty-price { font-size: 12px; color: var(--text-grey); }
.mini-cart-remove { font-size: 18px; color: #ccc; line-height: 1; padding: 4px; }
.mini-cart-remove:hover { color: var(--royal-pink); }
.mini-cart-total { padding: 10px 0; font-size: 15px; text-align: right; border-top: 2px solid #f0f0f0; margin-bottom: 12px; }
.mini-cart-buttons { display: flex; gap: 10px; }
.mini-cart-buttons a { flex: 1; text-align: center; padding: 10px; border-radius: 6px; font-weight: 600; font-size: 13.5px; transition: var(--transition-fast); }
.btn-view-cart { background: var(--dark-slate); color: #fff; }
.btn-view-cart:hover { background: #1a252f; }
.btn-checkout { background: var(--royal-pink-dark); color: #fff; }
.btn-checkout:hover { background: var(--royal-pink); }
.empty-cart { text-align: center; color: var(--text-grey); padding: 24px 0; }
.empty-cart i { font-size: 30px; opacity: 0.3; margin-bottom: 8px; display: block; }

/* =========================================================
   3. HERO SLIDER (dependency-free — no Swiper.js)
========================================================= */
.hero-slider-wrap { position: relative; }
.hero-slider { height: 560px; }
.lexpo-slider { position: relative; width: 100%; overflow: hidden; }
.lexpo-slider-track { position: relative; width: 100%; height: 100%; }
.lexpo-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.7s ease; }
.lexpo-slide.is-active { opacity: 1; visibility: visible; position: relative; }
.hero-slider .lexpo-slide { width: 100%; height: 100%; display: flex; align-items: center; }
.hero-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(44,62,80,0.75) 0%, rgba(44,62,80,0.35) 60%, rgba(44,62,80,0.15) 100%); z-index: 1; }
.hero-content { position: relative; z-index: 2; color: #fff; padding: 0 8%; max-width: 620px; }
.hero-content h2 { font-size: 50px; margin-bottom: 18px; font-weight: 800; letter-spacing: 0.5px; color: #fff; }
.hero-content p { font-size: 17px; margin-bottom: 28px; color: #f1f1f1; }
.btn-shop { background: var(--royal-pink-dark); color: #fff; padding: 15px 38px; border-radius: 40px; font-weight: 600; font-size: 15px; transition: var(--transition-med); display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 10px 25px rgba(233, 30, 99, 0.35); }
.btn-shop:hover { background: #fff; color: var(--royal-pink-dark); transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0,0,0,0.15); }
.btn-shop.btn-outline { background: transparent; border: 2px solid #fff; box-shadow: none; margin-left: 12px; }
.btn-shop.btn-outline:hover { background: #fff; color: var(--dark-slate); }

.lexpo-slider-dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 8px; }
.lexpo-slider-dot { width: 10px; height: 10px; border-radius: 6px; background: rgba(255,255,255,0.6); border: none; padding: 0; transition: var(--transition-fast); cursor: pointer; }
.lexpo-slider-dot.is-active { opacity: 1; background: var(--primary-gold); width: 26px; }
.lexpo-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: var(--transition-fast); border: 1px solid rgba(255,255,255,0.3); }
.lexpo-slider-arrow:hover { background: rgba(255,255,255,0.9); color: var(--dark-slate); }
.lexpo-slider-arrow.prev { left: 20px; }
.lexpo-slider-arrow.next { right: 20px; }

/* Testimonial slider re-uses the same .lexpo-slider engine, non-absolute (natural height). */
.testimonial-slider .lexpo-slider-track { position: relative; }
.testimonial-slider .lexpo-slide { position: absolute; inset: 0; }
.testimonial-slider .lexpo-slide.is-active { position: relative; }
.testimonial-slider .lexpo-slider-dots { position: static; transform: none; justify-content: center; margin-top: 26px; }
.testimonial-slider .lexpo-slider-dot.is-active { background: var(--royal-pink); }

/* ---------- Scroll-reveal (replaces AOS.js) ---------- */
[data-aos] { opacity: 1; }
[data-aos].aos-init { opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; }
[data-aos="fade-up"].aos-init { transform: translateY(30px); }
[data-aos="zoom-in"].aos-init { transform: scale(0.92); }
[data-aos].aos-animate { opacity: 1; transform: none; }

/* =========================================================
   4. TRUST STRIP
========================================================= */
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: -40px auto 60px; position: relative; z-index: 5; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 28px 20px; }
.trust-item { display: flex; align-items: center; gap: 14px; }
.trust-item i { font-size: 26px; color: var(--royal-pink); background: rgba(233,30,99,0.08); width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; }
.trust-item h3 { font-size: 14.5px; margin-bottom: 2px; }
.trust-item p { font-size: 12.5px; color: var(--text-grey); font-family: var(--font-body); }

/* =========================================================
   5. SECTION TITLES
========================================================= */
.section-title { text-align: center; margin-bottom: 45px; }
.section-title h2 { font-size: 34px; font-weight: 700; position: relative; display: inline-block; padding-bottom: 14px; }
.section-title h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: var(--royal-pink); border-radius: 3px; }
.section-title p { color: var(--text-grey); font-size: 15.5px; margin-top: 10px; }

/* =========================================================
   6. CATEGORY SHOWCASE
========================================================= */
.category-section { padding: 40px 0 60px; }
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.category-card { position: relative; border-radius: var(--radius); overflow: hidden; height: 280px; box-shadow: var(--shadow-soft); }
.category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.category-card:hover img { transform: scale(1.12); }
.category-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(44,62,80,0.85) 0%, rgba(44,62,80,0.05) 55%); display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; color: #fff; }
.category-overlay h3 { color: #fff; font-size: 20px; margin-bottom: 4px; }
.category-overlay span { font-size: 12.5px; opacity: 0.85; }

/* =========================================================
   7. PRODUCTS GRID (home + WooCommerce loop share styling)
========================================================= */
.products-section { padding: 20px 0 60px; }
.products-grid, ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 28px; margin-bottom: 20px; list-style: none; }
.product-card, ul.products li.product {
    background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden;
    transition: var(--transition-med); box-shadow: 0 4px 14px rgba(0,0,0,0.04); position: relative;
}
.product-card:hover, ul.products li.product:hover { transform: translateY(-10px); box-shadow: var(--shadow-hover); border-color: rgba(233,30,99,0.3); }

.product-img, ul.products li.product a img { position: relative; display: block; }
.product-img { overflow: hidden; position: relative; }
.product-img img, ul.products li.product img { width: 100%; height: 340px; object-fit: cover; transition: transform 0.6s ease; }
.product-card:hover .product-img img, ul.products li.product:hover img { transform: scale(1.08); }

.badge-sale, span.onsale { position: absolute; top: 14px; left: 14px; background: var(--royal-pink-dark); color: #fff; font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 20px; z-index: 3; text-transform: uppercase; letter-spacing: 0.5px; }
.quick-view { position: absolute; bottom: -50px; left: 0; right: 0; text-align: center; background: rgba(44,62,80,0.9); color: #fff; padding: 11px 0; font-size: 13px; font-weight: 600; transition: bottom var(--transition-med); }
.product-img:hover .quick-view { bottom: 0; }

.product-info { padding: 18px; text-align: center; }
.product-info h3, .woocommerce ul.products li.product h3,
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 15.5px; margin-bottom: 8px; font-weight: 600; font-family: var(--font-body); color: var(--dark-slate); }
.product-info h3 a, .woocommerce-loop-product__title { color: inherit; }
.price, .woocommerce ul.products li.product .price { color: var(--royal-pink); font-weight: 700; font-size: 17px; margin-bottom: 14px; font-family: var(--font-body); }
.price del, .woocommerce .price del { color: #767676; font-weight: 400; font-size: 14px; opacity: 1; margin-right: 6px; }
.price ins, .woocommerce .price ins { text-decoration: none; }

.btn-add-cart, .woocommerce ul.products li.product .button,
.woocommerce a.button, .woocommerce button.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--dark-slate); color: #fff !important; padding: 11px 22px; border-radius: 6px;
    font-size: 13.5px; font-weight: 600; transition: var(--transition-fast); cursor: pointer; border: none;
    width: 100%;
}
.btn-add-cart:hover, .btn-add-cart.loading,
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--royal-pink); }
.btn-add-cart.loading { pointer-events: none; opacity: 0.75; }
.btn-add-cart.loading::after { content: ''; width: 13px; height: 13px; border: 2px solid rgba(255,255,255,0.5); border-top-color: #fff; border-radius: 50%; margin-left: 4px; animation: lexpo-spin 0.6s linear infinite; }
.btn-add-cart.added::after { content: " \2713"; }

/* WooCommerce escapes its own button text, so the cart icon is added via CSS
   rather than injected HTML — works identically on shop, related products
   and the homepage since they all render through the same WC function. */
.add_to_cart_button::before, .single_add_to_cart_button::before {
    font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f07a"; margin-right: 8px;
}
.add_to_cart_button.loading::before { display: none; }
.add_to_cart_button.loading::after { content: ''; width: 13px; height: 13px; border: 2px solid rgba(255,255,255,0.5); border-top-color: #fff; border-radius: 50%; margin-left: 4px; display: inline-block; vertical-align: middle; animation: lexpo-spin 0.6s linear infinite; }
.add_to_cart_button.added::after { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f00c"; margin-left: 8px; }

.view-all-wrap { text-align: center; margin-top: 20px; }
.btn-view-all { display: inline-flex; align-items: center; gap: 10px; border: 2px solid var(--dark-slate); color: var(--dark-slate); padding: 13px 34px; border-radius: 40px; font-weight: 600; transition: var(--transition-fast); }
.btn-view-all:hover { background: var(--dark-slate); color: #fff; }

/* =========================================================
   8. PROMO BANNER
========================================================= */
.promo-banner { background: linear-gradient(120deg, var(--dark-slate), #1a252f); margin: 20px 0 60px; padding: 60px 0; text-align: center; position: relative; overflow: hidden; }
.promo-banner::before { content: ''; position: absolute; top: -50%; right: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(233,30,99,0.25), transparent 70%); }
.promo-banner-inner { position: relative; z-index: 2; }
.promo-banner h2 { color: var(--primary-gold); font-size: 36px; margin-bottom: 12px; }
.promo-banner p { color: #ddd; font-size: 16px; margin-bottom: 26px; }

/* =========================================================
   9. TESTIMONIALS
========================================================= */
.testimonial-section { padding: 20px 0 70px; background: #fff; }
.testimonial-card { background: var(--clean-white); border-radius: var(--radius); padding: 32px 26px; text-align: center; border: 1px solid var(--border-light); height: 100%; }
.testimonial-card .stars { color: var(--primary-gold); margin-bottom: 16px; font-size: 14px; letter-spacing: 2px; }
.testimonial-card p { color: #555; font-size: 14.5px; font-style: italic; margin-bottom: 18px; min-height: 90px; }
.testimonial-card h3 { font-size: 15px; margin-bottom: 2px; }
.testimonial-card span { font-size: 12.5px; color: var(--text-grey); }

/* =========================================================
   10. NEWSLETTER
========================================================= */
.newsletter-section { background: linear-gradient(120deg, var(--royal-pink), var(--royal-pink-dark)); padding: 45px 0; }
.newsletter-flex { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; position: relative; }
.newsletter-text h3 { color: #fff; font-size: 22px; margin-bottom: 6px; }
.newsletter-text p { color: #fff; font-size: 14px; }
.newsletter-form { display: flex; gap: 10px; flex: 1; max-width: 440px; width: 100%; }
.newsletter-form input { flex: 1; padding: 14px 18px; border-radius: 40px; border: none; font-size: 14px; }
.newsletter-form input:focus { outline: 3px solid rgba(255,255,255,0.4); }
.newsletter-form button { background: var(--dark-slate); color: #fff; padding: 0 26px; border-radius: 40px; font-weight: 600; display: flex; align-items: center; gap: 8px; transition: var(--transition-fast); }
.newsletter-form button:hover { background: #1a252f; }
.newsletter-form button.loading .btn-text::after { content: '...'; }
.newsletter-msg { width: 100%; text-align: center; margin-top: 12px; font-size: 13.5px; color: #fff; font-weight: 600; }

/* =========================================================
   11. FOOTER
========================================================= */
.site-footer { background: var(--dark-slate); color: #fff; padding: 60px 0 0; }
.footer-flex { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 40px; }
.footer-col h3 { font-size: 17px; margin-bottom: 18px; color: var(--primary-gold); font-family: var(--font-body); font-weight: 600; }
.footer-col p { margin-bottom: 12px; font-size: 13.5px; color: #b8bfc7; display: flex; align-items: flex-start; gap: 8px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { color: #b8bfc7; transition: var(--transition-fast); font-size: 13.5px; }
.footer-col ul li a:hover { color: var(--royal-pink); padding-left: 4px; }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a { width: 36px; height: 36px; background: rgba(255,255,255,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); }
.footer-social a:hover { background: var(--royal-pink); transform: translateY(-3px); }
.footer-payments { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.footer-payments span { font-size: 12.5px; color: #b8bfc7; display: flex; align-items: center; gap: 8px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 18px 0; }
.footer-bottom-flex { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: #c2c8ce; }

/* =========================================================
   12. FLOATING BUTTONS
========================================================= */
.lexpo-float-whatsapp { position: fixed; bottom: 26px; left: 26px; width: 58px; height: 58px; background: #25D366; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 8px 20px rgba(37,211,102,0.45); z-index: 900; animation: lexpo-pulse 2.2s infinite; }
.lexpo-float-whatsapp:hover { transform: scale(1.08); color: #fff; }
@keyframes lexpo-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.55); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }

.lexpo-back-to-top { position: fixed; bottom: 26px; right: 26px; width: 46px; height: 46px; background: var(--dark-slate); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: var(--transition-fast); z-index: 900; }
.lexpo-back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.lexpo-back-to-top:hover { background: var(--royal-pink); }

.btn-whatsapp-order { display: flex; align-items: center; justify-content: center; gap: 10px; background: #25D366; color: #fff !important; text-align: center; padding: 14px; margin-top: 14px; font-weight: 600; border-radius: 8px; font-size: 15px; transition: var(--transition-fast); }
.btn-whatsapp-order:hover { background: #1ebc59; }

/* =========================================================
   13. WOOCOMMERCE — GENERIC LAYOUT
========================================================= */
.shop-container { padding: 40px 0 70px; }
.shop-layout { display: flex; gap: 34px; align-items: flex-start; }
.shop-main { flex: 1; min-width: 0; }
.shop-sidebar { width: 280px; flex-shrink: 0; position: sticky; top: 100px; }

.woocommerce-breadcrumb { padding: 16px 0; font-size: 13px; color: var(--text-grey); }
.woocommerce-breadcrumb a { color: var(--dark-slate); font-weight: 500; }
.woocommerce-breadcrumb a:hover { color: var(--royal-pink); }
.woocommerce-breadcrumb .crumb-sep { margin: 0 4px; opacity: 0.5; }

.woocommerce-products-header h1, .woocommerce-products-header__title { margin-bottom: 20px; font-size: 30px; }
.woocommerce-result-count { color: var(--text-grey); font-size: 13.5px; }
.woocommerce-ordering select { padding: 10px 14px; border-radius: 6px; border: 1px solid var(--border-light); font-size: 13.5px; }
.woocommerce-notices-wrapper { margin-bottom: 20px; }
.woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-noreviews {
    background: #fff; border-left: 4px solid var(--royal-pink); border-radius: 6px; box-shadow: var(--shadow-soft);
    padding: 16px 20px; list-style: none; margin-bottom: 20px; font-size: 14px;
}
.woocommerce-error { border-left-color: #e74c3c; }
.woocommerce-message a.button, .woocommerce-info a.button { background: var(--royal-pink-dark); color: #fff !important; padding: 8px 18px; border-radius: 6px; margin-left: 10px; width: auto; display: inline-flex; }

.filter-widget { background: #fff; padding: 22px; margin-bottom: 20px; border-radius: var(--radius); border: 1px solid var(--border-light); }
.filter-widget h4 { margin-bottom: 15px; font-size: 15px; border-bottom: 2px solid var(--royal-pink); padding-bottom: 10px; }
.filter-widget ul li { margin-bottom: 9px; font-size: 13.5px; }
.filter-widget ul li a { transition: var(--transition-fast); }
.filter-widget ul li a:hover { color: var(--royal-pink); padding-left: 5px; }
.filter-widget .price_slider_amount .button { width: auto; }
.filter-widget input[type="search"] { width: 100%; padding: 10px 12px; border: 1px solid var(--border-light); border-radius: 6px; }

/* Filter by Price widget: a jQuery UI slider whose handle/track styling
   also lived in WooCommerce's default stylesheet (disabled site-wide for
   performance) — without this it renders as an invisible, unusable bar. */
.price_slider_wrapper { margin-bottom: 6px; }
.price_slider { position: relative; height: 4px; background: var(--border-light); border-radius: 4px; margin: 24px 8px 30px; }
.price_slider .ui-slider-range { position: absolute; height: 100%; top: 0; background: var(--royal-pink); border-radius: 4px; }
.price_slider .ui-slider-handle {
    position: absolute; top: 50%; width: 16px; height: 16px; margin-left: -8px; margin-top: -8px;
    background: #fff; border: 3px solid var(--royal-pink); border-radius: 50%; cursor: pointer; outline: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15); z-index: 2; touch-action: none;
}
.price_slider .ui-slider-handle:hover, .price_slider .ui-slider-handle.ui-state-active { background: var(--royal-pink); }
.price_slider_amount { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.price_slider_amount .price_label { font-size: 12.5px; color: var(--text-grey); order: -1; width: 100%; margin-bottom: 4px; }
.price_slider_amount input[type="text"] {
    width: 72px; padding: 7px 8px; border: 1px solid var(--border-light); border-radius: 4px; font-size: 12.5px; text-align: center;
}

.woocommerce-pagination ul.page-numbers, .blog-pagination .page-numbers { display: flex; gap: 8px; list-style: none; justify-content: center; margin-top: 30px; }
.woocommerce-pagination .page-numbers li a, .woocommerce-pagination .page-numbers li span,
.blog-pagination .page-numbers { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; border: 1px solid var(--border-light); font-size: 13.5px; font-weight: 600; transition: var(--transition-fast); }
.woocommerce-pagination .page-numbers li .current, .blog-pagination .page-numbers.current { background: var(--royal-pink-dark); color: #fff; border-color: var(--royal-pink-dark); }
.woocommerce-pagination .page-numbers li a:hover, .blog-pagination a.page-numbers:hover { background: var(--dark-slate); color: #fff; border-color: var(--dark-slate); }

/* =========================================================
   14. WOOCOMMERCE — SINGLE PRODUCT PAGE
========================================================= */
.single-product div.product {
    background: #fff; border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow-soft);
}
/* Clearfix: WooCommerce's own gallery/summary layout is float-based (its default
   CSS is disabled site-wide for performance, so this theme re-implements it). */
.single-product div.product::after { content: ''; display: table; clear: both; }

.woocommerce div.product div.images {
    width: 46%; float: left; border-radius: var(--radius); overflow: hidden;
}
.woocommerce div.product div.summary {
    width: 46%; float: right; padding-left: 0;
}
/* Anything WooCommerce prints after the summary (tabs, related products) must
   always drop below the floated gallery/summary, never squeeze beside them. */
.woocommerce-tabs, .single-product .related.products, .single-product .upsells.upsells { clear: both; }

/* ---- Product gallery: custom lightweight thumbnail strip ----
   WooCommerce always prints one .woocommerce-product-gallery__image per photo;
   normally FlexSlider's JS+CSS turns that into a slider with a thumbnail row.
   Since that CSS isn't loaded here, we show image 1 by default (works even
   if JS fails) and progressively enhance with our own click-to-swap thumbnails
   (see assets/js/main.js → initProductGallery). */
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__image { display: none; }
.woocommerce-product-gallery__image:first-child,
.woocommerce-product-gallery__image.is-active-gallery-image { display: block; }
.woocommerce-product-gallery__image img {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); background: var(--clean-white);
}
.woocommerce-product-gallery__trigger {
    position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); z-index: 2; font-size: 14px; opacity: 0.9;
}
.woocommerce-product-gallery { position: relative; }

.lexpo-gallery-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.lexpo-gallery-thumb {
    width: 70px; height: 90px; border-radius: 6px; overflow: hidden; border: 2px solid transparent;
    padding: 0; opacity: 0.65; transition: var(--transition-fast); flex-shrink: 0; cursor: pointer;
}
.lexpo-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lexpo-gallery-thumb.is-active, .lexpo-gallery-thumb:hover { opacity: 1; border-color: var(--royal-pink); }

.product_title { font-size: 30px; margin-bottom: 12px; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--royal-pink); font-size: 24px; font-weight: 700; font-family: var(--font-body); margin-bottom: 16px; }
.woocommerce div.product .stock { color: #27ae60; font-weight: 600; font-size: 13.5px; }
.woocommerce div.product .out-of-stock { color: #e74c3c; }
.woocommerce-product-details__short-description { margin: 18px 0; color: #555; font-size: 14.5px; }

.woocommerce div.product form.cart { display: flex; align-items: center; gap: 14px; margin: 24px 0; flex-wrap: wrap; }
.woocommerce div.product form.cart .quantity { display: flex; }

/* Custom quantity stepper (+/-) — native number-input spinners are invisible
   on iOS Safari with no way to enable them, so this theme adds its own
   working +/- buttons via JS (assets/js/main.js → initQuantitySteppers)
   instead of relying on inconsistent native browser controls. */
.quantity { position: relative; display: inline-flex; align-items: stretch; }
.quantity input.qty {
    -moz-appearance: textfield; appearance: textfield;
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantity.lexpo-stepper { border: 1px solid var(--border-light); border-radius: 6px; overflow: hidden; background: #fff; }
.quantity.lexpo-stepper input.qty { border: none; border-radius: 0; width: 52px !important; text-align: center; padding: 13px 4px !important; }
.lexpo-qty-btn {
    width: 38px; flex-shrink: 0; background: var(--clean-white); color: var(--dark-slate); font-size: 16px; font-weight: 600;
    transition: var(--transition-fast); border: none; cursor: pointer;
}
.lexpo-qty-btn:hover { background: var(--royal-pink); color: #fff; }
.lexpo-qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.lexpo-qty-btn.minus { border-right: 1px solid var(--border-light); }
.lexpo-qty-btn.plus { border-left: 1px solid var(--border-light); }

.woocommerce div.product form.cart .quantity input.qty {
    width: 70px; padding: 13px 10px; text-align: center; border: 1px solid var(--border-light); border-radius: 6px; font-size: 14px;
}
.woocommerce div.product form.cart button.single_add_to_cart_button {
    background: var(--royal-pink-dark); color: #fff !important; padding: 14px 40px; border-radius: 6px; font-weight: 600; font-size: 14.5px; transition: var(--transition-fast); width: auto;
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover { background: var(--royal-pink); transform: translateY(-2px); }

table.variations { margin-bottom: 18px; }
table.variations td { padding: 8px 0; }
table.variations select { padding: 10px 14px; border-radius: 6px; border: 1px solid var(--border-light); min-width: 180px; }
.woocommerce div.product .woocommerce-variation-price { font-weight: 700; color: var(--royal-pink); margin-bottom: 10px; }

.woocommerce-tabs { margin-top: 40px; border-top: 1px solid var(--border-light); padding-top: 20px; }
.woocommerce-tabs ul.tabs { display: flex; gap: 6px; border-bottom: 2px solid var(--border-light); margin-bottom: 24px; flex-wrap: wrap; }
.woocommerce-tabs ul.tabs li { list-style: none; }
.woocommerce-tabs ul.tabs li a { padding: 12px 24px; display: inline-block; font-weight: 600; font-size: 14px; color: var(--text-grey); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.woocommerce-tabs ul.tabs li.active a { color: var(--royal-pink); border-color: var(--royal-pink); }
.woocommerce-tabs .panel { font-size: 14.5px; color: #555; }

/* WooCommerce prints stars as a percentage-width overlay span; the icon
   glyphs themselves normally come from WooCommerce's own proprietary "star"
   webfont (part of the default stylesheet this theme disables), so without
   this it renders as an empty invisible bar. Rebuilt here with Font Awesome,
   which is already loaded site-wide. */
.star-rating {
    overflow: hidden; position: relative; height: 1em; line-height: 1; width: 5.4em;
    font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 14px; letter-spacing: 2px;
}
.star-rating::before { content: "\f005\f005\f005\f005\f005"; float: left; top: 0; left: 0; position: absolute; color: #ddd; }
.star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; }
.star-rating span::before { content: "\f005\f005\f005\f005\f005"; top: 0; position: absolute; left: 0; color: var(--primary-gold); }
.woocommerce-product-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.woocommerce-review-link { font-size: 13px; color: var(--text-grey); }
.comment-form-rating .star-rating { width: 5.4em; margin-bottom: 6px; }
.woocommerce-Reviews #comments ol.commentlist { list-style: none; }
.woocommerce-Reviews .comment-form-rating select { padding: 8px; border-radius: 6px; }
.woocommerce #review_form #respond textarea { width: 100%; padding: 14px; border: 1px solid var(--border-light); border-radius: 8px; margin: 10px 0; }
.woocommerce #review_form #respond input[type="text"], .woocommerce #review_form #respond input[type="email"] { padding: 12px; border: 1px solid var(--border-light); border-radius: 6px; width: 100%; margin-bottom: 10px; }
.woocommerce #review_form #respond .form-submit input { background: var(--royal-pink-dark); color: #fff; padding: 12px 28px; border-radius: 6px; font-weight: 600; }

.related.products, .up-sells.upsells { margin-top: 55px; }
.related.products > h2, .upsells.upsells > h2 { font-size: 26px; margin-bottom: 26px; text-align: center; }

/* =========================================================
   15. WOOCOMMERCE — CART / CHECKOUT / MY ACCOUNT (wide layout)
========================================================= */
.wc-page-wrapper { max-width: 100%; margin: 30px auto; }
.page-wrapper { max-width: 800px; margin: 40px auto; background: #fff; padding: 34px; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.page-title { font-size: 30px; margin-bottom: 22px; }
.page-content p { margin-bottom: 15px; color: #555; }

table.shop_table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); margin-bottom: 24px; }
table.shop_table thead th { background: var(--dark-slate); color: #fff; padding: 15px; text-align: left; font-size: 13.5px; }
table.shop_table td { padding: 15px; border-bottom: 1px solid var(--border-light); font-size: 14px; }
table.shop_table td.product-thumbnail img { width: 70px; border-radius: 6px; }
table.shop_table td.product-remove a { color: #e74c3c; font-size: 18px; }
.woocommerce a.remove { color: #e74c3c !important; }
.woocommerce table.shop_table td.actions .coupon input#coupon_code { padding: 12px; border: 1px solid var(--border-light); border-radius: 6px; margin-right: 8px; }
.woocommerce table.shop_table td.actions .button { width: auto; }
.woocommerce button.button:disabled, .woocommerce button.button.disabled,
.woocommerce a.button.disabled { opacity: 0.5; cursor: not-allowed; }
.cart-collaterals { margin-top: 20px; }
.cart_totals { background: #fff; border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-soft); max-width: 420px; margin-left: auto; }
.cart_totals h2 { font-size: 20px; margin-bottom: 16px; }
.cart_totals table { width: 100%; }
.cart_totals table td, .cart_totals table th { padding: 10px 0; border-bottom: 1px solid var(--border-light); }
.wc-proceed-to-checkout a.checkout-button { display: flex; justify-content: center; background: var(--royal-pink-dark); color: #fff !important; padding: 15px; border-radius: 6px; font-weight: 700; margin-top: 16px; width: 100%; }
.wc-proceed-to-checkout a.checkout-button:hover { background: var(--royal-pink); }

.lexpo-checkout-grid { display: flex; gap: 34px; flex-wrap: wrap; align-items: flex-start; }
.lexpo-checkout-col-left { flex: 1 1 56%; min-width: 300px; }
.lexpo-checkout-col-right { flex: 1 1 36%; min-width: 300px; position: sticky; top: 90px; }
/* Fallback for the rare case the page-grouping script hasn't run (e.g. JS
   disabled): keep the original stacked layout so nothing is ever hidden. */
.woocommerce-checkout #customer_details, .woocommerce-checkout .col2-set { display: flex; gap: 34px; flex-wrap: wrap; }
.woocommerce-checkout .col-1, .woocommerce-checkout .col-2 { flex: 1; min-width: 260px; }
.woocommerce-billing-fields h3, #order_review_heading { font-size: 19px; margin-bottom: 18px; }
.woocommerce form .form-row { margin-bottom: 16px; }
.woocommerce form .form-row label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce-additional-fields select {
    width: 100%; padding: 13px 14px; border: 1px solid var(--border-light); border-radius: 6px; font-size: 14px; transition: var(--transition-fast);
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { outline: none; border-color: var(--royal-pink); box-shadow: 0 0 0 3px rgba(233,30,99,0.1); }
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid .select2-selection--single { border-color: #e74c3c !important; }
.woocommerce form .form-row.woocommerce-validated input.input-text { border-color: #27ae60; }
#order_review { background: #fff; border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-soft); }
.woocommerce-checkout-review-order-table { width: 100%; }
#place_order { background: var(--royal-pink-dark); color: #fff !important; padding: 16px; border-radius: 6px; font-weight: 700; width: 100%; font-size: 15px; transition: var(--transition-fast); }
#place_order:hover { background: var(--royal-pink); }
.woocommerce-checkout .payment_methods { list-style: none; }
.woocommerce-checkout .payment_methods li { padding: 12px 0; border-bottom: 1px solid var(--border-light); }
.woocommerce-checkout .payment_methods li input[type="radio"] { margin-right: 8px; vertical-align: middle; }
.woocommerce-checkout .payment_box { background: var(--clean-white); padding: 14px; border-radius: 6px; margin-top: 10px; font-size: 13px; }
#shipping_method { list-style: none; }
#shipping_method li { padding: 8px 0; font-size: 14px; }
#shipping_method li input[type="radio"] { margin-right: 8px; }

.woocommerce-terms-and-conditions-wrapper { margin: 18px 0; }
.woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; cursor: pointer; }
.woocommerce-form__label-for-checkbox input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; }

/* Theme WooCommerce's select2 (searchable country/state dropdown) to match
   our other form fields, instead of leaving its own default look. */
.select2-container--default .select2-selection--single { height: 48px; border: 1px solid var(--border-light); border-radius: 6px; padding: 6px 4px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 34px; padding-left: 10px; font-size: 14px; color: var(--dark-slate); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; }
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--royal-pink); }
.select2-dropdown { border-color: var(--border-light); border-radius: 6px; overflow: hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--royal-pink); }
.select2-search--dropdown .select2-search__field { border: 1px solid var(--border-light); border-radius: 4px; padding: 8px; }

.woocommerce-MyAccount-navigation ul { list-style: none; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); }
.woocommerce-MyAccount-navigation ul li { border-bottom: 1px solid var(--border-light); }
.woocommerce-MyAccount-navigation ul li a { display: block; padding: 14px 20px; font-weight: 600; font-size: 14px; transition: var(--transition-fast); }
.woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-MyAccount-navigation ul li a:hover { background: var(--royal-pink-dark); color: #fff; }
.woocommerce-MyAccount-content { background: #fff; border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-soft); margin-top: 20px; }
.woocommerce-MyAccount-content table.shop_table { box-shadow: none; }
.woocommerce-account .woocommerce { display: flex; gap: 30px; flex-wrap: wrap; }
.woocommerce-account .woocommerce-MyAccount-navigation { flex: 0 0 240px; }
.woocommerce-account .woocommerce-MyAccount-content { flex: 1; min-width: 280px; margin-top: 0; }
.woocommerce-form-login, .woocommerce-form-register { background: #fff; padding: 30px; border-radius: var(--radius); box-shadow: var(--shadow-soft); max-width: 460px; }
.woocommerce-form-login .button, .woocommerce-form-register .button { background: var(--royal-pink-dark); color: #fff !important; padding: 13px 30px; border-radius: 6px; font-weight: 600; }
.u-column1, .u-column2 { flex: 1; min-width: 280px; }
.woocommerce-form-login-toggle, .woocommerce-form-coupon-toggle { display: flex; gap: 30px; flex-wrap: wrap; }

/* =========================================================
   16. BLOG (index.php)
========================================================= */
.blog-container { padding: 50px 0; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }
.blog-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); transition: var(--transition-med); }
.blog-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); }
.blog-card-img img { height: 220px; width: 100%; object-fit: cover; }
.blog-card-body { padding: 22px; }
.blog-date { font-size: 12px; color: var(--text-grey); }
.blog-card-body h2 { font-size: 19px; margin: 10px 0; }
.blog-card-body p { color: #666; font-size: 14px; margin-bottom: 14px; }
.blog-readmore { color: var(--royal-pink); font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }

/* =========================================================
   17. 404 PAGE
========================================================= */
.error-404-wrap { text-align: center; padding: 100px 20px; }
.error-404-wrap h1 { font-size: 120px; color: var(--royal-pink); opacity: 0.15; line-height: 1; }
.error-404-wrap h2 { font-size: 28px; margin: 10px 0 14px; }
.error-404-wrap p { color: var(--text-grey); margin-bottom: 30px; }

/* =========================================================
   18. ADMIN TOGGLE SWITCH (Theme Engine panel)
========================================================= */
.switch { position: relative; display: inline-block; width: 44px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .3s; border-radius: 22px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; }
input:checked + .slider { background-color: var(--royal-pink); }
input:checked + .slider:before { transform: translateX(22px); }

/* =========================================================
   19. RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
    .footer-flex { grid-template-columns: 1fr 1fr; }
    .shop-layout { flex-direction: column; }
    .shop-sidebar { width: 100%; position: static; }
}

@media (max-width: 992px) {
    .main-nav { position: fixed; top: 0; left: -100%; width: 82%; max-width: 340px; height: 100vh; background: #fff; z-index: 1001; padding: 90px 26px 30px; transition: left var(--transition-med); box-shadow: 10px 0 40px rgba(0,0,0,0.15); overflow-y: auto; }
    .main-nav.active { left: 0; }
    .main-nav ul { flex-direction: column; align-items: flex-start; gap: 4px; }
    .main-nav ul li { width: 100%; }
    .main-nav ul li a { padding: 12px 0; width: 100%; border-bottom: 1px solid #f5f5f5; }
    .main-nav ul ul { position: static; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; padding-left: 14px; }
    .menu-item-has-children { position: relative; }
    .menu-item-has-children.submenu-open > ul { display: block; }
    .lexpo-submenu-toggle {
        display: flex; align-items: center; justify-content: center;
        position: absolute; right: 0; top: 2px; width: 44px; height: 44px;
        background: none; border: none; color: var(--dark-slate); font-size: 13px; transition: transform var(--transition-fast);
    }
    .menu-item-has-children.submenu-open > .lexpo-submenu-toggle { transform: rotate(180deg); }
    .mobile-menu-toggle { display: flex; }
    body.lexpo-menu-open::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; }

    .hero-slider { height: 460px; }
    .hero-content h2 { font-size: 34px; }
    .trust-strip { grid-template-columns: repeat(2, 1fr); margin-top: -25px; }

    .woocommerce div.product div.images,
    .woocommerce div.product div.summary { width: 100%; float: none; }
    .woocommerce div.product div.summary { margin-top: 24px; padding-left: 0; }

    .lexpo-checkout-col-left, .lexpo-checkout-col-right { flex: 1 1 100%; min-width: 100%; }
    .lexpo-checkout-col-right { position: static; }
}

@media (max-width: 768px) {
    .top-bar-left { display: none; }
    .header-flex { flex-wrap: wrap; }
    .site-branding h1, .site-branding .site-title-text { font-size: 21px; }
    .hero-content { padding: 0 6%; }
    .hero-content h2 { font-size: 28px; }
    .hero-content p { font-size: 14.5px; }
    .newsletter-flex { flex-direction: column; text-align: center; }
    .footer-flex { grid-template-columns: 1fr; }
    .single-product div.product { padding: 20px; }
    .woocommerce div.product div.images,
    .woocommerce div.product div.summary { width: 100%; float: none; }
    .woocommerce div.product div.summary { padding-left: 0; margin-top: 20px; }
    .woocommerce-account .woocommerce-MyAccount-navigation { flex: 1 1 100%; }
    .lexpo-checkout-col-right { position: static; }
    .mini-cart-content { width: 280px; right: -10px; }
    .page-wrapper { padding: 22px; }
}

@media (max-width: 480px) {
    .trust-strip { grid-template-columns: 1fr; }
    .category-grid, .products-grid, ul.products { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .product-img img, ul.products li.product img { height: 220px; }
    .hero-slider { height: 400px; }
    .promo-banner h2 { font-size: 26px; }
}