/*
 * Foodiamo brand palette.
 *
 * Loaded after the compiled cartzilla theme.css (see custom/resources/template/layouts/mini.blade.php).
 *
 * IMPORTANT: the _colors.scss files under resources/templates are regenerated from the store option "colors"
 * by AdvancedController@compile, which also rebuilds theme.css. Nothing in this file may depend on
 * a specific generated hex value. All overrides go through selectors and CSS custom properties, so
 * they stay valid after any recompilation.
 *
 * Layers:
 *   1.  Brand book colors    - the only six authoritative values
 *   2.  Derived scale        - every shade is a documented mix of two brand book colors
 *   3.  Cartzilla token map  - $theme-colors keys
 *   3b. Semantic colors      - success, info, danger, warning and their subtle triplets
 *   3c. Bootstrap system     - body, border, link, focus and surface variables
 *   3d. Component variables  - cartzilla tokens declared inside component rules
 *   4.  Literal hex patches  - values the Sass build compiled to fixed hexes
 *   5.  Component surfaces   - instance specific layout colors
 */

/* ---------------------------------------------------------------------------
 * Layer 1 - Foodiamo brand book (Księga Znaku, page "KOLORYSTYKA")
 * ------------------------------------------------------------------------ */

:root,
[data-bs-theme] {
  --fd-black: #000000;
  --fd-black-rgb: 0, 0, 0;

  --fd-white: #FFFFFF;
  --fd-white-rgb: 255, 255, 255;

  /* Złamana biel */
  --fd-cream: #E6E4DE;
  --fd-cream-rgb: 230, 228, 222;

  /* Butelkowy */
  --fd-bottle: #12251E;
  --fd-bottle-rgb: 18, 37, 30;

  /* Czerwony */
  --fd-red: #B4191C;
  --fd-red-rgb: 180, 25, 28;

  /* Zielony */
  --fd-green: #35794D;
  --fd-green-rgb: 53, 121, 77;

  /* -------------------------------------------------------------------------
   * Layer 2 - derived shades. No colour outside the brand book is introduced;
   * each value is a fixed-point mix of two brand book colours.
   * ---------------------------------------------------------------------- */

  /* Greens: brand green mixed with butelkowy or white */
  --fd-green-700: #2A603F; /* green 70% + bottle 30% - secondary actions, hover on primary */
  --fd-green-700-rgb: 42, 96, 63;

  --fd-green-600: var(--fd-green); /* brand green */
  --fd-green-600-rgb: var(--fd-green-rgb);

  /* Sanctioned lighter green for decorative use. Too light for white body text
   * (3.9:1), so do not use it as a background behind labels. */
  --fd-green-500: #538D68; /* green 85% + white 15% */
  --fd-green-500-rgb: 83, 141, 104;

  --fd-green-300: #86AF94; /* green 60% + white 40% - links on dark surfaces */
  --fd-green-300-rgb: 134, 175, 148;

  --fd-green-100: #E1EBE4; /* green 15% + white 85% - success surfaces */
  --fd-green-100-rgb: 225, 235, 228;

  /* Neutrals: butelkowy mixed with złamana biel, so greys stay warm and on brand */
  --fd-neutral-900: var(--fd-bottle);
  --fd-neutral-900-rgb: var(--fd-bottle-rgb);

  --fd-neutral-800: #32423B; /* bottle 85% + cream 15% - body text */
  --fd-neutral-800-rgb: 50, 66, 59;

  --fd-neutral-700: #525E58; /* bottle 70% + cream 30% - muted text, AA on white, #F0EFEB and cream */
  --fd-neutral-700-rgb: 82, 94, 88;

  --fd-neutral-500: #7C847E; /* bottle 50% + cream 50% - dividers and decorative icons */
  --fd-neutral-500-rgb: 124, 132, 126;

  --fd-neutral-400: #919891; /* bottle 40% + cream 60% */
  --fd-neutral-400-rgb: 145, 152, 145;

  --fd-neutral-300: #B1B4AE; /* bottle 25% + cream 75% */
  --fd-neutral-300-rgb: 177, 180, 174;

  --fd-neutral-200: #CDCDC7; /* bottle 12% + cream 88% - borders */
  --fd-neutral-200-rgb: 205, 205, 199;

  --fd-neutral-100: #D9D9D2; /* bottle 6% + cream 94% */
  --fd-neutral-100-rgb: 217, 217, 210;

  --fd-neutral-050: #F0EFEB; /* cream 60% + white 40% - subtle sections */
  --fd-neutral-050-rgb: 240, 239, 235;

  /* Reds */
  --fd-red-700: #901416; /* red 80% + black 20% - hover on destructive actions */
  --fd-red-700-rgb: 144, 20, 22;

  --fd-red-600: var(--fd-red); /* brand red */
  --fd-red-600-rgb: var(--fd-red-rgb);

  --fd-red-100: #F6E3E4; /* red 12% + white 88% - error and attention surfaces */
  --fd-red-100-rgb: 246, 227, 228;

  /* -------------------------------------------------------------------------
   * Layer 3 - cartzilla $theme-colors keys.
   * The full key set from App\Template::getColors() is covered so that a
   * regenerated _colors.scss cannot leak the upstream cartzilla palette.
   * Both --cz-{key} and --cz-{key}-rgb are required: utilities read the RGB pair.
   * ---------------------------------------------------------------------- */

  --cz-primary: var(--fd-green-600);
  --cz-primary-rgb: var(--fd-green-600-rgb);

  /* Deep green. Kept darker than primary so white labels stay legible on solid
   * secondary surfaces such as the main menu bar. */
  --cz-secondary: var(--fd-green-700);
  --cz-secondary-rgb: var(--fd-green-700-rgb);

  --cz-negative: var(--fd-bottle);
  --cz-negative-rgb: var(--fd-bottle-rgb);

  --cz-dark: var(--fd-bottle);
  --cz-dark-rgb: var(--fd-bottle-rgb);

  --cz-black: var(--fd-black);
  --cz-black-rgb: var(--fd-black-rgb);

  --cz-white: var(--fd-white);
  --cz-white-rgb: var(--fd-white-rgb);

  --cz-green: var(--fd-green-600);
  --cz-green-rgb: var(--fd-green-600-rgb);

  --cz-red: var(--fd-red-600);
  --cz-red-rgb: var(--fd-red-600-rgb);

  --cz-sale: var(--fd-red-600);
  --cz-sale-rgb: var(--fd-red-600-rgb);

  /* Cartzilla accents with no brand book equivalent - folded into the brand green */
  --cz-blue: var(--fd-green-600);
  --cz-blue-rgb: var(--fd-green-600-rgb);

  --cz-cyan: var(--fd-green-600);
  --cz-cyan-rgb: var(--fd-green-600-rgb);

  /* Grey ramp mapped onto the warm neutral scale */
  --cz-gray-1: var(--fd-cream);
  --cz-gray-1-rgb: var(--fd-cream-rgb);

  --cz-gray-2: var(--fd-neutral-800);
  --cz-gray-2-rgb: var(--fd-neutral-800-rgb);

  --cz-gray-3: var(--fd-neutral-100);
  --cz-gray-3-rgb: var(--fd-neutral-100-rgb);

  --cz-gray-4: var(--fd-neutral-200);
  --cz-gray-4-rgb: var(--fd-neutral-200-rgb);

  --cz-gray-5: var(--fd-neutral-700);
  --cz-gray-5-rgb: var(--fd-neutral-700-rgb);

  --cz-gray-6: var(--fd-neutral-700);
  --cz-gray-6-rgb: var(--fd-neutral-700-rgb);

  --cz-gray-7: var(--fd-neutral-050);
  --cz-gray-7-rgb: var(--fd-neutral-050-rgb);

  --cz-gray-8: var(--fd-neutral-700);
  --cz-gray-8-rgb: var(--fd-neutral-700-rgb);

  --cz-gray-9: var(--fd-neutral-400);
  --cz-gray-9-rgb: var(--fd-neutral-400-rgb);

  --cz-gray-13: var(--fd-neutral-050);
  --cz-gray-13-rgb: var(--fd-neutral-050-rgb);

  --cz-gray-14: var(--fd-neutral-100);
  --cz-gray-14-rgb: var(--fd-neutral-100-rgb);

  --cz-gray-15: var(--fd-neutral-700);
  --cz-gray-15-rgb: var(--fd-neutral-700-rgb);

  --cz-gray-16: var(--fd-neutral-700);
  --cz-gray-16-rgb: var(--fd-neutral-700-rgb);

  --cz-gray-17: var(--fd-neutral-100);
  --cz-gray-17-rgb: var(--fd-neutral-100-rgb);

  --cz-gray-18: var(--fd-neutral-800);
  --cz-gray-18-rgb: var(--fd-neutral-800-rgb);

  /* -------------------------------------------------------------------------
   * Layer 3b - semantic feedback colours (merged into $theme-colors by
   * resources/templates/cartzilla/scss/_user-variables.scss).
   *
   * The brand book has no amber, so "warning" is expressed as an attention
   * shade of the brand red and is separated from "danger" by lightness rather
   * than by hue - see the .text-bg-warning and .badge patches in layer 4.
   * ---------------------------------------------------------------------- */

  --cz-success: var(--fd-green-600);
  --cz-success-rgb: var(--fd-green-600-rgb);

  --cz-info: var(--fd-green-600);
  --cz-info-rgb: var(--fd-green-600-rgb);

  --cz-danger: var(--fd-red-600);
  --cz-danger-rgb: var(--fd-red-600-rgb);

  --cz-warning: var(--fd-red-600);
  --cz-warning-rgb: var(--fd-red-600-rgb);

  --cz-light: var(--fd-neutral-050);
  --cz-light-rgb: var(--fd-neutral-050-rgb);

  /* Subtle / emphasis triplets consumed by .alert-* and .list-group-item-* */
  --cz-primary-text-emphasis: var(--fd-green-700);
  --cz-primary-bg-subtle: var(--fd-green-100);
  --cz-primary-border-subtle: var(--fd-green-300);

  --cz-secondary-text-emphasis: var(--fd-neutral-700);
  --cz-secondary-bg-subtle: var(--fd-neutral-050);
  --cz-secondary-border-subtle: var(--fd-neutral-200);

  --cz-success-text-emphasis: var(--fd-green-700);
  --cz-success-bg-subtle: var(--fd-green-100);
  --cz-success-border-subtle: var(--fd-green-300);

  --cz-info-text-emphasis: var(--fd-green-700);
  --cz-info-bg-subtle: var(--fd-green-100);
  --cz-info-border-subtle: var(--fd-green-300);

  /* Danger sits on a red-tinted surface, warning on a neutral one. Both keep
   * the red border and dark red text, so the two are told apart by surface
   * rather than by a hue the brand book does not define. */
  --cz-danger-text-emphasis: var(--fd-red-700);
  --cz-danger-bg-subtle: var(--fd-red-100);
  --cz-danger-border-subtle: var(--fd-red-600);

  --cz-warning-text-emphasis: var(--fd-red-700);
  --cz-warning-bg-subtle: var(--fd-cream);
  --cz-warning-border-subtle: var(--fd-red-600);

  --cz-dark-text-emphasis: var(--fd-bottle);
  --cz-dark-bg-subtle: var(--fd-neutral-050);
  --cz-dark-border-subtle: var(--fd-neutral-200);

  --cz-light-text-emphasis: var(--fd-neutral-700);
  --cz-light-bg-subtle: var(--fd-white);
  --cz-light-border-subtle: var(--fd-neutral-100);

  /* -------------------------------------------------------------------------
   * Layer 3c - Bootstrap system variables
   * ---------------------------------------------------------------------- */

  --cz-body-color: var(--fd-neutral-800);
  --cz-body-color-rgb: var(--fd-neutral-800-rgb);

  --cz-emphasis-color: var(--fd-bottle);
  --cz-emphasis-color-rgb: var(--fd-bottle-rgb);

  --cz-heading-color: var(--fd-bottle);

  /* Feeds .text-muted and .text-body-secondary. Kept one step darker than the
   * tertiary level so the two grades of secondary text are told apart, and
   * because a thin serif face needs the extra contrast to read as solid. */
  --cz-secondary-color: var(--fd-neutral-800);
  --cz-secondary-color-rgb: var(--fd-neutral-800-rgb);

  --cz-tertiary-color: var(--fd-neutral-700);
  --cz-tertiary-color-rgb: var(--fd-neutral-700-rgb);

  /* Section surfaces: .bg-body-secondary / .bg-body-tertiary read the RGB pair */
  --cz-secondary-bg: var(--fd-neutral-050);
  --cz-secondary-bg-rgb: var(--fd-neutral-050-rgb);

  --cz-tertiary-bg: var(--fd-cream);
  --cz-tertiary-bg-rgb: var(--fd-cream-rgb);

  --cz-border-color: var(--fd-neutral-200);
  --cz-border-color-translucent: rgba(var(--fd-bottle-rgb), 0.15);

  --cz-link-color: var(--fd-green-600);
  --cz-link-color-rgb: var(--fd-green-600-rgb);
  --cz-link-hover-color: var(--fd-green-700);
  --cz-link-hover-color-rgb: var(--fd-green-700-rgb);

  --cz-focus-ring-color: rgba(var(--fd-green-600-rgb), 0.15);

  --cz-code-color: var(--fd-red-600);
  --cz-highlight-bg: var(--fd-green-100);
  --cz-highlight-color: var(--fd-neutral-800);

  --cz-form-valid-color: var(--fd-green-600);
  --cz-form-valid-border-color: var(--fd-green-600);
  --cz-form-invalid-color: var(--fd-red-600);
  --cz-form-invalid-border-color: var(--fd-red-600);

  /* Cartzilla's own component scale. Nav links, dropdowns, tabs and pagination
   * all derive their colours from these, so they drive most of the interface. */
  --cz-component-color: var(--fd-neutral-800);
  --cz-component-hover-color: var(--fd-green-600);
  --cz-component-active-color: var(--fd-green-600);
  --cz-component-hover-bg: var(--fd-neutral-050);
  --cz-component-active-bg: var(--fd-neutral-050);
  --cz-component-disabled-color: var(--fd-neutral-400);
}

