/* EverMed Pharmacy — redesign demo by Velare. Mobile-first, app-like.
   Brand ratio: gray ~75% content, green 15-20% titles/highlights, blue ~5% accent. */
:root{
  --gray:#58595b; --gray-ink:#3f4042; --gray-soft:#7b7c7e; --line:#e7e8ea;
  --green:#558d3f; --green-d:#467433; --green-soft:#eaf2e6;
  --blue:#3070b1; --blue-d:#265a8c; --blue-soft:#e9f1f8;
  --red:#d64545; --bg:#f5f6f7; --card:#ffffff; --shadow:0 2px 14px rgba(31,41,55,.07);
  --radius:16px; --maxw:460px; --nav-h:64px;
  --ff:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:#e9eaec;font-family:var(--ff);color:var(--gray);-webkit-font-smoothing:antialiased}
body{display:flex;justify-content:center}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}

/* phone frame on desktop, full-bleed on real mobile */
.app{position:relative;width:100%;max-width:var(--maxw);min-height:100vh;background:var(--bg);
     box-shadow:0 0 60px rgba(0,0,0,.14);overflow:hidden}
@media(min-width:520px){ body{padding:22px 0} .app{min-height:calc(100vh - 44px);border-radius:26px} }

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;padding:11px 14px}
.topbar .logo{height:37px;width:auto}
.topbar .tb-ic{margin-left:auto;display:flex;gap:16px;color:var(--gray)}
.topbar .tb-ic svg{width:23px;height:23px}
.topbar .cartwrap{position:relative}
.topbar .cbadge{position:absolute;top:-6px;right:-7px;background:var(--green);color:#fff;font-size:10px;
  font-weight:600;min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.topbar .cbadge[hidden]{display:none}
.menu-btn svg{width:24px;height:24px}

/* search */
.searchbar{padding:11px 14px 4px;background:#fff}
.searchbar .sb{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--line);
  border-radius:12px;padding:10px 13px;color:var(--gray-soft);font-size:14px}
.searchbar .sb svg{width:18px;height:18px;flex:none;color:var(--green)}

/* ---------- screens ---------- */
.screen{display:none;padding-bottom:calc(var(--nav-h) + 26px)}
.screen.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.section-h{display:flex;align-items:baseline;justify-content:space-between;padding:0 15px;margin:20px 0 12px}
.section-h h2{font-size:16.5px;font-weight:600;color:var(--gray-ink)}
.section-h .vall{font-size:12.5px;color:var(--green);font-weight:600}
.section-h .accent{color:var(--green)}

/* ---------- hero slider ---------- */
.hero{padding:13px 15px 2px}
.hero-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.hero-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;border-radius:var(--radius);overflow:hidden;position:relative;
  min-height:212px;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;color:#fff;
  background-size:cover;background-position:center;background-repeat:no-repeat;isolation:isolate}
.slide-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start}
/* couleur de secours (si l'image ne charge pas, texte reste lisible) + photo de fond */
.slide.s1{background-color:#25517d;
  background-image:url('https://images.pexels.com/photos/5910953/pexels-photo-5910953.jpeg?auto=compress&cs=tinysrgb&w=1200')}
.slide.s2{background-color:#3a6b2b;
  background-image:url('https://images.pexels.com/photos/3683074/pexels-photo-3683074.jpeg?auto=compress&cs=tinysrgb&w=1200')}
.slide.s3{background-color:#3c3d3f;
  background-image:url('https://images.pexels.com/photos/4021775/pexels-photo-4021775.jpeg?auto=compress&cs=tinysrgb&w=1200')}
/* scrim = dégradé de marque par-dessus la photo */
.slide-scrim{position:absolute;inset:0;z-index:1}
.slide.s1 .slide-scrim{background:
  linear-gradient(180deg,rgba(20,44,70,0) 8%,rgba(20,44,70,.30) 42%,rgba(18,40,66,.90) 100%),
  linear-gradient(105deg,rgba(48,112,177,.72) 0%,rgba(48,112,177,.10) 62%)}
.slide.s2 .slide-scrim{background:
  linear-gradient(180deg,rgba(30,54,20,0) 8%,rgba(35,60,24,.32) 42%,rgba(40,64,26,.90) 100%),
  linear-gradient(105deg,rgba(85,141,63,.74) 0%,rgba(85,141,63,.10) 62%)}
.slide.s3 .slide-scrim{background:
  linear-gradient(180deg,rgba(38,39,41,0) 8%,rgba(40,41,43,.34) 42%,rgba(30,31,33,.92) 100%),
  linear-gradient(105deg,rgba(88,89,91,.70) 0%,rgba(48,112,177,.28) 100%)}
.slide .eyebrow{position:relative;display:inline-flex;align-items:center;gap:8px;
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;opacity:.96;
  text-shadow:0 1px 6px rgba(0,0,0,.35);margin-bottom:6px}
