/* ============================================================
   Vadapav Franchise OMS — Core Stylesheet
   Direction: "Enamel stall board"

   Grounded in the hand-painted tin signage of Maharashtrian
   street stalls: a deep enamel-green ground, cream lettering,
   and a painted double-keyline border. The app runs light
   (butter-paper cream) so data stays legible; the enamel
   treatment is reserved for signage moments — hero, footer,
   auth, sidebar brand — so it reads as identity, not wallpaper.
   ============================================================ */

/* ---------- 1. Tokens ------------------------------------- */
:root {
  /* Enamel board greens — primary identity + actions */
  --enamel:        #0E4034;
  --enamel-mid:    #145244;
  --enamel-deep:   #072620;
  --enamel-tint:   #E4EDE9;

  /* Paper grounds */
  --butter:        #F6F0E2;   /* page — butter paper */
  --paper:         #FFFDF8;   /* cards — warm white */
  --paper-sunk:    #FBF6EA;   /* insets, table heads */

  /* Condiments — semantic accents */
  --chilli:        #C2361F;
  --chilli-tint:   #FBE9E5;
  --turmeric:      #E3A008;
  --turmeric-tint: #FDF2DA;
  --chutney:       #4F7F35;
  --chutney-tint:  #EAF2E4;

  /* Ink */
  --ink:           #16130F;
  --ink-soft:      #6B6357;
  --ink-faint:     #9C9384;
  --rule:          #E3D9C4;
  --rule-soft:     #EFE8D8;

  /* Type */
  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mr:      'Mukta', 'Tiro Devanagari Marathi', system-ui, sans-serif;
  --font-prose-mr:'Tiro Devanagari Marathi', 'Mukta', serif;

  /* Geometry — shallow radii; painted tin has soft, not round, corners */
  --radius:    6px;
  --radius-lg: 10px;
  --radius-sm: 4px;

  /* Depth — warm-tinted, never neutral grey */
  --shadow-sm: 0 1px 2px rgba(22,19,15,.05);
  --shadow:    0 2px 8px rgba(22,19,15,.07);
  --shadow-lg: 0 12px 32px rgba(22,19,15,.12);

  --wrap: 1180px;

  /* ---- Legacy aliases (existing markup references these) ---- */
  --primary:      var(--enamel);
  --saffron:      var(--turmeric);
  --saffron-lite: var(--turmeric-tint);
  --ivory:        var(--butter);
  --charcoal:     var(--ink);
  --muted:        var(--ink-soft);
  --border:       var(--rule);
  --white:        var(--paper);
  --red:          var(--chilli);
  --red-lite:     var(--chilli-tint);
  --green:        var(--chutney);
  --yellow:       var(--turmeric);
  --deep:         var(--enamel-deep);
}

/* ---------- 2. Reset -------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--butter);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Marathi gets its own face and more leading — Devanagari
   matras need the vertical room. */
body.lang-mr,
body.lang-mr .form-control,
body.lang-mr .btn { font-family: var(--font-mr); line-height: 1.75; }

img, svg { max-width: 100%; display: block; }
a { color: var(--enamel); text-decoration: none; }
a:hover { color: var(--enamel-mid); }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

/* Figures line up in tables and totals */
table, .num, .dash-card-num, .report-num,
.product-price, .cart-total-row, .hero-stat-num, .counter {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

::selection { background: var(--turmeric); color: var(--enamel-deep); }

:focus-visible {
  outline: 2px solid var(--turmeric);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 3. Typography --------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
body.lang-mr h1, body.lang-mr h2,
body.lang-mr h3, body.lang-mr h4 {
  font-family: var(--font-mr);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; }

/* Eyebrow — the small painted line above stall lettering */
.section-eyebrow, .hero-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--turmeric);
  margin-bottom: .7rem;
}
.section-eyebrow::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: var(--turmeric);
  margin-top: 6px;
}

.section-header { max-width: 660px; margin: 0 auto 2.6rem; text-align: center; }
.section-header .section-eyebrow::after { margin-left: auto; margin-right: auto; }
.section-header p { color: var(--ink-soft); margin-top: .7rem; }

/* ---------- 4. Layout ------------------------------------- */
.container, .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-sm { padding: clamp(2rem, 4vw, 3rem) 0; }

/* ---------- 5. Topbar + Navigation ------------------------ */
.topbar {
  background: var(--enamel-deep);
  color: rgba(246,240,226,.72);
  font-size: .8rem;
  padding: 7px 0;
}
.topbar a { color: rgba(246,240,226,.72); }
.topbar a:hover { color: var(--turmeric); }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

.lang-switcher { display: inline-flex; gap: 4px; align-items: center; }
.lang-switcher a { padding: 2px 9px; border-radius: 20px; font-weight: 500; line-height: 1.5; }
.lang-switcher a.active { background: var(--turmeric); color: var(--enamel-deep); font-weight: 700; }

