/* ==========================================================================
   Zado — Storefront
   Layer 2 of 3. Requires tokens.css.
   Mobile-first: single column + bottom tab bar. Scales to a wide grid.
   ========================================================================== */

body {
  padding-bottom: calc(var(--safe-bottom) + var(--sp-4));
  display: flow-root;
}

body > *:first-child { margin-top: 0; }

body.has-cartbar {
  padding-bottom: calc(var(--cartbar-h) + var(--safe-bottom) + var(--sp-4));
}

body.is-locked { overflow: hidden; }

/* ==========================================================================
   Splash (النسخة الخالية من التداخلات)
   ========================================================================== */

.splash {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(90% 60% at 50% 108%, rgba(23, 174, 99, 0.55) 0%, transparent 70%),
    radial-gradient(120% 90% at 50% 0%, var(--green-600) 0%, var(--green-800) 62%, var(--green-950) 100%);
  overflow: hidden;
}

.splash::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 42% at 50% 36%, rgba(255,255,255,.10), transparent 70%);
  pointer-events: none;
}

.splash__mark-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-2);
}

.splash__mark-wrap::after {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.32);
  animation: zadoRing 2.1s cubic-bezier(.2,.6,.35,1) infinite;
}

.splash__mark {
  width: 9rem;
  height: auto;
  object-fit: contain;
  animation: zadoPulse 1.9s ease-in-out infinite;
  will-change: transform, opacity;
}

.splash__msgs {
  position: relative;
  width: 100%;
  min-height: 28px;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.splash__msg {
  position: absolute;
  text-align: center;
  color: var(--green-200); /* نفس لون النص اللاتيني القديم لتناسق مثالي */
  font-size: 1.15rem; /* حجم خط ممتاز وواضح */
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap; /* يمنع النص من الانكسار لأسطر متعددة أبدأ! */
}

.splash__footnote {
  position: absolute;
  bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem));
  inset-inline: 0;
  text-align: center;
  padding-inline: 1.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.02em;
  animation: fxFadeIn 1500ms var(--ease-out) 1000ms both;
}

/* --- Animations --- */
@keyframes zadoPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.05); opacity: .9; }
}
@keyframes zadoRing {
  0%   { transform: scale(.82); opacity: .55; }
  100% { transform: scale(1.4); opacity: 0; }
}
@keyframes zadoMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes zadoMsgOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}

.fx-msg-in  { animation: zadoMsgIn .45s cubic-bezier(.22,.61,.36,1) both; }
.fx-msg-out { animation: zadoMsgOut .32s cubic-bezier(.4,0,1,1) both; }

@media (prefers-reduced-motion: reduce) {
  .splash__mark, .splash__mark-wrap::after, .fx-msg-in, .fx-msg-out { animation: none !important; }
}

/* ==========================================================================
   App bar — compact, sticky, holds search + filters
   ========================================================================== */

.appbar {
  position: sticky;
  top: 0;
  margin-top: 0;
  margin-block-start: 0;
  z-index: var(--z-appbar);
  padding-top: 12px !important;
  background: linear-gradient(180deg, var(--green-600) 0%, var(--brand-bar) 68%, var(--brand-bar-2) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06),
              0 8px 24px -18px rgba(8, 66, 42, 0.85);
}

.appbar::before {
  display: none !important;
}

.appbar__notice {
  position: relative;
  z-index: 1;
  padding: 0.25rem var(--sp-4);
  background: var(--citrus-300);
  color: var(--citrus-700);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-align: center;
}

.appbar__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-block: var(--sp-2);
}

.appbar__top {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.5rem;
}

.appbar__actions {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  flex: none;
}

.brand {
  display: flex;
  align-items: center;
  flex: none;
}

.brand__logo {
  height: 1.75rem;
  width: auto;
  max-width: 5.5rem;
  object-fit: contain;
}

.appbar .chip {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  color: #fff;
  min-height: 2rem;
  font-size: var(--fs-2xs);
  font-weight: 700;
}

.appbar .chip:hover { background: rgba(255, 255, 255, 0.24); }

.appbar .chip[aria-pressed="true"] {
  background: var(--stone-0);
  color: var(--green-700);
  box-shadow: 0 4px 14px -6px rgba(5, 45, 29, 0.5);
}

.appbar .chip--deal { color: var(--citrus-200); }

.appbar .chip--deal[aria-pressed="true"] {
  background: var(--citrus-300);
  color: var(--citrus-700);
}

.appbar .chip--more { padding-inline: var(--sp-2); }

