:root {
  --site-navy: #0d2a46;
  --site-bar: #03070d;
  --site-footer: #050a11;
  --site-header-height: 98px;
  --gold: #9b6b18;
  --gold-2: #c99635;
  --gold-3: #efd07b;
  --gold-tint: #f8edcf;
  --white: #fbf7ec;
  --ivory: #edf1f5;
  --ivory-2: #e1e7ee;
  --bg: var(--ivory);
  --surface: var(--white);
  --soft: #f2eee3;
  --soft-2: var(--ivory-2);
  --accent: var(--gold);
  --accent-dark: #6c480b;
  --accent-2: var(--gold-2);
  --accent-tint: var(--gold-tint);
  --grad-primary: linear-gradient(145deg, var(--gold), var(--gold-2));
  --grad-gold: linear-gradient(145deg, var(--gold-3), var(--gold-2));
  --hero-panel: radial-gradient(circle at 50% -20%, rgba(239, 208, 123, 0.18), transparent 46%), linear-gradient(135deg, #0b1c2d 0%, #12375e 55%, #174a78 100%);
}

body {
  position: relative;
  min-height: 100vh;
  background: var(--site-navy);
}

/* Store-display photography lives on the two outer rails only. The broad
   inward fade keeps the readable centre untouched, while the navy already
   baked into the photos lets them blend into the existing background. */
body::before,
body::after {
  content: "";
  position: absolute;
  top: var(--site-header-height);
  bottom: auto;
  z-index: 0;
  display: block;
  width: clamp(280px, 25vw, 460px);
  height: min(720px, calc(100svh - var(--site-header-height)));
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  opacity: 0.36;
  filter: saturate(0.92) contrast(0.96) brightness(0.88);
}

body::before {
  left: 0;
  background-image: url("/backgrounds/store-display-seeds.webp?v=1");
  -webkit-mask-image: radial-gradient(ellipse 112% 78% at 0% 46%, #000 0%, rgba(0, 0, 0, 0.9) 52%, transparent 92%);
  mask-image: radial-gradient(ellipse 112% 78% at 0% 46%, #000 0%, rgba(0, 0, 0, 0.9) 52%, transparent 92%);
}

body::after {
  right: 0;
  background-image: url("/backgrounds/store-display-snacks.webp?v=1");
  -webkit-mask-image: radial-gradient(ellipse 112% 78% at 100% 46%, #000 0%, rgba(0, 0, 0, 0.9) 52%, transparent 92%);
  mask-image: radial-gradient(ellipse 112% 78% at 100% 46%, #000 0%, rgba(0, 0, 0, 0.9) 52%, transparent 92%);
}

/* Keep both display stands visible on narrower screens too. Their image size,
   contrast, and inward fade step down with the available viewport. */
@media (max-width: 1179px) {
  body::before,
  body::after {
    width: clamp(150px, 25vw, 300px);
    height: min(680px, calc(100svh - var(--site-header-height)));
    opacity: 0.29;
  }
}


@media (max-width: 760px) {
  body::before,
  body::after {
    top: calc(var(--site-header-height) + env(safe-area-inset-top, 0px));
    width: clamp(88px, 30vw, 150px);
    height: min(280px, calc(72svh - var(--site-header-height)));
    opacity: 0.2;
    filter: saturate(0.82) contrast(0.94) brightness(0.78);
  }

  body::before {
    -webkit-mask-image: radial-gradient(ellipse 112% 78% at 0% 44%, #000 0%, rgba(0, 0, 0, 0.84) 48%, transparent 92%);
    mask-image: radial-gradient(ellipse 112% 78% at 0% 44%, #000 0%, rgba(0, 0, 0, 0.84) 48%, transparent 92%);
  }

  body::after {
    -webkit-mask-image: radial-gradient(ellipse 112% 78% at 100% 44%, #000 0%, rgba(0, 0, 0, 0.84) 48%, transparent 92%);
    mask-image: radial-gradient(ellipse 112% 78% at 100% 44%, #000 0%, rgba(0, 0, 0, 0.84) 48%, transparent 92%);
  }
}

/* Keep back-office and sign-in screens visually neutral. */
body:has(.admin-layout)::before,
body:has(.admin-layout)::after,
body:has(.login-wrap)::before,
body:has(.login-wrap)::after {
  display: none;
}

#root::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("/patterns/nuts-gold.svg?v=50");
  background-repeat: repeat;
  background-size: 400px 400px;
  background-position: 0 calc(var(--site-header-height) - 38px);
  /* 0.62 -> 0.527 (-15%) -> 0.369 (70%) -> 0.32 (supports, never competes) */
  opacity: 0.32;
  filter: saturate(1.6) brightness(1.08);
}

#root {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  isolation: isolate;
  background: transparent;
}

#root > main,
#root > .site-footer {
  position: relative;
  z-index: 1;
}

.ambient {
  display: none;
}

main {
  background: transparent;
}

.hero,
#trust,
#featuredWrap,
#catalog {
  background: transparent !important;
  background-image: none !important;
}

.hero {
  padding-top: calc(var(--s-8) + 6px);
}

.hero-copy {
  max-width: 960px;
}

.stand-promo {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 14px auto 0;
  padding: 8px 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 231, 164, 0.86);
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.68), transparent 30%),
    linear-gradient(135deg, #f8dfa0 0%, #d5a23f 42%, #b97916 68%, #f0c968 100%);
  box-shadow:
    0 12px 26px rgba(2, 13, 26, 0.22),
    0 0 14px rgba(239, 208, 123, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(108, 72, 11, 0.34);
  color: #261805;
  text-align: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur);
}

.stand-promo::before {
  content: "";
  position: absolute;
  inset: -80% -45%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.72) 50%, transparent 60%);
  transform: translateX(-72%) rotate(9deg);
  animation: trustGoldShine 5.8s ease-in-out infinite;
}

.stand-promo::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 42%);
  pointer-events: none;
}

.stand-promo > * {
  position: relative;
  z-index: 1;
}