/* ---------------------------------------------------------------------------
 * Layer 3d - cartzilla component variables.
 * These are declared inside component rules rather than :root, so they have to
 * be overridden on the same selectors. They carry the theme's cold navy scale
 * (#181D25 / #333D4C / #CAD0D9 / #E0E5EB), which is not part of the palette.
 * ------------------------------------------------------------------------ */

.navbar {
  --cz-navbar-color: var(--fd-neutral-800);
  --cz-navbar-brand-color: var(--fd-bottle);
  --cz-navbar-brand-hover-color: var(--fd-green-600);
  --cz-navbar-hover-color: var(--fd-green-600);
  --cz-navbar-active-color: var(--fd-green-600);
  --cz-navbar-disabled-color: var(--fd-neutral-400);
}

.form-control,
.form-select {
  --cz-form-control-border-color: var(--fd-neutral-200);
  --cz-form-control-focus-border-color: var(--fd-green-600);
}

.dropdown:has(:checked) .filter-select,
.filter-select:has(.choices__item:not(.choices__placeholder)) {
  --cz-btn-border-color: var(--fd-green-600);
  --cz-btn-hover-border-color: var(--fd-green-600);
  --cz-form-control-border-color: var(--fd-green-600);
}

[data-simplebar] {
  --cz-scrollbar-bg: var(--fd-neutral-300);
  --cz-scrollbar-track-bg: var(--fd-neutral-050);
}

