/* ==========================================================================
   ORACY customer app - theme layer (CX-1)
   Loaded last. A theme = structure (html[data-structure]) + style
   (html[data-style]). Brand colours still come from brand-config.js
   (--orange, --orange-2, --gold). Nothing here is tenant specific.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root {
  /* type scale */
  --cx-text-xs: 12px;
  --cx-text-sm: 13.5px;
  --cx-text-md: 15px;
  --cx-text-lg: 17px;
  --cx-text-xl: 20px;
  --cx-text-2xl: 24px;
  --cx-text-3xl: 30px;
  /* spacing */
  --cx-space-1: 4px;
  --cx-space-2: 8px;
  --cx-space-3: 12px;
  --cx-space-4: 16px;
  --cx-space-5: 24px;
  --cx-space-6: 32px;
  /* shape */
  --cx-radius-sm: 10px;
  --cx-radius-md: 14px;
  --cx-radius-lg: 20px;
  --cx-radius-pill: 999px;
  /* depth */
  --cx-shadow-1: 0 4px 14px rgba(0, 0, 0, 0.18);
  --cx-shadow-2: 0 14px 34px rgba(0, 0, 0, 0.32);
  /* motion */
  --cx-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --cx-fast: 140ms;
  --cx-base: 240ms;
  --cx-slow: 420ms;
  --cx-glass-blur: blur(16px) saturate(1.35);
}
/* Colour roles and frozen bars. Declared on body so they follow the light or dark theme. */
body {
  /* colour roles */
  --cx-action: var(--orange);
  --cx-action-strong: var(--orange-2);
  --cx-reward: var(--gold);
  --cx-surface: var(--card);
  --cx-hairline: var(--line);
  --cx-glass: var(--bg);
  --cx-glass-strong: var(--bg);
}
@supports (background: color-mix(in srgb, #000 50%, transparent)) {
  body {
    --cx-glass: color-mix(in srgb, var(--bg) 90%, transparent);
    --cx-glass-strong: color-mix(in srgb, var(--bg) 94%, transparent);
  }
}

/* ---- 2. Style: heritage (warm charcoal, dark theme) --------------------- */
:root[data-style="heritage"] body.dark-theme {
  --bg: #0a0807;
  --bg-2: #13100d;
  --card: #191613;
  --line: #2e2822;
  --line-soft: #26211c;
  --muted: #b3aa9b;
}
:root[data-style="heritage"] body.light-theme { --muted: #605c56; }
:root[data-style="heritage"] body.dark-theme .phone { background: var(--bg); }
:root[data-style="heritage"] body.dark-theme .nav { background: rgba(13, 11, 9, 0.98); }

/* ---- 3. Keyboard focus (never shown for touch) -------------------------- */
:focus-visible {
  outline: 2px solid var(--cx-action);
  outline-offset: 2px;
}

/* ---- 4. Small corrections ----------------------------------------------- */
/* A rejected or cancelled order must not look like a completed one. */
body.light-theme .history-status.account-status-negative {
  background: #fdecea;
  border-color: #f3c1ba;
  color: #b3372a;
}
.cx-label-text { display: block; }

/* ---- 5. Phone and tablet layout (the desktop website mode is untouched) -- */
@media (max-width: 1024px) {
  /* One header for every screen: title starts beside the back button. */
  #app > .screen:not(.detail-screen) > .topbar > h2 {
    flex: 1 1 auto;
    min-width: 0;
    text-align: start;
    transform-origin: left center;
    transition: transform var(--cx-base) var(--cx-ease);
  }
  [dir="rtl"] #app > .screen:not(.detail-screen) > .topbar > h2 { transform-origin: right center; }

  /* Frozen header */
  #app > .screen:not(.detail-screen):not(.home-screen) > .topbar {
    position: sticky;
    /* sticky offsets are measured from inside the screen padding (set by theme.js) */
    top: calc(6px + var(--safe-top) - var(--cx-pad-t, 20px));
    z-index: 20;
    isolation: isolate;
  }
  #app > .screen:not(.detail-screen):not(.home-screen) > .topbar::before,
  #app > .home-screen > .home-search-wrap::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -120px;
    bottom: -8px;
    left: calc(-1 * var(--cx-pad-l, 18px));
    right: calc(-1 * var(--cx-pad-r, 18px));
    background: var(--cx-glass);
    -webkit-backdrop-filter: var(--cx-glass-blur);
    backdrop-filter: var(--cx-glass-blur);
    border-bottom: 1px solid var(--cx-hairline);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--cx-base) var(--cx-ease);
  }
  #app > .screen.cx-scrolled:not(.detail-screen):not(.home-screen) > .topbar::before { opacity: 1; }
  #app > .screen.cx-scrolled:not(.detail-screen):not(.home-screen) > .topbar > h2 { transform: scale(0.86); }

  /* Frozen second row: Orders tabs, sub-category chips */
  #app > .orders-screen > .orders-tabs,
  #app > .listing-screen > .menu-subcategories {
    position: sticky;
    top: var(--cx-subrow-top, 64px);
    z-index: 21;
  }
  #app > .screen.cx-scrolled.cx-has-subrow:not(.detail-screen):not(.home-screen) > .topbar::before {
    bottom: calc(-1 * (var(--cx-subrow-h, 0px) + 22px));
  }
  #app > .listing-screen > .menu-subcategories { scrollbar-width: none; }
  #app > .listing-screen > .menu-subcategories::-webkit-scrollbar { display: none; }

  /* Home: the search bar freezes, with the cart beside it */
  #app > .home-screen > .home-search-wrap {
    position: sticky;
    top: calc(8px + var(--safe-top) - var(--cx-pad-t, 20px));
    isolation: isolate;
  }
  #app > .home-screen.cx-search-stuck > .home-search-wrap::before { opacity: 1; }
  .cx-search-row { display: flex; align-items: center; gap: 10px; }
  .cx-search-row > .home-search-box { flex: 1 1 auto; min-width: 0; }
  .cx-search-cart { display: none; flex: 0 0 auto; }
  #app > .home-screen.cx-search-stuck .cx-search-cart { display: block; }
  .cx-search-cart .icon-btn { width: 54px; height: 54px; border-radius: var(--cx-radius-md); }

  /* Item photo fills the screen edge to edge */
  #app > .detail-screen > .hero-img {
    width: calc(100% + var(--cx-pad-l, 18px) + var(--cx-pad-r, 18px));
    max-width: none;
    margin-left: calc(-1 * var(--cx-pad-l, 18px));
    margin-right: calc(-1 * var(--cx-pad-r, 18px));
  }

  /* Frozen total and action at the bottom of cart and checkout */
  .cx-cta-bar {
    position: sticky;
    /* like the top bars, measured from inside the screen padding: sit 8px above the bottom bar */
    bottom: calc(-1 * var(--cx-pad-b, 28px));
    z-index: 15;
    margin-top: 16px;
    margin-bottom: calc(8px - var(--cx-pad-b, 28px));
    padding: 8px 0;
    isolation: isolate;
  }
  .cx-cta-bar::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: -40px;
    left: calc(-1 * var(--cx-pad-l, 18px));
    right: calc(-1 * var(--cx-pad-r, 18px));
    background: var(--cx-glass-strong);
    -webkit-backdrop-filter: var(--cx-glass-blur);
    backdrop-filter: var(--cx-glass-blur);
    border-top: 1px solid var(--cx-hairline);
    pointer-events: none;
  }
  .checkout-screen .cx-cta-bar { padding-bottom: calc(8px + var(--safe)); }
  .cx-cta-bar > .btn { width: 100%; margin-top: 0; }
}
.cx-cta-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: var(--cx-text-sm);
}
.cx-cta-total strong {
  color: var(--text);
  font-size: var(--cx-text-lg);
  font-weight: 700;
}
@media (min-width: 1025px) {
  .cx-cta-total, .cx-search-cart { display: none; }
  .cx-cta-bar > .btn { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  #app > .screen > .topbar > h2,
  #app > .screen > .topbar::before,
  #app > .home-screen > .home-search-wrap::before { transition: none; }
}

/* ==========================================================================
   CX-2 - Classic x Heritage: colour roles, light effects, motion
   ========================================================================== */

/* ---- 6. Colour roles ----------------------------------------------------
   Orange = something to tap. Gold = offers, Best Seller, rewards.
   A price is information, so it is written in the text colour. */
:root[data-style="heritage"] .price,
:root[data-style="heritage"] .special-card .price,
:root[data-style="heritage"] .history-order-meta strong,
:root[data-style="heritage"] .account-order-total strong,
:root[data-style="heritage"] .checkout-total-card .total span:last-child,
:root[data-style="heritage"] .home-search-result-copy span {
  color: var(--text);
}
:root[data-style="heritage"] .price del ~ span { color: var(--cx-reward); }   /* an offer price */

:root[data-style="heritage"] .badge {
  background: rgba(224, 177, 90, 0.12);
  border: 1px solid rgba(224, 177, 90, 0.34);
  color: var(--cx-reward);
  letter-spacing: 0.2px;
}
@supports (background: color-mix(in srgb, #000 50%, transparent)) {
  :root[data-style="heritage"] .badge {
    background: color-mix(in srgb, var(--cx-reward) 13%, transparent);
    border-color: color-mix(in srgb, var(--cx-reward) 38%, transparent);
  }
  :root[data-style="heritage"] .home-screen .special-card .badge {
    background: color-mix(in srgb, var(--bg) 82%, transparent);
  }
}

/* Rewards card: brushed-gold edge with one slow passing light */
:root[data-style="heritage"] .account-rewards-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(224, 177, 90, 0.5);
  background-image: linear-gradient(135deg, rgba(224, 177, 90, 0.16), rgba(224, 177, 90, 0) 42%, rgba(224, 177, 90, 0.1));
}

/* ---- 7. Sheen sweep / continuous shimmer ---------------------------------
   Strongest on the one main button of a screen. The selected order type and
   the "add" of a recommended dish carry a softer, slower one. */
.cx-cta-bar > .btn-primary,
.detail-screen .btn-primary[onclick="addFromDetail()"],
.splash > .btn-primary,
.home-order-toggle button.on,
.checkout-order-types button.active,
.pairing-card > .btn.pairing-add,
.cx-dock-cta,
:root[data-style="heritage"] .account-rewards-card {
  position: relative;
  overflow: hidden;
}
.cx-cta-bar > .btn-primary:not(:disabled)::after,
.detail-screen .btn-primary[onclick="addFromDetail()"]:not(:disabled)::after,
.splash > .btn-primary::after,
.home-order-toggle button.on::after,
.checkout-order-types button.active::after,
.pairing-card > .btn.pairing-add:not(:disabled)::after,
.cx-dock-cta::after,
:root[data-style="heritage"] .account-rewards-card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-130%);
  pointer-events: none;
  animation: cx-sheen 3.8s linear infinite;
}
.home-order-toggle button.on::after,
.checkout-order-types button.active::after {
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.17) 50%, rgba(255, 255, 255, 0) 100%);
  animation-duration: 5.4s;
  animation-delay: -1.9s;
}
.pairing-card > .btn.pairing-add:not(:disabled)::after {
  background: linear-gradient(105deg, rgba(240, 138, 26, 0) 0%, rgba(240, 138, 26, 0.3) 50%, rgba(240, 138, 26, 0) 100%);
  animation-duration: 4.6s;
  animation-delay: -0.8s;
}
.pairing-card > .btn.pairing-add:not(:disabled) b { animation: cx-pulse 2.6s ease-in-out infinite; }
:root[data-style="heritage"] .account-rewards-card::after {
  z-index: -1;
  background: linear-gradient(105deg, rgba(224, 177, 90, 0) 0%, rgba(224, 177, 90, 0.2) 50%, rgba(224, 177, 90, 0) 100%);
  animation-duration: 7s;
}
[dir="rtl"] .cx-cta-bar > .btn-primary:not(:disabled)::after,
[dir="rtl"] .detail-screen .btn-primary[onclick="addFromDetail()"]:not(:disabled)::after,
[dir="rtl"] .splash > .btn-primary::after,
[dir="rtl"] .home-order-toggle button.on::after,
[dir="rtl"] .checkout-order-types button.active::after,
[dir="rtl"] .pairing-card > .btn.pairing-add:not(:disabled)::after,
[dir="rtl"] .cx-dock-cta::after,
[dir="rtl"]:root[data-style="heritage"] .account-rewards-card::after {
  animation-name: cx-sheen-rtl;
}
@keyframes cx-sheen {
  from { transform: translateX(-130%); }
  to { transform: translateX(330%); }
}
@keyframes cx-sheen-rtl {
  from { transform: translateX(330%); }
  to { transform: translateX(-130%); }
}
@keyframes cx-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16); }
}

