/* ===== RESET & ROOT ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --white: #FFFFFF;
  --off-white: #F5F7FF;
  --green-950: #0D2461;           /* deep navy — logo border/text */
  --green-800: #1A3B8C;           /* royal blue mid */
  --green-600: #3A5BB5;           /* blue accent */
  --amber-500: #3DB54A;           /* kelly green — logo bear color / CTA */
  --amber-600: #2D9A3A;           /* dark green hover */
  --gray-100: #EEF2FF;            /* light blue tint */
  --gray-200: #D8E2F8;            /* blue border light */
  --gray-300: #C2CEEE;            /* blue border */
  --text-dark: #0D1B3E;
  --text-muted: #6B7A99;
  --font: 'Inter', sans-serif;
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px;
  --shadow-sm: 0 2px 12px rgba(13,36,97,0.08);
  --shadow-md: 0 8px 32px rgba(13,36,97,0.13);
  --shadow-lg: 0 20px 56px rgba(13,36,97,0.22);
  --shadow-accent: 0 8px 24px rgba(61,181,74,0.38);
  --ticker-h: 36px;
  --header-h: 68px;
}
html { scroll-behavior:smooth; }
body { font-family:var(--font); color:var(--text-dark); background:var(--off-white); overflow-x:hidden; line-height:1.6; }
a { text-decoration:none; }
ul { list-style:none; }
.container { max-width:1260px; margin:0 auto; padding:0 28px; }

/* ===== PRELOADER ===== */
.preloader { position:fixed; inset:0; background:var(--white); z-index:100000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; transition:opacity .6s, visibility .6s; }
.preloader.hidden { opacity:0; visibility:hidden; }
.preloader-inner { display:flex; align-items:center; gap:16px; }
.preloader-icon { width:60px; height:60px; background:linear-gradient(145deg,var(--amber-500),var(--green-800)); border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:30px; color:white; animation:gentlePulse 1.6s infinite; }
.preloader-logo { width:min(260px,62vw); height:auto; display:block; animation:gentlePulse 1.8s infinite; }
.preloader-brand { font-size:40px; font-weight:900; background:linear-gradient(135deg,var(--green-950) 20%,var(--amber-500) 80%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.preloader-brand span { color:var(--amber-500); -webkit-text-fill-color:var(--amber-500); }
.preloader-tagline {
  margin-top:-14px; text-align:center; padding:0 24px;
  max-width:min(92vw,480px);
  font-size:15.5px; font-weight:600; letter-spacing:.2px; line-height:1.5;
  color:var(--text-muted);
}
.preloader-tagline strong { font-weight:800; color:var(--green-950); }
@media(max-width:480px) { .preloader-tagline { font-size:13.5px; margin-top:-10px; } }
.preloader-bar { width:220px; height:4px; background:var(--gray-300); border-radius:12px; overflow:hidden; }
.preloader-bar::after { content:''; display:block; height:100%; width:40%; background:linear-gradient(90deg,var(--green-600),var(--amber-500)); animation:loading 1.3s ease infinite; }
@keyframes gentlePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.85;transform:scale(.96)} }
@keyframes loading { 0%{transform:translateX(-100%)} 100%{transform:translateX(300%)} }

/* ===== TICKER ===== */
.ticker-strip { position:fixed; top:0; left:0; right:0; z-index:1100; background:linear-gradient(90deg,var(--green-950),var(--green-800) 60%,#0D2461); height:var(--ticker-h); overflow:hidden; display:flex; align-items:center; border-bottom:2px solid rgba(61,181,74,.4); }
.ticker-inner { display:flex; animation:ticker 36s linear infinite; white-space:nowrap; }
.ticker-item { padding:0 48px; font-size:11.5px; font-weight:700; color:rgba(255,255,255,.9); letter-spacing:1.4px; text-transform:uppercase; display:flex; align-items:center; gap:10px; }
.ticker-item i { color:var(--amber-500); }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ===== HEADER ===== */
.header { position:fixed; top:var(--ticker-h); left:0; right:0; z-index:1000; background:rgba(8,15,50,.4); backdrop-filter:blur(10px); transition:all .4s; border-bottom:1px solid rgba(255,255,255,.07); }
.header.scrolled { background:rgba(255,255,255,.97); box-shadow:var(--shadow-sm); border-bottom:1px solid var(--gray-200); }
.header-inner { max-width:1260px; margin:0 auto; padding:0 28px; height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:20px; }

.logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-icon { width:46px; height:46px; background:#fff; border:1px solid rgba(255,255,255,.35); border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:18px; color:white; flex-shrink:0; overflow:hidden; padding:2px; box-shadow:0 2px 10px rgba(0,0,0,.12); transition:.4s; }
.logo-icon img { width:100%; height:100%; object-fit:contain; display:block; }
.header.scrolled .logo-icon { background:#fff; border-color:var(--gray-200); }
.logo-text { font-size:20px; font-weight:900; color:white; letter-spacing:.8px; text-transform:uppercase; line-height:1.1; transition:.4s; }
.logo-text em { color:var(--amber-500); font-style:normal; }
.header.scrolled .logo-text { background:linear-gradient(135deg,var(--green-950) 20%,var(--amber-500) 70%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.logo-sub { font-size:9px; color:rgba(255,255,255,.4); letter-spacing:1.5px; text-transform:uppercase; font-weight:600; display:block; transition:.4s; }
.header.scrolled .logo-sub { color:var(--text-muted); -webkit-text-fill-color:var(--text-muted); }

.header-nav { display:flex; align-items:center; gap:32px; }
.header-nav a { font-size:13.5px; font-weight:600; color:rgba(255,255,255,.8); letter-spacing:.3px; transition:.25s; padding-bottom:3px; position:relative; }
.header-nav a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--amber-500); border-radius:2px; transition:width .3s; }
.header-nav a:hover::after { width:100%; }
.header-nav a:hover { color:white; }
.header.scrolled .header-nav a { color:var(--text-muted); }
.header.scrolled .header-nav a:hover { color:var(--text-dark); }
@media(max-width:900px) { .header-nav { display:none; } }

.header-actions { display:flex; align-items:center; gap:10px; }
.cart-btn { position:relative; width:44px; height:44px; border:none; background:rgba(255,255,255,.1); border-radius:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; color:white; transition:.25s; }
.cart-btn:hover { background:var(--amber-500); }
.header.scrolled .cart-btn { background:var(--gray-100); color:var(--text-dark); }
.header.scrolled .cart-btn:hover { background:var(--amber-500); color:white; }
.cart-badge { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; background:#EF4444; color:white; font-size:10px; font-weight:800; border-radius:10px; display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid white; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:8px; z-index:1002; }
.hamburger span { width:22px; height:2px; background:white; border-radius:2px; transition:.3s; display:block; }
.header.scrolled .hamburger span { background:var(--green-950); }
@media(max-width:900px) { .hamburger { display:flex; } }

/* ===== MOBILE MENU OVERLAY (body-level, full-screen, card items) ===== */
.mobile-nav {
  position:fixed; inset:0; z-index:3000;
  background:linear-gradient(160deg, #0a1633 0%, var(--green-950) 55%, #071a4a 100%);
  display:flex; flex-direction:column;
  padding:78px 22px 36px; overflow-y:auto;
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s;
}
.mobile-nav.open { opacity:1; visibility:visible; }

.mobile-nav-close {
  position:absolute; top:18px; right:18px;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.15); border:1.5px solid rgba(255,255,255,.35);
  color:#fff; font-size:17px; cursor:pointer;
  display:grid; place-items:center;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
  transition:background .2s, transform .3s;
}
.mobile-nav-close:hover, .mobile-nav-close:active { background:rgba(255,255,255,.28); transform:rotate(90deg); }

.mobile-nav-links { list-style:none; display:flex; flex-direction:column; gap:10px; width:100%; max-width:440px; margin:0 auto; }
.mobile-nav-links li { opacity:0; transform:translateX(-18px); }
.mobile-nav.open .mobile-nav-links li { animation:mnav-in .35s forwards; }
.mobile-nav.open .mobile-nav-links li:nth-child(1) { animation-delay:.05s; }
.mobile-nav.open .mobile-nav-links li:nth-child(2) { animation-delay:.10s; }
.mobile-nav.open .mobile-nav-links li:nth-child(3) { animation-delay:.15s; }
.mobile-nav.open .mobile-nav-links li:nth-child(4) { animation-delay:.20s; }
.mobile-nav.open .mobile-nav-links li:nth-child(5) { animation-delay:.25s; }
.mobile-nav.open .mobile-nav-links li:nth-child(6) { animation-delay:.30s; }
@keyframes mnav-in { to { opacity:1; transform:translateX(0); } }

.mobile-nav-links a {
  display:flex; align-items:center; gap:15px;
  padding:15px 18px; border-radius:14px;
  font-size:16px; font-weight:700; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  transition:background .2s, transform .15s;
}
.mobile-nav-links a:hover, .mobile-nav-links a:active { background:rgba(255,255,255,.14); transform:translateX(4px); }
.mnav-icon {
  width:40px; height:40px; border-radius:11px; flex-shrink:0;
  background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; color:#fff;
}
.mnav-label { flex:1; }
.mnav-arrow { font-size:11px; opacity:.45; }

.mnav-cta-li { margin-top:6px; }
.mobile-nav-links a.mnav-cta {
  justify-content:center; gap:10px; margin-top:4px;
  background:linear-gradient(135deg, var(--amber-500), var(--amber-600));
  border:none; border-radius:50px;
  font-weight:800; font-size:16px; padding:17px 20px;
  box-shadow:var(--shadow-accent);
}
.mobile-nav-links a.mnav-cta:hover { transform:none; filter:brightness(1.06); }

/* Hide floating helpers while the menu is open so they don't overlap it */
body.menu-open .whatsapp-fab, body.menu-open .slider-controls { display:none !important; }
@media(min-width:901px) { .mobile-nav { display:none; } }
.header-nav.open { display:flex !important; flex-direction:column; position:fixed; inset:0; background:var(--green-950); z-index:2000; justify-content:center; align-items:center; gap:0; }
.header-nav.open a { font-size:22px; font-weight:800; color:white; letter-spacing:2px; padding:18px 32px; text-align:center; width:100%; display:block; border-bottom:1px solid rgba(255,255,255,.06); }
.header-nav.open a::after { display:none; }
.mobile-close { display:none; position:fixed; top:20px; right:24px; z-index:2100; background:none; border:none; color:white; font-size:28px; cursor:pointer; }
.header-nav.open ~ .mobile-close, body.menu-open .mobile-close { display:block; }
body.menu-open { overflow:hidden; }

/* ===== HERO CAROUSEL ===== */
.hero { position:relative; height:100vh; min-height:640px; overflow:hidden; padding-top:var(--ticker-h); }
.slide { position:absolute; inset:0; opacity:0; transition:opacity 1.3s ease; }
.slide.active { opacity:1; }
.slide-bg { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1); transition:transform 7s ease; }
.slide.active .slide-bg { transform:scale(1.07); }
.slide-overlay { position:absolute; inset:0; background:linear-gradient(108deg,rgba(13,36,97,.60) 0%,rgba(13,36,97,.32) 55%,rgba(13,36,97,.08) 100%); z-index:1; }
.slide-overlay::after { content:''; position:absolute; bottom:0; left:0; width:48%; height:5px; background:linear-gradient(90deg,var(--green-600),var(--amber-500)); }
.slide-content { position:relative; z-index:10; height:100%; display:flex; flex-direction:column; justify-content:center; padding:0 100px; max-width:1300px; margin:0 auto; }
@media(max-width:768px) { .slide-content { padding:0 24px; } }

.slide-tag { display:inline-flex; align-items:center; gap:12px; margin-bottom:20px; opacity:0; transform:translateY(30px); }
.slide.active .slide-tag { animation:fadeUp .7s .3s forwards; }
.slide-tag-line { width:40px; height:3px; background:var(--amber-500); border-radius:2px; }
.slide-tag-text { font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.75); }

.slide-title { font-size:clamp(32px,7vw,64px); font-weight:900; color:#fff; line-height:1.1; margin-bottom:18px; opacity:0; transform:translateY(44px); text-transform:none; letter-spacing:-.5px; max-width:860px; font-family:'Playfair Display', Georgia, serif; text-shadow:0 2px 18px rgba(6,16,45,.45); }
.slide.active .slide-title { animation:fadeUp .8s .5s forwards; }
.slide-title .accent { color:var(--amber-500); }

.slide-desc { font-size:16px; color:rgba(255,255,255,.92); max-width:520px; line-height:1.72; margin-bottom:32px; opacity:0; transform:translateY(40px); text-shadow:0 1px 10px rgba(6,16,45,.55); }
.slide.active .slide-desc { animation:fadeUp .8s .65s forwards; }

.slide-actions { display:flex; gap:14px; flex-wrap:wrap; opacity:0; transform:translateY(36px); }
.slide.active .slide-actions { animation:fadeUp .8s .8s forwards; }

@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }

/* Slider Controls */
.slider-controls { position:absolute; bottom:36px; left:100px; right:100px; z-index:20; display:flex; align-items:center; justify-content:space-between; }
@media(max-width:768px) { .slider-controls { left:24px; right:24px; bottom:24px; } }
.slider-left { display:flex; align-items:center; gap:20px; }
.slider-progress { display:flex; gap:8px; }
.slider-progress-bar { width:36px; height:3px; background:rgba(255,255,255,.25); border-radius:4px; cursor:pointer; transition:.3s; }
.slider-progress-bar.active { background:var(--amber-500); width:56px; }
.slider-count { font-size:13px; font-weight:700; color:rgba(255,255,255,.55); }
.slider-count .now { color:white; font-size:20px; font-weight:900; }
.slider-arrows { display:flex; gap:8px; }
.slider-arrow-btn { width:44px; height:44px; border:1.5px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); border-radius:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; color:white; transition:.25s; backdrop-filter:blur(6px); }
.slider-arrow-btn:hover { background:var(--amber-500); border-color:var(--amber-500); }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:9px; padding:14px 28px; border-radius:40px; font-size:14px; font-weight:700; letter-spacing:.3px; font-family:var(--font); cursor:pointer; border:none; transition:.25s; }
.btn-primary { background:var(--amber-500); color:white; }
.btn-primary:hover { background:var(--amber-600); transform:translateY(-2px); box-shadow:var(--shadow-accent); }
.btn-outline { background:transparent; color:rgba(255,255,255,.85); border:1.5px solid rgba(255,255,255,.35); }
.btn-outline:hover { border-color:rgba(255,255,255,.7); color:white; background:rgba(255,255,255,.08); }

/* ===== STATS STRIP ===== */
.stats-strip { background:white; border-bottom:1px solid var(--gray-200); display:flex; justify-content:center; flex-wrap:wrap; gap:0; }
.stat { flex:1; min-width:160px; display:flex; align-items:center; gap:14px; padding:24px 32px; border-right:1px solid var(--gray-200); }
.stat:last-child { border-right:none; }
@media(max-width:768px) { .stat { padding:18px 20px; min-width:140px; } }
.stat-icon { width:44px; height:44px; background:linear-gradient(145deg,var(--amber-500),var(--green-800)); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:18px; color:white; flex-shrink:0; }
.stat-val { font-size:26px; font-weight:900; color:var(--green-950); line-height:1; }
.stat-lbl { font-size:11px; color:var(--text-muted); font-weight:600; letter-spacing:.5px; }

/* ===== SCROLL REVEAL ===== */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.12s; }
.reveal-delay-2 { transition-delay:.24s; }