.breadcrumb {
  --cz-breadcrumb-divider-color: var(--fd-neutral-500);
}

.pagination {
  --cz-pagination-active-border-color: var(--fd-green-600);
}

.nav-tabs {
  --cz-nav-tabs-link-hover-bg: var(--fd-neutral-050);
}

.nav-pills {
  --cz-nav-pills-link-hover-border-color: var(--fd-neutral-500);
}

.btn-close {
  --cz-btn-close-color: var(--fd-bottle);
}

.table-dark {
  --cz-table-bg: var(--fd-bottle);
}

/* Mobile offcanvas menu repeats the cold navy inline */
[data-bs-theme=light] .navbar-dark:not([data-bs-theme=dark]) .offcanvas .navbar-nav {
  --cz-nav-link-color: var(--fd-neutral-800);
  --cz-nav-link-hover-color: var(--fd-green-600);
  --cz-nav-link-disabled-color: var(--fd-neutral-400);
  --cz-navbar-active-color: var(--fd-green-600);
}

.dropdown-menu-dark {
  --cz-dropdown-bg: var(--fd-bottle);
  --cz-dropdown-border-color: var(--fd-neutral-700);
  --cz-dropdown-color: var(--fd-neutral-100);
  --cz-dropdown-link-color: var(--fd-neutral-100);
  --cz-dropdown-link-hover-bg: var(--fd-green-700);
  --cz-dropdown-link-active-bg: var(--fd-green-700);
  --cz-dropdown-link-disabled-color: var(--fd-neutral-500);
}