/* Cart button with something in it: animated gradient border + breathing glow.
   The button itself never changes size. */
@property --cx-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.cart-icon-btn.has-items { position: relative; }
.cart-icon-btn.has-items::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--cx-angle), rgba(224, 177, 90, 0) 0deg 235deg, var(--gold) 315deg, rgba(255, 255, 255, 0.85) 345deg, rgba(224, 177, 90, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: cx-border-beam 3.6s linear infinite;
}
.cart-icon-btn.has-items::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 16px 3px rgba(240, 138, 26, 0.5);
  opacity: 0.12;
  pointer-events: none;
  animation: cx-glow 3s ease-in-out infinite;
}
@keyframes cx-border-beam { to { --cx-angle: 360deg; } }
@keyframes cx-glow {
  0%, 100% { opacity: 0.12; }
  50% { opacity: 0.75; }
}

/* Text shimmer: a light passing through a few words */
body {
  --cx-shim-base: rgba(244, 241, 234, 0.86);
  --cx-shim-peak: #ffffff;
  --cx-shim-link-peak: #ffe3bd;
}
body.light-theme {
  --cx-shim-base: #171717;
  --cx-shim-peak: #c98a2b;
  --cx-shim-link-peak: #f0a94e;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cx-text-shimmer,
  .catering-card .catering-quote-callout {
    background-image: linear-gradient(100deg, var(--cx-shim-base) 0%, var(--cx-shim-base) 40%, var(--cx-shim-peak) 50%, var(--cx-shim-base) 60%, var(--cx-shim-base) 100%);
    background-size: 240% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: cx-text-shimmer 5s linear infinite;
  }
  .catering-card .catering-quote-callout {
    --cx-shim-base: var(--orange);
    --cx-shim-peak: var(--cx-shim-link-peak);
    animation-duration: 6.2s;
    animation-delay: -2.4s;
  }
}
@keyframes cx-text-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -40% 0; }
}