.slide .eyebrow::before{content:"";width:16px;height:2px;border-radius:2px;background:currentColor;opacity:.85}
.slide.s1 .eyebrow{color:#bfe0ff}
.slide.s2 .eyebrow{color:#d6f0c6}
.slide.s3 .eyebrow{color:#dfe6ef}
.slide h3{font-size:23px;font-weight:800;line-height:1.14;letter-spacing:-.01em;margin:0 0 6px;max-width:88%;
  text-shadow:0 2px 12px rgba(0,0,0,.4)}
.slide p{font-size:12.5px;font-weight:500;opacity:.96;max-width:82%;line-height:1.42;
  text-shadow:0 1px 8px rgba(0,0,0,.42)}
.slide-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.slide .sb{font-size:10.5px;font-weight:600;letter-spacing:.01em;color:#fff;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.30);
  padding:5px 10px;border-radius:20px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.slide .shopnow{align-self:flex-start;margin-top:14px;display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:var(--gray-ink);font-weight:700;font-size:12.5px;padding:10px 18px;border-radius:24px;
  box-shadow:0 6px 18px rgba(0,0,0,.22)}
.slide .shopnow svg{width:15px;height:15px}
.slide.s1 .shopnow{color:#1c3e60}
.slide.s2 .shopnow{color:#33501f}
.slide .art{position:absolute;right:-26px;top:-26px;bottom:auto;width:130px;height:130px;z-index:1;
  border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.34),rgba(255,255,255,0) 68%);
  opacity:.9;pointer-events:none}
.dots{display:flex;gap:6px;justify-content:center;margin:10px 0 2px}
.dots i{width:6px;height:6px;border-radius:50%;background:#cfd2d6;transition:.2s}
.dots i.on{background:var(--green);width:17px;border-radius:4px}

/* ---------- brands strip ---------- */
.brands{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin-top:18px;overflow:hidden}
.brands .lbl{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--gray-soft);text-align:center;margin-bottom:11px;font-weight:600}
.brands-track{display:flex;gap:26px;align-items:center;width:max-content;animation:scroll 22s linear infinite}
.brands .b{font-weight:700;font-size:15px;color:var(--gray-soft);white-space:nowrap;opacity:.75}
.brands .b:nth-child(3n){color:var(--green)} .brands .b:nth-child(3n+1){color:var(--blue)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- category grid 2x4 ---------- */
.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 15px}
.catgrid .cell{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 6px 10px;
  text-align:center;box-shadow:var(--shadow)}
.catgrid .ci{width:44px;height:44px;margin:0 auto 7px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--green-soft)}
.catgrid .cell:nth-child(4n+2) .ci{background:var(--blue-soft)} .catgrid .cell:nth-child(4n) .ci{background:#eef0f1}
.catgrid .ci svg{width:24px;height:24px;color:var(--green)}
.catgrid .cell:nth-child(4n+2) .ci svg{color:var(--blue)} .catgrid .cell:nth-child(4n) .ci svg{color:var(--gray)}
.catgrid .cn{font-size:10.5px;font-weight:500;color:var(--gray-ink);line-height:1.22}

/* ---------- product cards (horizontal rail + grid) ---------- */
.rail{display:flex;gap:8px;overflow-x:auto;padding:0 15px 6px;scrollbar-width:none;scroll-snap-type:x mandatory}
.rail::-webkit-scrollbar{display:none}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 15px}
.pcard{flex:0 0 150px;scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow);position:relative;display:flex;flex-direction:column}
.pgrid .pcard{flex:auto}
.pcard .pimg{aspect-ratio:1;background:#fff;padding:4px;display:flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate}
.pcard .pimg img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
/* discount badge: VIVID solid red rounded square, "25%" over "OFF" (client: the old #d64545
   read as washed-out/see-through). Fully opaque #e01414, no shadow, no gradient. */
.pcard .disc{position:absolute;top:8px;left:8px;background:#e01414;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  padding:5px 7px;border-radius:8px;box-shadow:none}
.pcard .disc b{font-size:12px;font-weight:800;letter-spacing:.01em}
.pcard .disc span{font-size:7.5px;font-weight:700;letter-spacing:.09em;margin-top:1px}
.pcard .fav{position:absolute;top:7px;right:7px;width:30px;height:30px;border-radius:50%;background:#fff;
  box-shadow:0 1px 5px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;
  z-index:7;cursor:pointer;border:0;padding:0;-webkit-tap-highlight-color:transparent}
.pcard .fav svg{width:15px;height:15px;color:var(--gray-soft);pointer-events:none}
.pcard .fav.on svg{color:#e01414;fill:#e01414}   /* favourited = filled red heart */

/* product page: Save (favourite) button, right of the Back button */
.pp-fav{margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #e6e8ea;
  border-radius:22px;padding:7px 13px;color:var(--gray);font-size:13px;font-weight:600;font-family:inherit;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.pp-fav svg{width:17px;height:17px;color:var(--gray-soft);pointer-events:none}
.pp-fav.on{border-color:#f3c3c3;background:#fdf2f2;color:#e01414}
.pp-fav.on svg{color:#e01414;fill:#e01414}
.pcard .pinfo{padding:9px 11px 12px;display:flex;flex-direction:column;flex:1}
.pcard .pbrand{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--blue);font-weight:600;margin-bottom:2px}
.pcard .pname{font-size:11.5px;color:var(--gray-ink);line-height:1.3;font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:30px}
.pcard .prow{display:flex;align-items:baseline;gap:6px;margin-top:8px;flex-wrap:wrap}
.pcard .pnow{font-size:14px;font-weight:700;color:var(--green)}
.pcard .pold{font-size:11px;color:var(--red);text-decoration:line-through}
.pcard .padd{margin-top:9px;background:var(--green-soft);color:var(--green-d);font-weight:600;font-size:12px;
  border-radius:9px;padding:8px 0;display:flex;align-items:center;justify-content:center;gap:6px}
.pcard .padd svg{width:15px;height:15px}

/* ---------- connect banner ---------- */
.connect{margin:22px 15px 4px;border-radius:var(--radius);overflow:hidden;position:relative;
  background:linear-gradient(115deg,#2f6fb0 0%,#356f9e 60%,#4d8a38 100%);color:#fff;padding:19px 18px}
.connect h3{font-size:18px;font-weight:700;margin-bottom:4px}
.connect p{font-size:12.5px;opacity:.93;max-width:74%;line-height:1.45}
.connect .cbtns{display:flex;gap:10px;margin-top:14px}
.connect .cb{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  padding:9px 15px;border-radius:11px;font-size:12.5px;font-weight:600;backdrop-filter:blur(4px)}
.connect .cb.wa{background:#25d366;border-color:#25d366}
.connect .cb svg{width:17px;height:17px}
.connect .pharm{position:absolute;right:-8px;bottom:0;width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.12)}

/* trust chips */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px 15px 2px}
.trust .t{background:#fff;border:none;box-shadow:0 1px 8px rgba(31,41,55,.06);border-radius:14px;padding:14px 8px;text-align:center}
.trust .t svg{width:21px;height:21px;color:var(--green);margin:0 auto 5px}
.trust .t b{font-size:10.5px;font-weight:600;color:var(--gray-ink);display:block;line-height:1.25}

/* ---------- CATEGORY screen ---------- */
.cat-wrap{display:grid;grid-template-columns:88px 1fr;min-height:60vh}
.cat-side{background:#fff;border-right:1px solid var(--line)}
.cat-side button{width:100%;padding:15px 8px;font-size:10.5px;font-weight:500;color:var(--gray-soft);
  border-left:3px solid transparent;line-height:1.25;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.cat-side button svg{width:22px;height:22px}
.cat-side button.on{color:var(--green-d);background:var(--green-soft);border-left-color:var(--green);font-weight:600}
.cat-main{padding:15px 8px}
.cat-main .pgrid{padding:0;gap:8px}   /* cartes plus larges dans Category (demande client) */
.cat-main h3{font-size:15px;font-weight:600;color:var(--gray-ink);margin-bottom:3px}
.cat-main .sub{font-size:11.5px;color:var(--gray-soft);margin-bottom:14px}
.subgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.subgrid .s{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 11px;display:flex;
  align-items:center;gap:9px;font-size:11.5px;font-weight:500;color:var(--gray-ink);box-shadow:var(--shadow)}
.subgrid .s .d{width:34px;height:34px;border-radius:9px;background:var(--green-soft);flex:none;display:flex;align-items:center;justify-content:center}
.subgrid .s:nth-child(2n) .d{background:var(--blue-soft)}
.subgrid .s .d svg{width:19px;height:19px;color:var(--green)}
.subgrid .s:nth-child(2n) .d svg{color:var(--blue)}
.subgrid .s .ar{margin-left:auto;color:var(--gray-soft)}

/* ---------- PRODUCT PAGE ---------- */
.pp-back{display:flex;align-items:center;gap:8px;padding:12px 14px;font-size:13px;color:var(--gray);font-weight:500}
.pp-back svg{width:19px;height:19px}
.pp-gallery{background:#fff;padding:8px 0 4px}
.pp-main{position:relative;aspect-ratio:1;max-height:420px;margin:0 auto;padding:0;display:flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate}
.pp-main img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.pp-thumbs{display:flex;gap:8px;justify-content:center;padding:6px 14px 12px}
.pp-thumbs .th{width:46px;height:46px;border:1.5px solid var(--line);border-radius:9px;padding:4px;background:#fff}
.pp-thumbs .th.on{border-color:var(--green)}
.pp-thumbs .th img{width:100%;height:100%;object-fit:contain}
.pp-body{background:#fff;padding:16px 16px 6px;margin-top:8px}
.pp-title{font-size:19px;font-weight:600;color:var(--gray-ink);line-height:1.24}
.pp-brand{font-size:13px;margin-top:5px;color:var(--gray)}
.pp-brand b{color:var(--blue);font-weight:600}
.pp-pricerow{display:flex;align-items:center;gap:10px;margin-top:13px;flex-wrap:wrap}
.pp-now{font-size:19px;font-weight:700;color:var(--green)}
.pp-old{font-size:15px;color:var(--red);text-decoration:line-through;font-weight:500}
.pp-badge{background:var(--red);color:#fff;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:8px}
.pp-vat{font-size:11px;color:var(--gray-soft);margin-top:4px}
/* small share icon, top-right of the product image (client 4F) */
.pp-share-ic{position:absolute;top:10px;right:10px;z-index:3;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:50%;color:var(--gray);box-shadow:0 2px 8px rgba(31,41,55,.14)}
.pp-share-ic svg{width:19px;height:19px}
.pp-actions{margin-top:16px;display:flex;align-items:stretch;gap:10px}
.pp-actions .qty{margin:0;flex:none}
.pp-actions .btn-cart{flex:1;margin:0}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-left:auto}
.qty button{width:40px;height:40px;font-size:19px;color:var(--green);background:var(--green-soft);font-weight:600}
.qty span{width:44px;text-align:center;font-size:15px;font-weight:600;color:var(--gray-ink)}
.buy-row{display:flex;gap:10px}
.btn{flex:1;border-radius:12px;padding:14px 0;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px}
.btn svg{width:18px;height:18px}
.btn-cart{background:var(--green);color:#fff;box-shadow:0 6px 16px rgba(85,141,63,.28)}
.btn-buy{background:#fff;color:var(--blue);border:1.6px solid var(--blue)}

/* accordions */
.accs{background:#fff;margin-top:9px;padding:2px 16px 8px}
.acc{border-bottom:1px solid var(--line)}
.acc:last-child{border-bottom:none}
.acc .ah{display:flex;align-items:center;gap:11px;padding:11px 0;width:100%;box-sizing:border-box;text-align:left;background:none;border:0;font-size:14px;font-weight:600;color:var(--green)}
.acc .ah .ai{width:22px;height:22px;color:var(--green);flex:none}
.acc .ah .ai svg{width:22px;height:22px}
.acc .ah .chev{margin-left:auto;flex:none;color:var(--green);transition:transform .25s}
.acc .ah .chev svg{width:20px;height:20px}
.acc.open .ah .chev{transform:rotate(180deg)}
.acc .ac{max-height:0;overflow:hidden;transition:max-height .3s ease}
.acc.open .ac{max-height:600px}
.acc .ac-in{padding:2px 2px 16px 33px;font-size:12.7px;line-height:1.6;color:var(--gray)}
.acc .ac-in ul{list-style:none !important;margin-top:2px;padding-left:0 !important}
.acc .ac-in li{list-style:none !important;position:relative;padding-left:15px;margin-bottom:6px}
.acc .ac-in li::marker{content:"" !important}                    /* kill the theme's native list bullet (was doubling our dot) */
.acc .ac-in li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:#9aa0a6}   /* grey bullet (client) */
.acc .ac-in .spec{display:flex;gap:8px;margin-bottom:6px}
.acc .ac-in .spec b{color:var(--gray-ink);min-width:110px;font-weight:600}

/* ---------- generic page (account/rx/cart) ---------- */
.simple{padding:26px 20px;text-align:center}
.simple .bigic{width:74px;height:74px;border-radius:20px;background:var(--green-soft);margin:14px auto 16px;display:flex;align-items:center;justify-content:center}
.simple .bigic svg{width:38px;height:38px;color:var(--green)}
.simple h2{font-size:19px;color:var(--gray-ink);font-weight:600;margin-bottom:8px}
.simple p{font-size:13px;color:var(--gray-soft);line-height:1.55;max-width:300px;margin:0 auto 6px}
.simple .soon{display:inline-block;margin-top:14px;background:var(--blue-soft);color:var(--blue);font-size:11.5px;
  font-weight:600;padding:7px 15px;border-radius:20px}
.acct-list{margin-top:20px;text-align:left}
.acct-list .r{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:15px 15px;margin-bottom:10px;box-shadow:var(--shadow)}
.acct-list .r svg{width:21px;height:21px;color:var(--green)}
.acct-list .r b{font-size:13.5px;color:var(--gray-ink);font-weight:600}
.acct-list .r .ar{margin-left:auto;color:var(--gray-soft)}

/* ---------- customer account: login / register + personalised header ---------- */
.acct-tabs{display:flex;gap:8px;background:var(--bg);border-radius:12px;padding:4px;margin:18px 0 14px}
.acct-tabs button{flex:1;border:0;background:transparent;padding:9px 0;border-radius:9px;font-size:13px;font-weight:600;color:var(--gray-soft)}
.acct-tabs button.on{background:#fff;color:var(--green-d);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.acct-auth{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 15px;box-shadow:var(--shadow)}
.acct-auth .co-field{margin-bottom:11px}
.acct-auth .co-field label{display:block;font-size:11.5px;font-weight:600;color:var(--gray);margin-bottom:5px}
.acct-auth .co-field input{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:14px;color:var(--gray-ink);background:#fff}
.acct-auth .co-field input:focus{outline:none;border-color:var(--green)}
.acct-auth .btn{margin-top:4px}
.acct-msg{font-size:12.5px;margin-top:10px;color:var(--gray);text-align:center;min-height:1px}
.acct-msg.err{color:#c0392b}
.acct-alt{font-size:12.5px;color:var(--gray-soft);text-align:center;margin-top:12px}
.acct-alt a{color:var(--green-d);font-weight:600;text-decoration:none}
.acct-hi{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 15px;margin-top:18px;box-shadow:var(--shadow)}
.acct-avatar{width:46px;height:46px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;flex:none}
.acct-hi-n{font-size:15.5px;font-weight:700;color:var(--gray-ink)}
.acct-hi-e{font-size:12.5px;color:var(--gray-soft);margin-top:2px}
.acct-logout{width:100%;margin-top:16px;background:#fff;border:1px solid var(--line);color:var(--gray);font-size:13.5px;font-weight:600;border-radius:12px;padding:13px 0}

/* ---------- FOOTER ---------- */
.footer{background:#fff;border-top:1px solid var(--line);padding:22px 16px 18px;margin-top:10px}
.footer .ftrust{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.footer .ftrust .ft{display:flex;align-items:center;gap:9px;background:var(--bg);border-radius:11px;padding:10px 11px}
.footer .ftrust .ft svg{width:20px;height:20px;color:var(--green);flex:none}
.footer .ftrust .ft b{font-size:10.5px;color:var(--gray-ink);font-weight:600;line-height:1.25;display:block}
.footer .ftrust .ft span{font-size:9.5px;color:var(--gray-soft)}
.footer .flogo{height:40px;margin-bottom:10px}
.footer .fabout{font-size:11.5px;color:var(--gray-ink);font-weight:500;line-height:1.55;margin-bottom:16px}
.fcol{border-top:1px solid var(--line);padding:13px 0}
.fcol .ct{font-size:12.5px;font-weight:600;color:var(--green);margin-bottom:9px;display:flex;align-items:center;gap:7px}
.fcol .ct svg{width:16px;height:16px}
.fcol a{display:block;font-size:12px;color:var(--gray);padding:5px 0}
.fcol .contact-r{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--gray);padding:5px 0}
.fcol .contact-r svg{width:16px;height:16px;color:var(--blue)}
.fnews{background:var(--green-soft);border-radius:13px;padding:15px;margin:14px 0}
.fnews b{font-size:13px;color:var(--green-d);display:block;margin-bottom:3px}
.fnews p{font-size:11px;color:var(--gray);margin-bottom:10px}
.fnews .nr{display:flex;gap:8px}
.fnews input{flex:1;border:1px solid #cfe0c6;border-radius:9px;padding:10px 12px;font-size:12px;font-family:inherit;background:#fff}
.fnews button{background:var(--green);color:#fff;font-weight:600;font-size:12px;border-radius:9px;padding:0 16px}
.fsoc{display:flex;gap:10px;margin:12px 0}
.fsoc a{width:36px;height:36px;border-radius:10px;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--gray)}
.fsoc a svg{width:18px;height:18px}
.fpay{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line)}
.fpay span.lbl{font-size:11px;color:var(--gray-soft);margin-right:2px}
.paycard{height:27px;background:#fff;border:1px solid var(--line);border-radius:6px;display:flex;align-items:center;justify-content:center;
  padding:0 8px;box-shadow:0 1px 2px rgba(20,25,30,.05)}
.paycard.visa{font-family:Arial,Helvetica,sans-serif;font-style:italic;font-weight:800;font-size:13.5px;color:#1A1F71;letter-spacing:.01em}
.paycard svg{display:block}
.paycard.cod{gap:6px;font-size:10px;font-weight:600;color:var(--gray-ink)}
.paycard.cod svg{width:17px;height:17px;color:var(--green)}
/* mini logos on the Card on Delivery option */
.pay-mini{margin-left:auto;display:flex;gap:5px;align-items:center}
.pay-mini .m{height:20px;background:#fff;border:1px solid var(--line);border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.pay-mini .m.visa{font-family:Arial,sans-serif;font-style:italic;font-weight:800;font-size:9.5px;color:#1A1F71}
.co-pay .opt svg.optic{width:22px;height:22px;color:var(--gray);margin-left:0}
.fcopy{text-align:center;font-size:10.5px;color:var(--gray-soft);padding-top:14px;border-top:1px solid var(--line);margin-top:6px}
.fcopy .flegal{display:block;margin-top:4px;font-size:9.5px;letter-spacing:.2px;opacity:.85}

/* ---------- bottom nav (app-like) ---------- */
.bnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--maxw);
  background:#fff;border-top:1px solid var(--line);display:flex;z-index:50;box-shadow:0 -3px 16px rgba(31,41,55,.07);
  padding-bottom:env(safe-area-inset-bottom)}
.bnav button{flex:1;padding:9px 0 8px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--gray-soft);position:relative}
.bnav button svg{width:23px;height:23px}
.bnav button span{font-size:9.5px;font-weight:500}
.bnav button.on{color:var(--green)}
.bnav button.on span{font-weight:600}
.bnav .rx{position:relative;top:-2px}
.bnav .rx .rxc{width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 14px rgba(85,141,63,.4);margin-bottom:2px}
.bnav .rx .rxc svg{width:22px;height:22px}
.bnav .rx.on{color:var(--green)}
.bnav .nbadge{position:absolute;top:5px;right:calc(50% - 20px);background:var(--red);color:#fff;font-size:9px;font-weight:700;
  min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px}

/* toast */
.toast{position:fixed;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 20px);left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--gray-ink);color:#fff;font-size:12.5px;font-weight:500;padding:11px 18px;border-radius:22px;
  opacity:0;pointer-events:none;transition:.28s;z-index:60;box-shadow:0 6px 20px rgba(0,0,0,.24);display:flex;align-items:center;gap:8px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast svg{width:17px;height:17px;color:#7bd06a}

/* ---------- search ---------- */
.srch-top{position:sticky;top:0;z-index:10;background:#fff;padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.srch-top svg{width:19px;height:19px;color:var(--green);flex:none}
.srch-top input{flex:1;border:none;font-size:15px;font-family:inherit;color:var(--gray-ink);background:none}
.srch-top .cancel{font-size:12.5px;color:var(--blue);font-weight:600;flex:none;background:none;border:0;cursor:pointer;font-family:inherit}
.srch-top .srch-back{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  margin:-5px 2px -5px -6px;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.srch-top .srch-back svg{width:21px;height:21px;color:var(--gray-ink)}
.srch-chips{display:flex;gap:8px;overflow-x:auto;padding:12px 14px 2px;scrollbar-width:none}
.srch-chips::-webkit-scrollbar{display:none}
.srch-chips .chip{white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:20px;padding:8px 14px;font-size:12px;color:var(--gray);font-weight:500}
.srch-meta{padding:14px 15px 4px;font-size:12.5px;color:var(--gray-soft)}
.srch-empty{text-align:center;padding:50px 30px;color:var(--gray-soft)}
.srch-empty svg{width:44px;height:44px;color:#cfd2d6;margin:0 auto 14px}
.srch-empty b{display:block;color:var(--gray-ink);font-size:15px;margin-bottom:5px}
.srch-empty p{font-size:12.5px}

/* ---------- Rx upload (functional) ---------- */
.rx-drop{margin:8px 20px 4px;border:2px dashed #bcd3b0;border-radius:16px;background:var(--green-soft);
  padding:26px 18px;text-align:center;color:var(--green-d);cursor:pointer}
.rx-drop svg{width:38px;height:38px;color:var(--green);margin:0 auto 10px}
.rx-drop b{display:block;font-size:14px;color:var(--green-d);margin-bottom:4px}
.rx-drop span{font-size:11.5px;color:var(--gray-soft)}
.rx-opts{display:flex;gap:10px;margin:14px 20px 0}
.rx-opts button{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:13px;padding:15px 0;font-size:12px;font-weight:600;color:var(--gray-ink);box-shadow:var(--shadow)}
.rx-opts button svg{width:24px;height:24px;color:var(--green)}
.rx-preview{margin:16px 20px 0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:var(--shadow)}
.rx-preview img{width:100%;max-height:260px;object-fit:contain;border-radius:9px;background:var(--bg)}
.rx-preview .fn{display:flex;align-items:center;gap:9px;margin-top:11px;font-size:12.5px;color:var(--gray-ink);font-weight:500}
.rx-preview .fn svg{width:18px;height:18px;color:var(--green);flex:none}
.rx-preview .fn .rm{margin-left:auto;color:var(--red);font-size:11.5px;font-weight:600}
.rx-field{margin:14px 20px 0}
.rx-field label{font-size:12px;color:var(--gray);font-weight:500;display:block;margin-bottom:6px}
.rx-field input,.rx-field textarea,.co-field input,.co-field textarea,.co-field select{width:100%;border:1px solid var(--line);
  border-radius:11px;padding:12px 13px;font-size:13.5px;font-family:inherit;color:var(--gray-ink);background:#fff}
.rx-field textarea{resize:none;height:70px}
.rx-submit,.co-place{margin:18px 20px 0;width:calc(100% - 40px);background:var(--green);color:#fff;font-weight:600;font-size:14.5px;
  border-radius:13px;padding:15px 0;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 6px 16px rgba(85,141,63,.3)}
.rx-submit:disabled{background:#c3c9c0;box-shadow:none}
.rx-submit svg,.co-place svg{width:18px;height:18px}

/* ---------- checkout / confirm ---------- */
.co-head{padding:14px 20px 2px}
.co-head h2{font-size:19px;color:var(--gray-ink);font-weight:600}
.co-head p{font-size:12px;color:var(--gray-soft);margin-top:2px}
.co-field{margin:14px 20px 0}
.co-field label{font-size:12px;color:var(--gray);font-weight:500;display:block;margin-bottom:6px}
.co-two{display:flex;gap:10px;margin:0 20px}
.co-two .co-field{flex:1;min-width:0;margin-left:0;margin-right:0}
.co-pay{margin:16px 20px 0}
.co-pay .opt{display:flex;align-items:center;gap:11px;border:1.5px solid var(--line);border-radius:12px;padding:14px;margin-bottom:10px;font-size:13.5px;color:var(--gray-ink);font-weight:500}
.co-pay .opt.sel{border-color:var(--green);background:var(--green-soft)}
.co-pay .opt .rd{width:20px;height:20px;border-radius:50%;border:2px solid #c7ccc3;flex:none;position:relative}
.co-pay .opt.sel .rd{border-color:var(--green)}
.co-pay .opt.sel .rd::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--green)}
.co-pay .opt .opt-cash{margin-left:auto;color:var(--green);display:flex}
.co-pay .opt .opt-cash svg{width:22px;height:22px}
.pay-mini .m svg{height:13px;width:auto;display:block}
.co-sum{margin:16px 20px 0;background:#fff;border:1px solid var(--line);border-radius:13px;padding:15px}
.co-sum .r{display:flex;justify-content:space-between;font-size:13px;color:var(--gray);margin-bottom:8px}
.co-sum .r.tot{border-top:1px solid var(--line);padding-top:10px;margin-top:2px;margin-bottom:0;font-size:15px}
.co-sum .r.tot b{color:var(--green);font-size:16px}

.confirm{text-align:center;padding:40px 26px}
.confirm .tick{width:88px;height:88px;border-radius:50%;background:var(--green-soft);margin:0 auto 20px;display:flex;align-items:center;justify-content:center;animation:pop .4s ease}
.confirm .tick svg{width:48px;height:48px;color:var(--green)}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.confirm h2{font-size:21px;color:var(--gray-ink);font-weight:600;margin-bottom:7px}
.confirm p{font-size:13px;color:var(--gray-soft);line-height:1.55;max-width:290px;margin:0 auto}
.confirm .onum{display:inline-block;margin-top:16px;background:var(--blue-soft);color:var(--blue-d);font-weight:600;font-size:13px;padding:9px 18px;border-radius:11px;letter-spacing:.02em}
.confirm .cta{margin:24px auto 0;background:var(--green);color:#fff;font-weight:600;font-size:14px;border-radius:12px;padding:14px 30px;display:inline-flex;align-items:center;gap:8px}
.confirm .cta svg{width:17px;height:17px}

/* orders / saved */
.ord{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;margin:0 15px 12px;box-shadow:var(--shadow)}
.ord .oh{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:10px}
.ord .oh b{font-size:13px;color:var(--gray-ink)}
.ord .oh .st{font-size:10.5px;font-weight:600;color:var(--green-d);background:var(--green-soft);padding:4px 10px;border-radius:20px}
.ord .oi{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.ord .oi img{width:40px;height:40px;object-fit:contain;mix-blend-mode:multiply}
.ord .oi .on{font-size:12px;color:var(--gray-ink);font-weight:500;flex:1;line-height:1.3}
.ord .oi .oq{font-size:11.5px;color:var(--gray-soft)}
.ord .of{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:10px;font-size:13px}
.ord .of b{color:var(--green)}

/* ---------- side drawer menu ---------- */
.menu-overlay{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--maxw);
  z-index:70;background:rgba(18,22,26,.48);opacity:0;pointer-events:none;transition:opacity .25s}
.menu-overlay.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;left:max(0px, calc(50% - var(--maxw) / 2));width:85%;max-width:320px;
  background:#fff;z-index:71;transform:translateX(-106%);visibility:hidden;transition:transform .28s cubic-bezier(.4,0,.2,1), visibility 0s .28s;
  overflow-y:auto;box-shadow:6px 0 26px rgba(0,0,0,.2);display:flex;flex-direction:column}
.drawer.show{transform:translateX(0);visibility:visible;transition:transform .28s cubic-bezier(.4,0,.2,1), visibility 0s 0s}
.dw-head{display:flex;align-items:center;gap:10px;padding:16px 16px 14px;border-bottom:1px solid var(--line)}
.dw-head img{height:30px}
.dw-head .close{margin-left:auto;width:34px;height:34px;border-radius:9px;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--gray)}
.dw-head .close svg{width:20px;height:20px}
.dw-sec{padding:14px 16px 6px}
.dw-lbl{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gray-soft);font-weight:600;margin-bottom:8px}
.dw-cat{display:flex;width:100%;text-align:left;align-items:center;gap:12px;padding:11px 4px;font-size:13.5px;color:var(--gray-ink);font-weight:500;border-bottom:1px solid var(--line)}
.dw-cat:last-child{border-bottom:none}
.dw-cat .di{width:34px;height:34px;border-radius:10px;background:var(--green-soft);flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dw-cat .di.dimg{background:none}
.dw-cat .di.dimg img{width:34px;height:34px;object-fit:cover;border-radius:10px;display:block}
.dw-cat:nth-child(even) .di{background:var(--blue-soft)}
.dw-cat .di svg{width:19px;height:19px;color:var(--green)}
.dw-cat:nth-child(even) .di svg{color:var(--blue)}
.dw-cat .ar{margin-left:auto;color:var(--gray-soft)}
.dw-cat .ar svg{width:17px;height:17px}
.dw-links{padding:6px 16px 4px;border-top:8px solid var(--bg)}
.dw-link{display:flex;width:100%;text-align:left;align-items:center;gap:12px;padding:12px 4px;font-size:13.5px;color:var(--gray-ink);font-weight:500}
.dw-link svg{width:20px;height:20px;color:var(--gray)}
.dw-contact{margin:6px 16px 20px;background:var(--green-soft);border-radius:13px;padding:14px}
.dw-contact b{font-size:12.5px;color:var(--green-d);display:block;margin-bottom:9px}
.dw-contact .cbtns{display:flex;gap:9px}
.dw-contact .cb{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 0;border-radius:10px;font-size:12.5px;font-weight:600;color:#fff}
.dw-contact .cb.wa{background:#25d366} .dw-contact .cb.call{background:var(--blue)}
.dw-contact .cb svg{width:16px;height:16px}

/* velare tag */
.vtag{text-align:center;font-size:9.5px;color:#b6b8bb;letter-spacing:.08em;padding:14px 0 4px}
.vtag b{color:var(--gray-soft);font-weight:600}

/* ---------- content pages (About, Contact, policies) ---------- */
.page-doc{background:#fff;margin-top:8px;padding:20px 18px 26px}
.page-doc h1{font-size:22px;color:var(--gray-ink);font-weight:600;margin-bottom:14px;line-height:1.2}
.page-doc h3{font-size:14.5px;color:var(--green);font-weight:600;margin:18px 0 7px;line-height:1.3}
.page-doc p{font-size:13px;line-height:1.65;color:var(--gray);margin-bottom:10px}
.page-doc ul,.page-doc ol{margin:2px 0 12px;padding:0;list-style:none}
.page-doc li{position:relative;padding-left:16px;font-size:13px;line-height:1.55;color:var(--gray);margin-bottom:6px}
.page-doc li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--green)}
.page-doc strong{color:var(--gray-ink);font-weight:600}

/* ---------- floating WhatsApp button (all screens) ---------- */
.wa-fab{position:fixed;z-index:55;
  right:max(16px, calc(50% - var(--maxw)/2 + 16px));
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 40px);
  width:54px;height:54px;border-radius:50%;background:#25d366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(37,211,102,.45);animation:waPulse 2.8s infinite}
.wa-fab svg{width:30px;height:30px}
.wa-fab .lbl{position:absolute;right:64px;background:#fff;color:#3f4042;font-size:12px;font-weight:600;
  white-space:nowrap;padding:8px 12px;border-radius:10px;box-shadow:0 3px 12px rgba(0,0,0,.14);opacity:0;transform:translateX(6px);
  transition:.2s;pointer-events:none}
.wa-fab:hover .lbl{opacity:1;transform:translateX(0)}
@keyframes waPulse{0%{box-shadow:0 6px 18px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,.5)}
  70%{box-shadow:0 6px 18px rgba(37,211,102,.45),0 0 0 15px rgba(37,211,102,0)}
  100%{box-shadow:0 6px 18px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,0)}}

/* ================= DESKTOP (min-width:900px) ================= */
@media (min-width:900px){
  body{padding:0;background:#e9eaec}
  .app{max-width:none;min-height:100vh;border-radius:0;box-shadow:none}  /* pleine largeur (demande client 20/07) */

  /* menu burger desktop : panneau colle au bord gauche, overlay pleine largeur */
  .menu-overlay{max-width:none}
  .drawer{left:0;width:340px;max-width:340px}

  /* header: logo bar fixed on top, nav row below it */
  .topbar{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:none;padding:15px 34px;gap:16px}
  .topbar .logo{height:38px}
  .topbar .tb-ic{gap:22px}
  .searchbar{display:none!important} /* search lives in the top bar area; use the search icon */

  /* single-row header: nav sits inline in the top bar (logo left · nav centre · search/cart right) */
  .bnav{position:fixed;top:0;bottom:auto;left:50%;transform:translateX(-50%);width:100%;max-width:none;height:68px;align-items:center;
    justify-content:center;gap:2px;border:none;box-shadow:none;background:transparent;padding:0;z-index:41;pointer-events:none}
  .bnav button{flex:0 0 auto;flex-direction:row;gap:9px;padding:9px 22px;font-size:12.5px;pointer-events:auto}
  .bnav button svg{width:20px;height:20px}
  .bnav button span{font-size:13px}
  .bnav .nbadge{top:9px;right:calc(50% - 34px)}
  .bnav .rx{top:0}
  .bnav .rx .rxc{width:auto;height:auto;background:transparent;color:inherit;box-shadow:none;padding:0;margin:0}
  .bnav .rx .rxc svg{width:20px;height:20px}
  /* desktop: the cart lives top-right (topbar) with search; drop the duplicate Cart from the
     centre nav so its count badge no longer overlaps the label. */
  .bnav button[data-nav="cart"]{display:none}

  #app > .screen{padding-top:128px}          /* clear fixed logo bar + nav */
  #app > .screen.active ~ *{}
  .screen{padding-bottom:50px}

  /* wider gutters */
  .section-h{padding:0 34px;margin-top:26px}
  .section-h h2{font-size:19px}
  .hero{padding:20px 34px 4px}
  .brands{margin-top:22px}
  .catgrid,.pgrid,.rail{padding-left:34px;padding-right:34px}
  .connect,.trust{margin-left:34px;margin-right:34px}

  /* hero bigger */
  .hero .slide{min-height:340px;padding:0;justify-content:flex-end;border-radius:22px}
  .hero .slide .slide-in{padding:54px}
  .hero .slide h3{font-size:38px;max-width:62%}
  .hero .slide p{font-size:15.5px;max-width:52%}
  .hero .slide .slide-badges{gap:9px}
  .hero .slide .sb{font-size:12px;padding:6px 13px}
  .hero .slide .shopnow{font-size:14px;padding:12px 26px}
  .hero .slide .art{width:230px;height:230px;right:-40px;top:-40px}

  /* multi-column grids */
  .catgrid{grid-template-columns:repeat(8,1fr);gap:8px}
  .catgrid .cn{font-size:12px}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:10px}
  .rail{gap:10px}
  .rail .pcard{flex:0 0 210px}
  .pcard .pname{font-size:12.5px}
  .pcard .pnow{font-size:15px}
  .trust{grid-template-columns:repeat(3,1fr);gap:14px;padding:20px 34px 2px}

  /* category screen wider */
  .cat-wrap{grid-template-columns:150px 1fr}
  .cat-side button{padding:18px 8px;font-size:12px}
  .cat-main{padding:22px 30px}
  .cat-main .pgrid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))!important;gap:10px}

  /* product page: two columns, centered */
  #s-product{max-width:1080px;margin:0 auto}
  #s-product .pp-gallery{float:left;width:46%;background:#fff;border-radius:16px;margin:6px 0 28px 34px}
  #s-product .pp-main{max-height:420px}
  #s-product .pp-body{margin:6px 34px 28px calc(46% + 68px);background:transparent}
  #s-product .pp-back{clear:both}
  #s-product .section-h,#s-product .rail,#s-product .footer{clear:both}
  /* accordions flow into the right column under the CTA (fills the empty space beside the tall image) */
  #s-product .accs{margin:14px 34px 8px calc(46% + 68px);border:1px solid var(--line);border-radius:14px}
  /* Related / Recently Viewed: on desktop wrap into a full grid (no half-cropped card,
     both rows left-aligned identically) instead of a horizontal scroll rail. */
  #s-product .rail{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;overflow:visible;padding:0 34px 6px}
  #s-product .rail .pcard{flex:0 0 auto;width:auto}

  /* content pages + checkout centered for readability */
  .page-doc{max-width:820px;margin:8px auto 0;border-radius:14px}
  #s-checkout,#s-confirm,#s-cart,#s-account,#s-orders,#s-saved,#s-address,#s-rx{max-width:760px;margin:0 auto}
  #s-search .pgrid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))}

  /* footer as columns */
  .footer{display:flex;flex-wrap:wrap;gap:10px 40px;max-width:none;margin:14px auto 0;padding:38px 44px 26px}
  .footer > *{flex:1 1 100%}
  .footer .ftrust{grid-template-columns:repeat(4,1fr)}
  .footer .fnews{max-width:460px}
  .footer .fcol{flex:1 1 190px;border-top:none;padding:6px 0}
  .footer .fcopy{border-top:1px solid var(--line);padding-top:18px}

  /* floating WhatsApp in the bottom-right corner (content is full-width, so hug the corner) */
  .wa-fab{right:26px;bottom:26px;width:60px;height:60px}
  .wa-fab svg{width:33px;height:33px}
}

/* fix: keep the footer logo natural size (do not stretch in the desktop flex footer) */
.footer .flogo{object-fit:contain}
@media (min-width:900px){ .footer .flogo{flex:0 0 auto;width:auto;height:34px} }

/* ---------- boot splash (avoid blank wait while catalogue loads) ---------- */
.evm-splash{position:fixed;inset:0;background:#fff;z-index:200;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;transition:opacity .35s ease}
.evm-splash.hide{opacity:0;pointer-events:none}
.evm-splash img{width:150px;height:auto;opacity:.96}
.evm-spin{width:30px;height:30px;border:3px solid #e7e8ea;border-top-color:var(--green);border-radius:50%;animation:evmspin .8s linear infinite}
@keyframes evmspin{to{transform:rotate(360deg)}}

/* QA polish: desktop sticky category sidebar + balanced footer columns */
@media (min-width:900px){
  .cat-side{position:sticky;top:130px;align-self:start;height:max-content;border-right:1px solid var(--line)}
  .footer .fcol{flex:1 1 210px}
  .footer .fnews{flex:1 1 300px;max-width:none}
}

/* UAE Dirham symbol sizing (inline with prices) — sized to match the price font (revision item 14) */
/* dirham symbol sized to match the price digits: same cap height, weight and baseline */
/* dirham symbol sized + weighted to match the price digits (cap height + bold stroke).
   width/height forced so container icon rules (e.g. .acct-list .r svg{21px} in the cart)
   can never override it, keeping the symbol proportional to the text everywhere. */
.dhs{display:inline-block;width:.82em !important;height:1.16em !important;vertical-align:-.215em;margin-right:.11em;flex:none;stroke-width:2.8}

/* ============================================================
   REVISION ROUND 2 — visual overrides (appended, later wins)
   ============================================================ */

/* item 3 — brands as real logos, slightly faster loop */
.brands-track{gap:34px;animation:scroll 30s linear infinite}
.brands .b{opacity:1;height:30px;display:flex;align-items:center}
.brands .b img{height:30px;width:auto;max-width:120px;object-fit:contain;filter:none}

/* item 5 — Shop by Category with HD images */
.catgrid .cell{padding:8px 7px 9px}
.catgrid .ci{width:100%;height:auto;aspect-ratio:1/.84;margin:0 0 8px;border-radius:11px;
  background:#f2f4f1;overflow:hidden;padding:0;display:block}
.catgrid .ci img{width:100%;height:100%;object-fit:cover;display:block;mix-blend-mode:normal}
.catgrid .cell:nth-child(4n+2) .ci,.catgrid .cell:nth-child(4n) .ci{background:#f2f4f1}

/* item 7 — Connect with us (Option 1: deep green + mortar) */
.connect{background:linear-gradient(120deg,#3f7d33 0%,#2f6b28 58%,#245521 100%);padding:20px 18px}
.connect .c-art{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:118px;height:118px;opacity:.92;pointer-events:none}
.connect .c-art svg{width:100%;height:100%}
.connect .c-eyebrow{position:relative;z-index:2;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.82);margin-bottom:5px}
.connect h3{position:relative;z-index:2;font-size:20px}
.connect p{position:relative;z-index:2;max-width:64%;opacity:.95}
.connect .cbtns{position:relative;z-index:2}
.connect .cbtns .cb{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);color:#fff}
.connect .cbtns .cb.wa{background:#fff;border-color:#fff;color:#1a7a4f}
.connect .cbtns .cb svg{width:20px;height:20px;border-radius:5px}

/* item 9 — service trust badges (circular, brand-tinted) */
.trust .t{padding:14px 8px}
.trust .t .tico{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 8px}
.trust .t .tico svg{width:22px;height:22px;color:#fff;margin:0}
.trust .t .tico.g{background:linear-gradient(135deg,#6aab50,#467433)}
.trust .t .tico.b{background:linear-gradient(135deg,#4a8fc9,#265a8c)}
.trust .t .tico.o{background:linear-gradient(135deg,#e2a53f,#bd7d18)}

/* item 13 — coloured social icons in footer */
.fsoc a{background:none;width:36px;height:36px;padding:0;border-radius:9px}
.fsoc a svg{width:36px;height:36px;border-radius:9px}
.fcol .contact-r.wa svg{width:18px;height:18px;border-radius:4px}

/* item 8 — Apple Pay / Google Pay in "We accept" + checkout */
.paycard.applepay,.paycard.gpay{gap:3px;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:12px;color:#111}
.paycard.applepay svg{width:16px;height:16px}
.paycard.gpay{color:#5f6368}
.paycard.gpay svg{width:15px;height:15px}
.pay-mini .m.ap,.pay-mini .m.gp{padding:0 4px}
.pay-mini .m.ap svg,.pay-mini .m.gp svg{height:14px;width:auto}

/* item 2 — ZO hero slide (first) */
.slide.szo{background-color:#123047;background-image:url('assets/zo-bg.jpg');background-position:right center}
.slide.szo .slide-scrim{background:
  linear-gradient(180deg,rgba(12,32,46,.12) 0%,rgba(12,32,46,.34) 44%,rgba(9,24,34,.88) 100%),
  linear-gradient(100deg,rgba(46,107,40,.58) 0%,rgba(20,50,66,.10) 60%)}
.slide.szo .art{display:none}
.slide.szo .eyebrow{color:#d3ecc6}
.slide.szo h3{font-size:27px}
.slide.szo .shopnow{color:#1c5c2e}

/* item 6 — Deals grid matches Trending card size (uses .pgrid now); no extra rule needed */

/* Connect emblem = client's mortar+pestle+leaf artwork (revision item 7) */
.connect .c-art{width:132px; height:132px; opacity:1}
.connect .c-art img{width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
@media (min-width:900px){ .connect .c-art{width:150px; height:150px; right:18px} }

/* item 9 — real service icons (client images) + item 12 — per-item footer icons */
.trust .t .timg{display:none}
.trust .t .tico{display:none}
.trust .t .tvig{width:60px; height:60px; object-fit:contain; margin:0 auto 10px; display:block}
.fcol a{display:flex; align-items:center; gap:8px}
.fcol a svg{width:15px; height:15px; color:var(--gray-soft); flex:none}

/* Rx Upload = client's blue icon, flat (revision item 4) */
.bnav button .navimg{width:24px; height:24px; object-fit:contain; display:block}
@media(min-width:900px){ .bnav button .navimg{width:21px; height:21px} }

/* Popular Brands — all logos the same size (uniform box, client request) */
.brands-track{gap:30px}
.brands .b{width:104px; height:34px; display:flex; align-items:center; justify-content:center; opacity:1}
.brands .b img{max-width:100%; max-height:34px; width:auto; height:auto; object-fit:contain}

/* Popular Brands v2 — uniform HEIGHT for all logos (trimmed), width capped so wide wordmarks don't dominate */
.brands-track{gap:32px; align-items:center}
.brands .b{width:auto; height:32px; display:flex; align-items:center; justify-content:center; opacity:1}
.brands .b img{height:32px; width:auto; max-width:104px; object-fit:contain}

/* Popular Brands v3 — uniform size, NO distortion (max-height + max-width, aspect kept) */
.brands-track{gap:34px; align-items:center}
.brands .b{width:auto; height:auto; display:flex; align-items:center; justify-content:center; opacity:1}
.brands .b img{height:auto; width:auto; max-height:30px; max-width:116px; object-fit:contain}

/* Popular Brands v4 — strictly uniform HEIGHT for every logo, no width cap (no distortion) */
.brands .b img{height:30px; width:auto; max-height:none; max-width:none; object-fit:contain}

/* Category screen — images in left sidebar + sticky sidebar (client request) */
.cat-side{position:sticky; top:60px; align-self:start; max-height:calc(100vh - 60px); overflow-y:auto; scrollbar-width:none}
.cat-side::-webkit-scrollbar{display:none}
.cat-side .cs-img{display:block; width:44px; height:44px; margin:0 auto}
.cat-side .cs-img img{width:44px; height:44px; object-fit:cover; border-radius:11px; display:block}
@media (min-width:900px){ .cat-side{top:130px; max-height:calc(100vh - 130px)} .cat-side .cs-img,.cat-side .cs-img img{width:50px;height:50px} }

/* fix: overflow:hidden on .app breaks position:sticky for the category sidebar.
   overflow:clip clips the same way but does NOT create a scroll container. */
.app{overflow:clip}

/* Popular Brands v5 — tight logos, uniform readable height (no canvas padding) */
.brands{padding:16px 0}
.brands-track{gap:26px; align-items:center}
.brands .b{height:30px}
.brands .b img{height:30px; width:auto; max-height:none; max-width:none; object-fit:contain}
@media(min-width:900px){ .brands .b,.brands .b img{height:34px} }

/* Lock the search bar (sticky under the header) + keep category sidebar below it (client request) */
.searchbar{position:sticky; top:59px; z-index:30}
.cat-side{top:114px; max-height:calc(100vh - 114px)}
@media (min-width:900px){ .searchbar{position:static} }

/* Category sidebar: fit all 8 categories between the locked search bar and the bottom nav
   (last 2 were hidden behind the fixed bottom nav) */
.cat-side{top:114px; max-height:calc(100vh - 114px - var(--nav-h) - env(safe-area-inset-bottom, 0px)); overflow-y:auto; scrollbar-width:none; padding-bottom:6px}
.cat-side::-webkit-scrollbar{display:none}
.cat-side button{padding:9px 5px; gap:4px}
.cat-side button span{font-size:9.5px; line-height:1.2}
.cat-side .cs-img,.cat-side .cs-img img{width:38px; height:38px}
@media (min-width:900px){ .cat-side{top:130px; max-height:calc(100vh - 130px)} .cat-side .cs-img,.cat-side .cs-img img{width:48px;height:48px} .cat-side button{padding:14px 8px} .cat-side button span{font-size:12px} }

/* Popular Brands v6 — bigger / more visible (client) */
.brands{padding:18px 0}
.brands-track{gap:30px}
.brands .b{height:40px}
.brands .b img{height:40px; width:auto; max-height:none; max-width:none; object-fit:contain}
@media(min-width:900px){ .brands .b,.brands .b img{height:44px} }

/* Deals "View more" button */
.viewmore{background:var(--green-soft); color:var(--green-d); font-weight:600; font-size:13px; border-radius:11px; padding:11px 28px}

/* ZO hero = client's exact banner image (full, clickable to Premium Skincare) */
.slide.szo{background:#eaeef2 url('assets/zo-hero.jpg') center/cover no-repeat; cursor:pointer}
.slide.szo .slide-scrim,.slide.szo .art,.slide.szo .slide-in{display:none}
@media(min-width:900px){ .slide.szo{background-size:contain} }

/* Category screen (mobile): two independent scroll panes so the left category list
   scrolls on its own and the last 2 categories are always reachable */
@media (max-width:899px){
  #s-category{padding-bottom:0}
  .cat-wrap{min-height:0; overflow:hidden;
    height:calc(100vh - 112px - var(--nav-h));
    height:calc(100dvh - 112px - var(--nav-h) - env(safe-area-inset-bottom,0px))}
  .cat-side{position:static; top:auto; max-height:none; height:100%;
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
  .cat-main{height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding-bottom:22px}
}

/* ZO hero: show the FULL banner (no crop). White letterbox matches the banner's white bg */
.slide.szo{background:#ffffff url('assets/zo-hero.jpg') center/contain no-repeat}

/* Popular Brands v7 — SAME BOX for every logo (contain): uniform footprint.
   Compact logos fill the height (big & legible); wide wordmarks are width-limited
   (ZO/Johnson no longer dominate). All boxes same size => perfectly aligned. */
.brands-track{gap:22px; align-items:center}
.brands .b{width:110px; height:48px; display:flex; align-items:center; justify-content:center}
.brands .b img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
@media(min-width:900px){ .brands .b{width:124px; height:52px} }

/* ZO hero (mobile): match the banner's exact aspect ratio so it fills the slide
   with NO white frame and NO crop (client feedback) */
@media (max-width:899px){
  .slide.szo{aspect-ratio:1500 / 899; min-height:0;
    background:#ffffff url('assets/zo-hero.jpg') center/cover no-repeat}
}

/* Popular Brands v8 — uniform HEIGHT, big (like Vichy). Each logo fills the height
   (multi-line/tagline logos are readable), width-capped only for the one extreme (ZO). */
.brands-track{gap:26px; align-items:center}
.brands .b{width:auto; height:auto; display:flex; align-items:center; justify-content:center}
.brands .b img{height:auto; width:auto; max-height:42px; max-width:300px; object-fit:contain}
@media(min-width:900px){ .brands .b img{max-height:46px; max-width:340px} }

/* ZO hero as a real <img>: slide hugs the image exactly => no white band, no crop */
.slide.szo{padding:0; min-height:0; background:#fff; overflow:hidden; display:block; box-shadow:none}
.slide.szo .slide-img{display:block; width:100%; height:auto}
@media(min-width:900px){
  .slide.szo{display:flex; align-items:center; justify-content:center; min-height:340px}
  .slide.szo .slide-img{width:auto; height:100%; max-height:340px}
}

/* ZO hero slide must hug the image exactly (no stretch => no white bar below) */
.hero-track{align-items:flex-start}
.slide.szo{min-height:0!important; height:auto!important; align-self:flex-start}
.slide.szo .slide-img{display:block!important; width:100%!important; height:auto!important; max-height:none!important}
@media(min-width:900px){
  .slide.szo{align-self:stretch; min-height:340px!important; display:flex!important; align-items:center; justify-content:center}
  .slide.szo .slide-img{width:auto!important; height:auto!important; max-height:340px!important; max-width:100%!important}
}

/* ===== Carousel FINAL (2026-07-20) — every slide the SAME size (kills the height
   mismatch / white gap the client flagged), and the ZO banner fills its slot exactly:
   slot ratio == banner ratio (1376/768 = 16:9) => object-fit:cover shows the WHOLE
   banner, no crop, no white frame. Text slides are tightened to fit the 16:9 box. */
.hero-track{align-items:stretch!important}
@media (max-width:899px){
  .hero .slide{aspect-ratio:1376 / 768; min-height:0!important; height:auto!important; padding:17px}
  .hero .slide h3{font-size:20px; line-height:1.12; margin:0 0 5px; max-width:82%}
  .hero .slide p{font-size:11.8px; line-height:1.38; margin:0; max-width:80%}
  .hero .slide .slide-badges{margin-top:8px}
  .hero .slide .shopnow{margin-top:10px; padding:9px 18px; font-size:12px}
  .slide.szo{padding:0!important; background:#fff!important; overflow:hidden!important; display:block!important; border-radius:var(--radius)}
  .slide.szo .slide-img{display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; max-height:none!important; max-width:none!important}
}
@media (min-width:900px){
  .slide.szo .slide-img{object-fit:contain!important}
}

/* Popular Brands FINAL (2026-07-20) — cleaned files (no baked white box / no
   checkerboard), uniform HEIGHT for consistent size, wide wordmarks width-capped so
   none dominates (ZO). Fixed row height => all centered on one line = aligned. */
.brands-track{gap:30px!important; align-items:center!important}
.brands .b{width:auto!important; height:52px!important; display:flex!important; align-items:center!important; justify-content:center!important; flex:0 0 auto!important}
.brands .b img{height:auto!important; width:auto!important; max-height:38px!important; max-width:165px!important; object-fit:contain!important; display:block!important}
@media(min-width:900px){
  .brands .b{height:60px!important}
  .brands .b img{max-height:44px!important; max-width:190px!important}
}

/* Ultra-large (>1520px) : plafonner la colonne de contenu (retour client : hero /
   Connect / trust "bien trop etires" en plein ecran). Les ecrans 900-1520px restent
   pleine largeur ; au-dela, colonne 1480px centree + hero un peu plus haut. */
@media (min-width:1520px){
  .hero,.section-h,.catgrid,.pgrid,.rail,.connect,.trust,.footer{max-width:1480px;margin-left:auto;margin-right:auto}
  .hero .slide{min-height:380px}
  .trust{padding-left:0;padding-right:0}
}

/* ===== Master-Sheet product features: POM, Out of Stock, info line (client 4B/4H/4J) ===== */
.pcard .pimg{position:relative}
.rxbadge{position:absolute;top:8px;left:8px;z-index:2;background:#c62828;color:#fff;border-radius:8px;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.rxbadge svg{width:17px;height:17px;color:#fff}
.rxbadge.big{width:38px;height:38px;border-radius:10px;top:12px;left:12px}
.rxbadge.big svg{width:24px;height:24px}
.oosbadge{position:absolute;top:auto;bottom:8px;left:8px;right:auto;z-index:2;background:#6d6f72;color:#fff;font-size:9.5px;font-weight:700;
  letter-spacing:.02em;padding:3px 7px;border-radius:7px;text-transform:uppercase}  /* bottom-left: never collide with the top-right favourite heart */
.oosbadge.big{font-size:11px;padding:4px 10px;top:auto;bottom:12px;left:12px;right:auto}  /* bottom-left: never collide with the top-right share icon */
/* desktop trust row: keep it compact + icons big enough (fix tiny icons lost in wide boxes) */
@media (min-width:900px){
  .trust{max-width:960px;margin-left:auto;margin-right:auto;gap:22px}
  .trust .t{padding:30px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .trust .t .tvig{width:78px;height:78px;margin:0 auto 14px}
  .trust .t b{font-size:14px}
}
#shareCart svg{width:17px;height:17px;flex:none}
#s-category .cat-main{padding-bottom:84px}
#s-search .pgrid{padding-bottom:84px}
.pcard.isoos .pimg img{opacity:.6;filter:grayscale(.25)}
.pcard .padd.disabled{background:#eef0f1;color:#9a9b9d;cursor:not-allowed;box-shadow:none}
.disc.big{position:absolute;top:12px;left:12px;z-index:2;background:var(--red);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  padding:7px 10px;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.disc.big b{font-size:15px;font-weight:800} .disc.big span{font-size:9px;font-weight:700;letter-spacing:.09em;margin-top:2px}
/* product header: Back (left) + product name centered */
.pp-head{display:flex;align-items:center;padding:12px 15px 4px}
.pp-head .pp-back{justify-self:start;padding:0;font-size:13.5px;font-weight:600;color:var(--gray)}
.pp-head .pp-hname{grid-column:2;text-align:center;font-size:16px;font-weight:700;color:var(--gray-ink);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pp-head-sp{grid-column:3}
/* info line: subcat / class / intended with small brand-coloured icons */
/* breadcrumb under the product title: values separated by a small chevron only (Life style) */
.pp-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:5px 7px;padding:2px 15px 10px}
.pp-crumbs .pc{font-size:12.5px;color:var(--gray);font-weight:500;background:none;border:0;padding:0;margin:0;cursor:pointer;font-family:inherit;line-height:1.3}
.pp-crumbs .pc:hover{color:var(--green-d);text-decoration:underline}
.pp-crumbs .pp-chev{display:inline-flex;align-items:center;color:var(--gray-soft)}
.pp-crumbs .pp-chev svg{width:13px;height:13px}
.pp-attrs{padding:2px 15px 8px}
.pp-attr-row{display:flex;flex-wrap:wrap;gap:5px 16px;margin-bottom:3px;justify-content:center}
.pp-attr-row .pa{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--gray)}
.pp-attr-row .pai{display:inline-flex;flex:none}
.pp-attr-row .pai svg{width:15px;height:15px}
.pp-attr-row .pai.blue{color:#1a6fb5}
.pp-attr-row .pai.gray{color:#8a8f98}
.pp-attr-row .pai.green{color:var(--green)}
.pom-pill{display:inline-flex;align-items:center;gap:6px;background:#fdecec;color:#c62828;border:1px solid #f2b8b8;
  border-radius:999px;padding:3px 6px 3px 10px;font-size:11.5px;font-weight:700;margin-bottom:10px}
.pom-pill svg{width:15px;height:15px;color:#c62828}
.pom-pill .pom-q{width:17px;height:17px;border-radius:50%;background:#c62828;color:#fff;font-size:11px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
/* DHA Plan 1: POM (prescription-only) — no purchase, route the customer to the pharmacist */
.pom-only{color:#c62828;font-weight:700}
.pcard .padd.pom{background:#fdecec;color:#c62828;border:1px solid #f2b8b8;cursor:pointer}
.pcard .padd.pom svg{width:15px;height:15px;color:#c62828}
.pp-actions.pom-cta{flex-direction:column;gap:10px}
.pp-actions.pom-cta .btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;border-radius:12px;padding:14px 0;font-size:14px;text-decoration:none}
.pp-rx-wa{background:#c62828;color:#fff;box-shadow:0 6px 16px rgba(198,40,40,.24)}
.pp-rx-wa svg{width:19px;height:19px}
.pp-rx-call{background:#fff;color:#c62828;border:1.5px solid #f2b8b8}
.pp-rx-call svg{width:18px;height:18px;color:#c62828}
/* DHA Plan 1: cold-chain (temperature-controlled) marker — icy blue */
.ccbadge{position:absolute;top:8px;right:8px;z-index:2;background:#0a6db4;color:#fff;border-radius:8px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.ccbadge svg{width:16px;height:16px;color:#fff}
.pp-flags{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:10px}
.pp-flags .pom-pill{margin-bottom:0}
.cc-pill{display:inline-flex;align-items:center;gap:6px;background:#e8f3fb;color:#0a6db4;border:1px solid #bcdcf0;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:700;margin:0}
.cc-pill svg{width:15px;height:15px;color:#0a6db4}
.btn-oos{flex:1;background:#eef0f1;color:#8a8c8e;border-radius:12px;padding:14px 0;font-size:14px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:8px;cursor:not-allowed}
.btn-oos svg{width:17px;height:17px}
.info-pop{position:fixed;inset:0;z-index:60;background:rgba(20,22,25,.5);display:flex;align-items:center;justify-content:center;padding:28px}
.info-card{background:#fff;border-radius:16px;padding:20px 20px 16px;max-width:320px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.info-card b{display:block;font-size:15px;color:var(--gray-ink);margin-bottom:7px}
.info-card p{font-size:12.7px;line-height:1.5;color:var(--gray)}
.info-card .info-ok{margin-top:14px;background:var(--green);color:#fff;font-weight:600;font-size:13px;border-radius:10px;padding:10px 22px}
.acc .ac-in ul{padding-left:0;list-style:none;margin:4px 0}   /* single green ::before dot only, never the native disc */
.acc .ac-in li{margin-bottom:3px}
.acc .ac-in p{margin:4px 0}
.acc .ac-in strong,.acc .ac-in b{color:var(--gray-ink)}

/* ===== Hero banners (client 3B) : image + copy overlay left, product visible right ===== */
.hero-track .hslide{flex:0 0 100%;scroll-snap-align:center;position:relative;border-radius:16px;overflow:hidden;
  min-height:360px;background-size:cover;background-position:82% center;background-repeat:no-repeat}
.hslide .h2-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#ffffff 0%,rgba(255,255,255,.97) 32%,rgba(255,255,255,.8) 52%,rgba(255,255,255,.12) 100%)}
.hslide .h2-in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:18px 20px;max-width:72%}
.hslide .h2-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:700;margin-bottom:6px}
.hslide .h2-eyebrow::before{content:"";width:15px;height:2px;background:var(--green);border-radius:2px}
.hslide .h2-h{font-size:21px;line-height:1.12;font-weight:800;letter-spacing:-.01em;color:var(--gray-ink);margin:0 0 6px}
.hslide .h2-h .h2-red{color:#e01414}   /* client: "25% OFF" in red like before (vivid) */
.hslide .h2-p{font-size:11.8px;line-height:1.4;color:var(--gray);max-width:94%;margin:0 0 10px}
.hslide .h2-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.hslide .h2-badges span{font-size:9.5px;font-weight:600;color:var(--green-d);background:var(--green-soft);border:1px solid #d5e6cc;border-radius:20px;padding:4px 9px}
.hslide .h2-cta{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;font-weight:600;font-size:12.5px;border-radius:22px;padding:10px 18px;box-shadow:0 6px 16px rgba(85,141,63,.3)}
.hslide .h2-cta svg{width:15px;height:15px}
/* Sticky Quantity + Add to Cart bar on the product page (mobile), client 4A */
@media (max-width:899px){
  #s-product{padding-bottom:150px}   /* clear BOTH the sticky Add-to-Cart bar and the bottom nav */
  #s-product .pp-actions{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));z-index:40;
    background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(31,41,55,.08);padding:10px 15px;margin:0}
}
@media (min-width:900px){
  .hero-track .hslide{min-height:380px;background-position:right center}
  .hslide .h2-scrim{background:linear-gradient(90deg,#ffffff 0%,rgba(255,255,255,.95) 34%,rgba(255,255,255,.7) 54%,rgba(255,255,255,0) 78%)}
  .hslide .h2-in{padding:44px 52px;max-width:58%}
  .hslide .h2-h{font-size:34px}
  .hslide .h2-p{font-size:15px}
  .hslide .h2-badges span{font-size:11.5px;padding:6px 12px}
  .hslide .h2-cta{font-size:14px;padding:12px 24px}
  /* desktop: stack Add to Cart BELOW the qty selector (fills the empty space) */
  #s-product .pp-actions{flex-direction:column;align-items:stretch;gap:12px}
  #s-product .pp-actions .qty{align-self:flex-start;margin-left:0}
  #s-product .pp-actions .btn-cart{width:100%}
}

/* ===== Discount badge: solid red rounded rectangle, inset top-left (client reference) ===== */
.pcard .disc,.disc.big{text-align:center;line-height:1;z-index:6;
  background:#e01414 !important;background-image:none;opacity:1;-webkit-clip-path:none;clip-path:none;
  border-radius:7px;box-shadow:none}
.pcard .disc{top:8px;left:8px;padding:5px 8px}
.disc.big{top:12px;left:12px;padding:7px 11px}
.disc b{display:block;font-size:12px;font-weight:800;color:#fff}
.disc span{display:block;font-size:8px;font-weight:700;letter-spacing:.06em;color:#fff;margin-top:1px}
.disc.big b{font-size:15px}
.disc.big span{font-size:9.5px}


/* ===== My Account: order tracking + address book ===== */
.track-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 15px;margin:0 15px 14px}
.track-h{font-size:13.5px;font-weight:700;color:var(--gray-ink);margin-bottom:10px}
.track-box .btn-cart{width:100%;margin-top:6px}
.track-load{font-size:12.5px;color:var(--gray);padding:9px 2px}
.track-err{font-size:12.5px;color:var(--red);background:#fdecea;border-radius:9px;padding:9px 11px;margin-top:9px}
.st.ok{color:#1f7d45 !important;background:#e8f6ee !important}
.st.bad{color:var(--red) !important;background:#fdecea !important}
.addr-list{padding:0 15px;display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.addr-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.addr-card.def{border-color:var(--green);box-shadow:0 0 0 2px var(--green-soft)}
.addr-name{font-size:13.5px;font-weight:700;color:var(--gray-ink)}
.addr-badge{font-size:9.5px;font-weight:700;color:var(--green);background:var(--green-soft);padding:2px 6px;border-radius:20px;margin-left:5px}
.addr-lines{font-size:12px;color:var(--gray);margin-top:4px;line-height:1.45}
.addr-acts{display:flex;flex-direction:column;gap:6px;flex:none}
.addr-acts button{font-size:11px;font-weight:600;border:1px solid var(--line);background:#fff;color:var(--gray-ink);border-radius:8px;padding:6px 9px;cursor:pointer;white-space:nowrap}
.addr-acts .rm{color:var(--red);border-color:#f2c9c6}