/* ---------------------------------------------------------------------------
 * Layer 4 - patches for values the Sass build compiled to literal hexes.
 * Bootstrap's button-variant mixin resolves colours at compile time, so these
 * cannot be reached through the token map above.
 * ------------------------------------------------------------------------ */

/* Primary actions. The selector list mirrors theme.css so product card buttons
 * stay in sync; it also restores a readable hover label, which the theme set to
 * black on a dark green background. */
.btn-primary,
.product-card .count-input:not(.collapsed) .product-card-button,
.product-card:hover .product-card-button,
[data-bs-theme=dark] .product-card:hover .product-card-button {
  --cz-btn-color: var(--fd-white);
  --cz-btn-bg: var(--fd-green-600);
  --cz-btn-border-color: var(--fd-green-600);
  --cz-btn-hover-color: var(--fd-white);
  --cz-btn-hover-bg: var(--fd-green-700);
  --cz-btn-hover-border-color: var(--fd-green-700);
  --cz-btn-active-color: var(--fd-white);
  --cz-btn-active-bg: var(--fd-bottle);
  --cz-btn-active-border-color: var(--fd-bottle);
  --cz-btn-disabled-color: var(--fd-white);
  --cz-btn-disabled-bg: var(--fd-green-600);
  --cz-btn-disabled-border-color: var(--fd-green-600);
  --cz-btn-focus-shadow-rgb: var(--fd-green-600-rgb);
}