/* ---- 8. Touch feedback --------------------------------------------------- */
.btn, .icon-btn, .add, .special-add, .cat, .menu-subcategories button, .orders-tabs button, .more-item, .account-list-item {
  transition: transform var(--cx-fast) var(--cx-ease), filter var(--cx-fast) var(--cx-ease);
}
.btn-primary:active:not(:disabled), .add:active:not(:disabled), .special-add:active { transform: scale(0.97); filter: brightness(1.08); }
.cat:active, .more-item:active, .account-list-item:active { transform: scale(0.985); }

.cart-count-badge.cx-bump { animation: cx-bump var(--cx-slow) var(--cx-ease); }
@keyframes cx-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* ---- 9. Photos ----------------------------------------------------------- */
#app img { transition: opacity var(--cx-slow) var(--cx-ease); }
#app img.cx-img-wait { opacity: 0; }

/* No photo: a placeholder icon in a tile the size of the photo */
.cx-ph {
  display: grid;
  place-items: center;
  width: 100%;
  border-radius: 12px;
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(224, 177, 90, 0.2), rgba(224, 177, 90, 0) 62%),
    linear-gradient(rgba(224, 177, 90, 0.07), rgba(224, 177, 90, 0.07)),
    var(--bg-2);
  border: 1px solid var(--cx-hairline);
  color: var(--cx-reward);
}
.cx-ph svg { width: 42%; max-width: 56px; height: auto; opacity: 0.85; }
.cx-ph.cx-ph-special { aspect-ratio: 4 / 3; border-radius: 10px; }
#app .cat .cx-ph.cx-ph-cat { display: grid; aspect-ratio: 16 / 10; margin: 0; }
.cx-ph.cx-ph-cart { width: 64px; height: 64px; border-radius: 10px; }
.cx-ph.cx-ph-item { width: 100%; height: auto; aspect-ratio: 1 / 1; }   /* fills the photo column at every width */
.cx-ph-tap { display: block; cursor: pointer; }
.cx-ph.cx-ph-pair { aspect-ratio: 4 / 3; max-height: 92px; border-radius: 9px; }
#app .detail-screen > .cx-ph.cx-ph-hero { display: grid; height: 220px; border-radius: 0; border-width: 0 0 1px; }
.cx-ph.cx-ph-hero svg { width: 22%; max-width: 96px; }

