/* ==========================================================================
   Savalan Kebab — Design System
   Source of truth: Figma file lD4rGNx5lo5DM5MOxlTUBM
   Tokens + reusable component primitives for the custom storefront.

   Conventions:
   - CSS custom properties are global (design tokens). Prefix: --svk-...  is
     avoided for brevity; token names mirror the Figma ramps.
   - Every component CLASS is prefixed `svk-` so it never collides with the
     Xtra parent theme, WooCommerce, or Elementor markup.
   - Intentionally NO global element/`body` resets — this file only styles
     elements we add, leaving the existing site untouched.
   ========================================================================== */

:root{
  /* --- Site grid ---------------------------------------------------------
     The header and footer are Elementor templates whose container
     (.e-con-inner) is `min(100%, 1360px)`, centred, with no padding. Every
     custom page must sit on that same grid or its cards look inset compared
     with the header/footer.

     We set the box to 1360 + 2×20 and add a 20px gutter, so the CONTENT edge
     lands exactly on the theme's 1360px grid on wide screens, while narrow
     screens still get breathing room instead of touching the edges. */
  --svk-page:1400px; --svk-gutter:20px;

  /* --- Primary Vibrant · flame orange (CTAs, price, active) --- */
  --flame-50:#FFF0E9; --flame-300:#F49A72; --flame:#FF8E5B; --flame-900:#642608;

  /* --- Structure · forest green (Redesign 2026: teal scale → deep forest) --- */
  --teal-50:#e9f1ee; --teal-100:#cfe2db; --teal-400:#5f8d81; --teal-500:#3f776a;
  --teal-600:#1f5e51; --teal-700:#0c5044; --teal:#00473c; --teal-900:#00332b;

  /* --- Secondary Pastel · sage (bands) → sweetgreen sage mist; ink headings --- */
  --sage-50:#eef3ea; --sage-200:#c9d6c4; --sage-300:#aebfa6; --sage-400:#93a389;
  --sage:#8B997D; --sage-900:#0e150e;

  /* --- First Primary · green (success / positive) --- */
  --green-50:#EDF6EE; --green-200:#A6D1AD; --green-300:#85BE90; --green:#146431;

  /* --- Cream / tertiary neutrals --- */
  --cream:#f4f3e7; --tertiary-50:#FEF2E3;

  /* ══ REDESIGN 2026 — sweetgreen system, warm flame accent ═══════════════
     A farm-stand aesthetic: cream canvas, deep-forest structure, sage/sand
     content bands, and Savalan's flame kept as the single warm accent (grilled,
     not salad). Buttons put DARK ink on flame — the sweetgreen treatment, which
     also lifts the old white-on-flame CTA from ~2.3:1 to ~8:1 contrast. */
  --sg-cream:#f4f3e7;      /* page canvas */
  --sg-forest:#00473c;     /* brand / structure: nav, footer, dark bands */
  --sg-forest-700:#00332b;
  --sg-ink:#0e150e;        /* text — near-black with a green undertone */
  --sg-sage:#d8e5d6;       /* content band 1 */
  --sg-sand:#e8dcc6;       /* content band 2 */
  --sg-flame:#FF8E5B;      /* the one warm accent (CTA fills) */
  --sg-flame-700:#e8703b;
  --sg-line:rgba(14,21,14,.14);
  --r-full:9999px;         /* pill buttons */
  --r-img:20px;            /* food photography + cards */
  --r-card-lg:24px;
  --sh-sg:3px 3px 32px -10px rgba(14,21,14,.34);
  --page:1200px;           /* sweetgreen content max-width */
  --band-pad:96px;         /* generous vertical rhythm */

  /* --- Text / neutral --- */
  --ink-900:#393939; --ink-600:#727272; --ink-100:#DDDDDD; --light:#F3F3F3;
  --surface-0:#FFFFFF; --surface-200:#ECEDEE; --surface-300:#CBCFD2;
  --surface-500:#8E979F; --surface-700:#4F575E;

  /* --- Semantic (Redesign 2026: forest focus, no AI-purple) --- */
  --error:#CB1B1B; --focus:#00473c;

  /* --- Type roles ---
     Redesign 2026: geometric grotesques replace Poppins/Roboto site-wide.
     Space Grotesk carries the calm 400-weight display voice; Hanken Grotesk
     is the clean text/UI face. Lobster stays only for the script wordmark. */
  --f-display:'Space Grotesk', 'Poppins', system-ui, sans-serif;
  --f-script:'Lobster', cursive;
  --f-head:'Space Grotesk', 'Poppins', system-ui, -apple-system, sans-serif;
  --f-body:'Hanken Grotesk', 'Roboto', system-ui, -apple-system, sans-serif;
  --f-form:'Hanken Grotesk', 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --f-slab:'Roboto Slab', Georgia, serif;

  /* --- Spacing (4px base) --- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px;

  /* --- Radius (Redesign 2026: fully-round pills, softer 16px cards) --- */
  --r-pill:9999px; --r-card:16px; --r-input:10px; --r-sm:10px;

  /* --- Elevation (Redesign 2026: flat sweetgreen; soft ink-tinted lift, no hard black) --- */
  --sh-btn:none;
  --sh-btn-inset:none;
  --sh-card:0 12px 30px -18px rgba(14,21,14,.20);
  --sh-header:0 10px 30px -18px rgba(14,21,14,.22);
  --sh-nav:0 -10px 30px -18px rgba(14,21,14,.16);

  /* --- Signature gradients (Redesign 2026: near-flat forest; flat flame CTA) --- */
  --grad-dark:linear-gradient(160deg,#00473c 0%,#00332b 100%);
  --grad-cta:linear-gradient(180deg,#FF8E5B 0%,#FF8E5B 100%);

  /* --- Motion --- */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms;
}

/* ==========================================================================
   Redesign 2026 — global base: cream canvas, ink text, geometric body font.
   Scoped to body so it lifts every page onto the new palette + type at once,
   while each surface's own layout is refreshed section by section.
   ========================================================================== */
/* Flat cream canvas on EVERY page. The `!important` + `html, body` deliberately
   overrides the theme's old customizer body background (an inline
   `html, body { background: radial-gradient(#F7F3EC → #642608) }` from the pre-
   redesign build). The homepage hid it behind its own .svk-home fill; the other
   pages have transparent wrappers, so without this they showed the stale gradient
   (warmer cream + a dark burnt-orange vignette) instead of the flat sweetgreen cream. */
html, body{background:var(--sg-cream) !important}
/* font-family is !important because the Xtra theme sets an inline body font
   (its Customizer typography = Nunito) that we no longer load — this makes our
   self-hosted Hanken Grotesk the real default for any non-component text too. */
body{color:var(--sg-ink); font-family:var(--f-body) !important; -webkit-font-smoothing:antialiased}
.svk-eyebrow{font-family:var(--f-body);text-transform:uppercase;letter-spacing:.05em;font-weight:700;font-size:14px;color:var(--sg-forest)}

/* ==========================================================================
   Typography helpers (opt-in — apply only where you add the class)
   ========================================================================== */
.svk-display{font-family:var(--f-display);color:var(--flame);line-height:.95}
.svk-h1{font-family:var(--f-head);font-weight:700;font-size:24px;line-height:29px;color:var(--teal-900)}
.svk-h2{font-family:var(--f-head);font-weight:700;font-size:20px;line-height:29px;color:var(--teal-900)}
.svk-h3{font-family:var(--f-head);font-weight:700;font-size:16px;line-height:20px;color:var(--teal-900)}
.svk-body{font-family:var(--f-body);font-weight:400;font-size:16px;line-height:1.7;color:var(--teal-700)}
.svk-small{font-family:var(--f-body);font-size:12px;line-height:15px;color:var(--teal-700)}
.svk-price{font-family:var(--f-head);font-weight:600;font-size:14px;color:var(--teal-900);
  font-variant-numeric:tabular-nums}
.svk-eyebrow{font-family:var(--f-form);text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--flame)}

/* ==========================================================================
   Buttons  ·  .svk-btn  (default = production primary: flame fill, Poppins)
   Variants: --stroke --text --grad --lg(56) --sm(40)   State: [disabled]
   ========================================================================== */
/* Redesign 2026: fully-round pill, flame fill, DARK ink label in Hanken 700.
   Dark-on-flame is the sweetgreen treatment AND fixes the old white-on-flame
   CTA (which failed WCAG at ~2.3:1; dark ink is ~8:1). Flat — no drop shadow. */
.svk-btn{
  font-family:var(--f-body); font-weight:700; font-size:16px; line-height:1;
  letter-spacing:.01em;
  color:var(--sg-ink); background:var(--sg-flame); border:none; border-radius:var(--r-full);
  height:52px; padding:0 28px; display:inline-flex; align-items:center; justify-content:center;
  gap:var(--s-2); cursor:pointer; box-shadow:none; text-decoration:none;
  transition:background var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.svk-btn:hover{background:var(--sg-flame-700); color:var(--sg-ink)}
.svk-btn:active{transform:scale(.98)}
.svk-btn:focus-visible{outline:2px solid var(--sg-ink); outline-offset:3px}
.svk-btn--lg{height:58px; font-size:18px; padding:0 34px}
.svk-btn--sm{height:42px; font-size:14px; padding:0 20px}
/* Secondary = forest outline pill (nav ORDER, secondary CTAs) */
.svk-btn--stroke{background:transparent; color:var(--sg-forest); border:2px solid var(--sg-forest); box-shadow:none}
.svk-btn--stroke:hover{background:var(--sg-forest); color:var(--sg-cream)}
.svk-btn--text{background:transparent; color:var(--sg-ink); box-shadow:none;padding:0}
.svk-btn--text:hover{background:transparent; color:var(--sg-forest); text-decoration:underline}
.svk-btn--grad{background:var(--sg-flame); color:var(--sg-ink); box-shadow:none}
.svk-btn--block{width:100%}
.svk-btn[disabled],.svk-btn.is-disabled{background:#F5F5F5; color:#C4C4C4; box-shadow:none; cursor:not-allowed; pointer-events:none}
.svk-btn--stroke[disabled]{background:transparent; border:1.5px solid #CBCBCB; color:#C4C4C4}

/* ==========================================================================
   Quantity / add stepper  ·  .svk-stepper  /  .svk-addbtn
   ========================================================================== */
.svk-stepper{
  display:inline-flex; align-items:center; gap:14px; height:40px; padding:0 14px;
  border-radius:var(--r-pill); background:#fff; box-shadow:var(--sh-btn);
  font-family:var(--f-head); font-weight:700; color:var(--teal-900);
}
.svk-stepper__val{min-width:16px; text-align:center; font-variant-numeric:tabular-nums}
.svk-stepper button{
  width:24px; height:24px; border-radius:50%; border:none; background:var(--flame-50);
  color:var(--flame-900); font-size:16px; font-weight:700; line-height:1; cursor:pointer;
  display:grid; place-items:center;
}
.svk-stepper button:disabled{opacity:.4; cursor:not-allowed}
.svk-stepper--active{background:var(--flame-50); border:2px solid var(--flame)}
.svk-addbtn{
  height:40px; padding:0 22px; border-radius:var(--r-pill); border:none;
  background:var(--sg-flame); color:var(--sg-ink); font-family:var(--f-body);
  font-weight:700; font-size:14px; cursor:pointer; box-shadow:none;
  transition:background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.svk-addbtn:hover{background:var(--sg-flame-700); color:var(--sg-ink)}
.svk-addbtn:active{transform:translateY(1px)}

/* ==========================================================================
   Form fields  ·  .svk-field
   ========================================================================== */
.svk-field{display:flex; flex-direction:column; gap:6px}
.svk-field label{font-family:var(--f-form); font-size:12px; color:var(--teal-700)}
.svk-field input,.svk-field select,.svk-field textarea{
  font-family:var(--f-form); font-size:15px; color:var(--sg-ink); background:#fff;
  border:1px solid var(--surface-300); border-radius:var(--r-input); padding:12px 15px;
  box-shadow:none; outline:none;
  transition:border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.svk-field input::placeholder{color:var(--surface-500)}
.svk-field input:focus,.svk-field select:focus,.svk-field textarea:focus{
  border-color:var(--sg-forest); box-shadow:0 0 0 3px rgba(0,71,60,.12)}
.svk-field--error input{border-color:#C92929}
.svk-field--error .svk-field__help{color:#C92929}
.svk-field__help{font-family:var(--f-form); font-size:10px; color:var(--teal-700)}
.svk-field--disabled input{background:var(--surface-200); color:var(--surface-500)}

/* ==========================================================================
   Card surface  ·  .svk-card
   ========================================================================== */
.svk-card{background:#fff; border:1px solid var(--surface-200); border-radius:var(--r-card); box-shadow:var(--sh-card)}

/* ==========================================================================
   Badges / pills  ·  .svk-pill
   ========================================================================== */
.svk-pill{font-family:var(--f-form); font-size:12px; font-weight:500; padding:5px 12px; border-radius:999px; display:inline-block}
.svk-pill--veg{background:var(--green-50); color:var(--green); border:1px solid var(--green-200)}
.svk-pill--hot{background:var(--flame-50); color:var(--flame-900)}
.svk-pill--new{background:var(--teal-50); color:var(--teal-700)}
.svk-pill--off{background:#FEEBEB; color:var(--error)}

/* Veg dot marker */
.svk-veg{width:16px; height:16px; border-radius:3px; border:1.5px solid var(--green);
  display:inline-grid; place-items:center; vertical-align:middle}
.svk-veg::after{content:""; width:7px; height:7px; border-radius:50%; background:var(--green)}

/* Star rating */
.svk-stars{color:#F5A623; letter-spacing:2px; font-size:15px; line-height:1}

/* ==========================================================================
   Utilities
   ========================================================================== */
.svk-tnum{font-variant-numeric:tabular-nums}
.svk-sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}