.appbar .icon-btn,
.lang-toggle {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

.appbar .icon-btn:hover:not(:disabled),
.lang-toggle:hover { background: rgba(255, 255, 255, 0.26); color: #fff; }

.appbar .icon-btn:active:not(:disabled),
.lang-toggle:active { transform: scale(0.92); }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding-inline: var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}

.appbar .icon-btn { width: 2.25rem; height: 2.25rem; }

.appbar .icon-btn,
.lang-toggle { position: relative; }

.appbar .icon-btn::after,
.lang-toggle::after {
  content: "";
  position: absolute;
  inset: -4px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  flex: none;
  padding: 0.1875rem var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.status-pill--shut { background: rgba(0, 0, 0, 0.26); color: var(--citrus-200); }

.status-pill .dot--live {
  background: var(--green-300);
  box-shadow: 0 0 0 3px rgba(117, 221, 166, 0.26);
}

.status-pill__eta { display: none; }

@media (min-width: 420px) {
  .status-pill__eta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-width: 0;
    max-width: 9rem;
    padding-inline-start: 0.375rem;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.2);
  }
  .status-pill__eta > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ==========================================================================
   Search
   ========================================================================== */

.search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  height: 2.25rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-pill);
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}

.search:focus-within {
  background: var(--stone-0);
  border-color: var(--stone-0);
}

.search__input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding-block: 0;
  padding-inline: 2.125rem 2rem;
  background: none;
  border: 0;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.search__input::-webkit-search-decoration,
.search__input::-webkit-search-cancel-button { display: none; }

.search__input::placeholder {
  color: rgba(255, 255, 255, 0.62);
  font-weight: 500;
}

.search:focus-within .search__input { color: var(--text-strong); }
.search:focus-within .search__input::placeholder { color: var(--text-faint); }

.search__icon {
  position: absolute;
  inset-inline-start: 0.6875rem;
  display: flex;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
  transition: color var(--t-fast) var(--ease-out);
}

.search:focus-within .search__icon { color: var(--green-600); }

.search__clear {
  position: absolute;
  inset-inline-end: 0.375rem;
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  transition: background var(--t-fast) var(--ease-out);
}

.search:focus-within .search__clear {
  background: var(--stone-100);
  color: var(--text-muted);
}

.search__clear::after { content: ""; position: absolute; inset: -8px; }

/* ==========================================================================
   Market ticker
   ========================================================================== */

.ticker {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  min-width: 0;
}

.ticker__label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: none;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.ticker__label::before {
  content: "";
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--citrus-500);
}

.ticker__viewport {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  mask-image: linear-gradient(to left, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to left, #000 88%, transparent);
}

.ticker__viewport::-webkit-scrollbar { display: none; }

.tick {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: none;
  padding: 0.1875rem var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: var(--fs-2xs);
  white-space: nowrap;
}

.tick__name { color: var(--text-body); font-weight: 600; }
.tick__delta { font-weight: 700; font-variant-numeric: tabular-nums; }

.tick--down .tick__delta,
.tick--down .tick__arrow { color: var(--green-600); }
.tick--down .tick__arrow { transform: rotate(180deg); }
.tick--up   .tick__delta,
.tick--up   .tick__arrow { color: var(--citrus-600); }

/* ==========================================================================
   Category rail
   ========================================================================== */

.rail {
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-block: 1px;
  min-width: 0;
}

.appbar__rail {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

/* ==========================================================================
   Section headers
   ========================================================================== */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.section-head__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.section-head__count {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.store-main { padding-block: var(--sp-4) var(--sp-6); }

/* ==========================================================================
   Product grid
   ========================================================================== */

.grid-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

@media (min-width: 560px) {
  .grid-products {
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--sp-4);
  }
}

@media (min-width: 900px) {
  .grid-products { gap: var(--sp-5); }
}

/* ==========================================================================
   Product card
   ========================================================================== */

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: box-shadow var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-out);
  content-visibility: auto;
  contain-intrinsic-size: auto 15rem;
}

@media (hover: hover) {
  .pcard:hover { box-shadow: var(--sh-md); }
}

.pcard.is-incart {
  background-color: #FCFEFC;
  box-shadow: var(--sh-incart);
}

.pcard.is-gone { opacity: 0.55; }

.pcard__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-sunken);
  overflow: hidden;
}

.pcard__media.skel { border-radius: 0; }

.pcard__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}

.pcard__img.is-ready { opacity: 1; }

