/* Kombucha T - tkombuchat.com. Tokens and rules: DESIGN.md (site folder). Phosphor icons (MIT), Alexandria + IBM Plex Sans Arabic (OFL). */
@font-face{font-family:'Alexandria';font-style:normal;font-weight:600 700;font-display:swap;src:url(type/alexandria-arabic.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:600 700;font-display:swap;src:url(type/alexandria-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
:root{color-scheme:light;
  --bg:#F6F8F2;--surface:#FFFFFF;--band:#EAF0E3;--line:#D9E2D0;--ink:#17241A;--muted:#566457;
  --leaf:#2E5A22;--leaf-d:#244A1A;--leaf-2:#3F6B2A;--amber:#B86E0E;--forest:#18301A;--wa:#1A7A42;--wa-d:#146536;
  --bad:#9b2c1c;--badbg:#fde7e2;--okbg:#e3efd9;--photo:#F2F3EF;
  --shadow:0 18px 40px -28px rgba(23,48,26,.45);--shadow-hi:0 22px 48px -26px rgba(23,48,26,.55);
  --display:'Alexandria','IBM Plex Sans Arabic',system-ui,sans-serif;--text:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --r-card:22px;--r-img:16px;--r-in:12px;--sec:72px}
@media (min-width:900px){:root{--sec:104px}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
html,body{margin:0;background:var(--bg);color:var(--ink);font:400 16.5px/1.8 var(--text)}
body{min-height:100dvh;display:flex;flex-direction:column}body>main{flex:1 0 auto;width:100%}
::selection{background:#d6e6c8;color:var(--ink)}
input,textarea{caret-color:var(--leaf)}
a{color:var(--leaf);text-underline-offset:4px}
img{max-width:100%;height:auto}
.ic{width:20px;height:20px;flex:0 0 auto;vertical-align:middle}
:focus-visible{outline:3px solid var(--leaf-2);outline-offset:2px;border-radius:6px}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--leaf);color:#fff;padding:8px 14px;border-radius:999px;z-index:30;text-decoration:none}
.skip:focus{top:10px}
.hidden{display:none!important}
.wrap{max-width:820px;margin:0 auto;padding:0 20px}.wrap.wide{max-width:1180px}
h1,h2,h3{font-family:var(--display);color:var(--ink);text-wrap:balance;margin:0}
h2{font-size:clamp(1.45rem,1.1rem + 1.4vw,2rem);font-weight:700;line-height:1.35;color:var(--leaf)}
h3{font-size:1.06rem;font-weight:600;line-height:1.5}
p{margin:0 0 12px;text-wrap:pretty}
.muted{color:var(--muted)}.small{font-size:.86rem}.lead{font-weight:600}.note,.fine{font-size:.9rem;color:var(--muted)}
.testbar{background:#6d2a10;color:#fff;font-size:.84rem;line-height:1.6;text-align:center;padding:7px 16px;font-weight:600}

/* header */
.top{background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:saturate(1.4)}
.bar{max-width:1120px;margin:0 auto;padding:0 20px;min-height:64px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:700;font-size:1.12rem;white-space:nowrap}
.brand img{border-radius:50%}
.nav{display:flex;gap:2px;flex:1;justify-content:center}
.nav a{text-decoration:none;color:var(--ink);padding:7px 14px;border-radius:999px;font-weight:500;white-space:nowrap;transition:background .18s,color .18s}
.nav a:hover{background:var(--band)}.nav a[aria-current]{color:var(--leaf);background:var(--band);font-weight:600}
.tools{display:flex;gap:8px;align-items:center}
.tools a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-weight:600;font-size:.92rem;background:var(--surface);transition:border-color .18s}
.tools a:hover{border-color:var(--leaf-2)}
.cartbtn b{background:var(--leaf);color:#fff;border-radius:999px;min-width:22px;padding:0 6px;font-size:.78rem;line-height:22px;text-align:center;font-variant-numeric:tabular-nums}
@media (max-width:720px){.bar{flex-wrap:wrap;gap:8px 10px;padding-top:8px}.brand{flex:1}.nav{order:3;flex-basis:100%;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding-bottom:6px}.acct span{display:none}}

/* buttons */
.cta,.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.cta.start{justify-content:flex-start}.actions.end{justify-content:flex-start;margin:6px 0 16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font:600 1rem/1.2 var(--text);border-radius:999px;padding:12px 22px;min-height:48px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:background .18s,border-color .18s,box-shadow .18s,transform .12s;white-space:nowrap}
.btn:hover{border-color:var(--leaf-2)}.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--leaf);border-color:var(--leaf);color:#fff;box-shadow:0 12px 24px -16px rgba(46,90,34,.9)}.btn.primary:hover{background:var(--leaf-d)}
.btn.wa{background:var(--wa);border-color:var(--wa);color:#fff}.btn.wa:hover{background:var(--wa-d)}
.btn.lg{min-height:54px;padding:14px 26px;font-size:1.05rem}
.btn.sm{min-height:36px;padding:6px 14px;font-size:.88rem}.btn.danger{color:var(--bad);border-color:#e3b3a8}.btn:disabled{opacity:.55;cursor:not-allowed}

/* home: hero */
.home{padding:0}
.hero2{position:relative;overflow:hidden;background:radial-gradient(60% 70% at 22% 55%,#e2ecd6 0%,rgba(226,236,214,0) 70%),var(--bg)}
.hero2 .in{max-width:1120px;margin:0 auto;padding:28px 20px 8px;display:grid;gap:8px;align-items:center}
.hero-logo{width:84px;height:84px;border-radius:50%;margin-bottom:10px}
.hero2 h1{font-size:clamp(2.3rem,1.6rem + 3.2vw,3.6rem);font-weight:700;line-height:1.25;color:var(--ink)}
.hero-sub{font-size:1.14rem;color:var(--ink);max-width:38ch;margin:12px 0 4px}
.hero-origin{color:var(--leaf);font-weight:600;margin-bottom:22px}
.hero-art{margin:0;justify-self:center;width:min(100%,520px)}
.hero-art img{display:block;width:100%;animation:rise .6s cubic-bezier(.16,1,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (min-width:900px){.hero2 .in{grid-template-columns:1.05fr 1fr;padding:56px 20px 40px;gap:40px}.hero-art{width:100%;max-width:540px}}

/* home: sections */
.sec{padding:var(--sec) 0 0}.sec:last-of-type{padding-bottom:var(--sec)}
.sec.band{background:var(--band);padding-bottom:var(--sec);margin-top:var(--sec);padding-top:var(--sec)}
.sec.band + .sec{padding-top:var(--sec)}
.in{max-width:1120px;margin:0 auto;padding:0 20px}.in.narrow>*{max-width:760px}
.sec-head{margin:0 0 26px}.sec-head .sub{color:var(--muted);margin:8px 0 0;max-width:62ch}
.story .lead{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,1rem + 1.2vw,1.75rem);line-height:1.6;color:var(--ink);margin:0 0 12px}
.story p{font-size:1.06rem;max-width:62ch}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:1.04rem}
.ticks .ic{color:var(--leaf-2);margin-top:5px}
@media (min-width:900px){.ticks.two{grid-template-columns:1fr 1fr;gap:18px 40px}}
.bento{display:grid;gap:14px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:22px;box-shadow:var(--shadow)}
.tile p{margin:6px 0 0;color:var(--muted)}
.tile-ic{width:28px;height:28px;color:var(--leaf-2);margin-bottom:12px}
.tile.big{background:var(--leaf);border-color:var(--leaf);color:#fff}.tile.big h3{color:#fff;font-size:1.4rem}.tile.big p{color:#e6efe0;font-size:1.06rem}.tile.big .tile-ic{color:#cfe2c0;width:36px;height:36px}
@media (min-width:900px){.bento{grid-template-columns:1.2fr 1fr;grid-template-rows:auto auto}.tile.big{grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-end;padding:34px}}
.flav-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.flav-grid li{min-width:0}
.flav-grid img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:20px;background:#fff;box-shadow:var(--shadow);margin-bottom:12px}
.flav-grid b{display:block;font-family:var(--display);font-weight:600;font-size:1.08rem;color:var(--ink)}
.flav-grid span{display:block;color:var(--muted);font-size:.92rem;line-height:1.6}
@media (min-width:900px){.flav-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}}
#order{scroll-margin-top:72px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin:4px 0 14px}
.grid.products{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.grid.products{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
.tips{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.tips li{display:flex;gap:14px;align-items:center;font-size:1.04rem}
.tip-ic{flex:0 0 auto;width:48px;height:48px;border-radius:14px;background:var(--band);color:var(--leaf);display:grid;place-items:center}
.tip-ic .ic{width:24px;height:24px}
@media (min-width:900px){.tips{grid-template-columns:repeat(3,1fr);gap:24px}.tips li{flex-direction:column;align-items:flex-start;gap:12px}}
.journey-figure{margin:0 0 20px}
.journey-figure img{display:block;width:100%;border-radius:var(--r-card);box-shadow:var(--shadow)}
.journey-figure figcaption{margin-top:10px;font-size:.9rem}
.route{list-style:none;margin:0;padding:0 0 6px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.route li{scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.route .flag{font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:1.5rem;line-height:1.2}
.route b{font-family:var(--display);font-weight:600;color:var(--leaf)}.route span:last-child{color:var(--muted);font-size:.9rem;line-height:1.6}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px;padding:12px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--display);color:var(--leaf);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:'−'}
.faq p{margin:0 0 14px;color:var(--muted)}
.contact{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.contact a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;transition:border-color .18s}
.contact a:hover{border-color:var(--leaf-2)}.contact .ic{color:var(--leaf)}.contact b{font-weight:600}
.contact span{font-family:Poppins,var(--text);font-weight:500;font-size:.95rem;color:var(--muted)}
@media (max-width:520px){.contact a{grid-template-columns:auto 1fr}.contact span{grid-column:2}}
.social{display:flex;flex-wrap:wrap;gap:8px}
.soc{display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--line);border-radius:999px;padding:7px 14px;font:600 .9rem Poppins,var(--text);color:var(--ink);text-decoration:none}
.soc small{font:500 .78rem var(--text);color:var(--muted)}
.closing{text-align:center;font-family:var(--display);font-weight:700;color:var(--leaf);font-size:clamp(1.2rem,1rem + 1vw,1.6rem);margin:0;padding:0 20px var(--sec)}

/* product card */
.pcard{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:12px 12px 14px;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:box-shadow .2s}
.pcard:hover{box-shadow:var(--shadow-hi)}
.pcard .pimg{font-size:2.2rem;line-height:1.2}
.pcard h3{font-size:1.06rem;margin-top:4px}.pcard p{font-size:.88rem;line-height:1.6;color:var(--muted);margin:2px 0 8px;flex:1}.pcard .size{font-size:.8rem;color:var(--muted);margin:0 0 8px;flex:0}
.buy{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:auto}
.prices{display:inline-flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.price{font-family:var(--display);font-weight:700;color:var(--ink);font-size:1.08rem}.was{color:var(--muted);font-size:.84em;text-decoration:line-through}
.add{min-height:40px;padding:8px 14px;font-size:.9rem;background:var(--leaf);color:#fff;border-color:var(--leaf);width:100%}
.add:hover{background:var(--leaf-d)}
.pimg.gallery{font-size:inherit}
.pimg img.main{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:contain;background:var(--photo);border-radius:var(--r-img)}
.thumbs{display:flex;gap:6px;margin:8px 0;justify-content:center;flex-wrap:wrap}
.th{border:1px solid var(--line);border-radius:8px;padding:0;background:var(--photo);width:38px;cursor:pointer;overflow:hidden;transition:border-color .18s}
.th.on{border-color:var(--leaf);box-shadow:0 0 0 1px var(--leaf)}.th img{display:block;width:100%;height:auto}

/* inner pages */
main.wrap{padding-top:22px;padding-bottom:28px}
.ptitle{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);color:var(--ink);margin:8px 0 18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:20px;margin:0 0 16px;box-shadow:var(--shadow)}
.card h2{font-size:1.3rem;margin-bottom:10px}
.hero{text-align:center;padding:18px 0 10px}.logo{display:block;width:min(200px,60vw);margin:4px auto;border-radius:50%}
.kicker{display:none}.en{font-family:Poppins,sans-serif;font-weight:600;color:var(--amber)}.tag{font-weight:500}.saudi{color:var(--leaf);font-weight:600}
.points{display:grid;gap:10px}.points div{background:var(--band);border-radius:14px;padding:12px 14px}.points p{margin:0}
.bottles{display:block;width:100%;max-width:420px;margin:0 auto;border-radius:16px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:8px 0 14px}
.plan{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px}.plan strong{color:var(--leaf);font-family:var(--display);font-size:1.1rem;font-variant-numeric:tabular-nums}
.plan.pick{cursor:pointer}.plan.pick input{align-self:flex-start;width:auto;min-height:0}.plan.pick:has(input:checked){outline:3px solid var(--leaf)}
.timeline,.locs{list-style:none;margin:4px 0 6px;padding:0;display:grid;gap:8px}
.timeline li{display:flex;gap:12px;align-items:center;background:var(--band);border-radius:14px;padding:9px 12px}.timeline span{color:var(--muted);font-size:.92rem}
.locs li{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px}.locs span,.locs small{color:var(--muted)}
details{border-bottom:1px solid var(--line);padding:8px 0}summary{cursor:pointer;font-weight:600}details p{margin:6px 0 0}
.more{font-weight:600;text-decoration:none}
.prose h1{font-size:1.6rem;margin:0 0 10px}.prose h2{margin-top:18px;font-size:1.25rem}.prose p,.prose li{max-width:66ch}
.prose blockquote{margin:0 0 12px;background:#fff4dc;border-radius:12px;padding:8px 12px;color:#6b4e00;font-weight:600}
mark.missing{background:#ffe9a8;padding:0 4px;border-radius:4px}
.post h2{font-size:1.2rem}.post h2 a{color:var(--ink);text-decoration:none}

/* footer */
.foot{background:var(--forest);color:#d6e2cf;margin-top:0;padding:40px 0 30px;font-size:.92rem}
.fin{max-width:1120px;margin:0 auto;padding:0 20px;display:grid;gap:18px}
.fbrand{display:flex;gap:12px;align-items:center}.fbrand img{border-radius:50%;background:#fff}.fbrand b{display:block;font-family:var(--display);color:#fff;font-size:1.1rem}.fbrand span{color:#b9cbb0}
.fcontact{display:flex;flex-wrap:wrap;gap:10px 22px}.fcontact a{display:inline-flex;gap:8px;align-items:center;color:#fff;text-decoration:none}
.flinks{display:flex;flex-wrap:wrap;gap:6px 18px}.flinks a{color:#d6e2cf;text-decoration:none}.flinks a:hover{color:#fff;text-decoration:underline}
.legal,.copy{color:#9fb596;font-size:.84rem}
.foot :focus-visible{outline-color:#cfe2c0}

/* forms, cart, checkout (store.js) */
label{display:block;font-weight:600;font-size:.95rem;margin:0 0 4px}.field{margin:0 0 14px}.row{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}@media (max-width:520px){.row{grid-template-columns:1fr}}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r-in);padding:10px 12px;min-height:48px;transition:border-color .18s}textarea{min-height:84px}
input:hover,select:hover,textarea:hover{border-color:#b9c8ad}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--leaf-2);outline-offset:1px;border-color:var(--leaf-2)}
.check{display:flex;gap:8px;align-items:flex-start;font-weight:400}.check input{width:auto;min-height:0;margin-top:7px;accent-color:var(--leaf)}
.err{color:var(--bad);font-size:.88rem;margin:4px 0;display:none}.err.on{display:block}.okmsg{background:var(--okbg);color:var(--leaf-d);border-radius:12px;padding:10px 12px;font-weight:600}
.demo{background:#fff4dc;color:#6b4e00;border-radius:12px;padding:8px 12px;font-weight:600;margin:8px 0}
.lines{width:100%;border-collapse:collapse}.lines td,.lines th{padding:10px 4px;border-bottom:1px solid var(--line);text-align:start}.lines .qty{display:flex;gap:6px;align-items:center;font-variant-numeric:tabular-nums}
.qty button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;font:inherit;cursor:pointer}.qty button:hover{border-color:var(--leaf-2)}
.totals{font-variant-numeric:tabular-nums}.totals div{display:flex;justify-content:space-between;padding:4px 0}.totals .grand{font-weight:700;font-size:1.1rem;border-top:1px solid var(--line);padding-top:8px}
.chip{display:inline-block;border-radius:999px;padding:1px 10px;font-size:.8rem;font-weight:600;background:var(--band);border:1px solid var(--line)}
.st-new{background:#fff4dc}.st-confirmed,.st-preparing{background:#e5eefc}.st-out_for_delivery{background:#efe5fc}.st-delivered,.st-active{background:var(--okbg)}.st-cancelled{background:var(--badbg)}.st-paused,.st-pending{background:#fff4dc}
.toast{position:fixed;inset-inline:16px;bottom:16px;max-width:480px;margin:0 auto;background:var(--ink);color:#fff;padding:12px 16px;border-radius:14px;z-index:50;font-weight:600;text-align:center}
.flav{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line)}.flav input{width:90px}

/* admin (admin.tkombuchat.com) */
.adminbody .abar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0}.adminbody h1{color:var(--leaf);font-size:1.4rem}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}.tabs button.on{background:var(--leaf);color:#fff;border-color:var(--leaf)}
.counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:12px}.counts div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px}.counts b{display:block;font-size:1.4rem;font-variant-numeric:tabular-nums}
table.t{width:100%;border-collapse:collapse;font-size:.92rem}table.t th,table.t td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}table.t th{color:var(--muted);font-size:.82rem}
.tw{overflow-x:auto}