/* Dar Lward: storefront and dashboard styles */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Identity: wine-dark rose valley hero, petal-cream ground, gold hairlines; the Moroccan arch (bab) frames every image */
:root{
  --ground:#fbf4f2; --surface:#ffffff; --ink:#2a1218; --muted:#7a5a62; --line:#eddadd;
  --deep:#5e1129; --deep-2:#3a0a1a; --accent:#c0396a; --accent-soft:#f7e1e8; --gold:#b48a3c; --leaf:#3f6b45; --on-deep:#fff3f1;
  --body:"IBM Plex Sans Arabic",system-ui,"Segoe UI",Tahoma,sans-serif;
  --display:"IBM Plex Sans Arabic",system-ui,"Segoe UI",Tahoma,sans-serif;
  --logo:"Aref Ruqaa","Cormorant Garamond",serif;
  --num:"Cormorant Garamond",Georgia,serif;
  color-scheme:light;
}
:root[data-accent=saffron]{--deep:#6b3a0c;--deep-2:#3f2006;--accent:#b8661c;--accent-soft:#f7e8d6}
:root[data-accent=nila]{--deep:#1d2d5c;--deep-2:#101a38;--accent:#3d5bb5;--accent-soft:#e2e8f7}
:root[lang=fr],:root[lang=en]{--logo:"Cormorant Garamond",Georgia,serif}
*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.7}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.muted{color:var(--muted)}

/* header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--ground) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr .in{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;line-height:1.05;cursor:pointer;background:none;border:0;padding:0;text-align:start}
.brand b{font-family:var(--logo);font-size:32px;color:var(--deep);font-weight:700}
.brand small{font-size:11px;color:var(--muted);letter-spacing:.04em;margin-top:2px}
.nav{display:flex;gap:2px;margin-inline-start:auto}
.nav button{background:none;border:0;padding:8px 12px;border-radius:999px;cursor:pointer;font-weight:500;color:var(--ink)}
.nav button:hover,.nav button.on{background:var(--accent-soft);color:var(--deep)}
.tools{display:flex;gap:8px;align-items:center}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--surface)}
.lang button{border:0;background:none;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.lang button.on{background:var(--deep);color:var(--on-deep)}
.cartb{position:relative;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;height:40px;padding:0 12px;cursor:pointer;color:var(--deep);font-weight:600;font-size:13px}
.cartb svg{width:20px;height:20px}
.cartb i{position:absolute;top:-5px;inset-inline-end:-5px;background:var(--accent);color:#fff;font-style:normal;font-size:11px;min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 4px}
.cartb.bump{animation:bump .45s}
@keyframes bump{40%{transform:scale(1.15)}}
@media(max-width:860px){.nav{order:3;width:100%;margin:0;overflow-x:auto}.tools{margin-inline-start:auto}.brand b{font-size:27px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 22px;font-weight:600;cursor:pointer;border:1px solid transparent;text-decoration:none;line-height:1.3;font-size:15px}
.btn svg{width:19px;height:19px;flex:none}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-light{background:var(--on-deep);color:var(--deep)}
.btn-ghost{border-color:rgba(255,243,241,.5);color:var(--on-deep);background:transparent}
.btn-primary{background:var(--deep);color:var(--on-deep)}
.btn-line{background:var(--surface);border-color:var(--line);color:var(--deep)}
.btn-wa{background:#1d8a4b;color:#fff}
.btn-wa-o{background:transparent;border-color:#1d8a4b;color:#1d8a4b}
.link{background:none;border:0;color:var(--accent);font-weight:600;cursor:pointer;padding:0;text-decoration:none}

/* hero */
.hero{position:relative;overflow:hidden;color:var(--on-deep);background:radial-gradient(110% 90% at 80% 0%,color-mix(in srgb,var(--accent) 55%,var(--deep)) 0%,var(--deep) 46%,var(--deep-2) 100%)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .in{position:relative;z-index:3;width:100%;max-width:920px;margin:0 auto;padding:84px 16px 96px;text-align:center;display:grid;justify-items:center}
.eyebrow{display:inline-flex;gap:10px;align-items:center;font-size:13px;letter-spacing:.06em;color:#f2c6b4;font-weight:500}
.eyebrow::before{content:"";width:30px;height:1px;background:currentColor}
.eyebrow.dk{color:var(--gold)}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(42px,7.2vw,80px);line-height:1.12;margin:16px 0 18px;text-wrap:balance}
.hero .sub{font-size:17px;max-width:46ch;color:#f6dcd8;margin:0 auto 30px}
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.stats{display:flex;gap:34px;margin-top:40px;flex-wrap:wrap;justify-content:center}
.stats b{display:block;font-family:var(--num);font-size:40px;line-height:1;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.stats span{font-size:12.5px;color:#efc6c0}
.rosette .ring{transform-origin:0 0;animation:spin 140s linear infinite}
.rosette .r1{animation-duration:110s;animation-direction:reverse}
.rosette .r2{animation-duration:170s}
.rosette .r3{animation-duration:200s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.rosette .ring{animation:none}.cartb.bump{animation:none}}
@media(max-width:860px){.hero .in{padding:64px 16px 76px}.stats{gap:24px}}

/* trust strip */
.trust{max-width:1200px;margin:28px auto 0;position:relative;z-index:2;padding-inline:16px}
.trust .in{background:var(--surface);border:1px solid var(--line);border-radius:22px;display:grid;grid-template-columns:repeat(4,1fr);box-shadow:0 22px 44px -28px rgba(60,10,25,.4)}
.trust .it{display:flex;gap:12px;padding:20px;align-items:flex-start;min-width:0}
.trust .it+.it{border-inline-start:1px solid var(--line)}
.trust svg{flex:none;width:30px;height:30px;color:var(--accent)}
.trust b{display:block;font-size:14.5px;line-height:1.4}
.trust span{font-size:12.5px;color:var(--muted);line-height:1.5}
@media(max-width:900px){.trust .in{grid-template-columns:1fr 1fr}.trust .it:nth-child(3){border-inline-start:0}.trust .it:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:480px){.trust .in{grid-template-columns:1fr}.trust .it+.it{border-inline-start:0;border-top:1px solid var(--line)}}

/* sections */
.sec{max-width:1200px;margin:0 auto;padding:72px 16px 0;scroll-margin-top:110px}
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.sh h2{font-family:var(--display);font-size:clamp(32px,4.6vw,46px);margin:0;line-height:1.2;color:var(--deep);font-weight:700}
.sh p{margin:6px 0 0;color:var(--muted);max-width:54ch}

/* categories */
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
@media(max-width:1000px){.cats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.cats{grid-template-columns:repeat(2,1fr);gap:14px}}
.cat{border:0;padding:0;background:none;cursor:pointer;text-align:center}
.tile{aspect-ratio:3/4;border-radius:999px 999px 18px 18px;overflow:hidden;position:relative;display:grid;place-items:center;background:radial-gradient(circle at 50% 34%,rgba(255,255,255,.55) 0 17%,transparent 18%),var(--t);transition:transform .35s}
.tile::after{content:"";position:absolute;inset:8px;border-radius:999px 999px 12px 12px;border:1px solid rgba(255,255,255,.75);pointer-events:none}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .mono{font-family:var(--display);font-size:58px;color:var(--deep);opacity:.85;margin-top:-8%}
.cat:hover .tile{transform:translateY(-5px)}
.cat b{display:block;margin-top:10px;font-size:15px;line-height:1.4}
.cat small{color:var(--muted);font-size:12.5px}

/* product cards */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 18px}
@media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.grid{grid-template-columns:repeat(2,1fr);gap:22px 12px}}
.pc{display:flex;flex-direction:column;gap:8px;cursor:pointer;min-width:0}
.pc .media{aspect-ratio:4/5;border-radius:999px 999px 16px 16px;overflow:hidden;position:relative;transition:transform .35s}
.pc:hover .media{transform:translateY(-4px)}
.mbox,.ph{width:100%;height:100%;position:relative}
.mbox{overflow:hidden}
.mbox img{width:100%;height:100%;display:block}
.ph{display:grid;place-items:center}
.ph svg{position:absolute;width:72%;max-width:150px}
.ph .mono{position:relative;font-family:var(--display);font-size:46px;color:var(--deep);opacity:.8}
.chip{position:absolute;bottom:10px;inset-inline-start:10px;background:rgba(255,255,255,.94);color:var(--deep);font-size:11.5px;font-weight:600;border-radius:999px;padding:2px 10px}
.cat-l{font-size:12px;color:var(--gold);font-weight:500}
.pc h3{font-size:15px;margin:0;line-height:1.45;font-weight:600}
.price{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.price b{font-size:17px}
.price span{font-size:12.5px;color:var(--leaf);font-weight:600}
.pc .add{margin-top:auto;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:9px;font-weight:600;color:var(--deep);cursor:pointer;font-size:14px}
.pc .add:hover{background:var(--deep);color:var(--on-deep);border-color:var(--deep)}

/* wholesale band */
.wband{margin-top:84px;background:var(--deep);color:var(--on-deep);scroll-margin-top:110px;background-image:radial-gradient(60% 120% at 0% 100%,var(--deep-2),transparent 70%)}
.wband .in{max-width:1200px;margin:0 auto;padding:64px 16px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.wband h2{font-family:var(--display);font-size:clamp(32px,4.8vw,50px);margin:12px 0 14px;line-height:1.2;text-wrap:balance}
.wband p{color:#f3d4cf;max-width:50ch;margin:0 0 26px;font-size:16px}
.demo{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:24px;font-variant-numeric:tabular-nums}
.demo small{color:#efc6c0}
.rowx{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.18)}
.bar{height:10px;background:rgba(255,255,255,.16);border-radius:9px;overflow:hidden;margin:16px 0 10px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#f0cf8a);border-radius:9px;transition:width .4s}
.cmp{display:flex;justify-content:space-between;gap:12px;align-items:flex-end}
.cmp s{display:block;font-size:18px;opacity:.7}
.cmp b{display:block;font-family:var(--num);font-size:36px;line-height:1;color:#ffe2a8}
@media(max-width:860px){.wband .in{grid-template-columns:1fr;gap:28px;padding:48px 16px}}

/* story */
.story-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:30px;padding:44px}
.st-art{width:100%;max-width:300px;margin:0 auto;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),transparent 70%)}
.st-art svg{width:100%;height:100%}
.story-in h2{font-family:var(--display);font-size:clamp(32px,4.4vw,46px);color:var(--deep);margin:10px 0 12px;line-height:1.2}
.lead{font-size:17px;line-height:1.9;margin:0 0 14px;max-width:60ch}
@media(max-width:800px){.story-in{grid-template-columns:1fr;padding:26px;gap:20px}.st-art{max-width:200px}}

/* footer */
footer{margin-top:88px;background:var(--deep-2);color:#ead2d5;scroll-margin-top:90px}
footer .in{max-width:1200px;margin:0 auto;padding:48px 16px calc(28px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:1.3fr 1fr .8fr;gap:36px}
footer h4{margin:0 0 14px;font-size:13px;letter-spacing:.06em;color:#d9b779;font-weight:600}
.brandf b{display:block;font-family:var(--logo);font-size:40px;color:#fff;line-height:1.1}
.brandf small{color:#cfa9ae}
footer p{color:#d9bcc0;max-width:44ch;font-size:14px}
footer a{color:#fff;text-decoration:none}
.ci{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start}
.ci svg{width:20px;height:20px;flex:none;color:#d9b779;margin-top:3px}
.ci small{display:block;color:#cfa9ae;font-size:12px}
.ci span,.ci a{display:block;overflow-wrap:anywhere}
.ci a.sm{font-size:13px;color:#d9b779;margin-top:2px}
.fl{display:block;background:none;border:0;padding:4px 0;cursor:pointer;color:#ead2d5;text-align:start}
.fl:hover{color:#fff}
.socials{display:flex;gap:10px;margin-top:16px}
.socials a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center}
.socials svg{width:19px;height:19px}
.copy{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;font-size:12.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:#cfa9ae}
@media(max-width:800px){footer .in{grid-template-columns:1fr;gap:28px}}

/* floating whatsapp */
.fwa{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom,0px));right:18px;z-index:30;display:flex;align-items:center;gap:8px;background:#1d8a4b;color:#fff;border-radius:999px;padding:12px 18px;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);text-decoration:none;font-weight:600;font-size:14px;border:0;cursor:pointer}
.fwa svg{width:22px;height:22px}
@media(max-width:600px){.fwa span{display:none}.fwa{padding:14px}}

/* shop */
.shop-top{max-width:1200px;margin:0 auto;padding:44px 16px 0}
.shop-top h1{font-family:var(--display);font-size:clamp(38px,5.4vw,56px);margin:0;color:var(--deep);line-height:1.2}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:20px 0 8px}
.search{flex:1 1 240px;min-width:0;padding:11px 18px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:inherit;color:var(--ink)}
.sort{padding:11px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:inherit;color:var(--ink)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:8px 0 4px}
.chips button{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 16px;font-size:14px;cursor:pointer}
.chips button.on{background:var(--deep);border-color:var(--deep);color:var(--on-deep)}

/* product page */
.pp{max-width:1200px;margin:0 auto;padding:20px 16px 0}
.back{background:none;border:0;cursor:pointer;color:var(--muted);padding:6px 0;display:inline-flex;gap:6px;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;margin-top:10px}
.pmedia{aspect-ratio:4/5;border-radius:999px 999px 26px 26px;overflow:hidden;position:sticky;top:96px;box-shadow:0 30px 60px -40px rgba(60,10,25,.5)}
.info h1{font-family:var(--display);font-size:clamp(34px,4.8vw,52px);margin:6px 0 12px;line-height:1.2;color:var(--deep)}
.pbox{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px;display:grid;gap:16px;margin:20px 0 8px}
.big{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--deep)}
.big small{font-size:14px;color:var(--muted);font-weight:500}
.wn{background:var(--accent-soft);color:var(--deep);border-radius:12px;padding:10px 14px;font-size:13.5px}
.lbl{font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:600}
.vars{display:flex;flex-wrap:wrap;gap:8px}
.vars button{border:1px solid var(--line);background:var(--ground);border-radius:12px;padding:8px 14px;cursor:pointer;font-size:14px}
.vars button.on{border-color:var(--deep);background:var(--deep);color:var(--on-deep)}
.qrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.qrow .btn{flex:1 1 180px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface)}
.qty button{width:42px;height:44px;border:0;background:var(--ground);font-size:18px;cursor:pointer}
.qty span{min-width:44px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.qty.sm button{width:30px;height:30px;font-size:15px}
.qty.sm span{min-width:30px}
.info h3{font-family:var(--display);font-size:26px;margin:26px 0 6px;color:var(--deep);font-weight:700}
.info ul{margin:0;padding-inline-start:20px}
.ingr{display:flex;flex-wrap:wrap;gap:6px}
.ingr span{background:var(--accent-soft);border-radius:999px;padding:3px 12px;font-size:13.5px}
@media(max-width:800px){.grid2{grid-template-columns:1fr;gap:18px}.pmedia{position:relative;top:auto;max-width:380px;width:100%;margin:0 auto}}

/* policies */
.pol{max-width:780px;margin:0 auto;padding:44px 16px 0}
.pol h1{font-family:var(--display);font-size:clamp(38px,5vw,54px);color:var(--deep);margin:0 0 10px}
.pol section{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px;margin-top:16px;scroll-margin-top:110px}
.pol h2{font-family:var(--display);font-size:28px;color:var(--deep);margin:0 0 8px}

/* cart drawer */
.ov{position:fixed;inset:0;background:rgba(30,6,14,.45);z-index:50;display:flex;justify-content:flex-end}
.drawer{background:var(--ground);width:min(460px,100%);height:100%;overflow-y:auto;padding:20px 18px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px}
.dh{display:flex;justify-content:space-between;align-items:center}
.dh h2{font-family:var(--display);font-size:34px;margin:0;color:var(--deep)}
.x{background:none;border:0;font-size:30px;line-height:1;color:var(--muted);cursor:pointer;padding:2px 8px}
.cl{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.th{width:56px;height:70px;border-radius:999px 999px 10px 10px;overflow:hidden}
.th .ph .mono{font-size:22px}
.cl small{color:var(--muted);display:block;font-size:12.5px}
.cl .qty{margin-top:6px}
.meter{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;font-size:14px}
.meter .bar{background:var(--accent-soft);margin:10px 0 0}
.ok{color:var(--leaf)}
.sum{display:grid;gap:6px;font-variant-numeric:tabular-nums}
.sum div{display:flex;justify-content:space-between;gap:10px}
.sum .sv{color:var(--leaf);font-weight:600}
.sum .tot{font-size:20px;font-weight:700;color:var(--deep);border-top:1px solid var(--line);padding-top:10px}
.form{display:grid;gap:10px;margin-top:6px}
.form label{display:grid;gap:4px;font-size:13px;color:var(--muted)}
.form input,.form textarea{padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font:inherit;color:var(--ink);width:100%}
.err{color:#b3261e;font-size:13.5px;margin:0}
.ready{display:grid;gap:12px}
.ready h3{font-family:var(--display);font-size:28px;color:var(--deep);margin:0}
.msg{white-space:pre-wrap;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;font:inherit;font-size:13.5px;margin:0;max-height:260px;overflow:auto;user-select:all}

.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 20px;border-radius:999px;z-index:95;font-size:14px;max-width:calc(100% - 32px);text-align:center;box-shadow:0 10px 30px -12px rgba(0,0,0,.5)}

/* admin */
.adm{position:fixed;inset:0;z-index:70;background:#f6f1f0;display:flex;flex-direction:column;font-size:14px;color:var(--ink)}
.adm-h{display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;background:var(--deep-2);color:#fff;flex-wrap:wrap}
.adm-h b{font-family:var(--display);font-weight:700;font-size:20px}
.adm-h .adm-s{opacity:.7;font-size:13px}
.adm-x{margin-inline-start:auto;background:rgba(255,255,255,.12);border:0;color:#fff;border-radius:999px;padding:8px 14px;cursor:pointer}
.adm-tabs{display:flex;gap:4px;padding:8px 16px;background:#fff;border-bottom:1px solid var(--line);overflow-x:auto}
.adm-tabs button{flex:none;border:0;background:none;padding:9px 14px;border-radius:10px;cursor:pointer;font-weight:600;color:var(--muted)}
.adm-tabs button.on{background:var(--accent-soft);color:var(--deep)}
.adm-b{flex:1;overflow-y:auto;padding:16px}
.adm-b .wrap{max-width:1000px;margin:0 auto;display:grid;gap:14px}
.adm-f{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--line);flex-wrap:wrap}
.adm-f .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#d9822b;margin-inline-end:4px}
.adm-f .acts{display:flex;gap:8px}
.adm-f .btn{padding:10px 18px}
.card-a{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;display:grid;gap:14px}
.card-a h3{margin:0;font-size:16px}
.hint{color:var(--muted);font-size:12.5px;margin:0}
.atop{display:flex;gap:8px;flex-wrap:wrap}
.atop input,.atop select{flex:1 1 180px;min-width:0;padding:10px 12px;border:1px solid #e3d2d6;border-radius:10px;font:inherit;background:#fff;color:var(--ink)}
.arow{display:grid;grid-template-columns:52px minmax(0,1fr) 96px 96px auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.arow.off{opacity:.55}
.athumb{width:52px;height:64px;border-radius:999px 999px 8px 8px;overflow:hidden}
.athumb .ph .mono{font-size:20px}
.ainfo b{display:block;font-size:14px;line-height:1.4}
.ainfo small{color:var(--muted);font-size:12px}
.ainfo em{color:#b5651d;font-style:normal}
.ap{display:grid;gap:2px;font-size:11.5px;color:var(--muted)}
.ap input{width:100%;padding:7px 8px;border:1px solid #e3d2d6;border-radius:8px;font:inherit;background:#fff;color:var(--ink)}
.atg{display:inline-flex;gap:6px;align-items:center;font-size:13px;cursor:pointer}
.abtns{display:flex;gap:6px}
.abtns button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 12px;cursor:pointer;font-size:13px}
.abtns button.del{color:#b3261e}
.abtns button[disabled]{opacity:.35;cursor:default}
.abtns button svg{display:block}
@media(max-width:760px){.arow{grid-template-columns:52px 1fr 1fr;row-gap:8px}.arow .ainfo{grid-column:2/-1}.arow .athumb{grid-row:span 2}.arow .atg,.arow .abtns{grid-column:2/-1}}
.fld{display:grid;gap:5px;min-width:0;align-content:start}
.fld>span{font-size:12.5px;color:var(--muted);font-weight:600}
.fld em{font-style:normal;color:var(--accent)}
.fld input,.fld textarea,.fld select{padding:9px 12px;border:1px solid #e3d2d6;border-radius:10px;font:inherit;background:#fff;color:var(--ink);width:100%}
.fld textarea{resize:vertical;line-height:1.6}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:640px){.two,.three{grid-template-columns:1fr}}
.ltabs{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:#fff}
.ltabs button{border:0;background:none;padding:5px 12px;border-radius:999px;cursor:pointer;font-size:13px;font-weight:600;color:var(--muted)}
.ltabs button.on{background:var(--deep);color:#fff}
.lrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.crow{display:grid;grid-template-columns:28px repeat(3,minmax(0,1fr)) auto;gap:10px;align-items:end;padding:10px 0;border-bottom:1px solid var(--line)}
.crow .cnum{font-weight:700;color:var(--muted);padding-bottom:10px}
@media(max-width:760px){.crow{grid-template-columns:1fr}.crow .cnum{padding:0}}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.sw{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:8px 12px;cursor:pointer}
.sw i{width:22px;height:22px;border-radius:50%;display:block}
.sw.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.upl{position:relative;overflow:hidden}
.ed{position:fixed;inset:0;z-index:80;background:rgba(30,6,14,.5);display:grid;place-items:center;padding:16px}
.ed .box{background:#fff;border-radius:20px;width:min(860px,100%);max-height:100%;overflow-y:auto;padding:20px;display:grid;gap:16px;color:var(--ink)}
.edh{display:flex;justify-content:space-between;align-items:center;gap:10px}
.edh h3{margin:0;font-size:18px}
.edgrid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px}
.edimg{display:grid;gap:10px;align-content:start}
.edimg .prev{aspect-ratio:4/5;border-radius:999px 999px 16px 16px;overflow:hidden;border:1px solid var(--line)}
.zoom{display:grid;gap:6px}
.zoom>span{font-size:12.5px;color:var(--muted);font-weight:600;display:flex;justify-content:space-between}
.zoom>span b{color:var(--deep);font-variant-numeric:tabular-nums}
.zrow{display:flex;align-items:center;gap:8px}
.zrow input{flex:1;min-width:0;accent-color:var(--deep)}
.zrow button{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:18px;line-height:1;color:var(--deep)}
#ed-prev{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;position:relative}
#ed-prev:active{cursor:grabbing}
#ed-prev img{pointer-events:none;-webkit-user-drag:none}
#ed-prev.has::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) 33.3% 0/1px 100% no-repeat,linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) 66.6% 0/1px 100% no-repeat,linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) 0 33.3%/100% 1px no-repeat,linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) 0 66.6%/100% 1px no-repeat}
.edf{display:grid;gap:12px;align-content:start}
.tgls{display:flex;gap:16px;flex-wrap:wrap}
.edf-a{display:flex;gap:8px;justify-content:flex-end}
@media(max-width:700px){.edgrid{grid-template-columns:1fr}.edimg .prev{width:min(260px,100%);justify-self:center}}
.vars button{display:inline-flex;align-items:center;gap:8px}
.vt{width:26px;height:26px;border-radius:50%;overflow:hidden;display:block;flex:none;margin-inline-start:-6px}
.tlabel{font-size:12.5px;color:var(--muted);font-weight:600;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tlabel b{color:var(--deep)}
.vimgs{display:grid;gap:10px;border:1px dashed #e3d2d6;border-radius:12px;padding:12px}
.vimgs h4{margin:0;font-size:13.5px}
.vrow{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:10px;align-items:center}
.vth{width:44px;height:54px;border-radius:999px 999px 8px 8px;overflow:hidden;border:1px dashed #e3d2d6;background:#faf5f6;padding:0;cursor:pointer;display:grid;place-items:center;color:var(--muted);font-size:18px}
.vth[disabled]{cursor:default}
.vrow.on .vth{outline:2px solid var(--deep);outline-offset:2px}
.vrow .btn{padding:7px 12px;font-size:13px}
.vname{display:grid;gap:4px;min-width:0}
.vpr{display:flex;gap:8px;flex-wrap:wrap}
.vpr label{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.vpr input{width:64px;padding:4px 6px;border:1px solid #e3d2d6;border-radius:8px;font:inherit;background:#fff;color:var(--ink)}
.ap b{font-size:13.5px;font-variant-numeric:tabular-nums}
/* plain headings: same sizes, simple lettering */
.hero h1{line-height:1.3}
.sh h2,.shop-top h1,.info h1,.wband h2,.story-in h2,.pol h1,.pol h2,.dh h2,.thx-c h2,.ready h3,.info h3{line-height:1.35}
.tile .mono,.ph .mono{font-weight:600}
/* cover background slider */
.hero{min-height:clamp(480px,74vh,720px);display:grid;align-items:center}
.hero canvas{z-index:2}
.hero .eyebrow::after{content:"";width:30px;height:1px;background:currentColor}
.hero.has-bg h1,.hero.has-bg .sub{text-shadow:0 2px 18px rgba(0,0,0,.4)}
.hbg{position:absolute;inset:0;z-index:0;background:#1a0710}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.slide.on{opacity:1}
.slide img,.slide video{width:100%;height:100%;object-fit:cover;display:block}
.slide.on img{animation:kb 9s ease-out both}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.07)}}
.hshade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(26,4,12,calc(var(--shade) * .8)) 0%,rgba(26,4,12,var(--shade)) 50%,rgba(26,4,12,min(1,calc(var(--shade) + .15))) 100%)}
.hrose{position:absolute;left:50%;top:50%;width:min(640px,130vw);aspect-ratio:1;transform:translate(-50%,-50%);opacity:.14;pointer-events:none;z-index:1}
.hrose svg{width:100%;height:100%;display:block}
.hdots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:2px;z-index:3}
.hdots button{width:30px;height:30px;border:0;background:none;cursor:pointer;display:grid;place-items:center;padding:0}
.hdots button::before{content:"";width:8px;height:8px;border-radius:5px;background:rgba(255,243,241,.5);transition:width .3s,background .3s}
.hdots button.on::before{width:22px;background:var(--on-deep)}
/* moving strip */
.ticker{background:#e9f2ec;color:#2b4a39;overflow:hidden;border-block:1px solid #d2e4d8}
.tk-track{display:flex;width:max-content;animation:tk var(--dur,48s) linear infinite}
.ticker:hover .tk-track{animation-play-state:paused}
.tk-set,.tk-rep{display:flex;flex:none}
.tk-rep{display:contents}
.tk-item{display:inline-flex;align-items:center;gap:34px;padding:11px 0;padding-inline-end:34px;font-size:14px;font-weight:600;white-space:nowrap}
.tk-item::after{content:"✿";color:#8db59c;font-size:12px}
@keyframes tk{to{transform:translateX(-50%)}}
[dir=rtl] .tk-track{animation-name:tkr}
@keyframes tkr{to{transform:translateX(50%)}}
/* cash on delivery */
.cod{display:flex;gap:12px;align-items:center;background:#edf6ef;border:1px solid #cde3d1;color:#21492b;border-radius:14px;padding:12px 14px;text-align:start}
.cod svg{width:30px;height:30px;flex:none;color:#2f7a43}
.cod b{display:block;font-size:15.5px;line-height:1.35}
.cod span{display:block;font-size:13px;color:#3b6946;line-height:1.45}
/* thank-you */
.thx{position:fixed;inset:0;z-index:96;background:rgba(30,6,14,.55);display:grid;place-items:center;padding:16px}
.thx-c{background:var(--surface);border-radius:26px;max-width:420px;width:100%;padding:28px 22px 22px;text-align:center;display:grid;gap:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);animation:pop .35s ease-out}
@keyframes pop{from{transform:scale(.92);opacity:0}}
.thx-c h2{font-family:var(--display);font-size:36px;color:var(--deep);margin:0;line-height:1.2}
.thx-c p{margin:0;color:var(--muted)}
.thx-c .seal{width:86px;height:86px;margin:0 auto}
.thx-c .seal svg{width:100%;height:100%}
.tbar{height:4px;background:var(--accent-soft);border-radius:4px;overflow:hidden}
.tbar i{display:block;height:100%;width:0;background:var(--deep);animation:tb 3s linear forwards}
.pmedia.flash{animation:vflash .6s ease-out}
@keyframes vflash{from{opacity:.35;transform:scale(.985)}}
.pmedia .chip{bottom:14px;inset-inline-start:14px;font-size:13px;padding:4px 12px}
@keyframes tb{to{width:100%}}
/* story background */
.story-in{position:relative;overflow:hidden}
.sbg,.sshade{position:absolute;inset:0;z-index:0}
.sbg img{width:100%;height:100%;object-fit:cover;display:block}
.sshade{background:rgba(26,4,12,var(--shade))}
.story-in>.st-art,.story-in>div:last-child{position:relative;z-index:1}
.story-in.has-bg{border-color:transparent;color:var(--on-deep)}
.story-in.has-bg h2{color:#fff}
.story-in.has-bg .eyebrow.dk{color:#e9c98a}
.story-in.has-bg .lead{color:#f6e3e0}
.story-in.has-bg .st-art{background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%)}
/* admin: backgrounds */
.slist{display:grid;gap:4px}
.srow{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.sthumb{position:relative;width:96px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--line);padding:0;cursor:crosshair;background:#1a0710}
.sthumb img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.vtag{position:absolute;top:4px;inset-inline-start:4px;background:rgba(0,0,0,.6);color:#fff;font-size:10.5px;border-radius:6px;padding:0 6px;pointer-events:none}
.fdot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid #fff;background:var(--accent);box-shadow:0 0 0 1px rgba(0,0,0,.4);pointer-events:none}
.sinfo b{display:block;font-size:14px}
.vprev{position:relative;aspect-ratio:16/7;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:radial-gradient(110% 90% at 80% 0%,color-mix(in srgb,var(--accent) 55%,var(--deep)) 0%,var(--deep) 46%,var(--deep-2) 100%)}
.vprev.sm{aspect-ratio:16/6}
.vprev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vshade{position:absolute;inset:0;background:rgba(26,4,12,var(--shade))}
.vprev b{position:relative;color:#fff;font-family:var(--display);font-weight:700;font-size:clamp(20px,4vw,30px);text-align:center;padding:0 12px;text-shadow:0 2px 14px rgba(0,0,0,.35)}
@media(prefers-reduced-motion:reduce){.tk-track{animation:none}.ticker{overflow-x:auto}.slide{transition:none}.slide.on img{animation:none}.thx-c{animation:none}.pmedia.flash{animation:none}.tbar i{animation:none;width:100%}}
/* phones */
@media(max-width:600px){
 .hdr .in{padding:8px 14px;gap:10px}
 .brand b{font-size:25px}
 .lang button{padding:6px 10px}
 .cartb{height:38px;padding:0 10px}
 .hero{min-height:clamp(460px,78vh,640px)}
 .hero .in{padding:56px 16px 66px}
 .hero h1{font-size:clamp(34px,10.5vw,46px);margin:12px 0 14px}
 .hero .sub{font-size:15.5px;margin-bottom:24px}
 .cta .btn{padding:11px 18px;font-size:14.5px}
 .stats{gap:22px;margin-top:28px}
 .stats b{font-size:32px}
 .trust{margin-top:20px}
 .trust .in{grid-template-columns:1fr 1fr}
 .trust .it{flex-direction:column;gap:6px;padding:14px}
 .trust .it+.it{border-inline-start:0;border-top:0}
 .trust .it:nth-child(even){border-inline-start:1px solid var(--line)}
 .trust .it:nth-child(n+3){border-top:1px solid var(--line)}
 .trust svg{width:26px;height:26px}
 .sec{padding-top:52px}
 .sh{margin-bottom:18px}
 .cats{grid-template-columns:repeat(3,1fr);gap:12px 10px}
 .tile .mono{font-size:40px}
 .cat b{font-size:13px;margin-top:6px}
 .cat small{font-size:11.5px}
 .grid{gap:20px 12px}
 .pc h3{font-size:14px}
 .price b{font-size:15.5px}
 .pc .add{padding:10px 6px;font-size:13.5px}
 .wband{margin-top:60px}
 .story-in{padding:22px}
 .lead{font-size:16px}
 .pbox{padding:16px}
 .search,.sort,.form input,.form textarea,.fld input,.fld textarea,.fld select,.atop input,.atop select,.ap input{font-size:16px}
 .qty.sm button{width:36px;height:36px}
 .tk-item{font-size:13.5px;padding:10px 0}
 footer{margin-top:64px}
 footer .in{padding-top:36px;gap:24px;padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
 .fwa{bottom:calc(14px + env(safe-area-inset-bottom,0px));right:14px}
 .srow{grid-template-columns:80px minmax(0,1fr)}
 .srow .abtns{grid-column:1/-1}
 .sthumb{width:80px;height:56px}
}

/* ---------- links instead of buttons (real pages, shareable addresses) ---------- */
a.brand,a.cat,a.back,a.fl,.chips a,.nav a,a.btn,a.link{text-decoration:none}
a.brand{color:inherit}
.nav a{background:none;border:0;padding:8px 12px;border-radius:999px;cursor:pointer;font-weight:500;color:var(--ink)}
.nav a:hover,.nav a.on{background:var(--accent-soft);color:var(--deep)}
a.cat{display:block;color:inherit}
.chips a{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 16px;font-size:14px;color:var(--ink)}
.chips a.on{background:var(--deep);border-color:var(--deep);color:var(--on-deep)}
a.back{color:var(--muted)}
a.fl{color:#ead2d5}
a.fl:hover{color:#fff}
.pc-a{display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none;min-width:0}
.boot{min-height:100vh;background:linear-gradient(var(--deep-2),var(--deep-2)) top/100% 64px no-repeat}
.nojs{padding:24px 16px;text-align:center}

/* ---------- reviews ---------- */
.stars{color:#c8952f;letter-spacing:1px;white-space:nowrap}
.stars i{font-style:normal;color:#e6d9c6}
.rsum{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);margin-bottom:6px}
.rlist{display:grid}
.rv{border-top:1px solid var(--line);padding:14px 0;display:grid;gap:4px}
.rv b{font-size:14.5px}
.rv small{color:var(--muted);font-size:12px}
.rv p{margin:0;white-space:pre-line}
.rform{display:grid;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;margin-top:12px}
.rform label{display:grid;gap:4px;font-size:13px;color:var(--muted)}
.rform input,.rform textarea{padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font:inherit;color:var(--ink);width:100%}
.rate{display:flex;gap:2px}
.rate button{border:0;background:none;font-size:30px;line-height:1;color:#e6d9c6;cursor:pointer;padding:2px 3px}
.rate button.on{color:#c8952f}
.okmsg{background:#edf6ef;color:#21492b;border-radius:12px;padding:12px 14px}
.alert{background:#fdecec;color:#8a1c1c;border:1px solid #f3c7c7;border-radius:12px;padding:12px 14px;font-size:14px}
.rvgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rvcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;display:grid;gap:8px;align-content:start}
.rvcard p{margin:0;white-space:pre-line}
.rvcard a{color:var(--muted);font-size:13px;text-decoration:none}
@media(max-width:860px){.rvgrid{grid-template-columns:1fr}}

/* ---------- top bar: smaller while scrolling ---------- */
.hdr .in{transition:padding .25s ease}
.hdr .brand b{transition:font-size .25s ease}
.hdr.small{box-shadow:0 6px 18px -14px rgba(60,10,25,.45)}
.hdr.small .in{padding-block:4px}
.hdr.small .brand b{font-size:24px}
.hdr.small .brand small{display:none}
.hdr.small .cartb{height:34px}
.hdr.small .lang button{padding-block:3px}
.hdr.small .nav a,.hdr.small .nav button{padding-block:5px}
@media(max-width:600px){.hdr.small .in{gap:4px 10px}.hdr.small .brand b{font-size:21px}}
@media(prefers-reduced-motion:reduce){.hdr .in,.hdr .brand b{transition:none}}
/* ---------- added to cart: photo flies to the cart, the cart pulses, an arrow points at it ---------- */
.fly{position:fixed;z-index:97;border-radius:50%;overflow:hidden;background:var(--surface);box-shadow:0 10px 30px -8px rgba(60,10,25,.55);border:3px solid #fff;pointer-events:none;display:grid;place-items:center;color:var(--deep)}
.fly img{width:100%;height:100%;object-fit:cover;display:block}
.fly svg{width:55%;height:55%}
.cartb.ping::after{content:"";position:absolute;inset:-3px;border-radius:999px;border:2px solid var(--accent);animation:ping 1.2s ease-out 4;pointer-events:none}
@keyframes ping{from{transform:scale(1);opacity:.95}to{transform:scale(1.6);opacity:0}}
.chint{position:absolute;top:calc(100% + 12px);inset-inline-end:-4px;display:inline-flex;align-items:center;gap:6px;background:var(--deep);color:var(--on-deep);font-size:13px;font-weight:700;white-space:nowrap;border-radius:12px;padding:7px 12px;box-shadow:0 10px 24px -10px rgba(60,10,25,.6);animation:nudge .9s ease-in-out infinite;z-index:3}
.chint::before{content:"";position:absolute;bottom:100%;inset-inline-end:18px;border:8px solid transparent;border-bottom-color:var(--deep)}
.chint svg{width:16px;height:16px;flex:none;stroke-width:2.4}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.toast.has-act{display:flex;align-items:center;gap:12px;padding:7px 7px 7px 7px;padding-inline-start:18px;white-space:nowrap}
.toast button{background:var(--on-deep);color:var(--deep);border:0;border-radius:999px;padding:8px 16px;font-weight:700;font-size:14px;cursor:pointer}
@media(prefers-reduced-motion:reduce){.chint{animation:none}.cartb.ping::after{animation:none;opacity:0}}
/* order form: what the details are used for */
.fnote{margin:2px 0 0;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.5}
.fnote a{color:var(--deep);font-weight:600}
/* dashboard: unfinished order forms, Excel */
.st-abandoned{--st:#898781}
.xrow{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
.xrow label{display:grid;gap:3px;font-size:12.5px;color:var(--muted);font-weight:600}
.xrow input{padding:8px 10px;border:1px solid #e3d2d6;border-radius:10px;font:inherit;background:#fff;color:var(--ink)}
.xrow .ochips{flex:1 1 auto}
.oact .abtns .btn{padding:7px 12px;font-size:13px}
/* cart: back to the shop to add more products */
.addmore{display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px dashed color-mix(in srgb,var(--accent) 55%,transparent);background:var(--accent-soft);color:var(--deep);border-radius:14px;padding:12px;font-weight:700;text-decoration:none;font-size:15px}
.addmore svg{width:20px;height:20px;stroke-width:2.2}
.addmore:hover{background:color-mix(in srgb,var(--accent-soft) 70%,var(--accent) 12%)}
/* a type with its own price */
.vars .vp{font-size:12px;opacity:.75;font-variant-numeric:tabular-nums}

/* ---------- your own brand ---------- */
.nav a,.nav button{flex:none;white-space:nowrap}
@media(max-width:600px){.nav a,.nav button{padding:7px 8px;font-size:14.5px}}
.bbar{background:var(--accent-soft);border-bottom:1px solid var(--line);color:var(--deep)}
.bbar .in{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;gap:6px 10px;align-items:center;flex-wrap:wrap}
.bbar svg{width:22px;height:22px;flex:none}
.bbar p{margin:0;flex:1 1 240px;font-size:14px;line-height:1.55}
.bbar .link,.bnote .link{color:var(--deep);text-decoration:underline;font-size:13.5px}
.bband{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:30px;padding:44px}
.bband h2{font-family:var(--display);font-size:clamp(30px,4.4vw,46px);color:var(--deep);margin:10px 0 12px;line-height:1.35}
.bband p{margin:0 0 18px;max-width:56ch;font-size:16px}
.bart{display:block;width:100%;max-width:280px;margin:0 auto}
.bart .blab{font-family:var(--logo);font-weight:700;font-size:17px;fill:var(--deep)}
:root[lang=fr] .bart .blab,:root[lang=en] .bart .blab{font-size:12px}
.steps{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.steps li{display:flex;gap:10px;align-items:center;font-weight:600}
.steps i{font-style:normal;flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--deep);display:grid;place-items:center;font-size:14px;font-variant-numeric:tabular-nums}
@media(max-width:800px){.bband{grid-template-columns:1fr;padding:26px;gap:16px}.bart{max-width:190px}}
.bnote{display:flex;gap:12px;align-items:flex-start;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);color:var(--deep);border-radius:14px;padding:12px 14px}
.bnote svg{width:26px;height:26px;flex:none;margin-top:2px}
.bnote b{display:block;font-size:15px;line-height:1.4}
.bnote span{display:block;font-size:13px;line-height:1.5}
.bnote .link{margin-top:6px}
.thx-c.dlg .seal{width:64px;height:64px;border-radius:50%;background:var(--accent-soft);color:var(--deep);display:grid;place-items:center}
.thx-c.dlg .seal svg{width:30px;height:30px}
.thx-c.dlg p{color:var(--ink);line-height:1.8}
.dlg-a{display:flex;gap:10px;flex-wrap:wrap}
.dlg-a .btn{flex:1 1 140px}

/* ---------- order, not found ---------- */
.ordno{font-size:15px;color:var(--deep);font-weight:700}
.nf{max-width:640px;margin:0 auto;padding:80px 16px 0;text-align:center;display:grid;gap:14px;justify-items:center}
.nf h1{font-size:clamp(30px,6vw,44px);margin:0;color:var(--deep)}

/* ---------- dashboard ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(110% 90% at 80% 0%,color-mix(in srgb,var(--accent) 55%,var(--deep)) 0%,var(--deep) 46%,var(--deep-2) 100%)}
.login form{background:#fff;border-radius:22px;padding:26px 22px;width:min(380px,100%);display:grid;gap:14px;box-shadow:0 30px 60px -24px rgba(0,0,0,.5)}
.login .logo-l{font-family:var(--logo);font-size:36px;color:var(--deep);text-align:center;line-height:1.2}
.login p{margin:0;color:var(--muted);text-align:center;font-size:14px}
.login .err{color:#b3261e;font-weight:600;background:#fdecea;border-radius:10px;padding:8px 10px}
.adm-tabs button i{font-style:normal;background:var(--accent);color:#fff;border-radius:9px;padding:0 6px;font-size:11px;margin-inline-start:6px}
.adm-h a{color:#fff;text-decoration:none;background:rgba(255,255,255,.12);border-radius:999px;padding:8px 14px;font-size:13.5px}
.adm-h .adm-x{margin-inline-start:0}
.adm-h .grow{flex:1}
.ochips{display:flex;gap:6px;flex-wrap:wrap}
.ochips button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;cursor:pointer;font-size:13px}
.ochips button.on{background:var(--deep);color:#fff;border-color:var(--deep)}
.ochips b{margin-inline-start:4px}
.ocard{background:#fff;border:1px solid var(--line);border-inline-start:5px solid var(--st,#d9822b);border-radius:14px;padding:14px;display:grid;gap:10px}
.ohead{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.ohead b{font-size:15.5px}
.ometa{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 16px;font-size:14px}
.ometa span{color:var(--muted)}
.ometa a,.rcard a{color:var(--deep);font-weight:600;text-decoration:none}
.ometa a:hover,.rcard a:hover{text-decoration:underline}
.oitems{margin:0;padding-inline-start:18px;font-size:14px}
.otot{font-weight:700;color:var(--deep)}
.oact{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.oact select{padding:8px 10px;border:1px solid #e3d2d6;border-radius:10px;font:inherit;background:#fff;color:var(--ink)}
.oact textarea{flex:1 1 220px;min-width:0;padding:8px 10px;border:1px solid #e3d2d6;border-radius:10px;font:inherit;resize:vertical}
.st-new{--st:#fab219}.st-confirmed{--st:#3d5bb5}.st-shipped{--st:#7a52b3}.st-delivered{--st:#0ca30c}.st-refused{--st:#d03b3b}.st-cancelled{--st:#898781}
.sbadge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:600;background:#f6f1f0;color:var(--ink)}
.sbadge::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--st)}
.otitle{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bbadge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:700;background:var(--deep);color:#fff}
.bbadge svg{width:15px;height:15px}
.bline{display:flex;gap:8px;align-items:center;background:var(--accent-soft);color:var(--deep);border-radius:10px;padding:8px 12px;font-size:14px}
.bline svg{width:18px;height:18px;flex:none}
.ochips button svg{width:15px;height:15px;vertical-align:-3px;margin-inline-end:4px}
.pager{display:flex;gap:8px;justify-content:center}
/* statistics */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;gap:2px}
.kpi span{font-size:13px;color:#52514e}
.kpi b{font-size:28px;font-weight:600;color:#0b0b0b;line-height:1.25}
.kpi small{font-size:12px;color:#898781}
.hbars{display:grid;gap:10px}
.hbar{display:grid;grid-template-columns:minmax(90px,170px) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13.5px}
.hbar .lab{color:#0b0b0b;overflow-wrap:anywhere}
.hbar .track{height:14px;position:relative}
.hbar .fill{position:absolute;inset-block:0;inset-inline-start:0;background:#c0396a;border-start-end-radius:4px;border-end-end-radius:4px}
.hbar.status .fill{background:var(--st)}
.hbar .val{color:#52514e;font-variant-numeric:tabular-nums;white-space:nowrap}
.cols{position:relative;height:150px;display:flex;align-items:flex-end;gap:2px;border-bottom:1px solid #c3c2b7;padding-top:18px}
.cols .c{flex:1 1 0;display:flex;align-items:flex-end;justify-content:center;height:100%;min-width:0;cursor:default}
.cols .c i{display:block;width:100%;max-width:24px;background:#c0396a;border-radius:4px 4px 0 0;min-height:0}
.cols .c:hover i,.cols .c:focus i{background:#7a1636}
.cols .ymax{position:absolute;top:0;inset-inline-start:0;font-size:11px;color:#898781}
.axis{display:flex;justify-content:space-between;font-size:11px;color:#898781;margin-top:4px}
.tip{position:fixed;z-index:99;background:#0b0b0b;color:#fff;font-size:12.5px;padding:6px 10px;border-radius:8px;pointer-events:none;white-space:nowrap}
.dtable{overflow-x:auto}
.dtable table{border-collapse:collapse;width:100%;font-size:13px}
.dtable th,.dtable td{padding:6px 10px;border-bottom:1px solid var(--line);text-align:start;font-variant-numeric:tabular-nums}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:760px){.two-col{grid-template-columns:1fr}}
/* reviews in the dashboard */
.rcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:6px}
.rcard p{margin:0;white-space:pre-line}
.rcard .meta{font-size:12.5px;color:var(--muted)}
.notice{background:#fff8e6;border:1px solid #f1dfae;color:#5d4510;border-radius:12px;padding:12px 14px;font-size:13.5px}