/* ===== SECTION COMMONS ===== */
.sec-header { margin-bottom:28px; }
.sec-tag { display:flex; align-items:center; gap:10px; font-size:11px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; color:var(--amber-500); margin-bottom:10px; }
.sec-tag span { width:28px; height:2px; background:var(--amber-500); border-radius:2px; display:inline-block; }
.sec-title { font-size:clamp(24px,4vw,36px); font-weight:800; color:var(--green-950); line-height:1.2; font-family:'Playfair Display', Georgia, serif; }
.sec-title span { color:var(--amber-500); }

/* ===== HORIZONTAL SCROLL SECTIONS ===== */
.hscroll-section { padding:48px 0; }
.promo-bg { background:white; border-bottom:1px solid var(--gray-200); }
.new-bg   { background:white; border-bottom:1px solid var(--gray-200); }

.hscroll-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; gap:16px; flex-wrap:wrap; }
.hscroll-controls { display:flex; align-items:center; gap:10px; }

.hscroll-voir { font-size:13px; font-weight:700; color:var(--amber-500); display:flex; align-items:center; gap:6px; transition:.2s; margin-right:6px; }
.hscroll-voir:hover { color:var(--amber-600); gap:10px; }

.hscroll-arrow { display:none; }
.hscroll-indicator { display:none; }
.hscroll-controls { display:flex; align-items:center; gap:10px; }


.hscroll-wrap { position:relative; }

.hscroll-track { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:1100px) { .hscroll-track { grid-template-columns:repeat(3,1fr); } }
@media(max-width:768px)  { .hscroll-track { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px)  { .hscroll-track { grid-template-columns:1fr; } }

/* title accent colors per section */
.sec-tag .tag-red  { width:28px; height:2px; background:var(--amber-500); border-radius:2px; display:inline-block; }
.sec-tag .tag-gold { width:28px; height:2px; background:var(--amber-500); border-radius:2px; display:inline-block; }

/* ===== CATEGORIES ===== */
.categories-section { padding:48px 0; background:white; border-bottom:1px solid var(--gray-200); }
.categories-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:1100px) { .categories-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:768px)  { .categories-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px)  { .categories-grid { grid-template-columns:1fr; } }

.cat-card { background:white; border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:.28s; border:2px solid var(--gray-200); display:flex; flex-direction:column; }
.cat-card:hover, .cat-card.active { border-color:var(--amber-500); box-shadow:var(--shadow-md); transform:translateY(-4px); }

.cat-img-wrap { height:140px; background-size:cover; background-position:center; position:relative; flex-shrink:0; }
.cat-img-wrap::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom, transparent 30%, rgba(13,36,97,.55)); }