.stand-promo:hover {
  transform: translateY(-3px);
  border-color: #ffe9aa;
  box-shadow:
    0 22px 46px rgba(2, 13, 26, 0.34),
    0 0 32px rgba(239, 208, 123, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.stand-promo__mark {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  color: #16803c;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.52);
}

.stand-promo strong {
  min-width: 0;
  color: #2b1a04;
  font-family: var(--font-head);
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 900;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .stand-promo::before {
    animation: none;
    opacity: 0.22;
  }
}

@media (max-width: 520px) {
  .stand-promo {
    gap: 7px;
    margin-top: 12px;
    padding: 7px 11px;
  }

  .stand-promo__mark {
    font-size: 18px;
  }

  .stand-promo strong {
    font-size: 13px;
  }
}

.hero-title {
  font-size: clamp(50px, 6.5vw, 84px);
}

.hero-brand {
  color: transparent;
  background: linear-gradient(110deg, #81500a 0%, #d49a2d 18%, #ffe79a 36%, #fff7cf 46%, #c18118 60%, #f4cc68 78%, #8a570d 100%);
  background-size: 220% 100%;
  background-position: 0 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 7px 16px rgba(239, 208, 123, 0.2));
  text-shadow: 0 2px 0 rgba(108, 72, 11, 0.34);
  animation: heroGoldShimmer 6.4s ease-in-out infinite;
}

@keyframes heroGoldShimmer {
  0%, 18% {
    background-position: 0 50%;
  }
  58%, 100% {
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-brand {
    animation: none;
    background-position: 48% 50%;
  }
}

.footer-seeds {
  color: var(--gold-2) !important;
  opacity: 0.24 !important;
}

.site-header {
  background: rgba(3, 7, 13, 0.98);
  border-bottom-color: rgba(239, 208, 123, 0.18);
}

.site-header.scrolled {
  background: rgba(3, 7, 13, 0.995);
}

.site-header .bar {
  height: 98px;
}

.site-header .brand {
  gap: 0;
  font-size: 24px;
  margin-inline-start: 0;
}

.site-header .cart-btn {
  margin-inline-end: -8px;
}

.site-header .brand small {
  margin-top: 0;
  font-size: 13px;
  color: var(--gold-3);
}

.site-header .brand .logo,
.site-footer .brand .logo {
  width: auto;
  height: auto;
  color: var(--gold-3);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.site-header .brand .logo svg {
  width: 78px;
  height: 78px;
}

.site-header .brand .logo img {
  width: 78px;
  height: 78px;
  border-radius: 12px;
  object-fit: contain;
}

.site-footer .brand .logo svg {
  width: 64px;
  height: 64px;
}

.site-footer .brand .logo img {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: contain;
}

#brandName,
#footerName {
  color: var(--gold-3);
}

.site-header .nav a:hover {
  color: var(--gold-3);
  background: rgba(239, 208, 123, 0.1);
}

.hero-sub {
  color: #e6edf6;
  max-width: 64ch;
  margin-top: var(--s-6);
  font-size: clamp(17px, 1.45vw, 20px);
}

.hero-cta {
  gap: 14px;
  margin-top: var(--s-6);
}

.hero-cta .btn {
  min-width: 180px;
  padding: 14px 26px;
  font-size: 15px;
}

.hero-badges {
  gap: 10px;
  margin-top: var(--s-6);
}

.hero-badges .badge {
  padding: 9px 16px;
  font-size: 13px;
}

.hero .btn-outline {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.34);
}

.hero .btn-outline:hover {
  color: var(--blue-dark);
  background: var(--white);
  border-color: var(--gold-3);
}

.soon-wrap {
  display: none !important;
}

#trust {
  border-top: 0 !important;
  padding-top: calc(var(--s-7) + 4px);
  padding-bottom: var(--s-3);
}

#trust .hero-badges .badge {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(239, 208, 123, 0.24);
  box-shadow: none;
}

#trust .hero-badges {
  margin: 0 0 calc(var(--s-3) + 4px) !important;
}

#catalog .eyebrow {
  color: #f7dfa0;
}

#trust .trust-item {
  isolation: isolate;
  color: #261805;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.68), transparent 30%),
    linear-gradient(135deg, #f8dfa0 0%, #d5a23f 42%, #b97916 68%, #f0c968 100%);
  border-color: rgba(255, 231, 164, 0.86);
  /* Glow dialled back — same gold surface, less halo bleeding onto the hero. */
  box-shadow:
    0 12px 26px rgba(2, 13, 26, 0.22),
    0 0 14px rgba(239, 208, 123, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(108, 72, 11, 0.34);
}

/* The four stat cards read as one set: same box, same rhythm inside. */
#trust .t-num {
  line-height: 1.15;
}

#trust .t-label {
  margin-top: 2px;
  line-height: 1.35;
}

#trust .trust-item--city {
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  min-height: 68px;
  padding-inline: 12px;
}

#trust .trust-item--city .t-ic,
#trust .trust-item--city .t-num {
  display: none !important;
}

#trust .trust-item--city .t-label {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
}

#trust .trust {
  position: relative;
  isolation: isolate;
}

#trust .trust::before {
  content: "";
  position: absolute;
  inset: -18px -12px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(239, 208, 123, 0.22), transparent 68%);
  filter: blur(18px);
}

#trust .trust-item::before {
  content: "";
  position: absolute;
  inset: -80% -45%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.72) 50%, transparent 60%);
  transform: translateX(-72%) rotate(9deg);
  animation: trustGoldShine 5.8s ease-in-out infinite;
}

#trust .trust-item::after {
  inset: 1px;
  height: auto;
  z-index: 0;
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 42%);
  opacity: 1;
}

#trust .trust-item:nth-child(2)::before {
  animation-delay: 0.45s;
}

#trust .trust-item:nth-child(3)::before {
  animation-delay: 0.9s;
}

#trust .trust-item:nth-child(4)::before {
  animation-delay: 1.35s;
}

#trust .trust-item > * {
  position: relative;
  z-index: 1;
}

#trust .trust-item:hover {
  border-color: #ffe9aa;
  box-shadow:
    0 22px 46px rgba(2, 13, 26, 0.34),
    0 0 32px rgba(239, 208, 123, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

#trust .t-ic {
  width: 46px;
  height: 46px;
  color: #3a2609;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
}

#trust .t-ic svg {
  filter: drop-shadow(0 2px 3px rgba(255, 244, 204, 0.38));
}

#trust .t-ic svg path,
#trust .t-ic svg circle,
#trust .t-ic svg rect,
#trust .t-ic svg polygon,
#trust .t-ic svg polyline,
#trust .t-ic svg line {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.65 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#trust .t-num {
  font-size: 24px;
  color: #2b1a04;
  text-shadow: 0 1px 0 rgba(255, 244, 204, 0.5);
}