/* Item description: two lines, the item screen has the full text */
.menu-items-grid .item h4 + p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* ---- 10. First load ------------------------------------------------------ */
.cx-skel {
  border-radius: 14px;
  border: 1px solid var(--cx-hairline);
  background: linear-gradient(100deg, var(--card) 30%, var(--line) 50%, var(--card) 70%);
  background-size: 220% 100%;
  animation: cx-skel 1.4s linear infinite;
}
.cx-skel-special { flex: 0 0 calc((100% - 20px) / 2.35); aspect-ratio: 3 / 4; }
.cx-skel-cat { aspect-ratio: 5 / 4; border-radius: var(--radius); }
@keyframes cx-skel {
  from { background-position: 120% 0; }
  to { background-position: -100% 0; }
}

/* ---- 11. Splash ---------------------------------------------------------- */
.splash > .splash-brand-logo { animation: cx-logo-in 0.9s var(--cx-ease) both; }
.splash > p { animation: cx-rise-in 0.6s var(--cx-ease) 0.3s both; }
.splash > .btn { animation: cx-rise-in 0.6s var(--cx-ease) 0.45s both; }
.splash > .btn + .btn { animation-delay: 0.55s; }
@keyframes cx-logo-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes cx-rise-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- 17. Type: a floor of 12px, reading text at 14px, calmer titles --------
   Pinch-zoom is off by the owner's decision, so nothing may be too small to read.
   Sizes come from one short scale instead of dozens of near-identical values. */
:root {
  --cx-type-label: 12px;      /* badges, tab labels, the smallest text allowed */
  --cx-type-caption: 12.5px;  /* secondary lines under a title */
  --cx-type-body: 14px;       /* descriptions */
  --cx-type-item: 16px;       /* an item's name */
  --cx-type-section: 19px;    /* section headings */
}
#app .badge,
#app .history-status,
#app .order-type-badge,
#app .default-address-badge,
#app .choice-badge,
#app .confirmation-type,
#app .cart-top-badge,
#app .step,
#app .banner small,
#app .signin-terms,
#app .emoji-row button,
#app .splash-lang .lang-switch button,
#app .checkout-order-types button .type-closed,
#app .thanks-kicker,
#app .signed-reward-stat span,
#app .saved-address-actions button { font-size: var(--cx-type-label); }
#app .pairing-card .badge,
#app .pairing-card .reco-why,
#app .pairing-card > .btn.pairing-add { font-size: 11.5px; }   /* narrow cards: the floor is eased by half a pixel */
#app .cart-count-badge { font-size: 11px; }
#app .more-item-text span,
#app .support-item div span,
#app .support-note,
#app .account-reward-copy small,
#app .signin-mobile-note,
#app .signed-profile-copy > span,
#app .signed-profile-copy small,
#app .signed-edit-btn,
#app .saved-address-copy small,
#app .active-order-head > div > span,
#app .active-order-items h4,
#app .history-order-top > div > span,
#app .history-order-meta > span,
#app .checkout-time-note,
#app .checkout-time-options button,
#app .account-orders-refresh,
#app .reco-why,
#app .home-screen .mode-note { font-size: var(--cx-type-caption); }
#app .checkout-order-types button { font-size: 13px; }
#app .item p { font-size: var(--cx-type-body); line-height: 1.4; }
#app .item h4 { font-size: var(--cx-type-item); letter-spacing: -0.005em; }
#app .detail-screen > p:not(.price) { font-size: 15px; line-height: 1.5; }
#app .h-row h3 { font-size: var(--cx-type-section); font-weight: 600; letter-spacing: -0.012em; }
#app > .screen > .topbar > h2 { font-weight: 600; letter-spacing: -0.018em; }
#app .detail-screen > h2 { font-weight: 600; letter-spacing: -0.018em; }
body.is-ar #app .h-row h3,
body.is-ar #app > .screen > .topbar > h2,
body.is-ar #app .detail-screen > h2,
body.is-ar #app .item h4 { letter-spacing: 0; }   /* Arabic letters must stay joined */
@media (max-width: 1024px) {
  .nav button, .nav .nav-label { font-size: var(--cx-type-label); }
}

