/*
Theme Name: Ardis Shop
Theme URI: https://ardisshop.com
Author: Ardis
Description: Full Arabic RTL WooCommerce + Elementor theme. Green brand, Cairo font, custom COD order form, identical to ardisshop.com.
Version: 15.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
WC requires at least: 8.0
WC tested up to: 9.5
Text Domain: ardis-shop
Tags: right-to-left, woocommerce, e-commerce, arabic, rtl, elementor, custom-colors, custom-logo
*/

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

/* ── CSS Variables ── */
:root {
  --green-dark:   #1b4332;
  --green-mid:    #2d6a4f;
  --green-light:  #2d9b6f;
  --green-pale:   #e8f5e9;
  --red:          #e53935;
  --text-dark:    #111;
  --text-mid:     #444;
  --text-light:   #777;
  --border:       #e8e8e8;
  --bg:           #f7f7f7;
  --white:        #fff;
  --shadow-sm:    0 2px 8px rgba(0,0,0,.07);
  --shadow-md:    0 4px 24px rgba(0,0,0,.10);
  --shadow-lg:    0 8px 40px rgba(0,0,0,.14);
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px;
  --font: 'Cairo', sans-serif;
  --t: .2s ease;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{direction:rtl;}
body{font-family:var(--font);background:var(--white);color:var(--text-dark);direction:rtl;line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
a{text-decoration:none;color:inherit;}
ul,ol{list-style:none;}
button,input,select,textarea{font-family:var(--font);}

/* ── Container ── */
.ardis-wrap{max-width:1200px;margin:0 auto;padding:0 20px;}

/* ══════════════════════════════
   ANNOUNCE BAR
══════════════════════════════ */
#ardis-announce{background:var(--green-dark);color:#fff;text-align:center;font-size:13px;font-weight:600;padding:9px 16px;}

/* ══════════════════════════════
   NAVBAR
══════════════════════════════ */
#ardis-header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200;box-shadow:var(--shadow-sm);}
.ardis-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:68px;}
.ardis-logo{justify-self:start;}
.ardis-nav-icons{justify-self:end;}

/* Logo horizontal position now controlled by the offset slider (see dynamic CSS) */
.ardis-logo img{height:58px;object-fit:contain;}
.ardis-nav-links{display:flex;gap:28px;}
.ardis-nav-links a{font-size:14px;font-weight:600;color:var(--text-mid);position:relative;padding-bottom:3px;transition:color var(--t);}
.ardis-nav-links a::after{content:'';position:absolute;bottom:0;right:0;width:0;height:2px;background:var(--green-mid);transition:width var(--t);}
.ardis-nav-links a:hover{color:var(--green-mid);}
.ardis-nav-links a:hover::after{width:100%;}
.ardis-nav-icons{display:flex;align-items:center;gap:14px;}
.ardis-nav-icons a{position:relative;display:flex;align-items:center;color:var(--text-mid);transition:color var(--t);}
.ardis-nav-icons a:hover{color:var(--green-mid);}
.ardis-nav-icons svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;}
.ardis-cart-count{position:absolute;top:-7px;left:-7px;background:var(--red);color:#fff;font-size:10px;font-weight:700;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.ardis-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px;}
.ardis-burger span{display:block;width:24px;height:2px;background:var(--text-dark);border-radius:2px;transition:.3s;}

/* Mobile drawer */
.mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:300;}
.mob-overlay.open{display:block;}
.mob-drawer{position:fixed;top:0;right:0;width:280px;height:100vh;background:#fff;z-index:400;padding:28px 22px;transform:translateX(110%);transition:transform .3s ease;box-shadow:-4px 0 24px rgba(0,0,0,.15);overflow-y:auto;}
.mob-drawer.open{transform:translateX(0);}
.mob-close{background:none;border:none;font-size:24px;cursor:pointer;display:block;margin-bottom:22px;}
.mob-drawer .mob-logo{height:38px;margin-bottom:24px;}
.mob-drawer nav a{display:block;padding:13px 0;font-size:15px;font-weight:600;color:var(--text-dark);border-bottom:1px solid var(--border);}
.mob-cart-btn{display:flex;align-items:center;gap:10px;margin-top:18px;background:var(--green-mid);color:#fff;padding:12px 18px;border-radius:var(--r-md);font-weight:700;font-size:14px;}

/* ══════════════════════════════
   BREADCRUMB
══════════════════════════════ */
.ardis-breadcrumb{padding:11px 20px;font-size:12.5px;color:var(--text-light);border-bottom:1px solid #f0f0f0;background:#fafafa;}
.ardis-breadcrumb a{color:var(--text-light);transition:color var(--t);}
.ardis-breadcrumb a:hover{color:var(--green-mid);}
.ardis-breadcrumb .sep{margin:0 5px;}
.ardis-breadcrumb .cur{color:var(--text-dark);font-weight:600;}

/* ══════════════════════════════
   HERO  (homepage – kept identical)
══════════════════════════════ */
.ardis-hero{background:linear-gradient(135deg,var(--green-dark) 0%,#0d2b1f 100%);padding:80px 20px;text-align:center;position:relative;overflow:hidden;}
.ardis-hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");}
.ardis-hero-inner{position:relative;z-index:1;}
.ardis-hero h1{font-size:clamp(26px,5vw,50px);font-weight:900;color:#fff;margin-bottom:14px;line-height:1.25;}
.ardis-hero p{font-size:clamp(14px,2vw,17px);color:rgba(255,255,255,.8);max-width:540px;margin:0 auto 28px;}
.ardis-hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.ardis-hero-stats{display:flex;gap:36px;justify-content:center;margin-top:44px;flex-wrap:wrap;}
.ardis-hero-stat .num{font-size:30px;font-weight:900;color:#fff;line-height:1;}
.ardis-hero-stat .lbl{font-size:12px;color:rgba(255,255,255,.65);margin-top:3px;}

/* ══════════════════════════════
   BUTTONS
══════════════════════════════ */
.btn-primary{background:var(--green-light);color:#fff;padding:13px 28px;border-radius:var(--r-md);font-size:14.5px;font-weight:700;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:opacity var(--t),transform var(--t);}
.btn-primary:hover{opacity:.9;transform:translateY(-2px);color:#fff;}
.btn-outline{background:transparent;color:#fff;padding:12px 28px;border-radius:var(--r-md);font-size:14.5px;font-weight:700;border:2px solid rgba(255,255,255,.5);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:border-color var(--t),background var(--t);}
.btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff;}
.btn-white{background:#fff;color:var(--green-dark);padding:12px 26px;border-radius:var(--r-md);font-size:14px;font-weight:800;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:opacity var(--t),transform var(--t);}
.btn-white:hover{opacity:.92;transform:translateY(-2px);color:var(--green-dark);}

/* ══════════════════════════════
   FEATURES STRIP
══════════════════════════════ */
.ardis-features{background:#fff;border-bottom:1px solid var(--border);padding:18px 0;}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.feat-item{display:flex;align-items:center;gap:12px;padding:13px 22px;border-left:1px solid var(--border);}
.feat-item:last-child{border-left:none;}
.feat-ico{width:42px;height:42px;background:var(--green-pale);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.feat-ico svg{width:20px;height:20px;stroke:var(--green-mid);fill:none;stroke-width:1.8;}
.feat-txt strong{display:block;font-size:13px;font-weight:700;color:var(--text-dark);}
.feat-txt span{font-size:12px;color:var(--text-light);}

/* ══════════════════════════════
   SECTION HEADERS
══════════════════════════════ */
.ardis-section{padding:52px 0;}
.sec-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px;}
.sec-header h2{font-size:22px;font-weight:800;color:var(--text-dark);position:relative;padding-bottom:10px;}
.sec-header h2::after{content:'';position:absolute;bottom:0;right:0;width:44px;height:3px;background:var(--green-mid);border-radius:2px;}
.sec-header .view-all{font-size:13px;font-weight:700;color:var(--green-mid);}
.sec-header .view-all:hover{opacity:.7;}

/* ══════════════════════════════
   PRODUCT GRID & CARDS
══════════════════════════════ */
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.pcard{border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:box-shadow var(--t),transform var(--t);}
.pcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);}
.pcard-img{position:relative;overflow:hidden;background:#f8f8f8;}
.pcard-img img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .4s ease;}
.pcard:hover .pcard-img img{transform:scale(1.05);}
.pcard-badge{position:absolute;top:10px;right:10px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;}
.pcard-badge.sale{background:var(--red);color:#fff;}
.pcard-badge.new{background:var(--green-mid);color:#fff;}
.pcard-body{padding:13px 15px 15px;flex:1;display:flex;flex-direction:column;}
.pcard-name{font-size:13.5px;font-weight:700;color:var(--text-dark);margin-bottom:5px;flex:1;line-height:1.4;}
.pcard-stars{color:#f59e0b;font-size:12px;margin-bottom:7px;}
.pcard-price{font-size:15px;font-weight:800;color:var(--green-dark);margin-bottom:11px;}
.pcard-price .old{font-size:12px;font-weight:500;color:var(--text-light);text-decoration:line-through;margin-right:5px;}
.pcard-btn{width:100%;background:var(--green-mid);color:#fff;border:none;border-radius:var(--r-sm);padding:10px;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:background var(--t),transform var(--t);}
.pcard-btn:hover{background:var(--green-dark);transform:translateY(-1px);}
.pcard-btn svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2;}

/* ══════════════════════════════
   PROMO BANNER
══════════════════════════════ */
.ardis-promo{background:linear-gradient(135deg,var(--green-mid) 0%,var(--green-dark) 100%);border-radius:var(--r-lg);padding:44px 52px;display:flex;align-items:center;justify-content:space-between;gap:20px;overflow:hidden;position:relative;}
.ardis-promo::before{content:'';position:absolute;top:-60px;left:-60px;width:240px;height:240px;background:rgba(255,255,255,.05);border-radius:50%;}
.promo-txt{position:relative;z-index:1;}
.promo-txt .tag{display:inline-block;background:rgba(255,255,255,.15);color:#fff;font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px;margin-bottom:10px;}
.promo-txt h2{font-size:26px;font-weight:900;color:#fff;margin-bottom:7px;}
.promo-txt p{font-size:14.5px;color:rgba(255,255,255,.8);margin-bottom:22px;}

/* ══════════════════════════════
   TESTIMONIALS
══════════════════════════════ */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.tcard{border:1.5px solid var(--border);border-radius:var(--r-lg);padding:22px;background:#fff;display:flex;flex-direction:column;gap:12px;}
.tcard-stars{color:#f59e0b;font-size:15px;}
.tcard-text{font-size:14px;color:var(--text-mid);line-height:1.7;font-style:italic;}
.tcard-author{display:flex;align-items:center;gap:10px;margin-top:auto;}
.tcard-avatar{width:40px;height:40px;background:var(--green-pale);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.tcard-name{font-size:13.5px;font-weight:700;color:var(--text-dark);}
.tcard-badge{font-size:11.5px;color:var(--green-mid);font-weight:600;}

/* ══════════════════════════════
   SINGLE PRODUCT PAGE
══════════════════════════════ */
.ardis-product-wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;padding:36px 0 56px;}

/* Gallery */
.ardis-gallery .main-img{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#f8f8f8;margin-bottom:12px;}
.ardis-gallery .main-img img{width:100%;aspect-ratio:1/1;object-fit:cover;cursor:zoom-in;transition:opacity .25s;}
.ardis-gallery .img-count{position:absolute;bottom:12px;right:50%;transform:translateX(50%);background:rgba(0,0,0,.45);color:#fff;font-size:12px;font-weight:600;padding:3px 11px;border-radius:20px;}
.ardis-gallery .thumbs{display:flex;gap:9px;flex-wrap:wrap;}
.ardis-gallery .thumbs img{width:70px;height:70px;object-fit:cover;border-radius:var(--r-sm);cursor:pointer;border:2px solid transparent;transition:border-color var(--t);}
.ardis-gallery .thumbs img.active{border-color:var(--green-mid);}

/* Product detail */
.product-title{font-size:24px;font-weight:800;color:var(--text-dark);margin-bottom:9px;}
/* *** FIX: clean price display *** */
.product-price{font-size:22px;font-weight:800;color:var(--text-dark);margin-bottom:13px;}
.product-price .woocommerce-Price-amount{font-size:22px;font-weight:800;}
.product-price .woocommerce-Price-currencySymbol{font-size:18px;font-weight:700;margin-right:4px;}
.product-badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.p-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:5px 12px;border-radius:20px;}
.p-badge svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;}
.b-green{background:var(--green-pale);color:var(--green-mid);}
.b-blue{background:#e3f2fd;color:#1565c0;}
.b-orange{background:#fff8e1;color:#f57f17;}
.product-short-desc{font-size:14px;color:var(--text-mid);line-height:1.75;margin-bottom:20px;}

/* ══════════════════════════════
   COD ORDER FORM CARD
══════════════════════════════ */
.order-card{border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);}
.order-card-hdr{background:linear-gradient(135deg,var(--green-mid) 0%,var(--green-dark) 100%);padding:18px 22px;display:flex;align-items:center;gap:13px;}
.order-hdr-ico{width:46px;height:46px;background:rgba(255,255,255,.15);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.order-hdr-ico svg{width:22px;height:22px;fill:#fff;}
.order-card-hdr h3{color:#fff;font-size:18px;font-weight:800;}
.order-card-hdr p{color:rgba(255,255,255,.75);font-size:12px;margin-top:1px;}
.order-card-body{padding:19px 17px 17px;}
.o-row{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:11px;}
.o-group{display:flex;flex-direction:column;gap:5px;}
.o-group.full{grid-column:1/-1;}
.o-group label{font-size:12.5px;font-weight:700;color:var(--text-mid);}
.o-group label .req{color:var(--red);margin-right:2px;}
.o-field{position:relative;display:flex;align-items:center;}
.o-field input,.o-field select{width:100%;height:43px;border:1.5px solid #ddd;border-radius:var(--r-sm);padding:0 12px 0 36px;font-family:var(--font);font-size:13px;color:var(--text-mid);background:#fff;outline:none;transition:border-color var(--t);text-align:right;direction:rtl;appearance:none;-webkit-appearance:none;}
.o-field input::placeholder{color:#bbb;}
.o-field input:focus,.o-field select:focus{border-color:var(--green-mid);}
.o-field .ico{position:absolute;left:10px;pointer-events:none;display:flex;}
.o-field .ico svg{width:15px;height:15px;stroke:#ccc;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.o-field .chev{position:absolute;right:9px;pointer-events:none;display:flex;}
.o-field .chev svg{width:13px;height:13px;stroke:#ccc;fill:none;stroke-width:2;}
.o-field select{padding-right:28px;}

/* mini product row */
.o-mini-product{display:flex;align-items:center;gap:11px;padding-top:13px;border-top:1.5px dashed var(--border);margin-top:4px;}
.o-mini-thumb{width:62px;height:62px;object-fit:cover;border-radius:var(--r-sm);border:1.5px solid var(--border);flex-shrink:0;}
.o-mini-info{flex:1;text-align:right;}
.o-mini-name{font-size:13px;font-weight:700;color:var(--text-dark);margin-bottom:3px;}
.o-mini-price{font-size:13px;font-weight:700;color:var(--red);}
.qty-ctrl{display:flex;align-items:center;border:1.5px solid #ccc;border-radius:var(--r-sm);overflow:hidden;flex-shrink:0;}
.qty-ctrl button{width:31px;height:31px;border:none;cursor:pointer;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background var(--t);}
.qty-ctrl .qminus{background:#f0f0f0;color:#555;}
.qty-ctrl .qminus:hover{background:#e0e0e0;}
.qty-ctrl .qval{width:32px;text-align:center;font-family:var(--font);font-size:13px;font-weight:700;color:var(--text-dark);background:#fff;border:none;pointer-events:none;}
.qty-ctrl .qplus{background:var(--green-mid);color:#fff;}
.qty-ctrl .qplus:hover{background:var(--green-dark);}
.o-summary{margin-top:13px;display:flex;flex-direction:column;gap:7px;}
.o-sum-line{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;}
.osl{color:var(--text-light);font-weight:500;}
.osv{color:var(--text-dark);font-weight:600;}
.osfree{color:var(--green-mid);font-weight:700;}
.o-sum-total{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding-top:10px;border-top:1.5px solid var(--border);font-size:15px;font-weight:800;color:var(--text-dark);}
.ardis-buy-btn{display:block;width:100%;margin-top:15px;padding:14px;background:linear-gradient(135deg,var(--green-light) 0%,var(--green-dark) 100%);color:#fff;font-family:var(--font);font-size:15px;font-weight:800;border:none;border-radius:var(--r-md);cursor:pointer;transition:opacity var(--t),transform var(--t);}
.ardis-buy-btn:hover{opacity:.92;transform:translateY(-1px);}

/* ══════════════════════════════
   PRODUCT TABS / DESCRIPTION
══════════════════════════════ */
.ardis-tabs{margin-top:36px;}
.tabs-nav{display:flex;border-bottom:2px solid var(--border);margin-bottom:22px;}
.tab-btn{padding:11px 18px;font-family:var(--font);font-size:14px;font-weight:700;color:var(--text-light);background:none;border:none;cursor:pointer;position:relative;transition:color var(--t);}
.tab-btn.active{color:var(--green-mid);}
.tab-btn.active::after{content:'';position:absolute;bottom:-2px;right:0;width:100%;height:2px;background:var(--green-mid);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.desc-list{display:flex;flex-direction:column;gap:11px;}
.desc-list li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--text-mid);line-height:1.65;}
.desc-list li::before{content:'✓';background:var(--green-mid);color:#fff;font-size:10px;font-weight:700;width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:3px;}

/* ══════════════════════════════
   SHOP / ARCHIVE PAGE
══════════════════════════════ */
.shop-page-header{background:linear-gradient(135deg,var(--green-dark),#0d2b1f);padding:44px 20px;text-align:center;}
.shop-page-header h1{font-size:32px;font-weight:900;color:#fff;margin-bottom:6px;}
.shop-page-header p{font-size:14px;color:rgba(255,255,255,.75);}
.shop-layout{display:grid;grid-template-columns:250px 1fr;gap:28px;padding:36px 0 60px;align-items:start;}
.ardis-sidebar{position:sticky;top:86px;}
.sidebar-widget{border:1.5px solid var(--border);border-radius:var(--r-lg);padding:18px;margin-bottom:16px;background:#fff;}
.sidebar-widget h3{font-size:14px;font-weight:800;color:var(--text-dark);margin-bottom:14px;padding-bottom:9px;border-bottom:1.5px solid var(--border);}
.filter-list{display:flex;flex-direction:column;gap:9px;}
.filter-item{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;color:var(--text-mid);}
.filter-item input[type=checkbox]{accent-color:var(--green-mid);width:15px;height:15px;cursor:pointer;}
.price-inputs{display:flex;gap:8px;align-items:center;margin-top:10px;}
.price-inputs input{flex:1;height:38px;border:1.5px solid #ddd;border-radius:var(--r-sm);padding:0 10px;font-family:var(--font);font-size:13px;text-align:center;outline:none;}
.price-inputs input:focus{border-color:var(--green-mid);}
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
.shop-count{font-size:13px;color:var(--text-light);}
.shop-sort{height:38px;border:1.5px solid #ddd;border-radius:var(--r-sm);padding:0 12px 0 28px;font-family:var(--font);font-size:13px;color:var(--text-mid);appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat left 8px center;cursor:pointer;outline:none;}

/* Pagination */
.ardis-pages{display:flex;gap:7px;justify-content:center;margin-top:36px;flex-wrap:wrap;}
.ardis-pages a,.ardis-pages span{width:37px;height:37px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:13.5px;font-weight:600;color:var(--text-mid);transition:background var(--t),border-color var(--t),color var(--t);}
.ardis-pages a:hover,.ardis-pages span.current{background:var(--green-mid);border-color:var(--green-mid);color:#fff;}

/* ══════════════════════════════
   CART PAGE
══════════════════════════════ */
.cart-layout{display:grid;grid-template-columns:1fr 340px;gap:24px;padding:36px 0 60px;align-items:start;}
.cart-table{width:100%;border-collapse:collapse;}
.cart-table th{text-align:right;font-size:13px;font-weight:700;color:var(--text-light);border-bottom:2px solid var(--border);padding:9px 12px;}
.cart-table td{padding:15px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
.cart-img{width:68px;height:68px;object-fit:cover;border-radius:var(--r-sm);border:1.5px solid var(--border);}
.cart-name{font-size:14px;font-weight:700;color:var(--text-dark);}
.cart-price{font-size:14px;font-weight:700;}
.cart-remove{background:none;border:none;cursor:pointer;color:var(--text-light);font-size:19px;transition:color var(--t);}
.cart-remove:hover{color:var(--red);}
.cart-summary{border:1.5px solid var(--border);border-radius:var(--r-lg);padding:20px;background:#fff;position:sticky;top:86px;}
.cart-summary h3{font-size:16px;font-weight:800;margin-bottom:16px;}
.cs-row{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:11px;}
.cs-row .ll{color:var(--text-light);}
.cs-row .vv{font-weight:700;}
.cs-total{display:flex;justify-content:space-between;font-size:15px;font-weight:800;padding-top:13px;border-top:2px solid var(--border);margin-bottom:18px;}

/* ══════════════════════════════
   CHECKOUT PAGE
══════════════════════════════ */
.checkout-layout{display:grid;grid-template-columns:1fr 380px;gap:28px;padding:36px 0 60px;align-items:start;}
.checkout-box{border:1.5px solid var(--border);border-radius:var(--r-lg);padding:26px;background:#fff;margin-bottom:18px;}
.checkout-box h3{font-size:15px;font-weight:800;margin-bottom:18px;}
.checkout-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.ck-field{display:flex;flex-direction:column;gap:5px;}
.ck-field.span2{grid-column:1/-1;}
.ck-field label{font-size:13px;font-weight:700;color:var(--text-mid);}
.ck-field label .req{color:var(--red);}
.ck-field input,.ck-field select,.ck-field textarea{border:1.5px solid #ddd;border-radius:var(--r-sm);padding:10px 13px;font-family:var(--font);font-size:13px;color:var(--text-mid);outline:none;direction:rtl;text-align:right;transition:border-color var(--t);appearance:none;width:100%;}
.ck-field input:focus,.ck-field select:focus,.ck-field textarea:focus{border-color:var(--green-mid);}
.ck-field textarea{resize:vertical;min-height:76px;}
.pay-option{display:flex;align-items:center;gap:12px;padding:14px;border:1.5px solid var(--border);border-radius:var(--r-md);cursor:pointer;transition:border-color var(--t),background var(--t);margin-bottom:9px;}
.pay-option.sel{border-color:var(--green-mid);background:var(--green-pale);}
.pay-option input[type=radio]{accent-color:var(--green-mid);width:16px;height:16px;}
.pay-ico{font-size:20px;}
.pay-lbl{font-size:13.5px;font-weight:700;}
.pay-desc{font-size:11.5px;color:var(--text-light);margin-top:1px;}
.order-review{border:1.5px solid var(--border);border-radius:var(--r-lg);padding:20px;background:#fff;position:sticky;top:86px;}
.order-review h3{font-size:15px;font-weight:800;margin-bottom:14px;}
.or-item{display:flex;align-items:center;gap:11px;margin-bottom:13px;padding-bottom:13px;border-bottom:1px solid var(--border);}
.or-img{width:54px;height:54px;object-fit:cover;border-radius:var(--r-sm);border:1.5px solid var(--border);flex-shrink:0;}
.or-name{font-size:13px;font-weight:700;flex:1;}
.or-price{font-size:13px;font-weight:700;color:var(--green-dark);}
.or-sum{display:flex;flex-direction:column;gap:9px;margin-top:3px;}
.or-line{display:flex;justify-content:space-between;font-size:13px;}
.or-line .ll{color:var(--text-light);}
.or-line .vv{font-weight:700;}
.or-total{display:flex;justify-content:space-between;font-size:15px;font-weight:800;padding-top:11px;border-top:2px solid var(--border);}
.place-order-btn{width:100%;margin-top:16px;padding:14px;background:linear-gradient(135deg,var(--green-light) 0%,var(--green-dark) 100%);color:#fff;font-family:var(--font);font-size:14.5px;font-weight:800;border:none;border-radius:var(--r-md);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity var(--t),transform var(--t);}
.place-order-btn:hover{opacity:.92;transform:translateY(-1px);}
.place-order-btn svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2;}

/* ══════════════════════════════
   THANK YOU PAGE
══════════════════════════════ */
.ty-page{display:flex;align-items:center;justify-content:center;min-height:55vh;padding:56px 20px;}
.ty-box{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-lg);padding:52px 44px;text-align:center;max-width:560px;box-shadow:var(--shadow-md);}
.ty-check{width:76px;height:76px;background:var(--green-pale);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.ty-check svg{width:36px;height:36px;stroke:var(--green-mid);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.ty-box h2{font-size:22px;font-weight:800;margin-bottom:8px;}
.ty-box p{font-size:14px;color:var(--text-light);margin-bottom:24px;line-height:1.7;}
.ty-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:26px;}
.ty-meta-item{background:var(--bg);border-radius:var(--r-md);padding:13px;text-align:center;}
.ty-meta-item .tm-lbl{font-size:11.5px;color:var(--text-light);margin-bottom:3px;}
.ty-meta-item .tm-val{font-size:14px;font-weight:800;}

/* ══════════════════════════════
   SUCCESS MODAL
══════════════════════════════ */
.ardis-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center;}
.ardis-modal.show{display:flex;}
.modal-box{background:#fff;border-radius:20px;padding:42px 34px;text-align:center;max-width:390px;width:92%;box-shadow:0 24px 64px rgba(0,0,0,.2);animation:modalIn .3s ease;}
@keyframes modalIn{from{opacity:0;transform:scale(.9) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-check{width:70px;height:70px;background:var(--green-pale);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.modal-check svg{width:34px;height:34px;stroke:var(--green-mid);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.modal-box h3{font-size:19px;font-weight:800;margin-bottom:7px;}
.modal-box p{font-size:13.5px;color:var(--text-light);margin-bottom:22px;line-height:1.65;}
.modal-ok{background:var(--green-mid);color:#fff;border:none;border-radius:var(--r-md);padding:11px 34px;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;transition:background var(--t);}
.modal-ok:hover{background:var(--green-dark);}

/* ══════════════════════════════
   TOAST
══════════════════════════════ */
.ardis-toast{position:fixed;bottom:22px;left:22px;background:var(--green-dark);color:#fff;padding:11px 18px;border-radius:var(--r-md);font-size:13.5px;font-weight:600;z-index:9999;box-shadow:var(--shadow-lg);transform:translateY(70px);opacity:0;transition:transform .3s,opacity .3s;display:flex;align-items:center;gap:9px;max-width:300px;}
.ardis-toast.show{transform:translateY(0);opacity:1;}
.ardis-toast svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2;flex-shrink:0;}

/* ══════════════════════════════
   BACK TO TOP
══════════════════════════════ */
.back-top{position:fixed;bottom:22px;right:22px;width:42px;height:42px;background:var(--green-mid);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:500;opacity:0;transform:translateY(10px);transition:opacity var(--t),transform var(--t),background var(--t);box-shadow:var(--shadow-md);}
.back-top.show{opacity:1;transform:translateY(0);}
.back-top:hover{background:var(--green-dark);}
.back-top svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2.5;}

/* ══════════════════════════════
   MY ACCOUNT
══════════════════════════════ */
.account-layout{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:36px 0 60px;align-items:start;}
.account-nav{border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;}
.account-nav a{display:block;padding:13px 17px;font-size:13.5px;font-weight:600;color:var(--text-mid);border-bottom:1px solid var(--border);transition:background var(--t),color var(--t);}
.account-nav a:hover,.account-nav a.active{background:var(--green-pale);color:var(--green-mid);}
.account-content{border:1.5px solid var(--border);border-radius:var(--r-lg);padding:26px;background:#fff;}

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
#ardis-footer{background:#1b2631;color:#ccc;padding:48px 0 22px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:36px;margin-bottom:36px;}
.fb-logo{height:42px;filter:brightness(0) invert(1);margin-bottom:13px;}
.footer-brand p{font-size:13px;color:#9aa;line-height:1.8;}
.footer-col h4{font-size:13.5px;font-weight:800;color:#fff;margin-bottom:15px;}
.footer-col ul{display:flex;flex-direction:column;gap:9px;}
.footer-col ul a{font-size:13px;color:#9aa;transition:color var(--t);}
.footer-col ul a:hover{color:#fff;}
.footer-contact-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#9aa;margin-bottom:9px;}
.footer-contact-row svg{width:14px;height:14px;stroke:#9aa;fill:none;stroke-width:1.8;flex-shrink:0;}
.footer-contact-row a{color:#9aa;}
.footer-contact-row a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:18px;display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:#677;flex-wrap:wrap;gap:10px;}
.pay-badges{display:flex;gap:7px;}
.pay-badge{background:rgba(255,255,255,.07);color:#9aa;font-size:11px;font-weight:700;padding:3px 8px;border-radius:4px;}

/* ══════════════════════════════
   WC OVERRIDES (price format)
══════════════════════════════ */
.woocommerce-Price-amount bdi{font-size:inherit;font-weight:inherit;}
ins .woocommerce-Price-amount{color:var(--green-dark);}
del .woocommerce-Price-amount{color:var(--text-light);font-size:.85em;}

/* ══════════════════════════════
   ELEMENTOR COMPATIBILITY
══════════════════════════════ */
.elementor-section .ardis-wrap{padding:0;}
body.elementor-editor-active #ardis-header{position:relative;}
.e-con,.e-container{direction:rtl;}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media(max-width:1100px){
  .products-grid{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px;}
  .testimonials-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:900px){
  .ardis-nav-links{display:none;}
  .ardis-burger{display:flex;}
  .ardis-product-wrap{grid-template-columns:1fr;gap:24px;}
  .shop-layout{grid-template-columns:1fr;}
  .ardis-sidebar{position:static;}
  .cart-layout{grid-template-columns:1fr;}
  .checkout-layout{grid-template-columns:1fr;}
  
  .ardis-promo{padding:28px 22px;flex-direction:column;}
  .order-review{position:static;}
  .account-layout{grid-template-columns:1fr;}
  .testimonials-grid{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .products-grid{grid-template-columns:repeat(2,1fr);gap:11px;}
  .ardis-hero{padding:48px 16px;}
  
  .footer-grid{grid-template-columns:1fr;}
  .o-row{grid-template-columns:1fr;}
  .checkout-grid{grid-template-columns:1fr;}
  .ty-meta{grid-template-columns:1fr;}
  .ardis-promo{padding:22px 18px;}
}

/* ══════════════════════════════
   LIQUID GLASS HEADER
══════════════════════════════ */
#ardis-header { position: relative; transition: background .3s, box-shadow .3s; }
#ardis-header.hdr-sticky { position: sticky; top: 0; z-index: 200; }

#ardis-header.hdr-liquid-glass {
    background: rgba(255,255,255,0.55) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,0.35) !important;
    box-shadow: 0 4px 32px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.85) !important;
}
#ardis-header.hdr-liquid-glass::after {
    content:'';
    position:absolute;inset:0;
    background: linear-gradient(180deg,rgba(255,255,255,0.18) 0%,rgba(255,255,255,0) 100%);
    pointer-events:none;
    border-radius: inherit;
}
#ardis-header.hdr-liquid-glass .ardis-nav { position:relative; z-index:1; }

#ardis-header.hdr-gradient {
    background: linear-gradient(135deg, var(--green-mid) 0%, var(--green-dark) 100%) !important;
    border-bottom: none !important;
}
#ardis-header.hdr-gradient .ardis-nav-links a { color: rgba(255,255,255,0.9) !important; }
#ardis-header.hdr-gradient .ardis-nav-links a:hover { color:#fff !important; }
#ardis-header.hdr-gradient .ardis-nav-icons a { color:rgba(255,255,255,0.85) !important; }
#ardis-header.hdr-gradient .ardis-store-name { color:#fff !important; }
#ardis-header.hdr-gradient .ardis-burger span { background:#fff; }

#ardis-header.hdr-dark {
    background: var(--green-dark) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
#ardis-header.hdr-dark .ardis-nav-links a { color:rgba(255,255,255,0.85) !important; }
#ardis-header.hdr-dark .ardis-nav-links a:hover { color:#fff !important; }
#ardis-header.hdr-dark .ardis-nav-icons a { color:rgba(255,255,255,0.8) !important; }
#ardis-header.hdr-dark .ardis-store-name { color:#fff !important; }
#ardis-header.hdr-dark .ardis-burger span { background:#fff; }

/* Logo + Name together */
.ardis-logo { display:flex; align-items:center; gap:10px; }
.ardis-logo a { display:flex; align-items:center; gap:10px; text-decoration:none; }
.ardis-store-name { font-size:20px; font-weight:900; white-space:nowrap; transition: color .2s; }

/* ══════════════════════════════
   ELEMENTOR COMPATIBILITY
══════════════════════════════ */
.elementor-section .ardis-wrap { padding:0; }
.elementor-widget-container { direction: rtl; }
/* Let Elementor templates override header/footer */
body.elementor-editor-active #ardis-header { position:relative !important; }
/* Make Elementor sections full-width friendly */
.elementor-section.elementor-section-stretched { width:100% !important; }
/* Fix RTL for Elementor columns */
.elementor-column-wrap { direction:rtl; }

/* ══════════════════════════════
   LIQUID GLASS HEADER
══════════════════════════════ */
#ardis-header {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 2px 24px rgba(0,0,0,.08);
}
/* Ensure nav is on top of hero */
#ardis-header { z-index: 200; }

/* Logo text (store name) */
.ardis-logo-text {
  font-size: 20px;
  font-weight: 900;
  color: var(--green-dark);
  line-height: 1;
  transition: color var(--t);
}
/* When header is colored */
#ardis-header.hdr-colored .ardis-logo-text { color: #fff; }
#ardis-header.hdr-solid   .ardis-logo-text { color: var(--green-dark); }

/* Hero padding offset (because header is sticky + transparent) */
.ardis-hero { padding-top: 100px; padding-bottom: 80px; margin-top: 0; }

/* ══════════════════════════════
   ELEMENTOR PRO COMPATIBILITY
══════════════════════════════ */
/* Make single product page Elementor-editable */
.elementor-page .ardis-product-wrap,
.elementor-page .ardis-tabs { display: block; }

/* Elementor inner sections RTL fix */
.elementor-section .elementor-container,
.e-con-inner { direction: rtl; }

/* Full-width Elementor sections */
.elementor-section.elementor-section-full_width .ardis-wrap { padding: 0; max-width: 100%; }

/* When Elementor Theme Builder overrides header/footer */
body.elementor-template-full-width #ardis-header,
body.elementor-template-full-width #ardis-footer { display: none; }

/* ══════════════════════════════
   CUSTOMIZER: BADGE VISIBILITY
══════════════════════════════ */
.ardis-badge-hidden { display: none !important; }

/* ══════════════════════════════
   WC PRODUCT PAGE – CLEAN UP
══════════════════════════════ */
/* Remove WC default elements that we replace */
.single-product .woocommerce-product-gallery,
.single-product form.cart,
.single-product .woocommerce-tabs,
.single-product .related.products,
.single-product .product_meta,
.single-product .woocommerce-breadcrumb { display: none !important; }

/* ══════════════════════════════
   LIQUID GLASS HEADER (v4)
══════════════════════════════ */
#ardis-header {
  transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
/* When liquid glass + user scrolls down */
#ardis-header.scrolled {
  background: rgba(255,255,255,0.92) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,.12) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
}
/* Glass highlight line at top */
#ardis-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6) 50%, transparent);
  pointer-events: none;
}

/* Logo text next to image */
.ardis-logo-text {
  font-size: 20px;
  font-weight: 900;
  color: var(--green-dark);
  line-height: 1;
}

/* ══════════════════════════════
   ELEMENTOR PRO COMPATIBILITY
══════════════════════════════ */
/* When Elementor draws the header/footer, hide ours */
body.elementor-template-header #ardis-header { display: none !important; }
body.elementor-template-footer #ardis-footer { display: none !important; }
/* Elementor canvas full-width */
body.elementor-page #ardis-header { position: relative; }
/* Make Elementor sections RTL by default */
.elementor-section, .e-con { direction: rtl; }
.elementor-widget-text-editor, .elementor-widget-heading { text-align: right; }
/* Elementor Pro WooCommerce widgets */
.elementor-widget-woocommerce-product-images { direction: rtl; }

/* ── Customizer badge helpers ── */
.avail-badge, .ship-badge, .ret-badge { transition: opacity .2s; }

/* ══════════════════════════════════════════
   FOOTER v5 — Modern, matches site style
══════════════════════════════════════════ */
#ardis-footer {
  background: #162d1e;
  color: #c8d5cc;
  padding: 56px 0 0;
  position: relative;
  overflow: hidden;
}
#ardis-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-dark), var(--green-mid), var(--green-light), var(--green-mid), var(--green-dark));
}

/* Footer layout */
.footer-top {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.4fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

/* Brand col */
.footer-logo-link {
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  text-decoration: none;
}
.footer-logo-link img { height: 40px; filter: brightness(0) invert(1); }
.footer-brand-name {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
}
.footer-desc {
  font-size: 13.5px;
  color: #7a9a85;
  line-height: 1.8;
  margin-bottom: 20px;
  max-width: 280px;
}

/* Trust badges */
.footer-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ftrust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(45,106,79,.25);
  border: 1px solid rgba(45,106,79,.35);
  color: #7ec99a;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 20px;
}
.ftrust-item svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* Nav cols */
.footer-col-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 10px;
}
.footer-col-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px;
  height: 2px;
  background: var(--green-mid);
  border-radius: 2px;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.footer-links a {
  font-size: 13px;
  color: #7a9a85;
  transition: color var(--t), padding-right var(--t);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer-links a::before {
  content: '←';
  font-size: 11px;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity var(--t), transform var(--t);
}
.footer-links a:hover {
  color: #fff;
}
.footer-links a:hover::before {
  opacity: 1;
  transform: translateX(0);
}

/* Contact col */
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 14px;
}
.fci-icon {
  width: 34px;
  height: 34px;
  background: rgba(45,106,79,.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fci-icon svg {
  width: 15px;
  height: 15px;
  stroke: var(--green-light);
  fill: none;
  stroke-width: 1.8;
}
.footer-contact-item span,
.footer-contact-item a {
  font-size: 13px;
  color: #7a9a85;
  line-height: 1.5;
  padding-top: 6px;
  transition: color var(--t);
}
.footer-contact-item a:hover { color: #fff; }

/* Bottom bar */
.footer-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-copy {
  font-size: 12.5px;
  color: #4a6a55;
}
.footer-pay-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.fpay-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: #6a8a75;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  transition: background var(--t), color var(--t);
}
.fpay-badge:hover {
  background: rgba(45,106,79,.2);
  color: #7ec99a;
}
.fpay-badge svg { flex-shrink: 0; }

/* ── Footer responsive ── */
@media (max-width:1100px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width:640px)  { .footer-top { grid-template-columns: 1fr; } .footer-bottom-bar { flex-direction: column; text-align: center; } }

/* ══════════════════════════════════════════
   PRODUCT PAGE — Modern Description
══════════════════════════════════════════ */
/* Tab nav */
.ardis-tabs { margin-top: 40px; padding-top: 4px; }
.tabs-nav {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 28px;
}
.tab-btn {
  padding: 12px 22px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-light);
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: color var(--t);
  border-radius: 8px 8px 0 0;
}
.tab-btn:hover { color: var(--green-mid); background: var(--green-pale); }
.tab-btn.active { color: var(--green-mid); }
.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px; right: 0;
  width: 100%; height: 2px;
  background: var(--green-mid);
  border-radius: 2px;
}
.tab-panel { display: none; animation: fadeInTab .2s ease; }
.tab-panel.active { display: block; }
@keyframes fadeInTab { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

/* Modern description list */
.desc-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.desc-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  color: var(--text-mid);
  line-height: 1.7;
  padding: 10px 14px;
  background: #fafafa;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  transition: background var(--t), border-color var(--t);
}
.desc-list li:hover {
  background: var(--green-pale);
  border-color: rgba(45,106,79,.2);
}
.desc-list li::before {
  content: '✓';
  background: var(--green-mid);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  box-shadow: 0 2px 8px rgba(45,106,79,.3);
}

/* Product short desc */
.product-short-desc {
  font-size: 14.5px;
  color: var(--text-mid);
  line-height: 1.8;
  margin-bottom: 20px;
  padding: 16px;
  background: #fafafa;
  border-radius: var(--r-md);
  border-right: 3px solid var(--green-mid);
}

/* WC product description (entered in editor) */
.tab-panel p {
  font-size: 14.5px;
  color: var(--text-mid);
  line-height: 1.85;
  margin-bottom: 14px;
}
.tab-panel h2, .tab-panel h3 {
  font-size: 18px;
  font-weight: 800;
  margin: 20px 0 10px;
  color: var(--text-dark);
}
.tab-panel ul, .tab-panel ol {
  padding-right: 20px;
  margin-bottom: 14px;
}
.tab-panel ul li, .tab-panel ol li {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.7;
  margin-bottom: 6px;
}

/* ══════════════════════════════════════════
   ORDER FORM — Fully editable via Elementor
══════════════════════════════════════════ */
.order-card {
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.08);
  transition: box-shadow var(--t);
}
.order-card:hover { box-shadow: 0 12px 48px rgba(0,0,0,.12); }

/* Field focus ring */
.o-field input:focus, .o-field select:focus {
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(45,106,79,.1);
  outline: none;
}
/* Error state */
.o-field input.error, .o-field select.error {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(229,57,53,.08);
}
/* Loading state on submit button */
.ardis-buy-btn.loading {
  opacity: .75;
  cursor: wait;
  pointer-events: none;
}
.ardis-buy-btn.loading::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* ╔══════════════════════════════════════════════╗
   ║   PRODUCT PAGE v6 — Full Redesign           ║
   ╚══════════════════════════════════════════════╝ */

/* ── Layout ── */
.sp-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  padding: 36px 0 52px;
}

/* ══ GALLERY ══ */
.sp-gallery { position: sticky; top: 86px; }

.sp-main-img {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #f4f4f4;
  margin-bottom: 14px;
  aspect-ratio: 1/1;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  cursor: zoom-in;
  box-shadow: 0 8px 40px rgba(0,0,0,.10);
}
.sp-main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .25s ease, transform .4s ease;
  display: block;
}
.sp-main-img:hover img { transform: scale(1.03); }
.sp-main-img.loading img { opacity: .5; }

/* Image counter pill */
.sp-img-counter {
  position: absolute;
  bottom: 14px;
  right: 50%;
  transform: translateX(50%);
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 13px;
  border-radius: 20px;
  pointer-events: none;
  letter-spacing: .3px;
}

/* Arrow navigation */
.sp-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t), transform var(--t);
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
  z-index: 5;
  opacity: 0;
}
.sp-main-img:hover .sp-arrow { opacity: 1; }
.sp-prev { right: 12px; }
.sp-next { left: 12px; }
.sp-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.sp-arrow svg { width: 18px; height: 18px; stroke: #333; fill: none; stroke-width: 2.5; }

/* Sale badge on main image */
.sp-sale-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(229,57,53,.4);
}

/* Thumbnail strip */
.sp-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  justify-content: center;   /* center the thumbnails */
  max-width: 500px;
  margin: 0 auto;
  scrollbar-width: thin;
  scrollbar-color: var(--green-pale) transparent;
}
.sp-thumbs::-webkit-scrollbar { height: 4px; }
.sp-thumbs::-webkit-scrollbar-thumb { background: var(--green-pale); border-radius: 4px; }

.sp-thumb {
  width: 58px; height: 58px;
  flex-shrink: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: #f4f4f4;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.sp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.sp-thumb:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.sp-thumb.active { border-color: var(--green-mid); box-shadow: 0 0 0 3px var(--green-pale); }
.sp-thumb:hover img { transform: scale(1.05); }

/* ══ PRODUCT INFO ══ */
.sp-info {
  display: flex;
  flex-direction: column;
}

.sp-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 10px;
  line-height: 1.35;
  order: 2; /* title comes AFTER price visually */
}

.sp-price {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  order: 1; /* price first */
}
.sp-price-main { font-size: 34px; font-weight: 900; color: var(--green-dark); letter-spacing: -0.5px; }
.sp-price-old  { font-size: 18px; font-weight: 500; color: #bbb; text-decoration: line-through; }
.sp-discount-pct {
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
}

.sp-short-desc {
  font-size: 14.5px;
  color: var(--text-mid);
  line-height: 1.85;
  margin-bottom: 16px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  order: 3;
  -webkit-tap-highlight-color: transparent;
}
/* Prevent accidental text-selection highlight on tap, which can look like a stuck hover state */
@media (hover: none) and (pointer: coarse) {
  .sp-short-desc, .sp-short-desc * {
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* Trust badges */
.sp-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  order: 4;
}
.sp-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  transition: transform .2s, box-shadow .2s;
  cursor: default;
}
.sp-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
/* Hide the SVG icon inside badges */
.sp-badge svg { display: none; }
/* Each badge type — modern solid look */
.sp-badge-green {
  background: var(--green-mid);
  color: #fff;
  border-color: var(--green-mid);
  box-shadow: 0 3px 12px rgba(45,106,79,.3);
}
.sp-badge-blue {
  background: #1976d2;
  color: #fff;
  border-color: #1976d2;
  box-shadow: 0 3px 12px rgba(25,118,210,.25);
}
.sp-badge-orange {
  background: #fff;
  color: var(--text-mid);
  border-color: #e0e0e0;
}

/* ══ ORDER FORM — compact, 2 cols ══ */
.sp-order-card {
  order: 5;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.09);
}
.sp-order-hdr {
  background: linear-gradient(135deg, var(--green-mid) 0%, var(--green-dark) 100%);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sp-order-hdr-ico {
  width: 42px; height: 42px;
  background: rgba(255,255,255,.18);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sp-order-hdr-ico svg { width: 20px; height: 20px; fill: #fff; }
.sp-order-hdr h3 { color: #fff; font-size: 17px; font-weight: 800; margin: 0; }
.sp-order-hdr p  { color: rgba(255,255,255,.75); font-size: 12px; margin: 2px 0 0; }
.sp-order-body { padding: 18px 16px 16px; }

/* Form rows — 2 per row */
.sf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.sf-group { display: flex; flex-direction: column; gap: 5px; }
.sf-full  { grid-column: 1 / -1; }
.sf-group label { font-size: 12px; font-weight: 700; color: var(--text-mid); }
.sf-group label .req { color: var(--red); margin-right: 2px; }

.sf-field {
  position: relative;
  display: flex;
  align-items: center;
}
.sf-field input,
.sf-field select {
  width: 100%;
  height: 42px;
  border: 1.5px solid #e0e0e0;
  border-radius: var(--r-sm);
  padding: 0 12px 0 34px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-mid);
  background: #fff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  direction: rtl;
  text-align: right;
  appearance: none;
  -webkit-appearance: none;
}
.sf-field input::placeholder { color: #bbb; font-size: 12.5px; }
.sf-field input:focus,
.sf-field select:focus {
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(45,106,79,.1);
}
.sf-ico {
  position: absolute;
  left: 10px;
  pointer-events: none;
  display: flex;
}
.sf-ico svg { width: 14px; height: 14px; stroke: #ccc; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sf-chev { position: absolute; right: 9px; pointer-events: none; display: flex; }
.sf-chev svg { width: 12px; height: 12px; stroke: #ccc; fill: none; stroke-width: 2; }
.sf-field select { padding-right: 28px; }

/* Mini product row */
.sf-mini-product {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0 0;
  border-top: 1.5px dashed var(--border);
  margin-top: 4px;
}
.sf-thumb {
  width: 58px; height: 58px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  flex-shrink: 0;
}
.sf-mini-info { flex: 1; text-align: right; }
.sf-mini-name  { font-size: 12.5px; font-weight: 700; color: var(--text-dark); margin-bottom: 3px; }
.sf-mini-price { font-size: 13px; font-weight: 800; color: var(--red); }
.sf-qty {
  display: flex;
  align-items: center;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.sf-qty button {
  width: 30px; height: 30px;
  border: none; cursor: pointer;
  font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.sfq-minus { background: #f2f2f2; color: #555; }
.sfq-minus:hover { background: #e8e8e8; }
.sfq-val { width: 30px; text-align: center; font-family: var(--font); font-size: 13px; font-weight: 700; background: #fff; border: none; pointer-events: none; }
.sfq-plus { background: var(--green-mid); color: #fff; }
.sfq-plus:hover { background: var(--green-dark); }

/* Summary */
.sf-summary { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.sf-sum-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.sf-sum-lbl  { color: var(--text-light); }
.sf-sum-val  { font-weight: 700; color: var(--text-dark); }
.sf-sum-free { font-weight: 700; color: var(--green-mid); }
.sf-sum-total {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-dark);
  border-top: 1.5px solid var(--border);
  padding-top: 10px;
  margin-top: 4px;
}

/* Buy button */
.sf-buy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  background: linear-gradient(135deg, var(--green-light) 0%, var(--green-dark) 100%);
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: opacity .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(27,67,50,.35);
}
.sf-buy-btn:hover {
  opacity: .93;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(27,67,50,.45);
}
.sf-buy-btn:active { transform: translateY(0); }
.sf-buy-btn.loading { opacity: .75; pointer-events: none; }

/* ══ DESCRIPTION SECTION ══ */
.sp-desc-section {
  padding: 40px 0 48px;
  border-top: 2px solid var(--border);
}
.sp-desc-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 22px;
  position: relative;
  padding-bottom: 10px;
}
.sp-desc-title::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 40px; height: 3px;
  background: var(--green-mid);
  border-radius: 2px;
}

/* Description as card grid */
.desc-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.desc-card {
  display: flex;
  flex-direction: row;      /* normal row, RTL handles direction */
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.65;
  transition: background .2s, border-color .2s, transform .2s;
  text-align: right;
  direction: rtl;           /* this puts icon on right, text flows right→left */
}
.desc-card:hover {
  background: var(--green-pale);
  border-color: rgba(45,106,79,.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(45,106,79,.12);
}
.desc-card-icon {
  width: 24px; height: 24px;
  background: var(--green-mid);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(45,106,79,.35);
  margin-top: 2px;
  /* icon naturally on right with direction:rtl */
}

/* desc-list (for <ul> in description) */
.desc-list { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; }
.desc-list li {
  display: flex;
  flex-direction: row;      /* normal row — RTL puts icon on right */
  align-items: flex-start;
  gap: 12px;
  padding: 12px 15px;
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 14.5px;
  color: var(--text-mid);
  line-height: 1.65;
  transition: background .2s, border-color .2s, transform .2s;
  direction: rtl;           /* icon right, text flows right→left */
  text-align: right;
}
.desc-list li:hover {
  background: var(--green-pale);
  border-color: rgba(45,106,79,.2);
  transform: translateX(3px); /* slide right (toward right edge) in RTL */
}
.desc-list li::before {
  content: '✓';
  background: var(--green-mid);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  min-width: 24px; height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(45,106,79,.35);
  margin-top: 2px;
  /* icon on right naturally with direction:rtl */
}

/* ══ RELATED PRODUCTS CAROUSEL ══ */
.sp-related { padding: 0 0 56px; }
.sp-related-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.sp-related-header h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-dark);
  position: relative;
  padding-bottom: 10px;
}
.sp-related-header h2::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 40px; height: 3px;
  background: var(--green-mid);
  border-radius: 2px;
}

/* Carousel */
.sp-carousel-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sp-carousel-viewport {
  overflow: hidden;
  border-radius: 16px;
  flex: 1;
}
.sp-carousel-track {
  display: flex;
  gap: 16px;
  transition: transform .55s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}

.sp-rel-card {
  flex: 0 0 calc(25% - 12px);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .25s, transform .25s;
}
.sp-rel-card:hover {
  box-shadow: 0 10px 36px rgba(0,0,0,.12);
  transform: translateY(-4px);
}
.sp-rel-img-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  background: #f4f4f4;
  aspect-ratio: 1/1;
}
.sp-rel-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.sp-rel-card:hover .sp-rel-img-wrap img { transform: scale(1.06); }

.sp-rel-body { padding: 12px 14px 14px; }
.sp-rel-name {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 7px;
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--t);
}
.sp-rel-name:hover { color: var(--green-mid); }
.sp-rel-price { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.sp-rel-main { font-size: 15px; font-weight: 800; color: var(--green-dark); }
.sp-rel-old  { font-size: 12px; font-weight: 500; color: #aaa; text-decoration: line-through; }
.sp-rel-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--green-mid);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 9px;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background var(--t), transform .15s;
}
.sp-rel-btn:hover { background: var(--green-dark); transform: translateY(-1px); color: #fff; }

/* Carousel buttons */
.sp-car-btn {
  width: 42px; height: 42px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  transition: background var(--t), border-color var(--t), transform .15s;
}
.sp-car-btn:hover { background: var(--green-mid); border-color: var(--green-mid); transform: scale(1.05); }
.sp-car-btn:hover svg { stroke: #fff; }
.sp-car-btn svg { width: 18px; height: 18px; stroke: var(--text-mid); fill: none; stroke-width: 2.5; }
.sp-car-btn:disabled { opacity: .35; pointer-events: none; }

/* Auto-rotate progress bar */
.sp-carousel-wrap::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 54px; right: 54px;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.sp-car-progress {
  position: absolute;
  bottom: -6px;
  left: 54px;
  height: 3px;
  background: var(--green-mid);
  border-radius: 2px;
  animation: carProgress 15s linear infinite;
  z-index: 1;
}
@keyframes carProgress {
  from { width: 0%; left: 54px; }
  to   { width: calc(100% - 108px); left: 54px; }
}

/* Dots */
.sp-car-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
}
.sp-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--t), transform var(--t);
}
.sp-dot.active {
  background: var(--green-mid);
  transform: scale(1.3);
  width: 22px;
  border-radius: 4px;
}

/* ╔══════════════════════════════════════════════╗
   ║  FOOTER v5.1 — Dark + Shining Effects       ║
   ╚══════════════════════════════════════════════╝ */
#ardis-footer {
  background: linear-gradient(180deg, #1a3325 0%, #0f2018 100%);
  position: relative;
  overflow: hidden;
}
/* Shining particles/glow effect */
#ardis-footer::after {
  content: '';
  position: absolute;
  top: -120px;
  right: 10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(45,106,79,.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
#ardis-footer .ardis-wrap::before {
  content: '';
  position: absolute;
  bottom: 20%;
  left: 5%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(45,154,111,.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
/* Top gradient line — glowing */
#ardis-footer > .ardis-wrap > .footer-top {
  position: relative;
  z-index: 1;
}
#ardis-footer > .ardis-wrap > .footer-bottom-bar {
  position: relative;
  z-index: 1;
}
#ardis-footer::before {
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--green-dark) 20%,
    var(--green-mid) 40%,
    var(--green-light) 50%,
    var(--green-mid) 60%,
    var(--green-dark) 80%,
    transparent 100%);
  box-shadow: 0 0 16px rgba(45,154,111,.5);
}
/* Shining text effect on brand name */
.footer-brand-name {
  background: linear-gradient(135deg, #fff 30%, var(--green-light) 70%, #fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shineText 4s linear infinite;
}
@keyframes shineText {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}
/* Glowing link hover */
.footer-links a:hover {
  color: var(--green-light);
  text-shadow: 0 0 12px rgba(45,154,111,.4);
}
/* Glowing fci-icon */
.fci-icon {
  background: rgba(45,106,79,.25);
  border: 1px solid rgba(45,154,111,.2);
  box-shadow: 0 0 10px rgba(45,106,79,.15);
}
.fci-icon svg { stroke: var(--green-light); }
/* Glowing trust items */
.ftrust-item {
  box-shadow: 0 0 12px rgba(45,106,79,.15);
}
/* Bottom bar */
.footer-bottom-bar {
  border-top: 1px solid rgba(255,255,255,.06);
}
/* Pay badges with glow */
.fpay-badge {
  background: rgba(45,106,79,.12);
  border: 1px solid rgba(45,106,79,.2);
  color: #5a8a6a;
  transition: all .25s;
}
.fpay-badge:hover {
  background: rgba(45,106,79,.25);
  color: var(--green-light);
  box-shadow: 0 0 10px rgba(45,154,111,.2);
}

/* ══ PRODUCT PAGE RESPONSIVE ══ */
@media (max-width: 960px) {
  .sp-layout { grid-template-columns: 1fr; gap: 28px; padding-top: 24px; }
  .sp-gallery { position: static; }
  .sp-rel-card { flex: 0 0 calc(50% - 8px); }
  .desc-card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Keep 2-column form on mobile — user wants it */
  .sf-row { grid-template-columns: 1fr 1fr; }
  .sf-full { grid-column: 1 / -1; }
  .sp-rel-card { flex: 0 0 calc(50% - 6px); }
  .sp-title { font-size: 20px; }
  .sp-price-main { font-size: 22px; }
  .sp-carousel-wrap::after, .sp-car-progress { left: 44px; right: 44px; }
}
@media (max-width: 440px) {
  .sp-rel-card { flex: 0 0 calc(100% - 0px); }
}

/* ══════════════════════════════════════════════
   DESCRIPTION EMOJI ICONS + FIXES v6.1
══════════════════════════════════════════════ */

/* Emoji icon inside each desc item */
.desc-note-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.1));
}

/* desc-list with emoji — override ::before */
.desc-list li:has(.desc-note-icon)::before {
  display: none; /* hide the ✓ circle when we have emoji */
}
/* Fallback for browsers without :has() */
.desc-list li .desc-note-icon ~ span {
  flex: 1;
}

/* desc-card with emoji */
.desc-card .desc-card-icon:not(:empty) {
  background: none;
  box-shadow: none;
  font-size: 20px;
  width: auto;
  height: auto;
}

/* desc-card-icon when it has emoji (not ✓) */
.desc-card-grid .desc-card-icon {
  font-size: 20px;
  background: none;
  box-shadow: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2px;
}

/* ── Images slightly smaller ── */
.sp-thumb {
  width: 64px;
  height: 64px;
}

/* ── Product cards on homepage/shop — slightly smaller images ── */
.pcard-img img { /* max-height removed */ }
.pcard { max-width: 280px; }
.products-grid { gap: 16px; }

/* ── Mobile form: keep 2 cols always ── */
/* Override any previous single-column rules */
@media (max-width: 640px) {
  .sf-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }
  .sf-full {
    grid-column: 1 / -1 !important;
  }
  /* Make fields slightly smaller on mobile to fit 2 */
  .sf-field input,
  .sf-field select {
    height: 40px;
    font-size: 12px;
    padding: 0 10px 0 30px;
  }
  .sf-field input::placeholder { font-size: 11.5px; }
  .sf-group label { font-size: 11px; }
  .sf-ico svg { width: 13px; height: 13px; }
}
@media (max-width: 360px) {
  .sf-field input,
  .sf-field select {
    height: 38px;
    font-size: 11.5px;
    padding: 0 8px 0 28px;
  }
}

/* ── Short desc — clean, no box ── */
.sp-short-desc p { margin: 0; }
.sp-short-desc {
  font-size: 14.5px !important;
  color: var(--text-mid) !important;
  line-height: 1.85 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  margin-bottom: 16px !important;
}

/* ══════════════════════════════════════════════
   PRODUCT PAGE v6.3 — Final fixes
══════════════════════════════════════════════ */

/* SVG checkmark in description */
.desc-svg-check {
  flex-shrink: 0;
  margin-top: 2px;
  display: block;
}
/* Remove the CSS ::before check when SVG is used */
.desc-list li:has(.desc-svg-check)::before { display: none; }

/* desc-list: RTL, icon on right, text right→left */
.desc-list { direction: rtl; }
.desc-list li {
  direction: rtl;
  text-align: right;
  display: flex;
  flex-direction: row;  /* RTL: icon on right, text flows left */
  align-items: flex-start;
  gap: 12px;
}

/* desc-card: same RTL fix */
.desc-card-grid { direction: rtl; }
.desc-card {
  direction: rtl;
  text-align: right;
  flex-direction: row;
}

/* BADGES: show SVG, override previous display:none */
.sp-badge svg {
  display: inline-block !important;
  flex-shrink: 0;
}
/* Badge: availability — white with border */
.sp-badge-orange {
  background: #fff !important;
  color: var(--text-mid) !important;
  border-color: #e0e0e0 !important;
  box-shadow: none !important;
}
.sp-badge-orange svg { stroke: var(--text-mid); }
/* Return badge */
.sp-badge-ret {
  background: #fff;
  color: var(--text-mid);
  border: 1.5px solid #e0e0e0;
  border-radius: 12px;
}
.sp-badge-ret svg { stroke: var(--text-mid); }

/* Price order fix — sp-info is flex-column */
.sp-info { display: flex; flex-direction: column; }
.sp-price  { order: 1; }
.sp-title  { order: 2; font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.sp-short-desc { order: 3; }
.sp-badges { order: 4; }
.sp-order-card { order: 5; }

/* Price — bigger, bold */
.sp-price-main {
  font-size: 36px !important;
  font-weight: 900 !important;
  color: var(--green-dark) !important;
  letter-spacing: -0.5px;
}

/* Footer lighter */
#ardis-footer,
#ardis-footer .ardis-wrap {
  background-color: transparent;
}
/* Override previous dark backgrounds */
.footer-brand-col,
.footer-nav-col,
.footer-contact-col { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════
   PRODUCT PAGE BADGES v6.4
   شحن مجاني = green filled (like image)
   متوفر     = white outlined
════════════════════════════════════════════════ */
.sp-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  border: 2px solid transparent !important;
  transition: transform .2s, box-shadow .2s !important;
}
.sp-badge svg {
  display: inline-block !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
}

/* شحن مجاني — green filled, white text (exactly like the image) */
.sp-badge-ship {
  background: var(--green-mid) !important;
  color: #fff !important;
  border-color: var(--green-mid) !important;
  box-shadow: 0 4px 14px rgba(45,106,79,.35) !important;
}
.sp-badge-ship svg { stroke: #fff !important; }
.sp-badge-ship:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(45,106,79,.45) !important; }

/* متوفر — white bg, dark border, dark text */
.sp-badge-avail {
  background: #fff !important;
  color: var(--text-mid) !important;
  border-color: #d0d0d0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.06) !important;
}
.sp-badge-avail svg { stroke: var(--text-mid) !important; }

/* ════════════════════════════════════════════════
   WHY US SECTION — Pro SVG Cards
   Matches footer dark style, fancy & stylish
════════════════════════════════════════════════ */
.why-section {
  background: linear-gradient(180deg, #f7f9f7 0%, #eef4ee 100%);
  padding: 64px 0 72px;
  position: relative;
  overflow: hidden;
}
.why-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 50%, rgba(45,106,79,.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 50%, rgba(45,106,79,.04) 0%, transparent 70%);
  pointer-events: none;
}

.why-header {
  text-align: center;
  margin-bottom: 44px;
  position: relative;
  z-index: 1;
}
.why-label {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--green-mid);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 4px 16px;
  background: var(--green-pale);
  border-radius: 20px;
}
.why-title {
  font-size: 32px;
  font-weight: 900;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.2;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
  z-index: 1;
}

.why-card {
  background: #fff;
  border: 1.5px solid rgba(45,106,79,.1);
  border-radius: 20px;
  padding: 32px 24px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.25,.46,.45,.94),
              box-shadow .3s ease,
              border-color .3s ease;
  cursor: default;
}
/* Subtle top accent line */
.why-card::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--green-mid), transparent);
  border-radius: 0 0 3px 3px;
  opacity: 0;
  transition: opacity .3s;
}
.why-card:hover::before { opacity: 1; }
/* Glow background on hover */
.why-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(45,106,79,.06) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .3s;
}
.why-card:hover::after { opacity: 1; }

.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(45,106,79,.14);
  border-color: rgba(45,106,79,.25);
}

/* Icon wrapper — dark circle */
.why-icon-wrap {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-mid) 100%);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  position: relative;
  z-index: 1;
  box-shadow:
    0 8px 24px rgba(27,67,50,.25),
    inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .3s, box-shadow .3s;
}
.why-card:hover .why-icon-wrap {
  transform: scale(1.08) rotate(-3deg);
  box-shadow: 0 12px 32px rgba(27,67,50,.35);
}
.why-icon-wrap svg {
  width: 28px;
  height: 28px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.8;
}

.why-card-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 7px;
  position: relative;
  z-index: 1;
}
.why-card-sub {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.55;
  position: relative;
  z-index: 1;
}

/* Responsive */
@media (max-width: 900px) {
  .why-grid { grid-template-columns: repeat(2,1fr); gap: 16px; }
  .why-title { font-size: 26px; }
}
@media (max-width: 520px) {
  .why-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .why-card { padding: 24px 16px 20px; }
  .why-icon-wrap { width: 52px; height: 52px; border-radius: 14px; }
  .why-icon-wrap svg { width: 22px; height: 22px; }
  .why-card-title { font-size: 14px; }
}

/* ════════════════════════════════════════════════
   REVIEWS SECTION v6.5
   Same card style as why-us, color-reactive
════════════════════════════════════════════════ */
.reviews-section {
  background: #fff;
  padding: 64px 0 72px;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
}

.review-card {
  background: linear-gradient(160deg, #f7fdf9 0%, #eef7f2 100%);
  border: 1.5px solid rgba(45,106,79,.12);
  border-radius: 20px;
  padding: 28px 24px 24px;
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.25,.46,.45,.94), box-shadow .3s;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.review-card::before {
  content:'';
  position:absolute;
  top:0;left:20%;right:20%;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--green-mid),transparent);
  border-radius:0 0 3px 3px;
  opacity:0;
  transition:opacity .3s;
}
.review-card:hover::before { opacity:1; }
.review-card:hover {
  transform:translateY(-6px);
  box-shadow:0 16px 48px rgba(45,106,79,.13);
  border-color:rgba(45,106,79,.25);
}

.review-quote-icon {
  width:36px; height:36px;
  background:var(--green-mid);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 4px 12px rgba(45,106,79,.3);
}
.review-quote-icon svg {
  width:18px; height:18px;
  stroke:#fff; fill:none;
}

.review-stars {
  color:#f59e0b;
  font-size:16px;
  letter-spacing:1px;
}

.review-text {
  font-size:14.5px;
  color:var(--text-mid);
  line-height:1.75;
  flex:1;
  font-style:italic;
}

.review-author {
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:14px;
  border-top:1px solid rgba(45,106,79,.1);
  margin-top:auto;
}
.review-avatar {
  width:42px; height:42px;
  background:linear-gradient(135deg,var(--green-dark),var(--green-mid));
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 4px 12px rgba(27,67,50,.25);
}
.review-avatar svg { width:20px; height:20px; stroke:#fff; fill:none; stroke-width:1.8; }
.review-name  { font-size:13.5px; font-weight:800; color:var(--text-dark); }
.review-badge {
  font-size:11.5px;
  font-weight:700;
  color:var(--green-mid);
  background:var(--green-pale);
  padding:2px 9px;
  border-radius:20px;
  display:inline-block;
  margin-top:3px;
}
/* Color-reactive: review badge uses primary */
.review-badge { color:var(--green-mid); background:var(--green-pale); }

@media(max-width:900px){ .reviews-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:540px){ .reviews-grid{grid-template-columns:1fr;} }

/* ════════════════════════════════════════════════
   FAQ SECTION v6.5
   Accordion style, matches site aesthetic
════════════════════════════════════════════════ */
.faq-section {
  background: linear-gradient(180deg, #f7f9f7 0%, #eef4ee 100%);
  padding: 64px 0 72px;
  position: relative;
  overflow: hidden;
}
.faq-section::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 60% 50% at 80% 50%,rgba(45,106,79,.05) 0%,transparent 70%);
  pointer-events:none;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
  position:relative;z-index:1;
}

.faq-item {
  background: #fff;
  border: 1.5px solid rgba(45,106,79,.1);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .25s, box-shadow .25s;
}
.faq-item:hover,
.faq-item.open {
  border-color: var(--green-mid);
  box-shadow: 0 6px 24px rgba(45,106,79,.1);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-dark);
  gap: 12px;
  user-select: none;
}
.faq-q span { flex: 1; text-align: right; }

.faq-chevron {
  width: 18px; height: 18px;
  stroke: var(--green-mid);
  fill: none;
  flex-shrink: 0;
  transition: transform .3s ease;
}
.faq-item.open .faq-chevron { transform: rotate(180deg); }

/* Left accent line on open */
.faq-item.open .faq-q { color: var(--green-mid); }

.faq-a {
  max-height: 0 !important;
  overflow: hidden !important;
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.75;
  padding: 0 20px !important;
  text-align: right;
  transition: max-height .4s ease, padding .35s ease;
  border-top: 0px solid rgba(45,106,79,.1);
}
.faq-item.open .faq-a,
.ardis-faq-item.open .faq-a {
  max-height: 500px !important;
  padding: 14px 20px 18px !important;
  border-top-width: 1px;
}

@media(max-width:700px){ .faq-grid{grid-template-columns:1fr;} }

/* ════════════════════════════════════════════════
   WHY-US: icon text RIGHT align (text inside cards)
   + color-reactive hover
════════════════════════════════════════════════ */
.why-card { text-align: center; }
/* icon wrap is centered — stays center */
/* But for footer responsive use primary color vars */
.why-icon-wrap {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-mid) 100%);
}

/* ════════════════════════════════════════════════
   FOOTER: color-reactive (uses CSS vars from customizer)
════════════════════════════════════════════════ */
#ardis-footer::before {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--green-dark) 20%,
    var(--green-mid) 40%,
    var(--green-light) 50%,
    var(--green-mid) 60%,
    var(--green-dark) 80%,
    transparent 100%) !important;
  box-shadow: 0 0 20px var(--green-mid);
}
#ardis-footer::after {
  background: radial-gradient(circle, rgba(var(--green-mid-rgb,45,106,79),.2) 0%, transparent 70%);
}
.footer-col-title::after { background: var(--green-mid); }
.fci-icon { background: rgba(45,106,79,.2); border-color: rgba(45,106,79,.25); }
.fci-icon svg { stroke: var(--green-light); }
.ftrust-item { background: rgba(45,106,79,.2); border-color: rgba(45,106,79,.3); color: var(--green-light); }
.fpay-badge:hover { background: rgba(45,106,79,.25); color: var(--green-light); }

/* ════════════════════════════════════════════════
   COD FORM — narrower width
════════════════════════════════════════════════ */
/* Narrow the order card on single product page */
.sp-info .sp-order-card {
  max-width: 460px;
}

/* On mobile keep full width */
@media(max-width:960px) {
  .sp-info .sp-order-card { max-width: 100%; }
}

/* ════════════════════════════════════════════════
   COD FORM v6.6 FIXES
════════════════════════════════════════════════ */

/* ── Form slightly wider (+2%) ── */
.sp-info .sp-order-card {
  max-width: 469px; /* was 460px, +2% */
}
@media(max-width:960px) {
  .sp-info .sp-order-card { max-width: 100%; }
}

/* ── Cart icon in header: outline style (fill:none) ── */
.sp-order-hdr-ico svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 1.8 !important;
}

/* ── Field icons: LEFT side, color matches primary ── */
.sf-ico {
  position: absolute !important;
  right: auto !important;
  left: 10px !important;   /* LEFT side of input */
  pointer-events: none;
  display: flex;
  align-items: center;
}
.sf-ico svg {
  width: 15px !important;
  height: 15px !important;
  stroke: var(--green-mid) !important; /* color-reactive with site primary */
  fill: none !important;
  stroke-width: 1.8 !important;
  opacity: 0.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity .2s;
}
/* When field is focused, icon is more visible */
.sf-field:focus-within .sf-ico svg {
  opacity: 1;
  stroke: var(--green-mid) !important;
}
/* Input padding: leave space on left for icon */
.sf-field input,
.sf-field select {
  padding-left: 34px !important;  /* space for left icon */
  padding-right: 12px !important; /* no icon on right */
}
/* Select: chevron stays on right */
.sf-chev {
  position: absolute;
  left: auto !important;
  right: 9px !important;
}
.sf-field select {
  padding-right: 28px !important;
  padding-left: 34px !important;
}

/* ── (اختياري) label — lighter color ── */
.req-opt {
  color: var(--text-light) !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  margin-right: 3px;
}

/* ── DESCRIPTION: exactly like Image 1 ──
   Simple list, items right-aligned, check SVG on right,
   clean white card with subtle border, single column
── */
.sp-desc-section {
  padding: 36px 0 44px;
  border-top: 2px solid var(--border);
}
.sp-desc-title {
  font-size: 24px;
  font-weight: 900;
  color: var(--text-dark);
  margin-bottom: 24px;
  text-align: right;
  padding-bottom: 10px;
  position: relative;
}
.sp-desc-title::after {
  content:'';
  position:absolute;
  bottom:0; right:0;
  width:40px; height:3px;
  background:var(--green-mid);
  border-radius:2px;
}

/* The list wrapper: single white card */
.desc-list {
  background: #fff !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 8px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  direction: rtl !important;
  list-style: none !important;
}

/* Each item: clean row, NO background per item, divider line */
.desc-list li {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 13px 20px !important;
  background: none !important;
  border: none !important;
  border-bottom: 1px solid #f0f0f0 !important;
  border-radius: 0 !important;
  font-size: 14.5px !important;
  color: var(--text-dark) !important;
  line-height: 1.5 !important;
  direction: rtl !important;
  text-align: right !important;
  transition: background .18s !important;
  transform: none !important;
}
.desc-list li:last-child {
  border-bottom: none !important;
}
.desc-list li:hover {
  background: #fafcfa !important;
  transform: none !important;
}
/* Hide CSS ::before — we use SVG */
.desc-list li::before { display: none !important; }

/* SVG check: right side (first in RTL row) */
.desc-svg-check {
  flex-shrink: 0 !important;
  display: block !important;
  min-width: 22px !important;
}
/* The check circle fills with primary color */
.desc-svg-check circle:first-child {
  fill: var(--green-mid) !important;
  fill-opacity: 0.1 !important;
}
.desc-svg-check circle:last-of-type {
  stroke: var(--green-mid) !important;
}
.desc-svg-check polyline {
  stroke: var(--green-mid) !important;
}

/* Text span */
.desc-list li span:not(.desc-svg-check) { flex: 1; }

/* desc-card-grid: also same treatment if used */
.desc-card-grid {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.desc-card {
  padding: 13px 20px !important;
  background: none !important;
  border: none !important;
  border-bottom: 1px solid #f0f0f0 !important;
  border-radius: 0 !important;
  font-size: 14.5px !important;
  color: var(--text-dark) !important;
  direction: rtl !important;
  text-align: right !important;
  transform: none !important;
  box-shadow: none !important;
}
.desc-card:last-child { border-bottom: none !important; }
.desc-card:hover { background: #fafcfa !important; transform: none !important; box-shadow: none !important; }
.desc-card-grid .desc-card-icon {
  background: none !important;
  box-shadow: none !important;
  width: 22px; height: 22px;
}

/* ════════════════════════════════════════════════
   COD FORM — x2 wider  v6.7
════════════════════════════════════════════════ */
.sp-info .sp-order-card,
.sp-info .sp-order-card--wide {
  max-width: 100% !important; /* fill full right column */
  width: 100% !important;
}

/* ════════════════════════════════════════════════
   DESCRIPTION — desc-wrapper style  v6.7
   Matches the HTML/CSS example given, adapted to
   site colors (var(--green-mid) reactive).
════════════════════════════════════════════════ */
.desc-wrapper {
  margin-top: 40px;
  font-family: var(--font) !important;
  direction: rtl !important;
  text-align: right !important;
  padding-bottom: 52px;
}

/* Title */
.desc-title-ardis {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: var(--text-dark) !important;
  margin-bottom: 18px !important;
  direction: rtl !important;
  text-align: right !important;
  position: relative;
  padding-bottom: 10px;
}
.desc-title-ardis::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 40px; height: 3px;
  background: var(--green-mid);
  border-radius: 2px;
}

/* White box */
.desc-box-ardis {
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 6px 0 !important;
  box-shadow: 0 6px 28px rgba(0,0,0,.07) !important;
  border: 1px solid #efefef !important;
  direction: rtl !important;
}

/* List reset */
.desc-ul-ardis {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  direction: rtl !important;
}

/* Each list item */
.desc-li-ardis {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;   /* RTL: check on right, text left */
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 14px 22px !important;
  margin: 0 !important;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  color: #222 !important;
  direction: rtl !important;
  text-align: right !important;
  border-bottom: 1px solid #f4f4f4 !important;
  transition: background .18s !important;
  list-style: none !important;
}
.desc-li-ardis:last-child {
  border-bottom: none !important;
}
.desc-li-ardis:hover {
  background: #f8fdf9 !important;
}

/* SVG check icon */
.dli-check {
  flex-shrink: 0 !important;
  display: block !important;
  margin-top: 2px !important;
}
/* Color-reactive circle fill */
.dli-check circle:first-child {
  fill: var(--green-mid) !important;
  fill-opacity: 0.1 !important;
  stroke: var(--green-mid) !important;
  stroke-width: 1.6 !important;
}
.dli-check polyline {
  stroke: var(--green-mid) !important;
}

/* Text span */
.desc-li-ardis > span {
  flex: 1 !important;
}

/* Override any old desc styles that might conflict */
.desc-wrapper .desc-list,
.desc-wrapper .desc-card-grid { display: none !important; }

/* Remove old sp-desc-section if it still exists */
.sp-desc-section { display: none !important; }

/* ════════════════════════════════════════════════
   v6.8 FIXES
════════════════════════════════════════════════ */

/* ── 1. Description: remove gap between lines ── */
.desc-li-ardis {
  padding: 11px 22px !important; /* was 14px — reduce vertical space */
  margin: 0 !important;
}

/* ── 2. Description hover: color-reactive ── */
.desc-li-ardis:hover {
  background: var(--green-pale) !important;
  border-right: 3px solid var(--green-mid) !important;
  padding-right: 19px !important; /* compensate border */
}
.desc-li-ardis:hover .dli-check circle:first-child {
  fill-opacity: 0.2 !important;
}

/* ── 3. COD form narrower by 10% ── */
.sp-info .sp-order-card,
.sp-info .sp-order-card--wide {
  max-width: 90% !important;
  width: 90% !important;
  margin-right: 0 !important;
}
@media(max-width:960px) {
  .sp-info .sp-order-card,
  .sp-info .sp-order-card--wide {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ── 4. Footer background: uses primary color vars ── */
#ardis-footer {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--green-dark) 85%, #000 15%) 0%,
    color-mix(in srgb, var(--green-dark) 95%, #000 30%) 100%
  ) !important;
}
/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  #ardis-footer {
    background: linear-gradient(180deg, #162d1e 0%, #0f2018 100%) !important;
  }
}
/* Footer glow uses primary */
#ardis-footer::before {
  box-shadow: 0 0 24px var(--green-mid) !important;
}
#ardis-footer::after {
  background: radial-gradient(circle, var(--green-pale) 0%, transparent 70%) !important;
  opacity: 0.15 !important;
}

/* ── 5. Products section — why-header style ── */
.why-sub-text {
  font-size: 14px;
  color: var(--text-light);
  margin-top: 6px;
  margin-bottom: 18px;
  font-weight: 400;
}
.ardis-view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--green-mid);
  border: 2px solid var(--green-pale);
  padding: 7px 18px;
  border-radius: 20px;
  text-decoration: none;
  transition: background var(--t), border-color var(--t), color var(--t);
  margin-top: 4px;
}
.ardis-view-all-btn:hover {
  background: var(--green-pale);
  border-color: var(--green-mid);
  color: var(--green-dark);
}

/* why-header when used for products section */
.ardis-section .why-header {
  text-align: center;
}

/* ════════════════════════════════════════════════
   DESCRIPTION: 1% less spacing + divider line  v6.9
════════════════════════════════════════════════ */
.desc-li-ardis {
  padding: 10px 22px !important; /* was 11px */
}

/* Fancy divider between gallery/form and description */
.sp-layout + .desc-wrapper {
  position: relative;
  padding-top: 44px;
}
.sp-layout + .desc-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--green-pale) 15%,
    var(--green-mid) 35%,
    var(--green-mid) 65%,
    var(--green-pale) 85%,
    transparent 100%
  );
}
/* Small decorative dot in the center of the divider */
.sp-layout + .desc-wrapper::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px; height: 8px;
  background: var(--green-mid);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--green-pale);
}

/* ════════════════════════════════════════════════
   CONTACT PAGE v6.9
════════════════════════════════════════════════ */
.contact-page {
  padding: 0 0 80px;
  min-height: 60vh;
}

.contact-hero {
  text-align: center;
  padding: 48px 0 40px;
}
.contact-hero-title {
  font-size: 36px;
  font-weight: 900;
  color: var(--text-dark);
  margin: 10px 0 10px;
  line-height: 1.2;
}
.contact-hero-sub {
  font-size: 15px;
  color: var(--text-light);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.7;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 28px;
  align-items: start;
}

/* ── Contact Cards ── */
.contact-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ccard {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: #fff;
  border: 1.5px solid rgba(45,106,79,.1);
  border-radius: 16px;
  text-decoration: none;
  color: var(--text-dark);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  position: relative;
  overflow: hidden;
}
.ccard::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--green-pale) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .25s;
}
.ccard:hover {
  transform: translateX(-4px);
  box-shadow: 0 8px 32px rgba(45,106,79,.13);
  border-color: var(--green-mid);
  color: var(--text-dark);
}
.ccard:hover::before { opacity: 1; }

.ccard-icon-wrap {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: transform .25s;
}
.ccard:hover .ccard-icon-wrap { transform: scale(1.08) rotate(-3deg); }
.ccard-icon-wrap svg { width: 24px; height: 24px; }

.ccard-phone   .ccard-icon-wrap { background: linear-gradient(135deg,var(--green-dark),var(--green-mid)); }
.ccard-phone   .ccard-icon-wrap svg { stroke: #fff; fill: none; }
.ccard-whatsapp .ccard-icon-wrap { background: linear-gradient(135deg,#128c7e,#25d366); }
.ccard-whatsapp .ccard-icon-wrap svg { fill: #fff; }
.ccard-email   .ccard-icon-wrap { background: linear-gradient(135deg,#1976d2,#42a5f5); }
.ccard-email   .ccard-icon-wrap svg { stroke: #fff; fill: none; }
.ccard-address .ccard-icon-wrap { background: linear-gradient(135deg,#e65100,#ff9800); }
.ccard-address .ccard-icon-wrap svg { stroke: #fff; fill: none; }

.ccard-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  position: relative;
  z-index: 1;
  text-align: right;
}
.ccard-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ccard-value {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text-dark);
  direction: ltr;
  text-align: right;
}
.ccard-hint {
  font-size: 12px;
  color: var(--green-mid);
  font-weight: 600;
}
.ccard-arrow {
  width: 28px; height: 28px;
  background: var(--green-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: background .2s, transform .2s;
}
.ccard:hover .ccard-arrow { background: var(--green-mid); transform: translateX(-3px); }
.ccard-arrow svg { width: 14px; height: 14px; stroke: var(--green-mid); }
.ccard:hover .ccard-arrow svg { stroke: #fff; }
.ccard-address { cursor: default; }
.ccard-address:hover { transform: none; }

/* Social row */
.contact-social-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.social-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  flex: 1;
  justify-content: center;
  transition: transform .2s, box-shadow .2s;
}
.social-pill:hover { transform: translateY(-3px); }
.social-fb { background: #1877f2; color: #fff; box-shadow: 0 4px 16px rgba(24,119,242,.25); }
.social-fb:hover { color: #fff; box-shadow: 0 8px 24px rgba(24,119,242,.35); }
.social-ig {
  background: linear-gradient(135deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(220,39,67,.25);
}
.social-ig:hover { color: #fff; box-shadow: 0 8px 24px rgba(220,39,67,.35); }
.social-tk { background: #000; color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.social-tk:hover { color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.35); }

/* ── Contact Form ── */
.contact-form-box {
  background: #fff;
  border: 1.5px solid rgba(45,106,79,.1);
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 8px 40px rgba(0,0,0,.07);
  position: sticky;
  top: 86px;
}
.contact-form-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.contact-form-title svg { stroke: var(--green-mid); }
.contact-form-sub {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 24px;
}

.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.cf-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cf-group:last-of-type { margin-bottom: 0; }
.cf-group label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-mid);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cf-group label svg { stroke: var(--green-mid); fill: none; flex-shrink: 0; }
.cf-req { color: var(--red); }

.cf-group input,
.cf-group textarea {
  border: 1.5px solid #e0e0e0;
  border-radius: var(--r-sm);
  padding: 11px 14px;
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--text-mid);
  direction: rtl;
  text-align: right;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
  background: #fafafa;
}
.cf-group input:focus,
.cf-group textarea:focus {
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px var(--green-pale);
  background: #fff;
}
.cf-group textarea { resize: vertical; min-height: 120px; }
.cf-group input::placeholder,
.cf-group textarea::placeholder { color: #bbb; font-size: 13px; }

.cf-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  background: linear-gradient(135deg, var(--green-light) 0%, var(--green-dark) 100%);
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: opacity .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(27,67,50,.3);
}
.cf-submit:hover { opacity: .93; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(27,67,50,.4); }
.cf-submit svg { stroke: #fff; fill: none; }

/* Success / Error states */
.contact-success {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--green-pale);
  border: 1.5px solid rgba(45,106,79,.2);
  border-radius: var(--r-md);
  padding: 18px;
  margin-bottom: 20px;
}
.contact-success svg { stroke: var(--green-mid); fill: none; flex-shrink: 0; margin-top: 2px; }
.contact-success strong { display: block; font-size: 15px; font-weight: 800; color: var(--green-dark); margin-bottom: 4px; }
.contact-success p { font-size: 13.5px; color: var(--text-mid); margin: 0; }
.contact-error {
  background: #fef2f2;
  border: 1.5px solid rgba(229,57,53,.2);
  color: var(--red);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 16px;
}

/* Responsive */
@media(max-width:900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-form-box { position: static; }
  .cf-row { grid-template-columns: 1fr; }
}
@media(max-width:540px) {
  .contact-hero-title { font-size: 28px; }
  .ccard { padding: 16px; }
}

/* ════════════════════════════════════════════════
   PRODUCT CARD v7 — Fancy, no stars
════════════════════════════════════════════════ */
.pcard {
  border: 1.5px solid var(--border) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  transition: box-shadow .3s cubic-bezier(.25,.46,.45,.94), transform .3s cubic-bezier(.25,.46,.45,.94) !important;
  position: relative;
}
.pcard:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,.13) !important;
  transform: translateY(-6px) !important;
}
.pcard-img-link { display: block; text-decoration: none; }
.pcard-img {
  position: relative;
  overflow: hidden;
  background: #f4f4f4;
  aspect-ratio: 1/1;
}
.pcard-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}
.pcard:hover .pcard-img img { transform: scale(1.07); }
.pcard-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.05) 100%);
  opacity: 0;
  transition: opacity .3s;
}
.pcard:hover .pcard-img-overlay { opacity: 1; }

.pcard-badge {
  position: absolute; top: 12px; right: 12px;
  font-size: 11px; font-weight: 800;
  padding: 4px 11px; border-radius: 20px;
  z-index: 2;
}
.pcard-badge.sale { background: var(--red); color: #fff; box-shadow: 0 2px 8px rgba(229,57,53,.4); }
.pcard-badge.new  { background: var(--green-mid); color: #fff; box-shadow: 0 2px 8px rgba(45,106,79,.4); }

.pcard-body {
  padding: 14px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pcard-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  line-height: 1.4 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
  transition: color var(--t);
  flex: 1;
}
.pcard:hover .pcard-name { color: var(--green-mid) !important; }
/* Remove old stars */
.pcard-stars { display: none !important; }

.pcard-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pcard-price-main {
  font-size: 17px;
  font-weight: 900;
  color: var(--green-dark);
}
.pcard-price-old {
  font-size: 13px;
  font-weight: 500;
  color: #bbb;
  text-decoration: line-through;
}
/* Hide old price elements */
.pcard-price { display: none !important; }

.pcard-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  padding: 11px !important;
  background: linear-gradient(135deg, var(--green-light) 0%, var(--green-dark) 100%) !important;
  color: #fff !important;
  font-family: var(--font) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: opacity .2s, transform .2s, box-shadow .2s !important;
  box-shadow: 0 3px 12px rgba(27,67,50,.25) !important;
}
.pcard-btn:hover {
  opacity: .92 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(27,67,50,.35) !important;
  color: #fff !important;
}
.pcard-btn svg { stroke: #fff; fill: none; flex-shrink: 0; }

/* ════════════════════════════════════════════════
   HOMEPAGE PRODUCTS SECTION v7
════════════════════════════════════════════════ */
.hp-products-section { padding: 52px 0; }

.hp-products-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 36px;
  flex-wrap: wrap;
  gap: 16px;
}
.hp-products-header-text { text-align: right; }

/* View All Button — fancy */
.hp-view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: #fff;
  border: 2px solid var(--green-mid);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--green-mid);
  text-decoration: none;
  transition: background var(--t), color var(--t), transform .2s, box-shadow .2s;
  flex-shrink: 0;
}
.hp-view-all-btn:hover {
  background: var(--green-mid);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(45,106,79,.3);
}
.hp-view-all-btn svg { stroke: currentColor; transition: stroke var(--t); }

/* 8-product grid */
.hp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 40px;
}

/* Carousel divider */
.hp-carousel-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.hp-carousel-divider::before,
.hp-carousel-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border));
}
.hp-carousel-divider::before { background: linear-gradient(90deg, var(--border), transparent); }
.hp-carousel-divider span {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-light);
  white-space: nowrap;
  background: #fff;
  padding: 0 10px;
}

/* Carousel */
.hp-carousel-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hp-carousel-viewport {
  overflow: hidden;
  border-radius: 14px;
  flex: 1;
}
.hp-carousel-track {
  display: flex;
  gap: 16px;
  transition: transform .55s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
.hp-carousel-track .pcard {
  flex: 0 0 calc(25% - 12px);
  min-width: calc(25% - 12px);
}

.hp-car-btn {
  width: 44px; height: 44px;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  transition: background var(--t), border-color var(--t), transform .15s;
}
.hp-car-btn:hover {
  background: var(--green-mid);
  border-color: var(--green-mid);
  transform: scale(1.08);
}
.hp-car-btn:hover svg { stroke: #fff; }
.hp-car-btn svg { width: 18px; height: 18px; stroke: var(--text-mid); fill: none; stroke-width: 2.5; }
.hp-car-btn:disabled { opacity: .3; pointer-events: none; }

/* ════════════════════════════════════════════════
   RELATED PRODUCTS (single page) v7
   5 visible, no timer/dots
════════════════════════════════════════════════ */
.sp-related { padding: 0 0 60px; }
.sp-related-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.sp-related-header h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 6px 0 0;
  position: relative;
  padding-bottom: 8px;
}
.sp-related-header h2::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 36px; height: 3px;
  background: var(--green-mid);
  border-radius: 2px;
}

/* View All fancy button */
.sp-view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: #fff;
  border: 2px solid var(--green-mid);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--green-mid);
  text-decoration: none;
  transition: background var(--t), color var(--t), transform .2s, box-shadow .2s;
  white-space: nowrap;
}
.sp-view-all-btn:hover {
  background: var(--green-mid);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 16px rgba(45,106,79,.3);
}
.sp-view-all-btn svg { stroke: currentColor; }

.sp-carousel-outer {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sp-carousel-viewport {
  overflow: hidden;
  border-radius: 14px;
  flex: 1;
}
.sp-carousel-track {
  display: flex;
  gap: 16px;
  transition: transform .55s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
.sp-rel-card {
  flex: 0 0 calc(20% - 13px); /* 5 visible */
  min-width: calc(20% - 13px);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .25s, transform .25s;
}
.sp-rel-card:hover {
  box-shadow: 0 10px 36px rgba(0,0,0,.12);
  transform: translateY(-4px);
}
.sp-rel-img-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  background: #f4f4f4;
  aspect-ratio: 1/1;
}
.sp-rel-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .4s ease;
}
.sp-rel-card:hover .sp-rel-img-wrap img { transform: scale(1.06); }
.sp-rel-body { padding: 11px 13px 13px; }
.sp-rel-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 6px;
  line-height: 1.35;
  text-decoration: none;
  transition: color var(--t);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sp-rel-name:hover { color: var(--green-mid); }
.sp-rel-price { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; }
.sp-rel-main { font-size: 14px; font-weight: 800; color: var(--green-dark); }
.sp-rel-old  { font-size: 11px; font-weight: 500; color: #bbb; text-decoration: line-through; }
.sp-rel-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--green-mid);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px;
  border-radius: 8px;
  text-decoration: none;
  transition: background var(--t), transform .15s;
}
.sp-rel-btn:hover { background: var(--green-dark); transform: translateY(-1px); color: #fff; }

/* Carousel nav buttons (shared) */
.sp-car-btn {
  width: 40px; height: 40px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
  transition: background var(--t), border-color var(--t), transform .15s;
}
.sp-car-btn:hover { background: var(--green-mid); border-color: var(--green-mid); transform: scale(1.06); }
.sp-car-btn:hover svg { stroke: #fff; }
.sp-car-btn svg { width: 17px; height: 17px; stroke: var(--text-mid); fill: none; stroke-width: 2.5; }
.sp-car-btn:disabled { opacity: .3; pointer-events: none; }

/* ════════════════════════════════════════════════
   FEATURES STRIP — customizer-reactive SVG icons
════════════════════════════════════════════════ */
.feat-ico { background: var(--green-pale) !important; transition: background var(--t); }
.feat-ico svg { stroke: var(--green-mid) !important; }
.feat-item:hover .feat-ico { background: var(--green-mid) !important; }
.feat-item:hover .feat-ico svg { stroke: #fff !important; }

/* ════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════ */
@media(max-width:1100px) {
  .hp-grid { grid-template-columns: repeat(3,1fr); }
  .hp-carousel-track .pcard { flex: 0 0 calc(33.33% - 11px); }
  .sp-rel-card { flex: 0 0 calc(25% - 12px); }
}
@media(max-width:768px) {
  .hp-grid { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .hp-carousel-track .pcard { flex: 0 0 calc(50% - 8px); }
  .hp-products-header { flex-direction: column; align-items: flex-start; }
  .sp-rel-card { flex: 0 0 calc(50% - 8px); }
}
@media(max-width:480px) {
  .hp-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .sp-rel-card { flex: 0 0 calc(50% - 6px); }
}

/* ════════════════════════════════════════════════
   v7.1 FIXES
════════════════════════════════════════════════ */

/* ── 1. Products header: centered ── */
.hp-products-header--center {
  text-align: center !important;
  flex-direction: column !important;
  align-items: center !important;
}
.hp-view-all-btn--sm {
  padding: 8px 16px !important;
  font-size: 12.5px !important;
  border-radius: 10px !important;
}
.hp-view-all-btn--sm svg { width: 12px !important; height: 12px !important; }

/* ── 2. Related header: centered ── */
.sp-related-header--center {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
}
.sp-related-header--center h2::after {
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
}
.sp-view-all-btn--sm {
  padding: 7px 14px !important;
  font-size: 12px !important;
}

/* ── 3. Related cards: button always same-line height ── */
.sp-rel-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}
.sp-rel-name {
  flex: 1;
  min-height: 38px;
}

/* ── 4. Homepage divider line between sp-layout & description ──
   Already exists as .sp-layout + .desc-wrapper::before
   Now make it without text (it's in product page, not homepage) ── */
.hp-carousel-divider span { display: none !important; }
.hp-carousel-divider::before,
.hp-carousel-divider::after {
  background: linear-gradient(90deg, transparent, var(--green-pale), var(--green-mid), var(--green-pale), transparent) !important;
  height: 2px !important;
}

/* ── 5. Mobile: 2 per row in related carousel ── */
@media(max-width:640px) {
  .sp-rel-card { flex: 0 0 calc(50% - 8px) !important; }
}

/* ════════════════════════════════════════════════
   ORDER CONFIRMATION MODAL — Fancy gradient
════════════════════════════════════════════════ */
body.ocm-lock-scroll { overflow: hidden; }

.order-confirm-modal {
  position: fixed;
  inset: 0;
  background: rgba(10,20,15,.5);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .35s ease, backdrop-filter .35s ease;
}
.order-confirm-modal.ocm-visible {
  opacity: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.order-confirm-modal.ocm-hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}

.ocm-box {
  background: #fff;
  border-radius: 22px;
  padding: 22px 20px 18px;
  max-width: 470px;
  width: 100%;
  text-align: center;
  box-shadow: 0 40px 90px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.06);
  transform: translateY(28px) scale(.92);
  opacity: 0;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
  direction: rtl;
  max-height: 94vh;
  overflow-y: auto;
}
.order-confirm-modal.ocm-visible .ocm-box { transform: translateY(0) scale(1); opacity: 1; }
.order-confirm-modal.ocm-hide .ocm-box { transform: translateY(10px) scale(.96); opacity: 0; transition: transform .25s ease, opacity .25s ease; }

.ocm-product-shot {
  margin: 2px auto 10px;
  width: 74px; height: 74px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
  border: 2px solid #fff;
  outline: 1px solid rgba(0,0,0,.06);
  animation: ocmPopIn .5s cubic-bezier(.34,1.56,.64,1) .2s both;
}
.ocm-product-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes ocmPopIn {
  0%   { transform: scale(.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.ocm-icon-wrap {
  margin: 0 auto 10px;
  width: 48px; height: 48px;
  animation: ocmBounce .6s cubic-bezier(.25,.46,.45,.94) .1s both;
}
@keyframes ocmBounce {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.ocm-icon { width: 48px; height: 48px; }
.ocm-icon-check {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: ocmDrawCheck .5s ease-out .45s forwards;
}
@keyframes ocmDrawCheck { to { stroke-dashoffset: 0; } }

.ocm-title {
  font-size: 17px;
  font-weight: 900;
  color: var(--text-dark);
  margin-bottom: 2px;
}
.ocm-sub {
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 10px;
  line-height: 1.4;
}

/* Order info grid — always 2 columns, compact */
.ocm-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
  text-align: right;
}
.ocm-info-item {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fbfefc;
  border: 1px solid rgba(45,106,79,.07);
  border-radius: 9px;
  padding: 7px 9px;
  transition: background .2s;
}
.ocm-info-item:hover { background: var(--green-pale); }

.ocm-info-icon {
  width: 24px; height: 24px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--green-pale);
}
.ocm-info-icon svg { width: 12px; height: 12px; stroke: var(--green-dark); }

/* Unified brand-color icons (no rainbow gradients, matches site palette) */
.ocm-icon-order,
.ocm-icon-date,
.ocm-icon-product,
.ocm-icon-price,
.ocm-icon-location,
.ocm-icon-phone { background: var(--green-pale); }
.ocm-icon-order svg,
.ocm-icon-date svg,
.ocm-icon-product svg,
.ocm-icon-price svg,
.ocm-icon-location svg,
.ocm-icon-phone svg { stroke: var(--green-dark); }

.ocm-info-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.ocm-lbl { font-size: 9.5px; font-weight: 600; color: var(--text-light); }
.ocm-val { font-size: 12px; font-weight: 800; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocm-val-product { font-size: 11.5px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ocm-val-price { color: var(--green-dark); font-size: 13px; }

/* Delivery + callback message merged into one compact banner: */
.ocm-callback-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(27,67,50,.06), rgba(45,106,79,.1));
  border: 1px solid rgba(45,106,79,.25);
  border-radius: 11px;
  padding: 9px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 12px;
  line-height: 1.4;
  text-align: right;
}
.ocm-callback-pulse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  background: var(--green-dark);
  color: #fff;
  animation: ocmPulse 1.6s ease-in-out infinite;
}
@keyframes ocmPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45,106,79,.45); }
  50% { box-shadow: 0 0 0 8px rgba(45,106,79,0); }
}

/* Close button */
.ocm-close-btn {
  display: block;
  width: 100%;
  padding: 12px;
  min-height: 44px;
  background: linear-gradient(135deg, var(--green-light) 0%, var(--green-dark) 100%);
  color: #fff;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  border: none;
  border-radius: 11px;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
  box-shadow: 0 4px 16px rgba(27,67,50,.3);
}
.ocm-close-btn:hover { opacity: .92; transform: translateY(-2px); }

@media(max-width:480px) {
  .order-confirm-modal { padding: 10px; align-items: center; }
  .ocm-box { padding: 20px 16px 16px; border-radius: 20px; }
  .ocm-title { font-size: 16px; }
  .ocm-icon-wrap { width: 42px; height: 42px; margin-bottom: 8px; }
  .ocm-icon { width: 42px; height: 42px; }
  .ocm-product-shot { width: 52px; height: 52px; margin-bottom: 8px; }
  .ocm-info-grid { gap: 5px; }
  .ocm-info-item { padding: 6px 8px; gap: 6px; }
  .ocm-info-icon { width: 22px; height: 22px; }
  .ocm-lbl { font-size: 9px; }
  .ocm-val { font-size: 11.5px; }
  .ocm-callback-note { font-size: 11px; padding: 8px 10px; }
  .ocm-callback-pulse { width: 24px; height: 24px; min-width: 24px; }
  .ocm-callback-pulse svg { width: 13px; height: 13px; }
  .ocm-close-btn { padding: 11px; font-size: 13.5px; min-height: 42px; }
}

/* ════════════════════════════════════════════════
   v7.2 FIXES
════════════════════════════════════════════════ */

/* ── Homepage: why-label, why-title, why-sub-text bigger ── */
.ardis-section .why-title,
.reviews-section .why-title,
.faq-section .why-title { font-size: 34px !important; }

.ardis-section .why-label,
.reviews-section .why-label,
.faq-section .why-label { font-size: 13px !important; }

.hp-sub-text-lg { font-size: 15.5px !important; }

/* View all button: left aligned */
.hp-header-view-all-wrap {
  width: 100%;
  display: flex;
  justify-content: flex-start;  /* left (RTL = visual right but logical left) */
}
.hp-view-all-left {
  margin-right: auto !important;
  margin-left: 0 !important;
}

/* ── Related section: title bigger, view-all left ── */
.sp-related-title-lg { font-size: 28px !important; }
.sp-rel-view-all-wrap {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.sp-view-all-left {
  margin-right: auto !important;
}

/* ── Divider between form and description: simple modern ── */
.sp-layout + .desc-wrapper {
  padding-top: 40px !important;
}
.sp-layout + .desc-wrapper::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(45,106,79,.15) 20%,
    var(--green-mid) 50%,
    rgba(45,106,79,.15) 80%,
    transparent 100%
  ) !important;
  height: 1px !important;
}
.sp-layout + .desc-wrapper::after {
  width: 6px !important; height: 6px !important;
  top: -3px !important;
  box-shadow: 0 0 0 3px var(--green-pale) !important;
}

/* ── Related cards: fancy animation + order button ── */
.sp-rel-card {
  transition: box-shadow .3s cubic-bezier(.25,.46,.45,.94),
              transform .3s cubic-bezier(.25,.46,.45,.94),
              border-color .3s !important;
}
.sp-rel-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: 0 16px 48px rgba(45,106,79,.15) !important;
  border-color: rgba(45,106,79,.2) !important;
}
.sp-rel-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, var(--green-light) 0%, var(--green-dark) 100%) !important;
  border-radius: 9px !important;
  padding: 9px !important;
  font-size: 12.5px !important;
  box-shadow: 0 3px 10px rgba(27,67,50,.22) !important;
  transition: opacity .2s, transform .15s, box-shadow .2s !important;
}
.sp-rel-btn:hover {
  opacity: .9 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(27,67,50,.32) !important;
  background: linear-gradient(135deg, var(--green-light) 0%, var(--green-dark) 100%) !important;
}
.sp-rel-btn svg { stroke: #fff !important; fill: none !important; flex-shrink: 0; }

/* ════════════════════════════════════════════════
   ABOUT US PAGE
════════════════════════════════════════════════ */
.about-page { padding: 0 0 80px; }

/* Hero */
.about-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 52px 0 56px;
}
.about-hero-title {
  font-size: 40px;
  font-weight: 900;
  color: var(--text-dark);
  margin: 10px 0 14px;
  line-height: 1.2;
}
.about-brand {
  background: linear-gradient(135deg, var(--green-mid), var(--green-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.about-hero-desc {
  font-size: 16px;
  color: var(--text-mid);
  line-height: 1.8;
  margin-bottom: 28px;
  max-width: 460px;
}
.about-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* Visual */
.about-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px;
}
.about-visual-circle {
  width: 200px; height: 200px;
  background: var(--green-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 0 0 20px rgba(45,106,79,.06), 0 0 0 40px rgba(45,106,79,.03);
  animation: aboutPulse 3s ease-in-out infinite;
}
@keyframes aboutPulse {
  0%, 100% { box-shadow: 0 0 0 20px rgba(45,106,79,.06), 0 0 0 40px rgba(45,106,79,.03); }
  50% { box-shadow: 0 0 0 28px rgba(45,106,79,.09), 0 0 0 52px rgba(45,106,79,.05); }
}

.about-stat-pill {
  position: absolute;
  background: #fff;
  border: 1.5px solid rgba(45,106,79,.15);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 17px;
  font-weight: 900;
  color: var(--green-dark);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: aboutFloat 3s ease-in-out infinite;
}
.about-stat-pill span { font-size: 10px; font-weight: 600; color: var(--text-light); margin-top: 1px; }
.about-stat-1 { top: 10px; right: 10px; animation-delay: 0s; }
.about-stat-2 { top: 10px; left: 10px; animation-delay: .75s; }
.about-stat-3 { bottom: 20px; right: 15px; animation-delay: 1.5s; }
.about-stat-4 { bottom: 20px; left: 15px; animation-delay: 2.25s; }
@keyframes aboutFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Policy Cards */
.about-policies {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 60px;
}
.about-policy-card {
  background: #fff;
  border: 1.5px solid rgba(45,106,79,.1);
  border-radius: 18px;
  padding: 24px 22px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  position: relative;
  overflow: hidden;
}
.about-policy-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 3px; height: 0;
  background: linear-gradient(180deg, var(--green-mid), transparent);
  transition: height .35s;
  border-radius: 3px;
}
.about-policy-card:hover::before { height: 100%; }
.about-policy-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(45,106,79,.12);
  border-color: rgba(45,106,79,.2);
}
.apc-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  transition: transform .25s;
}
.about-policy-card:hover .apc-icon { transform: scale(1.08) rotate(-3deg); }
.apc-content { flex: 1; text-align: right; }
.apc-content h3 { font-size: 16px; font-weight: 800; color: var(--text-dark); margin-bottom: 8px; }
.apc-content p  { font-size: 14px; color: var(--text-mid); line-height: 1.75; margin: 0; }
.apc-content strong { color: var(--green-dark); font-weight: 800; }

/* Values */
.about-values { margin-bottom: 56px; }
.about-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.about-val-item {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  transition: transform .25s, box-shadow .25s;
}
.about-val-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(45,106,79,.1);
  border-color: rgba(45,106,79,.2);
}
.avi-num {
  font-size: 32px;
  font-weight: 900;
  color: var(--green-pale);
  -webkit-text-stroke: 2px var(--green-mid);
  line-height: 1;
  margin-bottom: 12px;
}
.about-val-item h4 { font-size: 15px; font-weight: 800; color: var(--text-dark); margin-bottom: 8px; }
.about-val-item p  { font-size: 13px; color: var(--text-light); line-height: 1.65; margin: 0; }

/* Contact strip */
.about-contact-strip {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-mid) 100%);
  border-radius: 20px;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.acs-text h3 { font-size: 20px; font-weight: 900; color: #fff; margin-bottom: 5px; }
.acs-text p  { font-size: 14px; color: rgba(255,255,255,.75); margin: 0; }
.acs-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.acs-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.acs-btn:hover { transform: translateY(-2px); }
.acs-call    { background: #fff; color: var(--green-dark); box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.acs-call:hover { box-shadow: 0 8px 24px rgba(0,0,0,.2); color: var(--green-dark); }
.acs-wa      { background: #25d366; color: #fff; box-shadow: 0 4px 14px rgba(37,211,102,.3); }
.acs-wa:hover { box-shadow: 0 8px 24px rgba(37,211,102,.45); color: #fff; }
.acs-contact { background: rgba(255,255,255,.18); color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.acs-contact:hover { background: rgba(255,255,255,.28); color: #fff; }

/* Responsive */
@media(max-width:900px) {
  .about-hero   { grid-template-columns: 1fr; }
  .about-hero-visual { display: none; }
  .about-policies { grid-template-columns: 1fr; }
  .about-values-grid { grid-template-columns: 1fr 1fr; }
}
@media(max-width:540px) {
  .about-values-grid { grid-template-columns: 1fr; }
  .about-hero-title { font-size: 30px; }
  .about-contact-strip { flex-direction: column; text-align: center; }
}

/* ════════════════════════════════════════════════
   v7.3 — Dark Mode, Search, Font Size, Carousel fix
════════════════════════════════════════════════ */

/* ── Font size from customizer ── */
body { font-size: var(--base-font-size, 15px); }

/* ── Header icons: search + dark mode ── */
.ardis-search-btn,
.ardis-darkmode-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background var(--t), transform .15s;
  color: inherit;
}
.ardis-search-btn:hover,
.ardis-darkmode-btn:hover {
  background: var(--green-pale);
  transform: scale(1.08);
}
.ardis-search-btn svg,
.ardis-darkmode-btn svg {
  width: 19px; height: 19px;
  stroke: currentColor; fill: none; stroke-width: 2;
}
.dm-icon-sun { display: none; }

/* ── Search Overlay ── */
.ardis-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.ardis-search-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.ardis-search-box {
  width: 100%;
  max-width: 620px;
  margin: 0 16px;
  transform: translateY(-20px);
  transition: transform .3s cubic-bezier(.25,.46,.45,.94);
}
.ardis-search-overlay.open .ardis-search-box { transform: translateY(0); }
.ardis-search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
.ardis-search-form svg { stroke: var(--text-light); flex-shrink: 0; }
.ardis-search-form input[type=search] {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: 16px;
  color: var(--text-dark);
  background: none;
  direction: rtl;
  text-align: right;
}
.ardis-search-form input::placeholder { color: #bbb; }
#ardisSearchClose {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  border-radius: 6px;
  transition: background .2s;
  flex-shrink: 0;
}
#ardisSearchClose:hover { background: #f0f0f0; }
#ardisSearchClose svg { stroke: #888; }

/* ════════════════════════════════════════════════
   DARK MODE — Full site coverage
════════════════════════════════════════════════ */
body.ardis-dark {
  --bg:        #0f0f0f;
  --bg-card:   #1a1a1a;
  --bg-alt:    #141414;
  --text-dark: #f0f0f0;
  --text-mid:  #c0c0c0;
  --text-light:#888;
  --border:    #2a2a2a;
  color-scheme: dark;
  background: #0f0f0f;
  color: #f0f0f0;
}

/* Header dark */
body.ardis-dark #ardis-header {
  background: rgba(15,15,15,0.92) !important;
  border-bottom-color: #2a2a2a !important;
}
body.ardis-dark #ardis-announce { background: var(--green-dark) !important; }

/* Cards dark */
body.ardis-dark .pcard,
body.ardis-dark .why-card,
body.ardis-dark .review-card,
body.ardis-dark .faq-item,
body.ardis-dark .about-policy-card,
body.ardis-dark .about-val-item,
body.ardis-dark .sp-order-card,
body.ardis-dark .sp-rel-card,
body.ardis-dark .desc-box-ardis,
body.ardis-dark .contact-form-box {
  background: #1a1a1a !important;
  border-color: #2a2a2a !important;
  color: #f0f0f0 !important;
}
body.ardis-dark .pcard-name,
body.ardis-dark .sp-rel-name,
body.ardis-dark .review-text,
body.ardis-dark .faq-q span,
body.ardis-dark .apc-content h3,
body.ardis-dark .about-val-item h4 { color: #f0f0f0 !important; }

/* Inputs dark */
body.ardis-dark .sf-field input,
body.ardis-dark .sf-field select,
body.ardis-dark .cf-group input,
body.ardis-dark .cf-group textarea,
body.ardis-dark .o-field input,
body.ardis-dark .o-field select {
  background: #222 !important;
  border-color: #333 !important;
  color: #f0f0f0 !important;
}
body.ardis-dark .sf-field input::placeholder { color: #555 !important; }

/* Sections dark */
body.ardis-dark .ardis-section,
body.ardis-dark .why-section,
body.ardis-dark .reviews-section,
body.ardis-dark .faq-section,
body.ardis-dark .hp-products-section,
body.ardis-dark .ardis-breadcrumb,
body.ardis-dark .shop-layout,
body.ardis-dark .about-page,
body.ardis-dark .contact-page { background: #0f0f0f !important; }

body.ardis-dark .ardis-features { background: #141414 !important; border-bottom-color: #2a2a2a !important; }
body.ardis-dark .feat-item { border-left-color: #2a2a2a !important; }
body.ardis-dark .feat-ico   { background: rgba(45,106,79,.2) !important; }

/* Search dark */
body.ardis-dark .ardis-search-form {
  background: #1a1a1a !important;
}
body.ardis-dark .ardis-search-form input[type=search] { color: #f0f0f0 !important; }

/* Product image placeholder dark */
/* Dark mode: keep transparent bg for images - actual image shows through */
body.ardis-dark .pcard-img { background: #2a2a2a !important; }
body.ardis-dark .sp-main-img { background: #2a2a2a !important; }

/* Mobile drawer dark */
body.ardis-dark .mob-drawer {
  background: #1a1a1a !important;
  border-color: #2a2a2a !important;
}

/* Footer stays dark (already dark themed) */

/* Smooth dark mode transition */
body, #ardis-header, .pcard, .why-card, .review-card, .faq-item,
.sp-order-card, .sp-rel-card, .ardis-features, .feat-ico {
  transition: background .3s ease, border-color .3s ease, color .3s ease !important;
}

/* ── Related carousel: 5 visible, exact card widths ── */
.sp-rel-card {
  flex: 0 0 calc(20% - 13px) !important;
  min-width: calc(20% - 13px) !important;
}
@media(max-width:1024px) { .sp-rel-card { flex: 0 0 calc(25% - 12px) !important; min-width: calc(25% - 12px) !important; } }
@media(max-width:768px)  { .sp-rel-card { flex: 0 0 calc(33.33% - 11px) !important; min-width: calc(33.33% - 11px) !important; } }
@media(max-width:480px)  { .sp-rel-card { flex: 0 0 calc(50% - 8px) !important; min-width: calc(50% - 8px) !important; } }

/* ── Products header: view-all left ── */
.hp-header-view-all-wrap {
  display: flex;
  justify-content: flex-end; /* visual right → logical left in RTL */
  width: 100%;
  padding-top: 8px;
}

/* ════════════════════════════════════════════════
   v7.4 — Search overlay, Dark Mode fix, Searchable Select
════════════════════════════════════════════════ */

/* ── @keyframes for button spinner ── */
@keyframes btnSpin { to { transform: rotate(360deg); } }
.btn-spinner { display: inline-block; vertical-align: middle; margin-left: 8px; animation: btnSpin .7s linear infinite; transform-origin: center; }

/* ── Form error messages ── */
.sf-error-msg {
  display: block;
  font-size: 11.5px;
  color: var(--red);
  font-weight: 600;
  margin-top: 4px;
  padding-right: 2px;
}
.sf-field input.error,
.sf-field select.error {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(229,57,53,.1) !important;
}

/* ── Searchable Select ── */
.ardis-select-wrap { flex-direction: column; align-items: stretch; }
.ardis-select-search {
  width: 100%;
  height: 34px;
  border: 1.5px solid #e8e8e8;
  border-bottom: none;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  padding: 0 10px 0 10px;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-mid);
  background: #fafafa;
  outline: none;
  direction: rtl;
  text-align: right;
  transition: border-color .2s;
}
.ardis-select-search:focus { border-color: var(--green-mid); background: #fff; }
.ardis-select-search::placeholder { color: #bbb; }
.ardis-select-wrap select {
  border-radius: 0 0 var(--r-sm) var(--r-sm) !important;
  border-top: 1px solid #e8e8e8 !important;
}
.ardis-select-wrap select:focus {
  border-color: var(--green-mid) !important;
}

/* ── Search Overlay ── */
.ardis-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 90px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.ardis-search-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.ardis-search-box {
  width: 100%;
  max-width: 640px;
  margin: 0 20px;
  transform: translateY(-24px) scale(.97);
  transition: transform .3s cubic-bezier(.25,.46,.45,.94);
}
.ardis-search-overlay.open .ardis-search-box {
  transform: translateY(0) scale(1);
}
.ardis-search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 20px;
  padding: 16px 20px;
  box-shadow: 0 32px 80px rgba(0,0,0,.3);
}
.ardis-search-form > svg { stroke: var(--green-mid); flex-shrink: 0; }
.ardis-search-form input[type=search] {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: 17px;
  color: var(--text-dark);
  background: none;
  direction: rtl;
  text-align: right;
}
.ardis-search-form input::placeholder { color: #ccc; font-size: 15px; }
#ardisSearchClose {
  width: 34px; height: 34px;
  background: #f0f0f0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, transform .15s;
}
#ardisSearchClose:hover { background: #e0e0e0; transform: scale(1.08); }
#ardisSearchClose svg { stroke: #555; }

/* Search hint text */
.ardis-search-hint {
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255,255,255,.6);
  direction: rtl;
}

/* ── Dark Mode — comprehensive ── */
html.ardis-dark body,
body.ardis-dark {
  background: #0f0f0f !important;
  color: #e8e8e8 !important;
  --bg: #0f0f0f;
  --bg-card: #1c1c1c;
  --text-dark: #f0f0f0;
  --text-mid: #c0c0c0;
  --text-light: #888;
  --border: #2c2c2c;
}

body.ardis-dark #ardis-header {
  background: rgba(18,18,18,.92) !important;
  border-bottom-color: #2c2c2c !important;
  backdrop-filter: blur(20px) !important;
}
body.ardis-dark .ardis-logo-text { color: #fff !important; }
body.ardis-dark .ardis-nav-links a { color: rgba(255,255,255,.8) !important; }
body.ardis-dark .ardis-nav-icons a,
body.ardis-dark .ardis-search-btn svg,
body.ardis-dark .ardis-darkmode-btn svg { color: rgba(255,255,255,.8) !important; stroke: rgba(255,255,255,.8) !important; }
body.ardis-dark .ardis-burger span { background: rgba(255,255,255,.8) !important; }

/* Cards */
body.ardis-dark .pcard,
body.ardis-dark .why-card,
body.ardis-dark .review-card,
body.ardis-dark .faq-item,
body.ardis-dark .about-policy-card,
body.ardis-dark .about-val-item,
body.ardis-dark .sp-order-card,
body.ardis-dark .sp-rel-card,
body.ardis-dark .desc-box-ardis,
body.ardis-dark .contact-form-box,
body.ardis-dark .sidebar-widget,
body.ardis-dark .shop-toolbar {
  background: #1c1c1c !important;
  border-color: #2c2c2c !important;
  color: #e8e8e8 !important;
}

/* Inputs */
body.ardis-dark .sf-field input,
body.ardis-dark .sf-field select,
body.ardis-dark .ardis-select-search,
body.ardis-dark .cf-group input,
body.ardis-dark .cf-group textarea {
  background: #242424 !important;
  border-color: #333 !important;
  color: #e8e8e8 !important;
}
body.ardis-dark .sf-field input::placeholder,
body.ardis-dark .ardis-select-search::placeholder { color: #555 !important; }

/* Sections */
body.ardis-dark .ardis-features { background: #141414 !important; }
body.ardis-dark .feat-item { border-color: #2c2c2c !important; }
body.ardis-dark .why-section,
body.ardis-dark .faq-section { background: #121212 !important; }
body.ardis-dark .reviews-section { background: #111 !important; }
body.ardis-dark .ardis-breadcrumb { background: #141414 !important; border-color: #2c2c2c !important; }
body.ardis-dark .ardis-promo { filter: brightness(.9); }
body.ardis-dark .mob-drawer { background: #1c1c1c !important; border-color: #2c2c2c !important; }
body.ardis-dark .mob-drawer nav a { color: #e8e8e8 !important; }

/* Text */
body.ardis-dark .pcard-name,
body.ardis-dark .sp-rel-name,
body.ardis-dark .faq-q span,
body.ardis-dark .apc-content h3,
body.ardis-dark .about-val-item h4,
body.ardis-dark .why-card-title,
body.ardis-dark .review-text,
body.ardis-dark .desc-li-ardis { color: #e8e8e8 !important; }

body.ardis-dark .pcard-price-main,
body.ardis-dark .sp-rel-main { color: #4ade80 !important; }

/* Images placeholder */
/* Dark mode: keep transparent bg for images - actual image shows through */
body.ardis-dark .pcard-img { background: #2a2a2a !important; }
body.ardis-dark .sp-main-img { background: #2a2a2a !important; }

/* Search overlay dark */
body.ardis-dark .ardis-search-form {
  background: #1c1c1c !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.6) !important;
}
body.ardis-dark .ardis-search-form > svg { stroke: var(--green-mid) !important; }
body.ardis-dark .ardis-search-form input[type=search] { color: #e8e8e8 !important; }
body.ardis-dark #ardisSearchClose { background: #2c2c2c !important; }
body.ardis-dark #ardisSearchClose svg { stroke: #aaa !important; }

/* Dark mode icon switching */
body:not(.ardis-dark) .dm-icon-sun { display: none !important; }
body.ardis-dark .dm-icon-moon { display: none !important; }
body.ardis-dark .dm-icon-sun { display: flex !important; }

/* Smooth transitions */
body, #ardis-header, .pcard, .why-card, .review-card, .faq-item,
.sp-order-card, .desc-box-ardis, .ardis-features {
  transition: background-color .35s ease, border-color .35s ease, color .2s ease !important;
}

/* ── Font size customizer ── */
html { font-size: var(--base-font-size, 15px); }
body { font-size: inherit; }

/* ════════════════════════════════════════════════
   v7.5 FIXES
════════════════════════════════════════════════ */

/* ── 1. Shop Pagination — modern style ── */
.ardis-pages { margin-top: 32px; display: flex; justify-content: center; }
.ardis-pages ul {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0; margin: 0;
  flex-wrap: wrap;
  justify-content: center;
}
.ardis-pages .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-mid);
  background: #fff;
  border: 1.5px solid var(--border);
  text-decoration: none;
  transition: all .2s ease;
  font-family: var(--font);
}
.ardis-pages .page-numbers:hover {
  background: var(--green-pale);
  border-color: var(--green-mid);
  color: var(--green-dark);
  transform: translateY(-2px);
}
.ardis-pages .page-numbers.current {
  background: var(--green-mid);
  border-color: var(--green-mid);
  color: #fff;
  box-shadow: 0 4px 14px rgba(45,106,79,.35);
}
.ardis-pages .page-numbers.dots {
  border: none;
  background: none;
  color: var(--text-light);
  width: auto;
  padding: 0 4px;
}
.ardis-pages .page-numbers.next,
.ardis-pages .page-numbers.prev {
  font-size: 18px;
  background: var(--green-pale);
  border-color: rgba(45,106,79,.15);
  color: var(--green-mid);
}
.ardis-pages .page-numbers.next:hover,
.ardis-pages .page-numbers.prev:hover {
  background: var(--green-mid);
  color: #fff;
}

/* ── 2. About page icons — rounded square, site style ── */
.apc-icon {
  width: 58px !important;
  height: 58px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
  transition: transform .3s ease !important;
}
.about-policy-card:hover .apc-icon { transform: scale(1.1) rotate(-4deg) !important; }
.apc-icon svg { width: 26px; height: 26px; }

/* Color variants matching image style */
.apc-icon--green {
  background: var(--green-pale) !important;
}
.apc-icon--green svg { stroke: var(--green-mid) !important; }

.apc-icon--blue {
  background: #e3f2fd !important;
}
.apc-icon--blue svg { stroke: #1976d2 !important; }

.apc-icon--teal {
  background: #e0f7fa !important;
}
.apc-icon--teal svg { stroke: #00838f !important; }

.apc-icon--purple {
  background: #fce4ec !important;
}
.apc-icon--purple svg { stroke: #c2185b !important; }

/* ── 3. Related card: price + button same row ── */
.sp-rel-price-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: auto;
}
.sp-rel-price { margin-bottom: 0 !important; }

.sp-rel-btn-new {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  background: var(--green-mid) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  border-radius: 9px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background .2s, transform .15s, box-shadow .2s !important;
  box-shadow: 0 2px 10px rgba(27,67,50,.2) !important;
  flex-shrink: 0 !important;
}
.sp-rel-btn-new:hover {
  background: var(--green-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 16px rgba(27,67,50,.3) !important;
  color: #fff !important;
}
.sp-rel-btn-new svg { stroke: #fff !important; fill: none !important; }

/* Hide old sp-rel-btn (replaced by sp-rel-btn-new) */
.sp-rel-btn { display: none !important; }

/* ── 4. Related card: taller image for visual quality ── */
.sp-rel-img-wrap { aspect-ratio: 4/3 !important; }

/* ── 5. Phone input: max 10 chars visual ── */
#ardisPhone { letter-spacing: 1px; }

/* ── 6. Wilaya/Baladiya: clean select, no search box ── */
.ardis-select-wrap { flex-direction: row !important; }
.ardis-select-search { display: none !important; }

/* ── 7. Order modal animation now handled directly on .ocm-box (see main modal rules) ── */

/* ════════════════════════════════════════════════
   v7.6 — ALL FIXES
════════════════════════════════════════════════ */

/* ── 1. Header: mobile menu click fix (z-index stacking) ── */
#ardis-header { position: sticky; top: 0; z-index: 200; }
.mob-overlay { z-index: 299 !important; }
.mob-drawer  { z-index: 300 !important; }
.ardis-search-overlay { z-index: 9000 !important; }

/* ── 2. Shipping icon in features strip ── */
.feat-ico .feat-truck { }

/* ── 3. Price: no comma, no separator ── */
.woocommerce-Price-amount,
.pcard-price-main,
.sp-price-main,
.sp-rel-main,
.sf-mini-price,
.o-mini-price,
.ocm-val-price { font-variant-numeric: lining-nums; letter-spacing: 0; }

/* ── 5. Shop page: view switcher ── */
.shop-view-btns {
  display: flex;
  gap: 6px;
  align-items: center;
}
.shop-view-btn {
  width: 34px; height: 34px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .2s;
  padding: 0;
}
.shop-view-btn svg { width: 16px; height: 16px; stroke: var(--text-light); fill: none; }
.shop-view-btn.active,
.shop-view-btn:hover {
  background: var(--green-pale);
  border-color: var(--green-mid);
}
.shop-view-btn.active svg,
.shop-view-btn:hover svg { stroke: var(--green-dark); }

/* Products grid views */
.products-grid.view-3 { grid-template-columns: repeat(3,1fr) !important; }
.products-grid.view-4 { grid-template-columns: repeat(4,1fr) !important; }
@media(max-width:768px) {
  .products-grid.view-3,
  .products-grid.view-4 { grid-template-columns: repeat(2,1fr) !important; }
}

/* ── 6. Product page pagination — modern ── */
.woocommerce-pagination,
.ardis-pages { margin-top: 36px; display: flex; justify-content: center; }
.woocommerce-pagination ul,
.ardis-pages ul {
  display: flex !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important; margin: 0 !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}
.woocommerce-pagination .page-numbers,
.ardis-pages .page-numbers {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important; height: 42px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-mid) !important;
  background: #fff !important;
  border: 1.5px solid var(--border) !important;
  text-decoration: none !important;
  transition: all .22s ease !important;
  font-family: var(--font) !important;
}
.ardis-pages .page-numbers:hover {
  background: var(--green-pale) !important;
  border-color: var(--green-mid) !important;
  color: var(--green-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(45,106,79,.15) !important;
}
.ardis-pages .page-numbers.current {
  background: var(--green-mid) !important;
  border-color: var(--green-mid) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(45,106,79,.35) !important;
}
.ardis-pages .page-numbers.dots {
  border: none !important; background: none !important;
  color: var(--text-light) !important; width: auto !important;
}
.ardis-pages .page-numbers.next,
.ardis-pages .page-numbers.prev {
  background: var(--green-pale) !important;
  border-color: rgba(45,106,79,.2) !important;
  color: var(--green-mid) !important;
  font-size: 18px !important;
}
.ardis-pages .page-numbers.next:hover,
.ardis-pages .page-numbers.prev:hover {
  background: var(--green-mid) !important;
  color: #fff !important;
}

/* ── 7. Font scale — force on all text ── */
html { font-size: var(--base-font-size, 15px) !important; }
body, p, span, div, li, td, th, input, select, textarea, button, a {
  font-size: inherit;
}
h1 { font-size: calc(var(--base-font-size, 15px) * 2.4) !important; }
h2 { font-size: calc(var(--base-font-size, 15px) * 1.9) !important; }
h3 { font-size: calc(var(--base-font-size, 15px) * 1.4) !important; }
h4 { font-size: calc(var(--base-font-size, 15px) * 1.15) !important; }

/* ── 8. Product layout: image-left option ── */
.sp-layout.layout-image-left .sp-gallery { order: 1; }
.sp-layout.layout-image-left .sp-info    { order: 2; }

/* ── 9. Enhanced Dark Mode — Facebook-style ── */
body.ardis-dark {
  --bg:         #18191a;   /* Facebook dark bg */
  --bg-card:    #242526;   /* Facebook dark card */
  --bg-alt:     #3a3b3c;   /* Facebook dark hover */
  --bg-input:   #3a3b3c;
  --text-dark:  #e4e6ea;
  --text-mid:   #b0b3b8;
  --text-light: #8a8d91;
  --border:     #3e4042;
  --green-pale: rgba(45,106,79,.15);
  color-scheme: dark;
  background-color: #18191a !important;
  color: #e4e6ea !important;
}

/* Header */
body.ardis-dark #ardis-header {
  background: rgba(36,37,38,.96) !important;
  border-bottom-color: #3e4042 !important;
  backdrop-filter: blur(12px) !important;
}
body.ardis-dark .ardis-logo-text { color: #e4e6ea !important; }
body.ardis-dark .ardis-nav-links a { color: rgba(228,230,234,.85) !important; }

/* All cards */
body.ardis-dark .pcard,
body.ardis-dark .why-card,
body.ardis-dark .review-card,
body.ardis-dark .faq-item,
body.ardis-dark .ardis-faq-item,
body.ardis-dark .about-policy-card,
body.ardis-dark .about-val-item,
body.ardis-dark .sp-order-card,
body.ardis-dark .sp-rel-card,
body.ardis-dark .desc-box-ardis,
body.ardis-dark .contact-form-box,
body.ardis-dark .ccard,
body.ardis-dark .ocm-info-item,
body.ardis-dark .sidebar-widget {
  background: #242526 !important;
  border-color: #3e4042 !important;
  color: #e4e6ea !important;
}
body.ardis-dark .pcard:hover,
body.ardis-dark .why-card:hover,
body.ardis-dark .review-card:hover { border-color: var(--green-mid) !important; }

/* Inputs */
body.ardis-dark .sf-field input,
body.ardis-dark .sf-field select,
body.ardis-dark .cf-group input,
body.ardis-dark .cf-group textarea,
body.ardis-dark .ardis-search-form input {
  background: #3a3b3c !important;
  border-color: #4a4b4c !important;
  color: #e4e6ea !important;
}
body.ardis-dark .sf-field input::placeholder,
body.ardis-dark .cf-group input::placeholder { color: #6a6b6d !important; }
body.ardis-dark .sf-field input:focus,
body.ardis-dark .sf-field select:focus {
  border-color: var(--green-mid) !important;
  box-shadow: 0 0 0 3px rgba(45,106,79,.2) !important;
}

/* Sections */
body.ardis-dark .ardis-section,
body.ardis-dark .hp-products-section { background: #18191a !important; }
body.ardis-dark .why-section,
body.ardis-dark .faq-section { background: #1c1e21 !important; }
body.ardis-dark .reviews-section { background: #18191a !important; }
body.ardis-dark .ardis-features { background: #1c1e21 !important; border-bottom-color: #3e4042 !important; }
body.ardis-dark .feat-item { border-left-color: #3e4042 !important; }
body.ardis-dark .feat-ico { background: rgba(45,106,79,.15) !important; }
body.ardis-dark .ardis-breadcrumb { background: #1c1e21 !important; border-color: #3e4042 !important; }
body.ardis-dark .ardis-hero { background: linear-gradient(135deg,#1b4332 0%,#0d1f13 100%) !important; }

/* Text colors */
body.ardis-dark .pcard-name,
body.ardis-dark .sp-rel-name,
body.ardis-dark .faq-q span,
body.ardis-dark .why-card-title,
body.ardis-dark .review-text,
body.ardis-dark .desc-li-ardis,
body.ardis-dark h1, body.ardis-dark h2, body.ardis-dark h3 { color: #e4e6ea !important; }
body.ardis-dark .pcard-price-main,
body.ardis-dark .sp-rel-main { color: #4ade80 !important; }
body.ardis-dark .sp-price-main { color: #4ade80 !important; }
body.ardis-dark .text-light { color: #8a8d91 !important; }

/* Images */
body.ardis-dark .pcard-img,
body.ardis-dark .sp-main-img,
body.ardis-dark .sp-rel-img-wrap { background: #3a3b3c !important; }

/* Order modal */
body.ardis-dark .ocm-box { background: #242526 !important; }
body.ardis-dark .ocm-title { color: #e4e6ea !important; }
body.ardis-dark .ocm-sub,
body.ardis-dark .ocm-lbl { color: #b0b3b8 !important; }
body.ardis-dark .ocm-val { color: #e4e6ea !important; }

/* Search overlay */
body.ardis-dark .ardis-search-form { background: #242526 !important; }
body.ardis-dark #ardisSearchClose { background: #3a3b3c !important; }
body.ardis-dark #ardisSearchClose svg { stroke: #b0b3b8 !important; }

/* Mobile drawer */
body.ardis-dark .mob-drawer { background: #242526 !important; border-color: #3e4042 !important; }
body.ardis-dark .mob-drawer nav a { color: #e4e6ea !important; }

/* ── Policy page ── */
.policy-page { padding: 0 0 80px; min-height: 60vh; }
.policy-card {
  max-width: 800px;
  margin: 36px auto 0;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 40px 44px;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
.policy-title {
  font-size: 28px;
  font-weight: 900;
  color: var(--text-dark);
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--border);
  position: relative;
}
.policy-title::after {
  content:'';
  position:absolute;
  bottom:-2px; right:0;
  width:48px; height:2px;
  background:var(--green-mid);
  border-radius:2px;
}
.policy-content h2 {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 24px 0 12px;
}
.policy-content p { font-size: 15px; color: var(--text-mid); line-height: 1.8; margin-bottom: 14px; }
.policy-content ul { padding-right: 20px; margin-bottom: 16px; }
.policy-content ul li { font-size: 14.5px; color: var(--text-mid); line-height: 1.75; margin-bottom: 6px; }
.policy-content a { color: var(--green-mid); text-decoration: none; }
.policy-content a:hover { color: var(--green-dark); text-decoration: underline; }

body.ardis-dark .policy-card { background: #242526 !important; border-color: #3e4042 !important; }
body.ardis-dark .policy-content p,
body.ardis-dark .policy-content li { color: #b0b3b8 !important; }

/* ════════════════════════════════════════════════
   RELATED PRODUCTS — Full Rebuild v7.7
   Modern, fancy, classy — matches site style
════════════════════════════════════════════════ */

/* ── Section wrapper ── */
.spr-section {
  padding: 52px 0 72px;
  position: relative;
}
.spr-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, var(--green-pale) 15%,
    var(--green-mid) 50%,
    var(--green-pale) 85%, transparent 100%
  );
}

/* ── Header ── */
.spr-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 14px;
}
.spr-header-left { text-align: right; }
.spr-title {
  font-size: 26px;
  font-weight: 900;
  color: var(--text-dark);
  margin: 6px 0 0;
  line-height: 1.2;
  position: relative;
  padding-bottom: 10px;
  display: inline-block;
}
.spr-title::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 36px; height: 3px;
  background: var(--green-mid);
  border-radius: 2px;
}

/* View all button */
.spr-view-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  background: #fff;
  border: 2px solid var(--green-mid);
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--green-mid);
  text-decoration: none;
  transition: all .25s cubic-bezier(.25,.46,.45,.94);
  white-space: nowrap;
}
.spr-view-all:hover {
  background: var(--green-mid);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(45,106,79,.3);
}
.spr-view-all svg { stroke: currentColor; transition: transform .25s; }
.spr-view-all:hover svg { transform: translateX(-3px); }

/* ── Carousel wrapper ── */
.spr-carousel-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}

/* Nav buttons */
.spr-nav {
  width: 46px; height: 46px;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  transition: all .25s cubic-bezier(.25,.46,.45,.94);
  z-index: 2;
}
.spr-nav:hover {
  background: var(--green-mid);
  border-color: var(--green-mid);
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(45,106,79,.3);
}
.spr-nav svg { width: 18px; height: 18px; stroke: var(--text-mid); transition: stroke .2s; }
.spr-nav:hover svg { stroke: #fff; }
.spr-nav:disabled { opacity: .3; pointer-events: none; transform: none !important; }

/* Viewport */
.spr-viewport {
  overflow: hidden;
  flex: 1;
  border-radius: 0;
}

/* Track */
.spr-track {
  display: flex;
  gap: 16px;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}

/* ── Product Card ── */
.spr-card {
  flex: 0 0 calc(20% - 13px); /* 5 visible */
  min-width: calc(20% - 13px);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform .3s cubic-bezier(.25,.46,.45,.94),
    box-shadow .3s ease,
    border-color .3s ease;
  cursor: pointer;
}
.spr-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 16px 48px rgba(45,106,79,.12),
    0 4px 12px rgba(0,0,0,.06);
  border-color: rgba(45,106,79,.25);
}

/* Image */
.spr-img-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  background: #f4f6f5;
  aspect-ratio: 1/1;
}
.spr-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}
.spr-card:hover .spr-img-wrap img { transform: scale(1.07); }

/* Quick view overlay */
.spr-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(27,67,50,0) 40%,
    rgba(27,67,50,.65) 100%
  );
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 14px;
  opacity: 0;
  transition: opacity .3s ease;
}
.spr-card:hover .spr-img-overlay { opacity: 1; }
.spr-quick-view {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.35);
  padding: 5px 14px;
  border-radius: 20px;
  transform: translateY(8px);
  transition: transform .3s ease;
}
.spr-card:hover .spr-quick-view { transform: translateY(0); }

/* Sale badge */
.spr-badge-sale {
  position: absolute;
  top: 10px; right: 10px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(229,57,53,.4);
}

/* Body */
.spr-body {
  padding: 13px 14px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

.spr-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-dark);
  text-decoration: none;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s;
  min-height: 38px;
}
.spr-card:hover .spr-name { color: var(--green-mid); }

.spr-price-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.spr-prices { display: flex; align-items: center; gap: 7px; }
.spr-price-main {
  font-size: 15px;
  font-weight: 900;
  color: var(--green-dark);
}
.spr-price-old {
  font-size: 11.5px;
  font-weight: 500;
  color: #bbb;
  text-decoration: line-through;
}

/* Buy button */
.spr-buy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, var(--green-light) 0%, var(--green-dark) 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font);
  border-radius: 10px;
  text-decoration: none;
  transition:
    opacity .2s,
    transform .2s cubic-bezier(.25,.46,.45,.94),
    box-shadow .2s;
  box-shadow: 0 3px 12px rgba(27,67,50,.25);
  margin-top: auto;
}
.spr-buy-btn:hover {
  opacity: .92;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(27,67,50,.35);
  color: #fff;
}
.spr-buy-btn svg { stroke: #fff; fill: none; flex-shrink: 0; }

/* ── Responsive ── */
@media(max-width:1100px) { .spr-card { flex: 0 0 calc(25% - 12px); min-width: calc(25% - 12px); } }
@media(max-width:768px)  { .spr-card { flex: 0 0 calc(33.33% - 11px); min-width: calc(33.33% - 11px); } }
@media(max-width:540px)  { .spr-card { flex: 0 0 calc(50% - 8px); min-width: calc(50% - 8px); } }
@media(max-width:360px)  { .spr-card { flex: 0 0 calc(100% - 0px); min-width: 100%; } }

/* Mobile: hide nav buttons when cards fill viewport */
@media(max-width:480px) {
  .spr-nav { width: 36px; height: 36px; }
  .spr-nav svg { width: 15px; height: 15px; }
}

/* ── Dark mode ── */
body.ardis-dark .spr-card {
  background: #242526 !important;
  border-color: #3e4042 !important;
}
body.ardis-dark .spr-card:hover { border-color: var(--green-mid) !important; }
body.ardis-dark .spr-img-wrap { background: #3a3b3c !important; }
body.ardis-dark .spr-name { color: #e4e6ea !important; }
body.ardis-dark .spr-price-main { color: #4ade80 !important; }
body.ardis-dark .spr-nav {
  background: #242526 !important;
  border-color: #3e4042 !important;
}
body.ardis-dark .spr-nav svg { stroke: #b0b3b8 !important; }
body.ardis-dark .spr-title { color: #e4e6ea !important; }
body.ardis-dark .spr-view-all { background: #242526 !important; }

/* ════════════════════════════════════════════════
   v7.8 — Pagination fix, Shop view icons,
          Related header, Language switcher
════════════════════════════════════════════════ */

/* ── 1. Shop Pagination — HORIZONTAL inline ── */
.ardis-pages {
  margin-top: 40px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  justify-content: center !important;
}
.ardis-pages ul {
  display: flex !important;
  flex-direction: row !important;  /* force horizontal */
  flex-wrap: wrap !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  justify-content: center !important;
  align-items: center !important;
}
.ardis-pages li {
  display: flex !important;
  list-style: none !important;
}
.ardis-pages .page-numbers {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 10px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-mid) !important;
  background: #fff !important;
  border: 1.5px solid var(--border) !important;
  text-decoration: none !important;
  transition: all .2s ease !important;
  font-family: var(--font) !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
.ardis-pages .page-numbers:hover {
  background: var(--green-pale) !important;
  border-color: var(--green-mid) !important;
  color: var(--green-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(45,106,79,.14) !important;
}
.ardis-pages .page-numbers.current {
  background: var(--green-mid) !important;
  border-color: var(--green-mid) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(45,106,79,.35) !important;
  transform: none !important;
}
.ardis-pages .page-numbers.dots {
  border: none !important;
  background: none !important;
  color: var(--text-light) !important;
  min-width: 28px !important;
  padding: 0 4px !important;
  font-size: 18px !important;
}
.ardis-pages .page-numbers.prev,
.ardis-pages .page-numbers.next {
  background: var(--green-pale) !important;
  border-color: rgba(45,106,79,.18) !important;
  color: var(--green-mid) !important;
}
.ardis-pages .page-numbers.prev:hover,
.ardis-pages .page-numbers.next:hover {
  background: var(--green-mid) !important;
  color: #fff !important;
}
.ardis-pages .page-numbers.prev svg,
.ardis-pages .page-numbers.next svg { pointer-events: none; }

/* ── 2. Shop view buttons — clean style ── */
.shop-view-btns { display: flex; gap: 5px; align-items: center; }
.shop-view-btn {
  width: 36px; height: 36px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .2s;
  padding: 0;
  color: #bbb;
}
.shop-view-btn svg { width: 17px; height: 17px; transition: color .2s; }
.shop-view-btn.active {
  background: var(--green-mid);
  border-color: var(--green-mid);
  color: #fff;
  box-shadow: 0 3px 10px rgba(45,106,79,.3);
}
.shop-view-btn:hover:not(.active) {
  background: var(--green-pale);
  border-color: var(--green-mid);
  color: var(--green-dark);
}
/* List view for products */

@media(max-width:640px){
  
  
}

/* ── 3. Related section header — stacked, centered ── */
.spr-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin-bottom: 28px !important;
  gap: 8px !important;
}
.spr-header .why-label { font-size: 12px !important; }
.spr-title {
  font-size: 24px !important;
  margin: 0 !important;
  padding-bottom: 8px !important;
}
.spr-title::after {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}
.spr-view-all {
  padding: 8px 18px !important;
  font-size: 13px !important;
  border-radius: 10px !important;
  margin-top: 4px !important;
}

/* ── 4. Language Switcher ── */
.ardis-lang-wrap {
  position: relative;
}
.ardis-lang-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 5px 9px;
  cursor: pointer;
  font-family: var(--font);
  transition: all .2s;
  color: var(--text-mid);
}
.ardis-lang-btn:hover {
  background: var(--green-pale);
  border-color: var(--green-mid);
  color: var(--green-dark);
}
.ardis-lang-btn svg { stroke: currentColor; }
.ardis-lang-current {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1;
}
.ardis-lang-chev {
  transition: transform .25s ease;
}
.ardis-lang-wrap.open .ardis-lang-chev { transform: rotate(180deg); }

/* Dropdown */
.ardis-lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  padding: 6px;
  min-width: 140px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.97);
  transition: all .25s cubic-bezier(.25,.46,.45,.94);
  z-index: 500;
  overflow: hidden;
}
.ardis-lang-wrap.open .ardis-lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.ardis-lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: none;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  font-family: var(--font);
  transition: background .18s;
  direction: rtl;
  text-align: right;
}
.ardis-lang-option:hover { background: var(--green-pale); }
.ardis-lang-option.active { background: var(--green-pale); }
.ardis-lang-option.active .lang-flag { color: var(--green-mid); }
.lang-flag {
  width: 28px; height: 28px;
  background: linear-gradient(135deg,var(--green-light),var(--green-dark));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: .3px;
}
.ardis-lang-option.active .lang-flag {
  background: linear-gradient(135deg,var(--green-mid),var(--green-dark));
}
.lang-name { font-size: 13px; font-weight: 600; color: var(--text-mid); }

/* Dark mode - language */
body.ardis-dark .ardis-lang-btn { border-color: #3e4042 !important; color: #b0b3b8 !important; }
body.ardis-dark .ardis-lang-dropdown { background: #242526 !important; border-color: #3e4042 !important; }
body.ardis-dark .ardis-lang-option:hover { background: rgba(45,106,79,.15) !important; }
body.ardis-dark .lang-name { color: #b0b3b8 !important; }
body.ardis-dark .ardis-pages .page-numbers { background: #242526 !important; border-color: #3e4042 !important; color: #b0b3b8 !important; }
body.ardis-dark .ardis-pages .page-numbers.current { background: var(--green-mid) !important; color: #fff !important; }

/* ════════════════════════════════════════════════
   v7.9 FIXES — Pagination, List View, Dividers
════════════════════════════════════════════════ */

/* ── PAGINATION: nuclear override, force horizontal ── */
.ardis-pages,
.ardis-pages ul,
.ardis-pages ul.page-numbers {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 32px auto 0 !important;
}
/* Kill any vertical stacking from WP default */
.ardis-pages ul > li { display: inline-flex !important; list-style: none !important; }
.ardis-pages a.page-numbers,
.ardis-pages span.page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 8px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-mid) !important;
  background: #fff !important;
  border: 1.5px solid var(--border) !important;
  text-decoration: none !important;
  font-family: var(--font) !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
  box-sizing: border-box !important;
}
.ardis-pages a.page-numbers:hover {
  background: var(--green-pale) !important;
  border-color: var(--green-mid) !important;
  color: var(--green-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(45,106,79,.14) !important;
}
.ardis-pages span.page-numbers.current {
  background: var(--green-mid) !important;
  border-color: var(--green-mid) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(45,106,79,.35) !important;
  transform: none !important;
}
.ardis-pages span.page-numbers.dots {
  border: none !important;
  background: transparent !important;
  color: var(--text-light) !important;
  min-width: 24px !important;
  letter-spacing: 2px;
}
.ardis-pages a.page-numbers.prev,
.ardis-pages a.page-numbers.next {
  background: var(--green-pale) !important;
  border-color: rgba(45,106,79,.2) !important;
  color: var(--green-mid) !important;
  font-size: 11px !important;
}
.ardis-pages a.page-numbers.prev:hover,
.ardis-pages a.page-numbers.next:hover {
  background: var(--green-mid) !important;
  color: #fff !important;
}
/* Dark mode pagination */
body.ardis-dark .ardis-pages a.page-numbers,
body.ardis-dark .ardis-pages span.page-numbers {
  background: #242526 !important;
  border-color: #3e4042 !important;
  color: #b0b3b8 !important;
}
body.ardis-dark .ardis-pages span.page-numbers.current {
  background: var(--green-mid) !important;
  color: #fff !important;
}
body.ardis-dark .ardis-pages a.page-numbers.prev,
body.ardis-dark .ardis-pages a.page-numbers.next {
  background: rgba(45,106,79,.15) !important;
  color: var(--green-mid) !important;
}

/* ── LIST VIEW — proper layout ── */

/* Mobile: fallback to card */
@media(max-width:600px) {
  
  
  
  
  
}

/* ── VIEW BUTTONS — refined style ── */
.shop-view-btn {
  width: 38px !important; height: 38px !important;
  background: #fff !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important;
  transition: all .2s cubic-bezier(.25,.46,.45,.94) !important;
  padding: 0 !important;
  color: #c0c4cc !important;
}
.shop-view-btn svg { width: 16px !important; height: 16px !important; flex-shrink: 0; }
.shop-view-btn.active {
  background: var(--green-mid) !important;
  border-color: var(--green-mid) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(45,106,79,.3) !important;
}
.shop-view-btn:hover:not(.active) {
  background: var(--green-pale) !important;
  border-color: var(--green-mid) !important;
  color: var(--green-dark) !important;
  transform: translateY(-1px) !important;
}

/* ── DESCRIPTION DIVIDERS — above and below ── */
/* Line ABOVE description */
.desc-wrapper {
  position: relative !important;
}
.desc-wrapper::before {
  content: '' !important;
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--green-pale) 15%,
    var(--green-mid) 50%,
    var(--green-pale) 85%,
    transparent 100%
  ) !important;
  margin-bottom: 36px !important;
}
/* Keep the existing one below (sp-layout + .desc-wrapper) as-is but remove conflict */
.sp-layout + .desc-wrapper { padding-top: 0 !important; }
.sp-layout + .desc-wrapper::before { display: none !important; } /* handled by .desc-wrapper::before */

/* ── TRUCK ICON — override generic stroke on features ── */
.feat-ico svg {
  stroke: var(--green-mid);
  stroke-width: 1.7px;
}

/* ════════════════════════════════════════════════
   FINAL FIX v7.9.1 — Description dividers + Pagination
════════════════════════════════════════════════ */

/* ── Remove the dot above description ── */
.sp-layout + .desc-wrapper::after {
  display: none !important;
  content: none !important;
}

/* ── Clean desc-wrapper: two gradient lines, no dot ── */
.desc-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* TOP divider line (above الوصف title) */
.desc-wrapper::before {
  content: '' !important;
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(45,106,79,.15) 10%,
    var(--green-mid) 50%,
    rgba(45,106,79,.15) 90%,
    transparent 100%
  ) !important;
  margin-bottom: 32px !important;
  position: static !important;
}

/* BOTTOM divider (after desc-box, before related) */
.desc-wrapper::after {
  content: '' !important;
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(45,106,79,.15) 10%,
    var(--green-mid) 50%,
    rgba(45,106,79,.15) 90%,
    transparent 100%
  ) !important;
  margin-top: 44px !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* Override old ::after dot */
.sp-layout + .desc-wrapper::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* The sp-layout version just uses .desc-wrapper::before/after above */
.sp-layout + .desc-wrapper {
  padding-top: 0 !important;
  position: static !important;
}
.sp-layout + .desc-wrapper::before {
  position: static !important;
  display: block !important;
}

/* ── PAGINATION: final nuclear fix ── */
/* Force the ul to be flex-row, kill ALL WP default list styles */
.ardis-pages > ul,
.ardis-pages > .page-numbers,
ul.page-numbers {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}
ul.page-numbers > li,
.ardis-pages > ul > li {
  display: inline-flex !important;
  float: none !important;
}

/* ── Pagination plain type (inline a/span elements) ── */
.ardis-pages {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 36px auto 0 !important;
  padding: 0 !important;
}
/* All page links/spans inline */
.ardis-pages > a,
.ardis-pages > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 8px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: var(--font) !important;
  text-decoration: none !important;
  border: 1.5px solid var(--border) !important;
  background: #fff !important;
  color: var(--text-mid) !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}
.ardis-pages > a:hover {
  background: var(--green-pale) !important;
  border-color: var(--green-mid) !important;
  color: var(--green-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(45,106,79,.14) !important;
}
.ardis-pages > span.current {
  background: var(--green-mid) !important;
  border-color: var(--green-mid) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(45,106,79,.35) !important;
}
.ardis-pages > span.dots {
  border: none !important;
  background: transparent !important;
  color: var(--text-light) !important;
  min-width: 24px !important;
  letter-spacing: 2px;
}
.ardis-pages > a.prev,
.ardis-pages > a.next {
  background: var(--green-pale) !important;
  border-color: rgba(45,106,79,.2) !important;
  color: var(--green-mid) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}
.ardis-pages > a.prev:hover,
.ardis-pages > a.next:hover {
  background: var(--green-mid) !important;
  color: #fff !important;
}
/* Dark mode */
body.ardis-dark .ardis-pages > a,
body.ardis-dark .ardis-pages > span {
  background: #242526 !important;
  border-color: #3e4042 !important;
  color: #b0b3b8 !important;
}
body.ardis-dark .ardis-pages > span.current {
  background: var(--green-mid) !important;
  color: #fff !important;
}
body.ardis-dark .ardis-pages > a.prev,
body.ardis-dark .ardis-pages > a.next {
  background: rgba(45,106,79,.15) !important;
  color: var(--green-mid) !important;
}

/* ════════════════════════════════════════════════
   PRODUCT LAYOUT SWITCHER — Final Working Version
   RTL-aware: image_right = gallery right (default RTL)
              image_left  = gallery left  (override with grid)
════════════════════════════════════════════════ */

/* DEFAULT (image_right in RTL = gallery on the RIGHT side visually) */
.sp-layout {
  direction: rtl !important;
}
.sp-layout .sp-gallery { grid-column: 2; grid-row: 1; }
.sp-layout .sp-info    { grid-column: 1; grid-row: 1; }

/* image_left = صورة يسار، فورم يمين */
.sp-layout.layout-image-left {
  direction: ltr !important;
}
.sp-layout.layout-image-left .sp-gallery {
  grid-column: 1;
  grid-row: 1;
  direction: rtl; /* keep content RTL inside */
}
.sp-layout.layout-image-left .sp-info {
  grid-column: 2;
  grid-row: 1;
  direction: rtl; /* keep content RTL inside */
}

/* Responsive: stacking doesn't need direction */
@media(max-width:900px) {
  .sp-layout,
  .sp-layout.layout-image-left {
    direction: rtl !important;
  }
  .sp-layout .sp-gallery,
  .sp-layout.layout-image-left .sp-gallery { grid-column: 1; grid-row: 1; }
  .sp-layout .sp-info,
  .sp-layout.layout-image-left .sp-info    { grid-column: 1; grid-row: 2; }
}

/* ════════════════════════════════════════════════
   PRODUCT LAYOUT — DEFINITIVE FIX v7.9.3
   Uses grid-template-areas for reliable switching
════════════════════════════════════════════════ */

/* DEFAULT: image RIGHT, form LEFT (RTL natural) */
.sp-layout {
  grid-template-areas: "form gallery" !important;
  grid-template-columns: 1fr 1fr !important;
  direction: rtl !important;
}
.sp-layout .sp-info    { grid-area: form !important;    order: unset !important; }
.sp-layout .sp-gallery { grid-area: gallery !important; order: unset !important; }

/* FLIPPED: image LEFT, form RIGHT */
.sp-layout.layout-image-left {
  grid-template-areas: "gallery form" !important;
  direction: rtl !important; /* keep RTL for text */
}
.sp-layout.layout-image-left .sp-info    { grid-area: form !important; }
.sp-layout.layout-image-left .sp-gallery { grid-area: gallery !important; }

/* Mobile: always stack vertically */
@media(max-width:900px) {
  .sp-layout,
  .sp-layout.layout-image-left {
    grid-template-areas: "gallery" "form" !important;
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════
   LIST VIEW — Complete Rebuild v8.0
   Modern horizontal card: image | info | price+btn
════════════════════════════════════════════════ */

/* Grid override */
.products-grid.view-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* Card: horizontal layout */
.products-grid.view-list .pcard {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  height: 148px !important;
  min-height: 148px !important;
  max-height: 148px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: box-shadow .25s ease, transform .25s ease !important;
}
.products-grid.view-list .pcard:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 36px rgba(45,106,79,.13) !important;
}

/* Image block — fixed square left side */
.products-grid.view-list .pcard-img-link {
  width: 148px !important;
  min-width: 148px !important;
  max-width: 148px !important;
  flex-shrink: 0 !important;
  height: 100% !important;
  display: block !important;
}
.products-grid.view-list .pcard-img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: unset !important;
  border-radius: 0 !important;
}
.products-grid.view-list .pcard-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Badge stays */
.products-grid.view-list .pcard-badge {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
}

/* Body: flex row, fills remaining space */
.products-grid.view-list .pcard-body {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* Name — center column, takes all available space */
.products-grid.view-list .pcard-name {
  flex: 1 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  line-height: 1.45 !important;
  -webkit-line-clamp: 3 !important;
  padding: 16px 20px !important;
  min-width: 0 !important;
  align-self: center !important;
}

/* Price + button block — right side column */
.products-grid.view-list .pcard-price-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 16px 20px !important;
  border-right: 1px solid var(--border) !important;  /* separator */
  min-width: 170px !important;
  flex-shrink: 0 !important;
}
.products-grid.view-list .pcard-price-main {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: var(--green-dark) !important;
  white-space: nowrap !important;
}
.products-grid.view-list .pcard-price-old {
  font-size: 12.5px !important;
  color: #bbb !important;
  text-decoration: line-through !important;
}
.products-grid.view-list .pcard-btn {
  width: 130px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  border-radius: 10px !important;
}

/* Remove image hover overlay in list mode */
.products-grid.view-list .pcard-img-overlay { display: none !important; }

/* Dark mode */
body.ardis-dark .products-grid.view-list .pcard-price-row {
  border-right-color: #3e4042 !important;
}

/* Mobile: collapse to card */
@media(max-width:640px) {
  .products-grid.view-list .pcard {
    flex-direction: column !important;
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
  }
  .products-grid.view-list .pcard-img-link {
    width: 100% !important;
    min-width: unset !important;
    max-width: unset !important;
    height: 200px !important;
  }
  .products-grid.view-list .pcard-body {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .products-grid.view-list .pcard-name { padding: 14px 16px 8px !important; }
  .products-grid.view-list .pcard-price-row {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-right: none !important;
    border-top: 1px solid var(--border) !important;
    padding: 12px 16px !important;
    min-width: unset !important;
  }
  .products-grid.view-list .pcard-btn { width: auto !important; }
}

/* ════════════════════════════════════════════════
   PLCARD — Product List Card v8.1
   One product per row, full-width, professional
════════════════════════════════════════════════ */

/* Container */
.products-grid.view-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
}

/* ── The Card ── */
.plcard {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  grid-template-rows: 1fr;
  min-height: 180px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  transition: box-shadow .3s cubic-bezier(.25,.46,.45,.94), transform .25s ease, border-color .25s;
  direction: rtl;
  width: 100%;
}
.plcard:hover {
  box-shadow: 0 12px 40px rgba(45,106,79,.12), 0 3px 10px rgba(0,0,0,.05);
  transform: translateY(-3px);
  border-color: rgba(45,106,79,.25);
}

/* ── Image Column ── */
.plcard-img-wrap {
  grid-column: 1;
  grid-row: 1;
  display: block;
  overflow: hidden;
  background: #f4f6f5;
  position: relative;
  text-decoration: none;
}
.plcard-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}
.plcard:hover .plcard-img-wrap img { transform: scale(1.06); }

/* Badge */
.plcard-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 11px;
  border-radius: 20px;
  z-index: 2;
  letter-spacing: .2px;
}
.plcard-badge--new  { background: var(--green-mid); color: #fff; box-shadow: 0 2px 8px rgba(45,106,79,.4); }
.plcard-badge--sale { background: var(--red); color: #fff; box-shadow: 0 2px 8px rgba(229,57,53,.4); }

/* ── Info Column (center) ── */
.plcard-info {
  grid-column: 2;
  grid-row: 1;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  text-align: right;
  direction: rtl;
}

.plcard-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.45;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s;
}
.plcard:hover .plcard-name { color: var(--green-mid); }

.plcard-desc {
  font-size: 13.5px;
  color: var(--text-light);
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tags row */
.plcard-tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.plcard-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}
.plcard-tag svg { flex-shrink: 0; }
.plcard-tag--cod {
  background: var(--green-pale);
  color: var(--green-dark);
}
.plcard-tag--cod svg { stroke: var(--green-mid); }
.plcard-tag--pay {
  background: #e8f4fd;
  color: #1565c0;
}
.plcard-tag--pay svg { stroke: #1976d2; }

/* ── Action Column (right) ── */
.plcard-action {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px 28px;
  border-right: 1px solid var(--border);
  min-width: 190px;
  background: linear-gradient(135deg, #fafffe 0%, #f4faf6 100%);
  transition: background .25s;
}
.plcard:hover .plcard-action {
  background: linear-gradient(135deg, var(--green-pale) 0%, #edfaf3 100%);
}

/* Price */
.plcard-prices {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.plcard-price {
  font-size: 22px;
  font-weight: 900;
  color: var(--green-dark);
  line-height: 1;
  letter-spacing: -.3px;
}
.plcard-old {
  font-size: 13px;
  font-weight: 500;
  color: #bbb;
  text-decoration: line-through;
}

/* Buy button */
.plcard-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--green-light) 0%, var(--green-dark) 100%);
  color: #fff;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  border-radius: 12px;
  text-decoration: none;
  transition: opacity .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 14px rgba(27,67,50,.28);
  white-space: nowrap;
}
.plcard-btn:hover {
  opacity: .92;
  transform: translateY(-2px);
  box-shadow: 0 7px 22px rgba(27,67,50,.38);
  color: #fff;
}
.plcard-btn svg { stroke: #fff; fill: none; flex-shrink: 0; }

/* Details link */
.plcard-view {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-light);
  text-decoration: none;
  transition: color .2s;
}
.plcard-view:hover { color: var(--green-mid); }

/* ── Dark Mode ── */
body.ardis-dark .plcard { background: #242526 !important; border-color: #3e4042 !important; }
body.ardis-dark .plcard:hover { border-color: var(--green-mid) !important; }
body.ardis-dark .plcard-img-wrap { background: #3a3b3c !important; }
body.ardis-dark .plcard-name { color: #e4e6ea !important; }
body.ardis-dark .plcard-desc { color: #8a8d91 !important; }
body.ardis-dark .plcard-price { color: #4ade80 !important; }
body.ardis-dark .plcard-action {
  background: rgba(27,67,50,.2) !important;
  border-right-color: #3e4042 !important;
}
body.ardis-dark .plcard:hover .plcard-action { background: rgba(27,67,50,.35) !important; }
body.ardis-dark .plcard-tag--cod { background: rgba(45,106,79,.15) !important; }
body.ardis-dark .plcard-tag--pay { background: rgba(25,118,210,.15) !important; color: #90caf9 !important; }

/* ── Responsive ── */
@media(max-width:900px) {
  .plcard {
    grid-template-columns: 160px 1fr;
    grid-template-rows: auto auto;
    min-height: 160px;
  }
  .plcard-img-wrap { grid-column: 1; grid-row: 1 / 3; }
  .plcard-info   { grid-column: 2; grid-row: 1; padding: 16px 18px 8px; }
  .plcard-action {
    grid-column: 2;
    grid-row: 2;
    flex-direction: row !important;
    justify-content: space-between;
    padding: 12px 18px 16px;
    border-right: none !important;
    border-top: 1px solid var(--border);
    background: transparent !important;
    min-width: unset;
  }
  .plcard-prices { flex-direction: row; align-items: center; gap: 8px; }
  .plcard-price { font-size: 17px; }
  .plcard-btn { padding: 10px 16px; font-size: 13px; }
  .plcard-view { display: none; }
}
@media(max-width:540px) {
  .plcard { grid-template-columns: 120px 1fr; min-height: 140px; }
  .plcard-info { padding: 12px 14px 6px; }
  .plcard-name { font-size: 14px; }
  .plcard-desc { display: none; }
  .plcard-tags { display: none; }
  .plcard-action { padding: 10px 14px 12px; }
}

/* ════════════════════════════════════════════════
   LIQUID GLASS HEADER — iOS 26 Style v8.2
   True frosted glass: blur + refraction + specular
════════════════════════════════════════════════ */

/* ── Base reset for the header ── */
#ardis-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  width: 100% !important;

  /* The glass effect */
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(28px) saturate(200%) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.08) !important;

  /* Subtle border like glass edge */
  border-bottom: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,   /* top specular line */
    0 4px 24px rgba(0, 0, 0, 0.08),             /* soft bottom shadow */
    0 1px 3px rgba(0, 0, 0, 0.05) !important;

  /* Smooth transition on scroll */
  transition:
    background .4s cubic-bezier(.25,.46,.45,.94),
    box-shadow .4s ease,
    border-color .4s ease !important;
}

/* ── Frosted glass layer via pseudo-element ── */
#ardis-header::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.18) 100%
  ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ── Specular refraction line at top ── */
#ardis-header::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.9) 30%,
    rgba(255,255,255,1) 50%,
    rgba(255,255,255,0.9) 70%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Nav content above glass layers */
#ardis-header .ardis-wrap,
#ardis-header .ardis-nav,
#ardis-header .ardis-logo,
#ardis-header .ardis-nav-links,
#ardis-header .ardis-nav-icons {
  position: relative !important;
  z-index: 2 !important;
}

/* ── Text adapts to glass background ── */
#ardis-header .ardis-logo a,
#ardis-header .ardis-logo-text {
  color: var(--green-dark) !important;
}
#ardis-header .ardis-nav-links a {
  color: rgba(30,60,40,.8) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(255,255,255,.5) !important;
}
#ardis-header .ardis-nav-links a:hover {
  color: var(--green-dark) !important;
}
#ardis-header .ardis-nav-icons button,
#ardis-header .ardis-nav-icons a {
  color: rgba(30,60,40,.75) !important;
}
#ardis-header .ardis-nav-icons svg {
  stroke: rgba(30,60,40,.75) !important;
}
#ardis-header .ardis-nav-icons button:hover svg,
#ardis-header .ardis-nav-icons a:hover svg {
  stroke: var(--green-dark) !important;
}
#ardis-header .ardis-burger span {
  background: rgba(30,60,40,.75) !important;
}

/* ── Scrolled state: denser glass ── */
#ardis-header.scrolled {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(40px) saturate(220%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(1.05) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 8px 32px rgba(0,0,0,.10),
    0 2px 6px rgba(0,0,0,.06) !important;
}

/* ── Icon buttons: glass pill style ── */
.ardis-search-btn,
.ardis-darkmode-btn,
.ardis-lang-btn {
  background: rgba(255,255,255,.45) !important;
  border: 1px solid rgba(255,255,255,.7) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
  transition: all .25s ease !important;
}
.ardis-search-btn:hover,
.ardis-darkmode-btn:hover {
  background: rgba(255,255,255,.7) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.12) !important;
  transform: scale(1.06) !important;
}

/* ── Burger glass ── */
.ardis-burger {
  background: rgba(255,255,255,.45) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  backdrop-filter: blur(8px) !important;
}

/* ── Announce bar: subtle, part of glass system ── */
#ardis-announce {
  background: linear-gradient(90deg, var(--green-dark) 0%, var(--green-mid) 100%) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
}

/* ════════════════════════════════════════════════
   DARK MODE — Dark Glass (macOS style)
════════════════════════════════════════════════ */
body.ardis-dark #ardis-header {
  background: rgba(24, 26, 27, 0.6) !important;
  backdrop-filter: blur(32px) saturate(180%) brightness(0.95) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(0.95) !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 4px 24px rgba(0,0,0,.35),
    0 1px 4px rgba(0,0,0,.2) !important;
}
body.ardis-dark #ardis-header::before {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.05) 0%,
    rgba(255,255,255,.01) 100%
  ) !important;
}
body.ardis-dark #ardis-header::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.08) 30%,
    rgba(255,255,255,.15) 50%,
    rgba(255,255,255,.08) 70%,
    transparent 100%
  ) !important;
}
body.ardis-dark #ardis-header .ardis-nav-links a {
  color: rgba(220,235,225,.85) !important;
  text-shadow: none !important;
}
body.ardis-dark #ardis-header .ardis-nav-links a:hover {
  color: #4ade80 !important;
}
body.ardis-dark #ardis-header .ardis-logo-text { color: #e4e6ea !important; }
body.ardis-dark #ardis-header .ardis-nav-icons svg { stroke: rgba(220,235,225,.8) !important; }
body.ardis-dark .ardis-search-btn,
body.ardis-dark .ardis-darkmode-btn,
body.ardis-dark .ardis-lang-btn {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.2) !important;
}
body.ardis-dark .ardis-search-btn:hover,
body.ardis-dark .ardis-darkmode-btn:hover {
  background: rgba(255,255,255,.15) !important;
}
body.ardis-dark .ardis-burger {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.1) !important;
}
body.ardis-dark .ardis-burger span { background: #e4e6ea !important; }
body.ardis-dark #ardis-header.scrolled {
  background: rgba(18,19,20,.75) !important;
  backdrop-filter: blur(44px) saturate(200%) brightness(.92) !important;
  -webkit-backdrop-filter: blur(44px) saturate(200%) brightness(.92) !important;
}

/* ════════════════════════════════════════════════
   MOBILE v8.3 — Header + Drawer + Features Strip
════════════════════════════════════════════════ */

/* ── Desktop-only elements hidden on mobile ── */
@media(max-width:768px) {
  .ardis-desktop-only { display: none !important; }
}

/* ── Mobile logo: position controlled by the offset slider (see dynamic CSS transform) ── */
@media(max-width:768px) {
  .ardis-nav { position: relative; }

  /* Hamburger/icons pinned to the far left, completely independent of the logo's position —
     they can never overlap regardless of the logo offset slider value */
  #ardis-header .ardis-nav-icons {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 20 !important;
  }
  #ardis-header .ardis-logo { position: relative !important; z-index: 10 !important; }
}

.ardis-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  border: 1.5px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all .25s ease;
  flex-shrink: 0;
}
@media(max-width:768px) { .ardis-burger { display: flex !important; } }
.ardis-burger span {
  width: 20px; height: 2px;
  border-radius: 2px;
  background: var(--green-dark);
  transition: transform .3s ease, opacity .2s, width .3s;
  transform-origin: center;
}
.ardis-burger:hover { background: rgba(255,255,255,.6); }

/* Animated X on open */
#ardis-header .ardis-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#ardis-header .ardis-burger.open span:nth-child(2) { opacity: 0; width: 0; }
#ardis-header .ardis-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Keep nav links hidden on mobile */
@media(max-width:768px) {
  .ardis-nav-links { display: none !important; }
  .ardis-lang-wrap  { display: none !important; }
}

/* ── Mobile Drawer — full redesign ── */
.mob-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  z-index: 299;
  opacity: 0; visibility: hidden;
  transition: all .3s ease;
}
.mob-overlay.open { opacity: 1; visibility: visible; }

.mob-drawer {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100dvh;
  background: #fff;
  z-index: 300;
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform .35s cubic-bezier(.25,.46,.45,.94);
  overflow-y: auto;
  overflow-x: hidden;
  direction: rtl;
}
.mob-drawer.open { transform: translateY(0); }

body.ardis-dark .mob-drawer { background: #18191a !important; }

/* Drawer top bar */
.mob-drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: inherit;
  z-index: 2;
}
.mob-drawer-logo {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none;
}
.mob-drawer-logo img { width: 32px; height: 32px; border-radius: 8px; }
.mob-drawer-store { font-size: 17px; font-weight: 900; color: var(--green-dark); }

/* Close button */
.mob-close {
  width: 36px; height: 36px;
  background: var(--border);
  border: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s, transform .15s;
  flex-shrink: 0;
}
.mob-close:hover { background: var(--green-pale); transform: scale(1.08); }
.mob-close svg { stroke: var(--text-mid); }

/* Search in drawer */
.mob-drawer-search {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.mob-drawer-search form {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f5f5f5;
  border-radius: 12px;
  padding: 11px 14px;
  transition: background .2s;
}
body.ardis-dark .mob-drawer-search form { background: #242526 !important; }
.mob-drawer-search form:focus-within { background: #edf7f0; }
.mob-drawer-search svg { stroke: var(--text-light); flex-shrink: 0; }
.mob-drawer-search input {
  flex: 1; border: none; outline: none;
  background: transparent;
  font-family: var(--font); font-size: 14px;
  color: var(--text-dark);
  direction: rtl; text-align: right;
}
.mob-drawer-search input::placeholder { color: #bbb; }

/* Nav links */
.mob-drawer-nav { flex: 1; padding: 8px 0; }
.mob-drawer-nav ul { list-style: none; margin: 0; padding: 0; }
.mob-drawer-nav li { border-bottom: 1px solid rgba(0,0,0,.04); }
.mob-drawer-nav a {
  display: flex;
  align-items: center;
  padding: 15px 22px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  text-decoration: none;
  transition: background .18s, color .18s, padding-right .18s;
}
.mob-drawer-nav a:hover,
.mob-drawer-nav a:active {
  background: var(--green-pale);
  color: var(--green-dark);
  padding-right: 30px;
}
body.ardis-dark .mob-drawer-nav a { color: #e4e6ea !important; }
body.ardis-dark .mob-drawer-nav li { border-color: rgba(255,255,255,.05) !important; }

/* Bottom actions */
.mob-drawer-actions {
  padding: 12px 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mob-action-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 16px;
  background: #f7f7f7;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-family: var(--font);
  direction: rtl;
  text-align: right;
  transition: background .18s;
}
.mob-action-btn:hover, .mob-action-btn.active { background: var(--green-pale); }
body.ardis-dark .mob-action-btn { background: #242526 !important; }
body.ardis-dark .mob-action-btn:hover { background: rgba(45,106,79,.15) !important; }

.mob-action-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--green-light), var(--green-dark));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mob-action-icon svg { stroke: #fff; }
.mob-action-text { flex: 1; text-align: right; }
.mob-action-label { display: block; font-size: 14px; font-weight: 700; color: var(--text-dark); }
.mob-action-sub   { display: block; font-size: 11.5px; color: var(--text-light); margin-top: 1px; }
body.ardis-dark .mob-action-label { color: #e4e6ea !important; }

/* Dark toggle pill */
.mob-toggle-pill {
  width: 46px; height: 26px;
  background: #ddd;
  border-radius: 13px;
  position: relative;
  transition: background .25s;
  flex-shrink: 0;
}
.mob-toggle-pill::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  top: 3px; right: 3px;
  transition: transform .25s cubic-bezier(.25,.46,.45,.94);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.mob-toggle-pill.on { background: var(--green-mid); }
.mob-toggle-pill.on::after { transform: translateX(-20px); }

/* Language pills in drawer */
.mob-lang-row { cursor: default; }
.mob-lang-pills { display: flex; gap: 6px; }
.mob-lang-pill {
  width: 34px; height: 30px;
  background: #f0f0f0;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 12px; font-weight: 800;
  color: var(--text-mid);
  cursor: pointer;
  transition: all .18s;
  font-family: var(--font);
}
.mob-lang-pill.active,
.mob-lang-pill:hover {
  background: var(--green-mid);
  border-color: var(--green-mid);
  color: #fff;
}

/* ── Features strip: compact on mobile ── */

/* ════════════════════════════════════════════════
   MOBILE FINAL FIX v8.3.1
   — Force hide search/dark from mobile header
   — Drawer redesign
   — Features strip compact
════════════════════════════════════════════════ */

/* ══ 1. FORCE HIDE search + dark from mobile header ══ */
@media(max-width:768px) {
  #ardis-header .ardis-search-btn,
  #ardis-header .ardis-darkmode-btn,
  #ardis-header .ardis-lang-wrap,
  .ardis-desktop-only {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Only show burger on mobile */
  #ardis-header .ardis-burger { display: flex !important; }
  /* Nav height smaller on mobile */
  .ardis-nav { height: 58px !important; }
}

/* ══ 2. DRAWER — clean and modern ══ */
/* Override old drawer styles */
.mob-drawer {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  background: #fff !important;
  z-index: 9800 !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateY(-100%) !important;
  transition: transform .35s cubic-bezier(.25,.46,.45,.94) !important;
  overflow-y: auto !important;
  direction: rtl !important;
  border-radius: 0 !important;
}
.mob-drawer.open { transform: translateY(0) !important; }
body.ardis-dark .mob-drawer { background: #18191a !important; }

/* Top bar */
.mob-drawer-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(0,0,0,.07) !important;
  background: inherit !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  flex-shrink: 0 !important;
}
body.ardis-dark .mob-drawer-top { border-bottom-color: rgba(255,255,255,.06) !important; }

.mob-drawer-logo {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}
.mob-drawer-store {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: var(--green-dark) !important;
}
body.ardis-dark .mob-drawer-store { color: #4ade80 !important; }

/* Close X button */
.mob-close {
  width: 36px !important; height: 36px !important;
  background: #f2f2f2 !important;
  border: none !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important;
  transition: background .2s !important;
  flex-shrink: 0 !important;
  font-size: 0 !important; /* hide old ✕ text */
  color: transparent !important;
}
body.ardis-dark .mob-close { background: #2a2a2a !important; }
.mob-close:hover { background: var(--green-pale) !important; }
.mob-close svg { stroke: #666 !important; display: block !important; }

/* Search in drawer */
.mob-drawer-search {
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  flex-shrink: 0 !important;
}
body.ardis-dark .mob-drawer-search { border-bottom-color: rgba(255,255,255,.05) !important; }
.mob-drawer-search form {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #f4f4f4 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
}
body.ardis-dark .mob-drawer-search form { background: #252526 !important; }
.mob-drawer-search form:focus-within {
  background: var(--green-pale) !important;
  outline: 1.5px solid var(--green-mid) !important;
}
.mob-drawer-search svg { stroke: var(--text-light) !important; flex-shrink: 0 !important; }
.mob-drawer-search input {
  flex: 1 !important;
  border: none !important; outline: none !important;
  background: transparent !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  color: var(--text-dark) !important;
  direction: rtl !important; text-align: right !important;
}
.mob-drawer-search input::placeholder { color: #bbb !important; }

/* Nav links */
.mob-drawer-nav {
  flex: 1 !important;
  padding: 6px 0 !important;
}
.mob-drawer-nav ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.mob-drawer-nav li { border-bottom: 1px solid rgba(0,0,0,.04) !important; }
body.ardis-dark .mob-drawer-nav li { border-bottom-color: rgba(255,255,255,.04) !important; }
.mob-drawer-nav a {
  display: flex !important;
  align-items: center !important;
  padding: 15px 20px !important;
  font-size: 16px !important; font-weight: 700 !important;
  color: var(--text-dark) !important;
  text-decoration: none !important;
  transition: background .15s, padding-right .2s !important;
  direction: rtl !important;
}
body.ardis-dark .mob-drawer-nav a { color: #e4e6ea !important; }
.mob-drawer-nav a:hover {
  background: var(--green-pale) !important;
  color: var(--green-dark) !important;
  padding-right: 28px !important;
}

/* Bottom actions */
.mob-drawer-actions {
  padding: 10px 14px 20px !important;
  border-top: 1px solid rgba(0,0,0,.06) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
body.ardis-dark .mob-drawer-actions { border-top-color: rgba(255,255,255,.06) !important; }

.mob-action-btn {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 12px 14px !important;
  background: #f6f6f6 !important;
  border: none !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  font-family: var(--font) !important;
  direction: rtl !important; text-align: right !important;
  transition: background .18s !important;
}
body.ardis-dark .mob-action-btn { background: #242526 !important; }
.mob-action-btn:hover, .mob-action-btn.active {
  background: var(--green-pale) !important;
}
.mob-action-icon {
  width: 36px !important; height: 36px !important;
  background: linear-gradient(135deg, var(--green-light), var(--green-dark)) !important;
  border-radius: 10px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.mob-action-icon svg { stroke: #fff !important; fill: none !important; }
.mob-action-icon .dm-icon-moon,
.mob-action-icon .dm-icon-sun { display: block !important; }
.mob-action-text { flex: 1 !important; }
.mob-action-label { display: block !important; font-size: 14px !important; font-weight: 700 !important; color: var(--text-dark) !important; }
.mob-action-sub   { display: block !important; font-size: 11px !important; color: var(--text-light) !important; margin-top: 1px !important; }
body.ardis-dark .mob-action-label { color: #e4e6ea !important; }

/* Toggle pill */
.mob-toggle-pill {
  width: 46px !important; height: 26px !important;
  background: #d0d0d0 !important;
  border-radius: 13px !important;
  position: relative !important;
  transition: background .25s !important;
  flex-shrink: 0 !important;
  border: none !important;
}
.mob-toggle-pill::after {
  content: '' !important;
  position: absolute !important;
  width: 20px !important; height: 20px !important;
  background: #fff !important;
  border-radius: 50% !important;
  top: 3px !important; right: 3px !important;
  transition: transform .25s cubic-bezier(.25,.46,.45,.94) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.2) !important;
}
.mob-toggle-pill.on { background: var(--green-mid) !important; }
.mob-toggle-pill.on::after { transform: translateX(-20px) !important; }

/* Lang pills */
.mob-lang-row { cursor: default !important; }
.mob-lang-pills { display: flex !important; gap: 6px !important; }
.mob-lang-pill {
  width: 34px !important; height: 28px !important;
  background: #f0f0f0 !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: 11.5px !important; font-weight: 800 !important;
  color: var(--text-mid) !important;
  cursor: pointer !important;
  font-family: var(--font) !important;
  transition: all .18s !important;
}
body.ardis-dark .mob-lang-pill { background: #333 !important; border-color: #444 !important; color: #ccc !important; }
.mob-lang-pill.active, .mob-lang-pill:hover {
  background: var(--green-mid) !important;
  border-color: var(--green-mid) !important;
  color: #fff !important;
}

/* ══ 3. FEATURES STRIP — compact mobile ══ */

/* ════════════════════════════════════════════════
   MOBILE FINAL FIX v8.4
════════════════════════════════════════════════ */

/* ══ 1. HIDE search+dark+lang from header on ALL mobile ══ */
@media(max-width:900px) {
  .ardis-search-btn,
  .ardis-darkmode-btn,
  .ardis-lang-wrap,
  .ardis-desktop-only {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important; height: 0 !important;
    padding: 0 !important; margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  /* Only burger visible */
  .ardis-burger { display: flex !important; }
  /* Nav links hidden */
  .ardis-nav-links { display: none !important; }
}

/* ══ 2. FEATURES STRIP — compact horizontal on mobile ══ */

/* ══ 3. DRAWER — cleaner design ══ */
/* Slide from top, full screen */
.mob-drawer {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
/* Better nav link spacing */
.mob-drawer-nav ul { padding: 6px 0 !important; }
.mob-drawer-nav li a {
  font-size: 15.5px !important;
  padding: 14px 22px !important;
  border-radius: 0 !important;
  position: relative !important;
}
/* Arrow indicator */
.mob-drawer-nav li a::before {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 0;
  background: var(--green-mid);
  border-radius: 0 3px 3px 0;
  transition: height .2s ease;
}
.mob-drawer-nav li a:hover::before,
.mob-drawer-nav li a:active::before { height: 60% !important; }

/* Dark mode action row: better style */
.mob-action-btn {
  border-radius: 14px !important;
  transition: background .18s, transform .15s !important;
}
.mob-action-btn:active { transform: scale(.98) !important; }

/* Toggle pill */
.mob-toggle-pill { cursor: pointer !important; }

/* ════════════════════════════════════════════════
   MOBILE — DEFINITIVE v8.5
   Clean slate — no conflicts
════════════════════════════════════════════════ */

/* ═══════════════════════════════
   HIDE desktop icons on mobile
═══════════════════════════════ */
@media(max-width:900px) {
  .ardis-search-btn { display:none !important; }
  .ardis-darkmode-btn { display:none !important; }
  .ardis-lang-wrap { display:none !important; }
  .ardis-nav-links { display:none !important; }
  .ardis-desktop-only { display:none !important; }
  .ardis-burger { display:flex !important; }
}

/* ═══════════════════════════════
   FEATURES STRIP: 2×2 mobile grid — fancy
═══════════════════════════════ */
@media(max-width:768px) {

  .ardis-features {
    padding: 0 !important;
    background: #fff !important;
  }
  body.ardis-dark .ardis-features { background: #18191a !important; }

  .features-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    position: relative !important;
  }

  /* Divider lines via pseudo — one clean cross in the center */
  .features-grid::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; bottom: 0 !important;
    left: 50% !important;
    width: 1px !important;
    background: linear-gradient(180deg,
      transparent 0%,
      var(--green-pale) 15%,
      var(--green-mid) 50%,
      var(--green-pale) 85%,
      transparent 100%) !important;
    transform: translateX(-50%) !important;
    z-index: 1 !important;
  }
  .features-grid::after {
    content: '' !important;
    position: absolute !important;
    left: 8% !important; right: 8% !important;
    top: 50% !important;
    height: 1px !important;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--green-pale) 15%,
      var(--green-mid) 50%,
      var(--green-pale) 85%,
      transparent 100%) !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
  }

  /* Center diamond dot */
  .ardis-features { position: relative !important; }

  .feat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 28px 16px 24px !important;
    gap: 14px !important;
    border: none !important;
    position: relative !important;
    transition: background .2s !important;
  }
  .feat-item:active { background: var(--green-pale) !important; }

  /* Icon: larger, gradient shadow */
  .feat-ico {
    width: 64px !important;
    height: 64px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg,
      rgba(45,106,79,.08) 0%,
      rgba(45,106,79,.15) 100%) !important;
    border: 1.5px solid rgba(45,106,79,.12) !important;
    box-shadow: 0 4px 16px rgba(45,106,79,.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: transform .2s, box-shadow .2s !important;
  }
  .feat-item:active .feat-ico {
    transform: scale(.95) !important;
    box-shadow: 0 2px 8px rgba(45,106,79,.15) !important;
  }
  .feat-ico svg {
    width: 26px !important;
    height: 26px !important;
    stroke: var(--green-mid) !important;
    stroke-width: 1.7 !important;
  }

  /* Label */
  .feat-txt strong {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    letter-spacing: -.2px !important;
    white-space: nowrap !important;
  }
  .feat-txt span { display: none !important; }

  /* Dark mode */
  body.ardis-dark .feat-ico {
    background: rgba(45,106,79,.15) !important;
    border-color: rgba(45,106,79,.2) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.2) !important;
  }
  body.ardis-dark .features-grid::before,
  body.ardis-dark .features-grid::after {
    opacity: .5 !important;
  }
}

/* ═══════════════════════════════
   MOBILE DRAWER — Modern Redesign
═══════════════════════════════ */

/* Remove ALL old drawer rules by overriding */
.mob-drawer {
  position:fixed !important;
  top:0 !important; left:0 !important; right:0 !important;
  height:100dvh !important;
  max-height:100dvh !important;
  background:#fff !important;
  z-index:9998 !important;
  display:flex !important;
  flex-direction:column !important;
  transform:translateX(100%) !important; /* slide from right */
  transition:transform .35s cubic-bezier(.25,.46,.45,.94) !important;
  overflow-y:auto !important;
  direction:rtl !important;
  border-radius:0 !important;
  box-shadow:-8px 0 40px rgba(0,0,0,.15) !important;
  padding:0 !important;
}
.mob-drawer.open {
  transform:translateX(0) !important;
}
body.ardis-dark .mob-drawer {
  background:#18191a !important;
}

/* ── Drawer Top Bar ── */
.mob-drawer-top {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:18px 20px !important;
  border-bottom:1px solid rgba(0,0,0,.08) !important;
  position:sticky !important;
  top:0 !important;
  background:inherit !important;
  z-index:2 !important;
}
body.ardis-dark .mob-drawer-top { border-color:rgba(255,255,255,.06) !important; }

.mob-drawer-logo {
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  text-decoration:none !important;
}
.mob-drawer-logo img { width:34px; height:34px; border-radius:9px; object-fit:cover; }
.mob-drawer-store {
  font-size:17px !important;
  font-weight:900 !important;
  color:var(--green-dark) !important;
}
body.ardis-dark .mob-drawer-store { color:#4ade80 !important; }

.mob-close {
  width:34px !important; height:34px !important;
  background:rgba(0,0,0,.06) !important;
  border:none !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  padding:0 !important;
  transition:background .2s, transform .15s !important;
}
.mob-close:hover { background:var(--green-pale) !important; transform:scale(1.1) !important; }
.mob-close svg { stroke:var(--text-mid); display:block !important; }
body.ardis-dark .mob-close { background:rgba(255,255,255,.08) !important; }
body.ardis-dark .mob-close svg { stroke:#b0b3b8; }

/* ── Search in drawer ── */
.mob-drawer-search {
  padding:14px 18px !important;
  border-bottom:1px solid rgba(0,0,0,.06) !important;
}
body.ardis-dark .mob-drawer-search { border-color:rgba(255,255,255,.05) !important; }

.mob-drawer-search form {
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  background:#f3f4f6 !important;
  border-radius:14px !important;
  padding:11px 14px !important;
}
body.ardis-dark .mob-drawer-search form { background:#242526 !important; }
.mob-drawer-search svg { stroke:#9ca3af; flex-shrink:0; }
.mob-drawer-search input {
  flex:1 !important;
  border:none !important;
  outline:none !important;
  background:transparent !important;
  font-family:var(--font) !important;
  font-size:14px !important;
  color:var(--text-dark) !important;
  direction:rtl !important;
}
body.ardis-dark .mob-drawer-search input { color:#e4e6ea !important; }
.mob-drawer-search input::placeholder { color:#9ca3af; }

/* ── Nav links ── */
.mob-drawer-nav {
  flex:1 !important;
  padding:8px 0 !important;
}
.mob-drawer-nav ul {
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
.mob-drawer-nav li { margin:0 !important; padding:0 !important; }
.mob-drawer-nav a {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:16px 22px !important;
  font-size:15px !important;
  font-weight:700 !important;
  color:var(--text-dark) !important;
  text-decoration:none !important;
  border-bottom:1px solid rgba(0,0,0,.05) !important;
  transition:background .18s, padding-right .2s !important;
}
body.ardis-dark .mob-drawer-nav a {
  color:#e4e6ea !important;
  border-color:rgba(255,255,255,.04) !important;
}
.mob-drawer-nav a:hover,
.mob-drawer-nav a:active {
  background:var(--green-pale) !important;
  color:var(--green-dark) !important;
  padding-right:28px !important;
}
body.ardis-dark .mob-drawer-nav a:hover { background:rgba(45,106,79,.15) !important; color:#4ade80 !important; }

/* Arrow icon in each nav link */
.mob-drawer-nav a::after {
  content:'';
  width:8px; height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(135deg);
  opacity:.4;
  flex-shrink:0;
  margin-right:4px;
}

/* ── Bottom Actions ── */
.mob-drawer-actions {
  padding:14px 16px calc(14px + env(safe-area-inset-bottom)) !important;
  border-top:1px solid rgba(0,0,0,.07) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}
body.ardis-dark .mob-drawer-actions { border-color:rgba(255,255,255,.05) !important; }

.mob-action-btn {
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  width:100% !important;
  padding:13px 16px !important;
  background:#f8f9fa !important;
  border:none !important;
  border-radius:14px !important;
  cursor:pointer !important;
  font-family:var(--font) !important;
  direction:rtl !important;
  text-align:right !important;
  transition:background .18s !important;
}
.mob-action-btn:active { transform:scale(.98) !important; }
body.ardis-dark .mob-action-btn { background:#242526 !important; }
.mob-action-btn:hover { background:var(--green-pale) !important; }
body.ardis-dark .mob-action-btn:hover { background:rgba(45,106,79,.15) !important; }

.mob-action-icon {
  width:38px !important; height:38px !important;
  background:linear-gradient(135deg,var(--green-light),var(--green-dark)) !important;
  border-radius:11px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
}
.mob-action-icon svg { stroke:#fff !important; }

.mob-action-text { flex:1 !important; }
.mob-action-label { display:block !important; font-size:14px !important; font-weight:700 !important; color:var(--text-dark) !important; }
.mob-action-sub   { display:block !important; font-size:11px !important; color:var(--text-light) !important; margin-top:1px !important; }
body.ardis-dark .mob-action-label { color:#e4e6ea !important; }

/* Toggle pill */
.mob-toggle-pill {
  width:48px !important; height:28px !important;
  background:#ddd !important;
  border-radius:14px !important;
  position:relative !important;
  transition:background .25s !important;
  flex-shrink:0 !important;
  cursor:pointer !important;
}
.mob-toggle-pill::after {
  content:'' !important;
  position:absolute !important;
  width:22px !important; height:22px !important;
  background:#fff !important;
  border-radius:50% !important;
  top:3px !important; right:3px !important;
  transition:transform .25s cubic-bezier(.25,.46,.45,.94) !important;
  box-shadow:0 1px 4px rgba(0,0,0,.2) !important;
}
.mob-toggle-pill.on { background:var(--green-mid) !important; }
.mob-toggle-pill.on::after { transform:translateX(-20px) !important; }

/* Lang pills */
.mob-lang-row { cursor:default !important; }
.mob-lang-pills { display:flex !important; gap:6px !important; }
.mob-lang-pill {
  width:36px !important; height:32px !important;
  background:#f0f0f0 !important;
  border:1.5px solid var(--border) !important;
  border-radius:9px !important;
  font-size:12px !important;
  font-weight:800 !important;
  color:var(--text-mid) !important;
  cursor:pointer !important;
  transition:all .18s !important;
  font-family:var(--font) !important;
}
.mob-lang-pill.active, .mob-lang-pill:hover {
  background:var(--green-mid) !important;
  border-color:var(--green-mid) !important;
  color:#fff !important;
}

/* ════════════════════════════════════════════════
   MOBILE DRAWER v8.6 — Matches reference image
════════════════════════════════════════════════ */

/* ── Overlay ── */
.mob-overlay {
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  z-index:9997;
  opacity:0;visibility:hidden;
  transition:opacity .3s,visibility .3s;
}
.mob-overlay.open{opacity:1;visibility:visible;}

/* ── Drawer container ── */
.mob-drawer {
  position:fixed;
  top:0;right:0;bottom:0;
  width:88vw;max-width:360px;
  background:#fff;
  z-index:9998;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .38s cubic-bezier(.25,.46,.45,.94);
  overflow-y:auto;overflow-x:hidden;
  direction:rtl;
  box-shadow:-12px 0 48px rgba(0,0,0,.18);
}
.mob-drawer.open{transform:translateX(0);}
body.ardis-dark .mob-drawer{background:#18191a;}

/* ── Header section ── */
.mdr-header {
  display:flex;align-items:center;
  padding:20px 18px 16px;
  gap:14px;
  border-bottom:1px solid rgba(0,0,0,.07);
  background:linear-gradient(135deg,var(--green-pale) 0%,rgba(255,255,255,0) 70%);
}
body.ardis-dark .mdr-header{background:linear-gradient(135deg,rgba(45,106,79,.15) 0%,transparent 70%);border-color:rgba(255,255,255,.06);}

.mdr-close {
  width:34px;height:34px;flex-shrink:0;
  background:#f0f0f0;border:none;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .2s,transform .15s;
}
.mdr-close:hover{background:var(--green-pale);transform:scale(1.1);}
.mdr-close svg{stroke:var(--text-mid);}
body.ardis-dark .mdr-close{background:rgba(255,255,255,.08);}
body.ardis-dark .mdr-close svg{stroke:#b0b3b8;}

.mdr-brand{display:flex;align-items:center;gap:10px;flex:1;}
.mdr-brand-icon {
  width:42px;height:42px;flex-shrink:0;
  background:linear-gradient(135deg,var(--green-light),var(--green-dark));
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
}
.mdr-brand-icon svg{stroke:#fff;}
.mdr-brand-name{display:block;font-size:16px;font-weight:900;color:var(--green-dark);}
body.ardis-dark .mdr-brand-name{color:#4ade80;}
.mdr-brand-sub{display:block;font-size:11px;color:var(--text-light);margin-top:1px;}

/* ── Search ── */
.mdr-search {padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.06);}
body.ardis-dark .mdr-search{border-color:rgba(255,255,255,.05);}
.mdr-search form {
  display:flex;align-items:center;gap:10px;
  background:#f3f4f6;border-radius:14px;
  padding:11px 14px;
}
body.ardis-dark .mdr-search form{background:#242526;}
.mdr-search svg{stroke:#9ca3af;flex-shrink:0;}
.mdr-search input {
  flex:1;border:none;outline:none;background:transparent;
  font-family:var(--font);font-size:14px;
  color:var(--text-dark);direction:rtl;
}
body.ardis-dark .mdr-search input{color:#e4e6ea;}
.mdr-search input::placeholder{color:#9ca3af;}

/* ── Nav ── */
.mdr-nav{flex:1;padding:10px 14px;}
.mdr-nav-item {
  display:flex;align-items:center;gap:14px;
  padding:13px 14px;
  border-radius:14px;
  margin-bottom:4px;
  text-decoration:none;
  color:var(--text-dark);
  transition:background .18s,color .18s;
  position:relative;
}
body.ardis-dark .mdr-nav-item{color:#e4e6ea;}
.mdr-nav-item:hover,.mdr-nav-item.active{
  background:var(--green-pale);
  color:var(--green-dark);
}
body.ardis-dark .mdr-nav-item:hover,
body.ardis-dark .mdr-nav-item.active{background:rgba(45,106,79,.15);color:#4ade80;}

.mdr-nav-icon {
  width:38px;height:38px;flex-shrink:0;
  background:#f3f4f6;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s;
}
.mdr-nav-item:hover .mdr-nav-icon,
.mdr-nav-item.active .mdr-nav-icon{background:var(--green-mid);}
.mdr-nav-item:hover .mdr-nav-icon svg,
.mdr-nav-item.active .mdr-nav-icon svg{stroke:#fff;}
.mdr-nav-icon svg{stroke:var(--text-mid);}
body.ardis-dark .mdr-nav-icon{background:rgba(255,255,255,.08);}
body.ardis-dark .mdr-nav-icon svg{stroke:#b0b3b8;}

.mdr-nav-label{flex:1;font-size:15px;font-weight:700;}
.mdr-nav-arrow{stroke:var(--text-light);opacity:.5;flex-shrink:0;}
.mdr-nav-item:hover .mdr-nav-arrow,
.mdr-nav-item.active .mdr-nav-arrow{opacity:1;stroke:var(--green-mid);}

/* ── Actions ── */
.mdr-actions{padding:0 14px 12px;}
.mdr-dark-row,.mdr-lang-row {
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;
  background:#f8f9fa;border-radius:14px;
  margin-bottom:8px;
  border:none;width:100%;cursor:pointer;
  font-family:var(--font);direction:rtl;text-align:right;
  transition:background .18s;
}
.mdr-dark-row:hover,.mdr-lang-row:hover{background:var(--green-pale);}
body.ardis-dark .mdr-dark-row,
body.ardis-dark .mdr-lang-row{background:#242526;}
body.ardis-dark .mdr-dark-row:hover,
body.ardis-dark .mdr-lang-row:hover{background:rgba(45,106,79,.15);}

.mdr-action-icon {
  width:38px;height:38px;flex-shrink:0;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
}
.mdr-icon-dark{background:linear-gradient(135deg,#1b4332,var(--green-mid));}
.mdr-icon-dark svg{stroke:#fff;}
.mdr-icon-lang{background:linear-gradient(135deg,#1565c0,#42a5f5);}
.mdr-icon-lang svg{stroke:#fff;}

.mdr-action-text{flex:1;text-align:right;}
.mdr-action-text strong{display:block;font-size:14px;font-weight:700;color:var(--text-dark);}
.mdr-action-text span{display:block;font-size:11px;color:var(--text-light);margin-top:1px;}
body.ardis-dark .mdr-action-text strong{color:#e4e6ea;}

/* Toggle */
.mdr-toggle {
  width:48px;height:28px;
  background:#d1d5db;border-radius:14px;
  position:relative;flex-shrink:0;
  transition:background .25s;
}
.mdr-toggle::after {
  content:'';position:absolute;
  width:22px;height:22px;background:#fff;
  border-radius:50%;top:3px;right:3px;
  transition:transform .25s cubic-bezier(.25,.46,.45,.94);
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.mdr-toggle.on{background:var(--green-mid);}
.mdr-toggle.on::after{transform:translateX(-20px);}

/* Lang buttons */
.mdr-lang-btns{display:flex;gap:5px;}
.mdr-lang-btn {
  width:34px;height:30px;
  background:#f0f0f0;
  border:1.5px solid var(--border);
  border-radius:8px;
  font-size:11.5px;font-weight:800;
  color:var(--text-mid);cursor:pointer;
  transition:all .18s;font-family:var(--font);
}
.mdr-lang-btn.active,.mdr-lang-btn:hover{
  background:var(--green-mid);border-color:var(--green-mid);color:#fff;
}

/* ── Social ── */
.mdr-social {
  display:flex;justify-content:center;gap:10px;
  padding:4px 16px 10px;
}
.mdr-soc-btn {
  width:42px;height:42px;border-radius:50%;
  background:#f3f4f6;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:var(--text-mid);
  transition:all .2s;
}
.mdr-soc-btn:hover{background:var(--green-pale);color:var(--green-dark);}
.mdr-soc-btn svg{stroke:currentColor;}
.mdr-soc-wa svg,.mdr-soc-fb svg,.mdr-soc-tk svg{stroke:none;}
.mdr-soc-wa:hover{background:#e8fdf0;color:#25d366;}
.mdr-soc-fb:hover{background:#e8f0fd;color:#1877f2;}
.mdr-soc-tk:hover{background:#000;color:#fff;}

/* ── Trust badge ── */
.mdr-trust {
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 16px 20px;
  font-size:12px;color:var(--text-light);font-weight:600;
}
.mdr-trust svg{stroke:var(--green-mid);}

/* ════════════════════════════════
   PRODUCT IMAGE FIX — no grey box
════════════════════════════════ */
.pcard-img {
  position:relative;overflow:hidden;
  background:#f4f6f5;
  width:100%;
  padding-top:100%; /* square ratio */
}
.pcard-img img {
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.25,.46,.45,.94);
}
.pcard:hover .pcard-img img{transform:scale(1.07);}

/* ════════════════════════════════
   RELATED PRODUCTS: 2×2 on mobile
════════════════════════════════ */
@media(max-width:768px){
  /* Carousel becomes a 2-column grid */
  .sp-carousel-outer { display:block !important; }
  .sp-car-btn        { display:none !important; }
  .spr-viewport      { overflow:visible !important; }
  .spr-carousel-wrap { display:block !important; }
  .spr-nav           { display:none !important; }

  .spr-track {
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    transform:none !important;
    transition:none !important;
  }
  /* Show only first 4 */
  .spr-card:nth-child(n+5){ display:none !important; }

  .spr-card {
    flex:unset !important;
    min-width:unset !important;
    width:100% !important;
    border-radius:14px !important;
  }
  .spr-img-wrap { aspect-ratio:1/1 !important; }
  .spr-name     { font-size:12.5px !important; min-height:unset !important; }
  .spr-price-main { font-size:13px !important; }
  .spr-buy-btn  { font-size:12px !important; padding:8px !important; }
}

/* ════════════════════════════════════════════════
   v8.7 — CRITICAL FIXES
════════════════════════════════════════════════ */

/* ══ 1. PRODUCT CARD IMAGE — definitive fix ══ */
.pcard-img-link {
  display: block !important;
  overflow: hidden !important;
  text-decoration: none !important;
}
.pcard-img {
  position: relative !important;
  width: 100% !important;
  padding-top: 100% !important;   /* Square */
  overflow: hidden !important;
  background: #f4f6f5 !important;
  aspect-ratio: unset !important; /* Remove conflicting rule */
}
.pcard-img img {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94) !important;
}
.pcard:hover .pcard-img img { transform: scale(1.07) !important; }

/* ══ 2. LANGUAGE BUTTON — compact & classy ══ */
.ardis-lang-btn {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: rgba(255,255,255,.4) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  border-radius: 8px !important;
  padding: 5px 9px !important;
  cursor: pointer !important;
  font-family: var(--font) !important;
  backdrop-filter: blur(8px) !important;
  transition: all .2s !important;
  min-width: unset !important;
}
.ardis-lang-btn:hover {
  background: rgba(255,255,255,.7) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.1) !important;
}
.ardis-lang-current {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--green-dark) !important;
  line-height: 1 !important;
}
.ardis-lang-chev { stroke: var(--green-dark) !important; }
body.ardis-dark .ardis-lang-current { color: #e4e6ea !important; }
body.ardis-dark .ardis-lang-chev    { stroke: #e4e6ea !important; }

/* ══ 3. MOBILE DRAWER — full redesign ══ */
/* Override ALL previous drawer CSS */
.mob-drawer {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important; max-width: 100% !important;
  height: 100dvh !important;
  background: #f8f9fa !important;
  z-index: 9998 !important;
  display: flex !important; flex-direction: column !important;
  transform: translateY(100%) !important;
  transition: transform .38s cubic-bezier(.25,.46,.45,.94) !important;
  overflow-y: auto !important;
  direction: rtl !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.mob-drawer.open { transform: translateY(0) !important; }
body.ardis-dark .mob-drawer { background: #111 !important; }

/* Header */
.mdr-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 18px !important;
  background: #fff !important;
  border-bottom: 1px solid rgba(0,0,0,.07) !important;
  position: sticky !important; top: 0 !important; z-index: 2 !important;
  gap: 12px !important;
}
body.ardis-dark .mdr-header { background: #18191a !important; border-color: rgba(255,255,255,.06) !important; }

.mdr-brand { display: flex !important; align-items: center !important; gap: 10px !important; flex: 1 !important; }
.mdr-brand-icon {
  width: 40px !important; height: 40px !important;
  background: linear-gradient(135deg,var(--green-light),var(--green-dark)) !important;
  border-radius: 11px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.mdr-brand-icon svg { stroke: #fff !important; }
.mdr-brand-name { display: block !important; font-size: 16px !important; font-weight: 900 !important; color: var(--green-dark) !important; line-height: 1.2 !important; }
body.ardis-dark .mdr-brand-name { color: #4ade80 !important; }
.mdr-brand-sub  { display: block !important; font-size: 11px !important; color: var(--text-light) !important; }

.mdr-close {
  width: 32px !important; height: 32px !important;
  background: #f0f0f0 !important; border: none !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important; flex-shrink: 0 !important;
  transition: background .2s !important;
}
.mdr-close svg { stroke: #666 !important; display: block !important; }
.mdr-close:hover { background: var(--green-pale) !important; }
body.ardis-dark .mdr-close { background: rgba(255,255,255,.1) !important; }
body.ardis-dark .mdr-close svg { stroke: #aaa !important; }

/* Search */
.mdr-search {
  padding: 12px 16px !important;
  background: #fff !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}
body.ardis-dark .mdr-search { background: #18191a !important; border-color: rgba(255,255,255,.05) !important; }
.mdr-search form {
  display: flex !important; align-items: center !important; gap: 10px !important;
  background: #f3f4f6 !important; border-radius: 12px !important; padding: 11px 14px !important;
}
body.ardis-dark .mdr-search form { background: #242526 !important; }
.mdr-search svg { stroke: #9ca3af !important; flex-shrink: 0 !important; }
.mdr-search input {
  flex: 1 !important; border: none !important; outline: none !important;
  background: transparent !important; font-family: var(--font) !important;
  font-size: 14px !important; color: var(--text-dark) !important; direction: rtl !important;
}
body.ardis-dark .mdr-search input { color: #e4e6ea !important; }
.mdr-search input::placeholder { color: #9ca3af !important; }

/* Nav */
.mdr-nav { flex: 1 !important; padding: 12px !important; }
.mdr-nav-item {
  display: flex !important; align-items: center !important; gap: 12px !important;
  padding: 12px 14px !important; border-radius: 14px !important;
  margin-bottom: 6px !important; text-decoration: none !important;
  color: var(--text-dark) !important; background: #fff !important;
  transition: all .18s !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
}
body.ardis-dark .mdr-nav-item { background: #1c1e21 !important; color: #e4e6ea !important; box-shadow: none !important; }
.mdr-nav-item:hover, .mdr-nav-item.active {
  background: var(--green-pale) !important;
  color: var(--green-dark) !important;
  transform: translateX(-4px) !important;
  box-shadow: 0 2px 12px rgba(45,106,79,.12) !important;
}
body.ardis-dark .mdr-nav-item:hover,
body.ardis-dark .mdr-nav-item.active { background: rgba(45,106,79,.15) !important; color: #4ade80 !important; }

.mdr-nav-icon {
  width: 36px !important; height: 36px !important;
  background: #f3f4f6 !important; border-radius: 10px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important; transition: background .18s !important;
}
.mdr-nav-item:hover .mdr-nav-icon,
.mdr-nav-item.active .mdr-nav-icon { background: var(--green-mid) !important; }
.mdr-nav-item:hover .mdr-nav-icon svg,
.mdr-nav-item.active .mdr-nav-icon svg { stroke: #fff !important; }
.mdr-nav-icon svg { stroke: var(--text-mid) !important; }
body.ardis-dark .mdr-nav-icon { background: rgba(255,255,255,.07) !important; }

.mdr-nav-label { flex: 1 !important; font-size: 15px !important; font-weight: 700 !important; }
.mdr-nav-arrow { stroke: #ccc !important; flex-shrink: 0 !important; transition: stroke .18s !important; }
.mdr-nav-item:hover .mdr-nav-arrow { stroke: var(--green-mid) !important; }

/* Actions section */
.mdr-actions { padding: 0 12px 10px !important; }
.mdr-dark-row {
  display: flex !important; align-items: center !important; gap: 12px !important;
  width: 100% !important; padding: 12px 14px !important;
  background: #fff !important; border: none !important; border-radius: 14px !important;
  margin-bottom: 6px !important; cursor: pointer !important;
  font-family: var(--font) !important; direction: rtl !important; text-align: right !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important; transition: background .18s !important;
}
.mdr-dark-row:hover { background: var(--green-pale) !important; }
body.ardis-dark .mdr-dark-row { background: #1c1e21 !important; box-shadow: none !important; }
body.ardis-dark .mdr-dark-row:hover { background: rgba(45,106,79,.15) !important; }

.mdr-lang-row {
  display: flex !important; align-items: center !important; gap: 12px !important;
  padding: 12px 14px !important;
  background: #fff !important; border-radius: 14px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
  margin-bottom: 6px !important;
}
body.ardis-dark .mdr-lang-row { background: #1c1e21 !important; box-shadow: none !important; }

.mdr-action-icon {
  width: 36px !important; height: 36px !important; border-radius: 10px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.mdr-icon-dark { background: linear-gradient(135deg,#1b4332,var(--green-mid)) !important; }
.mdr-icon-dark svg { stroke: #fff !important; }
.mdr-icon-lang { background: linear-gradient(135deg,#1565c0,#42a5f5) !important; }
.mdr-icon-lang svg { stroke: #fff !important; }

.mdr-action-text { flex: 1 !important; text-align: right !important; }
.mdr-action-text strong { display: block !important; font-size: 14px !important; font-weight: 700 !important; color: var(--text-dark) !important; }
.mdr-action-text span   { display: block !important; font-size: 11px !important; color: var(--text-light) !important; }
body.ardis-dark .mdr-action-text strong { color: #e4e6ea !important; }

/* Toggle pill */
.mdr-toggle {
  width: 46px !important; height: 26px !important;
  background: #d1d5db !important; border-radius: 13px !important;
  position: relative !important; flex-shrink: 0 !important;
  transition: background .25s !important;
}
.mdr-toggle::after {
  content: '' !important; position: absolute !important;
  width: 20px !important; height: 20px !important;
  background: #fff !important; border-radius: 50% !important;
  top: 3px !important; right: 3px !important;
  transition: transform .25s cubic-bezier(.25,.46,.45,.94) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.2) !important;
}
.mdr-toggle.on { background: var(--green-mid) !important; }
.mdr-toggle.on::after { transform: translateX(-20px) !important; }

/* Lang buttons */
.mdr-lang-btns { display: flex !important; gap: 5px !important; }
.mdr-lang-btn {
  width: 34px !important; height: 28px !important;
  background: #f0f0f0 !important; border: 1.5px solid var(--border) !important;
  border-radius: 8px !important; font-size: 11.5px !important; font-weight: 800 !important;
  color: var(--text-mid) !important; cursor: pointer !important;
  transition: all .18s !important; font-family: var(--font) !important;
}
.mdr-lang-btn.active, .mdr-lang-btn:hover {
  background: var(--green-mid) !important; border-color: var(--green-mid) !important; color: #fff !important;
}

/* Social */
.mdr-social {
  display: flex !important; justify-content: center !important; gap: 10px !important;
  padding: 6px 16px 8px !important;
}
.mdr-soc-btn {
  width: 40px !important; height: 40px !important; border-radius: 50% !important;
  background: #f3f4f6 !important; border: none !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  text-decoration: none !important; transition: all .2s !important;
}
.mdr-soc-btn svg { stroke: #666 !important; }
.mdr-soc-btn:hover { background: var(--green-pale) !important; }
.mdr-soc-wa svg, .mdr-soc-fb svg, .mdr-soc-tk svg { stroke: none !important; }
.mdr-soc-wa { fill: #25d366 !important; }
.mdr-soc-fb { fill: #1877f2 !important; }
.mdr-soc-tk { fill: #000 !important; }
body.ardis-dark .mdr-soc-tk { fill: #fff !important; }

/* Trust */
.mdr-trust {
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 6px !important; padding: 8px 16px 20px !important;
  font-size: 12px !important; color: var(--text-light) !important; font-weight: 600 !important;
}
.mdr-trust svg { stroke: var(--green-mid) !important; }

/* ════════════════════════════════════════════════
   v8.8 — DEFINITIVE FIXES
════════════════════════════════════════════════ */

/* ═══ 1. DARK MODE — Image fix ═══
   The image itself should show — only placeholder bg is dark */
body.ardis-dark .pcard-img,
body.ardis-dark .pcard-img-link { background: #2c2c2c !important; }
/* The img element itself — NEVER change it */
body.ardis-dark .pcard-img img,
body.ardis-dark .pcard-img-link img { filter: none !important; background: none !important; }
/* Keep padding-top square ratio working in dark mode */
body.ardis-dark .pcard-img { padding-top: 100% !important; position: relative !important; }

/* ═══ 2. SHOP VIEW BUTTONS — nuclear clean rebuild ═══ */
/* Kill ALL previous shop-view-btn rules */
.shop-view-btns { display: flex !important; gap: 4px !important; align-items: center !important; }
.shop-view-btn {
  width: 36px !important; height: 36px !important;
  background: #fff !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 9px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important; padding: 0 !important;
  transition: all .2s !important;
  color: #bbb !important;
  fill: #bbb !important;
}
.shop-view-btn svg {
  width: 16px !important; height: 16px !important;
  display: block !important;
}
.shop-view-btn.active {
  background: var(--green-mid) !important;
  border-color: var(--green-mid) !important;
  color: #fff !important; fill: #fff !important;
  box-shadow: 0 3px 10px rgba(45,106,79,.3) !important;
}
.shop-view-btn:hover:not(.active) {
  background: var(--green-pale) !important;
  border-color: var(--green-mid) !important;
  color: var(--green-dark) !important; fill: var(--green-dark) !important;
}

/* ═══ 3. PRODUCTS GRID VIEWS — not affecting anything else ═══ */
/* Only affect the shop grid container */
#shopProductsGrid.view-3 { grid-template-columns: repeat(3,1fr) !important; }
#shopProductsGrid.view-4 { grid-template-columns: repeat(4,1fr) !important; }
@media(max-width:768px) {
  #shopProductsGrid.view-3,
  #shopProductsGrid.view-4 { grid-template-columns: repeat(2,1fr) !important; }
}

/* ═══ 4. LIST VIEW — complete isolation ═══ */
#shopProductsGrid.view-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
#shopProductsGrid.view-list .pcard {
  display: grid !important;
  grid-template-columns: 160px 1fr auto !important;
  grid-template-rows: 1fr !important;
  height: 160px !important;
  min-height: 160px !important;
  max-height: 160px !important;
  overflow: hidden !important;
}
#shopProductsGrid.view-list .pcard-img-link {
  grid-column: 1 !important; grid-row: 1 !important;
  width: 160px !important; height: 160px !important;
  flex-shrink: 0 !important;
}
#shopProductsGrid.view-list .pcard-img {
  padding-top: 0 !important;
  width: 160px !important; height: 160px !important;
  border-radius: 0 !important;
}
#shopProductsGrid.view-list .pcard-img img {
  position: relative !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
}
#shopProductsGrid.view-list .pcard-body {
  grid-column: 2 !important; grid-row: 1 !important;
  display: flex !important; flex-direction: column !important;
  justify-content: center !important;
  padding: 16px 20px !important;
  overflow: hidden !important;
}
#shopProductsGrid.view-list .pcard-name {
  font-size: 15px !important;
  -webkit-line-clamp: 2 !important;
  margin-bottom: 8px !important;
}
#shopProductsGrid.view-list .pcard-price-row {
  grid-column: 3 !important; grid-row: 1 !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  gap: 10px !important; padding: 16px 22px !important;
  border-right: 1px solid var(--border) !important;
  min-width: 160px !important;
}
#shopProductsGrid.view-list .pcard-price-main { font-size: 18px !important; }
#shopProductsGrid.view-list .pcard-btn {
  width: 120px !important; padding: 9px !important; font-size: 12.5px !important;
}
/* Hide elements that break list layout */
#shopProductsGrid.view-list .pcard-img-overlay { display: none !important; }
#shopProductsGrid.view-list .pcard-stars        { display: none !important; }

@media(max-width:640px) {
  #shopProductsGrid.view-list .pcard {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    height: auto !important; min-height: unset !important; max-height: none !important;
  }
  #shopProductsGrid.view-list .pcard-img-link { grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; height: 200px !important; }
  #shopProductsGrid.view-list .pcard-img { width: 100% !important; height: 200px !important; padding-top: 0 !important; }
  #shopProductsGrid.view-list .pcard-body { grid-column: 1 !important; grid-row: 2 !important; }
  #shopProductsGrid.view-list .pcard-price-row { grid-column: 1 !important; grid-row: 3 !important; border-right: none !important; border-top: 1px solid var(--border) !important; flex-direction: row !important; min-width: unset !important; justify-content: space-between !important; }
}

/* ═══ 5. DARK MODE — Mobile drawer toggle fix ═══ */
body.ardis-dark .mob-drawer,
body.ardis-dark .mob-drawer * { /* ensure drawer is visible */ }

/* Dark mode pill syncs correctly */
.mdr-toggle { pointer-events: none !important; } /* pill is decorative, button handles click */
#mobDarkToggle { cursor: pointer !important; width: 100% !important; }

/* ════════════════════════════════════════════════
   PCARD IMAGE — v8.9 FINAL FIX
   Simple flexbox approach — no padding-top tricks
════════════════════════════════════════════════ */

/* Remove ALL conflicting pcard-img rules above with !important */
.pcard { overflow: hidden !important; }

.pcard-img-link {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  text-decoration: none !important;
  background: #f4f6f5 !important;
  /* Square ratio via aspect-ratio — most reliable method */
  aspect-ratio: 1 / 1 !important;
  padding-top: 0 !important;      /* cancel old padding-top:100% */
}

.pcard-img {
  position: static !important;    /* cancel position:relative/absolute */
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;      /* cancel old padding-top */
  background: transparent !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1 !important;
}

.pcard-img img {
  position: static !important;    /* cancel position:absolute */
  top: auto !important;
  left: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94) !important;
}
.pcard:hover .pcard-img img { transform: scale(1.07) !important; }

/* Overlay stays on top */
.pcard-img-overlay {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Badge positions relative to pcard-img-link */
.pcard-badge {
  position: absolute !important;
  top: 10px !important; right: 10px !important;
  z-index: 2 !important;
}

/* Dark mode: only placeholder bg */
body.ardis-dark .pcard-img-link { background: #2c2c2c !important; }
body.ardis-dark .pcard-img      { background: transparent !important; }
body.ardis-dark .pcard-img img  {
  position: static !important;
  filter: none !important;
}

/* ─────────────────────────────────────
   v9.3 FIXES
───────────────────────────────────── */

/* ── Mobile hover: remove sticky active state ── */
@media(hover: none) {
  .pcard:hover, .pcard:focus { transform: none !important; box-shadow: var(--shadow-sm) !important; }
  .pcard-btn:hover { transform: none !important; opacity: 1 !important; }
  .feat-item:hover .feat-ico { transform: none !important; }
  .spr-card:hover { transform: none !important; }
  .why-card:hover { transform: none !important; }
  a:hover, button:hover { opacity: 1 !important; }
}
/* iOS font spacing fix */
body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; letter-spacing: normal; word-spacing: normal; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ── View All button — fancy centered ── */
.hp-view-all-fancy {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 32px !important;
  background: transparent !important;
  border: 2px solid var(--green-mid) !important;
  border-radius: 50px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--green-mid) !important;
  text-decoration: none !important;
  letter-spacing: .3px !important;
  transition: all .3s cubic-bezier(.25,.46,.45,.94) !important;
  position: relative !important;
  overflow: hidden !important;
}
.hp-view-all-fancy::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--green-mid) !important;
  transform: scaleX(0) !important;
  transform-origin: right !important;
  transition: transform .3s cubic-bezier(.25,.46,.45,.94) !important;
  z-index: 0 !important;
}
.hp-view-all-fancy:hover::before { transform: scaleX(1) !important; transform-origin: left !important; }
.hp-view-all-fancy:hover { color: #fff !important; box-shadow: 0 6px 24px rgba(45,106,79,.3) !important; }
.hp-view-all-fancy span, .hp-view-all-fancy svg { position: relative !important; z-index: 1 !important; }
.hp-view-all-fancy svg { stroke: currentColor !important; }
/* Centered wrapper */
.hp-header-view-all-wrap {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: 8px !important;
}
@media(max-width:768px) {
  .hp-view-all-fancy { padding: 10px 24px !important; font-size: 13px !important; }
}

/* ── Shop sidebar: fancy price range ── */
.sw-title {
  font-size: 14px !important; font-weight: 800 !important;
  color: var(--text-dark) !important; margin: 0 0 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--green-pale) !important;
  position: relative !important;
}
.sw-title::after {
  content: '' !important; position: absolute !important;
  bottom: -2px !important; right: 0 !important;
  width: 28px !important; height: 2px !important;
  background: var(--green-mid) !important; border-radius: 2px !important;
}
.sw-search-form { margin: 0 !important; }
.sw-search-wrap {
  display: flex !important; align-items: center !important; gap: 8px !important;
  background: #f4f6f5 !important; border-radius: 12px !important;
  padding: 10px 14px !important; border: 1.5px solid transparent !important;
  transition: border-color .2s !important;
}
.sw-search-wrap:focus-within { border-color: var(--green-mid) !important; background: #fff !important; }
.sw-search-wrap svg { stroke: var(--text-light) !important; flex-shrink: 0 !important; }
.sw-search-wrap input {
  flex: 1 !important; border: none !important; outline: none !important;
  background: transparent !important; font-family: var(--font) !important;
  font-size: 13.5px !important; color: var(--text-dark) !important;
  direction: rtl !important;
}
.sw-search-wrap input::placeholder { color: #bbb !important; }

/* Price range slider */
.sw-price-form { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.price-range-wrap { padding: 4px 0 !important; }
.price-range-track {
  position: relative !important; height: 6px !important;
  margin: 18px 0 !important;
}
.price-range-track::before {
  content: '' !important; position: absolute !important;
  inset: 0 !important; background: #e5e7eb !important; border-radius: 3px !important;
}
.price-range-fill {
  position: absolute !important; height: 100% !important;
  background: linear-gradient(90deg, var(--green-light), var(--green-mid)) !important;
  border-radius: 3px !important; pointer-events: none !important;
}
.price-range-input {
  position: absolute !important; width: 100% !important;
  height: 6px !important; background: transparent !important;
  appearance: none !important; -webkit-appearance: none !important;
  pointer-events: none !important; top: 0 !important;
}
.price-range-input::-webkit-slider-thumb {
  -webkit-appearance: none !important; appearance: none !important;
  width: 20px !important; height: 20px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 2.5px solid var(--green-mid) !important;
  box-shadow: 0 2px 8px rgba(45,106,79,.25) !important;
  cursor: pointer !important; pointer-events: all !important;
  transition: transform .15s, box-shadow .15s !important;
}
.price-range-input::-webkit-slider-thumb:hover,
.price-range-input:active::-webkit-slider-thumb {
  transform: scale(1.2) !important;
  box-shadow: 0 3px 12px rgba(45,106,79,.4) !important;
}
.price-range-values {
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  margin-top: 8px !important;
}
.prv-label { font-size: 12px !important; color: var(--text-light) !important; }
.prv-label strong { color: var(--green-dark) !important; font-size: 14px !important; }

.price-filter-btn {
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 7px !important; width: 100% !important; padding: 11px !important;
  background: linear-gradient(135deg, var(--green-light), var(--green-dark)) !important;
  color: #fff !important; border: none !important; border-radius: 12px !important;
  font-family: var(--font) !important; font-size: 13.5px !important; font-weight: 700 !important;
  cursor: pointer !important; transition: opacity .2s, transform .15s !important;
  box-shadow: 0 3px 12px rgba(27,67,50,.25) !important;
}
.price-filter-btn:hover { opacity: .9 !important; transform: translateY(-1px) !important; }
.price-filter-btn svg { stroke: #fff !important; }
.price-filter-clear {
  display: block !important; text-align: center !important; font-size: 12px !important;
  color: var(--text-light) !important; text-decoration: none !important;
  margin-top: 6px !important; transition: color .2s !important;
}
.price-filter-clear:hover { color: var(--red) !important; }

/* Shop toolbar */
.shop-toolbar {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 0 18px !important; gap: 12px !important;
  border-bottom: 1px solid var(--border) !important; margin-bottom: 20px !important;
}
.shop-sort-wrap {
  display: flex !important; align-items: center !important; gap: 8px !important;
  background: #f4f6f5 !important; border-radius: 10px !important;
  padding: 8px 12px !important; border: 1.5px solid var(--border) !important;
  transition: border-color .2s !important;
}
.shop-sort-wrap:focus-within { border-color: var(--green-mid) !important; }
.shop-sort-wrap svg { stroke: var(--text-light) !important; flex-shrink: 0 !important; }
.shop-sort {
  border: none !important; background: transparent !important;
  font-family: var(--font) !important; font-size: 13.5px !important;
  color: var(--text-dark) !important; outline: none !important;
  cursor: pointer !important; direction: rtl !important;
}
.shop-count {
  font-size: 12.5px !important; color: var(--text-light) !important; font-weight: 600 !important;
}

/* Empty state */
.shop-empty {
  text-align: center !important; padding: 60px 20px !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; gap: 12px !important;
}
.shop-empty svg { stroke: var(--text-light) !important; }
.shop-empty p { font-size: 16px !important; color: var(--text-light) !important; }
.shop-empty a {
  padding: 10px 24px !important; background: var(--green-mid) !important; color: #fff !important;
  border-radius: 10px !important; text-decoration: none !important; font-weight: 700 !important; font-size: 14px !important;
}

/* ═══════════════════════════════════════════════
   v9.3 — Shop, Hover fix, Font, عرض الكل
═══════════════════════════════════════════════ */

/* ── 1. Mobile hover/active fix (iOS sticky hover) ── */
@media(hover: none) {
  .pcard:hover,
  .feat-item:hover,
  .spr-card:hover,
  .plcard:hover,
  .ccard:hover,
  .why-card:hover,
  .about-policy-card:hover { transform: none !important; box-shadow: none !important; }
  .pcard:hover .pcard-img img,
  .spr-card:hover .spr-img-wrap img { transform: none !important; }
  .pcard-btn:hover,
  .spr-buy-btn:hover,
  .plcard-btn:hover { transform: none !important; opacity: 1 !important; }
}

/* ── 2. iOS font spacing fix ── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
* { letter-spacing: normal; word-spacing: normal; }

/* ── 3. عرض الكل button — fancy, centered, smaller ── */
.hp-view-all-btn,
.hp-view-all-btn--sm,
.hp-view-all-btn--xs {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 20px !important;
  background: transparent !important;
  border: 1.5px solid var(--green-mid) !important;
  border-radius: 30px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--green-mid) !important;
  text-decoration: none !important;
  transition: all .25s ease !important;
  margin: 0 auto !important;
}
.hp-view-all-btn:hover {
  background: var(--green-mid) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: 0 4px 16px rgba(45,106,79,.25) !important;
}
.hp-header-view-all-wrap { justify-content: center !important; }

/* ── 4. Shop page — price range slider ── */
.shop-layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 24px;
  align-items: start;
  padding: 28px 0 52px;
}
@media(max-width:768px) { .shop-layout { grid-template-columns: 1fr; } }
@media(max-width:768px) { .ardis-pages, .asp-pagination { margin-bottom: 64px !important; } }

.sidebar-widget { background: #fff; border: 1.5px solid var(--border); border-radius: 14px; padding: 18px; margin-bottom: 14px; }
body.ardis-dark .sidebar-widget { background: #1c1e21; border-color: #2c2c2c; }
.sw-title { font-size: 14px; font-weight: 800; color: var(--text-dark); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }

/* Search in sidebar */
.sw-search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: #f5f5f5; border-radius: 10px; padding: 10px 12px;
}
body.ardis-dark .sw-search-wrap { background: #2a2a2a; }
.sw-search-wrap svg { stroke: #999; flex-shrink: 0; }
.sw-search-wrap input { border: none; outline: none; background: transparent; font-family: var(--font); font-size: 13px; color: var(--text-dark); direction: rtl; width: 100%; }
.sw-search-wrap input::placeholder { color: #bbb; }

/* Price range */
.sw-price-form { display: flex; flex-direction: column; gap: 14px; }
.price-range-wrap { display: flex; flex-direction: column; gap: 12px; }
.price-range-track {
  position: relative;
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  margin: 16px 0;
}
.price-range-fill {
  position: absolute;
  height: 100%;
  background: var(--green-mid);
  border-radius: 4px;
  pointer-events: none;
}
.price-range-input {
  position: absolute;
  width: 100%;
  height: 4px;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  pointer-events: none;
  top: 0; left: 0;
}
.price-range-input::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--green-mid);
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 2px 8px rgba(45,106,79,.3);
  transition: transform .15s, box-shadow .15s;
}
.price-range-input::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 3px 12px rgba(45,106,79,.4); }
.price-range-input::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--green-mid);
  cursor: pointer; pointer-events: all;
  box-shadow: 0 2px 8px rgba(45,106,79,.3);
}
.price-range-values { display: flex; justify-content: space-between; }
.prv-label { font-size: 12px; color: var(--text-light); }
.prv-label strong { color: var(--green-dark); font-weight: 800; }

.price-filter-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 11px;
  background: linear-gradient(135deg, var(--green-light), var(--green-dark));
  color: #fff; border: none; border-radius: 10px;
  font-family: var(--font); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: opacity .2s, transform .15s;
  box-shadow: 0 3px 12px rgba(27,67,50,.25);
}
.price-filter-btn:hover { opacity: .92; transform: translateY(-1px); }
.price-filter-btn svg { stroke: #fff; }
.price-filter-clear {
  display: block; text-align: center; font-size: 12px;
  color: var(--text-light); text-decoration: none;
  transition: color .2s;
}
.price-filter-clear:hover { color: var(--red); }

/* Shop toolbar */
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 10px; }
.shop-sort-wrap {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid var(--border);
  border-radius: 10px; padding: 8px 12px;
}
body.ardis-dark .shop-sort-wrap { background: #1c1e21; border-color: #2c2c2c; }
.shop-sort-wrap svg { stroke: var(--text-light); flex-shrink: 0; }
.shop-sort { border: none; outline: none; background: transparent; font-family: var(--font); font-size: 13px; color: var(--text-dark); cursor: pointer; }
.shop-count { font-size: 13px; color: var(--text-light); font-weight: 600; }

/* Shop empty state */
.shop-empty { text-align: center; padding: 60px 20px; color: var(--text-light); }
.shop-empty svg { stroke: var(--border); margin-bottom: 16px; }
.shop-empty p { font-size: 15px; margin-bottom: 16px; }
.shop-empty a { color: var(--green-mid); font-weight: 700; }

/* ── Mobile shop: sidebar above grid ── */
@media(max-width:768px) {
  .ardis-sidebar { display: flex; gap: 12px; flex-wrap: wrap; }
  .ardis-sidebar .sidebar-widget { flex: 1 1 100%; margin-bottom: 0; }
  .price-range-track { margin: 20px 4px; }
}


/* ════════════════════════════════════════════════
   v9.3 FIXES
════════════════════════════════════════════════ */

/* ── 1. Fix sticky hover on mobile (touch) ── */
@media(hover: none) {
  .pcard:hover, .feat-item:hover, .spr-card:hover,
  .ardis-nav-links a:hover, .pcard-btn:hover,
  .why-card:hover, .review-card:hover { 
    transform: none !important; 
    box-shadow: none !important;
  }
  .pcard:active { transform: translateY(-2px) !important; }
  .feat-item:active { background: var(--green-pale) !important; }
}
/* Remove :active lingering on iOS */
* { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }

/* ── 2. iOS font fix — no letter-spacing issues ── */
body, * {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  font-kerning: normal !important;
  font-variant-ligatures: normal !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ── 3. عرض الكل button — fancy centered ── */
.hp-header-view-all-wrap {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: 6px !important;
}
.hp-view-all-btn--xs {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 24px !important;
  background: transparent !important;
  border: 1.5px solid var(--green-mid) !important;
  border-radius: 30px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--green-mid) !important;
  text-decoration: none !important;
  transition: all .25s ease !important;
  letter-spacing: .3px !important;
}
.hp-view-all-btn--xs:hover {
  background: var(--green-mid) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: 0 4px 16px rgba(45,106,79,.25) !important;
}
.hp-view-all-btn--xs svg { stroke: currentColor !important; }
@media(max-width:768px) {
  .hp-view-all-btn--xs { font-size: 12px !important; padding: 7px 18px !important; }
}

/* ── 4. Shop page — new design ── */
.shop-layout {
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
  gap: 28px !important;
  align-items: start !important;
  padding: 28px 0 60px !important;
}
@media(max-width:900px) { .shop-layout { grid-template-columns: 1fr !important; } }

/* Sidebar widgets */
.sidebar-widget {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
}
body.ardis-dark .sidebar-widget { background: #1c1c1c; border-color: #2c2c2c; }
.sw-title {
  font-size: 14px; font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.sw-title::before {
  content: '';
  width: 3px; height: 16px;
  background: var(--green-mid);
  border-radius: 2px;
  display: inline-block;
}

/* Search widget */
.sw-search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: #f8f9fa; border-radius: 10px; padding: 10px 12px;
  border: 1.5px solid transparent; transition: border-color .2s;
}
.sw-search-wrap:focus-within { border-color: var(--green-mid); background: #fff; }
.sw-search-wrap svg { stroke: #aaa; flex-shrink: 0; }
.sw-search-wrap input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--font); font-size: 13px; color: var(--text-dark); direction: rtl;
}
.sw-search-wrap input::placeholder { color: #bbb; }
body.ardis-dark .sw-search-wrap { background: #242526; }
body.ardis-dark .sw-search-wrap input { color: #e4e6ea; }

/* Price range */
.price-range-wrap { padding: 4px 0; }
.price-range-track {
  position: relative; height: 4px;
  background: var(--border); border-radius: 4px;
  margin: 18px 0 20px;
}
.price-range-fill {
  position: absolute; height: 100%;
  background: var(--green-mid); border-radius: 4px;
  pointer-events: none;
}
.price-range-input {
  position: absolute; width: 100%;
  -webkit-appearance: none; appearance: none;
  height: 4px; background: transparent;
  outline: none; pointer-events: none;
  top: 0; left: 0;
}
.price-range-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px;
  background: #fff; border: 2.5px solid var(--green-mid);
  border-radius: 50%; cursor: pointer;
  box-shadow: 0 2px 8px rgba(45,106,79,.3);
  pointer-events: all; transition: transform .15s;
}
.price-range-input::-webkit-slider-thumb:hover { transform: scale(1.2); }
.price-range-input::-moz-range-thumb {
  width: 20px; height: 20px;
  background: #fff; border: 2.5px solid var(--green-mid);
  border-radius: 50%; cursor: pointer;
  box-shadow: 0 2px 8px rgba(45,106,79,.3);
  pointer-events: all;
}
.price-range-values {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--text-light);
}
.prv-label strong { color: var(--green-dark); font-weight: 800; }

.price-filter-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 11px; margin-top: 14px;
  background: linear-gradient(135deg, var(--green-light), var(--green-dark));
  color: #fff; font-family: var(--font); font-size: 13px; font-weight: 700;
  border: none; border-radius: 10px; cursor: pointer;
  transition: opacity .2s, transform .15s;
  box-shadow: 0 3px 12px rgba(27,67,50,.25);
}
.price-filter-btn:hover { opacity: .92; transform: translateY(-1px); }
.price-filter-btn svg { stroke: #fff; }
.price-filter-clear {
  display: block; text-align: center; margin-top: 8px;
  font-size: 12px; color: var(--text-light); text-decoration: none;
  transition: color .2s;
}
.price-filter-clear:hover { color: var(--red); }

/* Sort bar */
.shop-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: #fff; border: 1.5px solid var(--border);
  border-radius: 12px; margin-bottom: 20px;
  gap: 12px;
}
body.ardis-dark .shop-toolbar { background: #1c1c1c; border-color: #2c2c2c; }
.shop-sort-wrap {
  display: flex; align-items: center; gap: 8px;
  background: #f8f9fa; border-radius: 8px; padding: 7px 12px;
  border: 1.5px solid var(--border); transition: border-color .2s;
}
.shop-sort-wrap:focus-within { border-color: var(--green-mid); }
.shop-sort-wrap svg { stroke: var(--text-light); flex-shrink: 0; }
.shop-sort {
  border: none; outline: none; background: transparent;
  font-family: var(--font); font-size: 13px; color: var(--text-dark);
  cursor: pointer; direction: rtl;
}
body.ardis-dark .shop-sort-wrap { background: #242526; }
body.ardis-dark .shop-sort { color: #e4e6ea; }
.shop-count { font-size: 12.5px; color: var(--text-light); font-weight: 600; white-space: nowrap; }

/* Empty state */
.shop-empty {
  text-align: center; padding: 60px 20px;
  color: var(--text-light);
}
.shop-empty svg { stroke: #ccc; margin: 0 auto 16px; display: block; }
.shop-empty p { font-size: 15px; margin-bottom: 16px; }
.shop-empty a {
  display: inline-block; padding: 10px 24px;
  background: var(--green-mid); color: #fff; border-radius: 10px;
  text-decoration: none; font-weight: 700; font-size: 13px;
}


/* ════════════════════════════════════════════════
   v9.4 — iOS hover fix + font + shop range
════════════════════════════════════════════════ */

/* ── 1. KILL sticky :hover on touch devices ── */
@media (hover: none) and (pointer: coarse) {
  /* Features grid: no sticky background */
  .feat-item { background: transparent !important; }
  .feat-item:hover { background: transparent !important; }
  /* Only show active state while finger is down */
  .feat-item:active { background: var(--green-pale) !important; transition: none !important; }
  
  /* Remove ALL hover transforms on touch */
  .pcard:hover, .spr-card:hover, .why-card:hover,
  .review-card:hover, .ccard:hover, .about-policy-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  /* Quick active feedback instead */
  .pcard:active   { transform: scale(.98) !important; transition: transform .1s !important; }
  .pcard-btn:hover { opacity: 1 !important; transform: none !important; }
  .pcard-btn:active { opacity: .85 !important; }


  /* ── Variation swatches/pills: no sticky hover, only active class drives state ── */
  .pv-color-item:hover { transform: none !important; }
  .pv-size-item:hover {
    border-color: var(--border) !important;
    color: var(--text-dark) !important;
    background: #f5f6f7 !important;
  }
  body.ardis-dark .pv-size-item:hover {
    color: #e4e6ea !important;
    background: #232527 !important;
  }
  .pv-size-item:active { transform: scale(.96) !important; }
  .pv-color-item:active { transform: scale(.92) !important; }

  /* ── Delivery option cards: no sticky hover ── */
  .sf-delivery-opt:hover {
    background: #fff !important;
    border-color: var(--border) !important;
  }
  body.ardis-dark .sf-delivery-opt:hover {
    background: #1c1e21 !important;
    border-color: #2e3035 !important;
  }
  .sf-delivery-opt:active { transform: scale(.98) !important; }

  /* ── Generic safety net: any element with a hover-driven border/bg/transform ── */
  .shop-cat-item:hover { background: transparent !important; color: var(--text-mid) !important; }
  body.ardis-dark .shop-cat-item:hover { color: #b0b3b8 !important; }
  .shop-cat-item.active:hover { background: var(--green-pale) !important; color: var(--green-dark) !important; }
  body.ardis-dark .shop-cat-item.active:hover { background: rgba(45,106,79,.15) !important; color: #4ade80 !important; }
}

/* ── 2. iOS font: fix letter-spacing / word-spacing ── */
@supports (-webkit-touch-callout: none) {
  body, * {
    word-spacing: normal !important;
    letter-spacing: normal !important;
    -webkit-text-size-adjust: 100% !important;
  }
  /* Specific fix for why-label pill text */
  .why-label {
    word-spacing: 0 !important;
    letter-spacing: 0 !important;
  }
}

/* ── 3. Shop price range — definitive fix ── */
.price-range-wrap { padding: 8px 0 4px; }

.price-range-track {
  position: relative !important;
  height: 6px !important;
  background: #e5e7eb !important;
  border-radius: 6px !important;
  margin: 24px 4px 28px !important;
}

.price-range-fill {
  position: absolute !important;
  height: 100% !important;
  background: linear-gradient(90deg, var(--green-light), var(--green-mid)) !important;
  border-radius: 6px !important;
  pointer-events: none !important;
  top: 0 !important;
}

/* Both range inputs stacked on the track */
.price-range-input {
  position: absolute !important;
  width: 100% !important;
  left: 0 !important; right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 6px !important;
  background: transparent !important;
  outline: none !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.price-range-input::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 22px !important; height: 22px !important;
  background: #fff !important;
  border: 2.5px solid var(--green-mid) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  pointer-events: all !important;
  box-shadow: 0 2px 8px rgba(45,106,79,.25) !important;
  transition: transform .15s, box-shadow .15s !important;
  position: relative !important;
  z-index: 2 !important;
}
.price-range-input::-webkit-slider-thumb:active {
  transform: scale(1.3) !important;
  box-shadow: 0 4px 16px rgba(45,106,79,.4) !important;
}
.price-range-input::-moz-range-thumb {
  width: 22px !important; height: 22px !important;
  background: #fff !important;
  border: 2.5px solid var(--green-mid) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  pointer-events: all !important;
  box-shadow: 0 2px 8px rgba(45,106,79,.25) !important;
}

/* z-index: min handle on top when near max */
.price-range-min { z-index: 3 !important; }
.price-range-max { z-index: 4 !important; }

.price-range-values {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
}
.prv-label {
  font-size: 12px !important;
  color: var(--text-light) !important;
  background: #f8f9fa !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
}
.prv-label strong {
  color: var(--green-dark) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}
body.ardis-dark .prv-label {
  background: #242526 !important;
  border-color: #3e4042 !important;
}

.price-filter-btn {
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  gap: 7px !important; width: 100% !important;
  padding: 12px !important; margin-top: 16px !important;
  background: linear-gradient(135deg, var(--green-light), var(--green-dark)) !important;
  color: #fff !important; font-family: var(--font) !important;
  font-size: 13.5px !important; font-weight: 700 !important;
  border: none !important; border-radius: 12px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(27,67,50,.28) !important;
  transition: opacity .2s, transform .15s !important;
}
.price-filter-btn:hover { opacity: .92 !important; transform: translateY(-1px) !important; }
.price-filter-btn svg { stroke: #fff !important; }

.price-filter-clear {
  display: block !important; text-align: center !important;
  margin-top: 8px !important; font-size: 12px !important;
  color: var(--text-light) !important; text-decoration: none !important;
  transition: color .2s !important; padding: 4px !important;
}
.price-filter-clear:hover { color: #e53935 !important; }

/* Sort bar */
.shop-sort-form { display: flex; align-items: center; }
.shop-sort-wrap {
  display: flex !important; align-items: center !important; gap: 8px !important;
  background: #f8f9fa !important; border-radius: 10px !important;
  padding: 8px 12px !important; border: 1.5px solid var(--border) !important;
  cursor: pointer !important; transition: border-color .2s !important;
}
.shop-sort-wrap:focus-within { border-color: var(--green-mid) !important; }
.shop-sort {
  border: none !important; outline: none !important; background: transparent !important;
  font-family: var(--font) !important; font-size: 13px !important;
  color: var(--text-dark) !important; cursor: pointer !important;
  direction: rtl !important;
}
.shop-sort-wrap svg { stroke: var(--green-mid) !important; flex-shrink: 0 !important; }

/* ════════════════════════════════════════════════
   COD FORM VARIATIONS v9.5
════════════════════════════════════════════════ */

/* ── Variation groups ── */
.sf-variations { display:flex; flex-direction:column; gap:16px; margin-bottom:18px; }
.sf-var-group  { display:flex; flex-direction:column; gap:10px; }
.sf-var-label  {
  font-size:13px; font-weight:700; color:var(--text-mid);
  display:flex; align-items:center; gap:8px;
}
.sf-var-selected {
  font-size:12px; font-weight:600;
  color:var(--green-mid);
  background:var(--green-pale);
  padding:2px 8px; border-radius:20px;
}

/* ── Color swatches ── */
.sf-color-swatches { display:flex; flex-wrap:wrap; gap:10px; }
.sf-color-swatch {
  width:34px; height:34px;
  border-radius:50%;
  border:2.5px solid transparent;
  cursor:pointer;
  position:relative;
  transition:transform .2s, border-color .2s, box-shadow .2s;
  background:#eee;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:#555;
  overflow:hidden;
}
.sf-color-swatch:hover { transform:scale(1.12); }
.sf-color-swatch.selected {
  border-color:var(--green-mid) !important;
  box-shadow:0 0 0 3px rgba(45,106,79,.2);
  transform:scale(1.08);
}
.sf-color-check {
  position:absolute; inset:0;
  background:rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  opacity:0; transition:opacity .2s;
}
.sf-color-check svg { stroke:#fff; }
.sf-color-swatch.selected .sf-color-check { opacity:1; }

/* ── Size pills ── */
.sf-size-pills { display:flex; flex-wrap:wrap; gap:8px; }
.sf-size-pill {
  min-width:40px; height:36px;
  padding:0 12px;
  border:1.5px solid var(--border);
  border-radius:8px;
  background:#fff;
  font-family:var(--font);
  font-size:13px; font-weight:700;
  color:var(--text-mid);
  cursor:pointer;
  transition:all .2s;
}
.sf-size-pill:hover { border-color:var(--green-mid); color:var(--green-dark); }
.sf-size-pill.selected {
  background:var(--green-mid);
  border-color:var(--green-mid);
  color:#fff;
  box-shadow:0 2px 8px rgba(45,106,79,.3);
}

/* ── Generic select ── */
.sf-var-select {
  width:100%; padding:10px 12px;
  border:1.5px solid var(--border); border-radius:10px;
  font-family:var(--font); font-size:13px;
  color:var(--text-dark); background:#fff;
  direction:rtl; text-align:right;
  outline:none; cursor:pointer;
  transition:border-color .2s;
}
.sf-var-select:focus { border-color:var(--green-mid); }

/* ── Delivery options ── */
.sf-delivery-group { margin-bottom:18px; }
.sf-delivery-options { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.sf-delivery-opt {
  display:flex; align-items:center; gap:12px;
  padding:13px 16px;
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:12px;
  cursor:pointer;
  transition:all .2s;
  position:relative;
}
.sf-delivery-opt input[type=radio] { display:none; }
.sf-delivery-opt:hover { border-color:var(--green-mid); background:var(--green-pale); }
.sf-delivery-opt.active {
  border-color:var(--green-mid);
  background:var(--green-pale);
  box-shadow:0 2px 10px rgba(45,106,79,.12);
}
.sf-delivery-icon {
  width:44px; height:44px; flex-shrink:0;
  background:rgba(45,106,79,.08);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.sf-delivery-icon svg { stroke:var(--green-mid); }
.sf-delivery-opt.active .sf-delivery-icon { background:var(--green-mid); }
.sf-delivery-opt.active .sf-delivery-icon svg { stroke:#fff; }
.sf-delivery-text { flex:1; }
.sf-delivery-text strong { display:block; font-size:13.5px; font-weight:700; color:var(--text-dark); }
.sf-delivery-text small  { font-size:11.5px; color:var(--text-light); }
.sf-delivery-check {
  width:22px; height:22px;
  background:var(--green-mid);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.6);
  transition:all .2s;
  flex-shrink:0;
}
.sf-delivery-check svg { stroke:#fff; }
.sf-delivery-opt.active .sf-delivery-check { opacity:1; transform:scale(1); }

/* Dark mode */
body.ardis-dark .sf-size-pill { background:#242526; border-color:#3e4042; color:#b0b3b8; }
body.ardis-dark .sf-var-select { background:#242526; border-color:#3e4042; color:#e4e6ea; }
body.ardis-dark .sf-delivery-opt { background:#242526; border-color:#3e4042; }
body.ardis-dark .sf-delivery-opt.active { background:rgba(45,106,79,.15); }

/* ════════════════════════════════════════════════
   v9.5 — COD Form: Variations + Delivery
════════════════════════════════════════════════ */

/* ── Variation groups ── */
.sf-variations { display: flex; flex-direction: column; gap: 18px; margin-bottom: 20px; }
.sf-var-group  { display: flex; flex-direction: column; gap: 10px; }
.sf-var-label  {
  font-size: 13px; font-weight: 700; color: var(--text-dark);
  display: flex; align-items: center; gap: 8px;
}
.sf-var-selected {
  font-size: 12px; font-weight: 600;
  color: var(--green-mid); background: var(--green-pale);
  padding: 2px 10px; border-radius: 20px;
}

/* ── Color swatches ── */
.sf-color-swatches {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.sf-color-swatch {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer; position: relative;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
  background: #ddd;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.sf-color-swatch:hover { transform: scale(1.15); }
.sf-color-swatch.active {
  border-color: var(--green-mid) !important;
  box-shadow: 0 0 0 3px rgba(45,106,79,.2), 0 2px 8px rgba(0,0,0,.15) !important;
  transform: scale(1.1);
}
.sf-color-check {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35); border-radius: 50%;
}
.sf-color-check svg { stroke: #fff; }
.sf-color-swatch.active .sf-color-check { display: flex; }

/* ── Size pills ── */
.sf-size-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-size-pill {
  padding: 7px 16px; border-radius: 10px;
  border: 1.5px solid var(--border);
  background: #fff; color: var(--text-dark);
  font-family: var(--font); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .2s;
}
.sf-size-pill:hover { border-color: var(--green-mid); color: var(--green-mid); }
.sf-size-pill.active {
  background: var(--green-mid); border-color: var(--green-mid);
  color: #fff; box-shadow: 0 3px 10px rgba(45,106,79,.3);
}
body.ardis-dark .sf-size-pill { background: #242526; border-color: #3e4042; color: #e4e6ea; }
body.ardis-dark .sf-size-pill.active { background: var(--green-mid); color: #fff; }

/* ── Generic var select ── */
.sf-var-select {
  width: 100%; padding: 10px 14px; border: 1.5px solid var(--border);
  border-radius: 10px; font-family: var(--font); font-size: 13px;
  color: var(--text-dark); background: #fff; direction: rtl;
  outline: none; cursor: pointer; transition: border-color .2s;
}
.sf-var-select:focus { border-color: var(--green-mid); }

/* ── Delivery options ── */
.sf-delivery-group { margin-bottom: 20px; }
.sf-delivery-options { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.sf-delivery-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 14px;
  border: 1.5px solid var(--border); background: #fff;
  cursor: pointer; transition: all .25s; position: relative;
}
.sf-delivery-opt input[type=radio] { display: none; }
.sf-delivery-opt:hover { border-color: var(--green-mid); background: var(--green-pale); }
.sf-delivery-opt.active {
  border-color: var(--green-mid); background: var(--green-pale);
  box-shadow: 0 4px 14px rgba(45,106,79,.12);
}
body.ardis-dark .sf-delivery-opt { background: #1c1c1c; border-color: #2c2c2c; }
body.ardis-dark .sf-delivery-opt.active { background: rgba(45,106,79,.15); }

.sf-delivery-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--green-pale); border: 1px solid rgba(45,106,79,.15);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .2s;
}
.sf-delivery-opt.active .sf-delivery-icon { background: var(--green-mid); }
.sf-delivery-icon svg { stroke: var(--green-mid); transition: stroke .2s; }
.sf-delivery-opt.active .sf-delivery-icon svg { stroke: #fff; }

.sf-delivery-text { flex: 1; text-align: right; }
.sf-delivery-text strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--text-dark); }
.sf-delivery-text small  { display: block; font-size: 11.5px; color: var(--text-light); margin-top: 2px; }
body.ardis-dark .sf-delivery-text strong { color: #e4e6ea; }

.sf-delivery-check {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .2s;
}
.sf-delivery-opt.active .sf-delivery-check {
  background: var(--green-mid); border-color: var(--green-mid);
}
.sf-delivery-check svg { stroke: #fff; display: none; }
.sf-delivery-opt.active .sf-delivery-check svg { display: block; }

/* ── Image switching animation ── */
#spMainImg { transition: opacity .2s ease; }
#spMainImg.img-switching { opacity: 0; }

/* ── Missing variation highlight ── */
.sf-var-missing .sf-color-swatches,
.sf-var-missing .sf-size-pills,
.sf-var-missing .sf-var-select {
  animation: sfShake .4s ease;
  outline: 2px solid var(--red);
  outline-offset: 4px;
  border-radius: 8px;
}
@keyframes sfShake {
  0%,100%{ transform:translateX(0); }
  25%     { transform:translateX(-6px); }
  75%     { transform:translateX(6px); }
}

/* ══ FINAL FIX: Delivery + Qty clickable ══ */
.sf-delivery-opt {
  cursor: pointer !important;
  pointer-events: all !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.sf-delivery-opt span,
.sf-delivery-opt svg {
  pointer-events: none !important;
}
.sf-delivery-opt input[type=radio] {
  pointer-events: none !important;
  display: none !important;
}

.sfq-plus,
.sfq-minus,
#ardisQtyPlus,
#ardisQtyMinus {
  cursor: pointer !important;
  pointer-events: all !important;
  position: relative !important;
  z-index: 10 !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sf-qty {
  pointer-events: all !important;
  position: relative !important;
  z-index: 5 !important;
}

/* ════════════════════════════════════════════════
   PRODUCT VARIATIONS UI — Above Form v9.9.1
════════════════════════════════════════════════ */

.sp-variations-ui {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body.ardis-dark .sp-variations-ui {
  background: #1c1e21;
  border-color: #2e3035;
}

.sp-var-row { display: flex; flex-direction: column; gap: 10px; }

.sp-var-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-mid);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sp-var-chosen {
  color: var(--green-mid);
  font-size: 13px;
  font-weight: 800;
}

/* ── Color Swatches ── */
.sp-color-swatches { display: flex; flex-wrap: wrap; gap: 10px; }

.sp-color-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2.5px solid rgba(0,0,0,.08);
  cursor: pointer;
  position: relative;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  flex-shrink: 0;
  overflow: hidden;
  background: #ddd;
  padding: 0;
}
.sp-color-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.sp-color-btn.active {
  border-color: var(--green-mid) !important;
  box-shadow: 0 0 0 3px rgba(45,106,79,.22), 0 4px 14px rgba(0,0,0,.15);
  transform: scale(1.08);
}
/* Image-based swatch */
.sp-color-btn--img {
  border-radius: 10px !important;
  width: 44px;
  height: 44px;
}
.sp-color-txt {
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Check icon */
.sp-color-check-ico {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.3);
  border-radius: inherit;
}
.sp-color-check-ico svg { stroke: #fff; }
.sp-color-btn.active .sp-color-check-ico { display: flex; }

/* ── Size Pills ── */
.sp-size-pills,
.sp-generic-pills { display: flex; flex-wrap: wrap; gap: 8px; }

.sp-size-btn {
  min-width: 44px;
  height: 38px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text-dark);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-size-btn:hover {
  border-color: var(--green-mid);
  color: var(--green-mid);
  background: var(--green-pale);
}
.sp-size-btn.active {
  background: var(--green-mid);
  border-color: var(--green-mid);
  color: #fff;
  box-shadow: 0 3px 10px rgba(45,106,79,.3);
}
body.ardis-dark .sp-size-btn {
  background: #242526;
  border-color: #3e4042;
  color: #e4e6ea;
}
body.ardis-dark .sp-size-btn.active {
  background: var(--green-mid);
  color: #fff;
}

/* Validation error */
.sp-var-row.sp-error .sp-color-swatches,
.sp-var-row.sp-error .sp-size-pills {
  outline: 2px solid #e53935;
  outline-offset: 4px;
  border-radius: 8px;
  animation: spShake .4s ease;
}
@keyframes spShake {
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-5px); }
  75%{ transform:translateX(5px); }
}

/* ════════════════════════════════════════════════
   SHOP PAGE — Full Rebuild v9.9.3
════════════════════════════════════════════════ */

/* ── Hero Banner ── */
.shop-hero {
  background: linear-gradient(135deg, var(--green-dark) 0%, #0d2b1a 100%);
  padding: 44px 0 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.shop-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M20 20h20v20H20zM0 0h20v20H0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.shop-hero-content { position: relative; z-index: 1; }
.shop-hero-tag {
  display: inline-block;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
  font-size: 12px; font-weight: 700;
  padding: 5px 14px; border-radius: 20px;
  margin-bottom: 14px;
  letter-spacing: .5px;
}
.shop-hero h1 {
  font-size: 36px; font-weight: 900;
  color: #fff; margin: 0 0 8px;
  line-height: 1.1;
}
.shop-hero p {
  font-size: 15px;
  color: rgba(255,255,255,.65);
  margin: 0;
}

/* ── Layout ── */
.shop-wrap { padding: 32px 0 64px; }
.shop-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
}
@media(max-width:900px) {
  .shop-layout { grid-template-columns: 1fr; }
  .shop-sidebar { display: none; }
}

/* ── Sidebar ── */
.shop-sidebar { display: flex; flex-direction: column; gap: 16px; }
.shop-widget {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  transition: box-shadow .2s;
}
.shop-widget:hover { box-shadow: 0 4px 20px rgba(0,0,0,.06); }
body.ardis-dark .shop-widget { background: #1c1e21; border-color: #2e3035; }

.shop-widget-title {
  font-size: 13.5px; font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.shop-widget-title svg { stroke: var(--green-mid); flex-shrink: 0; }
body.ardis-dark .shop-widget-title { color: #e4e6ea; border-color: #2e3035; }

/* Search widget */
.shop-search-form { margin: 0; }
.shop-search-wrap {
  display: flex; align-items: center;
  background: #f5f6f7; border-radius: 10px;
  border: 1.5px solid var(--border);
  overflow: hidden;
  transition: border-color .2s;
}
.shop-search-wrap:focus-within { border-color: var(--green-mid); background: #fff; }
.shop-search-wrap input {
  flex: 1; border: none; outline: none;
  background: transparent; padding: 10px 14px;
  font-family: var(--font); font-size: 13px;
  color: var(--text-dark); direction: rtl;
}
.shop-search-wrap input::placeholder { color: #bbb; }
.shop-search-wrap button {
  width: 40px; height: 40px; border: none;
  background: var(--green-mid); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s; flex-shrink: 0;
}
.shop-search-wrap button svg { stroke: #fff; }
.shop-search-wrap button:hover { background: var(--green-dark); }
body.ardis-dark .shop-search-wrap { background: #242526; border-color: #3e4042; }
body.ardis-dark .shop-search-wrap input { color: #e4e6ea; }

/* Price range */
.price-range-ui { padding: 4px 0 14px; }
.price-slider-track {
  position: relative; height: 5px;
  background: #e5e7eb; border-radius: 5px;
  margin: 20px 2px 24px;
}
.price-slider-fill {
  position: absolute; height: 100%;
  background: linear-gradient(90deg, var(--green-light), var(--green-mid));
  border-radius: 5px; pointer-events: none;
}
.price-range-input {
  position: absolute; width: 100%; left: 0;
  top: 50%; transform: translateY(-50%);
  -webkit-appearance: none; appearance: none;
  height: 5px; background: transparent;
  outline: none; pointer-events: none; margin: 0;
}
.price-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  background: #fff; border: 2.5px solid var(--green-mid);
  border-radius: 50%; cursor: pointer;
  pointer-events: all;
  box-shadow: 0 2px 8px rgba(45,106,79,.25);
  transition: transform .15s;
}
.price-range-input::-webkit-slider-thumb:hover { transform: scale(1.25); }
.price-range-input::-moz-range-thumb {
  width: 20px; height: 20px;
  background: #fff; border: 2.5px solid var(--green-mid);
  border-radius: 50%; cursor: pointer; pointer-events: all;
}
.price-display-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.price-tag {
  font-size: 12px; font-weight: 700;
  color: var(--green-dark);
  background: var(--green-pale);
  padding: 5px 12px; border-radius: 20px;
}
.price-sep { color: var(--text-light); font-size: 13px; }
body.ardis-dark .price-tag { background: rgba(45,106,79,.15); color: #4ade80; }
.price-apply-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 11px; margin-top: 14px;
  background: linear-gradient(135deg, var(--green-light), var(--green-dark));
  color: #fff; border: none; border-radius: 12px;
  font-family: var(--font); font-size: 13px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(27,67,50,.25);
  transition: opacity .2s, transform .15s;
}
.price-apply-btn:hover { opacity: .9; transform: translateY(-1px); }
.price-apply-btn svg { stroke: #fff; }
.price-clear-btn {
  display: block; text-align: center; margin-top: 8px;
  font-size: 12px; color: #e53935; text-decoration: none;
  font-weight: 600; transition: opacity .2s;
}
.price-clear-btn:hover { opacity: .7; }

/* Categories */
.shop-cats { display: flex; flex-direction: column; gap: 4px; }
.shop-cat-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-radius: 10px;
  text-decoration: none; color: var(--text-mid);
  font-size: 13.5px; font-weight: 600;
  transition: all .18s;
}
.shop-cat-item:hover, .shop-cat-item.active {
  background: var(--green-pale); color: var(--green-dark);
}
body.ardis-dark .shop-cat-item { color: #b0b3b8; }
body.ardis-dark .shop-cat-item:hover,
body.ardis-dark .shop-cat-item.active { background: rgba(45,106,79,.15); color: #4ade80; }
.shop-cat-count {
  font-size: 11px; font-weight: 700;
  background: #f0f0f0; color: var(--text-light);
  padding: 2px 8px; border-radius: 20px;
}
.shop-cat-item.active .shop-cat-count { background: var(--green-mid); color: #fff; }

/* ── Toolbar ── */
.shop-toolbar {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  margin-bottom: 20px;
  gap: 12px;
}
body.ardis-dark .shop-toolbar { background: #1c1e21; border-color: #2e3035; }
.shop-results-count { font-size: 13px; color: var(--text-light); }
.shop-results-count strong { color: var(--text-dark); font-weight: 800; }
body.ardis-dark .shop-results-count strong { color: #e4e6ea; }
.shop-sort-wrap {
  display: flex; align-items: center; gap: 8px;
  background: #f5f6f7; border-radius: 9px;
  padding: 7px 12px;
  border: 1.5px solid var(--border);
  transition: border-color .2s;
}
.shop-sort-wrap:focus-within { border-color: var(--green-mid); }
.shop-sort-wrap svg { stroke: var(--green-mid); flex-shrink: 0; }
.shop-sort-select {
  border: none; outline: none; background: transparent;
  font-family: var(--font); font-size: 13px;
  color: var(--text-dark); cursor: pointer; direction: rtl;
}
body.ardis-dark .shop-sort-wrap { background: #242526; border-color: #3e4042; }
body.ardis-dark .shop-sort-select { color: #e4e6ea; }

/* ── Products Grid ── */
#shopProductsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media(max-width:1100px) { #shopProductsGrid { grid-template-columns: repeat(3,1fr); } }
@media(max-width:768px)  { #shopProductsGrid { grid-template-columns: repeat(2,1fr); gap:12px; } }
@media(max-width:420px)  { #shopProductsGrid { grid-template-columns: 1fr; } }

/* ── Empty State ── */
.shop-empty-state {
  text-align: center; padding: 80px 20px;
  background: #fff; border-radius: 20px;
  border: 1.5px solid var(--border);
}
body.ardis-dark .shop-empty-state { background: #1c1e21; border-color: #2e3035; }
.shop-empty-icon {
  width: 100px; height: 100px;
  background: var(--green-pale);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
}
.shop-empty-icon svg { stroke: var(--green-mid); }
.shop-empty-state h3 { font-size: 20px; font-weight: 800; color: var(--text-dark); margin-bottom: 8px; }
.shop-empty-state p  { font-size: 14px; color: var(--text-light); margin-bottom: 24px; }
.shop-empty-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; background: var(--green-mid);
  color: #fff; border-radius: 12px; text-decoration: none;
  font-weight: 700; font-size: 14px;
  transition: background .2s, transform .15s;
}
.shop-empty-btn:hover { background: var(--green-dark); transform: translateY(-2px); }

/* ════════════════════════════════════════════════
   PRODUCT VARIATIONS — Reference Design v9.9.5
════════════════════════════════════════════════ */

/* Label */

body.ardis-dark 


/* ── Color swatches ── */

/* ── Size pills ── */

body.ardis-dark 
body.ardis-dark 

/* Validation error */

/* ════════════════════════════════════════════════
   PRODUCT VARIATIONS — Final Style v9.9.7
   Under badges, fits website theme
════════════════════════════════════════════════ */

/* Override all previous pv-section rules */

body.ardis-dark 

/* Label row */

/* ── Colors ── */

/* ── Sizes ── */

body.ardis-dark 
body.ardis-dark 

/* Validation */


/* ── FIX: pv-section order in flex container ── */
.sp-info { display: flex; flex-direction: column; }
.sp-price      { order: 1 !important; }
.sp-title      { order: 2 !important; }
.sp-short-desc { order: 3 !important; }
.sp-badges     { order: 4 !important; }

.sp-order-card { order: 6 !important; }

/* ════ NUCLEAR FIX: Remove ALL order from sp-info children ════ */
.sp-info { display: block !important; }
.sp-info .sp-price,
.sp-info .sp-title,
.sp-info .sp-short-desc,
.sp-info .sp-badges,
.sp-info .pv-section,
.sp-info .sp-order-card {
  order: unset !important;
  float: none !important;
  position: static !important;
}
/* Spacing */
.sp-info .sp-price      { margin-bottom: 8px; }
.sp-info .sp-title      { margin-bottom: 8px; }
.sp-info .sp-short-desc { margin-bottom: 14px; }
.sp-info .sp-badges     { margin-bottom: 16px; }
.sp-info 


/* Container */

body.ardis-dark 

/* Group row */


/* Label */

/* ── Color Swatches ── */

/* Checkmark on active */


/* ── Size Pills ── */

/* Ripple background on hover */

body.ardis-dark 
body.ardis-dark 

/* Divider between groups */

body.ardis-dark 


/* Validation shake */



/* Reset all previous pv rules */


/* Each group row */


/* Label: "لون" + chosen value pill */

/* ── COLOR SWATCHES ── */

/* Check icon on active swatch */


/* ── SIZE PILLS ── */

body.ardis-dark 
body.ardis-dark 
body.ardis-dark 

/* ════════════════════════════════════════════════
   PRODUCT VARIATIONS — Final v10.6
   Simple, safe, no position/overflow tricks
   Inspired by Zara/Shopify PDP pattern
════════════════════════════════════════════════ */

.pv-section {
  margin-top: 18px;
  margin-bottom: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
body.ardis-dark .pv-section { border-top-color: #2e3035; }

.pv-group { display: flex; flex-direction: column; gap: 12px; }

.pv-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}
body.ardis-dark .pv-label { color: #e4e6ea; }

.pv-chosen {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--green-dark);
}
body.ardis-dark .pv-chosen { color: #6ee7a0; }

/* ── Colors ── */
.pv-colors {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.pv-color-item {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid transparent;
  transition: border-color .2s ease;
}
.pv-color-item.active { border-color: var(--green-mid); }

.pv-color-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
  box-sizing: border-box;
}

/* ── Sizes ── */
.pv-sizes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pv-size-item {
  min-width: 46px;
  height: 40px;
  padding: 0 14px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
body.ardis-dark .pv-size-item {
  background: #232527;
  border-color: #34373b;
  color: #e4e6ea;
}

.pv-size-item:hover {
  border-color: var(--green-mid);
  color: var(--green-dark);
}
body.ardis-dark .pv-size-item:hover { color: #6ee7a0; }

.pv-size-item.active {
  background: var(--green-mid);
  border-color: var(--green-mid);
  color: #fff;
}

/* Validation: simple red border, no shake/keyframes that move siblings */
.pv-group.pv-error .pv-colors,
.pv-group.pv-error .pv-sizes {
  outline: 1.5px solid #e53935;
  outline-offset: 6px;
  border-radius: 8px;
}



/* ════════════════════════════════════════════════
   PRODUCT VARIATIONS — In-flow Dividers v10.10
   No position:absolute spanning — safe, contained
════════════════════════════════════════════════ */

.pv-section {
  margin: 0 !important;
  padding: 0 !important;
  border-top: none !important;
}

.pv-group { display: flex; flex-direction: column; gap: 12px; }
.pv-group + .pv-group { margin-top: 18px; }

/* Divider v11.1 — classic full-width fading line, no dot, understated luxury */
.pv-divider {
  width: 100%;
  height: 1px;
  margin: 18px 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--border) 12%,
    var(--border) 88%,
    transparent 100%);
}
body.ardis-dark .pv-divider {
  background: linear-gradient(90deg,
    transparent 0%,
    #2a2c2f 12%,
    #2a2c2f 88%,
    transparent 100%);
}

/* Gap before the order form */
.pv-divider + .sp-order-card {
  margin-top: 4px !important;
}


/* ════════════════════════════════════════════════
   TOUCH HOVER FIX — Safe & Surgical v10.13
   Only resets confirmed sticky elements,
   using explicit values (never inherit/revert),
   never touches accordions or click-toggled UI.
════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {

  /* feat-ico: light bg by default, turns green on hover — must reset explicitly */
  .feat-item:hover .feat-ico {
    background: var(--green-pale) !important;
  }
  .feat-item:hover .feat-ico svg {
    stroke: var(--green-mid) !important;
  }
  .feat-item:active .feat-ico {
    background: var(--green-mid) !important;
  }
  .feat-item:active .feat-ico svg {
    stroke: #fff !important;
  }

  /* why-icon-wrap: only undo the lift/rotate, background was always green anyway */
  .why-card:hover .why-icon-wrap {
    transform: none !important;
    box-shadow:
      0 8px 24px rgba(27,67,50,.25),
      inset 0 1px 0 rgba(255,255,255,.15) !important;
  }
  .why-card:active .why-icon-wrap {
    transform: scale(1.05) !important;
  }

  /* ccard / about-policy-card icon wraps: same lift/rotate pattern */
  .ccard:hover .ccard-icon-wrap {
    transform: none !important;
  }
  .about-policy-card:hover .apc-icon {
    transform: none !important;
  }

  /* Variation swatches/pills: border-only resets (explicit, not inherit) */
  .pv-color-item:hover { transform: none !important; }
  .pv-size-item:hover {
    border-color: var(--border) !important;
    color: var(--text-dark) !important;
    background: #f5f6f7 !important;
  }
  body.ardis-dark .pv-size-item:hover {
    border-color: #34373b !important;
    color: #e4e6ea !important;
    background: #232527 !important;
  }
  .pv-size-item.active:hover {
    border-color: var(--green-mid) !important;
    color: #fff !important;
    background: var(--green-mid) !important;
  }
  .pv-color-item:active { transform: scale(.92) !important; }
  .pv-size-item:active  { transform: scale(.96) !important; }

  /* Delivery option cards */
  .sf-delivery-opt:hover {
    border-color: var(--border) !important;
    background: #fff !important;
  }
  body.ardis-dark .sf-delivery-opt:hover {
    border-color: #2e3035 !important;
    background: #1c1e21 !important;
  }
  .sf-delivery-opt.active:hover {
    border-color: var(--green-mid) !important;
    background: var(--green-pale) !important;
  }

  /* Product card lift effect */
  .pcard:hover, .plcard:hover, .spr-card:hover, .sp-rel-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .pcard:active { transform: scale(.98) !important; }

  /* Card image zoom-on-hover */
  .pcard:hover .pcard-img img,
  .plcard:hover .plcard-img-wrap img,
  .spr-card:hover .spr-img-wrap img,
  .sp-rel-card:hover .sp-rel-img-wrap img,
  .sp-main-img:hover img,
  .sp-thumb:hover img {
    transform: none !important;
  }
  .pcard:hover .pcard-img-overlay,
  .spr-card:hover .spr-img-overlay,
  .spr-card:hover .spr-quick-view {
    opacity: 0 !important;
  }
}

/* ════════════════════════════════════════════════
   TOUCH HOVER FIX — Part 2: Drawer + Social v10.14
   Carefully separates :hover from .active so the
   "currently selected" state never gets wiped.
════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {

  /* ── Mobile drawer nav icons (الرئيسية / المنتجات / من نحن / اتصل بنا) ── */
  .mdr-nav-item:hover .mdr-nav-icon {
    background: #f3f4f6 !important;
  }
  body.ardis-dark .mdr-nav-item:hover .mdr-nav-icon {
    background: rgba(255,255,255,.07) !important;
  }
  .mdr-nav-item:hover .mdr-nav-icon svg {
    stroke: var(--text-mid) !important;
  }
  body.ardis-dark .mdr-nav-item:hover .mdr-nav-icon svg {
    stroke: #b0b3b8 !important;
  }
  /* Re-affirm .active explicitly so it's never affected by the rule above */
  .mdr-nav-item.active .mdr-nav-icon {
    background: var(--green-mid) !important;
  }
  .mdr-nav-item.active .mdr-nav-icon svg {
    stroke: #fff !important;
  }

  /* ── Language switch buttons in drawer (en / fr / ar) ── */
  .mdr-lang-btn:hover {
    background: transparent !important;
    border-color: var(--border) !important;
    color: var(--text-mid) !important;
  }
  .mdr-lang-btn.active {
    background: var(--green-mid) !important;
    border-color: var(--green-mid) !important;
    color: #fff !important;
  }

  /* ── Mobile action buttons (dark mode toggle row, etc.) ── */
  .mob-action-btn:hover {
    background: #fff !important;
  }
  body.ardis-dark .mob-action-btn:hover {
    background: #242526 !important;
  }
  .mob-action-btn.active {
    background: var(--green-pale) !important;
  }

  /* ── Social pills (Facebook / Instagram / TikTok footer icons) ── */
  .social-pill:hover {
    transform: none !important;
  }
  .social-fb:hover {
    box-shadow: 0 4px 16px rgba(24,119,242,.25) !important;
  }
  .social-ig:hover {
    box-shadow: 0 4px 16px rgba(220,39,67,.25) !important;
  }
  .social-tk:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.25) !important;
  }
  .social-pill:active {
    transform: scale(.92) !important;
  }
}

/* ════════════════════════════════════════════════
   TOUCH HOVER FIX — Part 3: Complete Sweep v10.15
   Every remaining confirmed-unprotected element,
   each reset to its EXACT documented default value.
════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {

  /* ── Qty stepper buttons (single-product mini cart) ── */
  .qty-ctrl .qminus:hover { background: #f0f0f0 !important; }
  .qty-ctrl .qplus:hover  { background: var(--green-mid) !important; }
  .sfq-minus:hover { background: #f2f2f2 !important; }
  .sfq-plus:hover  { background: var(--green-mid) !important; }

  /* ── Tabs (description/reviews etc.) ── */
  .tab-btn:hover { color: inherit; background: transparent !important; }
  .tab-btn.active:hover { color: var(--green-mid) !important; background: var(--green-pale) !important; }

  /* ── Order summary card shadow lift ── */
  .order-card:hover { box-shadow: none !important; }

  /* ── Product gallery prev/next arrows ── */
  .sp-arrow:hover { background: rgba(255,255,255,.9) !important; transform: translateY(-50%) !important; }

  /* ── Related products: name color + buy button ── */
  .sp-rel-name:hover { color: var(--text-dark) !important; }
  .sp-rel-btn:hover {
    background: var(--green-mid) !important;
    transform: none !important;
    color: #fff !important;
  }
  .sp-car-btn:hover {
    background: #fff !important;
    border-color: var(--border) !important;
    transform: none !important;
  }
  .sp-car-btn:hover svg { stroke: var(--text-mid) !important; }

  /* ── Promo shipping badge ── */
  .sp-badge-ship:hover { transform: none !important; box-shadow: none !important; }

  /* ── Free-shipping payment badge (footer/hero) ── */
  .fpay-badge:hover { background: inherit; color: inherit; }

  /* ── Description card ── */
  .desc-card:hover { background: #fff !important; }

  /* ── Contact card arrow ── */
  .ccard:hover .ccard-arrow { background: var(--text-light) !important; transform: none !important; }

  /* ── Contact form submit button ── */
  .cf-submit:hover { opacity: 1 !important; transform: none !important; box-shadow: none !important; }

  /* ── Order confirmation modal ── */
  .ocm-info-item:hover { background: transparent !important; }
  .ocm-close-btn:hover { opacity: 1 !important; transform: none !important; }

  /* ── About page policy/contact widgets (acs-*) ── */
  .acs-btn:hover { transform: none !important; }
  .acs-call:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1) !important; color: inherit !important; }
  .acs-wa:hover { box-shadow: 0 4px 14px rgba(37,211,102,.3) !important; color: #fff !important; }
  .acs-contact:hover { background: rgba(255,255,255,.18) !important; color: #fff !important; }

  /* ── Header search-close button ── */
  #ardisSearchClose:hover { background: none !important; }

  /* ── Featured/related products carousel (spr-*) ── */
  .spr-view-all:hover svg { transform: none !important; }
  .spr-name:hover { color: inherit !important; }

  /* ── Header language dropdown options ── */
  .ardis-lang-option:hover { background: transparent !important; }
  body.ardis-dark .ardis-lang-option:hover { background: transparent !important; }
}

/* ════════════════════════════════════════════════
   SHOP PAGE — Premium Rebuild v11.0
   Classic, refined, fully isolated (asp- prefix)
════════════════════════════════════════════════ */

/* ── Hero ── */
.asp-hero {
  padding: 36px 0 30px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #fafbfa 0%, #fff 100%);
}
body.ardis-dark .asp-hero { background: linear-gradient(180deg, #1a1c1e 0%, #18191a 100%); border-color: #2a2c2f; }

.asp-crumb { font-size: 12.5px; color: var(--text-light); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.asp-crumb a { color: var(--text-light); transition: color .2s; }
.asp-crumb a:hover { color: var(--green-mid); }
.asp-crumb-sep { opacity: .5; }
.asp-crumb-cur { color: var(--green-dark); font-weight: 700; }
body.ardis-dark .asp-crumb, body.ardis-dark .asp-crumb a { color: #8a8d91; }
body.ardis-dark .asp-crumb-cur { color: #6ee7a0; }

.asp-hero-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -.3px;
  margin-bottom: 6px;
}
body.ardis-dark .asp-hero-title { color: #f0f1f3; }

.asp-hero-meta { font-size: 14px; color: var(--text-light); }
.asp-hero-count { color: var(--green-mid); font-weight: 800; font-size: 16px; }

/* ── Body layout ── */
.asp-body { padding: 36px 0 70px; }
.asp-grid { display: grid; grid-template-columns: 272px 1fr; gap: 32px; align-items: start; }
@media(max-width:980px){ .asp-grid { grid-template-columns: 1fr; } }

.asp-aside { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 24px; }

/* ── Panel base ── */
.asp-panel { padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.asp-aside .asp-panel:last-child { border-bottom: none; padding-bottom: 0; }
body.ardis-dark .asp-panel { border-color: #2a2c2f; }

.asp-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 16px;
  letter-spacing: .2px;
}
body.ardis-dark .asp-panel-title { color: #e4e6ea; }

/* ── Search (elegant inline field, no boxed button) ── */
.asp-search { position: relative; display: flex; align-items: center; }
.asp-search-ico {
  position: absolute; right: 14px;
  width: 16px; height: 16px;
  stroke: var(--text-light);
  pointer-events: none;
}
.asp-search-input {
  width: 100%;
  height: 46px;
  padding: 0 42px 0 38px;
  border: 1.5px solid var(--border);
  border-radius: 11px;
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--text-dark);
  background: #fff;
  transition: border-color .22s, box-shadow .22s;
}
.asp-search-input::placeholder { color: #b0b3b8; }
.asp-search-input:focus {
  outline: none;
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(45,106,79,.08);
}
.asp-search-clear {
  position: absolute; left: 12px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-light);
  transition: color .2s;
}
.asp-search-clear svg { width: 13px; height: 13px; }
.asp-search-clear:hover { color: var(--red); }
body.ardis-dark .asp-search-input { background: #1f2123; border-color: #2e3134; color: #e4e6ea; }
body.ardis-dark .asp-search-input:focus { border-color: var(--green-mid); box-shadow: 0 0 0 3px rgba(74,222,128,.1); }

/* ── Buttons ── */
.asp-btn-primary {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 44px;
  background: var(--green-mid);
  color: #fff;
  font-family: var(--font);
  font-size: 13.5px; font-weight: 700;
  border: none; border-radius: 11px;
  cursor: pointer;
  transition: background .22s, transform .18s, box-shadow .22s;
}
.asp-btn-primary:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(45,106,79,.25);
}
.asp-btn-primary:active { transform: translateY(0); }

/* ── Pill toggle (Newest/Oldest) ── */


/* ── Toolbar ── */
.shop-toolbar {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  margin-bottom: 20px;
  gap: 12px;
}
body.ardis-dark .shop-toolbar { background: #1c1e21; border-color: #2e3035; }
.shop-results-count { font-size: 13px; color: var(--text-light); }
.shop-results-count strong { color: var(--text-dark); font-weight: 800; }
body.ardis-dark .shop-results-count strong { color: #e4e6ea; }
.shop-sort-wrap {
  display: flex; align-items: center; gap: 8px;
  background: #f5f6f7; border-radius: 9px;
  padding: 7px 12px;
  border: 1.5px solid var(--border);
  transition: border-color .2s;
}
.shop-sort-wrap:focus-within { border-color: var(--green-mid); }
.shop-sort-wrap svg { stroke: var(--green-mid); flex-shrink: 0; }
.shop-sort-select {
  border: none; outline: none; background: transparent;
  font-family: var(--font); font-size: 13px;
  color: var(--text-dark); cursor: pointer; direction: rtl;
}
body.ardis-dark .shop-sort-wrap { background: #242526; border-color: #3e4042; }
body.ardis-dark .shop-sort-select { color: #e4e6ea; }

/* ── Products Grid ── */
#shopProductsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media(max-width:1100px) { #shopProductsGrid { grid-template-columns: repeat(3,1fr); } }
@media(max-width:768px)  { #shopProductsGrid { grid-template-columns: repeat(2,1fr); gap:12px; } }
@media(max-width:420px)  { #shopProductsGrid { grid-template-columns: 1fr; } }

/* ── Empty State ── */
.shop-empty-state {
  text-align: center; padding: 80px 20px;
  background: #fff; border-radius: 20px;
  border: 1.5px solid var(--border);
}
body.ardis-dark .shop-empty-state { background: #1c1e21; border-color: #2e3035; }
.shop-empty-icon {
  width: 100px; height: 100px;
  background: var(--green-pale);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
}
.shop-empty-icon svg { stroke: var(--green-mid); }
.shop-empty-state h3 { font-size: 20px; font-weight: 800; color: var(--text-dark); margin-bottom: 8px; }
.shop-empty-state p  { font-size: 14px; color: var(--text-light); margin-bottom: 24px; }
.shop-empty-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; background: var(--green-mid);
  color: #fff; border-radius: 12px; text-decoration: none;
  font-weight: 700; font-size: 14px;
  transition: background .2s, transform .15s;
}
.shop-empty-btn:hover { background: var(--green-dark); transform: translateY(-2px); }

/* ════════════════════════════════════════════════
   PRODUCT VARIATIONS — Reference Design v9.9.5
════════════════════════════════════════════════ */

/* Label */

body.ardis-dark 


/* ── Color swatches ── */

/* ── Size pills ── */

body.ardis-dark 
body.ardis-dark 

/* Validation error */

/* ════════════════════════════════════════════════
   PRODUCT VARIATIONS — Final Style v9.9.7
   Under badges, fits website theme
════════════════════════════════════════════════ */

/* Override all previous pv-section rules */

body.ardis-dark 

/* Label row */

/* ── Colors ── */

/* ── Sizes ── */

body.ardis-dark 
body.ardis-dark 

/* Validation */


/* ── FIX: pv-section order in flex container ── */
.sp-info { display: flex; flex-direction: column; }
.sp-price      { order: 1 !important; }
.sp-title      { order: 2 !important; }
.sp-short-desc { order: 3 !important; }
.sp-badges     { order: 4 !important; }

.sp-order-card { order: 6 !important; }

/* ════ NUCLEAR FIX: Remove ALL order from sp-info children ════ */
.sp-info { display: block !important; }
.sp-info .sp-price,
.sp-info .sp-title,
.sp-info .sp-short-desc,
.sp-info .sp-badges,
.sp-info .pv-section,
.sp-info .sp-order-card {
  order: unset !important;
  float: none !important;
  position: static !important;
}
/* Spacing */
.sp-info .sp-price      { margin-bottom: 8px; }
.sp-info .sp-title      { margin-bottom: 8px; }
.sp-info .sp-short-desc { margin-bottom: 14px; }
.sp-info .sp-badges     { margin-bottom: 16px; }
.sp-info 


/* Container */

body.ardis-dark 

/* Group row */


/* Label */

/* ── Color Swatches ── */

/* Checkmark on active */


/* ── Size Pills ── */

/* Ripple background on hover */

body.ardis-dark 
body.ardis-dark 

/* Divider between groups */

body.ardis-dark 


/* Validation shake */



/* Reset all previous pv rules */


/* Each group row */


/* Label: "لون" + chosen value pill */

/* ── COLOR SWATCHES ── */

/* Check icon on active swatch */


/* ── SIZE PILLS ── */

body.ardis-dark 
body.ardis-dark 
body.ardis-dark 

/* ════════════════════════════════════════════════
   PRODUCT VARIATIONS — Final v10.6
   Simple, safe, no position/overflow tricks
   Inspired by Zara/Shopify PDP pattern
════════════════════════════════════════════════ */

.pv-section {
  margin-top: 18px;
  margin-bottom: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
body.ardis-dark .pv-section { border-top-color: #2e3035; }

.pv-group { display: flex; flex-direction: column; gap: 12px; }

.pv-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}
body.ardis-dark .pv-label { color: #e4e6ea; }

.pv-chosen {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--green-dark);
}
body.ardis-dark .pv-chosen { color: #6ee7a0; }

/* ── Colors ── */
.pv-colors {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.pv-color-item {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid transparent;
  transition: border-color .2s ease;
}
.pv-color-item.active { border-color: var(--green-mid); }

.pv-color-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
  box-sizing: border-box;
}

/* ── Sizes ── */
.pv-sizes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pv-size-item {
  min-width: 46px;
  height: 40px;
  padding: 0 14px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
body.ardis-dark .pv-size-item {
  background: #232527;
  border-color: #34373b;
  color: #e4e6ea;
}

.pv-size-item:hover {
  border-color: var(--green-mid);
  color: var(--green-dark);
}
body.ardis-dark .pv-size-item:hover { color: #6ee7a0; }

.pv-size-item.active {
  background: var(--green-mid);
  border-color: var(--green-mid);
  color: #fff;
}

/* Validation: simple red border, no shake/keyframes that move siblings */
.pv-group.pv-error .pv-colors,
.pv-group.pv-error .pv-sizes {
  outline: 1.5px solid #e53935;
  outline-offset: 6px;
  border-radius: 8px;
}



/* ════════════════════════════════════════════════
   PRODUCT VARIATIONS — In-flow Dividers v10.10
   No position:absolute spanning — safe, contained
════════════════════════════════════════════════ */

.pv-section {
  margin: 0 !important;
  padding: 0 !important;
  border-top: none !important;
}

.pv-group { display: flex; flex-direction: column; gap: 12px; }
.pv-group + .pv-group { margin-top: 18px; }

/* Divider v11.1 — classic full-width fading line, no dot, understated luxury */
.pv-divider {
  width: 100%;
  height: 1px;
  margin: 18px 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--border) 12%,
    var(--border) 88%,
    transparent 100%);
}
body.ardis-dark .pv-divider {
  background: linear-gradient(90deg,
    transparent 0%,
    #2a2c2f 12%,
    #2a2c2f 88%,
    transparent 100%);
}

/* Gap before the order form */
.pv-divider + .sp-order-card {
  margin-top: 4px !important;
}


/* ════════════════════════════════════════════════
   TOUCH HOVER FIX — Safe & Surgical v10.13
   Only resets confirmed sticky elements,
   using explicit values (never inherit/revert),
   never touches accordions or click-toggled UI.
════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {

  /* feat-ico: light bg by default, turns green on hover — must reset explicitly */
  .feat-item:hover .feat-ico {
    background: var(--green-pale) !important;
  }
  .feat-item:hover .feat-ico svg {
    stroke: var(--green-mid) !important;
  }
  .feat-item:active .feat-ico {
    background: var(--green-mid) !important;
  }
  .feat-item:active .feat-ico svg {
    stroke: #fff !important;
  }

  /* why-icon-wrap: only undo the lift/rotate, background was always green anyway */
  .why-card:hover .why-icon-wrap {
    transform: none !important;
    box-shadow:
      0 8px 24px rgba(27,67,50,.25),
      inset 0 1px 0 rgba(255,255,255,.15) !important;
  }
  .why-card:active .why-icon-wrap {
    transform: scale(1.05) !important;
  }

  /* ccard / about-policy-card icon wraps: same lift/rotate pattern */
  .ccard:hover .ccard-icon-wrap {
    transform: none !important;
  }
  .about-policy-card:hover .apc-icon {
    transform: none !important;
  }

  /* Variation swatches/pills: border-only resets (explicit, not inherit) */
  .pv-color-item:hover { transform: none !important; }
  .pv-size-item:hover {
    border-color: var(--border) !important;
    color: var(--text-dark) !important;
    background: #f5f6f7 !important;
  }
  body.ardis-dark .pv-size-item:hover {
    border-color: #34373b !important;
    color: #e4e6ea !important;
    background: #232527 !important;
  }
  .pv-size-item.active:hover {
    border-color: var(--green-mid) !important;
    color: #fff !important;
    background: var(--green-mid) !important;
  }
  .pv-color-item:active { transform: scale(.92) !important; }
  .pv-size-item:active  { transform: scale(.96) !important; }

  /* Delivery option cards */
  .sf-delivery-opt:hover {
    border-color: var(--border) !important;
    background: #fff !important;
  }
  body.ardis-dark .sf-delivery-opt:hover {
    border-color: #2e3035 !important;
    background: #1c1e21 !important;
  }
  .sf-delivery-opt.active:hover {
    border-color: var(--green-mid) !important;
    background: var(--green-pale) !important;
  }

  /* Product card lift effect */
  .pcard:hover, .plcard:hover, .spr-card:hover, .sp-rel-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .pcard:active { transform: scale(.98) !important; }

  /* Card image zoom-on-hover */
  .pcard:hover .pcard-img img,
  .plcard:hover .plcard-img-wrap img,
  .spr-card:hover .spr-img-wrap img,
  .sp-rel-card:hover .sp-rel-img-wrap img,
  .sp-main-img:hover img,
  .sp-thumb:hover img {
    transform: none !important;
  }
  .pcard:hover .pcard-img-overlay,
  .spr-card:hover .spr-img-overlay,
  .spr-card:hover .spr-quick-view {
    opacity: 0 !important;
  }
}

/* ════════════════════════════════════════════════
   TOUCH HOVER FIX — Part 2: Drawer + Social v10.14
   Carefully separates :hover from .active so the
   "currently selected" state never gets wiped.
════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {

  /* ── Mobile drawer nav icons (الرئيسية / المنتجات / من نحن / اتصل بنا) ── */
  .mdr-nav-item:hover .mdr-nav-icon {
    background: #f3f4f6 !important;
  }
  body.ardis-dark .mdr-nav-item:hover .mdr-nav-icon {
    background: rgba(255,255,255,.07) !important;
  }
  .mdr-nav-item:hover .mdr-nav-icon svg {
    stroke: var(--text-mid) !important;
  }
  body.ardis-dark .mdr-nav-item:hover .mdr-nav-icon svg {
    stroke: #b0b3b8 !important;
  }
  /* Re-affirm .active explicitly so it's never affected by the rule above */
  .mdr-nav-item.active .mdr-nav-icon {
    background: var(--green-mid) !important;
  }
  .mdr-nav-item.active .mdr-nav-icon svg {
    stroke: #fff !important;
  }

  /* ── Language switch buttons in drawer (en / fr / ar) ── */
  .mdr-lang-btn:hover {
    background: transparent !important;
    border-color: var(--border) !important;
    color: var(--text-mid) !important;
  }
  .mdr-lang-btn.active {
    background: var(--green-mid) !important;
    border-color: var(--green-mid) !important;
    color: #fff !important;
  }

  /* ── Mobile action buttons (dark mode toggle row, etc.) ── */
  .mob-action-btn:hover {
    background: #fff !important;
  }
  body.ardis-dark .mob-action-btn:hover {
    background: #242526 !important;
  }
  .mob-action-btn.active {
    background: var(--green-pale) !important;
  }

  /* ── Social pills (Facebook / Instagram / TikTok footer icons) ── */
  .social-pill:hover {
    transform: none !important;
  }
  .social-fb:hover {
    box-shadow: 0 4px 16px rgba(24,119,242,.25) !important;
  }
  .social-ig:hover {
    box-shadow: 0 4px 16px rgba(220,39,67,.25) !important;
  }
  .social-tk:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.25) !important;
  }
  .social-pill:active {
    transform: scale(.92) !important;
  }
}

/* ════════════════════════════════════════════════
   TOUCH HOVER FIX — Part 3: Complete Sweep v10.15
   Every remaining confirmed-unprotected element,
   each reset to its EXACT documented default value.
════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {

  /* ── Qty stepper buttons (single-product mini cart) ── */
  .qty-ctrl .qminus:hover { background: #f0f0f0 !important; }
  .qty-ctrl .qplus:hover  { background: var(--green-mid) !important; }
  .sfq-minus:hover { background: #f2f2f2 !important; }
  .sfq-plus:hover  { background: var(--green-mid) !important; }

  /* ── Tabs (description/reviews etc.) ── */
  .tab-btn:hover { color: inherit; background: transparent !important; }
  .tab-btn.active:hover { color: var(--green-mid) !important; background: var(--green-pale) !important; }

  /* ── Order summary card shadow lift ── */
  .order-card:hover { box-shadow: none !important; }

  /* ── Product gallery prev/next arrows ── */
  .sp-arrow:hover { background: rgba(255,255,255,.9) !important; transform: translateY(-50%) !important; }

  /* ── Related products: name color + buy button ── */
  .sp-rel-name:hover { color: var(--text-dark) !important; }
  .sp-rel-btn:hover {
    background: var(--green-mid) !important;
    transform: none !important;
    color: #fff !important;
  }
  .sp-car-btn:hover {
    background: #fff !important;
    border-color: var(--border) !important;
    transform: none !important;
  }
  .sp-car-btn:hover svg { stroke: var(--text-mid) !important; }

  /* ── Promo shipping badge ── */
  .sp-badge-ship:hover { transform: none !important; box-shadow: none !important; }

  /* ── Free-shipping payment badge (footer/hero) ── */
  .fpay-badge:hover { background: inherit; color: inherit; }

  /* ── Description card ── */
  .desc-card:hover { background: #fff !important; }

  /* ── Contact card arrow ── */
  .ccard:hover .ccard-arrow { background: var(--text-light) !important; transform: none !important; }

  /* ── Contact form submit button ── */
  .cf-submit:hover { opacity: 1 !important; transform: none !important; box-shadow: none !important; }

  /* ── Order confirmation modal ── */
  .ocm-info-item:hover { background: transparent !important; }
  .ocm-close-btn:hover { opacity: 1 !important; transform: none !important; }

  /* ── About page policy/contact widgets (acs-*) ── */
  .acs-btn:hover { transform: none !important; }
  .acs-call:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1) !important; color: inherit !important; }
  .acs-wa:hover { box-shadow: 0 4px 14px rgba(37,211,102,.3) !important; color: #fff !important; }
  .acs-contact:hover { background: rgba(255,255,255,.18) !important; color: #fff !important; }

  /* ── Header search-close button ── */
  #ardisSearchClose:hover { background: none !important; }

  /* ── Featured/related products carousel (spr-*) ── */
  .spr-view-all:hover svg { transform: none !important; }
  .spr-name:hover { color: inherit !important; }

  /* ── Header language dropdown options ── */
  .ardis-lang-option:hover { background: transparent !important; }
  body.ardis-dark .ardis-lang-option:hover { background: transparent !important; }
}

/* ════════════════════════════════════════════════
   SHOP PAGE — Premium Rebuild v11.0
   Classic, refined, fully isolated (asp- prefix)
════════════════════════════════════════════════ */

/* ── Hero ── */
.asp-hero {
  padding: 36px 0 30px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #fafbfa 0%, #fff 100%);
}
body.ardis-dark .asp-hero { background: linear-gradient(180deg, #1a1c1e 0%, #18191a 100%); border-color: #2a2c2f; }

.asp-crumb { font-size: 12.5px; color: var(--text-light); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.asp-crumb a { color: var(--text-light); transition: color .2s; }
.asp-crumb a:hover { color: var(--green-mid); }
.asp-crumb-sep { opacity: .5; }
.asp-crumb-cur { color: var(--green-dark); font-weight: 700; }
body.ardis-dark .asp-crumb, body.ardis-dark .asp-crumb a { color: #8a8d91; }
body.ardis-dark .asp-crumb-cur { color: #6ee7a0; }

.asp-hero-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -.3px;
  margin-bottom: 6px;
}
body.ardis-dark .asp-hero-title { color: #f0f1f3; }

.asp-hero-meta { font-size: 14px; color: var(--text-light); }
.asp-hero-count { color: var(--green-mid); font-weight: 800; font-size: 16px; }

/* ── Body layout ── */
.asp-body { padding: 36px 0 70px; }
.asp-grid { display: grid; grid-template-columns: 272px 1fr; gap: 32px; align-items: start; }
@media(max-width:980px){ .asp-grid { grid-template-columns: 1fr; } }

.asp-aside { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 24px; }

/* ── Panel base ── */
.asp-panel { padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.asp-aside .asp-panel:last-child { border-bottom: none; padding-bottom: 0; }
body.ardis-dark .asp-panel { border-color: #2a2c2f; }

.asp-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 16px;
  letter-spacing: .2px;
}
body.ardis-dark .asp-panel-title { color: #e4e6ea; }

/* ── Search (elegant inline field, no boxed button) ── */
.asp-search { position: relative; display: flex; align-items: center; }
.asp-search-ico {
  position: absolute; right: 14px;
  width: 16px; height: 16px;
  stroke: var(--text-light);
  pointer-events: none;
}
.asp-search-input {
  width: 100%;
  height: 46px;
  padding: 0 42px 0 38px;
  border: 1.5px solid var(--border);
  border-radius: 11px;
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--text-dark);
  background: #fff;
  transition: border-color .22s, box-shadow .22s;
}
.asp-search-input::placeholder { color: #b0b3b8; }
.asp-search-input:focus {
  outline: none;
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(45,106,79,.08);
}
.asp-search-clear {
  position: absolute; left: 12px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-light);
  transition: color .2s;
}
.asp-search-clear svg { width: 13px; height: 13px; }
.asp-search-clear:hover { color: var(--red); }
body.ardis-dark .asp-search-input { background: #1f2123; border-color: #2e3134; color: #e4e6ea; }
body.ardis-dark .asp-search-input:focus { border-color: var(--green-mid); box-shadow: 0 0 0 3px rgba(74,222,128,.1); }

/* ── Buttons ── */
.asp-btn-primary {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 44px;
  background: var(--green-mid);
  color: #fff;
  font-family: var(--font);
  font-size: 13.5px; font-weight: 700;
  border: none; border-radius: 11px;
  cursor: pointer;
  transition: background .22s, transform .18s, box-shadow .22s;
}
.asp-btn-primary:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(45,106,79,.25);
}
.asp-btn-primary:active { transform: translateY(0); }

/* ── Pill toggle (Newest/Oldest) ── */



/* ── Toolbar ── */
.asp-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}
body.ardis-dark .asp-toolbar { border-color: #2a2c2f; }
.asp-toolbar-count { font-size: 13.5px; color: var(--text-light); }
.asp-toolbar-sort { display: none; }  /* sidebar handles sort on desktop */
.asp-toolbar-count strong { color: var(--text-dark); font-weight: 800; }
.asp-toolbar-query { color: var(--text-light); }
body.ardis-dark .asp-toolbar-count strong { color: #e4e6ea; }

.asp-select-wrap { position: relative; display: inline-flex; align-items: center; }
.asp-select-wrap--full { display: flex; width: 100%; }
.asp-select-wrap--full .asp-select { width: 100%; }
.asp-select {
  appearance: none; -webkit-appearance: none;
  height: 42px;
  padding: 0 38px 0 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-family: var(--font);
  font-size: 13px; font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  transition: border-color .2s;
}
.asp-select:hover, .asp-select:focus { outline: none; border-color: var(--green-mid); }
.asp-select-chev {
  position: absolute; left: 14px;
  width: 13px; height: 13px;
  stroke: var(--text-light);
  pointer-events: none;
}
body.ardis-dark .asp-select { background: #1f2123; border-color: #2e3134; color: #e4e6ea; }

/* ── Products grid + staggered fade-in motion ── */
.asp-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media(max-width:1100px){ .asp-products-grid { grid-template-columns: repeat(3,1fr); gap: 16px; } }
@media(max-width:768px){ .asp-products-grid { grid-template-columns: repeat(2,1fr); gap: 12px; } }
@media(max-width:420px){ .asp-products-grid { grid-template-columns: 1fr; } }

.asp-card-in {
  opacity: 0;
  transform: translateY(14px);
  animation: aspFadeUp .5s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: var(--stagger, 0s);
}
@keyframes aspFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Pagination — refined circular numbers ── */
.asp-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 48px;
  padding: 8px 0;
}
/* Staggered entrance animation */
.asp-pagination .page-numbers {
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px;
  padding: 0 6px;
  border-radius: 12px;
  font-size: 13.5px; font-weight: 700;
  color: var(--text-mid);
  border: 1.5px solid var(--border);
  background: #fff;
  position: relative;
  overflow: hidden;
  transition:
    background .22s cubic-bezier(.25,.46,.45,.94),
    color .22s,
    border-color .22s,
    transform .2s cubic-bezier(.34,1.56,.64,1),
    box-shadow .22s;
  animation: paginFadeIn .4s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes paginFadeIn {
  from { opacity: 0; transform: translateY(8px) scale(.92); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}
/* Ripple effect before hover state */
.asp-pagination .page-numbers::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--green-pale);
  opacity: 0;
  border-radius: inherit;
  transition: opacity .18s;
}
.asp-pagination .page-numbers:hover::before { opacity: 1; }
.asp-pagination .page-numbers:hover {
  color: var(--green-dark);
  border-color: rgba(45,106,79,.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(45,106,79,.15);
}
.asp-pagination .page-numbers.current {
  background: var(--green-mid);
  border-color: var(--green-mid);
  color: #fff;
  box-shadow: 0 4px 14px rgba(45,106,79,.3);
  transform: none;
}
.asp-pagination .page-numbers.current::before { display: none; }
/* Prev/Next arrows: slightly wider */
.asp-pagination .prev,
.asp-pagination .next {
  min-width: 44px;
  border-radius: 12px;
}
.asp-pagination .page-numbers svg {
  width: 14px; height: 14px;
  stroke: currentColor;
  position: relative; /* above ::before ripple */
  z-index: 1;
}
.asp-pagination .page-numbers span,
.asp-pagination .page-numbers:not(.prev):not(.next) {
  position: relative;
  z-index: 1;
}
/* Dots: no border, no hover */
.asp-pagination .dots {
  border: none;
  background: transparent;
  color: var(--text-light);
  min-width: 28px;
  cursor: default;
  transform: none !important;
  box-shadow: none !important;
  animation: none;
}
.asp-pagination .dots::before { display: none; }
body.ardis-dark .asp-pagination .page-numbers {
  background: #1f2123;
  border-color: #2e3134;
  color: #b0b3b8;
}
body.ardis-dark .asp-pagination .page-numbers:hover {
  background: rgba(45,106,79,.15);
  color: #6ee7a0;
  border-color: rgba(74,222,128,.25);
}
body.ardis-dark .asp-pagination .page-numbers.current {
  background: var(--green-mid);
  color: #fff;
  border-color: var(--green-mid);
}

/* ── Empty state ── */
.asp-empty { text-align: center; padding: 90px 20px; }
.asp-empty-svg { width: 56px; height: 56px; stroke: var(--border); margin: 0 auto 22px; }
.asp-empty-title { font-size: 19px; font-weight: 800; color: var(--text-dark); margin-bottom: 8px; }
.asp-empty-text { font-size: 14px; color: var(--text-light); margin-bottom: 26px; }
.asp-empty-cta { width: auto; padding: 0 32px; display: inline-flex; }
body.ardis-dark .asp-empty-title { color: #e4e6ea; }

/* ── Touch device hover resets for the new shop page ── */
@media (hover: none) and (pointer: coarse) {
  .asp-btn-primary:hover { background: var(--green-mid) !important; transform: none !important; box-shadow: none !important; }
  .asp-pagination .page-numbers:hover { background: transparent !important; color: var(--text-mid) !important; }
  body.ardis-dark .asp-pagination .page-numbers:hover { color: #b0b3b8 !important; }
  .asp-pagination .page-numbers.current:hover { background: var(--green-mid) !important; color: #fff !important; }
}

/* ════════════════════════════════════════════════
   SHOP PAGE — Mobile Responsive Fix v11.1
   Sidebar becomes a collapsible panel, never hidden
════════════════════════════════════════════════ */













/* ── Description list (الوصف checkmarks): kill sticky hover on touch ── */
@media (hover: none) and (pointer: coarse) {
  .desc-li-ardis:hover {
    background: transparent !important;
    border-right: none !important;
    padding-right: 22px !important;
  }
  .desc-li-ardis:hover .dli-check circle:first-child {
    fill-opacity: 0.1 !important;
  }
  body.ardis-dark .desc-li-ardis:hover { background: transparent !important; }
}

/* ── Mobile drawer social icons: kill sticky hover on touch ── */
@media (hover: none) and (pointer: coarse) {
  .mdr-soc-wa:hover, .mdr-soc-fb:hover, .mdr-soc-tk:hover, .mdr-soc-btn:hover {
    background: transparent !important;
  }
  .mdr-soc-wa:hover { color: #25d366 !important; }
  .mdr-soc-fb:hover { color: #1877f2 !important; }
  .mdr-soc-tk:hover { color: inherit !important; }
}

/* ════════════════════════════════════════════════
   SHOP PAGE — Mobile-First Clean Layout v11.8
   Proper spacing, no overflow, balanced elements
════════════════════════════════════════════════ */

/* ── Mobile bar (Search + Sort) — hidden on desktop ── */
.asp-mobile-bar { display: none; }

/* ── Sidebar — always flex on desktop ── */
.asp-aside { display: flex; }

@media(max-width: 980px) {

  /* Hero: compact but breathable */
  .asp-hero { padding: 18px 0 14px !important; }
  .asp-hero .ardis-wrap { padding: 0 16px !important; }
  .asp-crumb { font-size: 11.5px; margin-bottom: 8px; }
  .asp-hero-title { font-size: 22px !important; margin-bottom: 4px !important; }
  .asp-hero-meta { font-size: 12.5px; }
  .asp-hero-count { font-size: 13px; }

  /* Body: proper horizontal breathing room */
  .asp-body { padding: 16px 0 48px; }
  .asp-body .ardis-wrap,
  .asp-body.ardis-wrap { padding: 0 16px !important; }

  /* Desktop sidebar — hidden on mobile */
  .asp-aside { display: none !important; }

  /* Desktop toolbar sort — hide on mobile (mobile bar handles it) */
  .asp-toolbar-sort { display: none !important; }
  form#aspDesktopSortForm { display: none !important; }

  /* ── Mobile bar: search left + sort compact right ── */
  .asp-mobile-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    margin: 16px 0 16px;
  }

  /* Search input: takes remaining space */
  .asp-mobile-search {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
  }
  .asp-mobile-search svg:first-child {
    position: absolute;
    right: 11px;
    width: 15px; height: 15px;
    stroke: var(--text-light);
    pointer-events: none;
    flex-shrink: 0;
  }
  .asp-mobile-search input {
    width: 100%;
    height: 40px;
    padding: 0 34px 0 10px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-family: var(--font);
    font-size: 13px;
    color: var(--text-dark);
    background: #fff;
    outline: none;
    transition: border-color .2s;
  }
  .asp-mobile-search input:focus { border-color: var(--green-mid); }
  .asp-mobile-search-clear {
    position: absolute;
    left: 10px;
    font-size: 12px;
    color: var(--text-light);
    line-height: 1;
    padding: 4px;
    cursor: pointer;
  }
  body.ardis-dark .asp-mobile-search input {
    background: #1f2123; border-color: #2e3134; color: #e4e6ea;
  }

  /* Sort select: compact pill on the right */
  .asp-mobile-sort {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
  .asp-mobile-sort select {
    height: 40px;
    padding: 0 28px 0 12px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dark);
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
    min-width: 88px;
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .asp-mobile-sort svg {
    position: absolute;
    left: 8px;
    width: 12px; height: 12px;
    stroke: var(--text-light);
    pointer-events: none;
  }
  body.ardis-dark .asp-mobile-sort select {
    background: #1f2123; border-color: #2e3134; color: #e4e6ea;
  }

  /* Toolbar: just the count (sort moved to mobile bar) */
  .asp-toolbar {
    padding-bottom: 12px;
    margin-bottom: 14px;
  }
  .asp-toolbar-count { font-size: 12.5px; }

  /* Products grid: 2 cols, good gap, not touching edges */
  .asp-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Product cards: proportional internal sizing */
  .asp-products-grid .pcard-body {
    padding: 10px 12px 12px !important;
    gap: 6px !important;
  }
  .asp-products-grid .pcard-name {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }
  .asp-products-grid .pcard-price-main {
    font-size: 14px !important;
  }
  .asp-products-grid .pcard-price-old {
    font-size: 11px !important;
  }
  .asp-products-grid .pcard-btn {
    height: 36px !important;
    font-size: 12.5px !important;
    border-radius: 8px !important;
  }
  .asp-products-grid .pcard-btn svg {
    width: 13px !important; height: 13px !important;
  }

  /* Pagination */
  .asp-pagination { margin-top: 28px; gap: 5px; }
  .asp-pagination .page-numbers { min-width: 36px; height: 36px; font-size: 13px; }
}

/* Touch: no sticky hover on mobile search/sort */
@media (hover: none) and (pointer: coarse) {
  .asp-mobile-search input:hover { border-color: var(--border) !important; }
  .asp-mobile-sort select:hover { border-color: var(--border) !important; }
}

/* ════════════════════════════════════════════════
   SHOP GRID — Uniform Card Height v12.0
════════════════════════════════════════════════ */

/* Grid cells stretch equally */
.asp-products-grid { align-items: stretch !important; }
.asp-products-grid .asp-card-in { display: flex; flex-direction: column; height: 100%; }

/* Card fills full cell height */
.asp-products-grid .pcard {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Image: fixed 1:1 ratio — never varies */
.asp-products-grid .pcard-img {
  aspect-ratio: 1/1 !important;
  flex-shrink: 0;
}

/* Body: flex column, fills rest */
.asp-products-grid .pcard-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 13px 15px 15px !important;
}

/* Name: max 2 lines + ellipsis, fixed height (no card expansion) */
.asp-products-grid .pcard-name {
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  min-height: 2.9em !important;
  max-height: 2.9em !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
}

/* Spacer: pushes price+btn to bottom */
.asp-products-grid .pcard-spacer {
  flex: 1;
  min-height: 8px;
}

/* Price row: always pinned above button */
.asp-products-grid .pcard-price-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: auto !important;
  margin-bottom: 10px !important;
  flex-shrink: 0 !important;
}
.asp-products-grid .pcard-price-main { font-size: 16px !important; font-weight: 900 !important; }
.asp-products-grid .pcard-price-old  { font-size: 12px !important; }

/* Button: always at bottom, never moves */
.asp-products-grid .pcard-btn {
  width: 100% !important;
  flex-shrink: 0 !important;
  margin-top: 0 !important;
}

/* ── Toolbar stats bar ── */
.asp-toolbar { align-items: center; }
.asp-toolbar-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.asp-toolbar-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green-mid);
  flex-shrink: 0;
  animation: dotPulse 2.5s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.5; transform:scale(.7); }
}
.asp-toolbar-clear {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--text-light);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 4px 12px; text-decoration: none;
  transition: color .2s, border-color .2s;
  flex-shrink: 0;
}
.asp-toolbar-clear:hover { color: var(--red); border-color: var(--red); }
@media (hover: none) and (pointer: coarse) {
  .asp-toolbar-clear:hover { color: var(--text-light) !important; border-color: var(--border) !important; }
}

/* ════════════════════════════════════════════════
   POLICIES PAGE v12.0
════════════════════════════════════════════════ */

/* Hero */
.policies-hero {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-mid) 100%);
  padding: 64px 0 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.policies-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.policies-hero-inner { position: relative; z-index: 1; }
.policies-hero-icon {
  width: 72px; height: 72px;
  background: rgba(255,255,255,.15);
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  backdrop-filter: blur(8px);
}
.policies-hero-icon svg { width: 34px; height: 34px; stroke: #fff; }
.policies-hero-title {
  font-size: 32px; font-weight: 900;
  color: #fff; margin-bottom: 10px; letter-spacing: -.3px;
}
.policies-hero-sub {
  font-size: 15px; color: rgba(255,255,255,.8);
  max-width: 480px; margin: 0 auto 28px; line-height: 1.7;
}
.policies-hero-pills {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.policies-pill {
  padding: 8px 20px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 24px;
  color: #fff; font-size: 13.5px; font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background .2s, border-color .2s;
}
.policies-pill:hover { background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.6); }

/* Body */
.policies-body { padding: 56px 0 80px; max-width: 760px; margin: 0 auto; }

/* Section */
.policy-section { margin-bottom: 0; }
.policy-header {
  display: flex; align-items: flex-start; gap: 18px;
  margin-bottom: 32px;
}
.policy-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.policy-icon svg { width: 24px; height: 24px; }
.policy-icon--blue   { background: #eff6ff; }
.policy-icon--blue svg { stroke: #2563eb; }
.policy-icon--green  { background: var(--green-pale); }
.policy-icon--green svg { stroke: var(--green-dark); }
.policy-icon--orange { background: #fff7ed; }
.policy-icon--orange svg { stroke: #ea580c; }
.policy-title { font-size: 22px; font-weight: 800; color: var(--text-dark); margin-bottom: 4px; }
.policy-subtitle { font-size: 13.5px; color: var(--text-light); }
body.ardis-dark .policy-title { color: #f0f1f3; }

/* Blocks */
.policy-body { display: flex; flex-direction: column; gap: 24px; }
.policy-block {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px;
}
body.ardis-dark .policy-block { background: #1c1e21; border-color: #2a2c2f; }
.policy-block h3 {
  font-size: 15px; font-weight: 800;
  color: var(--text-dark); margin-bottom: 10px;
}
body.ardis-dark .policy-block h3 { color: #e4e6ea; }
.policy-block p { font-size: 14px; color: var(--text-mid); line-height: 1.75; }
body.ardis-dark .policy-block p { color: #b0b3b8; }
.policy-list {
  padding-right: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.policy-list li {
  font-size: 14px; color: var(--text-mid);
  padding-right: 18px; position: relative; line-height: 1.6;
}
.policy-list li::before {
  content: ''; position: absolute; right: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-mid);
}
.policy-list--ordered { counter-reset: pol; }
.policy-list--ordered li::before {
  content: counter(pol); counter-increment: pol;
  background: var(--green-pale); color: var(--green-dark);
  font-size: 11px; font-weight: 800;
  width: 18px; height: 18px; top: 3px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; right: -2px;
}
body.ardis-dark .policy-list li { color: #b0b3b8; }

/* Stats cards (refund) */
.policy-cards-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 12px;
  margin-bottom: 8px;
}
.policy-info-card {
  border-radius: 14px; padding: 20px 16px;
  text-align: center;
}
.policy-info-card--green  { background: var(--green-pale); }
.policy-info-card--blue   { background: #eff6ff; }
.policy-info-card--orange { background: #fff7ed; }
.pic-num { font-size: 26px; font-weight: 900; line-height: 1; margin-bottom: 6px; }
.policy-info-card--green  .pic-num { color: var(--green-dark); }
.policy-info-card--blue   .pic-num { color: #2563eb; }
.policy-info-card--orange .pic-num { color: #ea580c; }
.pic-label { font-size: 12px; font-weight: 600; color: var(--text-mid); }

/* Contact buttons */
.policy-contact {
  background: var(--green-pale); border-radius: 14px;
  padding: 20px 24px; margin-top: 8px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.policy-contact-label { font-size: 14px; font-weight: 700; color: var(--green-dark); flex-shrink: 0; }
.policy-contact-btns  { display: flex; gap: 10px; flex-wrap: wrap; }
.policy-contact-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 10px;
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  transition: transform .18s, box-shadow .18s;
}
.policy-contact-btn:hover { transform: translateY(-2px); }
.policy-contact-btn--wa    { background: #25d366; color: #fff; }
.policy-contact-btn--email { background: var(--green-mid); color: #fff; }

/* Divider */
.policy-divider {
  height: 1px; margin: 48px 0;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* Floating nav */
.policies-float-nav {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(16px);
  border: 1px solid var(--border); border-radius: 50px;
  padding: 6px 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  z-index: 900;
}
body.ardis-dark .policies-float-nav {
  background: rgba(28,30,33,.92); border-color: #2a2c2f;
}
.pfn-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 40px;
  font-size: 12.5px; font-weight: 700;
  color: var(--text-mid); text-decoration: none;
  transition: background .2s, color .2s;
}
.pfn-btn:hover, .pfn-btn.is-active {
  background: var(--green-mid); color: #fff;
}
.pfn-btn svg { flex-shrink: 0; }
body.ardis-dark .pfn-btn { color: #b0b3b8; }
body.ardis-dark .pfn-btn:hover,
body.ardis-dark .pfn-btn.is-active { background: var(--green-mid); color: #fff; }

@media(max-width: 640px) {
  .policies-hero { padding: 40px 0 36px; }
  .policies-hero-title { font-size: 24px; }
  .policies-body { padding: 32px 0 100px; }
  .policy-cards-grid { grid-template-columns: repeat(3,1fr); gap: 8px; }
  .pic-num { font-size: 20px; }
  .policy-contact { flex-direction: column; align-items: flex-start; gap: 12px; }
  .policy-header { flex-direction: row; }
  .pfn-btn span { display: none; }
  .pfn-btn { padding: 8px 12px; }
}

/* ── Pagination enhanced v12.0 ── */
.asp-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; margin-top: 48px; padding: 8px 0;
}
.asp-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 8px;
  border-radius: 12px;
  font-size: 14px; font-weight: 700;
  color: var(--text-mid);
  background: #fff;
  border: 1.5px solid var(--border);
  text-decoration: none;
  position: relative; overflow: hidden;
  transition:
    color .22s cubic-bezier(.25,.46,.45,.94),
    border-color .22s,
    transform .2s cubic-bezier(.34,1.56,.64,1),
    box-shadow .22s;
  animation: pgFadeUp .4s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes pgFadeUp {
  from { opacity:0; transform: translateY(10px) scale(.9); }
  to   { opacity:1; transform: translateY(0)   scale(1); }
}
/* Ripple layer */
.asp-pagination .page-numbers::before {
  content:''; position:absolute; inset:0;
  background: var(--green-pale);
  opacity:0; transition:opacity .18s; border-radius:inherit;
}
.asp-pagination .page-numbers:hover {
  color: var(--green-dark);
  border-color: rgba(45,106,79,.35);
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 6px 16px rgba(45,106,79,.18);
  z-index: 1;
}
.asp-pagination .page-numbers:hover::before { opacity:1; }
.asp-pagination .page-numbers > * { position:relative; z-index:1; }
/* Current page */
.asp-pagination .page-numbers.current {
  background: var(--green-mid) !important;
  border-color: var(--green-mid) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(45,106,79,.35) !important;
  transform: none !important;
}
.asp-pagination .page-numbers.current::before { display:none; }
/* Prev / Next arrows */
.asp-pagination .prev,
.asp-pagination .next {
  min-width: 46px; font-weight: 800;
  background: var(--green-pale); border-color: rgba(45,106,79,.2);
  color: var(--green-dark);
}
.asp-pagination .prev:hover,
.asp-pagination .next:hover { background: var(--green-mid); color:#fff; border-color: var(--green-mid); }
/* Dots */
.asp-pagination .dots {
  border:none !important; background:transparent !important;
  color:var(--text-light) !important; min-width:28px !important;
  cursor:default; transform:none !important; box-shadow:none !important;
  animation:none !important;
}
.asp-pagination .dots::before { display:none !important; }
/* SVG arrows sizing */
.asp-pagination .page-numbers svg { width:14px; height:14px; stroke:currentColor; }
/* Dark mode */
body.ardis-dark .asp-pagination .page-numbers { background:#1f2123; border-color:#2e3134; color:#b0b3b8; }
body.ardis-dark .asp-pagination .page-numbers.current { background:var(--green-mid)!important; color:#fff!important; }
body.ardis-dark .asp-pagination .prev,
body.ardis-dark .asp-pagination .next { background:rgba(45,106,79,.15); border-color:rgba(45,106,79,.3); color:#6ee7a0; }
/* Touch: no sticky hover */
@media(hover:none) and (pointer:coarse) {
  .asp-pagination .page-numbers:hover {
    transform:none!important; box-shadow:none!important;
    color:var(--text-mid)!important; border-color:var(--border)!important;
  }
  .asp-pagination .page-numbers:hover::before { opacity:0!important; }
  .asp-pagination .prev:hover,.asp-pagination .next:hover {
    background:var(--green-pale)!important; color:var(--green-dark)!important;
  }
  .asp-pagination .page-numbers.current:hover { color:#fff!important; }
}

/* ════════════════════════════════════════════════
   POLICIES PAGE v12.2 — Chic, Animated, Fancy
════════════════════════════════════════════════ */

/* ── Hero ── */
.pol-hero {
  position: relative;
  background: linear-gradient(145deg, var(--green-dark) 0%, #0d3320 40%, var(--green-mid) 100%);
  padding: 72px 0 64px;
  overflow: hidden;
  text-align: center;
}
.pol-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.06) 0%, transparent 40%);
  pointer-events: none;
}
.pol-hero-inner { position: relative; z-index: 1; }
.pol-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 30px; padding: 6px 18px;
  color: rgba(255,255,255,.9);
  font-size: 13px; font-weight: 600;
  margin-bottom: 22px;
  backdrop-filter: blur(8px);
}
.pol-hero-title {
  font-size: 44px; font-weight: 900;
  color: #fff; line-height: 1.2;
  margin-bottom: 16px; letter-spacing: -.5px;
}
.pol-hero-sub {
  font-size: 15.5px; color: rgba(255,255,255,.75);
  max-width: 500px; margin: 0 auto 32px; line-height: 1.75;
}
.pol-nav {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.pol-nav-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 22px;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 30px;
  color: rgba(255,255,255,.9);
  font-size: 13.5px; font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: background .22s, border-color .22s, transform .18s;
}
.pol-nav-btn:hover, .pol-nav-btn.is-active {
  background: rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.6);
  transform: translateY(-2px);
}

/* ── Body ── */
.pol-body { padding: 64px 0 100px; max-width: 800px; margin: 0 auto; }

/* ── Section reveal animation ── */
.pol-reveal { opacity: 0; transform: translateY(30px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
.pol-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ── Section ── */
.pol-section { margin-bottom: 0; }
.pol-section-head {
  display: flex; align-items: flex-start; gap: 20px;
  margin-bottom: 32px;
}
.pol-icon {
  width: 58px; height: 58px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pol-icon--shield { background: linear-gradient(135deg,#d1fae5,#a7f3d0); }
.pol-icon--shield svg { stroke: var(--green-dark); }
.pol-icon--doc    { background: linear-gradient(135deg,#dbeafe,#bfdbfe); }
.pol-icon--doc svg { stroke: #1d4ed8; }
.pol-icon--return { background: linear-gradient(135deg,#ffedd5,#fed7aa); }
.pol-icon--return svg { stroke: #c2410c; }
.pol-section-tag { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-light); margin-bottom: 4px; }
.pol-section-title { font-size: 26px; font-weight: 900; color: var(--text-dark); margin-bottom: 6px; }
.pol-section-desc  { font-size: 14px; color: var(--text-light); }
body.ardis-dark .pol-section-title { color: #f0f1f3; }
body.ardis-dark .pol-section-desc  { color: #8a8d91; }

/* ── Cards grid ── */
.pol-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pol-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 22px;
  transition: box-shadow .25s, transform .22s;
}
.pol-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.pol-card--wide { grid-column: 1 / -1; }
.pol-card h3 { font-size: 14.5px; font-weight: 800; color: var(--text-dark); margin-bottom: 12px; }
.pol-card p  { font-size: 14px; color: var(--text-mid); line-height: 1.75; }
body.ardis-dark .pol-card { background: #1c1e21; border-color: #2a2c2f; }
body.ardis-dark .pol-card h3 { color: #e4e6ea; }
body.ardis-dark .pol-card p  { color: #b0b3b8; }

/* ── List ── */
.pol-list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pol-list li {
  font-size: 13.5px; color: var(--text-mid);
  padding-right: 20px; position: relative; line-height: 1.6;
}
.pol-list li::before {
  content: ''; position: absolute; right: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-mid);
}
.pol-list--ol { counter-reset: pol-c; }
.pol-list--ol li::before {
  content: counter(pol-c); counter-increment: pol-c;
  background: var(--green-pale); color: var(--green-dark);
  font-size: 10px; font-weight: 900;
  width: 18px; height: 18px; top: 2px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
body.ardis-dark .pol-list li { color: #b0b3b8; }

/* ── Stats row (refund) ── */
.pol-stats {
  display: flex; gap: 14px;
  margin-bottom: 24px;
}
.pol-stat {
  flex: 1; background: var(--green-pale);
  border-radius: 14px; padding: 20px 16px;
  text-align: center;
}
.pol-stat strong { display: block; font-size: 28px; font-weight: 900; color: var(--green-dark); line-height: 1; margin-bottom: 6px; }
.pol-stat span   { font-size: 12px; font-weight: 600; color: var(--text-mid); }

/* ── Contact CTA ── */
.pol-contact {
  margin-top: 20px;
  background: linear-gradient(135deg, var(--green-pale), #fff);
  border: 1px solid rgba(45,106,79,.15);
  border-radius: 16px; padding: 24px 22px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
}
.pol-contact-label { font-size: 14.5px; font-weight: 800; color: var(--green-dark); flex: 1; }
.pol-contact-btns  { display: flex; gap: 10px; flex-wrap: wrap; }
.pol-contact-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 11px;
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  transition: transform .18s, box-shadow .18s;
}
.pol-contact-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.pol-contact-btn--wa    { background: #25d366; color: #fff; }
.pol-contact-btn--phone { background: var(--green-mid); color: #fff; }

/* ── Separator ── */
.pol-sep {
  display: flex; align-items: center; gap: 12px;
  margin: 52px 0;
}
.pol-sep span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border)); }
.pol-sep span:last-child { background: linear-gradient(90deg, var(--border), transparent); }
.pol-sep svg { stroke: var(--border); flex-shrink: 0; fill: var(--border); }

/* ── Floating nav ── */
.pol-float {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 50px; padding: 5px 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
  z-index: 900;
  backdrop-filter: blur(16px);
  animation: polFloatIn .5s .8s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes polFloatIn {
  from { opacity:0; transform:translateX(-50%) translateY(20px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}
body.ardis-dark .pol-float {
  background: rgba(28,30,33,.92); border-color: #2a2c2f;
}
.pol-float-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 40px;
  font-size: 12.5px; font-weight: 700;
  color: var(--text-mid); text-decoration: none;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.pol-float-btn:hover, .pol-float-btn.is-active {
  background: var(--green-mid); color: #fff;
}
body.ardis-dark .pol-float-btn { color: #8a8d91; }
body.ardis-dark .pol-float-btn:hover,
body.ardis-dark .pol-float-btn.is-active { background: var(--green-mid); color: #fff; }

#privacy, #terms, #refund { scroll-margin-top: 90px; }
@media(max-width: 640px) {
  .pol-page { overflow-x: hidden; }
  .pol-page .ardis-wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .pol-hero { padding: 44px 0 56px !important; }
  .pol-body { padding: 56px 0 90px !important; }
  #refund { margin-bottom: 40px !important; }

  /* Hero */
  .pol-hero-badge { font-size: 12px; padding: 5px 14px; margin-bottom: 18px; }
  .pol-hero-title { font-size: 25px; line-height: 1.35; margin-bottom: 12px; padding: 0 20px; }
  .pol-hero-sub { font-size: 13.5px; line-height: 1.7; margin-bottom: 24px; padding: 0 20px; }
  .pol-nav { gap: 8px; }
  .pol-nav-btn { padding: 9px 14px; font-size: 12.5px; }

  /* Body / section rhythm */
  .pol-sep { margin: 40px 0; }

  /* Section header */
  .pol-section-head { align-items: center; gap: 14px; margin-bottom: 24px; }
  .pol-section-head > div:last-child { flex: 1; min-width: 0; }
  .pol-icon { width: 46px; height: 46px; border-radius: 13px; }
  .pol-icon svg { width: 21px; height: 21px; }
  .pol-section-tag { font-size: 10px; }
  .pol-section-title { font-size: 19px; margin-bottom: 4px; }
  .pol-section-desc { font-size: 13px; line-height: 1.5; }

  /* Cards — airy, consistent width, generous internal padding, real breathing room between them */
  .pol-cards { grid-template-columns: 1fr; gap: 24px; }
  .pol-card--wide { grid-column: 1; }
  .pol-card { padding: 22px 20px; border-radius: 16px; width: 100%; box-sizing: border-box; }
  .pol-card h3 { font-size: 14.5px; margin-bottom: 12px; }
  .pol-card p { font-size: 13.5px; line-height: 1.75; }
  .pol-list { gap: 10px; }
  .pol-list li { font-size: 13.5px; line-height: 1.7; }

  /* Stats */
  .pol-stats { gap: 10px; margin-bottom: 24px; }
  .pol-stat { padding: 18px 12px; border-radius: 14px; }
  .pol-stat strong { font-size: 20px; margin-bottom: 4px; }
  .pol-stat span { font-size: 11px; }

  /* Contact CTA — full-width, tap-friendly buttons */
  .pol-contact { flex-direction: column; align-items: flex-start; padding: 22px 20px; gap: 16px; border-radius: 16px; }
  .pol-contact-label { font-size: 14px; }
  .pol-contact-btns { width: 100%; flex-direction: column; gap: 10px; }
  .pol-contact-btn { width: 100%; justify-content: center; padding: 13px 20px; min-height: 46px; font-size: 14px; }

  /* Floating nav */
  .pol-float-btn span { display: none; }
  .pol-float-btn { padding: 10px 14px; }
  .pol-float { bottom: 16px; padding: 5px; }
}

@media(max-width: 380px) {
  .pol-page .ardis-wrap { padding: 0 18px; padding-inline: 18px; }
  .pol-hero-title { font-size: 24px; }
  .pol-hero-sub { font-size: 13.5px; }
  .pol-nav-btn { font-size: 12px; padding: 8px 12px; }
  .pol-section-title { font-size: 17.5px; }
  .pol-card { padding: 20px 18px; }
  .pol-stats { flex-direction: column; }
}

/* Touch hover protection */
@media (hover:none) and (pointer:coarse) {
  .pol-nav-btn:hover { transform: none !important; background: rgba(255,255,255,.1) !important; }
  .pol-card:hover { transform: none !important; box-shadow: none !important; }
  .pol-contact-btn:hover { transform: none !important; box-shadow: none !important; }
}

/* ═══════════════════════════════════════════════
   FINAL OVERRIDE — hamburger/icons forced to the far left on mobile.
   Placed at the very end of the file so nothing above can win against it.
═══════════════════════════════════════════════ */
@media(max-width:768px) {
  html body #ardis-header .ardis-nav-icons {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 999 !important;
  }
  html body #ardis-header .ardis-logo {
    position: relative !important;
    z-index: 10 !important;
  }
}