.cat-icon-badge { position:absolute; bottom:-18px; left:20px; z-index:2; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:18px; color:white; border:3px solid white; box-shadow:var(--shadow-sm); transition:.25s; }
.cat-card.cat-ortho      .cat-icon-badge { background:#1E40AF; }
.cat-card.cat-memory     .cat-icon-badge { background:#6D28D9; }
.cat-card.cat-spring     .cat-icon-badge { background:var(--amber-600); }
.cat-card.cat-latex      .cat-icon-badge { background:#16A34A; }
.cat-card.cat-surmatelas .cat-icon-badge { background:#D97706; }
.cat-card.cat-accessoires .cat-icon-badge { background:#E11D48; }
.cat-card.active .cat-icon-badge { box-shadow:0 4px 14px rgba(61,181,74,.4); transform:scale(1.1); }

.cat-body { padding:28px 18px 20px; flex:1; }
.cat-name  { font-size:14px; font-weight:800; color:var(--green-950); margin-bottom:6px; }
.cat-desc  { font-size:12px; color:var(--text-muted); line-height:1.6; margin-bottom:12px; }
.cat-count { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--amber-600); background:rgba(61,181,74,.08); padding:4px 10px; border-radius:20px; }

/* ===== PRODUCTS ===== */
.products-section { padding:48px 0; background:white; border-bottom:1px solid var(--gray-200); }
.products-top { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:28px; flex-wrap:wrap; gap:20px; }
.filter-sort { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.filter-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.filter-tab { padding:8px 18px; border-radius:40px; border:1.5px solid var(--gray-300); background:white; font-size:12.5px; font-weight:600; color:var(--text-muted); cursor:pointer; transition:.2s; white-space:nowrap; font-family:var(--font); }
.filter-tab:hover { border-color:var(--amber-500); color:var(--amber-500); }
.filter-tab.active { background:var(--amber-500); border-color:var(--amber-500); color:white; box-shadow:0 4px 12px rgba(61,181,74,.3); }
.price-chips { display:flex; gap:6px; flex-wrap:wrap; }
.price-chip { padding:8px 16px; border-radius:40px; border:1.5px solid var(--gray-300); background:white; font-size:12.5px; font-weight:600; color:var(--text-muted); cursor:pointer; transition:.2s; white-space:nowrap; font-family:var(--font); }
.price-chip:hover { border-color:var(--green-950); color:var(--green-950); }
.price-chip.active { background:var(--green-950); border-color:var(--green-950); color:white; box-shadow:var(--shadow-sm); }

/* ---- Mobile filter button ---- */
.mobile-filter-btn { display:none; align-items:center; gap:8px; padding:10px 20px; border-radius:40px; border:1.5px solid var(--gray-300); background:white; font-size:13px; font-weight:700; color:var(--text-dark); cursor:pointer; font-family:var(--font); position:relative; transition:.2s; }
.mobile-filter-btn:hover { border-color:var(--green-950); color:var(--green-950); }
.mobile-filter-badge { position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; background:var(--amber-500); color:white; font-size:10px; font-weight:800; border-radius:10px; display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid white; }

/* ---- Filter bottom sheet ---- */
.filter-sheet-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:5000; opacity:0; visibility:hidden; transition:.3s; backdrop-filter:blur(4px); }
.filter-sheet-overlay.open { opacity:1; visibility:visible; }

.filter-sheet { position:fixed; bottom:-100%; left:0; right:0; z-index:5100; background:white; border-radius:24px 24px 0 0; padding:0 0 env(safe-area-inset-bottom); transition:.4s cubic-bezier(.4,0,.2,1); max-height:85vh; display:flex; flex-direction:column; }
.filter-sheet.open { bottom:0; }

.filter-sheet-handle { width:40px; height:4px; background:var(--gray-300); border-radius:4px; margin:14px auto 0; flex-shrink:0; }
.filter-sheet-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px 12px; border-bottom:1px solid var(--gray-200); flex-shrink:0; }
.filter-sheet-header span { font-size:16px; font-weight:800; color:var(--text-dark); }
.filter-sheet-header button { width:32px; height:32px; border:none; background:var(--gray-100); border-radius:50%; cursor:pointer; font-size:15px; color:var(--text-muted); display:flex; align-items:center; justify-content:center; }

.filter-sheet-body { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:24px; }
.filter-sheet-group { display:flex; flex-direction:column; gap:12px; }
.filter-sheet-label { font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); display:flex; align-items:center; gap:8px; }
.filter-sheet-label i { color:var(--amber-500); }

.filter-sheet-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.sheet-cat-chip { padding:9px 16px; border-radius:40px; border:1.5px solid var(--gray-200); background:var(--off-white); font-size:13px; font-weight:600; color:var(--text-muted); cursor:pointer; transition:.2s; font-family:var(--font); }
.sheet-cat-chip:hover { border-color:var(--green-950); color:var(--green-950); background:white; }
.sheet-cat-chip.active { background:var(--green-950); border-color:var(--green-950); color:white; }

.filter-sheet-prices { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sheet-price-chip { padding:14px 12px; border-radius:14px; border:1.5px solid var(--gray-200); background:var(--off-white); font-size:13px; font-weight:700; color:var(--text-muted); cursor:pointer; transition:.2s; font-family:var(--font); text-align:center; }
.sheet-price-chip:hover { border-color:var(--green-950); color:var(--green-950); background:white; }
.sheet-price-chip.active { background:var(--green-950); border-color:var(--green-950); color:white; }

.filter-sheet-footer { display:flex; gap:10px; padding:16px 20px; border-top:1px solid var(--gray-200); flex-shrink:0; }
.filter-sheet-reset { flex:0 0 auto; padding:12px 20px; border-radius:40px; border:1.5px solid var(--gray-300); background:white; font-size:13px; font-weight:700; color:var(--text-muted); cursor:pointer; font-family:var(--font); transition:.2s; }
.filter-sheet-reset:hover { border-color:var(--text-dark); color:var(--text-dark); }
.filter-sheet-apply { flex:1; justify-content:center; border-radius:40px; }

/* Products layout: sidebar + grid */
.products-layout { display:grid; grid-template-columns:220px 1fr; gap:28px; align-items:start; }
.products-grid-wrap { min-width:0; }

/* Sidebar */
.filter-sidebar { background:white; border-radius:var(--radius-lg); border:1.5px solid var(--gray-200); padding:24px 20px; position:sticky; top:calc(var(--header-h) + var(--ticker-h) + 16px); display:flex; flex-direction:column; gap:20px; }
.sidebar-group { display:flex; flex-direction:column; gap:10px; }
.sidebar-group-title { font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); display:flex; align-items:center; gap:8px; }
.sidebar-group-title i { color:var(--amber-500); }
.sidebar-divider { height:1px; background:var(--gray-200); }
.sidebar-reset { display:flex; align-items:center; gap:8px; background:none; border:none; font-size:12.5px; font-weight:700; color:var(--text-muted); cursor:pointer; font-family:var(--font); padding:6px 0; transition:.2s; }
.sidebar-reset:hover { color:#EF4444; }

/* Filter tabs inside sidebar — vertical list */
#filterTabs { display:flex; flex-direction:column; gap:4px; }
.filter-tab { padding:9px 14px; border-radius:10px; border:none; background:transparent; font-size:13px; font-weight:600; color:var(--text-muted); cursor:pointer; transition:.2s; white-space:nowrap; font-family:var(--font); text-align:left; width:100%; }
.filter-tab:hover { background:var(--gray-100); color:var(--text-dark); }
.filter-tab.active { background:var(--green-950); color:white; box-shadow:var(--shadow-sm); }
.tab-count { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; border-radius:20px; font-size:10px; font-weight:800; padding:0 5px; background:rgba(255,255,255,.2); margin-left:auto; }
.filter-tab:not(.active) .tab-count { background:var(--gray-200); color:var(--text-muted); }

/* Price chips inside sidebar — vertical */
.price-chips { display:flex; flex-direction:column; gap:6px; }
.price-chip { padding:9px 14px; border-radius:10px; border:1.5px solid var(--gray-200); background:var(--off-white); font-size:12.5px; font-weight:600; color:var(--text-muted); cursor:pointer; transition:.2s; font-family:var(--font); text-align:left; }
.price-chip:hover { border-color:var(--green-950); color:var(--green-950); background:white; }
.price-chip.active { background:var(--green-950); border-color:var(--green-950); color:white; }

/* Product Grid */
.products-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:1100px) { .products-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:768px)  { .products-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px)  { .products-grid { grid-template-columns:1fr; } }

/* Product Card */
.prod-card { background:white; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:.3s; border:1.5px solid transparent; display:flex; flex-direction:column; cursor:pointer; }
.prod-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--gray-200); }
.prod-img { height:210px; background-size:cover; background-position:center; background-color:var(--gray-200); position:relative; overflow:hidden; flex-shrink:0; }
.prod-img::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.2) 0%,transparent 55%); transition:.3s; }
.prod-card:hover .prod-img::after { background:linear-gradient(to top,rgba(0,0,0,.3) 0%,rgba(13,36,97,.35) 100%); }
.prod-img-hover { position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; opacity:0; transition:.25s; }
.prod-card:hover .prod-img-hover { opacity:1; }
.prod-img-hover span { background:rgba(255,255,255,.95); color:var(--green-950); font-size:12px; font-weight:700; padding:8px 18px; border-radius:20px; letter-spacing:.5px; box-shadow:var(--shadow-sm); }
.prod-badge { position:absolute; top:12px; left:12px; z-index:2; padding:4px 10px; border-radius:20px; font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.badge-promo      { background:#EF4444; color:white; }
.badge-new        { background:var(--amber-500); color:white; }


.prod-body { padding:15px 16px 16px; display:flex; flex-direction:column; flex:1; }
.prod-cat-label { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin-bottom:5px; }
.prod-name { display:block; font-size:15px; font-weight:700; color:var(--green-950); margin-bottom:5px; line-height:1.25; font-family:'Playfair Display', Georgia, serif; text-decoration:none; transition:color .2s; }
a.prod-name:hover { color:var(--amber-600); }
.prod-warranty {
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  margin-bottom:8px; padding:4px 10px; border-radius:20px;
  font-size:11px; font-weight:800; letter-spacing:.2px; white-space:nowrap;
  color:var(--amber-600); background:rgba(61,181,74,.12); border:1px solid rgba(61,181,74,.28);
}
.prod-warranty i { font-size:10.5px; }
.prod-desc { font-size:12px; color:var(--text-muted); line-height:1.6; margin-bottom:12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:1; }

/* Variant pills */
.prod-variants { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
.variant-btn { padding:4px 9px; border:1.5px solid var(--gray-200); border-radius:6px; font-size:10.5px; font-weight:600; cursor:pointer; transition:.18s; background:var(--off-white); color:var(--text-muted); font-family:var(--font); white-space:nowrap; line-height:1.4; }
.variant-btn:hover { border-color:var(--green-950); color:var(--green-950); background:white; }
.variant-btn.active { background:var(--green-950); border-color:var(--green-950); color:white; }
.variant-btn.has-promo { border-color:#FCA5A5; color:#DC2626; }
.variant-btn.has-promo:hover { background:#FEF2F2; }
.variant-btn.has-promo.active { background:#EF4444; border-color:#EF4444; color:white; }

.prod-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; }
.prod-price-wrap {}
.prod-original { font-size:11px; color:var(--text-muted); text-decoration:line-through; margin-bottom:1px; line-height:1.2; }
.prod-discount { font-size:10.5px; font-weight:700; color:#EF4444; margin-left:4px; }
.prod-price { font-size:18px; font-weight:900; color:var(--green-950); line-height:1; }
.prod-price small { font-size:12px; font-weight:600; }
.prod-actions { display:flex; align-items:center; gap:7px; flex-shrink:0; }

/* Eye / view-detail button — identical design to add-to-cart */
.btn-view-detail {
  width:40px; height:40px; border-radius:12px;
  background:var(--green-950); border:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:15px; color:white; transition:.25s; flex-shrink:0;
}
.btn-view-detail:hover { background:var(--amber-500); transform:scale(1.06); }

.add-to-cart { width:40px; height:40px; border-radius:12px; background:var(--green-950); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; color:white; transition:.25s; flex-shrink:0; }
.add-to-cart:hover { background:var(--amber-500); transform:scale(1.06); }
.add-to-cart.added { background:var(--amber-500); animation:popIn .3s; }
@keyframes popIn { 0%{transform:scale(.8)} 60%{transform:scale(1.2)} 100%{transform:scale(1)} }
.no-results { grid-column:1/-1; text-align:center; padding:80px 24px; color:var(--text-muted); }
.no-results i { font-size:48px; margin-bottom:16px; opacity:.25; display:block; }

/* Pagination */
#productsPagination { margin-top:32px; }
.pagination { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.page-btn { width:40px; height:40px; border-radius:10px; border:1.5px solid var(--gray-200); background:white; font-size:13px; font-weight:700; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; font-family:var(--font); }
.page-btn:hover:not(:disabled) { border-color:var(--amber-500); color:var(--amber-500); }
.page-btn.active { background:var(--green-950); border-color:var(--green-950); color:white; }
.page-btn:disabled { opacity:.35; cursor:default; }
.page-info { font-size:12px; font-weight:600; color:var(--text-muted); margin-left:8px; }

/* ===== WHY SECTION ===== */
.why-section { padding:80px 0; background:white; }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:900px) { .why-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px) { .why-grid { grid-template-columns:1fr; } }
.why-card { padding:28px 24px; border-radius:var(--radius-md); background:var(--off-white); border:1.5px solid var(--gray-200); transition:.25s; }
.why-card:hover { border-color:var(--amber-500); background:white; box-shadow:var(--shadow-sm); transform:translateY(-3px); }
.why-icon { width:52px; height:52px; border-radius:14px; background:linear-gradient(145deg,var(--amber-500),var(--green-800)); display:flex; align-items:center; justify-content:center; font-size:22px; color:white; margin-bottom:16px; box-shadow:0 6px 16px rgba(61,181,74,.3); }
.why-card h3 { font-size:15px; font-weight:800; color:var(--green-950); margin-bottom:8px; }
.why-card p { font-size:13.5px; color:var(--text-muted); line-height:1.65; }

/* ===== CONTACT SECTION ===== */
.contact-section { padding:48px 0; background:white; border-bottom:1px solid var(--gray-200); }
.contact-wrap { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:stretch; }
@media(max-width:768px) { .contact-wrap { grid-template-columns:1fr; gap:40px; } }
.contact-info { display:flex; flex-direction:column; background:white; border-radius:var(--radius-lg); padding:32px 28px; border:1.5px solid var(--gray-200); box-shadow:var(--shadow-sm); }
.contact-rows { display:flex; flex-direction:column; gap:4px; }
.contact-row { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--gray-200); }
.contact-row:last-child { border-bottom:none; }
.contact-row > i { width:40px; height:40px; background:var(--gray-100); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--amber-500); flex-shrink:0; }
.contact-row strong { display:block; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); margin-bottom:2px; }
.contact-row span { font-size:14px; color:var(--text-dark); font-weight:500; }
.contact-map { margin-top:20px; border-radius:var(--radius-md); overflow:hidden; flex:1; min-height:160px; border:1.5px solid var(--gray-200); }
.contact-map iframe { width:100%; height:100%; border:none; display:block; }
.contact-form-card { background:white; border-radius:var(--radius-lg); padding:36px 32px; display:flex; flex-direction:column; border:1.5px solid var(--gray-200); box-shadow:var(--shadow-sm); }
.contact-form-card h3 { font-size:20px; font-weight:800; color:var(--green-950); margin-bottom:24px; }
.contact-form-card form { display:flex; flex-direction:column; flex:1; }
.contact-form-card form .field:last-of-type { flex:1; display:flex; flex-direction:column; }
.contact-form-card form .field:last-of-type textarea { flex:1; resize:none; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:480px) { .form-row { grid-template-columns:1fr; } }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label { font-size:11px; font-weight:700; color:var(--text-muted); letter-spacing:.6px; text-transform:uppercase; }
.field input, .field select, .field textarea { padding:11px 14px; border:1.5px solid var(--gray-300); border-radius:10px; font-family:var(--font); font-size:14px; color:var(--text-dark); background:var(--off-white); transition:.2s; outline:none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--amber-500); background:white; }
.field textarea { resize:vertical; min-height:86px; }

/* ===== FOOTER ===== */
.footer { background:#08122E; color:rgba(255,255,255,.55); }
.footer-top { padding:60px 0 40px; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; }
@media(max-width:900px) { .footer-top { grid-template-columns:1fr 1fr; } }
@media(max-width:560px) { .footer-top { grid-template-columns:1fr; } }
.footer-about p { font-size:13px; line-height:1.7; max-width:260px; margin-top:12px; }
.footer-social { display:flex; gap:10px; margin-top:16px; }
.footer-social a { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); transition:.22s; }
.footer-social a svg { width:19px; height:19px; display:block; }
.footer-social a:hover { background:#1877F2; border-color:#1877F2; transform:translateY(-2px); }
.footer-col h4 { font-size:11px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; color:white; margin-bottom:16px; }
.footer-col ul { display:flex; flex-direction:column; gap:10px; }
.footer-col ul li, .footer-col ul li a { font-size:13px; color:rgba(255,255,255,.45); transition:.2s; }
.footer-col ul li a:hover { color:var(--amber-500); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.06); padding:20px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; }

/* ===== CART DRAWER ===== */
.cart-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:3000; opacity:0; visibility:hidden; transition:.3s; backdrop-filter:blur(3px); }
.cart-overlay.open { opacity:1; visibility:visible; }
.cart-drawer { position:fixed; top:0; right:-440px; width:440px; max-width:100vw; height:100vh; background:white; z-index:3100; display:flex; flex-direction:column; transition:.38s cubic-bezier(.4,0,.2,1); box-shadow:var(--shadow-lg); }
.cart-drawer.open { right:0; }
.cart-drawer-header { padding:22px 24px; border-bottom:1.5px solid var(--gray-200); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.cart-drawer-header h3 { font-size:18px; font-weight:800; color:var(--green-950); }
.cart-item-count { font-size:12px; color:var(--text-muted); font-weight:500; display:block; margin-top:2px; }
.cart-close-btn { width:36px; height:36px; border:none; background:var(--off-white); border-radius:10px; cursor:pointer; font-size:17px; color:var(--text-muted); display:flex; align-items:center; justify-content:center; transition:.2s; }
.cart-close-btn:hover { background:var(--gray-200); }
.cart-items-list { flex:1; overflow-y:auto; padding:16px 20px; }
.cart-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; height:100%; padding:40px 24px; color:var(--text-muted); text-align:center; }
.cart-empty i { font-size:52px; opacity:.18; }
.cart-empty p { font-size:15px; font-weight:600; }

.cart-item { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--gray-100); }
.cart-item:last-child { border-bottom:none; }
.cart-item-img { width:72px; height:72px; border-radius:12px; background-size:cover; background-position:center; flex-shrink:0; background-color:var(--gray-200); }
.cart-item-info { flex:1; min-width:0; }
.cart-item-name { font-size:14px; font-weight:700; color:var(--green-950); margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-item-size { font-size:12px; color:var(--text-muted); margin-bottom:10px; }
.cart-item-bottom { display:flex; align-items:center; justify-content:space-between; }
.qty-ctrl { display:flex; align-items:center; border:1.5px solid var(--gray-200); border-radius:8px; overflow:hidden; }
.qty-btn { width:30px; height:30px; border:none; background:var(--off-white); cursor:pointer; font-size:15px; color:var(--text-dark); display:flex; align-items:center; justify-content:center; transition:.15s; font-weight:700; font-family:var(--font); }
.qty-btn:hover { background:var(--gray-200); }
.qty-num { width:34px; text-align:center; font-size:13px; font-weight:800; color:var(--green-950); border:none; outline:none; background:white; font-family:var(--font); }
.cart-item-price { font-size:15px; font-weight:800; color:var(--green-950); }
.cart-item-remove { background:none; border:none; cursor:pointer; color:var(--gray-300); font-size:15px; transition:.2s; padding:4px; margin-left:6px; }
.cart-item-remove:hover { color:#EF4444; }

.cart-drawer-footer { padding:20px 24px; border-top:1.5px solid var(--gray-200); flex-shrink:0; }
.cart-totals { margin-bottom:16px; }
.cart-total-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; font-size:13.5px; }
.cart-total-row span:first-child { color:var(--text-muted); }
.cart-total-row span:last-child { font-weight:600; color:var(--text-dark); }
.cart-total-row.total { border-top:1.5px solid var(--gray-200); margin-top:6px; padding-top:12px; }
.cart-total-row.total span { font-size:17px; font-weight:900; color:var(--green-950); }
.cart-free { color:var(--amber-500) !important; font-weight:700 !important; }
.checkout-btn { width:100%; margin-bottom:10px; justify-content:center; }
.btn-ghost-sm { width:100%; background:none; border:none; cursor:pointer; font-size:13px; color:var(--text-muted); font-family:var(--font); font-weight:600; padding:8px; transition:.2s; }
.btn-ghost-sm:hover { color:var(--text-dark); }

/* ===== PRODUCT MODAL ===== */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.62); z-index:4000; opacity:0; visibility:hidden; transition:.3s; backdrop-filter:blur(5px); }
.modal-overlay.open { opacity:1; visibility:visible; }