#trust .t-num .u {
  color: #5f3d09;
}

/* الوحدة تُرسم دائمًا الآن حتى تقدر لوحة الإدارة تكتب فيها، فالكارت الذي بلا وحدة
   يخفيها بدل أن يترك 2px فراغ بعد الرقم. */
#trust .t-num .u:empty {
  display: none;
}

#trust .t-label {
  font-size: 12px;
  color: #4b3008;
  font-weight: 800;
}

@keyframes trustGoldShine {
  0%, 58% {
    transform: translateX(-72%) rotate(9deg);
  }
  78%, 100% {
    transform: translateX(72%) rotate(9deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #trust .trust-item::before {
    animation: none;
    opacity: 0.22;
  }
}

@media (min-width: 761px) {
  .hero {
    min-height: 0;
    display: grid;
    align-items: start;
    padding-block: calc(var(--s-3) + 6px) var(--s-2);
  }

  .hero .container {
    width: 100%;
  }

  #trust {
    min-height: 0;
    display: grid;
    align-items: start;
    padding-top: calc(var(--s-2) + 4px);
    padding-bottom: var(--s-3);
  }

  #trust .container {
    width: 100%;
  }

  #trust .trust {
    gap: 14px;
  }

  #trust .trust-item {
    min-width: 210px;
    padding: 13px 20px 13px 15px;
  }
}

.card,
.panel,
.modal-card,
.drawer,
.cat-pill,
.radio-card {
  background-color: var(--white);
}

.grid-products {
  grid-template-columns: repeat(auto-fill, minmax(284px, 1fr));
  gap: 42px 24px;
}

#featuredGrid {
  grid-template-columns: repeat(auto-fill, minmax(284px, 1fr));
  gap: 42px 24px;
}

@media (min-width: 1100px) {
  #featuredGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ===== Product card — spacing on an 8px rhythm, same palette ===== */

.grid-products .card {
  isolation: isolate;
  border-color: rgba(201, 150, 53, 0.34);
  border-radius: 28px;
  background: #fff;
  /* Softer, lighter: two low-opacity layers instead of one heavy drop */
  box-shadow:
    0 2px 6px rgba(2, 13, 26, 0.05),
    0 12px 28px rgba(2, 13, 26, 0.07);
  transition:
    transform 220ms ease-out,
    box-shadow 220ms ease-out,
    border-color 220ms ease-out;
}

/* The sweeping gloss that used to run on every card is gone: it read as
   flashy next to a calmer card, and it was an infinite animation on 70+
   elements. The inset hairline below keeps the subtle depth. */
.grid-products .card::before {
  content: none;
}

.grid-products .card::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 26px;
}

.grid-products .card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 150, 53, 0.55);
  box-shadow:
    0 4px 10px rgba(2, 13, 26, 0.06),
    0 18px 36px rgba(2, 13, 26, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .grid-products .card,
  .grid-products .card:hover {
    transform: none;
    transition: none;
  }
}

.grid-products .card-media {
  aspect-ratio: 4 / 3;
  padding: 0;
  background: #fff;
}

/* الصور مقاسين: 4:3 بخلفية ممتدة، و1:1 بخلفية بيضاء استوديو. الإطار 4:3
   بدون حشو يجعل صور 4:3 تملأ الكادر حافة لحافة، وصور 1:1 تندمج بيضاؤها مع
   خلفية الكارت البيضاء بلا حدود ظاهرة. scale(1.01) يمنع أي شعرة بيضاء من
   تقريب البكسل على الصور الممتدة. */
.grid-products .card-media img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  transform: scale(1.01);
  box-shadow: none;
}

/* No hover zoom — elevation alone carries the interaction. */
.grid-products .card:hover .card-media img {
  transform: scale(1.01);
}

/* 20px padding / 12px rhythm: more breathing room than before (18/10) while
   keeping the text block short enough that the image stays the hero.
   Bottom padding is tighter than the sides — the button's own height already
   carries the visual weight down there. */
.grid-products .card-body {
  gap: 12px;
  padding: 20px 20px 16px;
}

/* --- Badges over the image: one geometry for all three --- */

/* Shared: identical height, identical inline padding, identical 16px inset.
   38px line-height (not padding) sets the height, so the price badge and the
   flags land on exactly the same pill regardless of their font sizes. */
.grid-products .price-badge,
.grid-products .feat-flag,
.grid-products .min-flag {
  box-sizing: border-box;
  min-height: 38px;
  padding-block: 0;
  padding-inline: 15px;
  border-radius: 999px;
  font-weight: 800;
}

.grid-products .feat-flag,
.grid-products .min-flag {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  white-space: nowrap;
}

/* Price is the loudest thing after the image. Inline-block (not flex) so the
   amount and the currency share one baseline for free; tabular figures keep
   the digits from shifting width as the selected size changes the number. */
