/*
 * Palette overrides, loaded after site.css.
 *
 * Kept in a separate file because site.css is a generated Tailwind artifact —
 * this project has no Tailwind build, so editing it by hand would be lost the
 * moment it is regenerated, and any class name not already compiled into it
 * silently does nothing. Every utility in that file reads its colour from a
 * custom property, so re-pointing the properties here restyles the whole site
 * without touching a single class name.
 *
 * The pairing: deep indigo stays the brand, and the page now sits on a light
 * lavender drawn from the same hue instead of a cool grey that belonged to no
 * one. Amber remains the one warm accent, so calls to action still stand out
 * against a field of purple.
 */
:root {
  /* Page background — a tint of the brand hue, not a neutral grey. */
  --color-canvas: #f3f1fb;

  /* Soft lavender for chips, pills and quiet panels. */
  --color-brand-tint: #eae7f9;
  --color-brand-line: #cfc8ef;

  /* Slightly lifted so the indigo reads richer beside the lavender. */
  --color-brand: #46409c;
  --color-brand-dark: #363080;
  --color-brand-deep: #241f5c;
}

/*
 * White tiles on a lavender page need a whisper of separation — without it the
 * cards float with no edge at all. Deliberately a tinted shadow rather than a
 * grey one, so the surround stays in the same colour family.
 */
.tile {
  box-shadow: 0 1px 2px rgb(70 64 156 / 0.04), 0 8px 24px -18px rgb(70 64 156 / 0.35);
}

/* The product photo panel keeps a hint of the same tint. */
.card:hover {
  box-shadow: 0 10px 28px rgb(70 64 156 / 0.18);
}

/* --------------------------------------------------------------------------
 * Utilities the generated stylesheet is missing.
 *
 * site.css was compiled from the Next.js storefront, so it contains only the
 * classes that storefront happened to use. Anything these views need beyond
 * that set resolves to nothing at all — no warning, no error, the element just
 * ignores it. That is what left the hero image at zero height and the logo
 * wordmark permanently hidden.
 *
 * These are the exact Tailwind definitions for the eighteen classes an audit of
 * every .cshtml found absent. They are intentionally unlayered so they take
 * precedence over the layered utilities they pair with (`sm:block` has to beat
 * `hidden`, for instance).
 * ------------------------------------------------------------------------ */

.h-2\.5 { height: 0.625rem; }
.w-2\.5 { width: 0.625rem; }
.h-28 { height: 7rem; }
.h-56 { height: 14rem; }
.min-w-5 { min-width: 1.25rem; }
.w-auto { width: auto; }
.ml-2 { margin-left: 0.5rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.-right-1\.5 { right: -0.375rem; }
.font-black { font-weight: 900; }

.bg-white\/10 { background-color: rgb(255 255 255 / 0.1); }
.bg-deal\/10 { background-color: rgb(217 45 32 / 0.1); }
.hover\:text-deal:hover { color: var(--color-deal); }

@media (min-width: 640px) {
  .sm\:block { display: block; }
  .sm\:h-72 { height: 18rem; }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}