:root {
  /* =========================================================
     BRAND
  ========================================================= */
  --sf-primary: #b5be34;
  --sf-primary-hover: #444d00;
  --sf-primary-soft: rgba(170, 196, 45, 0.12);
  --sf-primary-soft-strong: rgba(170, 196, 45, 0.22);
  --sf-primary-ink: #4f5f10;

  /* =========================================================
     NEUTRALS
  ========================================================= */
  --sf-white: #ffffff;
  --sf-black: #191919;

  --sf-grey-01: #f7f7f5;
  --sf-grey-02: #dedede;
  --sf-grey-03: #d9d9d9;
  --sf-grey-04: #c9c9c9;
  --sf-grey-05: #aeaeae;
  --sf-grey-06: #898989;
  --sf-grey-07: #696969;
  --sf-grey-08: #595959;
  --sf-grey-09: #393939;
  --sf-grey-10: #191919;

  /* =========================================================
     SURFACE / TEXT / BORDER
  ========================================================= */
  --sf-bg: var(--sf-grey-01);
  --sf-surface: var(--sf-white);
  --sf-text: var(--sf-grey-10);
  --sf-text-strong: var(--sf-grey-10);
  --sf-text-soft: var(--sf-grey-08);
  --sf-text-muted: var(--sf-grey-07);
  --sf-text-faint: var(--sf-grey-05);
  --sf-border: var(--sf-grey-02);
  --sf-border-strong: var(--sf-grey-04);

  /* =========================================================
     FEEDBACK / STATUS
  ========================================================= */
  --sf-success-bg: #edf7ea;
  --sf-success-text: #2f6b1f;

  --sf-warning-bg: #fff5df;
  --sf-warning-text: #8a5a00;

  --sf-danger-bg: #fff0f0;
  --sf-danger-text: #c53b3b;

  --sf-info-bg: #f3f6fb;
  --sf-info-text: #395274;

  --sf-stock-bg: #eef7e8;
  --sf-stock-text: #2f6b1f;

  --sf-out-bg: #f1f1f1;
  --sf-out-text: #6e6e6e;

  /* =========================================================
     TYPOGRAPHY
  ========================================================= */
  --font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --sf-text-xs: 0.75rem;
  --sf-text-sm: 0.85rem;
  --sf-text-md: 0.92rem;
  --sf-text-base: 1rem;
  --sf-text-lg: 1.125rem;
  --sf-text-xl: 1.25rem;
  --sf-text-2xl: 1.5rem;
  --sf-text-3xl: 2rem;
  --sf-text-4xl: 2.625rem;

  --sf-title-page: var(--sf-text-2xl);
  --sf-title-section: var(--sf-text-2xl);
  --sf-title-card: var(--sf-text-md);

  --sf-text-body: var(--sf-text-base);
  --sf-text-meta: var(--sf-text-sm);
  --sf-text-small: var(--sf-text-xs);

  --sf-text-button: var(--sf-text-md);
  --sf-text-button-mini: var(--sf-text-sm);

  --sf-lh-tight: 1.15;
  --sf-lh-snug: 1.25;
  --sf-lh-body: 1.55;
  --sf-lh-relaxed: 1.7;
  --sf-lh-reading: 1.8;

  --sf-fw-regular: 400;
  --sf-fw-medium: 500;
  --sf-fw-semibold: 600;
  --sf-fw-bold: 700;

  --sf-letter-tight: -0.03em;
  --sf-letter-normal: 0;
  --sf-letter-wide: 0.12em;

  /* =========================================================
     SPACING
  ========================================================= */
  --sf-space-2: 0.125rem;
  --sf-space-4: 0.25rem;
  --sf-space-6: 0.375rem;
  --sf-space-8: 0.5rem;
  --sf-space-10: 0.625rem;
  --sf-space-12: 0.75rem;
  --sf-space-14: 0.875rem;
  --sf-space-16: 1rem;
  --sf-space-20: 1.25rem;
  --sf-space-24: 1.5rem;
  --sf-space-32: 2rem;
  --sf-space-40: 2.5rem;
  --sf-space-60: 3.75rem;
  --sf-space-64: 4rem;
  --sf-space-80: 5rem;

  /* =========================================================
     RADIUS
  ========================================================= */
  --sf-radius-xs: 0.25rem;
  --sf-radius-s: 0.375rem;
  --sf-radius-sm: 0.5rem;
  --sf-radius-md: 0.75rem;
  --sf-radius-lg: 1rem;
  --sf-radius-xl: 1.25rem;
  --sf-radius-2xl: 1.5rem;
  --sf-radius-pill: 999rem;

  /* =========================================================
     SHADOW
  ========================================================= */
  --sf-shadow-sm: 0 0.125rem 0.25rem rgba(25, 25, 25, 0.03);

  /* =========================================================
     LAYOUT
  ========================================================= */
  --sf-shell: 75rem;
  --sf-header-height: 5.25rem;
  --sf-page-block-gap: 60px;
  --sf-page-block-gap-mobile: var(--sf-space-32);
  --sf-page-title-gap: 16px;

  /* =========================================================
     SECTION HEADER TOKENS
  ========================================================= */
  --sf-section-head-gap: var(--sf-space-16);
  --sf-section-head-margin-bottom: var(--sf-space-20);
  --sf-section-title-size: var(--sf-title-section);
  --sf-section-title-weight: var(--sf-fw-bold);
  --sf-section-title-letter-spacing: 0.02em;
  --sf-section-action-height: 2.5rem;
  --sf-section-action-padding-x: var(--sf-space-16);
  --sf-section-action-radius: var(--sf-radius-md);
  --sf-section-action-bg: var(--sf-grey-01);
  --sf-section-action-bg-hover: var(--sf-grey-02);
  --sf-section-action-text-size: var(--sf-text-button);
  --sf-section-action-text-weight: var(--sf-fw-bold);

  /* =========================================================
     PAGE HEADER TOKENS
  ========================================================= */
  --sf-page-head-gap: var(--sf-space-12);
  --sf-page-head-margin-bottom: var(--sf-space-24);
  --sf-page-title-size: clamp(1.5rem, 2.4vw, 2rem);
  --sf-page-title-weight: var(--sf-fw-semibold);
  --sf-page-title-letter-spacing: -0.04em;
  --sf-page-summary-size: var(--sf-text-base);
  --sf-page-summary-line-height: var(--sf-lh-reading);
  --sf-page-meta-size: var(--sf-text-md);

  /* keep backward compatibility for older files */
  --sf-shadow: var(--sf-shadow-sm);
  --sf-green: var(--sf-primary);
  --sf-green-hover: var(--sf-primary-hover);

  /* =========================================================
     INTERACTION
  ========================================================= */
  --sf-transition-fast: 0.18s ease;
  --sf-transition-base: 0.22s ease;
  --sf-focus-ring: 0 0 0 0.1875rem rgba(170, 196, 45, 0.22);
}