.btn-outline-primary {
  --cz-btn-color: var(--fd-green-600);
  --cz-btn-border-color: var(--fd-green-600);
  --cz-btn-hover-color: var(--fd-white);
  --cz-btn-hover-bg: var(--fd-green-600);
  --cz-btn-hover-border-color: var(--fd-green-600);
  --cz-btn-active-color: var(--fd-white);
  --cz-btn-active-bg: var(--fd-green-700);
  --cz-btn-active-border-color: var(--fd-green-700);
  --cz-btn-disabled-color: var(--fd-green-600);
  --cz-btn-disabled-border-color: var(--fd-green-600);
  --cz-btn-focus-shadow-rgb: var(--fd-green-600-rgb);
}

/* Cartzilla redefines .btn-secondary after the $theme-colors loop as a light
 * neutral button rather than a coloured one. That intent is preserved here and
 * only the cold grey is replaced with the warm brand neutrals. */
.btn-secondary {
  --cz-btn-color: var(--fd-bottle);
  --cz-btn-bg: var(--fd-neutral-050);
  --cz-btn-border-color: var(--fd-neutral-050);
  --cz-btn-hover-color: var(--fd-bottle);
  --cz-btn-hover-bg: var(--fd-neutral-100);
  --cz-btn-hover-border-color: var(--fd-neutral-100);
  --cz-btn-active-color: var(--fd-bottle);
  --cz-btn-active-bg: var(--fd-neutral-200);
  --cz-btn-active-border-color: var(--fd-neutral-200);
  --cz-btn-disabled-color: var(--fd-neutral-700);
  --cz-btn-disabled-bg: var(--fd-neutral-050);
  --cz-btn-disabled-border-color: var(--fd-neutral-050);
  --cz-btn-focus-shadow-rgb: var(--fd-neutral-700-rgb);
}

/* Used for the header icon row (search, wishlist, compare, cart) with
 * border-0, so the glyph carries the brand green of the search button while
 * the border stays neutral where it is visible. */
.btn-outline-secondary {
  --cz-btn-color: var(--fd-green-600);
  --cz-btn-border-color: var(--fd-neutral-200);
  --cz-btn-hover-color: var(--fd-green-700);
  --cz-btn-hover-bg: transparent;
  --cz-btn-hover-border-color: var(--fd-green-600);
  --cz-btn-active-color: var(--fd-green-700);
  --cz-btn-active-bg: transparent;
  --cz-btn-active-border-color: var(--fd-green-700);
  --cz-btn-disabled-color: var(--fd-neutral-500);
  --cz-btn-disabled-border-color: var(--fd-neutral-200);
  --cz-btn-focus-shadow-rgb: var(--fd-green-600-rgb);
}