.grid-products .price-badge {
  top: 16px;
  inset-inline-end: 16px;
  display: inline-block;
  /* 38px pill minus its own 1px top/bottom border, so it matches the flags
     exactly. Driving height from line-height (not padding) keeps the pill the
     same size whether it shows a price or the "coming soon" text. */
  line-height: 36px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.grid-products .price-badge small {
  margin-inline-start: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.grid-products .price-badge.price-pending {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

.grid-products .feat-flag,
.grid-products .min-flag {
  font-size: 11.5px;
  line-height: 1.4;
}

.grid-products .feat-flag {
  top: 16px;
  inset-inline-start: 16px;
}

.grid-products .min-flag {
  bottom: 16px;
  inset-inline-start: 16px;
}

/* --- Typography hierarchy: price > name > desc > category/stock --- */

.grid-products .card-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

/* Clamped so a long name can never change the card's height. */
.grid-products .card-name,
#featuredGrid .card-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* flex:1 (from the base sheet) still absorbs the leftover space, so the
   button stays on the same baseline across every card in the row. */
.grid-products .card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.5;
}

/* --- Size selector: segmented, equal width, same logic --- */

.grid-products .sizes {
  gap: 8px;
}

/* The selector is a *choice*, the button is the *action*. The base sheet gives
   .size.active the same gold gradient as .add-btn, which made the two compete;
   here the selection reads as a light gold-tinted outline instead. Existing
   brand tokens only — no new hues, and no change to any selector or handler. */
.grid-products .size {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: #fff;
  color: var(--blue-dark);
  font-size: 12.5px;
  line-height: 1.25;
  transition:
    background-color 200ms ease-out,
    border-color 200ms ease-out,
    color 200ms ease-out,
    box-shadow 200ms ease-out;
}

.grid-products .size:hover:not(.active) {
  border-color: var(--gold-2);
  background: rgba(248, 237, 207, 0.4);
}

.grid-products .size.active {
  border-color: var(--gold-2);
  background: var(--accent-tint);
  color: var(--accent-dark);
  box-shadow: inset 0 0 0 1px var(--gold-2);
}

.grid-products .size.active small {
  color: var(--accent-dark);
  opacity: 0.85;
}

.grid-products .size small {
  display: block;
  margin-top: 0;
  font-size: 10.5px;
  white-space: nowrap;
}

/* A lone size repeats the price badge verbatim — show just the label.
   Multi-size products keep their prices so sizes stay comparable. */
.grid-products .size:only-child small {
  display: none;
}

.grid-products .size:only-child {
  flex-direction: row;
  gap: 6px;
}

/* --- Footer: stock label above a full-width primary action --- */

.grid-products .card-foot {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 0;
}

/* Dot and label on one optical line. The dot inherits currentColor, so the
   state colours below drive both. Text and logic are untouched. */
.grid-products .stock-dot {
  align-self: flex-start;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
}

.grid-products .stock-dot .dot {
  flex: 0 0 8px;
  align-self: center;
}

.grid-products .stock-dot.stock-in {
  color: #15803d;
}

.grid-products .stock-dot.stock-low {
  color: var(--warn);
}

.grid-products .stock-dot.stock-out {
  color: var(--danger);
}

.grid-products .add-btn {
  width: 100%;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 16px;
  font-size: 14px;
  letter-spacing: -0.01em;
  transition:
    transform 200ms ease-out,
    box-shadow 200ms ease-out,
    filter 200ms ease-out;
}

.grid-products .add-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(2, 13, 26, 0.16);
}

.grid-products .add-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(2, 13, 26, 0.12);
}

/* Was opacity .45 over muted-on-grey — barely legible. Full opacity roughly
   doubles the contrast while the flat grey fill (vs the gold gradient) and
   not-allowed cursor keep it unmistakably inactive. */
.grid-products .add-btn:disabled {
  opacity: 1;
  background: var(--soft-2);
  color: var(--muted);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.grid-products .add-btn:focus-visible,
.grid-products .size:focus-visible {
  outline: 2px solid var(--gold-3);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .grid-products .add-btn,
  .grid-products .add-btn:hover:not(:disabled),
  .grid-products .size {
    transform: none;
    transition: none;
  }
}

#featuredWrap .section-head h2,
#catalog .section-head h2 {
  color: var(--gold-3);
}

#featuredWrap {
  padding-top: var(--s-5) !important;
  padding-bottom: var(--s-5) !important;
}

#featuredWrap .section-head {
  margin-bottom: var(--s-5);
}

#catalog {
  padding-top: var(--s-7);
  padding-bottom: var(--s-7);
}

#catalogSub,
#featuredWrap .section-head,
#catalog .section-head {
  color: #d7e2ee;
}

.site-footer {
  margin-top: 0;
  padding-top: var(--s-7);
  background: var(--site-footer);
  border-top: 2px solid rgba(239, 208, 123, 0.2);
}

@media (min-width: 1041px) {
  .footer-grid {
    column-gap: 44px;
    row-gap: var(--s-7);
  }

  /* At this width all four columns sit on one grid row, so the 16px top margin
     these two carry (meant for the wrapped 2-up layout) pushed their headings
     16px below the other two. Zeroed here only — the wrapped layout keeps it. */
  .footer-grid > div:nth-child(3),
  .footer-grid > div:nth-child(4) {
    margin-inline-start: 0 !important;
    margin-top: 0 !important;
  }
}

.copyright {
  background: var(--site-bar);
  margin-inline: calc(var(--s-5) * -1);
  margin-bottom: calc(var(--s-7) * -1);
  padding: var(--s-5);
}

/* ===== Hero rhythm — horizontal gaps only, hero height unchanged ===== */

/* The three inline row-groups stacked in the intro each used a different gap:
   .hero-cta 14px, .hero-badges 10px, .trust 14px. Matching the badges to 14
   lines all three up and costs no vertical space. */
#trust .hero-badges {
  gap: 14px;
}

/* ===== Footer micro-polish — geometry only, palette untouched ===== */

/* Blocks inside a footer column sat at 12 / 14 / 16 / 20 / 21px apart. One
   16px step between every block, matching the heading-to-content gap. */
/* !important only because the bundle sets margin-top inline on the "تابعنا"
   heading (style="margin-top:var(--s-5)"), which no stylesheet rule can beat. */
.site-footer .footer-grid > div > h4 {
  margin-top: 16px !important;
}

.site-footer .footer-grid > div > h4:first-child {
  margin-top: 0 !important;
}

.site-footer .foot-pay,
.site-footer .app-download-links,
.site-footer .wa-cta {
  margin-top: 16px;
}

/* inline-flex put the button on a line box, adding ~9px of leading under the
   links. Block-level with fit-content keeps the exact same pill width. */
.site-footer .wa-cta {
  display: flex;
  width: fit-content;
}

/* 44px of dead space above the copyright bar. */
.site-footer .copyright {
  margin-top: 32px;
}

/* The phone card and the two app buttons are the same species of tile but
   were 70.5 / 70.6px with different padding. One box for all three. */
.site-footer .contact-card,
.site-footer .app-download-link {
  box-sizing: border-box;
  min-height: 72px;
  border-radius: 16px;
  align-items: center;
}

.site-footer .contact-card {
  padding: 12px 16px;
}

/* 10px, not 12: these hold two stacked lines, so 12px pushed them past the
   shared 72px and back out of step with the phone card. */
.site-footer .app-download-link {
  padding: 10px 12px;
}

/* Actions keep their own shapes but get predictable target heights. */
.site-footer .wa-cta {
  min-height: 52px;
}

.site-footer .pay-chip {
  min-height: 40px;
  border-radius: 12px;
}

/* Column 4's heading sat 4px tighter than the other three. The 1.2 line-height
   also gave a 19px box for glyphs that ink 24px — fine while overflow is
   visible, but it clipped the descenders' breathing room. */
.site-footer .footer-grid h4 {
  margin-bottom: 16px;
  line-height: 1.5;
}