/* =========================================================
   RESET / GLOBAL
========================================================= */

html {
  box-sizing: border-box;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--sf-bg);
  color: var(--sf-text);
  font-family: var(--font-ui);
  font-size: var(--sf-text-body);
  font-weight: var(--sf-fw-regular);
  line-height: var(--sf-lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.sf-mini-cart-open {
  overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  border: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

a,
button,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: none;
  box-shadow: var(--sf-focus-ring);
}

/* =========================================================
   APP ROOT / LAYOUT FOUNDATION
========================================================= */

.sf-grocery {
  min-height: 100vh;
  background: var(--sf-bg);
  color: var(--sf-text);
  font-family: var(--font-ui);
}

.sf-shell {
  width: min(calc(100% - 2rem), var(--sf-shell));
  margin: 0 auto;
}

/* Reserved for real reusable internal stacked sections only */
.sf-section {
  padding: 0;
}

.sf-section--compact {
  padding-top: 0;
}

/* =========================================================
   INNER PAGE WRAPPER
========================================================= */

.sf-inner-page {
  padding-top: 40px;
}

/* =========================================================
   UNIVERSAL PAGE RHYTHM
========================================================= */

:where(
  .sf-about-page,
  .sf-contact-page,
  .sf-category-page,
  .sf-search-page,
  .sf-product-page,
  .sf-policy-page,
  .sf-account-page
) > * + * {
  margin-top: var(--sf-page-block-gap);
}

:where(
  .sf-about-page,
  .sf-contact-page,
  .sf-category-page,
  .sf-search-page,
  .sf-product-page,
  .sf-policy-page,
  .sf-account-page
) > :first-child {
  margin-top: 0;
  padding-top: 0;
}

/* =========================================================
   TYPOGRAPHY FOUNDATION
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--sf-text);
  font-family: var(--font-ui);
  font-weight: var(--sf-fw-semibold);
  line-height: var(--sf-lh-tight);
  letter-spacing: var(--sf-letter-tight);
}

p {
  margin: 0;
}

small {
  font-size: var(--sf-text-sm);
}

strong {
  font-weight: var(--sf-fw-semibold);
}

/* =========================================================
   GLOBAL TYPOGRAPHY CLASSES
========================================================= */

.sf-page-eyebrow {
  margin: 0;
  color: var(--sf-primary-ink);
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-fw-bold);
  letter-spacing: var(--sf-letter-wide);
  line-height: 1.3;
  text-transform: uppercase;
  margin-bottom: 20px;

}

