/* ═══════════════════════════════════════════════════════════
   crave (Liquid) v1 — P2-9 reference port
   Charcoal surfaces · vivid green accent · white pill CTAs.
   Logical properties only (full RTL). Also skins the platform
   commerce-runtime UI (.mb-*) via its class hooks.
   ═══════════════════════════════════════════════════════════ */

/* P8-1: self-hosted fonts (OFL) — bundled woff2, same-origin relative URLs so
   the theme linter's external-URL ban passes. Latin + Arabic subsets only. */
@font-face{
  font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url(../fonts/jakarta-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../fonts/fraunces-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans Arabic'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/plexar-400-arabic.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-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:'IBM Plex Sans Arabic'; font-style:normal; font-weight:700; font-display:swap;
  src:url(../fonts/plexar-700-arabic.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}

.crave-lq{
  --bg:#15171a; --bg-deep:#101214; --elev:#1c1f23;
  --card:#22262b; --card-2:#2a2f35;
  --stroke:rgba(255,255,255,.07); --stroke-2:rgba(255,255,255,.12);
  --ink:#f4f6f5; --ink-2:#adb6ba; --ink-3:#8a949c;
  --green:#3fd463; --green-hi:#8bf0a2; --green-deep:#1d9e44; --green-ink:#0e2d18;
  --green-grad:linear-gradient(118deg,#98f2ab 0%,#3fd463 42%,#1fa74b 100%);
  --red:#ff6259;
  --cta-bg:#ffffff; --cta-ink:#111315;
  --r-card:18px; --r-img:14px; --r-pill:999px; --r-sheet:26px;
  --font-ui:'Plus Jakarta Sans','IBM Plex Sans Arabic',system-ui,sans-serif;
  --font-display:'Fraunces','IBM Plex Sans Arabic',Georgia,serif;
  --ease:cubic-bezier(.32,.72,.24,1); --ease-pop:cubic-bezier(.34,1.45,.5,1);

  /* commerce-runtime skin hooks */
  --mb-sheet-bg:var(--elev); --mb-sheet-ink:var(--ink); --mb-accent:var(--green);

  min-height:100vh; background:var(--bg); color:var(--ink);
  font-family:var(--font-ui);
  padding-block-end:96px;
}
.crave-lq *{box-sizing:border-box; margin:0}
.crave-lq img{max-inline-size:100%; display:block}
.crave-lq a{color:inherit; text-decoration:none}

/* top / identity */
.cl-top{display:flex; align-items:center; gap:14px; padding:18px 20px}
.cl-avatar{inline-size:52px; block-size:52px; border-radius:var(--r-pill);
  overflow:hidden; background:var(--card); border:1px solid var(--stroke-2); flex:none}
.cl-avatar img{inline-size:100%; block-size:100%; object-fit:cover}
.cl-title{font-family:var(--font-display); font-size:1.5rem; font-weight:600; letter-spacing:-.01em}
.cl-sub{color:var(--ink-2); font-size:.85rem}
.cl-branch{margin-inline-start:auto; font-size:.72rem; padding:6px 12px;
  border-radius:var(--r-pill); background:var(--card); border:1px solid var(--stroke-2); color:var(--ink-2)}
.cl-branch.is-open{color:var(--green-hi); border-color:var(--green-deep)}
.cl-branch.is-closed{color:var(--red)}
.cl-table-pill,.cl-hello{margin:0 20px 10px; font-size:.85rem; color:var(--ink-2)}
.cl-table-pill{display:inline-block; background:var(--green-grad); color:var(--green-ink);
  font-weight:700; padding:6px 14px; border-radius:var(--r-pill)}

/* banners */
.cl-banners{display:flex; gap:12px; overflow-x:auto; padding:6px 20px 14px; scrollbar-width:none;
  scroll-snap-type:x mandatory}
.cl-banners::-webkit-scrollbar{display:none}
/* full-width hero slides that snap cleanly (fix: was a half-cut 340px carousel) */
.cl-banner{flex:0 0 100%; position:relative; scroll-snap-align:center; aspect-ratio:2/1;
  border-radius:var(--r-card); overflow:hidden; background:var(--card); border:1px solid var(--stroke)}
.cl-banner img{position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover}
.cl-banner figcaption{position:absolute; inset-inline:0; inset-block-end:0; padding:16px 18px;
  display:grid; gap:3px; background:linear-gradient(transparent,rgba(0,0,0,.78)); color:#fff}
.cl-banner b{font-size:1.1rem; font-weight:800}
.cl-banner span{font-size:.82rem; opacity:.92}
@media (min-width:760px){ .cl-banner{aspect-ratio:16/5} }

/* category chips */
.cl-chips{display:flex; gap:8px; overflow-x:auto; padding:4px 20px 14px;
  position:sticky; inset-block-start:0; background:linear-gradient(var(--bg) 75%,transparent);
  z-index:5; scrollbar-width:none}
.cl-chip{flex:none; padding:9px 16px; border-radius:var(--r-pill); font-size:.85rem; font-weight:600;
  background:var(--card); border:1px solid var(--stroke-2); color:var(--ink-2)}
.cl-chip:hover{color:var(--green-hi); border-color:var(--green-deep)}

/* menu grid */
.cl-menu{padding:0 20px}
.cl-cat{margin-block-end:26px}
.cl-cat-title{font-size:1.05rem; font-weight:800; margin-block-end:12px}
.cl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px}
.cl-card{background:var(--card); border:1px solid var(--stroke); border-radius:var(--r-card);
  overflow:hidden; display:flex; flex-direction:column}
.cl-card.is-out{opacity:.55}
.cl-card-media{position:relative; aspect-ratio:4/3; background:var(--card-2)}
.cl-card-media img{inline-size:100%; block-size:100%; object-fit:cover}
.cl-flag{position:absolute; inset-block-start:8px; inset-inline-start:8px; font-style:normal;
  font-size:.62rem; font-weight:700; padding:3px 8px; border-radius:var(--r-pill);
  background:var(--green-grad); color:var(--green-ink)}
.cl-flag-sp{inset-block-start:32px; background:#ffb02e; color:#3c2a05}
.cl-card-body{padding:10px 12px 12px; display:flex; flex-direction:column; gap:6px; flex:1}
.cl-card-name{font-size:.92rem; font-weight:700}
.cl-card-desc{color:var(--ink-3); font-size:.76rem; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.cl-badges{display:flex; gap:6px; flex-wrap:wrap}
.cl-badges em{font-style:normal; font-size:.62rem; color:var(--green-hi);
  border:1px solid var(--green-deep); border-radius:var(--r-pill); padding:2px 8px}
.cl-card-foot{margin-block-start:auto; display:flex; align-items:center; justify-content:space-between}
.cl-price{font-size:.95rem; color:var(--green-hi)}
.cl-add{inline-size:34px; block-size:34px; border-radius:var(--r-pill); border:0;
  background:var(--cta-bg); color:var(--cta-ink); font-size:1.2rem; font-weight:800; cursor:pointer}
.cl-add:hover{background:var(--green); color:var(--green-ink)}
.cl-soldout{font-size:.72rem; color:var(--red)}

/* cart FAB + waiter */
.cl-cart-fab{position:fixed; inset-block-end:18px; inset-inline-start:50%;
  transform:translateX(-50%); z-index:40; border:0; cursor:pointer;
  background:var(--cta-bg); color:var(--cta-ink); font-weight:800; font-size:.95rem;
  padding:14px 26px; border-radius:var(--r-pill); box-shadow:0 10px 30px rgba(0,0,0,.45)}
[dir="rtl"] .cl-cart-fab{transform:translateX(50%)}
.cl-waiter{position:fixed; inset-block-end:18px; inset-inline-end:18px; z-index:40; border:0;
  cursor:pointer; background:var(--card-2); color:var(--ink); border:1px solid var(--stroke-2);
  padding:12px 18px; border-radius:var(--r-pill); font-size:.8rem}

/* footer */
.cl-foot{padding:34px 20px 20px; color:var(--ink-3); font-size:.85rem; display:grid; gap:4px}
.cl-foot-meta{font-size:.72rem}

/* ── commerce runtime UI (platform markup, themed here) ── */
.cl-mount{position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.55);
  display:grid; align-items:end; justify-items:stretch}
.cl-mount[hidden]{display:none}
.mb-sheet,.mb-cart{background:var(--mb-sheet-bg); color:var(--mb-sheet-ink);
  border-start-start-radius:var(--r-sheet); border-start-end-radius:var(--r-sheet);
  max-block-size:82vh; overflow:auto; padding:18px 20px 24px}
.mb-sheet-head{display:flex; align-items:center; justify-content:space-between; margin-block-end:12px}
.mb-sheet-close{border:0; background:var(--card-2); color:var(--ink); inline-size:32px;
  block-size:32px; border-radius:var(--r-pill); font-size:1.1rem; cursor:pointer}
.mb-opt-group{margin-block-end:14px}
.mb-opt-title{font-weight:700; font-size:.9rem; margin-block-end:8px}
.mb-req{color:var(--red)}
.mb-opt{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  background:var(--card); border:1px solid var(--stroke); margin-block-end:6px; font-size:.88rem}
.mb-opt em{margin-inline-start:auto; font-style:normal; color:var(--green-hi)}
.mb-sheet-add,.mb-place{inline-size:100%; border:0; cursor:pointer; background:var(--green-grad);
  color:var(--green-ink); font-weight:800; font-size:1rem; padding:14px; border-radius:var(--r-pill)}
.mb-cart-lines{list-style:none; padding:0; display:grid; gap:8px; margin-block-end:14px}
.mb-cart-line{display:flex; align-items:center; gap:10px; background:var(--card);
  border:1px solid var(--stroke); border-radius:12px; padding:10px 12px; font-size:.9rem}
.mb-cl-qty{display:flex; align-items:center; gap:8px; margin-inline-start:auto}
.mb-cl-qty button{inline-size:26px; block-size:26px; border-radius:var(--r-pill); border:0;
  background:var(--card-2); color:var(--ink); cursor:pointer}
.mb-cl-price{min-inline-size:64px; text-align:end; color:var(--green-hi)}
.mb-cart-empty{color:var(--ink-3); padding:20px 0}
.mb-ot-seg{display:flex; gap:8px; margin-block-end:12px}
.mb-ot-seg button{flex:1; padding:10px; border-radius:var(--r-pill); border:1px solid var(--stroke-2);
  background:var(--card); color:var(--ink-2); cursor:pointer; font-size:.82rem}
.mb-ot-seg button.is-on{background:var(--cta-bg); color:var(--cta-ink); font-weight:700}
.mb-field{inline-size:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--stroke-2);
  background:var(--card); color:var(--ink); margin-block-end:8px; font:inherit; font-size:.9rem}
.mb-coupon{display:flex; gap:8px}
.mb-coupon button{border:0; border-radius:12px; padding:0 16px; background:var(--card-2);
  color:var(--ink); cursor:pointer}
.mb-totals{margin-block:12px; display:grid; gap:6px; font-size:.88rem}
.mb-tr{display:flex; justify-content:space-between; color:var(--ink-2)}
.mb-tr-total{color:var(--ink); font-weight:800; font-size:1rem}
.mb-err{color:var(--red); font-size:.85rem; margin-block-end:8px}

/* ── B6: customer account panel (platform markup, themed here) ── */
.cl-account{border:1px solid var(--stroke-2); background:var(--card); color:var(--ink);
  border-radius:var(--r-pill); padding:8px 14px; font:inherit; font-size:.82rem; font-weight:700; cursor:pointer}
.mb-acct-greet{color:var(--ink-2); font-size:.95rem; margin-block-end:12px}
.mb-acct-greet b{color:var(--ink)}
.mb-acct-tabs{display:flex; gap:8px; margin-block-end:12px}
.mb-acct-tabs button{flex:1; padding:9px; border-radius:var(--r-pill); border:1px solid var(--stroke-2);
  background:var(--card); color:var(--ink-2); cursor:pointer; font-size:.8rem}
.mb-acct-tabs button.is-on{background:var(--cta-bg); color:var(--cta-ink); font-weight:700}
.mb-acct-row{display:flex; gap:8px; align-items:start}
.mb-acct-row .mb-place{inline-size:auto; padding-inline:16px; white-space:nowrap}
.mb-acct-orders{margin-block-start:16px; padding-block-start:12px; border-block-start:1px solid var(--stroke)}
.mb-acct-order-list{list-style:none; padding:0; display:grid; gap:6px; margin-block-start:8px}
.mb-acct-order a{display:block; padding:10px 12px; border-radius:12px; background:var(--card);
  border:1px solid var(--stroke); color:var(--ink); text-decoration:none; font-size:.85rem}

/* rich account (logged-in: profile + addresses + orders) */
.mb-account-rich{display:grid; gap:6px}
.mb-acct-sec{display:block; margin-block:16px 8px; font-family:var(--font-display); font-size:1.15rem; font-weight:600}
.mb-addr-list{list-style:none; padding:0; display:grid; gap:8px}
.mb-addr{display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px;
  background:var(--card); border:1px solid var(--stroke); font-size:.88rem}
.mb-addr span{flex:1}
.mb-addr-default{font-style:normal; color:var(--green-hi); font-size:.72rem; font-weight:700}
.mb-addr-del{inline-size:28px; block-size:28px; flex:none; border:0; border-radius:var(--r-pill);
  background:var(--card-2); color:var(--ink-2); cursor:pointer; font-size:1rem}
.mb-addr-form{display:grid; gap:8px; margin-block-start:8px}
.mb-addr-def{display:flex; align-items:center; gap:8px; color:var(--ink-2); font-size:.85rem}
.mb-acct-empty{color:var(--ink-3); padding:8px 0}
.mb-place.mb-logout-btn{background:var(--card); color:var(--red); border:1px solid var(--stroke-2); margin-block-start:18px}

@media (min-width:760px){
  .crave-lq{max-inline-size:1040px; margin-inline:auto}
  .cl-mount{align-items:center; justify-items:center}
  .mb-sheet,.mb-cart{inline-size:520px; border-radius:var(--r-sheet)}
}

/* ── parity additions: badge, language, search/filters, images, favourites ── */
.cl-badge{margin-inline-start:auto; font-size:.72rem; font-weight:600; padding:6px 12px;
  border-radius:var(--r-pill); background:var(--card); border:1px solid var(--stroke-2)}
.cl-badge.is-open{color:var(--green-hi); border-color:var(--green-deep)}
.cl-badge.is-closed{color:var(--red)}
.cl-langs{display:flex; gap:6px; margin-inline-start:12px}
.cl-lang{min-inline-size:38px; padding:6px 10px; border-radius:var(--r-pill); cursor:pointer;
  font-size:.72rem; font-weight:700; background:var(--card); color:var(--ink-2); border:1px solid var(--stroke-2)}
.cl-lang.is-on{background:var(--cta-bg); color:var(--cta-ink)}

/* language + currency sheet (globe icon) */
.cl-globe{margin-inline-start:auto; inline-size:42px; block-size:42px; flex:none; display:grid; place-items:center;
  border-radius:var(--r-pill); background:var(--card); color:var(--ink); border:1px solid var(--stroke-2); cursor:pointer}
.cl-sheet{position:fixed; inset:0; z-index:120}
.cl-sheet[hidden]{display:none}
.cl-sheet-scrim{position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:opacity .3s var(--ease)}
.cl-sheet.is-on .cl-sheet-scrim{opacity:1}
.cl-sheet-panel{position:absolute; inset-inline:0; inset-block-end:0; background:var(--elev);
  border-start-start-radius:var(--r-sheet); border-start-end-radius:var(--r-sheet); padding:18px 20px 28px;
  transform:translateY(100%); transition:transform .32s var(--ease); max-block-size:80vh; overflow:auto}
.cl-sheet.is-on .cl-sheet-panel{transform:none}
.cl-sheet-head{display:flex; align-items:center; justify-content:space-between; margin-block-end:14px}
.cl-sheet-head b{font-family:var(--font-display); font-size:1.3rem; font-weight:600}
.cl-sheet-sub{display:block; margin-block:16px 8px; color:var(--ink-3); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em}
.cl-sheet-opts{display:grid; gap:8px}
.cl-sheet-opt{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; cursor:pointer;
  border-radius:14px; background:var(--card); border:1px solid var(--stroke); color:var(--ink); font:inherit; font-size:.95rem; font-weight:600; text-align:start}
.cl-sheet-opt span{color:var(--ink-3); font-size:.8rem; font-weight:700}
.cl-sheet-opt.is-on{background:var(--green-grad); color:var(--green-ink); border-color:transparent}
.cl-sheet-opt.is-on span{color:var(--green-ink)}
@media (min-width:760px){ .cl-sheet-panel{max-inline-size:460px; margin-inline:auto} }

.cl-tools{padding:4px 20px 12px; display:grid; gap:10px}
.cl-search{inline-size:100%; padding:12px 16px; border-radius:var(--r-pill); font:inherit; font-size:.9rem;
  background:var(--card); color:var(--ink); border:1px solid var(--stroke-2)}
.cl-search::placeholder{color:var(--ink-3)}
.cl-filters{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none}
.cl-filter{flex:none; padding:8px 14px; border-radius:var(--r-pill); cursor:pointer; font-size:.8rem; font-weight:600;
  background:var(--card); color:var(--ink-2); border:1px solid var(--stroke-2); white-space:nowrap}
.cl-filter.is-on{background:var(--green-grad); color:var(--green-ink); border-color:transparent}

.cl-chip{display:inline-flex; align-items:center; gap:8px}
.cl-chip-img{inline-size:22px; block-size:22px; border-radius:var(--r-pill); object-fit:cover}
.cl-cat-title{display:flex; align-items:center; gap:10px}
.cl-cat-img{inline-size:28px; block-size:28px; border-radius:8px; object-fit:cover}
.cl-specials .cl-cat-title{color:var(--orange)}

.cl-card-media{position:relative}
.cl-fav{position:absolute; inset-block-start:8px; inset-inline-end:8px; inline-size:32px; block-size:32px;
  border-radius:var(--r-pill); border:0; cursor:pointer; font-size:.95rem; line-height:1;
  background:rgba(0,0,0,.45); color:#fff; backdrop-filter:blur(4px)}
.cl-fav.is-on{background:var(--red); color:#fff}
[dir="rtl"] .cl-fav{inset-inline-end:auto; inset-inline-start:8px}

/* ── P8-3: SPA views + bottom tab bar (runtime-driven router) ── */
/* Document-flow view model (works on mobile + desktop; the fixed 100dvh
   app-shell from the Blade crave is intentionally not adopted here since the
   marketplace theme also renders on desktop). Switches slide+fade in. */
.cl-view{display:none}
.cl-view.is-active{display:block; animation:cl-view-in .34s var(--ease) both}
@keyframes cl-view-in{0%{opacity:0; transform:translateX(7%)}100%{opacity:1; transform:none}}
[dir="rtl"] .cl-view.is-active{animation-name:cl-view-in-rtl}
@keyframes cl-view-in-rtl{0%{opacity:0; transform:translateX(-7%)}100%{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.cl-view.is-active{animation:none}}
.cl-page-head{padding:22px 20px 8px}
.cl-page-head .cl-title{font-size:1.6rem}
.cl-empty{padding:48px 20px; text-align:center; color:var(--ink-3); display:grid; gap:14px; justify-items:center}
.cl-ghost{border:1px solid var(--stroke-2); background:var(--card); color:var(--ink);
  border-radius:var(--r-pill); padding:10px 18px; font:inherit; font-weight:700; cursor:pointer}
.cl-cart-inview,.cl-acct-inview{padding-inline:20px}
/* fixes: edge padding on the catalog/fav grids (the old .cl-menu wrapper is gone) */
.cl-cat,.cl-fav-list{padding-inline:20px}
/* fixes: centre the form/detail sub-views on wide screens */
[data-mb-view="cart"] .cl-view-scroll,
[data-mb-view="profile"] .cl-view-scroll,
[data-mb-view="product"] .cl-view-scroll{max-inline-size:640px; margin-inline:auto}
/* fixes: the account panel's own header is redundant with the view page-head */
.cl-acct-inview .mb-sheet-head{display:none}
/* fixes: show the chosen variant/extras under the cart line name */
.mb-cl-name{display:flex; flex-direction:column; gap:2px}
.mb-cl-opts{font-style:normal; color:var(--ink-3); font-size:.76rem; font-weight:500}
/* inline cart/account mounts flow in the view (drop the overlay sheet chrome) */
.cl-cart-inview .mb-cart,.cl-acct-inview .mb-cart,.cl-acct-inview .mb-account{
  background:transparent; padding:0; max-block-size:none; overflow:visible}
.cl-tail{block-size:104px}
.cl-waiter{display:block; margin:10px 20px 0; inline-size:calc(100% - 40px); padding:12px;
  border-radius:var(--r-pill); border:1px solid var(--stroke-2); background:var(--card); color:var(--ink);
  font:inherit; font-weight:700; cursor:pointer}

.cl-tabbar{position:fixed; inset-inline:16px; inset-block-end:calc(14px + env(safe-area-inset-bottom));
  z-index:60; display:flex; justify-content:space-around; align-items:center;
  background:rgba(28,31,35,.9); backdrop-filter:blur(18px);
  border:1px solid var(--stroke-2); border-radius:var(--r-pill); padding:8px 10px;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.65)}
.cl-tabbar.is-hidden{transform:translateY(140%); opacity:0; pointer-events:none}
.cl-tab{display:grid; justify-items:center; gap:3px; min-inline-size:58px; padding:0; border:0;
  background:none; color:var(--ink-3); cursor:pointer; font:inherit}
.cl-tab-pill{position:relative; inline-size:44px; block-size:44px; border-radius:50%;
  display:grid; place-items:center; transition:background .17s,color .17s}
.cl-tab-label{font-size:10px; font-weight:700}
.cl-tab.is-on{color:var(--ink)}
.cl-tab.is-on .cl-tab-pill{background:var(--cta-bg); color:var(--cta-ink)}
.cl-ic{inline-size:22px; block-size:22px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.cl-tab-badge{position:absolute; inset-block-start:-1px; inset-inline-end:-3px; min-inline-size:18px;
  block-size:18px; border-radius:var(--r-pill); background:var(--green); color:var(--green-ink);
  font-size:10px; font-weight:800; font-style:normal; display:grid; place-items:center; padding:0 5px;
  outline:2.5px solid var(--elev)}
.cl-tab-badge[hidden]{display:none} /* author display:grid otherwise beats the UA [hidden] rule */
@media (min-width:760px){ .cl-tabbar{max-inline-size:520px; margin-inline:auto} }

/* ── P8-4: sort + layout controls, list view, rating ── */
.cl-catalog-head{display:flex; gap:10px; align-items:center; padding:4px 20px 10px}
.cl-sort{flex:1}
.cl-sort select{inline-size:100%; padding:10px 14px; border-radius:var(--r-pill); font:inherit; font-size:.85rem;
  background:var(--card); color:var(--ink); border:1px solid var(--stroke-2); cursor:pointer}
.cl-layout{inline-size:44px; block-size:44px; flex:none; display:grid; place-items:center;
  border-radius:var(--r-pill); background:var(--card); color:var(--ink-2); border:1px solid var(--stroke-2); cursor:pointer}
.cl-layout.is-on{background:var(--cta-bg); color:var(--cta-ink)}
.cl-card-rate{color:var(--green-hi); font-size:.78rem; font-weight:700}
[data-mb-catalog].is-list .cl-grid{grid-template-columns:1fr}
[data-mb-catalog].is-list .cl-card{flex-direction:row; align-items:stretch}
[data-mb-catalog].is-list .cl-card-media{inline-size:120px; aspect-ratio:1; flex:none}
[data-mb-catalog].is-list .cl-card-body{flex:1}
.cl-card{cursor:pointer}

/* ── P8-5: product view (platform markup, themed) ── */
.mb-prod{position:relative}
.mb-prod-back{position:absolute; inset-block-start:8px; inset-inline-start:8px; z-index:3;
  inline-size:40px; block-size:40px; border-radius:var(--r-pill); border:0; cursor:pointer;
  background:rgba(0,0,0,.5); color:#fff; font-size:1.6rem; line-height:1; backdrop-filter:blur(6px)}
[dir="rtl"] .mb-prod-back{transform:scaleX(-1)}
.mb-prod-gallery{border-radius:var(--r-img); overflow:hidden; background:var(--card-2); aspect-ratio:4/3}
.mb-prod-img{inline-size:100%; block-size:100%; object-fit:cover}
.mb-prod-dots{display:flex; gap:6px; justify-content:center; padding:10px 0}
.mb-prod-dot{inline-size:8px; block-size:8px; border-radius:var(--r-pill); border:0; cursor:pointer; background:var(--stroke-2)}
.mb-prod-dot.is-on{background:var(--green); inline-size:20px}
.mb-prod-head{display:flex; align-items:center; gap:12px; margin-block-start:6px}
.mb-prod-head h2{font-family:var(--font-display); font-size:1.5rem; font-weight:600; flex:1}
.mb-prod-fav{inline-size:42px; block-size:42px; flex:none; border-radius:var(--r-pill); border:1px solid var(--stroke-2);
  background:var(--card); color:var(--ink-2); cursor:pointer; font-size:1.1rem}
.mb-prod-fav.is-on{background:var(--red); color:#fff; border-color:transparent}
.mb-prod-meta{color:var(--green-hi); font-weight:700; font-size:.85rem; margin-block-start:4px}
.mb-prod-desc{color:var(--ink-2); font-size:.9rem; margin-block-start:8px; line-height:1.5}
.mb-prod-stock{color:var(--red); font-weight:700; margin-block-start:8px}
.mb-prod-opts{margin-block-start:16px}
.mb-prod-related{margin-block-start:20px}
.mb-rail{display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; padding-block-start:8px}
.mb-rail-card{flex:0 0 132px; text-align:start; background:var(--card); border:1px solid var(--stroke);
  border-radius:var(--r-card); overflow:hidden; cursor:pointer; padding:0; color:inherit; display:grid}
.mb-rail-card img{inline-size:100%; aspect-ratio:4/3; object-fit:cover}
.mb-rail-card b{font-size:.82rem; padding:8px 10px 0}
.mb-rail-card span{color:var(--green-hi); font-size:.82rem; font-weight:700; padding:2px 10px 10px}
.mb-prod-cta{position:sticky; inset-block-end:0; display:flex; gap:12px; align-items:center;
  padding-block:14px; margin-block-start:8px; background:linear-gradient(transparent,var(--bg) 34%)}
.mb-qty{display:flex; align-items:center; gap:2px; background:var(--card); border:1px solid var(--stroke-2);
  border-radius:var(--r-pill); padding:4px}
.mb-qty button{inline-size:36px; block-size:36px; border-radius:var(--r-pill); border:0; cursor:pointer;
  background:var(--card-2); color:var(--ink); font-size:1.1rem}
.mb-qty output{min-inline-size:34px; text-align:center; font-weight:800}
.mb-prod-cta .mb-place{flex:1; inline-size:auto}

/* ── P8-6: tips + cart actions ── */
.mb-tip{margin-block:12px}
.mb-tip-label{font-weight:700; font-size:.85rem; display:block; margin-block-end:6px}
.mb-tip-opts{display:flex; gap:8px; margin-block-end:8px}
.mb-tip-opts button{flex:1; padding:10px; border-radius:var(--r-pill); border:1px solid var(--stroke-2);
  background:var(--card); color:var(--ink-2); cursor:pointer; font:inherit; font-size:.82rem; font-weight:700}
.mb-tip-opts button.is-on{background:var(--cta-bg); color:var(--cta-ink)}
.mb-tip-custom{margin-block-end:0}
.mb-cart-actions{display:flex; gap:10px; margin-block-start:10px}
.mb-ghost{flex:1; padding:11px; border-radius:var(--r-pill); border:1px solid var(--stroke-2);
  background:var(--card); color:var(--ink); cursor:pointer; font:inherit; font-weight:700; font-size:.85rem}

/* ── P8-7: confirmed view + confetti ── */
.cl-view-confirmed .cl-view-scroll{min-block-size:78vh; display:grid; place-items:center}
.mb-confirm{position:relative; text-align:center; padding:40px 20px; display:grid; gap:12px; justify-items:center; inline-size:100%; overflow:hidden}
.mb-confirm-check{inline-size:88px; block-size:88px; border-radius:var(--r-pill); background:var(--green-grad);
  display:grid; place-items:center; box-shadow:0 16px 40px -12px var(--green-deep); animation:mb-pop .5s var(--ease-pop,ease)}
.mb-confirm-check svg{inline-size:44px; block-size:44px; fill:none; stroke:var(--green-ink); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.mb-confirm h2{font-family:var(--font-display); font-size:1.7rem; font-weight:600}
.mb-confirm p{color:var(--ink-2)}
.mb-confirm .mb-place{inline-size:auto; padding-inline:44px; margin-block-start:8px}
.mb-confirm .mb-ghost{flex:none; inline-size:auto; padding-inline:26px}
@keyframes mb-pop{0%{transform:scale(.4); opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1); opacity:1}}
.mb-confetti{position:absolute; inset-block-start:0; inset-inline:0; block-size:0; pointer-events:none}
.mb-confetti i{position:absolute; inset-block-start:-12px; inline-size:9px; block-size:14px; opacity:0;
  animation:mb-fall 2.8s ease-in forwards}
.mb-confetti i:nth-child(4n+1){background:var(--green); inset-inline-start:14%}
.mb-confetti i:nth-child(4n+2){background:var(--green-hi); inset-inline-start:36%}
.mb-confetti i:nth-child(4n+3){background:#ffb02e; inset-inline-start:60%}
.mb-confetti i:nth-child(4n){background:var(--red); inset-inline-start:82%}
.mb-confetti i:nth-child(2n){inline-size:8px; block-size:8px; border-radius:50%}
.mb-confetti i:nth-child(6n){inset-inline-start:26%}
.mb-confetti i:nth-child(6n+3){inset-inline-start:70%}
.mb-confetti i:nth-child(3n){animation-delay:.25s}
.mb-confetti i:nth-child(3n+1){animation-delay:.5s}
.mb-confetti i:nth-child(5n){animation-delay:.75s}
@keyframes mb-fall{0%{opacity:1; transform:translateY(0) rotate(0)}100%{opacity:0; transform:translateY(440px) rotate(400deg)}}
@media (prefers-reduced-motion:reduce){.mb-confetti{display:none}.mb-confirm-check{animation:none}}

/* ── P8-9: splash intro ── */
.cl-splash{position:fixed; inset:0; z-index:200; background:radial-gradient(120% 90% at 50% 0%,var(--elev),var(--bg-deep));
  display:grid; place-items:center; opacity:1; transition:opacity .55s var(--ease)}
.cl-splash[hidden]{display:none}
.cl-splash.is-out{opacity:0; pointer-events:none}
.cl-splash-inner{text-align:center; display:grid; gap:12px; justify-items:center; padding:24px;
  animation:cl-splash-in .8s var(--ease-pop) both}
.cl-splash-logo{inline-size:100px; block-size:100px; border-radius:var(--r-pill); object-fit:cover;
  box-shadow:0 24px 60px -14px var(--green-deep); border:2px solid var(--stroke-2)}
.cl-splash-title{font-family:var(--font-display); font-size:2rem; font-weight:600}
.cl-splash-inner p{color:var(--ink-2)}
.cl-splash-skip{margin-block-start:24px; color:var(--ink-3); font-size:.76rem; letter-spacing:.06em;
  text-transform:uppercase; animation:cl-splash-pulse 1.6s ease-in-out infinite}
@keyframes cl-splash-in{0%{opacity:0; transform:translateY(18px) scale(.95)}100%{opacity:1; transform:none}}
@keyframes cl-splash-pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.cl-splash{display:none}}