.product-modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-46%) scale(.96); z-index:4100; background:white; border-radius:24px; width:min(920px,94vw); max-height:92vh; overflow:hidden; display:flex; flex-direction:column; opacity:0; visibility:hidden; transition:all .38s cubic-bezier(.4,0,.2,1); box-shadow:0 32px 80px rgba(13,36,97,.28); }
.product-modal.open { opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }

.modal-close { position:absolute; top:16px; right:16px; z-index:10; width:38px; height:38px; border:none; background:rgba(255,255,255,.92); border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:17px; color:var(--text-dark); box-shadow:var(--shadow-sm); transition:.2s; font-family:var(--font); }
.modal-close:hover { background:var(--gray-100); transform:scale(1.06); }

.modal-inner { display:grid; grid-template-columns:1fr 1.15fr; height:100%; overflow:hidden; }
@media(max-width:680px) {
  /* Product modal → full-height bottom sheet (same pattern as checkout modal).
     Use !important on layout props because the 768px block comes later in the file
     and would otherwise override border-radius / height on phones ≤680px. */
  .product-modal {
    top:auto !important; left:0 !important; right:0 !important; bottom:0 !important;
    width:100% !important;
    height:calc(92vh + env(safe-area-inset-bottom,0px)) !important;
    max-height:calc(92vh + env(safe-area-inset-bottom,0px)) !important;
    border-radius:24px 24px 0 0 !important;
    padding-bottom:env(safe-area-inset-bottom,0px);
    transform:translateY(100%) !important;
    transition:transform .38s cubic-bezier(.4,0,.2,1), opacity .38s, visibility .38s !important;
  }
  .product-modal.open { transform:translateY(0) !important; }
  /* Switch inner from grid → flex column; only modal-inner scrolls (not modal-info) */
  .modal-inner {
    display:flex; flex-direction:column;
    flex:1; min-height:0;
    overflow-y:auto; overscroll-behavior:contain;
  }
  .modal-img-panel { flex-shrink:0; }   /* image keeps its height, never shrinks */
  .modal-info { overflow-y:visible; }   /* parent (modal-inner) is the scroll container */
  .modal-features { flex-wrap:wrap; }
}

/* Modal left — image panel */
.modal-img-panel { position:relative; background-size:cover; background-position:center; min-height:420px; }
@media(max-width:680px) { .modal-img-panel { min-height:220px; } }
.modal-img-panel::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom, transparent 40%, rgba(13,36,97,.55)); }
.modal-img-badge { position:absolute; top:16px; left:16px; z-index:2; padding:5px 12px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.modal-cat-pill { position:absolute; bottom:20px; left:20px; z-index:2; display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(8px); padding:7px 14px; border-radius:40px; color:white; font-size:12px; font-weight:700; letter-spacing:.5px; }
.modal-cat-pill i { color:var(--amber-500); font-size:12px; }

/* Modal right — info panel */
.modal-info { padding:32px 32px 28px; overflow-y:auto; display:flex; flex-direction:column; gap:0; }
@media(max-width:680px) { .modal-info { padding:24px 20px; } }

.modal-header { margin-bottom:10px; }
.modal-title { font-size:clamp(20px,3vw,26px); font-weight:800; color:var(--green-950); line-height:1.2; font-family:'Playfair Display', Georgia, serif; }

.modal-desc { font-size:13.5px; color:var(--text-muted); line-height:1.75; margin-bottom:20px; }

/* Feature chips */
.modal-features { display:flex; flex-wrap:nowrap; gap:8px; margin-bottom:22px; padding-bottom:22px; border-bottom:1.5px solid var(--gray-100); }
.feat-chip { display:flex; align-items:center; gap:7px; background:var(--off-white); border:1px solid var(--gray-200); padding:6px 12px; border-radius:20px; font-size:11.5px; font-weight:600; color:var(--text-dark); white-space:nowrap; }
.feat-chip i { color:var(--amber-500); font-size:12px; }

/* Variant selector */
.modal-variants-label { font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px; }
.modal-variants { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:20px; }
.modal-variant-btn { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 14px; border:2px solid var(--gray-200); border-radius:10px; background:var(--off-white); cursor:pointer; transition:.2s; font-family:var(--font); min-width:80px; }
.modal-variant-btn:hover { border-color:var(--green-950); background:white; }
.modal-variant-btn.active { border-color:var(--green-950); background:var(--green-950); }
.modal-variant-btn.has-promo { border-color:#FCA5A5; }
.modal-variant-btn.has-promo:hover { border-color:#EF4444; background:#FFF5F5; }
.modal-variant-btn.has-promo.active { border-color:#EF4444; background:#EF4444; }
.mv-size { font-size:12px; font-weight:700; color:var(--text-dark); }
.modal-variant-btn.active .mv-size,
.modal-variant-btn.has-promo.active .mv-size { color:white; }
.mv-price { font-size:12px; font-weight:800; color:var(--amber-600); }
.modal-variant-btn.active .mv-price { color:rgba(255,255,255,.85); }
.modal-variant-btn.has-promo.active .mv-price { color:rgba(255,255,255,.85); }
.mv-orig { font-size:10px; color:var(--text-muted); text-decoration:line-through; }
.modal-variant-btn.active .mv-orig,
.modal-variant-btn.has-promo.active .mv-orig { color:rgba(255,255,255,.55); text-decoration:line-through; }

/* Price + CTA */
.modal-price-row { display:flex; align-items:center; gap:16px; margin-bottom:14px; padding:16px 20px; background:var(--off-white); border-radius:14px; border:1.5px solid var(--gray-200); }
.modal-price-block { flex:1; }
.modal-price-original { font-size:12px; color:var(--text-muted); text-decoration:line-through; margin-bottom:1px; display:flex; align-items:center; gap:8px; }
.modal-price-discount { font-size:11px; font-weight:800; color:white; background:#EF4444; padding:2px 7px; border-radius:10px; }
.modal-price-main { font-size:28px; font-weight:900; color:var(--green-950); line-height:1; }
.modal-price-main small { font-size:15px; font-weight:700; }
.modal-add-btn { display:flex; align-items:center; gap:8px; background:var(--amber-500); color:white; border:none; padding:13px 22px; border-radius:12px; font-size:14px; font-weight:700; cursor:pointer; font-family:var(--font); transition:.25s; white-space:nowrap; }
.modal-add-btn:hover { background:var(--amber-600); transform:translateY(-2px); box-shadow:var(--shadow-accent); }
.modal-add-btn.added { background:var(--green-950); }

/* Warranty badge inside the product modal (slightly larger) */
.modal-info .prod-warranty { margin-bottom:16px; font-size:12.5px; padding:6px 14px; }

/* ── Caractéristiques block ── */
.modal-chars {
  position: relative;
  flex-shrink: 0;   /* .modal-info is a flex column — never let the card get squashed */
  margin-bottom: 20px;
  padding: 16px;
  background: linear-gradient(180deg, var(--white), var(--off-white));
  border-radius: 14px;
  border: 1.5px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}
.modal-chars::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, var(--green-800), var(--amber-500));
}
.modal-chars-hd {
  font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--green-950); display: flex; align-items: center; gap: 9px;
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--gray-300);
}
.modal-chars-hd-icon {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(145deg, var(--amber-500), var(--green-800));
  color: white; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(13,36,97,.2);
}
.modal-chars-grid { display: flex; flex-direction: column; gap: 3px; }
.char-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; line-height: 1.45;
  padding: 6px 8px; border-radius: 10px;
  transition: background .2s, transform .2s;
}
.char-row:nth-child(even) { background: rgba(238,242,255,.65); }
.char-row:hover { background: var(--gray-100); transform: translateX(3px); }
.char-icon {
  width: 27px; height: 27px; border-radius: 9px; flex-shrink: 0;
  background: var(--white); border: 1px solid var(--gray-200);
  color: var(--green-600); font-size: 11.5px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(13,36,97,.07);
  transition: .25s;
}
.char-row:hover .char-icon {
  background: linear-gradient(145deg, var(--amber-500), var(--green-800));
  border-color: transparent; color: white;
}
.char-label { font-weight: 700; color: var(--text-dark); flex-shrink: 0; font-size: 12px; }
.char-dots { flex: 1; min-width: 14px; border-bottom: 2px dotted var(--gray-300); transform: translateY(4px); }
.char-val { color: var(--green-800); font-weight: 600; text-align: right; }
.char-bullet .char-icon { color: var(--amber-500); }
.char-bullet .char-val { flex: 1; text-align: left; color: var(--text-muted); font-weight: 500; }

/* Mobile: compact chars */
@media (max-width: 680px) {
  .modal-chars { padding: 13px 12px; }
  .modal-chars-hd { font-size: 10px; margin-bottom: 9px; padding-bottom: 8px; }
  .modal-chars-hd-icon { width: 23px; height: 23px; font-size: 10px; }
  .char-row { font-size: 12px; gap: 8px; padding: 5px 6px; }
  .char-icon { width: 24px; height: 24px; font-size: 10.5px; border-radius: 8px; }
  .char-label { font-size: 11.5px; }
}

/* Services inclus block */
.modal-services {
  margin-top:6px;
  padding-top:16px;
  border-top:1.5px solid var(--gray-100);
}
.modal-services-title {
  font-size:11px; font-weight:800; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--amber-600);
  display:flex; align-items:center; gap:6px;
  margin-bottom:12px;
}
.modal-services-title i { font-size:13px; }

/* Perks row */
.modal-perks { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.modal-perk { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-muted); font-weight:500; }
.modal-perk i { color:var(--amber-500); width:16px; text-align:center; flex-shrink:0; }

/* ===== CHECKOUT MODAL ===== */
.co-overlay { position:fixed; inset:0; background:rgba(10,15,40,.55); backdrop-filter:blur(4px); z-index:4000; opacity:0; visibility:hidden; transition:.35s; }
.co-overlay.open { opacity:1; visibility:visible; }

.co-modal { position:fixed; inset:0; margin:auto; width:min(580px,96vw); height:fit-content; max-height:94vh; background:white; border-radius:24px; z-index:4100; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:scale(.97); transition:.38s cubic-bezier(.4,0,.2,1); }
.co-modal.open { opacity:1; visibility:visible; transform:scale(1); }

/* Progress */
.co-progress { height:4px; background:var(--gray-200); flex-shrink:0; }
.co-progress-bar { height:100%; background:linear-gradient(90deg,var(--green-800),var(--amber-500)); border-radius:0 4px 4px 0; transition:width .5s ease; }

/* Steps */
.co-steps { display:flex; align-items:center; justify-content:center; gap:0; padding:10px 28px 12px; flex-shrink:0; }
.co-step { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--gray-300); letter-spacing:.3px; transition:.3s; }
.co-step span { width:24px; height:24px; border-radius:50%; background:var(--gray-200); color:var(--text-muted); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; transition:.3s; }
.co-step.active { color:var(--green-950); }
.co-step.active span { background:var(--green-950); color:white; }
.co-step.done { color:var(--amber-500); }
.co-step.done span { background:var(--amber-500); color:white; }
.co-step-sep { width:32px; height:2px; background:var(--gray-200); margin:0 4px; border-radius:2px; }

/* Top bar */
.co-topbar { display:flex; justify-content:flex-end; padding:10px 16px 0; flex-shrink:0; }
.co-close { width:32px; height:32px; border:none; background:var(--gray-100); border-radius:50%; cursor:pointer; font-size:14px; color:var(--text-muted); display:flex; align-items:center; justify-content:center; transition:.2s; }
.co-close:hover { background:var(--gray-200); }

