/* Cleansy product-line pages, /en/ and 404 (built by seo/build.py). Same palette and font as index.html. */
@font-face{font-family:"Readex Pro";font-weight:160 700;font-display:swap;src:url(/assets/readex-pro-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Readex Pro";font-weight:160 700;font-display:swap;src:url(/assets/readex-pro-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2122,U+2212}
:root{
  --ink:#24302a;--ink-2:#55605a;--red:#b0141c;--red-2:#d23a33;--sun:#f5c445;--sun-soft:#fdf3d4;
  --sage:#6f8467;--sage-d:#4c6145;--sage-soft:#e6ece1;--sand:#f4f0e8;--paper:#fffdf9;--line:#e5dfd2;
  --wa:#1faa59;--r:24px;--ease:cubic-bezier(.22,.8,.24,1);--shadow:0 26px 50px -34px rgba(40,50,35,.55)
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{font-family:"Readex Pro",Tahoma,sans-serif;font-size:17px;line-height:1.8;color:var(--ink);background:var(--paper);overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--red-2);outline-offset:3px;border-radius:8px}
.wrap{width:min(1160px,100% - 36px);margin-inline:auto}
.i{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ltr{direction:ltr;unicode-bidi:isolate}
.ltr[dir=ltr]{white-space:nowrap}
em{font-style:normal;color:var(--sage-d)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:50px;padding:.7em 1.4em;border-radius:999px;font-weight:600;transition:transform .3s var(--ease),background .3s}
.btn:hover{transform:translateY(-2px)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 14px 28px -14px rgba(31,170,89,.9)}
.btn-wa:hover{background:#178f4a}
.btn-line{border:1.5px solid var(--line);background:#fff}
.btn-line:hover{border-color:var(--sage)}

/* header */
.hdr{position:sticky;top:0;z-index:30;background:rgba(255,253,249,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:68px}
.brand img{height:46px;width:auto}
.hdr nav{display:flex;gap:4px}
.hdr nav a{padding:8px 14px;border-radius:999px;color:var(--ink-2);font-size:.95rem}
.hdr nav a:hover{background:var(--sand)}
.hdr .btn{min-height:44px;padding:.45em 1.1em;font-size:.92rem}
@media (max-width:860px){.hdr nav{display:none}}
@media (max-width:400px){.hdr .btn span{display:none}.hdr .btn{width:44px;padding:0}}

/* hero */
.phero{position:relative;overflow:clip;background:radial-gradient(900px 500px at 15% 20%,var(--sage-soft),transparent 60%),radial-gradient(700px 400px at 90% 90%,var(--sun-soft),transparent 60%),var(--sand);padding:22px 0 52px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;list-style:none;font-size:.85rem;color:var(--ink-2);margin-bottom:18px}
.crumbs li+li::before{content:"‹";margin-inline-end:6px;opacity:.6}
.crumbs a:hover{color:var(--red)}
.ph-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center}
.ph-grid>*{min-width:0}
.kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:.86rem;font-weight:600;color:var(--sage-d)}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red-2)}
h1{margin-top:14px;font-size:clamp(1.9rem,5.2vw,3.1rem);line-height:1.28;font-weight:700}
.lead{margin-top:12px;color:var(--ink-2);max-width:36rem;font-size:1.06rem}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.stage{position:relative;aspect-ratio:1/1;max-width:440px;width:100%;margin-inline:auto}
.stage::before{content:"";position:absolute;inset:4%;border-radius:50%;background:#fff}
.stage .ring{position:absolute;inset:0;border-radius:50%;border:2px dashed rgba(111,132,103,.35);animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.stage img{position:absolute;inset:14%;width:72%;height:72%;object-fit:cover;object-position:var(--pos,50% 50%);border-radius:28px;border:6px solid #fff;background:var(--bg,#fff);box-shadow:0 30px 50px -26px rgba(40,50,35,.6);animation:float 6s ease-in-out infinite}
.stage img.pack{object-fit:contain;padding:6%}
@keyframes float{50%{transform:translateY(-12px) rotate(-1.5deg)}}
.stage .badge{position:absolute;z-index:2;bottom:4%;left:50%;translate:-50% 0;padding:8px 16px;border-radius:999px;background:#fff;box-shadow:0 16px 30px -16px rgba(40,50,35,.6);font-weight:700;font-size:.82rem;white-space:nowrap}
.map-stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.map-stage div{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:var(--shadow)}
.map-stage b{display:flex;align-items:center;gap:6px;color:var(--red)}
.map-stage span{display:block;color:var(--ink-2);font-size:.9rem;line-height:1.6}
@media (max-width:860px){.ph-grid{grid-template-columns:minmax(0,1fr);gap:24px}.stage{max-width:300px}.phero{padding:16px 0 40px}}

/* facts strip */
.facts{margin-top:-26px;position:relative;z-index:2}
.facts dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.facts dl>div{padding:14px 18px;border-inline-start:1px solid var(--line)}
.facts dl>div:first-child{border:0}
.facts dt{font-size:.78rem;color:var(--ink-2)}
.facts dd{font-weight:600;font-size:.92rem;line-height:1.5}
@media (max-width:760px){.facts dl{grid-template-columns:repeat(2,minmax(0,1fr))}.facts dl>div:nth-child(3){border:0}.facts dl>div:nth-child(n+3){border-top:1px solid var(--line)}}

/* product cards */
.sec{padding:54px 0}
.sec>.wrap>h2,.faq h2,.more h2{font-size:clamp(1.5rem,4vw,2.2rem);line-height:1.3;text-align:center;margin-bottom:24px}
.prods{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.prod{flex:0 1 calc(33.333% - 12px);min-width:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;scroll-margin-top:90px;transition:transform .4s var(--ease),box-shadow .4s}
.prod:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.prod:target{box-shadow:0 0 0 3px var(--sage),var(--shadow)}
.prod .shot{position:relative;aspect-ratio:4/4.2;background:var(--bg,var(--sand));overflow:hidden}
.prod .shot img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 45%)}
.prod .shot.pack img{object-fit:contain;padding:8%}
.prod .size{direction:ltr;position:absolute;top:12px;inset-inline-start:12px;padding:3px 10px;border-radius:999px;background:#fff;font-size:.78rem;font-weight:600;color:var(--ink-2)}
.prod .body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.prod h3{font-size:1.15rem;line-height:1.4}
.prod p{color:var(--ink-2);font-size:.95rem;line-height:1.7}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{padding:2px 10px;border-radius:999px;background:var(--sage-soft);color:var(--sage-d);font-size:.78rem;font-weight:600}
.order{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:14px;background:var(--sand);font-weight:600;transition:background .3s,color .3s}
.order .i{color:var(--wa)}
.order:hover{background:var(--wa);color:#fff}.order:hover .i{color:#fff}
.prods.one .prod{flex-basis:min(560px,100%);flex-direction:row}
.prods.one .shot{flex:0 0 46%;aspect-ratio:auto;min-height:280px}
@media (max-width:900px){.prod{flex-basis:calc(50% - 9px)}}
@media (max-width:560px){.prods{gap:12px}.prod{flex-basis:calc(50% - 6px)}.prod .body{padding:12px}.prod h3{font-size:1rem}.prod p{font-size:.86rem}.order{font-size:.88rem}.order .t{display:none}
  .prods.one .prod{flex-direction:column}.prods.one .shot{min-height:0;aspect-ratio:4/3.4}}

/* article */
.doc{max-width:820px;margin-inline:auto;display:grid;gap:18px}
.doc section{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 26px}
.doc h2{font-size:1.35rem;line-height:1.4;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.doc h2::before{content:"";flex:none;width:10px;height:10px;border-radius:3px;background:var(--sun);rotate:45deg}
.doc p+p,.doc p+ul,.doc ul+p,.doc ol+p,.doc table+p,.doc p+table{margin-top:10px}
.doc ul,.doc ol{padding-inline-start:1.3em;display:grid;gap:6px}
.doc li::marker{color:var(--sage)}
.doc a{color:var(--red);font-weight:600}
.doc table{width:100%;border-collapse:collapse;font-size:.95rem}
.doc th,.doc td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:start}
.doc th{background:var(--sand);font-weight:600}
.alert{margin-top:12px;padding:14px 16px;border-radius:16px;background:#fdecea;color:#7d1016;font-weight:500;font-size:.95rem}
.note{font-size:.85rem;color:var(--ink-2);text-align:center}
@media (max-width:560px){.doc section{padding:18px}}

/* faq */
.faq{background:var(--sand);padding:56px 0}
.qa{max-width:860px;margin-inline:auto;display:grid;gap:10px}
.qa details{background:#fff;border:1px solid var(--line);border-radius:18px;transition:box-shadow .3s}
.qa details[open]{box-shadow:0 0 0 1.5px var(--sage),var(--shadow)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;font-weight:600;cursor:pointer;list-style:none;line-height:1.55}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--sage-soft);color:var(--sage-d);font-size:1.2rem;transition:transform .35s var(--ease)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa details p{padding:0 20px 18px;color:var(--ink-2)}

/* other lines */
.more{padding:56px 0}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sc{display:flex;align-items:center;gap:14px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:20px;transition:transform .35s var(--ease),box-shadow .35s}
.sc:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.sc img{flex:none;width:64px;height:64px;border-radius:14px;object-fit:cover;background:var(--sand)}
.sc .ic{flex:none;width:64px;height:64px;border-radius:14px;display:grid;place-items:center;background:var(--sage-soft);color:var(--sage-d)}
.sc .ic .i{width:28px;height:28px}
.sc b{display:block;line-height:1.4}
.sc small{display:block;color:var(--ink-2);font-size:.84rem;line-height:1.55}
@media (max-width:860px){.cards{grid-template-columns:minmax(0,1fr)}}

/* footer */
footer{background:var(--sage-d);color:#dfe8da;padding:40px 0 100px;font-size:.92rem}
.f-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:26px}
footer b{display:block;color:#fff;font-size:1rem;margin-bottom:6px}
footer a{display:block;padding:2px 0}
footer a:hover{color:var(--sun)}
.f-end{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);font-size:.84rem}
.f-end a{display:inline;color:var(--sun);font-weight:600}
@media (max-width:760px){.f-grid{grid-template-columns:minmax(0,1fr)}}
.wa-float{position:fixed;bottom:16px;inset-inline-start:16px;z-index:35;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--wa);color:#fff;box-shadow:0 14px 26px -12px rgba(31,170,89,.9)}
.wa-float .i{width:28px;height:28px}

.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}}