.btn-green {
  --cz-btn-color: var(--fd-white);
  --cz-btn-bg: var(--fd-green-600);
  --cz-btn-border-color: var(--fd-green-600);
  --cz-btn-hover-color: var(--fd-white);
  --cz-btn-hover-bg: var(--fd-green-700);
  --cz-btn-hover-border-color: var(--fd-green-700);
  --cz-btn-active-color: var(--fd-white);
  --cz-btn-active-bg: var(--fd-bottle);
  --cz-btn-active-border-color: var(--fd-bottle);
  --cz-btn-disabled-color: var(--fd-white);
  --cz-btn-disabled-bg: var(--fd-green-600);
  --cz-btn-disabled-border-color: var(--fd-green-600);
  --cz-btn-focus-shadow-rgb: var(--fd-green-600-rgb);
}

.btn-outline-green {
  --cz-btn-color: var(--fd-green-600);
  --cz-btn-border-color: var(--fd-green-600);
  --cz-btn-hover-color: var(--fd-white);
  --cz-btn-hover-bg: var(--fd-green-600);
  --cz-btn-hover-border-color: var(--fd-green-600);
  --cz-btn-active-color: var(--fd-white);
  --cz-btn-active-bg: var(--fd-green-700);
  --cz-btn-active-border-color: var(--fd-green-700);
  --cz-btn-disabled-color: var(--fd-green-600);
  --cz-btn-disabled-border-color: var(--fd-green-600);
  --cz-btn-focus-shadow-rgb: var(--fd-green-600-rgb);
}

.btn-outline-light {
  --cz-btn-color: var(--fd-neutral-050);
  --cz-btn-border-color: var(--fd-neutral-050);
  --cz-btn-hover-color: var(--fd-bottle);
  --cz-btn-hover-bg: var(--fd-neutral-050);
  --cz-btn-hover-border-color: var(--fd-neutral-050);
  --cz-btn-active-color: var(--fd-bottle);
  --cz-btn-active-bg: var(--fd-neutral-050);
  --cz-btn-active-border-color: var(--fd-neutral-050);
  --cz-btn-disabled-color: var(--fd-neutral-050);
  --cz-btn-disabled-border-color: var(--fd-neutral-050);
  --cz-btn-focus-shadow-rgb: var(--fd-neutral-100-rgb);
}

.btn-dark,
.btn-negative {
  --cz-btn-color: var(--fd-white);
  --cz-btn-bg: var(--fd-bottle);
  --cz-btn-border-color: var(--fd-bottle);
  --cz-btn-hover-color: var(--fd-white);
  --cz-btn-hover-bg: var(--fd-green-700);
  --cz-btn-hover-border-color: var(--fd-green-700);
  --cz-btn-active-color: var(--fd-white);
  --cz-btn-active-bg: var(--fd-green-700);
  --cz-btn-active-border-color: var(--fd-green-700);
  --cz-btn-disabled-color: var(--fd-white);
  --cz-btn-disabled-bg: var(--fd-bottle);
  --cz-btn-disabled-border-color: var(--fd-bottle);
  --cz-btn-focus-shadow-rgb: var(--fd-bottle-rgb);
}

.btn-outline-dark,
.btn-outline-negative {
  --cz-btn-color: var(--fd-bottle);
  --cz-btn-border-color: var(--fd-bottle);
  --cz-btn-hover-color: var(--fd-white);
  --cz-btn-hover-bg: var(--fd-bottle);
  --cz-btn-hover-border-color: var(--fd-bottle);
  --cz-btn-active-color: var(--fd-white);
  --cz-btn-active-bg: var(--fd-bottle);
  --cz-btn-active-border-color: var(--fd-bottle);
  --cz-btn-disabled-color: var(--fd-bottle);
  --cz-btn-disabled-border-color: var(--fd-bottle);
  --cz-btn-focus-shadow-rgb: var(--fd-bottle-rgb);
}

.btn-red,
.btn-sale,
.btn-danger {
  --cz-btn-color: var(--fd-white);
  --cz-btn-bg: var(--fd-red-600);
  --cz-btn-border-color: var(--fd-red-600);
  --cz-btn-hover-color: var(--fd-white);
  --cz-btn-hover-bg: var(--fd-red-700);
  --cz-btn-hover-border-color: var(--fd-red-700);
  --cz-btn-active-color: var(--fd-white);
  --cz-btn-active-bg: var(--fd-red-700);
  --cz-btn-active-border-color: var(--fd-red-700);
  --cz-btn-disabled-color: var(--fd-white);
  --cz-btn-disabled-bg: var(--fd-red-600);
  --cz-btn-disabled-border-color: var(--fd-red-600);
  --cz-btn-focus-shadow-rgb: var(--fd-red-600-rgb);
}