.navbar {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 60;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; }

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--enamel);
  color: var(--butter);
  border-radius: var(--radius);
  font-size: 1.25rem;
  flex-shrink: 0;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: -.02em;
  color: var(--enamel);
  line-height: 1.1;
}

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  padding: 9px 13px;
  border-radius: var(--radius);
  font-size: .93rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  transition: background .16s, color .16s;
}
.nav-links a:hover { background: var(--enamel-tint); color: var(--enamel); }
.nav-links a.active { color: var(--enamel); font-weight: 700; }

.nav-links a.btn-nav-cta { background: var(--enamel); color: var(--butter); font-weight: 600; }
.nav-links a.btn-nav-cta:hover { background: var(--enamel-mid); color: var(--butter); }

.nav-toggle { display: none; font-size: 1.5rem; padding: 6px 10px; border-radius: var(--radius); color: var(--enamel); }

.cart-icon { position: relative; display: inline-flex; align-items: center; padding: 9px 12px; }
.cart-badge {
  position: absolute; top: 1px; right: 1px;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--chilli); color: #fff;
  border-radius: 20px;
  font-size: .68rem; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--paper);
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow);
    padding: 10px;
    gap: 2px;
    display: none;
  }
  .nav-links.open,
  .nav-links.active { display: flex; }
  .nav-links a { padding: 12px 14px; }
}

/* ---------- 6. Hero — the enamel board -------------------- */
.hero {
  position: relative;
  background: var(--enamel);
  color: var(--butter);
  padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}
/* Signature: the painted keyline, inset like a real tin board */
.hero::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 2px solid rgba(246,240,226,.28);
  border-radius: var(--radius);
  pointer-events: none;
  z-index: 1;
}
/* Enamel sheen, off-centre so it reads as light falling on tin */
.hero::after {
  content: "";
  position: absolute;
  width: 55vw; height: 55vw;
  top: -22vw; right: -14vw;
  background: radial-gradient(circle, rgba(227,160,8,.16) 0%, transparent 68%);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 2; max-width: 720px; }
.hero h1 { color: var(--butter); margin-bottom: 1rem; }
.hero-sub {
  font-size: clamp(1rem, 1.8vw, 1.16rem);
  color: rgba(246,240,226,.82);
  max-width: 56ch;
  margin-bottom: 2rem;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-stats {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 26px 28px;
  margin-top: 3rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(246,240,226,.22);
}
.hero-stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 800;
  color: var(--turmeric);
  line-height: 1;
}
.hero-stat-label {
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(246,240,226,.66);
  margin-top: .45rem;
}

/* Interior page header — quieter sibling of the hero */
.page-hero {
  background: var(--enamel);
  color: var(--butter);
  padding: clamp(2.4rem, 5vw, 3.6rem) 0;
  position: relative;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 10px;
  border: 1.5px solid rgba(246,240,226,.22);
  border-radius: var(--radius);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: var(--butter); }
.page-hero p { color: rgba(246,240,226,.78); margin-top: .6rem; max-width: 60ch; }

.breadcrumb { font-size: .84rem; color: rgba(246,240,226,.6); margin-bottom: .7rem; }
.breadcrumb a { color: rgba(246,240,226,.85); }
.breadcrumb a:hover { color: var(--turmeric); }

/* ---------- 7. Stats bar ---------------------------------- */
.stats-bar { background: var(--paper); border-block: 1px solid var(--rule); padding: 2.2rem 0; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; text-align: center; }
.stat-item .counter, .stat-item .num {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  font-weight: 800;
  color: var(--enamel);
  line-height: 1;
  display: block;
}
.stat-item .label {
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: .5rem;
}

/* ---------- 8. Cards + features --------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-sunk);
}
.card-header h3 { font-size: 1.02rem; }
.card-body { padding: 20px; }
.card-footer { padding: 14px 20px; border-top: 1px solid var(--rule); background: var(--paper-sunk); }

.features-grid, .values-grid, .about-grid, .contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.about-grid, .contact-grid { align-items: start; }

.feature-card, .value-item {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.feature-card:hover, .value-item:hover {
  border-color: var(--enamel);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.feature-card h3, .value-item h3 { margin-bottom: .5rem; }
.feature-card p, .value-item p { color: var(--ink-soft); font-size: .94rem; }
.feature-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--enamel-tint);
  border-radius: var(--radius);
  font-size: 1.4rem;
  margin-bottom: 14px;
}

.about-visual {
  background: var(--enamel);
  color: var(--butter);
  border-radius: var(--radius-lg);
  padding: 34px;
  display: grid;
  place-items: center;
  min-height: 240px;
  font-size: 4rem;
}

/* ---------- 9. Process steps ------------------------------ */
/* Numbered because franchise onboarding genuinely is a
   sequence — the order is information, not ornament. */