.pcard__seal {
  position: absolute;
  top: var(--sp-2);
  inset-inline-start: var(--sp-2);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--green-600);
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(5, 42, 29, 0.5);
  animation: sealPop 320ms var(--ease-spring) both;
}

.pcard__seal svg { overflow: visible; }
.pcard__seal path {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  animation: sealDraw 280ms var(--ease-out) 90ms forwards;
}

@keyframes sealPop {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes sealDraw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .pcard__seal path { stroke-dashoffset: 0; animation: none; }
}

.pcard__noimg {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--stone-300);
}

.pcard__deal {
  position: absolute;
  top: var(--sp-2);
  inset-inline-end: var(--sp-2);
  padding: 0.125rem 0.4375rem;
  border-radius: var(--r-pill);
  background: var(--citrus-500);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 800;
  text-align: center;
  letter-spacing: -0.02em;
  box-shadow: 0 2px 8px -2px rgba(158, 113, 13, 0.6);
}

.pcard__gone {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(251, 249, 246, 0.72);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.pcard__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.375rem;
  padding: var(--sp-3) var(--sp-3) 0.625rem;
}

.pcard__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  min-height: 2.7em;
}

.pcard__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: auto;
}

.pcard__amount {
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--green-800);
  font-variant-numeric: tabular-nums;
}

.pcard__unit {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-muted);
}

.pcard__was {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-faint);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Add to cart / quantity stepper
   ========================================================================== */

.pcard__cta {
  position: relative;
  height: 2.875rem;
  margin-top: var(--sp-2);
}

.stepper {
  position: absolute;
  inset: 0;
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.125rem;
  padding: 0.1875rem;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--green-500) 0%, var(--green-600) 100%);
  box-shadow: 0 8px 20px -10px rgba(12, 143, 81, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: background var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}

.stepper.is-empty {
  background: var(--green-50);
  box-shadow: inset 0 0 0 1.5px var(--green-200);
}

.stepper__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 100%;
  flex: none;
  border-radius: var(--r-pill);
  color: rgba(255, 255, 255, 0.96);
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}

.stepper__btn svg { width: 1.125rem; height: 1.125rem; }

.stepper__btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
.stepper__btn:active:not(:disabled) {
  background: rgba(255, 255, 255, 0.24);
  transform: scale(0.88);
}
.stepper__btn:disabled { opacity: 0.32; }

.stepper.is-empty .stepper__btn { color: var(--green-700); }
.stepper.is-empty .stepper__btn:hover:not(:disabled) { background: var(--green-100); }
.stepper.is-empty .stepper__btn:active:not(:disabled) { background: var(--green-200); }

.stepper.is-empty .stepper__btn--minus {
  opacity: 0;
  pointer-events: none;
}

.stepper__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  transform: scale(0.35);
  pointer-events: none;
}

.stepper__btn:active:not(:disabled)::after {
  animation: btnRipple 460ms var(--ease-out);
}

.stepper.is-empty .stepper__btn::after {
  background: radial-gradient(circle at center, rgba(12, 143, 81, 0.4) 0%, rgba(12, 143, 81, 0) 70%);
}

@keyframes btnRipple {
  0%   { opacity: 0.9; transform: scale(0.35); }
  100% { opacity: 0;   transform: scale(2.1); }
}

.stepper__readout {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  height: calc(100% - 2px);
  padding-inline: var(--sp-1);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.96);
  line-height: 1;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}

.stepper.is-empty .stepper__readout { background: transparent; }

.stepper__qty {
  display: block;
  font-family: var(--font-num);
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--green-800);
  font-variant-numeric: tabular-nums;
}

.stepper__unit {
  display: block;
  margin-top: 1px;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--green-600);
  letter-spacing: 0;
  white-space: nowrap;
}

.stepper.is-empty .stepper__qty  { color: var(--green-600); }
.stepper.is-empty .stepper__unit { color: var(--green-500); }

.stepper__readout.is-up    { animation: badgeUp 340ms var(--ease-spring); }
.stepper__readout.is-down  { animation: badgeDown 300ms var(--ease-spring); }

.stepper__readout.is-up .stepper__qty   { animation: qtySlideUp 300ms var(--ease-spring); }
.stepper__readout.is-down .stepper__qty { animation: qtySlideDown 260ms var(--ease-out); }

.stepper.is-pop { animation: pillPop 360ms var(--ease-spring); }

@keyframes pillPop {
  0%   { transform: scale(1); }
  32%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}