.btn-outline-red,
.btn-outline-sale,
.btn-outline-danger {
  --cz-btn-color: var(--fd-red-600);
  --cz-btn-border-color: var(--fd-red-600);
  --cz-btn-hover-color: var(--fd-white);
  --cz-btn-hover-bg: var(--fd-red-600);
  --cz-btn-hover-border-color: var(--fd-red-600);
  --cz-btn-active-color: var(--fd-white);
  --cz-btn-active-bg: var(--fd-red-700);
  --cz-btn-active-border-color: var(--fd-red-700);
  --cz-btn-disabled-color: var(--fd-red-600);
  --cz-btn-disabled-border-color: var(--fd-red-600);
  --cz-btn-focus-shadow-rgb: var(--fd-red-600-rgb);
}

/* Cartzilla accents with no brand book equivalent */
.btn-blue,
.btn-cyan,
.btn-info,
.btn-success {
  --cz-btn-color: var(--fd-white);
  --cz-btn-bg: var(--fd-green-600);
  --cz-btn-border-color: var(--fd-green-600);
  --cz-btn-hover-color: var(--fd-white);
  --cz-btn-hover-bg: var(--fd-green-700);
  --cz-btn-hover-border-color: var(--fd-green-700);
  --cz-btn-active-color: var(--fd-white);
  --cz-btn-active-bg: var(--fd-green-700);
  --cz-btn-active-border-color: var(--fd-green-700);
  --cz-btn-disabled-color: var(--fd-white);
  --cz-btn-disabled-bg: var(--fd-green-600);
  --cz-btn-disabled-border-color: var(--fd-green-600);
  --cz-btn-focus-shadow-rgb: var(--fd-green-600-rgb);
}

.btn-outline-blue,
.btn-outline-cyan,
.btn-outline-info,
.btn-outline-success {
  --cz-btn-color: var(--fd-green-600);
  --cz-btn-border-color: var(--fd-green-600);
  --cz-btn-hover-color: var(--fd-white);
  --cz-btn-hover-bg: var(--fd-green-600);
  --cz-btn-hover-border-color: var(--fd-green-600);
  --cz-btn-active-color: var(--fd-white);
  --cz-btn-active-bg: var(--fd-green-700);
  --cz-btn-active-border-color: var(--fd-green-700);
  --cz-btn-disabled-color: var(--fd-green-600);
  --cz-btn-disabled-border-color: var(--fd-green-600);
  --cz-btn-focus-shadow-rgb: var(--fd-green-600-rgb);
}

/* Attention, not error: a light red surface keeps warning distinguishable from
 * danger without introducing an amber the brand book does not define. */
.btn-warning {
  --cz-btn-color: var(--fd-red-700);
  --cz-btn-bg: var(--fd-red-100);
  --cz-btn-border-color: var(--fd-red-100);
  --cz-btn-hover-color: var(--fd-white);
  --cz-btn-hover-bg: var(--fd-red-600);
  --cz-btn-hover-border-color: var(--fd-red-600);
  --cz-btn-active-color: var(--fd-white);
  --cz-btn-active-bg: var(--fd-red-700);
  --cz-btn-active-border-color: var(--fd-red-700);
  --cz-btn-disabled-color: var(--fd-red-700);
  --cz-btn-disabled-bg: var(--fd-red-100);
  --cz-btn-disabled-border-color: var(--fd-red-100);
  --cz-btn-focus-shadow-rgb: var(--fd-red-600-rgb);
}

.btn-outline-warning {
  --cz-btn-color: var(--fd-red-700);
  --cz-btn-border-color: var(--fd-red-600);
  --cz-btn-hover-color: var(--fd-white);
  --cz-btn-hover-bg: var(--fd-red-600);
  --cz-btn-hover-border-color: var(--fd-red-600);
  --cz-btn-active-color: var(--fd-white);
  --cz-btn-active-bg: var(--fd-red-700);
  --cz-btn-active-border-color: var(--fd-red-700);
  --cz-btn-disabled-color: var(--fd-red-600);
  --cz-btn-disabled-border-color: var(--fd-red-600);
  --cz-btn-focus-shadow-rgb: var(--fd-red-600-rgb);
}

/* Badges and stock range labels. Bootstrap hardcodes the foreground colour of
 * .text-bg-* at compile time, so contrast has to be restored explicitly. */