.sf-page-title {
  margin: 0 0 var(--sf-page-title-gap);
  color: var(--sf-text);
  font-size: var(--sf-page-title-size);
  font-weight: var(--sf-page-title-weight);
  line-height: 1.02;
  letter-spacing: var(--sf-page-title-letter-spacing);
}

.sf-page-summary {
  margin: 0;
  color: var(--sf-text-soft);
  font-size: var(--sf-page-summary-size);
  font-weight: var(--sf-fw-regular);
  line-height: var(--sf-page-summary-line-height);
}

.sf-section-title {
  margin: 0;
  color: var(--sf-text);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: var(--sf-fw-semibold);
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.sf-block-title {
  margin: 0;
  color: var(--sf-text);
  font-size: var(--sf-text-xl);
  font-weight: var(--sf-fw-semibold);
  line-height: 1.3;
  letter-spacing: -0.02em;
}


.sf-body {
  margin: 0;
  color: var(--sf-text-soft);
  font-size: var(--sf-text-base);
  font-weight: var(--sf-fw-regular);
  line-height: var(--sf-lh-reading);
}

.sf-body-sm {
  margin: 0;
  color: var(--sf-text-soft);
  font-size: var(--sf-text-md);
  font-weight: var(--sf-fw-regular);
  line-height: 1.7;
}

.sf-meta {
  margin: 0;
  color: var(--sf-text-soft);
  font-size: var(--sf-page-meta-size);
  font-weight: var(--sf-fw-medium);
  line-height: 1.5;
}

.sf-label {
  margin: 0;
  color: var(--sf-text);
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-fw-semibold);
  line-height: 1.35;
}

.sf-text-soft {
  color: var(--sf-text-soft);
}

.sf-text-muted {
  color: var(--sf-text-muted);
}

.sf-text-faint {
  color: var(--sf-text-faint);
}

/* =========================================================
   SHARED BADGE / PILL FOUNDATION
========================================================= */

.sf-store-pill,
.sf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sf-space-6);
  min-height: 1.875rem;
  padding: 0 var(--sf-space-12);
  border-radius: var(--sf-radius-pill);
  background: var(--sf-primary-soft);
  color: var(--sf-primary-ink);
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-fw-semibold);
  line-height: 1;
}

.sf-badge--success {
  background: var(--sf-success-bg);
  color: var(--sf-success-text);
}

.sf-badge--warning {
  background: var(--sf-warning-bg);
  color: var(--sf-warning-text);
}

.sf-badge--danger {
  background: var(--sf-danger-bg);
  color: var(--sf-danger-text);
}

.sf-badge--info {
  background: var(--sf-info-bg);
  color: var(--sf-info-text);
}

.sf-badge--stock {
  background: var(--sf-stock-bg);
  color: var(--sf-stock-text);
}

.sf-badge--out {
  background: var(--sf-out-bg);
  color: var(--sf-out-text);
}

/* =========================================================
   GLOBAL SURFACE HELPERS
========================================================= */

.sf-card {
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-xl);
  box-shadow: var(--sf-shadow-sm);
}

.sf-card--flat {
  box-shadow: none;
}

.sf-card--highlight {
  border-color: var(--sf-primary);
}

/* =========================================================
   ACCESSIBLE / UTILITY STATES
========================================================= */

[disabled],
.is-disabled {
  cursor: not-allowed;
}

::placeholder {
  color: var(--sf-text-faint);
  opacity: 1;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 720px) {
  .sf-shell {
    width: min(calc(100% - 1.25rem), var(--sf-shell));
  }

  :where(
    .sf-about-page,
    .sf-contact-page,
    .sf-category-page,
    .sf-search-page,
    .sf-product-page,
    .sf-policy-page,
    .sf-account-page
  ) > * + * {
    margin-top: var(--sf-page-block-gap-mobile);
  }

  .sf-page-title {
    font-size: 36px;
  }

  .sf-page-summary {
    font-size: var(--sf-text-base);
  }

  .sf-section-title {
    font-size: clamp(1.4rem, 7vw, 1.8rem);
  }
}