.site-footer .foot-social a {
  border-radius: 12px;
}

/* The footer had no visible keyboard focus at all. */
.site-footer a:focus-visible,
.site-footer button:focus-visible {
  outline: 2px solid var(--gold-3);
  outline-offset: 3px;
}

.mobile-bar {
  background: rgba(3, 7, 13, 0.98);
  border-top-color: rgba(239, 208, 123, 0.2);
}

.btn-primary {
  color: #fff;
  box-shadow: var(--glow-gold);
}

.btn-primary:hover {
  box-shadow: 0 24px 54px -14px rgba(155, 107, 24, 0.48);
}

.radio-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.radio-card:hover,
.radio-card.active {
  border-color: var(--gold);
}

.radio-card.active {
  color: var(--accent-dark);
  background: var(--gold-tint);
  box-shadow: inset 0 0 0 1px var(--gold);
}

.radio-card.active small {
  color: var(--accent-dark);
}

.admin-layout {
  background: transparent;
}

.admin-main {
  background: transparent;
}

.sidebar {
  background: var(--site-bar);
  border-inline-end-color: rgba(239, 208, 123, 0.22);
}

.sidebar .brand,
.login-card .brand {
  color: var(--gold-3);
}

.sidebar .brand small {
  color: #b8c7d8;
}

.side-nav button {
  color: #c8d4e0;
}

.side-nav button:hover {
  color: var(--gold-3);
  background: rgba(239, 208, 123, 0.09);
}

.side-nav button.active {
  color: #241600;
  background: linear-gradient(145deg, var(--gold-3), var(--gold-2));
}

.admin-head h1 {
  color: var(--gold-3);
}

.admin-main .panel,
.admin-main .stat,
.login-card {
  background: var(--white);
  border-color: rgba(201, 150, 53, 0.36);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24);
}

.admin-main .stat .v {
  color: var(--gold);
}

.admin-main th {
  color: var(--accent-dark);
  background: var(--gold-tint);
}

.featured-toggle {
  min-width: 150px;
  padding: 8px 12px;
  border: 1px solid rgba(201, 150, 53, 0.42);
  border-radius: 999px;
  color: var(--accent-dark);
  background: var(--gold-tint);
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.featured-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(155, 107, 24, 0.2);
}

.featured-toggle.active {
  color: #241600;
  background: linear-gradient(145deg, var(--gold-3), var(--gold-2));
  border-color: var(--gold-2);
}

.app-download-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(145px, 1fr));
  gap: 10px;
  width: min(100%, 380px);
  margin-top: 14px;
}

.app-download-link {
  min-width: 0;
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 11px;
  overflow: visible;
  border: 1px solid rgba(239, 208, 123, 0.38);
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.055));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.app-download-link:not(.is-disabled):hover {
  transform: translateY(-2px);
  border-color: rgba(239, 208, 123, 0.7);
  background: rgba(239, 208, 123, 0.15);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.app-download-link svg {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 7px;
  border: 1px solid rgba(239, 208, 123, 0.34);
  border-radius: 11px;
  background: rgba(239, 208, 123, 0.11);
  fill: none;
  stroke: var(--gold-3);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-google-play svg {
  fill: var(--gold-3);
  stroke: none;
  padding: 8px;
}

.app-download-link span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  line-height: 1.2;
  text-align: start;
}

.app-download-link small {
  color: #a9bdd8;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.app-download-link b {
  color: #fff;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.app-download-link.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.55);
}

.app-download-link:focus-visible {
  outline: 2px solid var(--gold-3);
  outline-offset: 3px;
}

@media (max-width: 380px) {
  .app-download-links {
    grid-template-columns: 1fr;
  }

  .app-download-link {
    min-height: 62px;
  }
}

.cart-line > .icon-btn:last-child {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px;
  flex: 0 0 38px;
  align-self: center;
  display: grid;
  place-items: center;
  padding: 0 !important;
  line-height: 1;
}

.cart-line > .icon-btn:last-child .ic {
  width: 18px;
  height: 18px;
  margin: 0;
}

.admin-size-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed rgba(201, 150, 53, 0.48);
  border-radius: 14px;
  background: rgba(248, 237, 207, 0.48);
}

.admin-size-actions .hint {
  flex-basis: 100%;
  margin-bottom: 2px;
  color: var(--accent-dark);
  font-weight: 700;
}

.admin-size-remove {
  min-width: 82px;
  justify-content: center;
}

/* كروت الأرقام في الإعدادات: نفس إطار .admin-size-actions المتقطّع حتى تُقرأ
   المجموعة كوحدة واحدة، وكل كارت صفّ من ثلاثة حقول (رقم / وحدة / عنوان). */
.trust-stats-settings {
  margin-top: 4px;
  padding: 12px;
  border: 1px dashed rgba(201, 150, 53, 0.48);
  border-radius: 14px;
  background: rgba(248, 237, 207, 0.48);
}

.trust-stats-settings > .hint {
  display: block;
  margin: 2px 0 10px;
  color: var(--accent-dark);
  font-weight: 700;
}

