/* ==========================================================================
   17 — MOBILE CHROME (≤767px), spec §6.6a. Loads on every page after the
   bridge (functions.php enqueues this LAST, after every conditional page
   stylesheet — see the comment beside that call — precisely because several
   rules below share exact specificity with an existing 12-home.css rule for
   the same class, e.g. .aly-hero__inner / .aly-dept-grid, and only wins the
   cascade if it is the later of the two in source order).
   ========================================================================== */
.aly-tab-bar, .aly-sticky-add, .aly-sticky-checkout { display: none; }
.aly-toast-host { position: fixed; inset-inline: 16px; inset-block-end: calc(72px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-toast); display: grid; gap: 8px; pointer-events: none; }
.aly-toast--brand { pointer-events: auto; display: flex; align-items: center; gap: 10px; background: var(--night-900); color: var(--cream-50); padding: 12px 14px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: var(--fs-sm); opacity: 0; transform: translateY(8px); transition: opacity 260ms var(--ease-brand), transform 260ms var(--ease-brand); }
.aly-toast--brand.is-in { opacity: 1; transform: none; }
/* --color-text-on-dark is the theme's white token (00-tokens.css) — tokenized
   per the no-hardcoded-hex rule in place of the brief's literal #FFFFFF,
   same substitution already made for the checkout steps badge in
   15-cart-checkout.css. */
.aly-toast__check { inline-size: 22px; block-size: 22px; border-radius: var(--radius-circle); background: var(--palm); color: var(--color-text-on-dark); display: grid; place-items: center; font-size: 13px; font-weight: var(--fw-bold); }
.aly-toast--brand a { margin-inline-start: auto; color: var(--gold-500); font-weight: var(--fw-semibold); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .aly-toast--brand { transition: opacity 120ms linear; transform: none; } }
/* Wider screens have no tab bar: the toast is a corner card, not a full-width strip. */
@media (min-width: 768px) {
  .aly-toast-host { inset-inline: auto 24px; inset-block-end: 24px; inline-size: min(360px, calc(100vw - 48px)); }
}

