/* ==========================================================================
   Bottom tab bar — Phase 2A
   Single source of truth. Before this file the bar was defined twice: a
   "liquid glass" pill in the index.html inline <style> and a flat archive
   override in identity-v2.css @max-760, which quietly won on phones. Both are
   gone; this file is the only definition, and it is the only navigation CSS
   the order pages need (they never load identity-v2.css).

   Shape: full-width, edge-to-edge, hairline on top. That is the iOS tab-bar
   signature — a centred floating pill reads as web chrome. It also suits the
   archive identity better than the pill did: flat paper, one rule, no glass.

   Loaded by index.html (inherited by catalog.html and every /plants/ page),
   order-tracking.html and order-success.html. Deliberately NOT loaded by
   checkout.html — iOS hides the tab bar inside a modal task flow.
   ========================================================================== */

/* The bar's measured content height. Three things depend on it — the bar, the
   body padding that keeps content off it, and the product sticky bar that has
   to clear it — so it lives in one place instead of three hand-copied numbers
   drifting apart. Measured, not computed: the label's line box makes the tab
   53px tall, above its own 48px floor. */
:root { --pw-tabbar-h: 66px; }

/* order-tracking.html is the one page that pairs this file with checkout-v2.css
   and NOT identity-v2.css. checkout-v2.css declares `a { color: inherit }` and
   never resets decoration, and this file declared none, so the UA underline
   survived on all four tab labels there and nowhere else. Owned here, where the
   component lives, rather than patched in the page that exposed it. */
.tabbar a { text-decoration: none; }

.tabbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  align-items: stretch;
  /* The inset is the whole point: content sits above the home indicator, and
     the bar's own background still bleeds to the physical screen edge. */
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--archive-paper, #f0ece2);
  border-top: 1px solid var(--archive-line, rgba(20, 33, 27, 0.22));
  /* No backdrop-filter. Standalone already disabled it to stop iOS scroll
     hangs, and a blurred bar over an ivory page buys nothing. */
}

.tabbar .tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  /* 48 clears the 44pt floor with room for the label; four equal flex tabs on
     the narrowest supported phone (375pt) are ~92pt wide, so width is never
     the constraint and adjacent targets never touch. */
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 2px;
  border-radius: 2px;
  color: var(--archive-ink-soft, #46544c);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  /* العربية خط متصل: أي تباعد موجب يفرّق الحروف عن وصلاتها. القيمة أعلاه
     مقصودة للاتينية وتبقى لها. آخر أربعة عناصر عربية على الموقع كانت لا تزال
     تحملها (قيست 0.1056px على «الرئيسية · الفهرس · السلة · حسابي»). */
  text-shadow: none;
  transition: color 200ms cubic-bezier(.22, .9, .24, 1);
}

.tabbar .tab svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  /* The sheet draws the resting tab at 1.5 against the active 2.3 below. The
     markup carries 1.8 on every icon and only the active state was being
     overridden, so the bar read 1.8 -> 2.3: the contrast was there but the
     resting weight was a third heavier than the design's, on the one component
     that appears on every storefront screen. Set here rather than in five
     copies of the markup. */
  stroke-width: 1.5;
  transition: stroke-width 200ms cubic-bezier(.22, .9, .24, 1);
}

.tabbar .tab span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Active state carries three signals, not just colour: ink, a heavier label
   and a heavier stroke. Colour alone would fail for anyone who cannot
   distinguish it, and aria-current carries it to assistive tech. */
.tabbar .tab.active,
.tabbar .tab[aria-current='page'] {
  color: var(--archive-ink, #14211b);
  font-weight: 700;
}

.tabbar .tab.active svg,
.tabbar .tab[aria-current='page'] svg {
  stroke-width: 2.3;
}

/* ---- cart badge ---------------------------------------------------------- */
.tabbar .tab .cart-badge {
  position: absolute;
  top: 2px;
  inset-inline-start: calc(50% + 6px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--wine, #7f432d);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 250ms, transform 250ms;
}

.tabbar .tab .cart-badge.show { opacity: 1; transform: scale(1); }

@keyframes cart-bump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.4); }
  55%  { transform: scale(0.85); }
  100% { transform: scale(1); }
}

.tabbar .tab .cart-badge.bump { animation: cart-bump 450ms cubic-bezier(.22, .9, .24, 1); }

/* ---- where the bar is and isn't ------------------------------------------ */

/* Content has to clear the bar, or the last row of every page sits under it.
   62px was 4px short of the bar's real 66px and content slid underneath. */
body { padding-bottom: calc(var(--pw-tabbar-h) + 6px + env(safe-area-inset-bottom, 0px)); }

/* Desktop browsers navigate from the header, so the bar stands down — but an
   INSTALLED app keeps it at every size. An iPad app with no tab bar and no
   hamburger would have no primary navigation at all. */
@media (min-width: 1024px) {
  .tabbar { display: none; }
  body { padding-bottom: 0; }
  /* The token has to go with the bar. Everything that reserves space for the
     tab bar reads --pw-tabbar-h, and it stayed at 66px here even though the bar
     is gone: .pd-buybar floated 66px above the viewport floor and .pd-screen
     lost 72px of height, in the 1024-1040 window (iPad landscape) where the
     buy bar has not yet been hidden by its own 1041px rule. Zero is the truth
     above 1024 — there is no bar to clear. */
  :root { --pw-tabbar-h: 0px; }
}

html.pwa .tabbar { display: flex; }
/* The token tracks the BAR, not the viewport width. The 1024px block above
   zeroes it because the bar stands down there — but this rule puts the bar
   back at every size for an installed app, and the zero was still in force:
   an iPad app ≥1024 showed a 66px bar with nothing reserving room for it, so
   body padding fell to 6px and .pd-buybar (product.css:588) sat at bottom:0,
   underneath it. html.pwa is (0,1,1) against :root's (0,1,0), so this wins
   inside the media query without needing !important or a second query. */
html.pwa { --pw-tabbar-h: 66px; }
html.pwa body { padding-bottom: calc(var(--pw-tabbar-h) + 6px + env(safe-area-inset-bottom, 0px)); }

@media (prefers-reduced-motion: reduce) {
  .tabbar .tab,
  .tabbar .tab svg,
  .tabbar .tab .cart-badge { transition: none; }
  .tabbar .tab .cart-badge.bump { animation: none; }
}

/* شريط التبويب بالعربية — إلغاء التباعد الحرفي.
   `letter-spacing` أعلاه (0.01em) مضبوطة للاتينية. العربية خط متصل، والتباعد
   الموجب يباعد الحرف عن وصلته بما يليه. قيست على الإنتاج 2026-08-06: أربعة
   عناصر (الرئيسية · الفهرس · السلة · حسابي) عند 0.1056px — وهي آخر ما بقي
   من هذا النمط على الموقع العام. القاعدة على `html[lang="ar"]` لا على
   `[dir=rtl]` لأن المقياس هو اللغة المكتوبة، لا اتجاه التخطيط. */
html[lang="ar"] .tabbar .tab { letter-spacing: normal; }