.trust-stat-row {
  display: grid;
  grid-template-columns: 92px 110px minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.trust-stat-row + .trust-stat-row {
  margin-top: 10px;
}

.trust-stat-row .field {
  margin: 0;
  min-width: 0;
}

.trust-stat-preview {
  display: block;
  margin-top: 10px;
  color: var(--accent-dark);
}

@media (max-width: 720px) {
  .trust-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trust-stat-row .field:last-child {
    grid-column: 1 / -1;
  }
}

/* "الحجم" column in the admin products table. Wraps rather than truncating —
   a product can carry up to five size labels. */
.admin-size-cell {
  display: inline-block;
  max-width: 100%;
  padding: 3px 9px;
  border: 1px solid rgba(201, 150, 53, 0.42);
  border-radius: 11px;
  background: rgba(248, 237, 207, 0.5);
  color: var(--accent-dark, #6b4d12);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
  /* One line on desktop — no clipping, the column just takes the width it
     needs and .table-wrap scrolls if the table gets wide. The mobile card
     layout below switches this to wrapping. */
  white-space: nowrap;
}

/* كارت تغيير كلمة مرور الأدمن في الإعدادات. بيتركّب من site-custom.js داخل
   .admin-password-slot اللي بيحطها patch-web-bundle.js مكان حقل adminPass القديم.
   نفس إطار .trust-stats-settings المتقطّع حتى يُقرأ كمجموعة مستقلة عن باقي
   الحقول — لأنه فعلًا مستقل: ليه زرّه الخاص ومش بيتحفظ مع «حفظ التغييرات». */
.admin-password-slot {
  margin-top: 4px;
  padding: 12px;
  border: 1px dashed rgba(201, 150, 53, 0.48);
  border-radius: 14px;
  background: rgba(248, 237, 207, 0.48);
}

.admin-password-slot > .hint {
  display: block;
  margin: 2px 0 10px;
  color: var(--accent-dark);
  font-weight: 700;
}

.admin-password-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.admin-password-row .field {
  margin: 0;
  min-width: 0;
}

.admin-password-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.admin-password-msg {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 700;
}

/* الرسالة فاضية وقت الراحة، فتتشال من التخطيط بدل ما تسيب فراغ تحت الأزرار. */
.admin-password-msg:empty {
  display: none;
}

.admin-password-msg[data-tone="error"] {
  color: #9f2f2f;
}

.admin-password-msg[data-tone="success"] {
  color: #1f6b3a;
}

@media (max-width: 720px) {
  .admin-password-row {
    grid-template-columns: 1fr;
  }
}

/* ===== مناطق النظام الآمنة (Android edge-to-edge) =====
   التطبيق بيستهدف Android 16 (targetSdk = 36) واللي بيفرض العرض من حافة لحافة،
   يعني الـ WebView بيترسم تحت شريط الحالة وشريط التنقّل ومفيش طريقة لإلغاء ده من
   إعدادات الـ StatusBar. زر «السلة» في الهيدر بيبدأ عند 21px من فوق، يعني بيقع
   جوّه شريط الحالة، واللمسة عليه بياخدها النظام (بيفتح ستارة الإشعارات) فالسلة
   ما بتفتحش خالص. الحشو هنا بينزّل الهيدر تحت شريط الحالة فالزرار يرجع في
   المساحة اللي بتستقبل اللمس.
   env() بترجع 0px في أي متصفح عادي وعلى الديسكتوب، فالشكل على الويب ما بيتغيرش. */
.site-header {
  padding-top: env(safe-area-inset-top, 0px);
}

.drawer {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 760px) {
  /* الشريط السفلي بيكبر بمقدار الحشو الآمن، فالمساحة المحجوزة تحت المحتوى
     تكبر معاه عشان آخر كارت ما يفضلش مخبّي وراه. */
  body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
}

.login-wrap {
  background: transparent;
}

#featuredWrap.featured-sync:not(.featured-ready) .section-head,
#featuredWrap.featured-sync:not(.featured-ready) .card {
  opacity: 0 !important;
  transform: none !important;
}

.customers-head > div {
  min-width: 0;
}

.customers-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
}

.customers-search-panel {
  margin-bottom: 14px;
}

.customers-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.customers-search-row input {
  flex: 1;
  margin: 0;
}

.customers-count {
  flex: 0 0 auto;
  color: var(--accent-dark);
  background: var(--gold-tint);
  border: 1px solid rgba(201, 150, 53, 0.35);
}

.customers-hint {
  margin: 9px 0 0;
}

.customers-table td {
  vertical-align: middle;
}

.customer-note {
  display: inline-block;
  max-width: 260px;
  margin-top: 3px;
}