.text-bg-warning {
  color: var(--fd-red-700) !important;
  background-color: rgba(var(--fd-red-100-rgb), var(--cz-bg-opacity, 1)) !important;
}

.text-bg-blue,
.text-bg-cyan,
.text-bg-info,
.text-bg-success,
.text-bg-secondary,
.text-bg-green {
  color: var(--fd-white) !important;
}

/* Section headings underline */
.section-title:after {
  background-color: var(--fd-green-600);
}

.progress,
.progress-stacked {
  --cz-progress-bar-bg: var(--fd-green-600);
  --cz-progress-bar-color: var(--fd-white);
}

/* Form states: the theme hardcodes a cold navy that is not part of the palette */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.form-check-input[type=checkbox]:indeterminate,
.form-check-input.is-valid:checked,
.was-validated .form-check-input:valid:checked {
  border-color: var(--fd-green-600);
}

/* Cartzilla styles checked boxes as a white field with a dark glyph. That
 * pattern is kept and only the glyph and border move to the brand green. */
.form-check-input,
.form-check-input.is-valid,
.was-validated .form-check-input:valid {
  border-color: var(--fd-neutral-200);
}

.form-check-input:checked {
  border-color: var(--fd-green-600);
}

.form-check-input:checked[type=checkbox] {
  --cz-form-check-bg-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%2335794d' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E");
}

.form-check-input:checked[type=radio] {
  --cz-form-check-bg-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%2335794d'/%3E%3C/svg%3E");
}

.form-check-input[type=checkbox]:indeterminate {
  --cz-form-check-bg-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%2335794d' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3E%3C/svg%3E");
}

.input-group-text {
  border-color: var(--fd-neutral-200);
}

.form-switch .form-check-input {
  background-color: var(--fd-neutral-200);
}

.form-switch .form-check-input:checked {
  background-color: var(--fd-green-600);
}

.form-floating > .form-control:disabled ~ label,
.form-floating > :disabled ~ label {
  color: var(--fd-neutral-500);
}

.offcanvas-backdrop {
  background-color: var(--fd-bottle);
}

.modal-backdrop {
  --cz-backdrop-bg: var(--fd-bottle);
}

.hljs,
pre {
  background-color: var(--fd-bottle);
}

.list-bullet:before {
  background-color: var(--fd-green-600);
}

/* Two core templates push inline <style> blocks with !important. Those land
 * later in the cascade, so beating them needs higher specificity as well. */
div.notification-header {
  background-color: var(--fd-neutral-050) !important;
}

html .text-blue {
  color: var(--fd-green-600) !important;
}

/* Toastr ships its own fixed palette */
.toast {
  background-color: var(--fd-bottle);
}

.toast-success {
  background-color: var(--fd-green-600);
}

.toast-info {
  background-color: var(--fd-green-700);
}

/* Toastr forces white text via #toast-container > div, so every toast surface
 * has to stay dark enough for a white label. */
.toast-warning {
  background-color: var(--fd-red-700);
}

.toast-error {
  background-color: var(--fd-red-600);
}

/* ---------------------------------------------------------------------------
 * Layer 5 - instance specific surfaces
 * ------------------------------------------------------------------------ */

#header {
  background-color: var(--fd-cream);
}

/* The footer template picks .bg-white from the light colour theme, and that
 * utility is !important, so both specificity and !important are needed here.
 * Mirrors the cream header. */
footer.footer.bg-white {
  background-color: var(--fd-cream) !important;
}

/* Wishlist / repository per-row add-to-cart button */
.repository-add-to-cart-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--fd-green-100);
  color: var(--fd-green-600);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.repository-add-to-cart-icon:hover,
.repository-add-to-cart-icon:focus-visible {
  background-color: var(--fd-green-600);
  color: var(--fd-white);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--fd-green-600-rgb), 0.15);
}

.repository-add-to-cart-icon__svg {
  display: block;
  flex-shrink: 0;
}

/* Wishlist / repository per-row delete button (brand red) */
.repository-delete-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--fd-red-100);
  color: var(--fd-red-600);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.repository-delete-icon:hover,
.repository-delete-icon:focus-visible {
  background-color: var(--fd-red-600);
  color: var(--fd-white);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--fd-red-600-rgb), 0.15);
}

.repository-delete-icon__svg {
  display: block;
  flex-shrink: 0;
}