/* ---- 12. Light theme: nothing dark left behind ---------------------------- */
:root[data-style="heritage"] .points {
  background:
    linear-gradient(135deg, rgba(224, 177, 90, 0.26), rgba(224, 177, 90, 0) 68%),
    var(--card);
  border-color: rgba(224, 177, 90, 0.45);
}
:root[data-style="heritage"] .spice button.on { background: rgba(240, 138, 26, 0.14); }
body.light-theme .btn-ghost,
body.light-theme .home-order-toggle,
body.light-theme .toggle { border-color: #d8d3ca; }
/* A required add-on is ticked and locked: show it as chosen, not as switched off. */
.item-choice-row input[type="checkbox"]:disabled:checked {
  -webkit-appearance: none;
  appearance: none;
  opacity: 1;
  border-radius: 5px;
  background: var(--cx-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231a1004' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6'/%3E%3C/svg%3E") center / 76% no-repeat;
}

/* ==========================================================================
   CX-3 - Ordering flow shared by every theme
   ========================================================================== */

/* ---- 14. Item screen: photo, sheet, quantity, "Add" with the amount ------- */
.cx-sheet-edge { display: none; }
.cx-qty {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--cx-hairline);
  border-radius: 14px;
  background: var(--bg-2);
}
.cx-qty button {
  width: 42px;
  align-self: stretch;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}
.cx-qty span { min-width: 24px; text-align: center; font-weight: 700; font-size: var(--cx-text-lg); }
.detail-screen .sticky-actions.cx-add-bar { display: flex; align-items: stretch; gap: 10px; }
.cx-add-bar > .btn-primary {
  flex: 1 1 auto;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 0;
}
.cx-add-total { margin-inline-start: auto; font-weight: 700; }
.cx-add-bar > .btn-primary .cx-add-label:not(:only-child) { margin-inline-end: auto; }
.detail-screen .item-choice-group { margin: 16px 0 12px; }
.detail-screen .item-choice-row { min-height: 46px; margin: 6px 0; padding: 9px 12px; }

@media (min-width: 1025px) {
  .cx-detail-topbar { margin-top: -48px; position: relative; }
}
@media (max-width: 1024px) {
  #app > .detail-screen > .hero-img,
  #app .detail-screen > .cx-ph.cx-ph-hero { height: min(44vh, 320px); }
  /* Back and cart float over the photo and stay there while the customer scrolls */
  #app > .detail-screen > .cx-detail-topbar {
    position: absolute;
    top: calc(10px + var(--safe-top));
    left: var(--cx-pad-l, 18px);
    right: var(--cx-pad-r, 18px);
    margin: 0;
    z-index: 25;
  }
  #app > .detail-screen > .cx-detail-topbar > .icon-btn,
  body.light-theme #app > .detail-screen > .cx-detail-topbar > .icon-btn.has-items {
    background: var(--cx-glass-strong) !important;   /* over a photo the button must stay solid in both themes */
    -webkit-backdrop-filter: var(--cx-glass-blur);
    backdrop-filter: var(--cx-glass-blur);
    box-shadow: var(--cx-shadow-1);
  }
  /* The details rise over the photo like a sheet */
  .cx-sheet-edge {
    display: block;
    position: relative;
    height: 26px;
    margin: -42px calc(-1 * var(--cx-pad-r, 18px)) 4px calc(-1 * var(--cx-pad-l, 18px));
    border-radius: 24px 24px 0 0;
    background: var(--bg);
  }
  .cx-sheet-edge::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 50%;
    width: 38px;
    height: 4px;
    margin-left: -19px;
    border-radius: 999px;
    background: var(--cx-hairline);
  }
  .detail-screen .sticky-actions.cx-add-bar {
    bottom: calc(-1 * var(--cx-pad-b, 28px));
    margin-bottom: calc(0px - var(--cx-pad-b, 28px));
    padding: 10px 0 calc(10px + var(--safe));
  }
  .detail-screen.cx-enter > .hero-img { animation: cx-fade-in 0.35s var(--cx-ease) backwards; }
  .detail-screen.cx-enter > :not(.hero-img):not(.topbar):not(.sticky-actions) { animation: cx-rise-in 0.4s var(--cx-ease) backwards; }
}
@keyframes cx-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- 15. Smart cart dock ----------------------------------------------------
   A glass tray that rises from the bottom bar: item stack, count and subtotal,
   and one orange pill. Only the edge light runs all the time. */