.franchise-steps { display: grid; counter-reset: step; }
.franchise-step, .step {
  display: flex;
  gap: 18px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--rule-soft);
  align-items: flex-start;
}
.franchise-steps > :last-child { border-bottom: none; }
.step-number {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 2px solid var(--enamel);
  color: var(--enamel);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.step-content h4 { margin-bottom: .3rem; }
.step-content p { color: var(--ink-soft); font-size: .93rem; }

/* ---------- 10. Products + menu --------------------------- */
.category-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 2rem; }
.cat-tab {
  padding: 8px 16px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 40px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: all .16s;
}
.cat-tab:hover { border-color: var(--enamel); color: var(--enamel); }
.cat-tab.active { background: var(--enamel); border-color: var(--enamel); color: var(--butter); font-weight: 600; }

.products-grid, .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 18px;
}
.product-group { margin-bottom: 2.6rem; }

.product-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.product-card:hover { border-color: var(--enamel); box-shadow: var(--shadow); transform: translateY(-2px); }

.product-img {
  height: 132px;
  display: grid; place-items: center;
  font-size: 3rem;
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--rule-soft);
}
.product-body { padding: 15px 16px; flex: 1; }
.product-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin-bottom: .3rem; }
body.lang-mr .product-name { font-family: var(--font-mr); }
.product-desc { font-size: .84rem; color: var(--ink-soft); line-height: 1.5; }

.product-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--rule-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.product-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12rem;
  color: var(--enamel);
}
.add-to-cart {
  padding: 7px 14px;
  background: var(--enamel);
  color: var(--butter);
  border-radius: var(--radius);
  font-size: .84rem;
  font-weight: 600;
  transition: background .16s;
}
.add-to-cart:hover { background: var(--enamel-mid); color: var(--butter); }

/* Stock-request tile */
.req-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 15px;
  transition: border-color .18s;
}
.req-card:hover { border-color: var(--enamel); }
.req-card .prod-name { font-weight: 600; font-size: .93rem; margin-bottom: 3px; }
.req-card .prod-meta { font-size: .79rem; color: var(--ink-soft); margin-bottom: 11px; }
.req-card .qty-row { display: flex; align-items: center; gap: 8px; }
.req-card .qty-row .form-control { width: 88px; }
.stock-badge { font-size: .72rem; padding: 2px 8px; border-radius: 20px; font-weight: 600; }

/* ---------- 11. Cart / receipt ---------------------------- */
/* Set like the paper bill from a stall: dashed rules,
   right-aligned figures, the net line stamped in green. */
.cart-total-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  font-size: .92rem;
  color: var(--ink-soft);
  border-bottom: 1px dashed var(--rule);
}
.cart-total-row.net {
  border-bottom: none;
  border-top: 2px solid var(--enamel);
  margin-top: 6px;
  padding-top: 13px;
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 800;
  color: var(--enamel);
}

/* ---------- 12. Buttons ----------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s, transform .12s;
  white-space: nowrap;
}
body.lang-mr .btn { font-family: var(--font-mr); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--enamel); color: var(--butter); border-color: var(--enamel); }
.btn-primary:hover { background: var(--enamel-mid); border-color: var(--enamel-mid); color: var(--butter); }

.btn-outline { background: transparent; color: var(--enamel); border-color: var(--rule); }
.btn-outline:hover { border-color: var(--enamel); background: var(--enamel-tint); color: var(--enamel); }

/* On the enamel ground the primary flips to turmeric — an enamel
   button on an enamel field is invisible. */
.hero .btn-primary, .page-hero .btn-primary, .auth-wrap .btn-primary {
  background: var(--turmeric);
  border-color: var(--turmeric);
  color: var(--enamel-deep);
}
.hero .btn-primary:hover, .page-hero .btn-primary:hover, .auth-wrap .btn-primary:hover {
  background: #F2B325;
  border-color: #F2B325;
  color: var(--enamel-deep);
}

/* On the enamel ground the outline flips to cream */
.hero .btn-outline, .page-hero .btn-outline, .auth-wrap .btn-outline {
  color: var(--butter);
  border-color: rgba(246,240,226,.45);
}
.hero .btn-outline:hover, .page-hero .btn-outline:hover {
  background: rgba(246,240,226,.12);
  border-color: var(--butter);
  color: var(--butter);
}