@keyframes badgeUp {
  0%   { transform: scale(1);    background: rgba(255, 255, 255, 0.96); }
  40%  { transform: scale(1.09); background: #fff; }
  100% { transform: scale(1);    background: rgba(255, 255, 255, 0.96); }
}

@keyframes badgeDown {
  0%   { transform: scale(1);    }
  40%  { transform: scale(0.94); }
  100% { transform: scale(1);    }
}

@keyframes qtySlideUp {
  0%   { opacity: 0; transform: translateY(85%) scale(0.82); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes qtySlideDown {
  from { opacity: 0; transform: translateY(-70%) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.stepper__fly {
  position: absolute;
  top: 50%;
  inset-inline-end: 2.75rem;
  z-index: 2;
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--green-700);
  pointer-events: none;
  animation: flyUp 620ms var(--ease-out) forwards;
}

.stepper:not(.is-empty) .stepper__fly { color: #fff; }

@keyframes flyUp {
  0%   { opacity: 0; transform: translateY(0) scale(0.7); }
  22%  { opacity: 1; transform: translateY(-40%) scale(1); }
  100% { opacity: 0; transform: translateY(-190%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .stepper__readout.is-up,
  .stepper__readout.is-down,
  .stepper__readout.is-up .stepper__qty,
  .stepper__readout.is-down .stepper__qty,
  .stepper.is-pop,
  .stepper__fly,
  .stepper__btn:active:not(:disabled)::after { animation: none; }
  .stepper__fly { display: none; }
}

/* ==========================================================================
   Skeleton card
   ========================================================================== */

.pcard-skel {
  background: var(--bg-raised);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

.pcard-skel__media { aspect-ratio: 1 / 1; border-radius: 0; }
.pcard-skel__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); }
.pcard-skel__line { height: 0.75rem; }
.pcard-skel__line--title { width: 70%; }
.pcard-skel__line--price { width: 40%; height: 1.25rem; }

.pcard-skel__cta {
  height: 2.875rem;
  margin-top: var(--sp-1);
  border-radius: var(--r-pill);
}

/* ==========================================================================
   Cart bar
   ========================================================================== */

.cartbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-cartbar);
  padding: var(--sp-2) 0 calc(var(--sp-2) + var(--safe-bottom));
  transform: translate3d(0, 130%, 0);
  visibility: hidden;
  transition: transform var(--t-slow) var(--ease-out),
              visibility var(--t-slow);
  background: linear-gradient(to top, var(--bg-app) 42%, rgba(250, 248, 245, 0));
}

.cartbar.is-up { transform: translate3d(0, 0, 0); visibility: visible; }

.cartbar__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  min-height: 3.25rem;
  padding-inline: var(--sp-3) var(--sp-4);
  background: var(--green-800);
  color: var(--text-invert);
  border-radius: var(--r-pill);
  box-shadow: 0 12px 30px -12px rgba(7, 58, 40, 0.7), var(--sh-md);
  transition: background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}

.cartbar__btn:hover { background: var(--green-700); }
.cartbar__btn:active { transform: scale(0.985); }

.cartbar__count {
  display: grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding-inline: 0.375rem;
  flex: none;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.2);
  font-size: var(--fs-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.cartbar__count.is-bumping { animation: bubbleBump 340ms var(--ease-spring); }

@keyframes bubbleBump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.26); }
  100% { transform: scale(1); }
}

.cartbar__label { font-size: var(--fs-base); font-weight: 700; }

.cartbar__total {
  flex: none;
  font-size: var(--fs-base);
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cartbar__total small { font-size: var(--fs-2xs); font-weight: 600; opacity: 0.85; }

/* ==========================================================================
   Checkout: progress rail
   ========================================================================== */

.steps { padding-inline: var(--sp-5); }

.steps__track {
  display: flex;
  gap: var(--sp-2);
}

.steps__seg {
  flex: 1 1 0;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--stone-200);
  transition: background var(--t-base) var(--ease-out);
}

.steps__seg.is-done { background: var(--green-500); }
.steps__seg.is-active { background: var(--green-500); }

.steps__labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--text-faint);
}

.steps__labels .is-on { color: var(--green-700); }
.steps__labels .is-on-indigo { color: var(--green-700); }

/* ==========================================================================
   Cart lines
   ========================================================================== */

.cart-lines {
  max-height: 13.75rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.cart-lines::-webkit-scrollbar { display: none; }

.cart-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 0.5rem var(--sp-3);
  background: var(--bg-raised);
}

.cart-line + .cart-line { border-top: 1px solid var(--hairline-soft); }