.cx-cart-bar { display: none; }
@media (max-width: 1024px) {
  .cx-cart-bar:not([hidden]) {
    display: block;
    position: sticky;
    bottom: calc(-1 * var(--cx-pad-b, 28px));
    z-index: 15;
    margin: 18px calc(-1 * var(--cx-pad-r, 18px)) calc(0px - var(--cx-pad-b, 28px)) calc(-1 * var(--cx-pad-l, 18px));
  }
  .cx-dock-btn {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 66px;
    padding: 11px var(--cx-pad-r, 18px) 11px var(--cx-pad-l, 18px);
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0;
    border-top: 1px solid rgba(224, 177, 90, 0.34);
    border-radius: 22px 22px 0 0;
    background: var(--cx-glass-strong);
    -webkit-backdrop-filter: var(--cx-glass-blur);
    backdrop-filter: var(--cx-glass-blur);
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.3);
    color: var(--text);
    font: inherit;
    text-align: start;
    cursor: pointer;
  }
  /* edge light: a soft highlight travelling along the top edge */
  .cx-dock-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 34%;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--gold) 45%, rgba(255, 255, 255, 0.9) 50%, var(--gold) 55%, rgba(255, 255, 255, 0));
    transform: translateX(-110%);
    pointer-events: none;
    animation: cx-edge-light 4.6s linear infinite;
  }
  [dir="rtl"] .cx-dock-btn::after { animation-direction: reverse; }
  .cx-dock-stack { display: flex; flex: 0 0 auto; padding-inline-start: 10px; }
  .cx-dock-thumb {
    position: relative;
    width: 38px;
    height: 38px;
    margin-inline-start: -10px;
    border-radius: 50%;
    border: 2px solid var(--bg);
    overflow: hidden;
    background: var(--bg-2);
    box-shadow: var(--cx-shadow-1);
  }
  .cx-dock-thumb:nth-child(1) { z-index: 3; }
  .cx-dock-thumb:nth-child(2) { z-index: 2; }
  .cx-dock-thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cx-dock-thumb > .cx-ph.cx-ph-dock { width: 100%; height: 100%; border: 0; border-radius: 0; }
  .cx-dock-thumb > .cx-ph.cx-ph-dock svg { width: 58%; }
  .cx-dock-copy { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
  .cx-dock-copy small { color: var(--muted); font-size: var(--cx-text-xs); text-transform: lowercase; }
  .cx-dock-total { font-size: var(--cx-text-lg); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .cx-dock-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 42px;
    padding: 0 12px 0 16px;
    border-radius: var(--cx-radius-pill);
    background: linear-gradient(180deg, var(--orange-2), var(--orange));
    color: #1a1004;
    font-size: var(--cx-text-sm);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(240, 138, 26, 0.22);
  }
  [dir="rtl"] .cx-dock-cta { padding: 0 16px 0 12px; }
  .cx-dock-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  [dir="rtl"] .cx-dock-cta svg { transform: scaleX(-1); }
  .cx-dock-btn:active .cx-dock-cta { transform: scale(0.97); filter: brightness(1.08); }

  /* moments: first arrival, something added */
  .cx-cart-bar.cx-dock-in { animation: cx-dock-in 0.42s var(--cx-ease) backwards; }
  .cx-cart-bar.cx-dock-added .cx-dock-btn { animation: cx-dock-pulse 0.9s var(--cx-ease); }
  .cx-cart-bar.cx-dock-added .cx-dock-thumb:first-child { animation: cx-stack-insert 0.45s var(--cx-ease) backwards; }

  /* one way into the cart: while the dock is up, the header button rests */
  @supports selector(:has(*)) {
    #app > .screen:has(> .cx-cart-bar:not([hidden])) > .topbar .cart-icon-btn,
    #app > .screen:has(> .cx-cart-bar:not([hidden])) .cx-search-cart { display: none; }
  }
}
@keyframes cx-edge-light {
  from { transform: translateX(-110%); }
  to { transform: translateX(400%); }
}
@keyframes cx-dock-in {
  from { transform: translateY(105%); }
  to { transform: translateY(0); }
}
@keyframes cx-dock-pulse {
  0% { box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(224, 177, 90, 0); }
  35% { box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.3), 0 -6px 26px 2px rgba(224, 177, 90, 0.42); }
  100% { box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(224, 177, 90, 0); }
}
@keyframes cx-stack-insert {
  from { transform: translateX(-70%) scale(0.5); opacity: 0; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}

/* ---- 15b. Bars stay at the bottom even when the screen is not full ---------- */
@media (max-width: 1024px) {
  #app > .home-screen,
  #app > .menu-screen,
  #app > .listing-screen,
  #app > .detail-screen {
    display: flex;
    flex-direction: column;
  }
  #app > .home-screen > *,
  #app > .menu-screen > *,
  #app > .listing-screen > *,
  #app > .detail-screen > * { flex-shrink: 0; }
  #app > .screen > .cx-cart-bar:not([hidden]) { margin-top: auto; padding-top: 18px; }
  #app > .detail-screen > .sticky-actions.cx-add-bar { margin-top: auto; }
  /* edge-to-edge photo: it starts behind the status bar, not under a dark strip */
  #app > .detail-screen > .hero-img,
  #app .detail-screen > .cx-ph.cx-ph-hero {
    margin-top: calc(-1 * var(--cx-pad-t, 20px));
    height: calc(min(44vh, 320px) + var(--safe-top));
  }
}
.cx-price-soon { color: var(--muted); font-size: 0.82em; font-weight: 600; }

/* ---- 16. A message never covers the main button --------------------------- */
@supports selector(:has(*)) {
  .phone:has(.cx-cta-bar) .toast,
  .phone:has(.cx-cart-bar:not([hidden])) .toast { bottom: calc(var(--nav) + var(--safe) + 112px); }
  .phone:has(.detail-screen) .toast { bottom: calc(var(--safe) + 96px); }
}

/* ---- 13. Reduce motion: everything above stands still -------------------- */
@media (prefers-reduced-motion: reduce) {
  .cx-sheet-panel { animation: none; }
  .cx-cta-bar > .btn-primary::after,
  .detail-screen .btn-primary::after,
  .splash > .btn-primary::after,
  .home-order-toggle button.on::after,
  .checkout-order-types button.active::after,
  .pairing-card > .btn.pairing-add::after,
  .cx-dock-cta::after,
  .cx-dock-btn::after,
  .account-rewards-card::after { display: none; }
  .cx-cart-bar, .cx-dock-thumb { animation: none !important; }
  .screen.cx-enter > * { animation: none !important; }
  .cx-skel, .cart-count-badge.cx-bump,
  .pairing-card > .btn.pairing-add b,
  .cart-icon-btn.has-items::before, .cart-icon-btn.has-items::after,
  .cx-text-shimmer, .catering-card .catering-quote-callout,
  .splash > .splash-brand-logo, .splash > p, .splash > .btn { animation: none; }
  #app img, .btn, .icon-btn, .add, .special-add, .cat { transition: none; }
}

/* ---- 19. Address screen (every theme): one screen, one button -------------- */
.cx-pin-map-wrap { position: relative; }
.cx-pin-map-wrap > #delivery-pin-map { margin: 0; }
.cx-locate {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #1a1a1a;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}
.cx-locate svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cx-locate svg circle:first-child { fill: currentColor; stroke: none; }
#delivery-pin-status {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--cx-hairline);
  border-radius: var(--cx-radius-md);
  background: var(--cx-surface);
  color: var(--muted);
  font-size: var(--cx-type-body, 14px);
  line-height: 1.45;
}
#delivery-pin-status.cx-pin-set { color: var(--text); font-weight: 600; border-color: color-mix(in srgb, var(--cx-action) 45%, var(--cx-hairline)); }
.add-address-screen .address-type-toggle { margin-bottom: 4px; }
.cx-address-bar > .btn:disabled { opacity: 0.55; }
@media (max-width: 1024px) {
  #delivery-pin-map { height: min(36vh, 300px); min-height: 210px; }
  #app > .add-address-screen { display: flex; flex-direction: column; }
  #app > .add-address-screen > * { flex-shrink: 0; }
  #app > .add-address-screen > .cx-address-bar { margin-top: auto; padding-top: 12px; padding-bottom: calc(8px + var(--safe)); }
  .add-address-topbar { margin-bottom: 14px; }
}