@media (max-width: 767px) {
  /* Scoped to :has(.aly-tab-bar): aly_mobile_chrome() only prints the tab
     bar when wc_get_page_permalink() etc. exist (WooCommerce active), so a
     page it never renders on should not carry this padding either. */
  body:has(.aly-tab-bar) { padding-block-end: calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* Header: 40px lockup, icons, search full width beneath; no top bar / strip.
     !important: matches the established precedent in 06-navigation.css
     (body:not(.aly-home) .aly-topbar/.aly-strip) — Elementor's container
     widget renders --display via a custom property consumed by its own
     generated CSS, which this project's prior work found only a `display:
     none !important` reliably beats, regardless of source order. */
  .aly-topbar, .aly-strip { display: none !important; }
  .aly-lockup { --aly-lk-tree: 40px; --aly-lk-rule: 34px; --aly-lk-width: 84px; --aly-lk-caption: 5.1px; --aly-lk-gap: 12px; --aly-lk-text-gap: 5px; }
  /* The header row is a column on mobile in the template (d863dff), so wrap/order alone
     stacked logo, icons and search on three rows. Row first, then the search wraps under. */
  .elementor-location-header .e-con.elementor-element-d863dff { flex-direction: row; flex-wrap: wrap; align-items: center; row-gap: 8px; }
  .elementor-location-header .e-con.elementor-element-da8e6c7 { flex: 0 1 auto; inline-size: auto; }
  .elementor-location-header .elementor-element-7dc2c92 { order: 3; flex: 1 1 100%; inline-size: 100%; }
  .elementor-location-header .elementor-element-7dc2c92 input[type="search"], .elementor-location-header .elementor-element-7dc2c92 input[type="text"] { block-size: 44px; border-radius: var(--radius-pill); background: var(--cream-50); }
  .elementor-location-header .e-con.elementor-element-40ab544 { flex: none; inline-size: auto; margin-inline-start: auto; }
  .elementor-location-header .elementor-widget-woocommerce-menu-cart { display: none; } /* basket lives in the tab bar */

  /* Department chips: keep the horizontal menu, hide Elementor's hamburger.
     No !important below: verified against the live Elementor Pro nav-menu
     widget CSS (widget-nav-menu.min.css) — its responsive toggle rules are
     scoped to `.elementor-nav-menu--dropdown-tablet .elementor-nav-menu--main`
     (two classes) and `.elementor-menu-toggle` (one class) with no
     !important of their own, both lower specificity than the three-class
     selectors below, so ordinary cascade specificity wins outright — same
     approach already used for .elementor-nav-menu--main in 06-navigation.css. */
  .elementor-location-header .elementor-widget-nav-menu .elementor-menu-toggle, .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown { display: none; }
  .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main { display: flex; overflow-x: auto; gap: 8px; padding: 4px 16px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main::-webkit-scrollbar { display: none; }
  /* The items sit in ul.elementor-nav-menu, which Elementor lays out centred and wrapping
     (four rows at 390px); the `> li` rules below never matched until they went through it. */
  .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main > ul { flex-wrap: nowrap; justify-content: flex-start; gap: 8px; margin: 0; }
  .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item::before,
  .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item::after { display: none; }
  .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main > ul > li { flex: none; position: relative; }
  /* Chips are an interactive control: brief specified 36px, under the
     44px hard rule floor, so this widens to the touch-target token —
     same call already made for .aly-stepper--card in 05-product-card.css. */
  .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main > ul > li > a { display: inline-flex; align-items: center; gap: 6px; min-block-size: var(--touch-target-min); padding: 0 12px; border-radius: var(--radius-pill); background: var(--cream-50); box-shadow: var(--elevation-hairline); font-size: 13px; font-weight: var(--fw-medium); color: var(--color-text); white-space: nowrap; }
  .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main > ul > li.current-menu-item > a, .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main > ul > li.current-menu-ancestor > a { background: var(--night-900); color: var(--cream-50); }
  .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main > ul > li > ul.sub-menu { display: none; }
  /* Elementor's per-widget active colour (gold-800, 0-6-0) put the current chip's label at
     about 2.4:1 on night-900; this outranks it at 0-7-0. */
  .elementor-location-header .elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu .elementor-item.elementor-item-active { color: var(--cream-50); }

  /* Home hero as a night card with three products peeking in. */
  .aly-hero { padding-block: var(--space-6); }
  .aly-hero__inner { grid-template-columns: 1fr; gap: var(--space-4); }
  .aly-hero__title { font-size: 2.1rem; }
  .aly-hero__proof { display: none; }
  .aly-hero__ghost { display: none; }
  .aly-hero__art { aspect-ratio: auto; padding: var(--space-3); }
  .aly-hero__cluster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aly-hero__tile:nth-child(n+4) { display: none; }
  .aly-hero__pill { position: static; display: inline-block; margin-block-end: var(--space-2); }
  .aly-dept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }

  /* Product grids: 2 columns, 9px gap. No !important: `.elementor-kit-4271
     ul.products` matches 11-woocommerce-bridge.css's `.woocommerce ul.products`
     at identical specificity (verified — neither Elementor's generated
     per-template CSS nor its widget CSS sets grid-template-columns at all;
     WooCommerce core still ships the pre-grid float layout), so this file
     loading after the bridge is enough to win on source order alone. */
  .elementor-kit-4271 ul.products, .aly-rail .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; grid-auto-flow: row; overflow: visible; }

  /* Bottom tab bar. */
  .aly-tab-bar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sticky-header); background: var(--surface-white); box-shadow: 0 -1px 0 var(--cream-300), var(--shadow-float); padding-block-end: env(safe-area-inset-bottom, 0px); }
  /* 56px is the designed height (icon + label + badge headroom); the touch-
     target token is still expressed as the guaranteed floor, same pattern as
     .aly-btn--icon in 03-buttons.css (min-block-size: max(...)). */
  .aly-tab-bar__item { position: relative; display: grid; justify-items: center; gap: 2px; min-block-size: max(var(--touch-target-min), 56px); padding-block-start: 8px; font-size: 11px; color: var(--color-text-muted); text-decoration: none; }
  .aly-tab-bar__item svg { inline-size: 22px; block-size: 22px; }
  .aly-tab-bar__item.is-active { color: var(--color-text); }
  .aly-tab-bar__item.is-active::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 30%; block-size: 2px; background: var(--gold-500); border-radius: 0 0 2px 2px; }
  .aly-tab-bar__count { position: absolute; inset-block-start: 4px; inset-inline-start: calc(50% + 6px); min-inline-size: 18px; block-size: 18px; padding-inline: 5px; border-radius: var(--radius-pill); background: var(--clay); color: var(--color-text-on-dark); font-size: 11px; font-weight: var(--fw-bold); display: grid; place-items: center; }

  /* Sticky bars. */
  .aly-sticky-add, .aly-sticky-checkout { display: flex; align-items: center; gap: 12px; position: fixed; inset-inline: 0; inset-block-end: calc(56px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-sticky-header); background: var(--surface-white); box-shadow: 0 -1px 0 var(--cream-300), var(--shadow-float); padding: 10px 16px; }
  /* Stepper +/- sub-buttons: brief specified 32px-wide tracks, under the 44px
     floor, so these use the touch-target token for both tracks — same call
     already made for .aly-stepper--card in 05-product-card.css. */
  .aly-stepper--sticky { display: grid; grid-template-columns: var(--touch-target-min) 1fr var(--touch-target-min); inline-size: 132px; block-size: var(--touch-target-min); border-radius: var(--radius-sm); background: var(--cream-50); box-shadow: var(--elevation-hairline); align-items: center; text-align: center; font-weight: var(--fw-bold); }
  .aly-stepper--sticky .aly-stepper__btn { block-size: 100%; border: 0; background: transparent; font-size: 18px; }
  .aly-sticky-add__btn { flex: 1; block-size: var(--touch-target-min); justify-content: center; }
  .aly-sticky-checkout__total { display: grid; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
  .aly-sticky-checkout__total small { font-weight: var(--fw-regular); font-size: 11px; color: var(--color-text-muted); }
  .aly-sticky-checkout .aly-btn { flex: 1; block-size: var(--touch-target-min); justify-content: center; text-decoration: none; } /* an <a>: the page's link underline otherwise lands on the button label */
  body:has(.aly-tab-bar).single-product, body:has(.aly-tab-bar).woocommerce-cart { padding-block-end: calc(64px + 64px + env(safe-area-inset-bottom, 0px)); }

  /* Hidden while the sign-in modal is open. Defensive: the modal itself sits
     at z-index 99999 and already paints over these bars, but hiding them
     also stops a screen reader landing on tab-bar/sticky-bar controls
     behind the modal while it is open. */
  body:has(.aa-otp[data-mode="modal"]) .aly-tab-bar, body:has(.aa-otp[data-mode="modal"]) .aly-sticky-add, body:has(.aa-otp[data-mode="modal"]) .aly-sticky-checkout { display: none; }
}