/* كتلة ستايل المتجر المشتركة.
 *
 * كانت مضمَّنة حرفياً في خمس صفحات: index.html وcatalog.html وplants/index.html
 * وكل صفحة منتج مولَّدة — 51 KB مكرّرة في كل واحدة. أُثبت أن هذا النصّ بالذات
 * متطابق بايتاً ببايت في الخمس قبل استخراجه.
 *
 * ما لم يُستخرج: قواعد صندوق البحث وحدها. index وصفحات المنتجات تطويه إلى
 * أيقونة عند **كل** عرض (قرار D1)، بينما الكتالوج يُبقي الحقل ظاهراً على
 * الديسكتوب لأنه أداته الأساسية ويطويه على الهاتف فقط. ذلك فرق تصميمي مقصود
 * موثّق في build-catalog.py، فبقي مضمَّناً في كل صفحة بصيغتها.
 *
 * الترتيب مقصود: هذه الورقة تُحمَّل في موضع <style> القديم نفسه — قبل
 * pw-tokens وidentity-v2 وcard وtabbar — ثم تليها كتلة القواعد الخاصة بالصفحة.
 * تغيير هذا الترتيب يغيّر التتالي.
 *
 * لا تُحرَّر من الصفحات المولَّدة. المصدر هنا.
 */

  :root{
    /* NOTE — the archive palette is NOT declared here.
       assets/identity-v2.css loads after this file on every page that loads it
       (index/catalog/plants x3 — verified: there is no consumer of
       storefront.css that omits it) and redefines the palette at :root. The 17
       legacy terracotta values that used to sit in this block were therefore
       dead: --ivory/--card/--pine/--pine-soft/--gold/--gold-soft/--gold-ink/
       --sage/--line/--shadow/--accent-bg/--accent-bg-2/--accent-ink/
       --cta-green/--cta-green-hover/--radius-pill/--radius-card. They read as
       the current palette and were not — --radius-pill said 999px while every
       pill on the site renders at 2px. Removed rather than left to mislead.
       The tokens below are the ones identity-v2 does not restate; they are
       live and must stay. */
    color-scheme: light;
    /* ===== Design System v1 tokens (docs/archive/DESIGN_SYSTEM_V1.md) — canonical values.
       Existing variable names are kept so every downstream rule below inherits the
       refined identity without needing to be rewritten. ===== */
    --card-elevated:#F5EFE2;   /* color-surface-elevated */
    --pine-muted:#8A8172;      /* color-text-muted */
    --wine:#A24A3B;            /* color-danger (muted brick, was a louder magenta-wine) */
    --success:#5C7A52;         /* color-success */
    --warning:#B08A3F;         /* color-warning */
    --divider:#E7DCC8;         /* color-divider */
    --pattern-opacity: 0;
    --placeholder:#E4F4E8;
    --mint:#E4F4E8;
    --mint-2:#F2FAF4;
    /* fixed accent surface: buttons/badges/care-section that must always
       stay dark-bg + light-ink (not part of the light/dark split — dark mode
       is permanently disabled per DECISIONS.md §A5) */
    /* fixed tier colors, used for rarity badges — stay constant so badge text stays legible */
    --tier-common:#5C7A52;
    --tier-uncommon:#1B2417;
    --tier-rare:#9C7A32;
    --tier-grail:#6B2E3D;
    /* primary CTA — color-primary-strong, darkened terracotta for AA contrast */
    /* glass surfaces (light-only — dark mode removed) */
    --veil-strong: rgba(255,255,255,0.9);
    --veil-strong-2: rgba(255,255,255,0.94);
    --veil-soft: rgba(16,36,26,0.06);
    --veil-soft-border: rgba(16,36,26,0.13);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--ivory);
    background-image:
      radial-gradient(55% 40% at 88% 4%, rgba(175,99,56,0.26), transparent 60%),
      radial-gradient(50% 34% at 6% 16%, rgba(126,148,113,0.34), transparent 58%),
      linear-gradient(160deg, #F1EADB 0%, #E7D9C0 60%, #E1D0B2 100%);
    color:var(--pine);
    font-family:'IBM Plex Sans Arabic', sans-serif;
    font-size:16px;
    line-height:1.7;
    overflow-x:clip; /* clip بدل hidden: يخفي الأفقي بدون صنع حاوية سكرول (يحفظ مومنتَم iOS) */
    position:relative;
  }
  /* botanical background pattern */
  body::before{
    content:'';
    position:fixed; inset:0;
    z-index:0;
    pointer-events:none;
    opacity:var(--pattern-opacity);
    transition:opacity .35s ease;
    background-repeat:repeat;
    background-size:300px 300px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'><g fill='none' stroke='%235C7A52' stroke-width='1.5' stroke-linecap='round'><path d='M30 60 C60 40 95 55 120 40'/><path d='M45 52 c-6 -10 -2 -20 8 -22 3 10 -1 19 -8 22z' fill='%235C7A52' fill-opacity='0.5' stroke='none'/><path d='M70 47 c-7 -9 -4 -20 6 -23 4 10 1 19 -6 23z' fill='%235C7A52' fill-opacity='0.35' stroke='none'/><path d='M98 44 c-6 -10 -2 -20 8 -22 3 10 -1 19 -8 22z' fill='%235C7A52' fill-opacity='0.5' stroke='none'/><path d='M58 62 c8 -8 19 -6 22 4 -10 4 -19 1 -22 -4z' fill='%235C7A52' fill-opacity='0.3' stroke='none'/><path d='M88 58 c8 -8 19 -6 22 4 -10 4 -19 1 -22 -4z' fill='%235C7A52' fill-opacity='0.3' stroke='none'/></g><g fill='none' stroke='%235C7A52' stroke-width='1.5' stroke-linecap='round'><path d='M215 130 C245 155 240 190 265 205'/><path d='M228 143 c11 -3 20 4 18 14 -10 0 -18 -6 -18 -14z' fill='%235C7A52' fill-opacity='0.45' stroke='none'/><path d='M243 165 c11 -3 20 4 18 14 -10 0 -18 -6 -18 -14z' fill='%235C7A52' fill-opacity='0.35' stroke='none'/><path d='M255 187 c11 -3 20 4 18 14 -10 0 -18 -6 -18 -14z' fill='%235C7A52' fill-opacity='0.45' stroke='none'/><path d='M232 160 c-10 -5 -12 -16 -4 -22 7 8 8 18 4 22z' fill='%235C7A52' fill-opacity='0.3' stroke='none'/></g><g fill='none' stroke='%235C7A52' stroke-width='1.5' stroke-linecap='round'><path d='M40 250 C75 265 90 240 130 255'/><path d='M55 244 c-4 -11 3 -20 13 -19 -1 10 -7 18 -13 19z' fill='%235C7A52' fill-opacity='0.4' stroke='none'/><path d='M88 246 c-4 -11 3 -20 13 -19 -1 10 -7 18 -13 19z' fill='%235C7A52' fill-opacity='0.5' stroke='none'/><path d='M70 262 c9 -6 20 -2 21 8 -10 2 -19 -2 -21 -8z' fill='%235C7A52' fill-opacity='0.3' stroke='none'/><path d='M110 260 c9 -6 20 -2 21 8 -10 2 -19 -2 -21 -8z' fill='%235C7A52' fill-opacity='0.35' stroke='none'/></g><g fill='none' stroke='%235C7A52' stroke-width='1.5' stroke-linecap='round'><path d='M280 40 C295 70 275 95 290 125'/><path d='M285 58 c10 -4 19 2 18 12 -10 1 -17 -4 -18 -12z' fill='%235C7A52' fill-opacity='0.4' stroke='none'/><path d='M281 88 c-10 -4 -12 -14 -4 -20 6 8 7 17 4 20z' fill='%235C7A52' fill-opacity='0.35' stroke='none'/><path d='M287 110 c10 -4 19 2 18 12 -10 1 -17 -4 -18 -12z' fill='%235C7A52' fill-opacity='0.45' stroke='none'/></g><g fill='none' stroke='%235C7A52' stroke-width='1.5' stroke-linecap='round'><path d='M150 300 C180 285 205 305 240 292'/><path d='M165 292 c-5 -10 1 -20 11 -20 0 10 -5 18 -11 20z' fill='%235C7A52' fill-opacity='0.45' stroke='none'/><path d='M200 300 c-5 -10 1 -20 11 -20 0 10 -5 18 -11 20z' fill='%235C7A52' fill-opacity='0.35' stroke='none'/><path d='M182 306 c9 -6 20 -1 20 9 -10 2 -18 -3 -20 -9z' fill='%235C7A52' fill-opacity='0.3' stroke='none'/></g><g fill='none' stroke='%235C7A52' stroke-width='1.5' stroke-linecap='round'><path d='M160 170 C175 145 165 120 178 95'/><path d='M167 155 c-10 -3 -13 -13 -6 -20 7 7 9 16 6 20z' fill='%235C7A52' fill-opacity='0.35' stroke='none'/><path d='M170 125 c10 -3 18 4 16 13 -9 0 -16 -5 -16 -13z' fill='%235C7A52' fill-opacity='0.45' stroke='none'/></g></svg>");
  }
  /* keep content above the pattern */
  header.nav, section, footer, .tabbar, nav.links{position:relative; z-index:1;}
  header.nav{z-index:50;}
  .tabbar{z-index:70;}
  /* heading font per canonical docs/archive/DESIGN_SYSTEM_V1.md §3 (font-h1/h2/h3) */
  h1,h2,h3, .display{
    font-family:'El Messiri', sans-serif;
    font-weight:700;
    letter-spacing:0.5px;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

  /* ===== NAV ===== */
  header.nav{
    position:sticky; top:0; z-index:50;
    background:transparent;
    /* superseded by header.nav in assets/identity-v2.css — the safe-area
       padding lives there, on the rule that actually wins */
    padding:10px 12px 0;
    border-bottom:none;
  }
  .nav-inner{
    display:flex; align-items:center; gap:28px;
    padding:16px 40px; max-width:1360px; margin:0 auto;
    background:transparent;
    border:0; border-radius:0; box-shadow:none;
  }
  .nav-spacer{flex:1;}
  /* The mark is drawn at D1's 26px, but 26px is under the 44px touch floor
     this project holds everywhere. It takes the same transparent inset the
     icons and the locale control already use — the drawn size is untouched,
     only the hit area grows. */
  .brand{display:flex; align-items:center; gap:10px; position:relative;}
  .brand::before{
    content:''; position:absolute; top:50%; left:50%;
    min-width:44px; width:100%; height:44px; transform:translate(-50%,-50%);
  }
  .nav-inner .brand img{display:none;}
  .brand-mark{display:block; width:26px; height:26px; flex-shrink:0;}
  nav.links{display:flex; gap:28px; font-size:13.5px;}
  nav.links svg{display:none;}
  nav.links a{position:relative; padding-bottom:3px; color:var(--archive-ink-soft); transition:color .25s;}
  nav.links a:hover{color:var(--archive-ink);}
  /* D1 marks the current page with a 1.5px ink rule and weight 600 — a state,
     not a hover flourish. The old clay grow-in underline is gone with it. */
  nav.links a.is-active{
    color:var(--archive-ink); font-weight:600;
    border-bottom:1.5px solid var(--archive-ink);
  }
  .nav-cta{
    background:var(--cta-green); color:var(--accent-ink); padding:9px 20px; border-radius:var(--radius-pill);
    font-size:0.9rem; display:flex; align-items:center; gap:6px; transition:background .25s, transform .15s;
  }
  .nav-cta:hover{background:var(--cta-green-hover); transform:translateY(-1px);}
  .nav-cta:active{transform:scale(0.95);}

  /* D1 draws the three header controls as bare 19px glyphs — no box, no fill,
     no border. The 44px hit target is kept as a transparent inset so touch
     accessibility does not pay for the visual change. */
  .icon-toggle{
    display:flex; align-items:center; justify-content:center;
    width:19px; height:19px; padding:0;
    border:0; border-radius:0; background:none;
    color:var(--archive-ink); cursor:pointer;
    transition: color .25s;
    flex-shrink:0; position:relative;
  }
  .icon-toggle::before{
    content:''; position:absolute; top:50%; left:50%;
    width:44px; height:44px; transform:translate(-50%,-50%);
  }
  .icon-toggle:hover{color:var(--archive-clay-deep);}
  .icon-toggle svg{width:19px; height:19px;}
  .icon-toggle.lang-toggle{font-family:'IBM Plex Sans Arabic',sans-serif; font-size:0.72rem; font-weight:700;}
  /* D1: plain text with a hairline under it. No box, no fill, no radius. */
  .lang-toggle-desktop{
    display:inline-flex; align-items:center;
    width:auto; height:auto; padding:0 0 2px;
    background:none; border:0;
    border-bottom:1px solid var(--archive-line);
    border-radius:0;
    color:var(--archive-ink-soft);
    /* D1 sets this control in Mono. Mono carries NO Arabic glyphs, and this
       button is the one place a locale label is Arabic ("العربية", shown while
       the UI is in English) — without a fallback it dropped to the generic
       monospace face and rendered at the wrong size and shape. The Arabic face
       is appended so the browser falls back per glyph: Latin "EN" still renders
       Mono exactly as D1 draws it, Arabic renders in a face that has Arabic. */
    font-family:'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace; font-size:11px; font-weight:500;
    cursor:pointer; transition:color .25s, border-color .25s;
  }
  .lang-toggle-desktop:hover{color:var(--archive-ink); border-color:var(--archive-ink);}
  /* Text this small is a 13x19 tap target once the box is gone, so it takes the
     same transparent 44px inset the icons use. Measured clear of the search
     icon's zone: they end at 204 and this one starts at 206. */
  .lang-toggle-desktop{position:relative;}
  .lang-toggle-desktop::before{
    content:''; position:absolute; top:50%; left:50%;
    min-width:44px; width:100%; height:44px; transform:translate(-50%,-50%);
  }
  /* 28px, the same gap D1 uses for the whole row — in the artboard the locale
     and the three glyphs are direct children of that one flex container. It
     also keeps the 44px hit targets below from overlapping: 19px glyph on a
     47px pitch leaves them 3px clear of each other. */
  .nav-toggles{display:flex; align-items:center; gap:28px;}

  /* ===== SEARCH ===== */
  .search-box{
    position:relative;
    display:flex; align-items:center; gap:8px;
    background:var(--ivory); border:1.5px solid var(--line); border-radius:var(--radius-pill);
    padding:8px 16px; min-width:190px; flex-shrink:0;
  }
  .search-box svg{width:16px; height:16px; flex-shrink:0; color:var(--pine-soft); opacity:0.7;}
  .search-box input{
    border:none; background:none; outline:none; width:100%;
    font-family:'IBM Plex Sans Arabic',sans-serif; font-size:0.85rem; color:var(--pine);
  }
  .search-box input::placeholder{color:var(--pine-soft); opacity:0.6;}
  /* بديل تركيز واضح للبحث + حلقة تركيز عامة للوحة المفاتيح */
  .search-box:focus-within{border-color:var(--gold); box-shadow:0 0 0 3px rgba(30,122,60,0.15);}
  :focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:4px;}
  .search-box input:focus-visible{outline:none;}
  /* ===== أرضية 16px للحقول — منع تكبير Safari على iOS =====
     Safari يكبّر الصفحة كلها عند التركيز على حقل خطه أقل من 16px، وكل حقول
     الموقع كانت بين 13.6 و14.7px. الصفحة تبقى مكبّرة حتى يقرص المستخدم
     للخروج. أرضية لا إعادة تصميم: 16px هي العتبة التي يفحصها Safari،
     فما هو أكبر منها لا يتأثر. */
  @media (max-width: 1024px){
    /* :is() يحمل أعلى خصوصية بين وسائطه، فمحدِّد واحد يغطي الثلاثة ويظل
       يغلب قواعد الصفحات مثل .field textarea التي كانت ستفوز بدونه. */
    :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]){
      font-size:16px;
    }
  }
  /* لمس أسرع + أرقام منتظمة + عناوين متوازنة */
  a, button, .tab, .card, .brand-card{touch-action:manipulation;}
  .price, .price-original, .stake-count, .cart-badge{font-variant-numeric:tabular-nums;}
  h1, h2, h3{text-wrap:balance;}
  /* رابط تخطي للمحتوى */
  .skip-link{
    position:absolute; top:-48px; inset-inline-start:12px; z-index:200;
    background:var(--gold); color:#fff; padding:10px 20px; border-radius:8px;
    font-size:0.85rem; font-weight:600; text-decoration:none;
    transition:top .2s ease;
  }
  .skip-link:focus{top:12px;}
  .search-icon-mobile, .close-search-mobile{display:none;}

  /* ===== SEARCH RESULTS DROPDOWN ===== */
  .search-results{
    position:absolute; top:calc(100% + 8px); inset-inline-start:0; inset-inline-end:0;
    background:var(--card); border:1px solid var(--line); border-radius:16px;
    box-shadow:0 18px 40px rgba(27,36,23,0.18);
    max-height:360px; overflow-y:auto; overscroll-behavior:contain;
    display:none; z-index:60;
  }
  .search-results.open{display:block;}
  .search-result-item{
    display:flex; align-items:center; gap:10px; padding:9px 12px;
    cursor:pointer; border-bottom:1px solid rgba(27,36,23,0.06);
    text-align:start;
  }
  .search-result-item:last-child{border-bottom:none;}
  .search-result-item:hover, .search-result-item:active{background:rgba(27,36,23,0.05);}
  .search-result-thumb{
    width:38px; height:38px; border-radius:10px; object-fit:cover; flex-shrink:0;
    background:rgba(92,122,82,0.10);
  }
  .search-result-info{min-width:0; flex:1;}
  .search-result-name{font-size:0.85rem; color:var(--pine); font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .search-result-price{font-size:0.75rem; color:var(--gold); margin-top:1px;}
  .search-result-empty{padding:16px 12px; text-align:center; font-size:0.82rem; color:var(--pine-soft); opacity:0.75;}

  /* ===== ANNOUNCEMENT BAR ===== */
  .announce-bar{
    background:#1E4230; color:#EFE7D6; text-align:center;
    padding:9px 16px; font-size:0.82rem; font-weight:600; letter-spacing:0.02em;
  }

  @media (max-width: 760px){
    /* .lang-toggle-desktop is no longer hidden here. It used to be safe because
       the hamburger drawer carried a language row; with the drawer gone this is
       the only language control a signed-out phone visitor has — the account
       sheet's row opens for signed-in users only. */
    /* بطاقات أصغر: عمودان على الجوال */
    /* شيل الحشوة الجانبية الزايدة عن قسم المتجر عشان البطاقات تاخذ نفس عرض الأقسام */
    #shop{padding-left:0 !important; padding-right:0 !important;}
    #grid{grid-template-columns:repeat(2, minmax(0,1fr)) !important;}
    #grid .card-media{height:auto; aspect-ratio:4/5;}
    #grid .card-media svg{width:60px; height:60px;}
    /* Phase 3A: the `#grid .card-body ...` overrides that lived here are gone
       with the template that needed them. The grid now renders .cat-caption,
       and its type, its two-line name and its gaps come from card.css. The
       one that mattered most was `.name-en{display:none}` — the Latin name
       was in the DOM on every phone, rendering at zero height. */
    /* شريط الفلتر: كل الأزرار (حتى كنز نباتي) تبين وتنضغط على الشاشة */
    #filters{width:100%; overflow-x:visible;}
  }

  /* ===== HERO: منقسم — الصورة يسار والنص يمين على كل المقاسات =====
     NOTE: layout here is superseded by assets/identity-v2.css (loaded after
     this block), which redefines .hero as a CSS Grid with its own mobile
     breakpoint at 760px. These rules are the pre-identity-v2 baseline; kept
     for graceful degradation only if that stylesheet fails to load. ===== */
  .hero{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    width:calc(100% - 24px);      /* هامش جانبي بالجوال: البطاقة تطفو ولا تلزق بالحافة */
    max-width:1180px;
    margin:14px auto 0;
    background:transparent;
    border:none;
    box-shadow:none;
    display:flex;
    flex-direction:row;
    align-items:stretch;
    min-height:420px;
  }
  .hero-visual{
    order:0;                      /* بداية التدفّق بصفحة RTL = يسار */
    position:relative; flex:0 0 48%; overflow:hidden;
  }
  .hero-visual img{
    width:100%; height:100%; object-fit:cover; display:block;
    object-position:60% center;   /* يوجّه الكادر على نبتة الأنثوريوم */
  }
  .hero-content{
    order:-1;                     /* النص أول = يمين بصفحة RTL */
    position:relative; z-index:1;
    flex:1 1 52%;
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
    padding:22px 18px;
    text-align:start;
  }
  .hero .eyebrow{justify-content:flex-start;}
  .hero .eyebrow::before, .hero .eyebrow::after{display:none;}
  /* أزرار الهيرو على الجوال: عرض كامل، مكدّسة، النص بسطر واحد */
  .hero .btn-primary, .hero .btn-ghost{
    width:100%; justify-content:center; white-space:nowrap;
    padding-block:12px; padding-inline:16px;
  }
  .hero .btn-ghost{margin-inline-start:0; margin-top:8px;}
  @media (min-width: 900px){
    .hero{min-height:560px; border-radius:32px;}
    .hero-visual{flex:0 0 56%;}
    .hero-visual img{object-fit:cover; object-position:center; transform:none;}
    .hero-content{flex:1 1 44%; padding:56px 48px;}
    .hero .btn-primary, .hero .btn-ghost{width:auto; padding-block:14px;}
    .hero .btn-ghost{margin-inline-start:14px; margin-top:0;}
  }
  .hero h1{
    font-family:'El Messiri', sans-serif;
    font-size:clamp(1.55rem, 5.6vw, 2.4rem);
    font-weight:700;
    line-height:1.3;
    color:#33422B;
    margin-bottom:0;
  }
  .hero h1 span{color:inherit;}
  .hero h1 .accent-rare{color:var(--gold);}
  .hero p.sub{
    font-size:0.86rem; color:var(--pine-soft); max-width:40ch; margin:0 0 18px;
    opacity:0.9; line-height:1.6;
  }
  @media (min-width: 900px){
    .hero h1{font-size:clamp(2rem, 3vw, 2.8rem); line-height:1.3; margin-bottom:14px;}
    .hero p.sub{font-size:0.95rem; margin:0 0 26px; max-width:44ch; opacity:1;}
  }
  @media (min-width: 1150px){
    .hero h1{font-size:clamp(2.4rem, 3.2vw, 3.2rem);}
  }
  .btn-primary{
    position:relative; overflow:hidden;
    display:inline-flex; align-items:center; gap:8px;
    background:var(--cta-green); color:var(--accent-ink);
    padding:14px 32px; border-radius:var(--radius-pill); font-size:1rem; font-weight:600;
    box-shadow:var(--shadow); transition:transform .2s ease, background .25s, box-shadow .25s;
  }
  .btn-primary > svg, .btn-primary > span{position:relative; z-index:1;}
  /* لمعة ذهبية تمرّ عبر الزر عند المرور */
  .btn-primary::after{
    content:''; position:absolute; top:0; left:0; width:60%; height:100%; z-index:0;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
    transform:translateX(-190%) skewX(-18deg); pointer-events:none;
    transition:transform .75s ease;
  }
  .btn-primary:hover{
    background:var(--cta-green-hover); transform:translateY(-3px);
    box-shadow:0 12px 26px rgba(27,36,23,0.20);
  }
  .btn-primary:hover::after{transform:translateX(290%) skewX(-18deg);}
  .btn-primary:active{transform:scale(0.96);}
  @media (prefers-reduced-motion: reduce){
    .btn-primary{transition:background .25s;}
    .btn-primary:hover{transform:none;}
    .btn-primary::after{display:none;}
  }
  .btn-ghost{
    display:inline-flex; align-items:center; gap:8px;
    border:1.5px solid var(--cta-green); color:var(--cta-green);
    padding:12px 28px; border-radius:var(--radius-pill); font-size:0.95rem; margin-inline-start:14px;
    transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  }
  .btn-ghost:hover{background:var(--cta-green); color:var(--accent-ink);}
  .btn-ghost:active{transform:scale(0.95);}

  /* ===== SHOP ===== */
  .shop{padding:60px 24px 40px;}
  /* مسافات أوسع وأفخم على الشاشات الكبيرة */
  @media (min-width: 1024px){
    .brands-section{padding:96px 0 40px;}
    .shop{padding:96px 24px 60px;}
    .wrap{padding:0 32px;}
  }
  .section-head{text-align:center; margin-bottom:36px;}
  .section-head h2{font-size:2rem; color:var(--pine); margin-bottom:14px; letter-spacing:0.5px;}
  .section-head h2::after{
    content:''; display:block; width:56px; height:2px; margin:14px auto 0;
    background:linear-gradient(90deg, transparent, var(--gold), transparent);
  }
  .section-head p{color:var(--pine-soft); opacity:0.8; font-size:0.95rem;}

  .grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(255px,1fr));
    gap:26px;
  }
  /* Phase 3A — A5. The rounded, cream, drop-shadowed card this block used to
     describe has not rendered since the archive identity landed: identity-v2.css
     loads after this <style> and sets .card background/border/radius/box-shadow
     to nothing, and .card:hover's transform/shadow/border to none. Measured on
     every device before deleting — radius 0, shadow none, background
     transparent. Only the declarations nothing overrides are kept below.
     .card-media's radius, border and mint background were dead the same way. */
  .card{
    padding:11px;
    display:flex; flex-direction:column;
  }
  .card-media{
    aspect-ratio:4/5; display:flex; align-items:center; justify-content:center;
    position:relative;
    overflow:hidden;
  }
  /* زووم ناعم للصورة عند المرور (Motion-Driven) */
  .card-img{transition:transform .5s cubic-bezier(.22,.61,.36,1);}
  .card:hover .card-img{transform:scale(1.07);}
  /* ===== Skeleton loading لصور المنتجات ===== */
  .card-img.pending{opacity:0;}
  .card-img.loaded{opacity:1; transition:opacity .45s ease, transform .5s cubic-bezier(.22,.61,.36,1);}
  .card-media.is-loading{
    background-image:linear-gradient(100deg,
      var(--placeholder) 28%,
      rgba(255,255,255,0.55) 50%,
      var(--placeholder) 72%) !important;
    background-size:200% 100%;
    animation:skeleton 1.3s ease-in-out infinite;
  }
  @keyframes skeleton{0%{background-position:180% 0;}100%{background-position:-40% 0;}}
  @media (prefers-reduced-motion: reduce){
    .card-media.is-loading{animation:none;}
    .card-img.loaded{transition:none;}
  }
  .card-media::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, transparent 55%, rgba(27,36,23,0.10));
    opacity:0; transition:opacity .35s ease;
  }
  .card:hover .card-media::after{opacity:1;}
  @media (prefers-reduced-motion: reduce){
    .card, .card-img, .card-media::after{transition:none;}
    .card:hover{transform:none;}
    .card:hover .card-img{transform:none;}
  }
  .card-media svg{width:88px; height:88px;}
  /* ختم رتبة الندرة على بطاقة النبتة — نفس فكرة بطاقات التصنيف */
  .badge-seal{
    position:absolute; top:12px; inset-inline-end:12px; z-index:2;
    width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-family:'IBM Plex Mono', monospace;
    font-size:12px; font-weight:600;
    /* Phase 3D: the drop shadow made the one archival mark on the card read as
       a sticker floating above the plate. Stamped, not stuck on. */
  }
  /* شارة البراند (القسم) على كرت النبتة */
  /* ===== سيكشن أقسام المتجر ===== */
  .brands-section{padding:60px 0 20px;}
  .brands-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(155px, 1fr)); gap:14px;
  }
  .brand-card-logo{
    width:90px; height:90px; border-radius:50%; object-fit:cover;
    background:#fff; margin:0 auto 14px; display:block;
    box-shadow:0 4px 16px rgba(27,36,23,0.14);
    transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
  }
  @media (prefers-reduced-motion: reduce){
    .brand-card-logo{transition:box-shadow .3s ease;}
  }
  /* ختم قسم النبتة (حرف أول) — بديل اللوقو على بطاقة القسم */
  .cat-card-seal{
    width:64px; height:64px; border-radius:50%;
    margin:0 auto 14px; display:flex; align-items:center; justify-content:center;
    background:var(--mint); color:var(--gold);
    font-family:'Changa', sans-serif; font-weight:800; font-size:1.6rem;
    border:1.5px solid var(--gold-soft);
    transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
  }
  @media (prefers-reduced-motion: reduce){
    .cat-card-seal{transition:box-shadow .3s ease;}
  }
  .brand-card-name{font-weight:700; font-size:0.94rem; color:var(--pine); margin-bottom:12px;}
  .brand-card-btn{
    display:inline-block; font-size:0.75rem; font-weight:700;
    color:var(--gold); border:1px solid var(--gold-soft); border-radius:999px;
    padding:5px 18px; transition:background .18s ease, color .18s ease;
  }
  .card-body{padding:14px 8px 6px; flex:1; display:flex; flex-direction:column;}
  .card-body .name-ar{font-size:1.08rem; font-weight:700; color:var(--pine); margin-bottom:2px; transition:color .25s ease;}
  .card:hover .name-ar{color:var(--gold);}
  /* ===== ظهور ناعم للأقسام عند السكرول (Motion-Driven) ===== */
  .reveal{
    opacity:0; transform:translateY(26px);
    transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--reveal-delay, 0ms);
  }
  .reveal.in{opacity:1; transform:none;}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1 !important; transform:none !important; transition:none;}
  }
  /* على أجهزة اللمس: ألغِ حركات الـhover عشان ما تعلق بعد الضغط */
  @media (hover: none){
    .card:hover{transform:none;}
    .card:hover .card-img{transform:none;}
    .card:hover .card-media::after{opacity:0;}
    .card:hover .name-ar{color:var(--pine);}
    .btn-primary:hover{transform:none;}
    .btn-primary:hover::after{transform:translateX(-190%) skewX(-18deg);}
  }
  .card-body .name-en{font-size:0.78rem; font-style:italic; color:var(--pine-soft); opacity:0.8; margin-bottom:10px; letter-spacing:-0.01em;}
  .card-body .price{font-size:1rem; color:var(--gold-ink); font-weight:700; margin-bottom:14px; letter-spacing:-0.01em;}
  .price-original{
    font-size:0.82em; font-weight:500; color:var(--pine-soft); opacity:0.55;
    text-decoration:line-through; margin-inline-end:8px; letter-spacing:-0.01em;
  }
  .price-sale{color:var(--wine);}
  /* شارة طريقة الاستلام (Phase 6b) — حاشية أرشيفية هادئة، استثناءات فقط */
  .fulfill-chip{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'IBM Plex Mono', monospace; font-size:0.64rem; font-weight:500;
    letter-spacing:0.08em; color:var(--pine-soft);
  }
  .fulfill-chip::before{
    content:''; width:5px; height:5px; border-radius:50%;
    background:currentColor; opacity:0.65; flex:0 0 5px;
  }
  .fulfill-chip.approval{color:var(--gold-ink);}
  .card-body .fulfill-chip{margin:-8px 0 12px;}
  .cat-caption .fulfill-chip{margin-top:2px;}
  .cart-info .fulfill-chip{margin-top:3px;}
  .card-body .order-btn{
    margin-top:auto;
    display:flex; align-items:center; justify-content:center; gap:7px;
    background:var(--cta-green); color:var(--accent-ink); padding:10px; border-radius:var(--radius-pill);
    font-size:0.85rem; font-weight:600; transition:background .25s, transform .15s;
  }
  .card-body .order-btn:hover{background:var(--cta-green-hover);}
  .card-body .order-btn:active{transform:scale(0.95);}
  .card-body .order-btn svg{width:16px; height:16px;}
  /* أي أيقونة داخل زر الطلب لازم تكون صغيرة — يمنع تضخّم الأيقونة */
  /* صف الزرين: واتساب + للسلة */
  .btn-row{
    margin-top:auto;
    display:grid; grid-template-columns:1fr 1fr; gap:7px;
  }
  .btn-row .order-btn{margin-top:0;}
  .cart-btn{
    display:flex; align-items:center; justify-content:center; gap:6px;
    background:transparent;
    border:1.5px solid var(--sage);
    color:#33422B;
    padding:10px 6px; border-radius:var(--radius-pill);
    font-family:inherit; font-size:0.8rem; font-weight:600;
    cursor:pointer;
    transition:background .2s, color .2s, transform .15s;
  }
  .cart-btn:hover{background:#33422B; color:#F3ECDD; border-color:#33422B;}
  .cart-btn:active{transform:scale(0.95);}
  .cart-btn.added{background:#33422B; border-color:#33422B; color:#F3ECDD;}

  .order-btn{display:flex !important; align-items:center; justify-content:center; gap:7px;}
  .order-btn svg{
    width:16px !important; height:16px !important;
    min-width:16px; min-height:16px;
    max-width:16px; max-height:16px;
    flex:0 0 16px !important;
  }

  /* كتلة «العناية» القديمة (الخضراء الداكنة) ذهبت من هنا: identity-v2.css يملك
     .care* كاملاً منذ الهجرة، ولم يبقَ من هذه الكتلة أثرٌ مرئي إلا ما تسرّب من
     تحته — padding:26px على البطاقة كان يجعل كل طيّة مغلقة 109px بدل 56،
     وtranslateY عند التحويم كان يرفع صفّ أكورديون. قِيس ثم حُذف، لا حُجب. */

  /* ===== FOOTER ===== */
  footer{background:var(--accent-bg-2); background-image:linear-gradient(var(--accent-bg-2),var(--accent-bg-2)); color:var(--accent-ink); padding:44px 24px 26px;}
  footer .wrap{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;}
  footer .brand-name{font-size:1.3rem; color:#F2FAF4; font-family:'El Messiri',sans-serif; font-weight:700;}
  footer .brand-name b{color:var(--gold-soft); font-weight:700;}
  footer .foot-social{display:flex; gap:14px; margin:2px 0;}
  footer .foot-ic{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(242,250,244,0.28); color:#F2FAF4; transition:background .25s, color .25s, border-color .25s, transform .15s;}
  footer .foot-ic svg{width:22px; height:22px;}
  footer .foot-ic:active{transform:scale(0.94);}
  footer .foot-ic.wa:hover{background:#25D366; border-color:#25D366; color:#0A2A15;}
  footer .foot-ic.ig:hover{background:#E1306C; border-color:#E1306C; color:#fff;}
  footer .foot-links{display:flex; gap:22px; font-size:0.88rem; opacity:0.9;}
  footer .foot-links a:hover{color:var(--gold-soft);}
  footer .copy{font-size:0.75rem; opacity:0.7; margin-top:10px;}

  /* floating whatsapp */
  .float-wa{
    position:fixed; bottom:22px; inset-inline-end:22px; z-index:60;
    width:56px; height:56px; border-radius:50%;
    background:#25D366; display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 26px rgba(0,0,0,0.25);
    animation: pulse 2.6s infinite;
  }
  .float-wa svg{width:28px; height:28px; fill:#fff;}
  @keyframes pulse{
    0%{box-shadow:0 10px 26px rgba(37,211,102,0.35);}
    50%{box-shadow:0 10px 26px rgba(37,211,102,0.65);}
    100%{box-shadow:0 10px 26px rgba(37,211,102,0.35);}
  }
  @media (prefers-reduced-motion: reduce){
    .float-wa{animation:none;}
  }

  /* ===== PRODUCT DETAIL OVERLAY ===== */
  .overlay{
    position:fixed; inset:0; z-index:90;
    background:rgba(27,36,23,0.35);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    display:flex; align-items:flex-end; justify-content:center;
    opacity:0; pointer-events:none;
    transition:opacity .3s ease;
  }
  .overlay.open{opacity:1; pointer-events:auto;}
  .sheet{
    width:100%; max-width:640px;
    max-height:92vh; overflow-y:auto; overscroll-behavior:contain;
    background:var(--ivory);
    background-image:linear-gradient(var(--ivory),var(--ivory));
    border-radius:26px 26px 0 0;
    transform:translateY(100%);
    transition:transform .45s cubic-bezier(.22,.9,.24,1);
    -webkit-overflow-scrolling:touch;
    position:relative;
  }
  .overlay.open .sheet{transform:translateY(0);}
  @media(min-width:700px){
    .overlay{align-items:center; padding:30px;}
    .sheet{border-radius:26px; max-height:86vh;}
    .overlay.open .sheet{transform:translateY(0);}
    .sheet{transform:translateY(30px);}
  }
  .sheet-grab{
    width:44px; height:5px; border-radius:3px;
    background:rgba(27,36,23,0.2);
    margin:10px auto 0;
  }
  .sheet-close{
    position:absolute; top:14px; inset-inline-end:14px; z-index:3;
    width:34px; height:34px; border-radius:50%;
    background:rgba(27,36,23,0.55); color:var(--accent-ink);
    border:none; font-size:1rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  .sheet-hero{
    height:300px; background:var(--placeholder);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; position:relative;
  }
  .sheet-hero img{width:100%; height:100%; object-fit:cover;}
  .sheet-hero svg{width:130px; height:130px;}
  .sheet-body{padding:22px 24px calc(28px + env(safe-area-inset-bottom, 0px));}
  .sheet-badges{display:flex; gap:8px; margin-bottom:12px;}
  .sheet-body h2{font-size:1.6rem; color:var(--pine); margin-bottom:2px;}
  .sheet-body .latin{font-style:italic; font-size:0.85rem; color:var(--pine-soft); opacity:0.7; margin-bottom:14px; letter-spacing:-0.01em;}
  .sheet-body .desc{font-size:0.92rem; color:var(--pine-soft); line-height:1.9; margin-bottom:18px;}
  .sheet-price{font-size:1.5rem; color:var(--gold); font-weight:700; margin-bottom:20px; letter-spacing:-0.01em;}
  .sheet-actions{display:flex; flex-direction:column; gap:10px;}
  .sheet-actions .order-btn{padding:14px; font-size:0.95rem; border-radius:var(--radius-pill); background:var(--cta-green);}
  .sheet-actions .order-btn:hover{background:var(--cta-green-hover);}
  .add-cart-btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:transparent; border:1.5px solid var(--sage);
    color:#33422B; padding:13px; border-radius:var(--radius-pill);
    font-family:inherit; font-size:0.95rem; font-weight:600; cursor:pointer;
    transition:background .2s, color .2s, transform .15s;
  }
  .add-cart-btn:hover{background:#33422B; color:#F3ECDD; border-color:#33422B;}
  .add-cart-btn:active{transform:scale(0.95);}
  .add-cart-btn.added{background:var(--cta-green); border-color:var(--cta-green); color:var(--accent-ink);}
  .add-cart-btn svg{width:18px; height:18px;}
  .sheet-actions .sold-btn{padding:14px; border-radius:var(--radius-pill);}

  /* ===== POLICY ===== */
  .policy-text p{
    font-size:0.88rem; color:var(--pine-soft); line-height:2; margin-bottom:12px;
    white-space:pre-wrap;
  }

  /* ===== CART ===== */
  .cart-list{padding:6px 0 14px;}
  .cart-item{
    display:flex; align-items:center; gap:13px;
    padding:12px 0; border-bottom:1px dashed var(--line);
  }
  .cart-item:last-child{border-bottom:none;}
  .cart-thumb{
    width:54px; height:54px; border-radius:11px; flex-shrink:0;
    background:rgba(92,122,82,0.12); overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .cart-thumb img{width:100%; height:100%; object-fit:cover;}
  .cart-thumb svg{width:34px; height:34px;}
  .cart-info{flex:1; min-width:0;}
  .cart-info .n{font-weight:700; font-size:0.9rem; color:var(--pine);}
  .cart-info .p{font-size:0.8rem; color:var(--gold); font-weight:600;}
  .qty{
    display:flex; align-items:center; gap:2px;
    background:var(--veil-soft); border-radius:20px; padding:3px;
  }
  .qty button{
    width:28px; height:28px; border-radius:50%; border:none;
    background:transparent; color:var(--pine); font-size:1rem; font-weight:700;
    cursor:pointer; font-family:inherit;
    display:flex; align-items:center; justify-content:center;
  }
  .qty button:active{background:rgba(27,36,23,0.12);}
  .qty .q{min-width:22px; text-align:center; font-size:0.88rem; font-weight:700;}
  .cart-total{
    display:flex; justify-content:space-between; align-items:center;
    padding:16px 18px; margin-top:8px;
    background:var(--veil-soft);
    border-radius:var(--radius-card);
    font-weight:700; color:var(--pine); font-size:0.95rem;
  }
  .cart-total .amount{font-size:1.45rem; color:var(--gold); letter-spacing:-0.01em;}

  /* زر إتمام الطلب — الزر الرئيسي بالسلة */
  .checkout-btn{
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%;
    background:#128C42;
    background-image:linear-gradient(160deg, #1EB958, #0F7A39);
    color:#fff;
    padding:16px; border-radius:var(--radius-pill);
    font-family:inherit; font-size:1rem; font-weight:700;
    box-shadow:0 10px 24px rgba(18,140,66,0.32), inset 0 1px 1px rgba(255,255,255,0.25);
    transition:transform .15s ease, box-shadow .25s;
    margin-top:16px;
  }
  .checkout-btn:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(18,140,66,0.4);}
  .checkout-btn:active{transform:scale(0.95);}
  .checkout-btn svg{width:22px; height:22px; fill:currentColor;}

  .clear-btn{
    display:block; width:100%; margin-top:10px;
    background:transparent; border:none;
    color:var(--pine-soft); opacity:0.7;
    font-family:inherit; font-size:0.85rem; cursor:pointer;
    padding:10px; text-decoration:underline;
  }
  .clear-btn:hover{opacity:1; color:var(--wine);}
  .cart-empty{text-align:center; padding:44px 20px; color:var(--pine-soft); opacity:0.7; font-size:0.92rem;}

  /* ===== ACCOUNT SHEET =====
     The pre-migration account rules lived here and are gone: they squared the
     whole CARD rather than its image, packed the grid at minmax(90px) on a 10px
     gutter, styled a .rm button that no longer exists, and dimmed the empty
     note to opacity .6 — a value identity-v2 never overrode, so it was still
     landing on the migrated screen. Screen 08 owns all of this now. */
  .cart-note{font-size:0.72rem; color:var(--pine-soft); opacity:0.6; text-align:center; margin-top:12px;}
  .promo-row{display:flex; gap:8px; margin:6px 0 4px;}
  .promo-row input{
    flex:1; padding:11px 14px; border-radius:var(--radius-pill);
    border:1px solid var(--line); background:var(--card); color:var(--pine);
    font-family:inherit; font-size:0.85rem;
  }
  .promo-row input:focus{outline:none; border-color:var(--gold);}
  .promo-btn{
    padding:11px 20px; border-radius:var(--radius-pill); border:none;
    background:var(--accent-bg); color:var(--accent-ink);
    font-family:inherit; font-size:0.85rem; font-weight:600; cursor:pointer;
    transition:transform .15s;
  }
  .promo-btn:active{transform:scale(0.95);}
  .promo-msg{font-size:0.78rem; min-height:18px; margin-bottom:8px; padding:0 4px;}
  .promo-msg.ok{color:#2f5227;}
  .promo-msg.err{color:var(--wine);}


  /* cards are now clickable */
  .card{cursor:pointer;}

  /* ===== وضع التطبيق (standalone): إلغاء بلور الأشرطة الثابتة لمنع تعليق السكرول على iOS ===== */
  html.pwa .nav-inner{
    background:rgba(247,241,230,0.94);
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  /* نشيل طبقة النمط الثابتة بحجم الشاشة (مخفية أصلاً opacity:0) — سبب تعليق السكرول على iOS */
  html.pwa body::before{ display:none; }

  /* ===== Phase 2A — التنقّل بوضع التطبيق =====
     الشريط السفلي صار التنقّل الأساسي (assets/tabbar.css)، فالهامبرغر
     والسلة بالهيدر لم يعد لهما داعٍ: تكرارٌ لوجهات موجودة بالشريط. */
  html.pwa .cart-toggle-header{ display:none; }
  /* The header's link list overlaps the tab bar's destinations, so the app keeps
     one navigation surface. (The hamburger and its drawer are gone from every
     width now — Phase 1 — so the rules that used to hide them here went with
     them, and the language control is visible on the phone by default.) */
  html.pwa nav.links{ display:none; }

  /* بالمتصفح: السلة بالهيدر تظهر فقط حيث لا يوجد شريط سفلي (≥1024) */
  .cart-toggle-header{ display:none; position:relative; }
  @media (min-width:1024px){
    .cart-toggle-header{ display:inline-flex; }
  }
  .cart-badge-header{
    position:absolute; top:-5px; inset-inline-end:-7px;
    min-width:15px; height:15px; border-radius:9px;
    background:var(--archive-badge); color:#fff;
    font-size:9px; font-weight:700; line-height:1;
    display:none; align-items:center; justify-content:center; padding:0 4px;
    font-variant-numeric:tabular-nums;
  }
  .cart-badge-header.show{ display:flex; }
  /* إخفاء نافذة OneSignal التلقائية نهائياً — نعتمد زر الجرس فقط لطلب الإذن */
  #onesignal-slidedown-container,
  #onesignal-popover-container,
  .onesignal-slidedown-dialog,
  .onesignal-popover-container { display:none !important; }

  /* ===== product image / sold out / loading ===== */
  .card-img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
  .card-media{overflow:hidden;}
  /* Phase 3A: sold-out is described once, in card.css. This rule outranked it
     (three classes plus an element) and drained the specimen to grey on both
     grids — the colour is how you recognise the plant, so it stays. The SVG
     fallback keeps the old treatment: it is an icon, not a photograph. */
  .card.is-sold .card-media svg{filter:grayscale(1); opacity:0.45;}
  .sold-ribbon{
    position:absolute; top:12px; inset-inline-start:12px; z-index:2;
    background:rgba(27,36,23,0.88); color:var(--accent-ink);
    font-size:0.68rem; font-weight:700; letter-spacing:0.5px;
    padding:5px 12px; border-radius:6px;
  }
  .sold-btn{
    margin-top:auto;
    display:flex; align-items:center; justify-content:center;
    background:rgba(27,36,23,0.09); color:var(--pine-soft);
    padding:10px; border-radius:var(--radius-pill);
    font-size:0.85rem; font-weight:600;
    border:1px dashed rgba(27,36,23,0.22);
    cursor:not-allowed;
  }
  .btn-primary.disabled{
    background:rgba(27,36,23,0.15); color:var(--pine-soft);
    cursor:not-allowed; box-shadow:none; pointer-events:none;
  }
  .loading{
    grid-column:1/-1; text-align:center; padding:50px 20px;
    color:var(--pine-soft); font-size:0.92rem; opacity:0.75;
  }

  @media (max-width: 760px){
    /* Phase 1 (Claude Design): the hamburger drawer is gone. Artboard "01 Home"
       draws the phone header as the mark and a tagline — no menu, no link list;
       navigation on the phone is the bottom tab bar. The drawer's two unique
       destinations survive elsewhere: Care in the footer, and the language
       switch as the locale control below, which is the same move the PWA rules
       already made when they hid the same drawer. */
    nav.links{display:none;}
    .nav-cta{display:none;}
    .btn-ghost{margin-inline-start:0; margin-top:12px;}

    .nav-inner{
      position:relative; display:flex; align-items:center;
      gap:14px; padding:12px 16px;
    }

  }
  /* Clerk's prebuilt UI isn't Arabic-localized yet, so it must always stay LTR
     even while our own page is dir="rtl" — otherwise things like the numeric
     verification-code boxes fill in the wrong (reversed) order. */
  [class*="cl-"]{ direction: ltr !important; }