/* ---- 20. Checkout (every theme): one clean address line, one notice, order lines ---- */
.cx-addr { display: flex; align-items: flex-start; gap: 12px; }
.cx-addr-pin {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cx-action) 16%, transparent);
  color: var(--cx-action);
}
.cx-addr-pin svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cx-addr-copy { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; text-align: start; }
.cx-addr-copy small { font-size: var(--cx-type-caption, 12.5px); color: var(--muted); }
.cx-addr-copy strong { font-size: var(--cx-type-item, 16px); font-weight: 700; color: var(--text); }
#app .checkout-location-card .cx-addr-copy p {
  margin: 0;
  font-size: var(--cx-text-sm);
  line-height: 1.45;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#app .checkout-location-card .cx-addr-change { flex: 0 0 auto; align-self: center; margin: 0; min-height: 44px; padding: 0 4px; font-weight: 700; }
.cx-addr-fee { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cx-hairline); font-size: var(--cx-text-sm); line-height: 1.5; color: var(--muted); }
.cx-addr-fee strong { color: var(--text); }
.cx-addr-fee.delivery-quote-error { color: var(--danger); font-weight: 600; }
.cx-addr-fee a, .cx-addr-fee button { margin-inline-start: 8px; }
#app .checkout-location-card.cx-addr-out { border-color: color-mix(in srgb, var(--danger) 60%, transparent); }
.cx-addr-add { width: 100%; min-height: 52px; }
#app .checkout-screen > .restaurant-closed-notice { margin: 4px 0 18px; }

.cx-co-order { margin-top: 22px; }
.cx-co-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cx-co-head .checkout-section-title { margin: 0 0 8px; }
.cx-co-line { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--cx-hairline); font-size: var(--cx-type-body, 14px); }
.cx-co-line:last-child { border-bottom: 0; }
.cx-co-line b { color: var(--cx-action); font-weight: 700; margin-inline-end: 4px; }
.cx-co-line span:last-child { flex: 0 0 auto; font-weight: 600; }

/* Bottom sheet */
.cx-sheet { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: end center; }
.cx-sheet-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cx-sheet-panel {
  position: relative;
  width: min(100%, 520px);
  max-height: 76vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 18px calc(18px + var(--safe, 0px));
  border: 1px solid var(--cx-hairline);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: var(--bg-2);
  color: var(--text);
  box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.35);
  animation: cx-rise-in var(--cx-base) var(--cx-ease) both;
}
.cx-sheet-grip { align-self: center; width: 40px; height: 4px; border-radius: 4px; background: var(--cx-hairline); }
.cx-sheet-panel h3 { margin: 4px 0 0; font-size: var(--cx-type-section, 19px); }
.cx-sheet-list { display: grid; gap: 8px; overflow-y: auto; }
.cx-sheet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  text-align: start;
  font: inherit;
  color: var(--text);
  background: var(--cx-surface);
  border: 1px solid var(--cx-hairline);
  border-radius: var(--cx-radius-md);
  cursor: pointer;
}
.cx-sheet-row.on { border-color: var(--cx-action); }
.cx-sheet-row .cx-addr-copy small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-sheet-check { flex: 0 0 20px; color: var(--cx-action); font-weight: 700; }
@media (min-width: 600px) { .cx-sheet { place-items: center; } .cx-sheet-panel { border-radius: 24px; border-bottom: 1px solid var(--cx-hairline); } }

/* Every theme: the delivery line turns into a clear warning when the chosen
   address is outside the delivery area. */
#app .home-screen .mode-note.mode-note-warn { color: var(--danger); font-weight: 600; }

/* =====================================================================
   18. STRUCTURE "scroll" (CX-4): Home is the menu.
   Everything here is scoped to html[data-structure="scroll"]; the classic
   structure is not touched by this section.
   ===================================================================== */
/* The category row: underline tabs (text buttons with a line under the one being read) */
.cx-catbar {
  display: flex;
  align-items: stretch;
  gap: 22px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin: 4px calc(-1 * var(--cx-pad-r, 18px)) 0 calc(-1 * var(--cx-pad-l, 18px));
  padding: 0 var(--cx-pad-r, 18px) 0 var(--cx-pad-l, 18px);
  scroll-padding-inline: var(--cx-pad-l, 18px);
  border-bottom: 1px solid var(--cx-hairline);
}
.cx-catbar::-webkit-scrollbar { display: none; }
.cx-chip, .cx-catbar-search {
  position: relative;
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: var(--cx-text-md);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--cx-base) var(--cx-ease);
}
.cx-chip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--cx-action);
  transform: scaleX(0);
  transition: transform var(--cx-base) var(--cx-ease);
}
.cx-chip.on { color: var(--text); }
.cx-chip.on::after { transform: scaleX(1); }
.cx-catbar-search { width: 24px; display: grid; place-items: center; }
.cx-catbar-cart { display: none; }   /* laptop only; phones use the cart dock */
.cx-catbar-search svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.cx-sec { margin-top: 34px; }
.cx-sec > .h-row { margin-top: 0; align-items: baseline; }
.cx-sec-count { font-size: var(--cx-type-caption, 12.5px); color: var(--muted); text-transform: lowercase; }