.btn-dark  { background: var(--enamel-deep); color: var(--butter); border-color: var(--enamel-deep); }
.btn-dark:hover { background: var(--enamel); color: var(--butter); }
.btn-green { background: var(--chutney); color: #fff; border-color: var(--chutney); }
.btn-green:hover { background: #446E2D; border-color: #446E2D; color: #fff; }
.btn-red   { background: var(--chilli); color: #fff; border-color: var(--chilli); }
.btn-red:hover { background: #A32C19; border-color: #A32C19; color: #fff; }

.btn-sm  { padding: 6px 12px; font-size: .82rem; }
.btn-lg  { padding: 14px 28px; font-size: 1rem; }
.btn-block { display: flex; width: 100%; }

/* ---------- 13. Forms ------------------------------------- */
.form-group { margin-bottom: 16px; }
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 16px;
}
.form-label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.req { color: var(--chilli); }

.form-control {
  display: block;
  width: 100%;
  padding: 10px 13px;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  font-size: .94rem;
  color: var(--ink);
  transition: border-color .16s, box-shadow .16s;
}
.form-control::placeholder { color: var(--ink-faint); }
.form-control:hover { border-color: var(--ink-faint); }
.form-control:focus {
  outline: none;
  border-color: var(--enamel);
  box-shadow: 0 0 0 3px rgba(14,64,52,.11);
}
textarea.form-control { resize: vertical; min-height: 96px; line-height: 1.6; }
select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B6357' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
}
.form-hint, .hint { font-size: .8rem; color: var(--ink-soft); margin-top: 5px; }

.search-bar {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 20px;
}

.quick-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.quick-filter {
  padding: 5px 13px;
  border: 1px solid var(--rule);
  border-radius: 40px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--paper);
  transition: all .16s;
}
.quick-filter:hover { border-color: var(--enamel); color: var(--enamel); }
.quick-filter.active { background: var(--enamel); border-color: var(--enamel); color: var(--butter); font-weight: 600; }

/* ---------- 14. Badges + status --------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 40px;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--rule-soft);
  color: var(--ink-soft);
}
.badge-green  { background: var(--chutney-tint);  color: #3B6127; }
.badge-red    { background: var(--chilli-tint);   color: #8F2716; }
.badge-yellow { background: var(--turmeric-tint); color: #8A6104; }
.badge-orange { background: var(--turmeric-tint); color: #8A6104; }
.badge-blue   { background: var(--enamel-tint);   color: var(--enamel); }
.badge-grey   { background: var(--rule-soft);     color: var(--ink-soft); }

/* Status colour is driven off the data attribute, so a status
   never has to be styled by hand at each call site. */
[data-status="placed"]     { background: var(--enamel-tint);   color: var(--enamel); }
[data-status="confirmed"]  { background: var(--enamel-tint);   color: var(--enamel); }
[data-status="preparing"]  { background: var(--turmeric-tint); color: #8A6104; }
[data-status="dispatched"] { background: var(--turmeric-tint); color: #8A6104; }
[data-status="delivered"]  { background: var(--chutney-tint);  color: #3B6127; }
[data-status="cancelled"]  { background: var(--chilli-tint);   color: #8F2716; }
[data-status="pending"]    { background: var(--turmeric-tint); color: #8A6104; }
[data-status="paid"]       { background: var(--chutney-tint);  color: #3B6127; }
[data-status="partial"]    { background: var(--turmeric-tint); color: #8A6104; }
[data-status="refunded"]   { background: var(--rule-soft);     color: var(--ink-soft); }

/* ---------- 15. Alerts ------------------------------------ */
.alert {
  padding: 13px 16px;
  border-radius: var(--radius);
  border-left: 3px solid;
  font-size: .91rem;
  margin-bottom: 16px;
}
.alert-error, .alert.error     { background: var(--chilli-tint);   border-color: var(--chilli);   color: #8F2716; }
.alert-success, .alert.success { background: var(--chutney-tint);  border-color: var(--chutney);  color: #3B6127; }
.alert-info, .alert.info       { background: var(--enamel-tint);   border-color: var(--enamel);   color: var(--enamel); }
.alert-warning                 { background: var(--turmeric-tint); border-color: var(--turmeric); color: #8A6104; }

/* Floating flash message */
.msg {
  position: fixed;
  top: 18px; right: 18px;
  z-index: 300;
  max-width: 380px;
  padding: 13px 18px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: .91rem;
  font-weight: 500;
  animation: msg-in .25s ease-out;
}
.msg.success { background: var(--chutney); color: #fff; }
.msg.error   { background: var(--chilli);  color: #fff; }
.msg.info    { background: var(--enamel);  color: var(--butter); }
@keyframes msg-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ---------- 16. Tables ------------------------------------ */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
thead th {
  text-align: left;
  padding: 11px 14px;
  background: var(--paper-sunk);
  border-bottom: 1.5px solid var(--rule);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .14s; }
tbody tr:hover { background: var(--paper-sunk); }
.tbl-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.pagination { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.page-link {
  min-width: 34px;
  padding: 6px 11px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: .87rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-align: center;
  transition: all .16s;
}
.page-link:hover { border-color: var(--enamel); color: var(--enamel); }
.page-link.active { background: var(--enamel); border-color: var(--enamel); color: var(--butter); font-weight: 700; }

/* ---------- 17. Modals ------------------------------------ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7,38,32,.55);
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 16px;
  overflow-y: auto;
}
.modal-overlay.open,
.modal-overlay.active { display: flex; }
.modal {
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  padding: 24px;
  animation: modal-in .22s ease-out;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(-14px) scale(.99); } to { opacity: 1; transform: none; } }
.modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.modal-close {
  font-size: 1.2rem;
  color: var(--ink-soft);
  width: 30px; height: 30px;
  border-radius: var(--radius);
  display: grid; place-items: center;
}
.modal-close:hover { background: var(--chilli-tint); color: var(--chilli); }

/* ---------- 18. Order tracking ---------------------------- */
.track-steps {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  position: relative;
  margin: 2rem 0;
}
.track-steps::before {
  content: "";
  position: absolute;
  top: 21px; left: 8%; right: 8%;
  height: 2px;
  background: var(--rule);
  z-index: 0;
}
.track-steps > * { position: relative; z-index: 1; flex: 1; text-align: center; }
.track-step-dot {
  width: 42px; height: 42px;
  margin: 0 auto 9px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--rule);
  font-size: 1.1rem;
  color: var(--ink-faint);
  transition: all .2s;
}
.track-step-dot.active, .active > .track-step-dot, .active .track-step-dot {
  background: var(--enamel);
  border-color: var(--enamel);
  color: var(--butter);
}
.track-step-label { font-size: .79rem; color: var(--ink-soft); line-height: 1.35; }
.active > .track-step-label, .active .track-step-label { color: var(--enamel); font-weight: 700; }

@media (max-width: 640px) {
  .track-steps { flex-direction: column; gap: 18px; }
  .track-steps::before { top: 8%; bottom: 8%; left: 21px; right: auto; width: 2px; height: auto; }
  .track-steps > * { display: flex; align-items: center; gap: 14px; text-align: left; }
  .track-step-dot { margin: 0; flex-shrink: 0; }
}

/* ---------- 19. Auth screens ------------------------------ */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  background: var(--enamel);
  position: relative;
}
.auth-wrap::before {
  content: "";
  position: absolute; inset: 16px;
  border: 2px solid rgba(246,240,226,.16);
  border-radius: var(--radius-lg);
  pointer-events: none;
}
.auth-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 34px 30px;
}
.auth-logo {
  width: 54px; height: 54px;
  margin: 0 auto 16px;
  display: grid; place-items: center;
  background: var(--enamel);
  color: var(--butter);
  border-radius: var(--radius-lg);
  font-size: 1.7rem;
}
.auth-title { text-align: center; font-size: 1.5rem; margin-bottom: .35rem; }
.auth-sub { text-align: center; color: var(--ink-soft); font-size: .9rem; margin-bottom: 24px; }
.auth-switch {
  text-align: center;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: .89rem;
  color: var(--ink-soft);
}
.auth-switch a { font-weight: 600; }

/* ---------- 20. Contact ----------------------------------- */
.contact-info-item { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.contact-info-icon {
  width: 42px; height: 42px;
  flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--enamel-tint);
  border-radius: var(--radius);
  font-size: 1.15rem;
}
.contact-info-detail h4 { font-size: .92rem; margin-bottom: 2px; }
.contact-info-detail p, .contact-info-detail a { color: var(--ink-soft); font-size: .91rem; }
.contact-info-detail a:hover { color: var(--enamel); }

/* ---------- 21. Footer — enamel board again --------------- */
.footer {
  background: var(--enamel-deep);
  color: rgba(246,240,226,.68);
  padding: 3.4rem 0 0;
  font-size: .91rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 34px;
  padding-bottom: 2.4rem;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; } }
.footer-brand .brand-name { color: var(--butter); font-size: 1.24rem; }
.footer-brand p { margin-top: .8rem; max-width: 40ch; }
.footer-col h4 {
  color: var(--butter);
  font-size: .8rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer-col ul { display: grid; gap: 9px; }
.footer-col a { color: rgba(246,240,226,.68); }
.footer-col a:hover { color: var(--turmeric); }
.footer-bottom {
  border-top: 1px solid rgba(246,240,226,.14);
  padding: 1.3rem 0;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: .85rem;
  color: rgba(246,240,226,.5);
}

/* ---------- 22. Utilities --------------------------------- */
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.w-100 { width: 100%; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--ink-soft); }
.text-green { color: var(--chutney); }
.text-saffron { color: var(--turmeric); }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.gap-2 { gap: 8px; }  .gap-3 { gap: 16px; }
.mb-0 { margin-bottom: 0; }     .mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }   .mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }
.mt-2 { margin-top: 8px; }      .mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.p-2 { padding: 8px; }

.green { color: var(--chutney); }
.red   { color: var(--chilli); }
.blue  { color: var(--enamel); }

/* ---------- 23. Print ------------------------------------- */
@media print {
  .no-print, .navbar, .topbar, .footer,
  .admin-sidebar, .admin-topbar, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .admin-main { margin-left: 0 !important; }
  .admin-content { padding: 0 !important; }
  .card, .chart-wrap { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  a { text-decoration: none; color: #000; }
}

/* ---------- 24. Devanagari corrections --------------------- */
/* text-transform: uppercase is a no-op in Devanagari, and
   letter-spacing pulls conjuncts and matras apart. Both are
   stripped wherever the Latin styling relies on them. */
body.lang-mr .section-eyebrow,
body.lang-mr .hero-eyebrow,
body.lang-mr .hero-stat-label,
body.lang-mr .stat-item .label,
body.lang-mr .footer-col h4,
body.lang-mr thead th,
body.lang-mr .dash-card-label,
body.lang-mr .report-label,
body.lang-mr .sidebar-section-label,
body.lang-mr .badge,
body.lang-mr .quick-filter {
  text-transform: none;
  letter-spacing: 0;
}
/* Eyebrows lose their uppercase weight cue, so restore emphasis */
body.lang-mr .section-eyebrow,
body.lang-mr .hero-eyebrow { font-family: var(--font-mr); font-size: .85rem; font-weight: 700; }
body.lang-mr thead th,
body.lang-mr .sidebar-section-label { font-size: .8rem; }
body.lang-mr .hero-stat-label,
body.lang-mr .stat-item .label { font-size: .84rem; }

/* ============================================================
   12. v5 — icons, hero plate, cart stepper, product media
   Extends the enamel-board direction rather than replacing it:
   same greens, same shallow radii, same painted keyline.
   ============================================================ */

/* ---------- 12.1 Inline SVG icons -------------------------- */
/* Icons inherit colour from their context and sit on the text
   baseline, so they can be dropped inside buttons and links
   without knocking the line box around. */
.ic {
  display: inline-block;
  vertical-align: -0.18em;
  flex: none;
  stroke: currentColor;
}
.btn .ic { vertical-align: -0.2em; margin-right: 2px; }
.btn .ic:only-child { margin-right: 0; }
.brand-mark { color: var(--turmeric); }

/* ---------- 12.2 Top bar contact links --------------------- */
.topbar-contact { display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.topbar-contact a { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- 12.3 Hero signage plate ------------------------ */
/* The hero right-hand side used to be empty enamel. This is the
   painted stall board that belongs there — same double keyline
   as the section frame, so it reads as part of the signage. */
.hero .container { position: relative; }
.hero-plate {
  position: absolute;
  top: 50%; right: 0;
  transform: translateY(-50%);
  width: 290px;
  z-index: 2;
  pointer-events: none;
}
.plate-board {
  background: linear-gradient(165deg, var(--enamel-mid), var(--enamel-deep));
  border: 2px solid rgba(246,240,226,.30);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px rgba(7,38,32,.42), inset 0 0 0 5px rgba(7,38,32,.55);
  padding: 26px 22px;
  text-align: center;
  color: var(--butter);
}
.plate-rule { height: 1px; background: rgba(246,240,226,.26); margin: 14px 0; }
.plate-mark { display: grid; place-items: center; color: var(--turmeric); }
.plate-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.22rem;
  line-height: 1.25;
  margin-top: 10px;
}
body.lang-mr .plate-name { font-family: var(--font-mr); }
.plate-since {
  font-size: .68rem;
  letter-spacing: .16em;
  color: rgba(246,240,226,.62);
  margin-top: 5px;
}
.plate-price { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.plate-price span { font-size: .78rem; color: rgba(246,240,226,.65); }
.plate-price strong {
  font-family: var(--font-display);
  font-size: 2.1rem;
  color: var(--turmeric);
  line-height: 1;
}
@media (max-width: 1080px) { .hero-plate { display: none; } }

/* ---------- 12.4 Feature + testimonial icons --------------- */
.feature-icon { color: var(--enamel); }
.feature-icon .ic { width: 24px; height: 24px; }
.stars { display: flex; gap: 3px; margin-bottom: 13px; color: var(--turmeric); }
.stars .ic { fill: currentColor; stroke-width: 1; }

/* ---------- 12.5 Product media ----------------------------- */
/* Photos when they exist, a lettered tile when they do not.
   Emoji placeholders read as unfinished work. */
.product-img { position: relative; overflow: hidden; padding: 0; }
.product-img img { width: 100%; height: 100%; object-fit: cover; }
.product-img-fallback {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--enamel);
  opacity: .26;
  background:
    repeating-linear-gradient(135deg,
      transparent 0 9px, rgba(14,64,52,.045) 9px 18px);
  width: 100%; height: 100%;
  display: grid; place-items: center;
}
.product-tag {
  position: absolute; top: 10px; left: 10px;
  background: var(--chutney); color: #fff;
  font-size: .66rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 100px;
}
.product-cat {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
body.lang-mr .product-cat { letter-spacing: .02em; text-transform: none; font-size: .76rem; }
.product-min { font-size: .76rem; color: var(--turmeric); font-weight: 600; margin-top: 5px; }
.product-price small { font-size: .72rem; font-weight: 500; color: var(--ink-faint); }
.add-to-cart.is-added { background: var(--chutney) !important; border-color: var(--chutney) !important; }
.no-results { grid-column: 1 / -1; text-align: center; color: var(--ink-soft); padding: 2.5rem 0; }

/* ---------- 12.6 Order page search ------------------------- */
.order-search { position: relative; margin-bottom: 14px; }
.order-search .ic {
  position: absolute; left: 13px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  pointer-events: none;
}
.order-search input { padding-left: 40px; }
.order-search input::-webkit-search-cancel-button { cursor: pointer; }

/* ---------- 12.7 Cart lines + quantity stepper ------------- */
/* updateQty() existed in the cart model but nothing in the UI ever
   called it — you could only add one at a time and never reduce. */
.cart-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.cart-line:last-child { border-bottom: 0; }
.cart-line-name { font-weight: 600; font-size: .9rem; line-height: 1.3; }
.cart-line-meta { color: var(--ink-faint); font-size: .78rem; margin-top: 2px; }
.cart-line-amt { font-weight: 700; font-size: .92rem; min-width: 74px; text-align: right; }

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}
.qty-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  color: var(--enamel);
  transition: background .15s, color .15s;
}
.qty-btn:hover { background: var(--enamel-tint); }
.qty-btn[data-remove="1"] { color: var(--chilli); }
.qty-btn[data-remove="1"]:hover { background: var(--chilli-tint); }
.qty-input {
  width: 38px; height: 30px;
  text-align: center;
  border: 0;
  border-inline: 1px solid var(--rule);
  background: transparent;
  font-size: .86rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.qty-input:focus { outline: none; background: var(--turmeric-tint); }
.gst-note { color: var(--ink-faint); font-size: .78rem; font-weight: 500; }

.modal-summary {
  background: var(--paper-sunk);
  border: 1px solid var(--rule-soft);
  padding: 14px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.modal-summary-net {
  border-top: 1px dashed var(--rule);
  padding-top: 9px; margin-top: 9px;
  font-size: 1.06rem; font-weight: 800;
  color: var(--enamel);
}

/* ---------- 12.8 Flash message ----------------------------- */
.flash-msg { display: flex; align-items: center; gap: 10px; }
.flash-ico { display: inline-flex; flex: none; }
.flash-msg button { display: inline-flex; margin-left: auto; opacity: .6; }
.flash-msg button:hover { opacity: 1; }

/* ---------- 12.9 Footer contact list ----------------------- */
.footer-col ul li { display: flex; align-items: flex-start; gap: 8px; }
.footer-col ul li .ic { margin-top: 3px; flex: none; opacity: .65; }

/* ---------- 12.10 Inline POST action forms ----------------- */
/* Destructive actions are POST forms now, not links; they still need
   to sit inline in a table cell like the buttons they replaced. */
.inline-action { display: inline-block; margin: 0; }
.inline-action + .inline-action { margin-left: 5px; }

/* ---------- 12.11 Empty states ----------------------------- */
.empty-state {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  background: var(--paper);
  border: 1px dashed var(--rule);
  border-radius: var(--radius-lg);
  color: var(--ink-soft);
}
.empty-state .ic { color: var(--ink-faint); margin-bottom: 12px; }
.empty-state h3 { margin-bottom: .4rem; color: var(--ink); }
.empty-state p { max-width: 42ch; margin: 0 auto 1.2rem; font-size: .93rem; }

/* ---------- 12.12 Print ------------------------------------ */
@media print {
  .topbar, .navbar, .footer, .flash-msg, .no-print,
  .admin-sidebar, .admin-topbar, .admin-flash { display: none !important; }
  body { background: #fff; }
}

/* ---------- 12.13 Product card fitting --------------------- */
/* The footer holds a price and an "Add to Cart" button side by side.
   In a 230px grid track their combined min-content width was ~264px,
   so the card (overflow:hidden) clipped its own text. Let the footer
   wrap to a second line when the track is narrow instead of
   overflowing, and never let a long product name force the card wider
   than its column. */
.products-grid, .product-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}
.product-card { min-width: 0; }
.product-body, .product-footer { min-width: 0; }
.product-name, .product-cat, .product-desc {
  overflow-wrap: anywhere;
}
.product-footer { flex-wrap: wrap; row-gap: 10px; }
.product-price { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.add-to-cart { flex: 0 1 auto; min-width: 0; white-space: nowrap; }

/* Below the wrap point the button takes the full width, which is a
   larger tap target on a phone anyway. */
@media (max-width: 420px) {
  .product-footer { flex-direction: column; align-items: stretch; }
  .add-to-cart { justify-content: center; }
}

/* ---------- 12.14 Responsive split layouts ----------------- */
/* These were inline `grid-template-columns` with no media query, so a
   380px sidebar plus a 1fr main column forced ~540px of content onto
   a 390px phone and the whole page scrolled sideways. */
.split-main { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }
.split-360  { grid-template-columns: 1fr 360px; gap: 24px; }
.split-21   { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
.split-11   { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.cart-rail { position: sticky; top: 80px; }

@media (max-width: 980px) {
  .split-main, .split-360, .split-21 { grid-template-columns: 1fr; }
  /* Once stacked, a sticky cart would sit over the menu it belongs to */
  .cart-rail { position: static; }
}
@media (max-width: 560px) {
  .split-11 { grid-template-columns: 1fr; }
}

/* ---------- 12.15 Grid children must be allowed to shrink --- */
/* A grid item's default min-width is auto, i.e. min-content. A wide
   data table therefore forced its whole column open and the page
   scrolled sideways on phones, even though .table-responsive already
   had overflow-x:auto — the scroll container itself was being
   stretched. min-width:0 lets the column shrink so the table scrolls
   inside it, which is what the overflow rule was for. */
.split-main > *, .split-21 > *, .split-11 > *,
.dash-split > *, .dc-grid > * { min-width: 0; }

.chart-wrap, .panel, .card { min-width: 0; }
.table-responsive { max-width: 100%; }

/* ---------- 12.16 Edge-to-edge tables on narrow screens ----- */
/* The bleed that makes rows run to the panel edge adds 20px on each
   side. On a phone that is 40px the panel does not have, so the
   scroll container itself stuck out past the viewport. Below the
   breakpoint, drop the bleed and let the table scroll inside the
   panel instead of widening it. */
@media (max-width: 640px) {
  .chart-wrap > .table-responsive,
  .panel > .table-responsive { margin-inline: 0; }
  .chart-wrap > .table-responsive thead th:first-child,
  .chart-wrap > .table-responsive tbody td:first-child,
  .panel > .table-responsive thead th:first-child,
  .panel > .table-responsive tbody td:first-child { padding-left: 12px; }
  .chart-wrap > .table-responsive thead th:last-child,
  .chart-wrap > .table-responsive tbody td:last-child,
  .panel > .table-responsive thead th:last-child,
  .panel > .table-responsive tbody td:last-child { padding-right: 12px; }
}

/* ---------- 12.17 Icon slots on content pages -------------- */
.value-ico { display: inline-flex; color: var(--enamel); vertical-align: -.18em; margin-right: 4px; }
.about-visual { display: grid; place-items: center; color: var(--turmeric); }
.err-mark { display: grid; place-items: center; color: var(--turmeric); margin-bottom: 16px; }
.team-avatar {
  width: 62px; height: 62px;
  margin: 0 auto 12px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--enamel-tint);
  color: var(--enamel);
  font-family: var(--font-display);
  font-size: 1.6rem; font-weight: 800;
}
.contact-info-icon { display: inline-flex; color: var(--enamel); }
.auth-logo { display: grid; place-items: center; color: var(--turmeric); }
/* Back-arrow reuses the chevron, mirrored */
.ic.flip { transform: scaleX(-1); }
/* Order tracking step marks */
.track-step .ic, .step-number .ic { vertical-align: -.15em; }

/* ---------- 12.18 Totals inside a real table --------------- */
/* .cart-total-row sets display:flex, which is right for the div-based
   cart summary but destroys the column grid when the same class is put
   on a <tr> (the invoice/tracking item tables). Restore table layout
   there and align the figures under the amount column. */
tfoot tr.cart-total-row,
tbody tr.cart-total-row {
  display: table-row;
  border-bottom: none;
}
tfoot tr.cart-total-row > td,
tbody tr.cart-total-row > td {
  padding: 9px 14px;
  border-top: 1px dashed var(--rule);
  color: var(--ink-soft);
}
tfoot tr.cart-total-row > td:first-child { text-align: right; }
tfoot tr.cart-total-row > td:last-child {
  text-align: right;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
tfoot tr.cart-total-row.net > td {
  border-top: 2px solid var(--enamel);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--enamel);
  padding-top: 13px;
}
body.lang-mr tfoot tr.cart-total-row.net > td { font-family: var(--font-mr); }