/* Panel */
.co-panel { display:flex; flex-direction:column; flex:1; min-height:0; }
.co-panel-body { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:6px 28px 12px; }
.co-panel-footer { flex-shrink:0; padding:14px 28px 20px; border-top:1.5px solid var(--gray-200); background:white; }
.co-panel-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; padding-bottom:12px; border-bottom:1.5px solid var(--gray-200); }
.co-panel-icon { width:40px; height:40px; background:linear-gradient(145deg,var(--green-950),var(--green-800)); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:18px; color:white; flex-shrink:0; }
.co-panel-title { font-size:18px; font-weight:800; color:var(--green-950); line-height:1.2; }
.co-panel-sub { font-size:12.5px; color:var(--amber-500); font-weight:600; margin-top:2px; }

/* Form */
.co-form { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.co-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.co-field { display:flex; flex-direction:column; gap:4px; }
.co-field label { font-size:11.5px; font-weight:700; color:var(--text-dark); letter-spacing:.3px; }
.co-field label span { color:#EF4444; }
.co-field label .co-optional { color:var(--text-muted); font-weight:500; }
.co-field input, .co-field select, .co-field textarea { border:1.5px solid var(--gray-200); border-radius:10px; padding:9px 12px; font-size:13px; font-family:var(--font); color:var(--text-dark); background:var(--off-white); transition:.2s; outline:none; width:100%; }
.co-field input:focus, .co-field select:focus, .co-field textarea:focus { border-color:var(--green-600); background:white; box-shadow:0 0 0 3px rgba(58,91,181,.1); }
.co-field input.error, .co-field select.error { border-color:#EF4444; background:#FFF5F5; }
.co-field textarea { resize:vertical; min-height:48px; }
.co-err { font-size:11px; color:#EF4444; font-weight:600; min-height:14px; }

/* Phone */
.co-phone-wrap { display:flex; border:1.5px solid var(--gray-200); border-radius:10px; overflow:hidden; background:var(--off-white); transition:.2s; }
.co-phone-wrap:focus-within { border-color:var(--green-600); background:white; box-shadow:0 0 0 3px rgba(58,91,181,.1); }
.co-phone-prefix { display:flex; align-items:center; gap:6px; padding:0 12px; font-size:13px; font-weight:700; color:var(--text-dark); background:var(--gray-100); border-right:1.5px solid var(--gray-200); white-space:nowrap; flex-shrink:0; }
.co-phone-wrap input { border:none; border-radius:0; background:transparent; box-shadow:none; padding:9px 12px; }
.co-phone-wrap input:focus { border:none; box-shadow:none; }

/* Recap address */
.co-recap-addr { display:flex; align-items:flex-start; gap:10px; background:var(--gray-100); border-radius:12px; padding:10px 14px; margin-bottom:12px; }
.co-recap-addr i { color:var(--amber-500); margin-top:2px; flex-shrink:0; }
.co-recap-addr-text { font-size:13px; color:var(--text-dark); line-height:1.6; }
.co-recap-addr-text strong { font-weight:800; display:block; }

/* Items list */
.co-items-list { display:flex; flex-direction:column; gap:0; margin-bottom:14px; max-height:160px; overflow-y:auto; overscroll-behavior:contain; border:1.5px solid var(--gray-200); border-radius:12px; padding:4px 12px; }
.co-item { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--gray-200); }
.co-item:last-child { border-bottom:none; }
.co-item-img { width:44px; height:44px; border-radius:8px; object-fit:cover; background:var(--gray-100); flex-shrink:0; }
.co-item-info { flex:1; min-width:0; }
.co-item-name { font-size:12.5px; font-weight:700; color:var(--text-dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.co-item-meta { font-size:11px; color:var(--text-muted); margin-top:1px; }
.co-item-price { font-size:13px; font-weight:800; color:var(--green-950); white-space:nowrap; }

/* Totals */
.co-totals { background:var(--off-white); border-radius:12px; padding:12px 14px; margin-bottom:12px; border:1.5px solid var(--gray-200); }
.co-total-row { display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--text-muted); padding:5px 0; }
.co-free { color:var(--amber-500); font-weight:700; font-size:13px; display:flex; align-items:center; gap:5px; }
.co-total-grand { padding-top:12px; margin-top:8px; border-top:2px solid var(--gray-200); }
.co-total-grand span { font-size:17px; font-weight:900; color:var(--green-950); }

/* Payment */
.co-payment { border:1.5px dashed var(--amber-500); border-radius:12px; padding:10px 14px; margin-bottom:16px; background:rgba(61,181,74,.05); }
.co-payment-badge { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:800; color:var(--amber-600); margin-bottom:6px; }
.co-payment-note { font-size:12px; color:var(--text-muted); line-height:1.6; }

/* Buttons */
.co-next-btn { width:100%; padding:12px; font-size:14px; border-radius:12px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:8px; }
.co-btn-row { display:flex; gap:12px; align-items:stretch; }
.co-btn-row .co-next-btn { flex:1; width:auto; }
.co-btn-row .co-back-btn { flex:1; justify-content:center; }
.co-back-btn { flex-shrink:0; font-size:13px; color:var(--text-muted); background:none; border:1.5px solid var(--gray-200); border-radius:10px; padding:10px 18px; cursor:pointer; font-family:var(--font); font-weight:600; display:flex; align-items:center; gap:6px; transition:.2s; white-space:nowrap; box-sizing:border-box; }
.co-back-btn:hover { border-color:var(--green-600); color:var(--green-950); }

/* Success */
.co-success-panel { flex-direction:column; }
.co-success-body { display:flex; flex-direction:column; align-items:center; text-align:center; padding:6px 28px 8px; }
.co-success-icon { font-size:52px; color:var(--amber-500); margin-bottom:8px; animation:successPop .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes successPop { 0%{transform:scale(0);opacity:0} 100%{transform:scale(1);opacity:1} }
.co-success-title { font-size:22px; font-weight:900; color:var(--green-950); font-family:'Playfair Display',Georgia,serif; margin-bottom:6px; }
.co-success-sub { font-size:13px; color:var(--text-muted); line-height:1.6; max-width:400px; margin-bottom:12px; }
.co-order-num { background:linear-gradient(135deg,var(--green-950),var(--green-800)); color:rgba(255,255,255,.7); border-radius:14px; padding:12px 24px; font-size:11.5px; font-weight:700; letter-spacing:.5px; margin-bottom:12px; width:100%; text-transform:uppercase; }
.co-order-num span { display:block; font-size:20px; font-weight:900; letter-spacing:3px; margin-top:4px; color:white; }
.co-success-details { font-size:12.5px; color:var(--text-muted); background:var(--gray-100); border-radius:12px; padding:12px 16px; margin-bottom:0; text-align:left; width:100%; line-height:1.9; border:1.5px solid var(--gray-200); }
.co-success-details strong { color:var(--green-950); font-weight:700; }
.co-success-details b { color:var(--green-950); font-weight:700; }
.co-success-actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; width:100%; }
.co-btn-row .co-whatsapp-btn { flex-shrink:0; }
.co-whatsapp-btn { background:#25D366; color:white; border:none; display:flex; align-items:center; gap:8px; font-size:14px; padding:13px 22px; border-radius:12px; font-weight:700; transition:.25s; }
.co-whatsapp-btn:hover { background:#1ebe5d; transform:translateY(-2px); }

/* Mobile */
@media(max-width:768px) {
  .co-modal {
    inset:auto 0 0 0; margin:0; width:100%;
    height:calc(92vh + env(safe-area-inset-bottom,0px));
    max-height:calc(92vh + env(safe-area-inset-bottom,0px));
    border-radius:24px 24px 0 0;
    transform:translateY(100%);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .co-modal.open { transform:translateY(0); opacity:1; visibility:visible; }
  .co-panel-body { padding:6px 18px 10px; }
  .co-panel-footer { padding:12px 18px calc(16px + env(safe-area-inset-bottom,0px)); }
  .co-row { grid-template-columns:1fr; }
  .co-steps { padding:10px 16px 8px; }
  .co-step { font-size:11px; gap:6px; }
  .co-step-sep { width:24px; }
}
/* Checkout steps: hide text labels on small phones, show circles only */
@media(max-width:480px) {
  .co-step { font-size:0; gap:0; }
  .co-step span { font-size:11px; }
  .co-step-sep { width:20px; }
}

/* ===== TOAST ===== */
.toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--green-950); color:white; padding:12px 22px; border-radius:40px; font-size:13.5px; font-weight:600; opacity:0; pointer-events:none; transition:.3s; z-index:9999; white-space:nowrap; box-shadow:var(--shadow-md); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== WHATSAPP FAB ===== */
.whatsapp-fab { position:fixed; bottom:28px; right:28px; width:56px; height:56px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; color:white; z-index:2000; box-shadow:0 8px 24px rgba(37,211,102,.45); transition:.25s; }
.whatsapp-fab svg { width:30px; height:30px; display:block; }

/* =============================================
   RESPONSIVE — TABLET (≤ 900px)
   ============================================= */
@media(max-width:900px) {
  .container { padding:0 20px; }

  /* Why section */
  .why-section { padding:48px 0; }

  /* Footer already handled above — just reduce padding */
  .footer-top { padding:40px 0 28px; gap:24px; }
}

/* =============================================
   RESPONSIVE — TABLET (≤ 768px)
   ============================================= */
@media(max-width:768px) {
  .container { padding:0 16px; }

  /* ---- Ticker ---- */
  .ticker-item { padding:0 28px; font-size:10.5px; }

  /* ---- Hero ---- */
  .hero { min-height:540px; }
  .slide-content { padding:0 20px; }
  .slide-desc { font-size:14px; margin-bottom:24px; max-width:100%; }
  .slide-actions { gap:10px; }
  .btn { padding:12px 22px; font-size:13px; }
  .slider-controls { left:20px; right:20px; bottom:20px; }
  .slider-arrow-btn { width:38px; height:38px; }

  /* ---- Stats: 2-column grid (guaranteed 2 per row) ---- */
  .stats-strip { display:grid; grid-template-columns:1fr 1fr; }
  .stat { flex:unset; min-width:unset; border-right:none; border-bottom:1px solid var(--gray-200); padding:18px 16px; }
  .stat:nth-child(odd) { border-right:1px solid var(--gray-200); }
  .stat:nth-last-child(-n+2) { border-bottom:none; }

  /* ---- Sections padding ---- */
  .hscroll-section,
  .categories-section,
  .products-section,
  .why-section,
  .contact-section { padding:32px 0; }

  /* ---- Section headers ---- */
  .sec-header { margin-bottom:20px; }
  /* Force carousel headers to stay on one line: title grows, controls fixed right */
  .hscroll-header {
    flex-wrap:nowrap;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
  }
  .hscroll-header > div:first-child { flex:1; min-width:0; }

  /* ---- Horizontal carousels: promo, new, categories ---- */
  .hscroll-track {
    display:flex !important;
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:14px;
    padding:4px 0 12px;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .hscroll-track::-webkit-scrollbar { display:none; }
  .hscroll-track .prod-card {
    min-width:75vw;
    max-width:75vw;
    flex-shrink:0;
    scroll-snap-align:start;
  }
  .hscroll-voir { display:none; }
  .hscroll-arrow {
    display:flex; align-items:center; justify-content:center;
    width:34px; height:34px;
    border:1.5px solid var(--gray-300);
    border-radius:50%;
    background:white;
    cursor:pointer;
    font-size:13px;
    color:var(--text-dark);
    transition:.2s;
    flex-shrink:0;
  }
  .hscroll-arrow:hover { border-color:var(--green-950); color:var(--green-950); }
  .hscroll-indicator {
    display:inline-block;
    font-size:13px; font-weight:800;
    color:var(--text-dark);
    min-width:38px; text-align:center;
  }
  .categories-grid {
    display:flex !important;
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:14px;
    padding:4px 0 12px;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .categories-grid::-webkit-scrollbar { display:none; }
  .categories-grid .cat-card {
    min-width:66vw;
    max-width:66vw;
    flex-shrink:0;
    scroll-snap-align:start;
  }

  /* ---- Category cards ---- */
  .cat-img-wrap { height:120px; }
  .cat-body { padding:14px 14px 14px; }

  /* ---- Products layout ---- */
  .products-top { flex-direction:row; align-items:center; justify-content:space-between; margin-bottom:20px; }
  .products-layout { grid-template-columns:1fr; }
  .desktop-filters { display:none; }
  .mobile-filter-btn { display:flex; }

  /* ---- Product card ---- */
  .prod-img { height:180px; }

  /* ---- Why section ---- */
  .why-grid { gap:14px; }
  .why-card { padding:22px 18px; }

  /* ---- Contact ---- */
  .contact-form-card { padding:24px 20px; }
  .contact-info { padding:24px 20px; }
  .contact-map { min-height:140px; }

  /* ---- Footer ---- */
  .footer-top { padding:36px 0 24px; gap:24px; }
  .footer-bottom { flex-direction:column; text-align:center; gap:6px; font-size:11px; }

  /* ---- Cart drawer ---- */
  .cart-drawer { width:100vw; right:-100vw; }

  /* ---- Modal (680–768px: still centered, just slightly less rounded & taller) ---- */
  .product-modal { border-radius:20px; max-height:96vh; }
  .modal-info { padding:20px 18px; }
  .modal-price-row { flex-direction:column; align-items:flex-start; gap:12px; }
  .modal-add-btn { width:100%; justify-content:center; }
  .modal-perks { grid-template-columns:1fr; gap:6px; }

  /* ---- Pagination ---- */
  #productsPagination { margin-top:20px; }

  /* ---- Toast ---- */
  .toast { white-space:normal; text-align:center; width:90vw; font-size:13px; }
}

/* =============================================
   RESPONSIVE — MOBILE (≤ 480px)
   ============================================= */
@media(max-width:480px) {
  .container { padding:0 14px; }

  /* ---- Preloader ---- */
  .preloader-brand { font-size:28px; }
  .preloader-bar { width:160px; }

  /* ---- Hero ---- */
  .hero { min-height:480px; }
  .slide-title { margin-bottom:10px; }
  .slide-desc { display:none; }
  .slide-actions { flex-direction:column; gap:8px; width:100%; }
  .slide-actions .btn { width:100%; justify-content:center; }
  .slider-controls { left:14px; right:14px; bottom:14px; }
  .slider-count { display:none; }

  /* ---- Stats: internal layout → icon on left, val+lbl stacked on right ---- */
  .stat {
    padding:12px 14px;
    display:grid;
    grid-template-columns:38px 1fr;
    grid-template-rows:auto auto;
    gap:0 10px;
    align-items:center;
  }
  .stat-icon { grid-row:1 / 3; width:38px; height:38px; font-size:16px; border-radius:10px; align-self:center; flex-shrink:0; }
  .stat-val { grid-column:2; font-size:20px; line-height:1.1; }
  .stat-lbl { grid-column:2; font-size:10px; line-height:1.3; }

  /* ---- Sections ---- */
  .hscroll-section,
  .categories-section,
  .products-section,
  .why-section,
  .contact-section { padding:24px 0; }
  .sec-header { margin-bottom:14px; }
  .hscroll-header { margin-bottom:14px; gap:8px; }
  .sec-title { font-size:clamp(20px,6vw,26px); }

  /* ---- Why section ---- */
  .why-card { padding:18px 16px; }
  .why-icon { width:44px; height:44px; font-size:19px; margin-bottom:12px; }
  .why-card h3 { font-size:14px; }
  .why-card p { font-size:12.5px; }

  /* ---- Category cards ---- */
  .cat-img-wrap { height:100px; }
  .cat-body { padding:12px 12px 12px; }
  .cat-name { font-size:13px; margin-bottom:4px; }
  .cat-desc { display:none; }
  .cat-count { font-size:10px; padding:3px 8px; }

  /* ---- Product card ---- */
  .prod-img { height:155px; }
  .prod-body { padding:12px 12px 12px; }
  .prod-name { font-size:13px; }
  .prod-desc { -webkit-line-clamp:2; font-size:11.5px; }
  .prod-price { font-size:16px; }
  .add-to-cart { width:36px; height:36px; font-size:14px; border-radius:10px; }
  .variant-btn { padding:3px 7px; font-size:10px; }

  /* ---- Filter tabs ---- */
  .filter-tab { padding:7px 13px; font-size:11.5px; }

  /* ---- Contact ---- */
  .contact-wrap { gap:20px; }
  .contact-form-card { padding:18px 14px; }
  .contact-info { padding:18px 14px; }
  .contact-form-card h3 { font-size:17px; margin-bottom:14px; }
  .contact-row > i { width:34px; height:34px; font-size:14px; }
  .contact-row span { font-size:13px; }

  /* ---- Footer ---- */
  .footer-top { padding:28px 0 20px; gap:20px; }
  .footer-about p { max-width:100%; }
  .footer-col h4 { margin-bottom:10px; }
  .footer-col ul { gap:8px; }

  /* ---- Cart drawer ---- */
  .cart-drawer-header { padding:18px 16px; }
  .cart-items-list { padding:12px 14px; }
  .cart-drawer-footer { padding:16px; }
  .cart-item-img { width:60px; height:60px; }
  .cart-item-name { font-size:13px; }

  /* ---- Modal ---- */
  .modal-img-panel { min-height:160px; }
  .modal-info { padding:18px 14px; }
  .modal-title { font-size:18px; }
  .modal-desc { font-size:12.5px; margin-bottom:14px; }
  .modal-variant-btn { min-width:68px; padding:6px 10px; }
  .modal-price-main { font-size:24px; }
  .modal-add-btn { padding:12px 16px; font-size:13px; }
  .feat-chip { font-size:10.5px; padding:5px 10px; }

  /* ---- Pagination ---- */
  .page-btn { width:36px; height:36px; font-size:12px; border-radius:8px; }
  .page-info { display:none; }

  /* ---- WhatsApp FAB ---- */
  .whatsapp-fab { width:48px; height:48px; font-size:24px; bottom:16px; right:16px; }

  /* ---- Contact ---- */
  .contact-wrap { gap:16px; }
  .contact-map { min-height:120px; }

  /* ---- Footer ---- */
  .footer-col ul li, .footer-col ul li a { font-size:12px; }
}

/* =============================================
   RESPONSIVE — TINY SCREENS (≤ 360px)
   ============================================= */
@media(max-width:360px) {
  .container { padding:0 12px; }
  .hero { min-height:420px; }
  .slide-title { font-size:28px; }
  .btn { padding:10px 18px; font-size:12px; }

  /* Stats: tighter sizes on very small phones, keep same grid layout */
  .stat { padding:10px 8px; gap:0 8px; grid-template-columns:32px 1fr; }
  .stat-icon { width:32px; height:32px; font-size:13px; }
  .stat-val { font-size:17px; }
  .stat-lbl { font-size:9px; }

  /* Product card narrower */
  .prod-img { height:140px; }
  .prod-name { font-size:12px; }
  .prod-price { font-size:14px; }

  /* Checkout */
  .co-steps { gap:0; padding:10px 10px 8px; }
  .co-step { font-size:10px; gap:5px; }
  .co-step-sep { width:20px; }
}
.whatsapp-fab:hover { transform:scale(1.1); box-shadow:0 12px 32px rgba(37,211,102,.55); }

/* ╔══════════════════════════════════════════════════════════╗
   ║   MOBILE POLISH — COMPREHENSIVE PASS                    ║
   ║   Added at end for highest cascade priority             ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ── Scroll anchor offset so links land below fixed header ── */
html { scroll-padding-top: calc(var(--ticker-h) + var(--header-h) + 8px); }

/* ── Remove iOS/Android tap flash on every interactive element ── */
@media (max-width: 900px) {
  a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }
}

/* ── Reduce header height slightly on mobile ── */
@media (max-width: 768px) { :root { --header-h: 62px; } }

/* ╔══════════╗
   ║  TICKER  ║
   ╚══════════╝ */
@media (max-width: 360px) {
  .ticker-item { padding: 0 18px; font-size: 9.5px; letter-spacing: .8px; }
}

/* ╔════════╗
   ║  HERO  ║
   ╚════════╝ */
@media (max-width: 480px) {
  .hero { min-height: 520px; }
  .slide-content { padding: 0 18px; }
  .slider-controls { bottom: 16px; left: 18px; right: 18px; }
}
@media (max-width: 360px) {
  .slide-content { padding: 0 14px; }
  .slide-title { font-size: clamp(24px, 8vw, 32px); }
  .slide-actions { gap: 6px; }
}

/* ╔═════════════════════════════════╗
   ║  iOS INPUT ZOOM FIX             ║
   ║  iOS zooms any input < 16px     ║
   ╚═════════════════════════════════╝ */
@media (max-width: 768px) {
  .field input, .field select, .field textarea,
  .co-field input, .co-field select, .co-field textarea {
    font-size: 16px !important;
  }
  /* Touch-friendly minimum heights */
  .field input, .field select { min-height: 48px; }
  .field textarea { min-height: 88px; }
}

/* ╔══════════════════════════════════════════════╗
   ║  PRODUCT CARDS — 2-COLUMN GRID (≤ 768px)    ║
   ║  Cards ~160px wide: tighten, hide desc       ║
   ╚══════════════════════════════════════════════╝ */
@media (max-width: 768px) {
  .products-grid .prod-img       { height: 155px; }
  .products-grid .prod-body      { padding: 10px 10px 12px; }
  .products-grid .prod-cat-label { font-size: 9px; margin-bottom: 3px; }
  .products-grid .prod-name      { font-size: 12.5px; margin-bottom: 4px; }
  .products-grid .prod-desc      { display: none; }
  .products-grid .prod-variants  { gap: 3px; margin-bottom: 8px; }
  .products-grid .variant-btn    { padding: 3px 6px; font-size: 9.5px; }
  .products-grid .prod-original  { font-size: 10px; }
  .products-grid .prod-discount  { font-size: 9.5px; }
  .products-grid .prod-price      { font-size: 15px; }
  .products-grid .prod-footer     { gap: 5px; }
  .products-grid .prod-actions    { gap: 4px; }
  .products-grid .add-to-cart     { width: 32px; height: 32px; font-size: 12px; border-radius: 8px; }
  .products-grid .btn-view-detail { width: 32px; height: 32px; font-size: 12px; border-radius: 8px; }
}

/* ╔══════════════════════════════════════════════╗
   ║  PRODUCT CARDS — 1-COLUMN GRID (≤ 480px)    ║
   ║  Cards full-width ~346px: restore desc       ║
   ╚══════════════════════════════════════════════╝ */
@media (max-width: 480px) {
  .products-grid .prod-img       { height: 210px; }
  .products-grid .prod-body      { padding: 14px 14px 14px; }
  .products-grid .prod-cat-label { font-size: 10px; margin-bottom: 4px; }
  .products-grid .prod-name      { font-size: 15px; margin-bottom: 5px; }
  .products-grid .prod-desc      { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; }
  .products-grid .prod-variants  { gap: 5px; margin-bottom: 10px; }
  .products-grid .variant-btn    { padding: 4px 9px; font-size: 10.5px; }
  .products-grid .prod-original  { font-size: 11px; }
  .products-grid .prod-discount  { font-size: 10.5px; }
  .products-grid .prod-price      { font-size: 18px; }
  .products-grid .prod-footer     { gap: 8px; }
  .products-grid .prod-actions    { gap: 6px; }
  .products-grid .add-to-cart     { width: 40px; height: 40px; font-size: 15px; border-radius: 11px; }
  .products-grid .btn-view-detail { width: 40px; height: 40px; font-size: 15px; border-radius: 11px; }
}

/* ╔══════════════════════════════════════════════╗
   ║  CAROUSEL PRODUCT CARDS (promo / nouveautés) ║
   ║  Cards 75vw (~280px): wider, show desc       ║
   ╚══════════════════════════════════════════════╝ */
@media (max-width: 768px) {
  .hscroll-track .prod-img       { height: 185px; }
  .hscroll-track .prod-body      { padding: 14px 16px 16px; }
  .hscroll-track .prod-cat-label { font-size: 10px; }
  .hscroll-track .prod-name      { font-size: 14px; margin-bottom: 5px; }
  .hscroll-track .prod-desc      { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: unset; font-size: 12px; }
  .hscroll-track .prod-price      { font-size: 17px; }
  .hscroll-track .prod-actions    { gap: 6px; }
  .hscroll-track .add-to-cart     { width: 38px; height: 38px; font-size: 15px; }
  .hscroll-track .btn-view-detail { width: 38px; height: 38px; font-size: 14px; border-radius: 10px; }
  /* Better carousel scroll on mobile */
  .hscroll-track { overscroll-behavior-x: contain; }
}
@media (max-width: 480px) {
  .hscroll-track .prod-img  { height: 165px; }
  .hscroll-track .prod-body { padding: 12px 14px 14px; }
  .hscroll-track .prod-name { font-size: 13.5px; }
}

/* ╔═════════════════════════════════╗
   ║  CAROUSEL CATEGORY CARDS        ║
   ║  Cards 66vw (~247px wide)       ║
   ╚═════════════════════════════════╝ */
@media (max-width: 768px) {
  .categories-grid .cat-img-wrap { height: 145px; }
  .categories-grid .cat-body     { padding: 28px 16px 18px; }
  .categories-grid .cat-name     { font-size: 14px; }
  .categories-grid .cat-desc     { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; }
  .categories-grid .cat-count    { font-size: 11px; }
  .categories-grid               { overscroll-behavior-x: contain; }
}
@media (max-width: 480px) {
  .categories-grid .cat-img-wrap { height: 120px; }
  .categories-grid .cat-body     { padding: 22px 14px 14px; }
  .categories-grid .cat-name     { font-size: 13px; }
}

/* ╔═══════════════════════════════════════╗
   ║  FILTER BAR + MOBILE FILTER BUTTON    ║
   ╚═══════════════════════════════════════╝ */
@media (max-width: 768px) {
  .mobile-filter-btn { padding: 11px 20px; font-size: 13px; min-height: 44px; }
  .products-top { gap: 12px; }
}

/* ╔══════════════════╗
   ║  PAGINATION       ║
   ╚══════════════════╝ */
@media (max-width: 480px) {
  .page-btn { width: 40px; height: 40px; min-height: 40px; }
  .pagination { gap: 6px; }
}

/* ╔══════════════════════╗
   ║  CONTACT / DEVIS     ║
   ╚══════════════════════╝ */
@media (max-width: 768px) {
  .contact-map        { min-height: 190px; border-radius: var(--radius-md); }
  .contact-map iframe { min-height: 190px; }
  /* Large touch-friendly submit button */
  #dvSubmitBtn { min-height: 52px; font-size: 15px; padding: 14px 24px; }
}
@media (max-width: 480px) {
  .contact-map        { min-height: 150px; }
  .contact-map iframe { min-height: 150px; }
  .contact-form-card h3 { font-size: 18px; margin-bottom: 16px; }
  .contact-row { padding: 12px 0; }
  .contact-row span { font-size: 13.5px; }
  .field label { font-size: 11.5px; }
}

/* ╔══════════════════════════════════════════╗
   ║  FOOTER — 2-col at ≤560px                ║
   ║  Brand always spans full width            ║
   ╚══════════════════════════════════════════╝ */
@media (max-width: 560px) {
  .footer-top   { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .footer-about { grid-column: 1 / -1; }
  .footer-about p { font-size: 12.5px; line-height: 1.65; }
  .footer-col h4 { font-size: 10.5px; }
  .footer-col ul li a { font-size: 12.5px; }
}
@media (max-width: 380px) {
  .footer-top   { grid-template-columns: 1fr; }
  .footer-about { grid-column: unset; }
}
.footer-bottom { gap: 6px; }

/* ╔══════════════════╗
   ║  CART DRAWER      ║
   ╚══════════════════╝ */
@media (max-width: 768px) {
  .cart-drawer-header { padding: 20px 20px 16px; }
  .cart-drawer-header h3 { font-size: 17px; }
  .cart-item-count { font-size: 12px; }
  .cart-items-list { padding: 12px 18px; }
  .cart-drawer-footer {
    padding: 16px 20px;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
  }
  .checkout-btn { padding: 14px; font-size: 14px; min-height: 52px; }
  .cart-item     { gap: 12px; padding: 12px 0; }
  .cart-item-img { width: 64px; height: 64px; border-radius: 10px; }
  .cart-item-name { font-size: 13.5px; }
  .cart-item-size { font-size: 11.5px; }
  .cart-item-price { font-size: 14px; }
  .qty-btn { width: 32px; height: 32px; }
  .qty-num { width: 30px; }
  .cart-total-row { font-size: 13px; }
  .cart-total-row.total span { font-size: 16px; }
}

/* ╔══════════════════════╗
   ║  CHECKOUT MODAL       ║
   ╚══════════════════════╝ */
@media (max-width: 768px) {
  /* Panel head */
  .co-panel-icon  { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }
  .co-panel-title { font-size: 17px; }
  .co-panel-sub   { font-size: 12px; }
  .co-panel-head  { gap: 10px; margin-bottom: 12px; padding-bottom: 10px; }
  /* Touch-friendly fields */
  .co-field label { font-size: 11px; }
  .co-field input, .co-field select, .co-field textarea { min-height: 46px; }
  /* Bigger CTA buttons */
  .co-next-btn { padding: 14px; font-size: 14px; min-height: 52px; border-radius: 14px; }
  .co-back-btn { padding: 12px 16px; font-size: 13px; }
  /* Recap items */
  .co-items-list { max-height: 120px; }
  /* Totals */
  .co-total-grand span { font-size: 16px; }
  /* Payment box */
  .co-payment        { padding: 10px 12px; margin-bottom: 14px; }
  .co-payment-badge  { font-size: 12.5px; }
  .co-payment-note   { font-size: 11.5px; }
  /* Success panel */
  .co-success-body  { padding: 4px 20px 8px; }
  .co-success-icon  { font-size: 46px; margin-bottom: 6px; }
  .co-success-title { font-size: 20px; }
  .co-success-sub   { font-size: 12.5px; }
  .co-order-num     { padding: 10px 20px; }
  .co-order-num span { font-size: 18px; letter-spacing: 2px; }
}

/* ╔══════════════════════════════╗
   ║  PRODUCT MODAL (bottom sheet) ║
   ╚══════════════════════════════╝ */
@media (max-width: 680px) {
  /* Typography */
  .modal-title { font-size: 20px; line-height: 1.25; }
  .modal-desc  { font-size: 13px; line-height: 1.7; margin-bottom: 16px; }
  /* Feature chips — wrap & smaller */
  .feat-chip { font-size: 11px; padding: 5px 10px; gap: 5px; }
  /* Variant grid */
  .modal-variants    { grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 14px; }
  .modal-variant-btn { padding: 8px 10px; min-width: unset; }
  .mv-size           { font-size: 12px; }
  .mv-price          { font-size: 12px; }
  .mv-orig           { font-size: 10px; }
  /* Price row */
  .modal-price-row   { gap: 10px; padding: 14px 16px; border-radius: 12px; }
  .modal-price-main  { font-size: 26px; }
  /* CTA button */
  .modal-add-btn { padding: 13px 18px; font-size: 14px; min-height: 50px; border-radius: 12px; }
  /* Perks — 2 columns on mobile */
  .modal-perks { grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
  .modal-perk  { font-size: 11.5px; gap: 6px; }
}
@media (max-width: 480px) {
  .modal-perks { grid-template-columns: 1fr 1fr; gap: 5px; }
  .modal-perk  { font-size: 11px; }
  .modal-close { width: 34px; height: 34px; font-size: 15px; top: 12px; right: 12px; }
}

/* ╔══════════════════════╗
   ║  FILTER BOTTOM SHEET ║
   ╚══════════════════════╝ */
@media (max-width: 480px) {
  .filter-sheet-body   { padding: 16px 16px; gap: 20px; }
  .filter-sheet-footer { padding: 14px 16px; }
  .filter-sheet-apply  { padding: 12px 16px; font-size: 13px; min-height: 48px; }
  .filter-sheet-reset  { padding: 10px 16px; font-size: 13px; }
  .sheet-cat-chip { padding: 8px 14px; font-size: 12.5px; }
  .sheet-price-chip { padding: 12px 10px; font-size: 12.5px; }
}

/* ╔══════════════╗
   ║  TOAST       ║
   ╚══════════════╝ */
@media (max-width: 768px) {
  /* Sit above WhatsApp FAB (FAB is 48px tall at 16px from bottom = 64px) */
  .toast { bottom: 80px; max-width: 88vw; }
}

/* ╔════════════════╗
   ║  SECTION TAGS  ║
   ╚════════════════╝ */
@media (max-width: 480px) {
  .sec-tag       { font-size: 10px; letter-spacing: 2px; }
  .sec-tag span  { width: 20px; }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║   FINAL MOBILE EXCELLENCE PASS                          ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ── Global rendering & overflow ── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html, body { max-width: 100%; overflow-x: hidden; }

/* ── Product modal open: lock background scroll ── */
body.modal-open { overflow: hidden; }

/* ── Animation performance hints ── */
.product-modal, .co-modal, .cart-drawer, .filter-sheet {
  will-change: transform;
}
.slide-bg { will-change: transform; }

/* ── Image background placeholder ── */
.prod-img, .cat-img-wrap { background-color: var(--gray-100); }

/* ╔═══════════════════════════════════════════╗
   ║  TOUCH DEVICE ACTIVE STATES               ║
   ║  @media(hover:none) = real touch devices  ║
   ╚═══════════════════════════════════════════╝ */
@media (hover: none) and (pointer: coarse) {
  .prod-card:active    { transform: scale(.97); transition: transform .12s; box-shadow: none; }
  .cat-card:active     { transform: scale(.97); transition: transform .12s; }
  .btn-primary:active  { transform: scale(.96); }
  .btn-outline:active  { background: rgba(255,255,255,.15); }
  .add-to-cart:active  { transform: scale(.93); background: var(--amber-500); }
  .hscroll-arrow:active      { background: var(--gray-200) !important; transform: scale(.92); }
  .btn-view-detail:active    { background: var(--amber-500); transform: scale(.93); }
  .filter-tab:active         { background: var(--gray-100); }
  .page-btn:active      { background: var(--navy-50); }
  .co-next-btn:active   { transform: scale(.98); }
  .cart-btn:active      { background: rgba(255,255,255,.25); }
  .checkout-btn:active  { transform: scale(.98); }
}

/* ╔══════════════════════╗
   ║  HEADER / LOGO        ║
   ╚══════════════════════╝ */
@media (max-width: 480px) {
  .logo-text { font-size: 18px; }
  .logo-sub  { font-size: 8.5px; letter-spacing: 1.2px; }
  .logo-icon { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }
  .header-actions { gap: 8px; }
  .cart-btn { width: 40px; height: 40px; border-radius: 10px; font-size: 17px; }
}
@media (max-width: 360px) {
  .logo-text { font-size: 16px; }
  .logo-icon { width: 32px; height: 32px; font-size: 14px; }
}

/* ╔══════════════════════╗
   ║  MOBILE MENU          ║
   ╚══════════════════════╝ */
@media (max-width: 900px) {
  /* Slightly larger tap targets for menu links */
  .header-nav.open a {
    font-size: 20px;
    padding: 16px 28px;
    letter-spacing: 1.5px;
    font-weight: 700;
    opacity: .9;
    transition: opacity .15s, background .15s;
  }
  .header-nav.open a:active { opacity: 1; background: rgba(255,255,255,.06); }
  /* Close button larger touch target */
  .mobile-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.08); }
}

/* ╔══════════════════╗
   ║  HERO CAROUSEL   ║
   ╚══════════════════╝ */
@media (max-width: 768px) {
  /* Slide content: push up slightly so it clears the fixed header visually */
  .slide-content { padding-top: 20px; padding-bottom: 80px; }
  /* Smaller progress bars so they fit */
  .slider-progress-bar        { width: 28px; }
  .slider-progress-bar.active { width: 44px; }
  .slider-count .now { font-size: 18px; }
  /* Smaller arrow buttons */
  .slider-arrow-btn { width: 38px; height: 38px; font-size: 13px; border-radius: 10px; }
  /* Hero min-height with more room */
  .hero { min-height: calc(100dvh - var(--ticker-h)); }
}
@media (max-width: 480px) {
  .slide-content { padding-top: 16px; padding-bottom: 72px; }
  .slide-title { line-height: 1.08; }
  .slide-tag { margin-bottom: 14px; }
  .slide-tag-text { font-size: 9.5px; letter-spacing: 2px; }
  .slider-arrow-btn { width: 36px; height: 36px; border-radius: 8px; }
}

/* ╔═══════════════════════════╗
   ║  STATS STRIP POLISH       ║
   ╚═══════════════════════════╝ */
@media (max-width: 768px) {
  /* Subtle hover/press state per cell */
  .stat { cursor: default; transition: background .15s; }
  .stat:active { background: var(--gray-100); }
}

/* ╔════════════════════════════════╗
   ║  CAROUSEL HEADERS (all three)  ║
   ╚════════════════════════════════╝ */
@media (max-width: 480px) {
  /* On very small screens, shrink the indicator slightly */
  .hscroll-indicator { font-size: 12px; min-width: 32px; }
  .hscroll-arrow { width: 30px; height: 30px; font-size: 12px; }
}

/* ╔═══════════════════════════╗
   ║  PRODUCT CARD POLISH       ║
   ╚═══════════════════════════╝ */
/* Rounded corners in grid */
@media (max-width: 768px) {
  .products-grid .prod-card { border-radius: 14px; }
  /* Better no-image background */
  .products-grid .prod-img  { background-position: center; }
  /* No hover zoom on mobile — reset desktop transform */
  .products-grid .prod-card:hover { transform: none; box-shadow: var(--shadow-sm); }
}
@media (max-width: 480px) {
  .products-grid .prod-card { border-radius: 16px; }
}

/* Carousel card corners */
@media (max-width: 768px) {
  .hscroll-track .prod-card   { border-radius: 16px; }
  .categories-grid .cat-card  { border-radius: 16px; }
  /* No hover on carousel either */
  .hscroll-track .prod-card:hover    { transform: none; }
  .categories-grid .cat-card:hover   { transform: none; }
}

/* ╔═════════════════════════════════╗
   ║  CATEGORY CARD — ICON BADGE     ║
   ╚═════════════════════════════════╝ */
@media (max-width: 768px) {
  .cat-icon-badge {
    width: 36px; height: 36px;
    bottom: -16px; left: 16px;
    font-size: 16px; border-radius: 10px;
    border-width: 2.5px;
  }
}

/* ╔══════════════════╗
   ║  PRODUCTS GRID   ║
   ╚══════════════════╝ */
@media (max-width: 768px) {
  /* Top bar: title left, filter button right — never wrap */
  .products-top { flex-wrap: nowrap; }
  .products-top .sec-header { flex-shrink: 1; min-width: 0; }
  /* Better products-grid gap on mobile */
  .products-grid { gap: 14px; }
}
@media (max-width: 480px) {
  .products-grid { gap: 16px; }
}

/* No-results on mobile */
@media (max-width: 480px) {
  .no-results { padding: 60px 20px; }
  .no-results i { font-size: 40px; }
  .no-results p { font-size: 14px; }
}

/* ╔══════════════════════╗
   ║  CONTACT / DEVIS     ║
   ╚══════════════════════╝ */
@media (max-width: 768px) {
  /* More breathing room in form card */
  .contact-form-card { display: flex; flex-direction: column; gap: 0; }
  /* Field spacing */
  .field { margin-bottom: 14px; }
  /* Input/select touch targets */
  .field input, .field select, .field textarea {
    border-radius: 10px;
    padding: 12px 14px;
    min-height: 48px;
    line-height: 1.5;
  }
  .field textarea { min-height: 88px; resize: none; }
  /* Submit button full-width */
  #dvSubmitBtn {
    display: flex;
    justify-content: center;
    gap: 10px;
    border-radius: 14px;
    margin-top: 4px;
  }
}
@media (max-width: 480px) {
  /* Contact info row icons */
  .contact-row > i {
    width: 36px; height: 36px; font-size: 14px; border-radius: 9px; flex-shrink: 0;
  }
  .contact-row strong { font-size: 10px; }
  /* Reduce map height on tiny screens */
  .contact-map, .contact-map iframe { min-height: 130px; }
}

/* ╔══════════════╗
   ║  FOOTER      ║
   ╚══════════════╝ */
@media (max-width: 560px) {
  .footer-col ul { gap: 10px; }
  .footer-col ul li { line-height: 1.5; }
  /* Footer logo */
  .footer-about .logo { margin-bottom: 10px; display: inline-flex; }
  .footer-about .logo-text { color: white; font-size: 17px; }
}
@media (max-width: 480px) {
  .footer-bottom { padding: 16px 0; font-size: 11px; }
  .footer-bottom p { line-height: 1.6; }
}

/* ╔══════════════════╗
   ║  CART DRAWER     ║
   ╚══════════════════╝ */
@media (max-width: 768px) {
  /* Cart empty state */
  .cart-empty { padding: 56px 24px; gap: 12px; }
  .cart-empty i { font-size: 44px; }
  .cart-empty p { font-size: 14px; font-weight: 600; }
  /* Cart items */
  .cart-item-bottom { flex-wrap: nowrap; }
  .cart-item-price { white-space: nowrap; }
  /* Totals */
  .cart-total-row { font-size: 13px; padding: 6px 0; }
  .cart-total-row.total { padding-top: 12px; margin-top: 4px; }
  .cart-total-row.total span { font-size: 17px; }
}

/* ╔══════════════════════╗
   ║  CHECKOUT MODAL      ║
   ╚══════════════════════╝ */
@media (max-width: 768px) {
  /* Step indicator */
  .co-step span { width: 22px; height: 22px; font-size: 10.5px; }
  .co-step-sep  { width: 20px; margin: 0 2px; }
  /* Phone prefix */
  .co-phone-prefix { font-size: 12.5px; padding: 0 10px; }
  /* Form rows: already 1-col from earlier rule */
  .co-form { gap: 8px; margin-bottom: 14px; }
  /* Totals */
  .co-total-row { font-size: 13px; }
  /* WhatsApp button on success */
  .co-whatsapp-btn { padding: 12px 18px; font-size: 13.5px; }
  /* Co-panel-footer safe area */
  .co-panel-footer {
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
  }
}
@media (max-width: 480px) {
  /* Recap items */
  .co-item-img   { width: 40px; height: 40px; border-radius: 6px; }
  .co-item-name  { font-size: 12px; }
  .co-item-meta  { font-size: 10.5px; }
  .co-item-price { font-size: 12.5px; }
}

/* ╔══════════════════════════════════════╗
   ║  PRODUCT MODAL (bottom sheet)        ║
   ╚══════════════════════════════════════╝ */
@media (max-width: 680px) {
  /* Better cat pill */
  .modal-cat-pill { padding: 5px 12px; font-size: 11.5px; bottom: 14px; left: 14px; }
  /* Scrollbar hide on modal-inner */
  .modal-inner { scrollbar-width: none; -ms-overflow-style: none; }
  .modal-inner::-webkit-scrollbar { display: none; }
}

/* ╔═══════════════════════╗
   ║  PRELOADER             ║
   ╚═══════════════════════╝ */
@media (max-width: 480px) {
  .preloader-inner { gap: 12px; }
  .preloader-icon  { width: 52px; height: 52px; font-size: 26px; border-radius: 14px; }
  .preloader-brand { font-size: 30px; }
  .preloader-bar   { width: 160px; }
}
@media (max-width: 360px) {
  .preloader-icon  { width: 44px; height: 44px; font-size: 22px; }
  .preloader-brand { font-size: 24px; }
}

/* ╔═══════════════════════╗
   ║  TICKER                ║
   ╚═══════════════════════╝ */
@media (max-width: 480px) {
  .ticker-item i { font-size: 10px; }
}

/* ╔══════════════════════════════════════╗
   ║  PRODUCT DETAIL PAGE (produit.php)   ║
   ╚══════════════════════════════════════╝ */
/* No hero here: keep the header solid from the top. */
.pd-page .header { background:rgba(255,255,255,.97); box-shadow:var(--shadow-sm); border-bottom:1px solid var(--gray-200); }
.pd-page .header .logo-text { background:linear-gradient(135deg,var(--green-950) 20%,var(--amber-500) 70%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.pd-page .header .logo-sub { color:var(--text-muted); }
.pd-page .header .header-nav a { color:var(--text-muted); }
.pd-page .header .header-nav a:hover { color:var(--text-dark); }
.pd-page .header .cart-btn { background:var(--gray-100); color:var(--text-dark); }
.pd-page .header .cart-btn:hover { background:var(--amber-500); color:#fff; }
.pd-page .header .hamburger span { background:var(--green-950); }

.pd-main { padding-top:calc(var(--ticker-h) + var(--header-h) + 24px); padding-bottom:60px; min-height:70vh; }

.pd-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:9px; font-size:12.5px; color:var(--text-muted); margin-bottom:22px; }
.pd-breadcrumb a { color:var(--text-muted); font-weight:600; transition:.2s; }
.pd-breadcrumb a:hover { color:var(--amber-600); }
.pd-breadcrumb i { font-size:9px; opacity:.6; }
.pd-breadcrumb span[aria-current] { color:var(--green-950); font-weight:700; }

.pd-layout { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }

.pd-gallery { position:sticky; top:calc(var(--ticker-h) + var(--header-h) + 20px); }
.pd-image { position:relative; aspect-ratio:1/1; border-radius:22px; background:var(--gray-100) center/cover no-repeat; border:1.5px solid var(--gray-200); box-shadow:var(--shadow-md); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.pd-image-ph { font-size:80px; color:var(--gray-300); }
.pd-badge { position:absolute; top:18px; left:18px; padding:6px 16px; border-radius:30px; font-size:12px; font-weight:800; letter-spacing:.5px; color:#fff; box-shadow:var(--shadow-sm); }
.pd-badge.badge-promo { background:#EF4444; }
.pd-badge.badge-new   { background:var(--amber-500); }

.pd-cat { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--green-600); margin-bottom:10px; }
.pd-title { font-family:'Playfair Display',Georgia,serif; font-size:clamp(26px,3.6vw,40px); font-weight:900; color:var(--green-950); line-height:1.15; margin-bottom:12px; }
.pd-info .prod-warranty { margin-bottom:16px; font-size:12.5px; padding:6px 14px; }

.pd-price { margin:6px 0 22px; }
.pd-price .prod-price { font-size:34px; font-weight:900; color:var(--green-950); line-height:1; }
.pd-price .prod-price small { font-size:18px; font-weight:800; }
.pd-price .prod-original { font-size:15px; color:var(--text-muted); text-decoration:line-through; margin-bottom:4px; display:flex; align-items:center; gap:10px; }
.pd-price .prod-discount { font-size:12px; font-weight:800; color:#fff; background:#EF4444; padding:2px 9px; border-radius:20px; text-decoration:none; }

.pd-variants-label { font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px; }
.pd-variants { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.pd-variants .variant-btn { padding:11px 16px; font-size:13.5px; }

.pd-actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px; }
.pd-add { flex:1; min-width:200px; justify-content:center; font-size:15px; padding:15px 24px; }
.pd-add.added { background:var(--amber-600); }
.pd-wa { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 22px; border-radius:14px; font-size:14px; font-weight:700; color:var(--green-950); background:var(--gray-100); border:1.5px solid var(--gray-200); transition:.2s; }
.pd-wa:hover { background:#25D366; color:#fff; border-color:#25D366; }

.pd-details { margin-top:48px; display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
.pd-section-title { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:800; color:var(--green-950); font-family:'Playfair Display',Georgia,serif; margin-bottom:16px; }
.pd-section-title i { font-size:15px; color:var(--amber-500); }
.pd-desc { font-size:14.5px; line-height:1.8; color:var(--text-muted); }
.pd-details .modal-chars { margin-bottom:0; }

.pd-related { margin-top:56px; }
.pd-related-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.pd-rel-card { display:flex; flex-direction:column; background:#fff; border:1.5px solid var(--gray-200); border-radius:16px; overflow:hidden; transition:.25s; }
.pd-rel-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--gray-300); }
.pd-rel-img { position:relative; aspect-ratio:4/3; background:var(--gray-100) center/cover no-repeat; display:flex; align-items:center; justify-content:center; color:var(--gray-300); font-size:34px; }
.pd-rel-badge { position:absolute; top:10px; left:10px; padding:3px 10px; border-radius:20px; font-size:10px; font-weight:800; color:#fff; }
.pd-rel-badge.badge-promo { background:#EF4444; }
.pd-rel-badge.badge-new { background:var(--amber-500); }
.pd-rel-body { padding:14px 16px 16px; }
.pd-rel-name { font-size:14px; font-weight:700; color:var(--green-950); line-height:1.3; margin-bottom:7px; font-family:'Playfair Display',Georgia,serif; }
.pd-rel-price { font-size:16px; font-weight:900; color:var(--green-950); }
.pd-rel-old { font-size:12px; color:var(--text-muted); text-decoration:line-through; font-weight:600; margin-right:6px; }

.pd-notfound { text-align:center; padding:70px 20px; }
.pd-notfound i { font-size:60px; color:var(--gray-300); margin-bottom:18px; }
.pd-notfound h1 { font-family:'Playfair Display',Georgia,serif; font-size:30px; color:var(--green-950); margin-bottom:10px; }
.pd-notfound p { color:var(--text-muted); margin-bottom:24px; }

/* Link from the quick-view modal to the full product page */
.modal-fullpage-link { display:flex; align-items:center; justify-content:center; gap:9px; margin-top:14px; padding:12px 18px; border-radius:12px; font-size:13.5px; font-weight:700; color:var(--green-600); background:var(--off-white); border:1.5px dashed var(--gray-300); text-decoration:none; transition:.2s; }
.modal-fullpage-link:hover { color:var(--amber-600); border-color:var(--amber-500); background:rgba(61,181,74,.06); }

@media (max-width:900px) {
  .pd-related-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .pd-layout { grid-template-columns:1fr; gap:26px; }
  .pd-gallery { position:static; }
  .pd-details { grid-template-columns:1fr; gap:26px; margin-top:36px; }
  .pd-main { padding-top:calc(var(--ticker-h) + var(--header-h) + 16px); }
}
@media (max-width:480px) {
  .pd-image { border-radius:16px; }
  .pd-price .prod-price { font-size:28px; }
  .pd-add { min-width:100%; }
  .pd-wa { width:100%; }
  .pd-related-grid { gap:12px; }
}