/* Section banner: a slim photo of the category with its name over a dark scrim */
.cx-banner {
  position: relative;
  height: 96px;
  margin-bottom: 16px;
  border-radius: var(--cx-radius-lg);
  overflow: hidden;
  background: var(--cx-surface);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.cx-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 8, 7, 0.9) 0%, rgba(10, 8, 7, 0.62) 42%, rgba(10, 8, 7, 0.08) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  border-radius: inherit;
}
html[dir="rtl"] .cx-banner::after { background: linear-gradient(270deg, rgba(10, 8, 7, 0.9) 0%, rgba(10, 8, 7, 0.62) 42%, rgba(10, 8, 7, 0.08) 100%); }
.cx-banner-copy {
  position: absolute;
  z-index: 1;
  inset-inline: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 4px;
}
.cx-banner-copy h3 { margin: 0; color: #fff; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.cx-banner-copy small { text-transform: lowercase; color: rgba(255, 255, 255, 0.8); font-size: var(--cx-type-caption, 12.5px); letter-spacing: 0.04em; }
html[dir="rtl"] .cx-banner-copy h3, html[dir="rtl"] .cx-banner-copy small { letter-spacing: 0; }
.cx-banner.cx-reveal { opacity: 0; transform: translateY(14px); }
.cx-banner.cx-reveal.cx-in { opacity: 1; transform: none; transition: opacity var(--cx-slow) var(--cx-ease), transform var(--cx-slow) var(--cx-ease); }

/* Sub-category heading: readable size, an accent bar in front, the count after */
.cx-sec .cx-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 12px;
  font-size: var(--cx-type-item, 16px);
  font-weight: 700;
  color: var(--text);
}
.cx-sec .cx-sub::before { content: ""; flex: 0 0 3px; height: 17px; border-radius: 3px; background: var(--cx-action); }
.cx-sec .cx-sub small { font-size: var(--cx-type-caption, 12.5px); font-weight: 500; color: var(--muted); }
.cx-sec > .h-row + .cx-sub, .cx-sec > .cx-banner + .cx-sub { margin-top: 4px; }

/* One strong colour per screen: the cart button keeps the solid orange,
   the many "Add" buttons become quiet outlined pills. */
.cx-sec .item .add:not([disabled]) {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--cx-action) 60%, transparent);
  color: var(--cx-action);
  border-radius: var(--cx-radius-pill);
  box-shadow: none;
}
.cx-sec .item .add:not([disabled]):active { background: color-mix(in srgb, var(--cx-action) 16%, transparent); }

.cx-preview-note { margin-top: 22px; }

/* the moving announcement line fades out at both edges instead of being cut */
html[data-structure="scroll"] .home-announcement .announcement-viewport {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

@media (max-width: 1024px) {
  /* one frozen row only: the category buttons. The search box scrolls away. */
  html[data-structure="scroll"] #app > .home-screen > .home-search-wrap { position: relative; top: auto; }
  html[data-structure="scroll"] #app > .home-screen > .home-search-wrap::before { display: none; }
  /* frozen header: logo, branch and cart stay; the category row freezes under it */
  html[data-structure="scroll"] #app > .home-screen > .home-topbar {
    position: sticky;
    top: calc(6px + var(--safe-top) - var(--cx-pad-t, 20px));
    z-index: 22;
    isolation: isolate;
  }
  html[data-structure="scroll"] #app > .home-screen > .home-topbar::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -120px;
    bottom: -8px;
    left: calc(-1 * var(--cx-pad-l, 18px));
    right: calc(-1 * var(--cx-pad-r, 18px));
    background: var(--cx-glass-strong);
    -webkit-backdrop-filter: var(--cx-glass-blur);
    backdrop-filter: var(--cx-glass-blur);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--cx-base) var(--cx-ease);
  }
  html[data-structure="scroll"] #app > .home-screen.cx-scrolled > .home-topbar::before { opacity: 1; }
  html[data-structure="scroll"] #app > .home-screen > .cx-catbar {
    position: sticky;
    top: var(--cx-subrow-top, 64px);
    z-index: 21;
  }
  html[data-structure="scroll"] #app > .home-screen.cx-cat-stuck > .cx-catbar {
    background: var(--cx-glass-strong);
    -webkit-backdrop-filter: var(--cx-glass-blur);
    backdrop-filter: var(--cx-glass-blur);
  }
}

/* Website mode (laptop): the category row freezes at the top of the page too. */
@media (min-width: 1025px) {
  html[data-structure="scroll"] #app > .home-screen > .cx-catbar {
    position: sticky;
    top: calc(-1 * var(--cx-pad-t, 34px));
    z-index: 21;
    margin-top: 14px;
  }
  /* the cart stays within reach at the end of the frozen row, with its amount */
  html[data-structure="scroll"] #app > .home-screen > .cx-catbar > .cx-catbar-cart {
    position: sticky;
    inset-inline-end: 0;
    margin-inline-start: auto;
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid var(--cx-hairline);
    border-radius: var(--cx-radius-pill);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: var(--cx-type-body, 14px);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: -18px 0 18px 6px var(--bg);
  }
  html[data-structure="scroll"][dir="rtl"] #app > .home-screen > .cx-catbar > .cx-catbar-cart { box-shadow: 18px 0 18px 6px var(--bg); }
  html[data-structure="scroll"] #app > .home-screen > .cx-catbar > .cx-catbar-cart.has-items {
    background: var(--cx-action);
    border-color: var(--cx-action);
    color: #1a1206;
  }
  html[data-structure="scroll"] #app > .home-screen > .cx-catbar > .cx-catbar-cart svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  html[data-structure="scroll"] #app > .home-screen > .cx-catbar > .cx-catbar-cart svg circle { fill: currentColor; stroke: none; }
  html[data-structure="scroll"] #app > .home-screen.cx-cat-stuck > .cx-catbar {
    background: var(--cx-glass-strong);
    -webkit-backdrop-filter: var(--cx-glass-blur);
    backdrop-filter: var(--cx-glass-blur);
  }
}