.cart-line__q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 2.25rem;
  height: 1.5rem;
  padding-inline: 0.375rem;
  border-radius: var(--r-xs);
  background: var(--green-50);
  box-shadow: inset 0 0 0 1px var(--green-100);
  color: var(--green-700);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cart-line__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-line__sum {
  flex: none;
  font-family: var(--font-num);
  font-size: var(--fs-base);
  font-weight: 800;
  color: var(--text-strong);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cart-line__x {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-xs);
  color: var(--text-faint);
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}

.cart-line__x:hover { background: var(--berry-50); color: var(--berry-600); }
.cart-line__x:active { background: var(--berry-100); }

/* ==========================================================================
   Totals
   ========================================================================== */

.totals {
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-app);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.totals__row { font-size: var(--fs-xs); }
.totals__row + .totals__row { margin-top: var(--sp-2); }

.totals__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-muted);
}

.totals__row + .totals__row { margin-top: var(--sp-3); }
.totals__row > span:last-child { color: var(--text-strong); font-variant-numeric: tabular-nums; }

.totals__grand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.totals__grand > span:last-child {
  color: var(--green-600);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.freeship { margin-bottom: var(--sp-4); }

.freeship__text {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--green-700);
}

.freeship__track {
  height: 5px;
  background: var(--stone-200);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.freeship__fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(to left, var(--green-500), var(--green-300));
  transition: width var(--t-slow) var(--ease-out);
}

/* ==========================================================================
   The confirm CTA
   ========================================================================== */

.btn--cta {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;

  --btn-h: 3.625rem;
  justify-content: space-between;
  gap: 0.5rem;
  padding-inline: 1rem;
  border-radius: var(--r-lg);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  box-shadow: 0 14px 34px -12px rgba(23, 174, 99, 0.68),
              0 3px 10px -4px rgba(10, 91, 55, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn--cta__amount {
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.1875rem;
  flex: none;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  font-family: var(--font-num);
  font-size: var(--fs-md);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.btn--cta__amount small { font-size: var(--fs-2xs); font-weight: 700; opacity: 0.9; }

.btn--cta__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn--cta:active:not(:disabled) {
  transform: translateY(1px) scale(0.994);
  box-shadow: 0 4px 14px -8px rgba(10, 91, 55, 0.55), var(--sh-inset-press);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn--cta:not(:disabled):not(:active) { animation: ctaBreathe 3.6s var(--ease-out) 1.2s infinite; }
}

@keyframes ctaBreathe {
  0%, 100% { box-shadow: 0 14px 34px -12px rgba(23, 174, 99, 0.68),
                         0 3px 10px -4px rgba(10, 91, 55, 0.35),
                         inset 0 1px 0 rgba(255, 255, 255, 0.22); }
  50%      { box-shadow: 0 18px 42px -12px rgba(23, 174, 99, 0.82),
                         0 3px 10px -4px rgba(10, 91, 55, 0.35),
                         inset 0 1px 0 rgba(255, 255, 255, 0.22); }
}

.sheet__foot--cta {
  box-shadow: var(--sh-up);
  border-top: none;
}

/* ==========================================================================
   Phone verification / OTP
   ========================================================================== */

.verify {
  padding: var(--sp-5) var(--sp-4);
  background: var(--green-50);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--green-100);
  text-align: center;
}

.verify__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto var(--sp-3);
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-700);
}

.verify__title { font-size: var(--fs-lg); font-weight: 700; }
.verify__text {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.7;
}

.verify__phone {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--green-800);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.otp {
  display: flex;
  gap: 0.375rem;
  margin: var(--sp-5) 0 var(--sp-3);
  direction: ltr;
}

.otp__cell {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: 3.25rem;
  padding: 0;
  background: var(--bg-raised);
  border: 1.5px solid var(--stone-200);
  border-radius: var(--r-md);
  font-family: var(--font-num);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--green-800);
  font-variant-numeric: tabular-nums;
  caret-color: transparent;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  transition: border-color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}

.otp__cell::selection { background: transparent; }

.otp__cell.is-filled {
  border-color: var(--green-300);
  background: var(--green-50);
  animation: otpFill 220ms var(--ease-spring);
}

.otp__cell:focus {
  border-color: var(--green-500);
  background: var(--bg-raised);
  box-shadow: 0 0 0 3px rgba(33, 150, 83, 0.16);
}

.otp.is-wrong .otp__cell {
  border-color: var(--berry-500);
  color: var(--berry-600);
  background: var(--berry-50);
}