.customer-phone {
  color: var(--accent-dark);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.customer-phone:hover {
  color: var(--gold);
}

.customer-actions {
  flex-wrap: nowrap;
}

.customers-empty {
  padding: 28px !important;
  color: var(--muted);
  text-align: center;
}

.customer-modal-card {
  max-width: 620px;
}

.ledger-modal-card {
  max-width: 900px;
}

.ledger-customer-meta {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 13px;
}

.ledger-stats {
  margin-bottom: 14px;
}

.ledger-entry-panel {
  margin-bottom: 14px;
  border-style: dashed;
}

.ledger-entry-panel h4 {
  margin-bottom: 10px;
  color: var(--accent-dark);
}

.ledger-entry-row {
  align-items: end;
}

.ledger-entry-row .field,
.ledger-note-field {
  margin: 0;
}

.ledger-entry-row .btn {
  min-height: 46px;
}

.ledger-note-field {
  margin-top: 10px;
}

.ledger-table td:first-child {
  white-space: nowrap;
}

.customers-toast {
  position: fixed;
  z-index: 1500;
  inset-inline-start: 50%;
  bottom: 24px;
  min-width: min(340px, calc(100vw - 32px));
  padding: 12px 18px;
  border: 1px solid rgba(239, 208, 123, 0.5);
  border-radius: 14px;
  color: #241600;
  background: linear-gradient(145deg, var(--gold-3), var(--gold-2));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
  font-weight: 800;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

[dir="rtl"] .customers-toast {
  transform: translate(50%, 16px);
}

.customers-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

[dir="rtl"] .customers-toast.show {
  transform: translate(50%, 0);
}

.customers-toast[data-type="error"] {
  color: #fff;
  background: #9f2f2f;
  border-color: rgba(255, 255, 255, 0.28);
}

@media (max-width: 640px) {
  :root {
    --site-header-height: 90px;
  }

  .site-header .bar {
    height: 90px;
  }

  .site-header .brand .logo svg,
  .site-header .brand .logo img {
    width: 68px;
    height: 68px;
  }

  .site-header .brand {
    gap: 0;
    font-size: 22px;
    margin-inline-start: 0;
  }

  .site-header .cart-btn {
    margin-inline-end: -4px;
  }

  .hero {
    padding-top: calc(var(--s-3) + 5px);
    padding-bottom: 0;
  }

  .hero-title {
    font-size: clamp(40px, 12vw, 50px);
  }

  .hero-sub {
    margin-top: var(--s-4);
    font-size: 15.5px;
    line-height: 1.65;
  }

  .hero-cta {
    gap: 12px;
    margin-top: var(--s-5);
  }

  /* Matches .hero-cta and .trust at this breakpoint. Needs the #trust prefix
     to outrank the desktop rule, which is id-scoped. */
  #trust .hero-badges {
    gap: 12px;
  }

  .hero-cta .btn {
    min-width: 0;
    flex: 1 1 140px;
    padding: 12px 16px;
    font-size: 14px;
  }

  .hero-badges {
    gap: 8px;
    margin-top: var(--s-5);
  }

  .hero-badges .badge {
    padding: 7px 11px;
    font-size: 12px;
  }

  #trust {
    min-height: 0;
    padding-top: 0;
    padding-bottom: var(--s-2);
  }

  #trust .hero-badges {
    margin-top: 22px !important;
    margin-bottom: 18px !important;
  }

  #trust .trust {
    gap: 12px;
  }

  #trust .trust-item {
    padding: 10px 12px;
  }

  #trust .t-ic {
    width: 40px;
    height: 40px;
  }

  #trust .t-num {
    font-size: 21px;
  }

  #trust .t-label {
    font-size: 11px;
  }

  #featuredWrap {
    padding-top: calc(var(--s-4) + 8px) !important;
    padding-bottom: var(--s-4) !important;
  }

  .grid-products,
  #featuredGrid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 34px 20px;
  }

  .grid-products .card {
    width: min(100%, 370px);
    margin-inline: auto;
    border-radius: 24px;
  }

  .grid-products .card::after {
    border-radius: 22px;
  }

  .grid-products .card-media {
    aspect-ratio: 4 / 3;
    padding: 0;
  }

  .grid-products .card-body {
    gap: 12px;
    padding: 18px 16px 14px;
  }

  /* Same shared badge geometry, one step smaller */
  .grid-products .price-badge,
  .grid-products .feat-flag,
  .grid-products .min-flag {
    min-height: 34px;
    padding-inline: 13px;
  }

  .grid-products .price-badge {
    top: 12px;
    inset-inline-end: 12px;
    line-height: 32px;
    font-size: 18px;
  }

  .grid-products .price-badge small {
    font-size: 10.5px;
  }

  .grid-products .price-badge.price-pending {
    font-size: 12.5px;
  }

  .grid-products .feat-flag {
    top: 12px;
    inset-inline-start: 12px;
    font-size: 11.5px;
  }

  .grid-products .min-flag {
    bottom: 12px;
    inset-inline-start: 12px;
    font-size: 11.5px;
  }

  .grid-products .card-cat {
    font-size: 11px;
  }

  .grid-products .card-name {
    font-size: 17px;
  }

  .grid-products .card-desc {
    font-size: 12.5px;
    line-height: 1.6;
  }

  .grid-products .sizes {
    gap: 8px;
  }

  /* 44px minimum touch target */
  .grid-products .size {
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 14px;
    font-size: 12.5px;
  }

  .grid-products .size small {
    font-size: 10.5px;
  }

  .grid-products .card-foot {
    gap: 8px;
  }

  .grid-products .stock-dot {
    font-size: 11.5px;
  }

  /* 44px minimum touch target */
  .grid-products .add-btn {
    min-height: 46px;
    padding: 12px 16px;
    font-size: 13.5px;
  }

  #catalog .cats {
    display: none !important;
  }

  #catalog .section-head {
    margin-bottom: 8px;
  }

  #catalogSub {
    margin-top: 4px;
  }

  #catalogSub .catalog-filter-prompt {
    display: none;
  }

  #productsGrid {
    margin-top: 8px !important;
  }

  #catalog {
    padding-top: var(--s-6);
    padding-bottom: var(--s-6);
  }

  .site-footer {
    padding-top: var(--s-6);
  }

  .radio-cards {
    grid-template-columns: 1fr;
  }

  .app-download-links {
    width: min(100%, 380px);
    max-width: none;
  }

  .customers-head {
    align-items: flex-start;
    gap: 12px;
  }

  .customers-head .btn {
    width: 100%;
  }

  .customers-search-row {
    align-items: stretch;
    flex-direction: column;
  }

  .customers-count {
    align-self: flex-start;
  }

  .customer-actions {
    flex-wrap: wrap;
    min-width: 160px;
  }

  .ledger-entry-row {
    grid-template-columns: 1fr;
  }

  .ledger-entry-row .btn {
    width: 100%;
  }

  .product-editor-modal .modal-card {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  .product-editor-modal .modal-body {
    overflow-x: hidden;
  }

  .product-editor-modal table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  .product-editor-modal th,
  .product-editor-modal td {
    padding: 8px 4px;
    font-size: 11px;
    line-height: 1.35;
  }

  .product-editor-modal th:nth-child(1),
  .product-editor-modal td:nth-child(1) {
    width: 16%;
  }

  .product-editor-modal th:nth-child(2),
  .product-editor-modal td:nth-child(2),
  .product-editor-modal th:nth-child(3),
  .product-editor-modal td:nth-child(3) {
    width: 25%;
  }

  .product-editor-modal th:nth-child(4),
  .product-editor-modal td:nth-child(4) {
    width: 34%;
  }

  .product-editor-modal td input[type="number"] {
    width: 100% !important;
    min-width: 0;
    padding: 8px 4px;
    font-size: 12px;
    text-align: center;
  }

  .product-editor-modal .admin-size-remove {
    width: 100%;
    min-width: 0;
    padding: 7px 4px;
    font-size: 10px;
    white-space: normal;
  }

  body:has(.admin-layout) {
    overflow-x: hidden;
  }

  .admin-layout {
    --admin-mobile-sidebar: 100px;
    display: block;
    width: 100%;
    min-height: 100dvh;
  }

  .admin-layout .sidebar {
    position: fixed;
    z-index: 80;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--admin-mobile-sidebar);
    height: 100dvh;
    min-height: 0;
    padding: 9px 7px 10px;
    overflow-x: hidden;
    overflow-y: auto;
    border-inline-end: 1px solid rgba(239, 208, 123, 0.22);
    box-shadow: -12px 0 28px rgba(2, 12, 25, 0.2);
    scrollbar-width: thin;
  }

  .admin-layout .sidebar .brand {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    margin-bottom: 9px;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
  }

  .admin-layout .sidebar .brand .logo svg,
  .admin-layout .sidebar .brand .logo img {
    width: 42px;
    height: 42px;
  }

  .admin-layout .sidebar .brand small {
    margin-top: 1px;
    font-size: 8.5px;
    line-height: 1.25;
  }

  .admin-layout .side-nav {
    display: grid;
    gap: 4px;
  }

  .admin-layout .side-nav button {
    width: 100%;
    min-height: 39px;
    padding: 6px 4px;
    border-radius: 10px;
    font-size: 10px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }

  .admin-layout .sidebar > div:last-child {
    margin-top: 10px !important;
  }

  .admin-layout .sidebar > div:last-child .btn {
    min-height: 0;
    padding: 7px 3px;
    border-radius: 9px;
    font-size: 9px;
    line-height: 1.3;
    white-space: normal;
  }

  .admin-layout .admin-main {
    width: calc(100% - var(--admin-mobile-sidebar));
    min-width: 0;
    min-height: 100dvh;
    height: auto;
    margin-right: var(--admin-mobile-sidebar);
    padding: 12px 8px 24px;
    overflow: visible;
  }

  .admin-layout .admin-view {
    width: 100%;
    min-width: 0;
  }

  .admin-layout .admin-head {
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }

  .admin-layout .admin-head h1 {
    font-size: 19px;
  }

  .admin-layout .admin-head .btn {
    padding: 8px 10px;
    font-size: 11px;
  }

  .admin-layout .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
  }

  .admin-layout .stat {
    min-width: 0;
    min-height: 68px;
    padding: 10px;
    border-radius: 13px;
  }

  .admin-layout .stat:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .admin-layout .stat .k {
    font-size: 10px;
    line-height: 1.35;
  }

  .admin-layout .stat .v {
    margin-top: 3px;
    font-size: 18px;
    line-height: 1.2;
  }

  .admin-layout .panel {
    min-width: 0;
    border-radius: 14px;
  }

  .admin-layout .panel-pad {
    padding: 10px;
  }

  .admin-layout .panel h3 {
    font-size: 14px;
  }

  .admin-layout .row-2,
  .admin-layout .row-3,
  .admin-layout .radio-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .admin-layout .field {
    margin-bottom: 9px;
  }

  .admin-layout .field label {
    margin-bottom: 4px;
    font-size: 11px;
  }

  .admin-layout .field .hint,
  .admin-layout .hint {
    font-size: 9.5px;
    line-height: 1.45;
  }

  .admin-layout input,
  .admin-layout select,
  .admin-layout textarea {
    min-width: 0;
    padding: 8px 9px;
    border-radius: 10px;
    font-size: 11.5px;
  }

  .admin-layout textarea {
    min-height: 74px;
  }

  .admin-layout .btn {
    gap: 5px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 11px;
  }

  .admin-layout .table-wrap {
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  .admin-layout .admin-card-table {
    display: block;
    width: 100%;
    min-width: 0 !important;
    border: 0 !important;
    background: transparent;
  }

  .admin-layout .admin-card-table thead {
    display: none;
  }

  .admin-layout .admin-card-table tbody {
    display: grid;
    gap: 8px;
  }

  .admin-layout .admin-card-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid rgba(201, 150, 53, 0.3);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 7px 18px rgba(2, 12, 25, 0.08);
  }

  .admin-layout .admin-card-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
    min-width: 0;
    padding: 5px 0 !important;
    border: 0;
    border-bottom: 1px solid rgba(10, 43, 75, 0.08);
    font-size: 10.5px;
    line-height: 1.45;
    text-align: start;
    white-space: normal;
  }

  .admin-layout .admin-card-table td:last-child {
    border-bottom: 0;
  }

  .admin-layout .admin-card-table td:first-child,
  .admin-layout .admin-card-table td:last-child,
  .admin-layout .admin-card-table td[colspan] {
    grid-column: 1 / -1;
  }

  .admin-layout .admin-card-table td::before {
    content: attr(data-label);
    flex: 0 0 38px;
    color: var(--muted);
    font-size: 8.5px;
    font-weight: 800;
    line-height: 1.45;
  }

  .admin-layout .admin-card-table td:first-child::before,
  .admin-layout .admin-card-table td:last-child::before {
    display: none;
  }

  .admin-layout .admin-card-table td:not([data-label])::before,
  .admin-layout .admin-card-table td[colspan]::before {
    display: none;
  }

  .admin-layout .admin-card-table td[colspan] {
    display: block;
    padding: 14px 6px !important;
    text-align: center !important;
  }

  .admin-layout .admin-card-table td > * {
    min-width: 0;
    max-width: 100%;
  }

  .admin-layout .admin-card-table .admin-size-cell {
    padding: 2px 7px;
    border-radius: 9px;
    font-size: 10px;
    line-height: 1.5;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .admin-layout .admin-card-table .table-actions {
    justify-content: flex-end;
    gap: 4px;
    width: 100%;
    min-width: 0;
    max-width: none;
    flex-wrap: wrap;
  }

  .admin-layout .admin-card-table .table-actions .btn,
  .admin-layout .admin-card-table .featured-toggle {
    min-width: 0;
    padding: 6px 7px;
    font-size: 9.5px;
    white-space: normal;
  }

  .admin-layout .admin-card-table .status-select {
    width: min(100%, 130px);
    padding: 6px 7px;
  }

  .admin-layout .customers-search-panel {
    margin-bottom: 10px;
  }

  .admin-layout .customers-search-row {
    gap: 7px;
  }

  .admin-layout .customers-count {
    font-size: 9.5px;
  }

  .admin-layout .modal-card,
  .admin-layout .customer-modal-card {
    width: calc(100vw - 14px);
    max-width: calc(100vw - 14px);
    max-height: calc(100dvh - 14px);
    border-radius: 16px;
  }

  .admin-layout .modal-head,
  .admin-layout .modal-foot {
    gap: 8px;
    padding: 10px 12px;
  }

  .admin-layout .modal-head h3 {
    font-size: 15px;
  }

  .admin-layout .modal-body {
    padding: 11px 12px;
    overflow-x: hidden;
  }

  .admin-layout .customer-modal-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .admin-layout .customer-modal-card .modal-head {
    flex: 0 0 auto;
    padding: 8px 10px;
  }

  .admin-layout .customer-modal-card .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px 10px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .admin-layout .customer-modal-card .row-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .admin-layout .customer-modal-card .field {
    margin-bottom: 7px;
  }

  .admin-layout .customer-modal-card textarea {
    min-height: 58px;
  }

  .admin-layout .customer-modal-card .modal-foot {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    padding: 8px 10px;
  }

  .admin-layout .modal-foot {
    flex-wrap: wrap;
  }

  .admin-layout .modal-foot .btn {
    flex: 1 1 110px;
  }

  @media (max-width: 360px) {
    .admin-layout {
      --admin-mobile-sidebar: 92px;
    }

    .admin-layout .sidebar {
      padding-inline: 5px;
    }

    .admin-layout .side-nav button {
      font-size: 9.25px;
    }

    .admin-layout .admin-main {
      padding-inline: 6px;
    }
  }
}