.otp.is-wrong { animation: otpShake 380ms var(--ease-out); }

@keyframes otpFill {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

@keyframes otpShake {
  0%, 100% { transform: translateX(0); }
  22%      { transform: translateX(-5px); }
  55%      { transform: translateX(4px); }
  80%      { transform: translateX(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .otp__cell.is-filled, .otp.is-wrong { animation: none; }
}

.verify__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.linkbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 2.25rem;
  padding-inline: var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  transition: background var(--t-fast) var(--ease-out);
}

.linkbtn:hover:not(:disabled) { background: var(--stone-100); color: var(--text-strong); }
.linkbtn:disabled { opacity: 0.5; }

.linkbtn--danger {
  color: var(--text-muted);
  text-decoration: underline;
}

.linkbtn--danger:hover:not(:disabled) {
  background: transparent;
  color: var(--text-strong);
}

.field-wrap { position: relative; display: flex; align-items: center; }

.field-stamp {
  position: absolute;
  inset-inline-end: var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.25rem var(--sp-2);
  background: var(--green-50);
  border-radius: var(--r-xs);
  box-shadow: inset 0 0 0 1px var(--green-100);
  color: var(--green-700);
  font-size: var(--fs-2xs);
  font-weight: 700;
  pointer-events: none;
}

/* ==========================================================================
   Order success
   ========================================================================== */

.success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 60dvh;
  padding: var(--sp-8) var(--sp-6) calc(var(--sp-6) + var(--safe-bottom));
  text-align: center;
}

.success__seal {
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  margin-bottom: var(--sp-3);
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green-500);
  box-shadow: 0 0 0 8px var(--green-100);
  animation: sealIn 520ms var(--ease-spring) both;
}

@keyframes sealIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

.success__title {
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.success__text {
  max-width: 28ch;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.7;
}

.success > .btn { margin-top: var(--sp-6); width: 100%; }

/* ==========================================================================
   Account & order history
   ========================================================================== */

.account-id {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--bg-app);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.account-id__phone {
  margin-top: 0.125rem;
  font-size: var(--fs-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.order {
  background: var(--bg-raised);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

.order__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-app);
  border-bottom: 1px solid var(--hairline);
}

.order__id { font-size: var(--fs-md); font-weight: 700; }
.order__id .mono { font-size: var(--fs-md); }

.order__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  text-align: start;
  transition: background var(--t-fast) var(--ease-out);
}

.order__summary:hover { background: var(--bg-app); }

.order__date {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.order__total {
  margin-top: var(--sp-1);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--green-600);
  font-variant-numeric: tabular-nums;
}

.order__total small { font-size: var(--fs-2xs); font-weight: 600; color: var(--text-muted); }

.order__chevron {
  flex: none;
  color: var(--text-faint);
  transition: transform var(--t-base) var(--ease-out);
}

.order__chevron.is-open { transform: rotate(180deg); }

.order__items {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--hairline);
}

.order__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-body);
}

.order__line + .order__line { border-top: 1px solid var(--hairline-soft); }

.order__line > span:last-child {
  color: var(--green-600);
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.order.is-new      { box-shadow: var(--sh-sm), inset 3px 0 0 var(--green-500); }
.order.is-prep     { box-shadow: var(--sh-sm), inset 3px 0 0 var(--citrus-500); }
.order.is-otw      { box-shadow: var(--sh-sm), inset 3px 0 0 var(--green-600); }
.order.is-done     { box-shadow: var(--sh-sm), inset 3px 0 0 var(--green-500); }
.order.is-void     { box-shadow: var(--sh-sm), inset 3px 0 0 var(--berry-500); }

/* ==========================================================================
   Desktop refinements
   ========================================================================== */

@media (min-width: 900px) {
  .appbar__inner { padding-block: var(--sp-3); }
  .appbar__top { min-height: 2.75rem; }
  .brand__logo { height: 2.125rem; max-width: 8rem; }
  .search { height: 2.5rem; }
  .search__input { font-size: var(--fs-base); }
  .appbar .icon-btn, .lang-toggle { width: 2.5rem; height: 2.5rem; min-width: 2.5rem; }
  .store-main { padding-block: var(--sp-6) var(--sp-10); }

  body { padding-bottom: var(--sp-8); }
  body.has-cartbar { padding-bottom: calc(var(--cartbar-h) + var(--sp-8)); }
  .cartbar { padding-bottom: var(--sp-4); }
  .cartbar__btn { max-width: 30rem; margin-inline: auto; }
}