/*
  Manrope is the design's body/UI face (Fonty asset section). It used to be
  pulled in with an @import on this line, which is the slowest way to ask for
  a font: the browser has to fetch this file, parse it, then discover the
  Google stylesheet, fetch that, and only then start on the font itself - four
  round trips deep before a single letter is drawn in the right face. It is
  asked for in the page head now, next to a preconnect, so the fetch starts
  with everything else. See layouts/app.blade.php.
*/

/*
 * Design tokens read from the Figma file "Dverko - UI/UX" via the REST API —
 * the documented "Farby" / "Fonty" asset sections and the button component set,
 * not sampled from rendered pixels. See docs/design/SPEC.md.
 *
 * NOTE: --color-primary, --color-primary-dark, --color-bg and --color-border are
 * re-declared in layouts/app.blade.php from $siteSettings, which wins over the
 * values here. Change them in the admin colour settings, not only in this file.
 */
:root {
  /* --- Green / sage ramp (the primary neutral scale) --- */
  --color-green-50: #f8f9f7;
  --color-green-100: #f1f1ed;
  --color-green-200: #e1e2dd;
  --color-green-300: #cccfc6;
  --color-green-400: #b1b4aa;
  --color-green-500: #8d957f;   /* base sage */
  --color-green-600: #6e775f;
  --color-green-700: #575f4c;
  --color-green-800: #474c3f;
  --color-green-900: #3a3f35;
  --color-ink: #20231c;

  /* --- Cream ramp ("Krémová") --- */
  --color-cream-50: #fdfdfb;
  --color-cream-100: #f6f5f0;
  --color-cream-200: #f2f1e7;
  --color-cream-300: #eae8db;
  --color-cream-400: #e6e2d2;
  --color-cream-500: #e2dccd;   /* base cream */
  --color-cream-600: #cfc2aa;
  --color-cream-700: #b9a187;
  --color-cream-800: #a5856b;
  --color-cream-900: #8c6f59;
  --color-cream-950: #4d3c2e;

  /* --- Orange / accent ramp --- */
  --color-orange-50: #fef8ef;
  --color-orange-100: #fdf0d9;
  --color-orange-200: #f9dbb2;
  --color-orange-300: #f6c181;
  --color-orange-400: #f29e50;
  --color-orange-500: #ef8739;  /* base accent */
  --color-orange-600: #e06a2a;
  --color-orange-700: #b95122;
  --color-orange-800: #944120;
  --color-orange-900: #78371c;
  --color-orange-950: #40190c;  /* label colour on accent fills */

  /* --- Semantic aliases used across the storefront --- */
  --color-primary: var(--color-orange-500);
  --color-primary-light: var(--color-orange-400);
  --color-primary-dark: var(--color-orange-600);
  --color-on-primary: var(--color-orange-950);
  --color-sage: var(--color-green-500);
  --color-sage-dark: var(--color-green-600);

  --color-white: #fff;
  --color-card: var(--color-green-50);
  --color-bg: var(--color-green-50);
  --color-bg-alt: var(--color-green-100);
  --color-border: var(--color-green-200);
  --color-muted-1: var(--color-green-200);
  --color-muted-2: var(--color-green-300);
  --color-muted-3: var(--color-green-300);
  --color-muted-4: var(--color-green-400);

  --color-dark: var(--color-ink);
  --color-text: var(--color-ink);
  --color-muted: var(--color-green-600);

  /* Status */
  --color-stock: #a2d9b0;
  --color-online: #b9e8c4;

  /* Order-summary tint in the cart/checkout comes from the cream ramp. */
  --color-accent-tint: var(--color-orange-50);
  --color-accent-tint-deep: var(--color-orange-100);

  /*
   * Manrope carries body and UI text; TASA Orbiter is the display face.
   * TASA Orbiter is a licensed font and is not bundled — the stack falls back
   * to Manrope until the client supplies the webfont. See SPEC.md.
   */
  --font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'TASA Orbiter', 'Manrope', ui-sans-serif, system-ui, sans-serif;

  /* Button geometry, from the component set (L / M / S). */
  --radius-btn-l: 16px;
  --radius-btn-m: 14px;
  --radius-btn-s: 8px;
  --border-radius-panel: 24px;
  --border-radius: 20px;
  --border-radius-sm: var(--radius-btn-l);

  --shadow: 0 2px 15px rgba(32, 35, 28, 0.06);
  --shadow-hover: 0 5px 25px rgba(32, 35, 28, 0.12);

  /* akcent-button: linear gradient, not a flat fill. */
  --gradient-primary: linear-gradient(180deg, var(--color-orange-500) 0%, var(--color-orange-400) 100%);
  --gradient-sage: linear-gradient(180deg, var(--color-green-500) 0%, var(--color-green-400) 100%);
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-white);
  overflow-x: hidden;
}

html {
  overflow-x: hidden;
  /* An in-page link glides to its target instead of cutting to it, so the
     visitor can tell how far down the page they were taken. The padding
     keeps the target's heading out from under the sticky header. */
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

@media (max-width: 767.98px) {
  html { scroll-padding-top: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ===================== HEADER ===================== */
.site-header {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.header-top {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 6px 0;
  font-size: 13px;
  color: var(--color-muted);
}

.header-top a {
  color: var(--color-muted);
  text-decoration: none;
  margin-left: 20px;
}

.header-top a:hover { color: var(--color-primary); }

.header-main {
  padding: 15px 0;
}

.site-header .header-main .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 24px;
  min-width: 0;
}

.site-header .logo {
  margin-left: 3%;
  flex: 1 1 0;
  min-width: 0;
}

.logo img {
  height: 66px;
  max-width: 100%;
  width: auto;
}

.logo span {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-dark);
  text-decoration: none;
}

.logo span em {
  color: var(--color-primary);
  font-style: normal;
}

@media (max-width: 991px) {
  .site-header .header-main .container {
    padding-left: 12px;
    padding-right: 12px;
    gap: 10px !important;
  }

  .site-header .logo {
    margin-left: 0;
  }

  .logo img {
    height: 50px;
    max-width: min(52vw, 220px);
    object-fit: contain;
  }
}

/* Navigation */
.main-nav .nav-link {
  font-weight: 500;
  color: var(--color-dark) !important;
  padding: 8px 15px !important;
  border-radius: var(--border-radius-sm);
  transition: all 0.2s;
}

.main-nav button.nav-link {
  border: 0;
  background: transparent;
}

.main-nav .nav-link:hover,
.main-nav .nav-link.active {
  color: var(--color-primary) !important;
  background: var(--color-bg);
}

.main-nav .dropdown-item {
  font-weight: 400;
  color: var(--color-dark);
  padding: 8px 20px;
}

.main-nav .dropdown-item:hover {
  background: var(--color-bg);
  color: var(--color-primary);
}

@media (min-width: 992px) {
  .main-nav .dropdown {
    position: relative;
  }

  .main-nav .dropdown-toggle::after {
    transition: transform 0.18s ease;
  }

  .main-nav .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    margin-top: 0;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  }

  .main-nav .dropdown:hover .dropdown-menu,
  .main-nav .dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .main-nav .dropdown:hover .dropdown-toggle::after,
  .main-nav .dropdown:focus-within .dropdown-toggle::after {
    transform: rotate(180deg);
  }
}

/* Cart icon */
.cart-btn {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 50px;
  padding: 8px 18px;
  color: var(--color-dark);
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.cart-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.header-search-trigger {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(32, 35, 28, 0.12);
  border-radius: 50%;
  background: linear-gradient(180deg, #fff 0%, var(--color-bg) 100%);
  color: var(--color-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(32, 35, 28, 0.08);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.header-search-trigger:hover,
.header-search-trigger[aria-expanded="true"] {
  transform: translateY(-1px);
  background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-muted-1) 100%);
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 14px 30px rgba(32, 35, 28, 0.12);
}

/* Plain white, one flat surface. It used to carry an orange wash in the top
   corner and a fade down from the page background, which put colour behind
   the search when the search is the only thing that belongs there. */
.header-search-collapse {
  border-top: 1px solid rgba(32, 35, 28, 0.10);
  background: #fff;
}

.mobile-nav-toggle {
  width: 44px;
  height: 44px;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #fff 0%, var(--color-bg) 100%);
  border: 1px solid rgba(32, 35, 28, 0.12) !important;
  box-shadow: 0 10px 24px rgba(32, 35, 28, 0.08);
  flex-shrink: 0;
}

.mobile-nav-toggle:hover,
.mobile-nav-toggle[aria-expanded="true"] {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-muted-1) 100%);
}

.mobile-nav-collapse {
  border-top: 1px solid rgba(32, 35, 28, 0.10);
  background:
    radial-gradient(circle at top right, rgba(239, 140, 60, 0.1), transparent 28%),
    linear-gradient(180deg, var(--color-bg) 0%, rgba(255, 255, 255, 0.98) 78%);
}

.mobile-nav-panel {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid rgba(32, 35, 28, 0.10);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 54px rgba(32, 35, 28, 0.12);
  backdrop-filter: blur(10px);
}

.mobile-nav-section-title {
  margin-bottom: 12px;
  color: var(--color-muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mobile-nav-links {
  display: grid;
  gap: 10px;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 14px 16px;
  border: 1px solid rgba(32, 35, 28, 0.12);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff 0%, #fffcf8 100%);
  color: var(--color-dark);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(32, 35, 28, 0.05);
  transition: all 0.2s ease;
}

.mobile-nav-link i {
  color: var(--color-primary);
  font-size: 0.95rem;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  color: var(--color-primary);
  border-color: rgba(239, 140, 60, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(32, 35, 28, 0.08);
}

.mobile-nav-divider {
  height: 1px;
  margin: 18px 0;
  background: linear-gradient(90deg, rgba(32, 35, 28, 0), rgba(32, 35, 28, 1), rgba(32, 35, 28, 0));
}

.mobile-nav-links-categories {
  gap: 8px;
}

.mobile-nav-link-category {
  min-height: 48px;
  padding: 12px 14px;
  font-weight: 500;
}

/* No card of its own any more - no border, fill, shadow or blur. The dropdown
   is one white surface and the panel only spaces what sits on it, so what
   shows is the search and nothing else.

   The top padding is the point of the rule: with the card gone the kicker sat
   directly against the header's bottom edge. */
.header-search-panel {
  margin-top: 0;
  padding: 26px 0 22px;
}

.header-search-panel-copy {
  margin-bottom: 14px;
}

/* The grey is the calculator page's hero band, the one behind its
   "Kalkulačka" heading, so the two pills read as the same grey rather than
   this one being a warm cream of its own. Black label on it. */
.header-search-kicker {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--color-green-200, #e1e2dd);
  color: var(--color-ink, #20231c);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.header-search-panel-copy p {
  margin: 10px 0 0;
  max-width: 560px;
  color: var(--color-ink, #20231c);
  font-size: 0.95rem;
  line-height: 1.6;
}

.header-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.header-search-input-wrap {
  position: relative;
  display: block;
}

.header-search-input-wrap i {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-primary);
  font-size: 0.95rem;
  pointer-events: none;
}

.header-search-form input {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  border: 1px solid #dbcab7;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #fffcf8 100%);
  color: var(--color-dark);
  padding: 15px 20px 15px 50px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 22px rgba(34, 23, 14, 0.06);
}

.header-search-form input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(239, 140, 60, 0.12), 0 14px 28px rgba(34, 23, 14, 0.08);
}

.header-search-form input::placeholder {
  color: #998574;
}

.header-search-submit {
  min-width: 132px;
  min-height: 56px;
  padding: 0 26px;
  border-radius: 999px !important;
  font-size: 0.95rem;
  box-shadow: 0 14px 28px rgba(239, 140, 60, 0.22);
}

@media (max-width: 575.98px) {
  .site-header .header-main .container {
    gap: 8px !important;
  }

  .logo img {
    height: 42px;
    max-width: min(50vw, 180px);
  }

  .cart-btn {
    padding: 8px 12px;
    gap: 6px;
  }

  .cart-btn span:first-of-type {
    display: none;
  }

  .header-search-trigger,
  .mobile-nav-toggle {
    width: 40px;
    height: 40px;
  }

  .header-search-panel {
    padding: 16px;
    border-radius: 22px;
  }

  .mobile-nav-panel {
    padding: 14px;
    border-radius: 20px;
  }

  .mobile-nav-link {
    min-height: 50px;
    padding: 12px 14px;
  }

  .header-search-form {
    grid-template-columns: 1fr;
  }

  .header-search-panel-copy p {
    font-size: 0.9rem;
  }

  .header-search-submit {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .logo img {
    max-width: min(46vw, 150px);
  }

  .cart-btn {
    padding: 8px 10px;
  }
}

.cart-badge {
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* ===================== BUTTONS ===================== */
/*
 * The design uses rounded rectangles (~12px), not pills, and puts DARK ink on the
 * orange and sage fills rather than white — verified by sampling the Figma render.
 */
.btn-primary {
  background: var(--gradient-primary) !important;
  border-color: transparent !important;
  color: var(--color-dark) !important;
  border-radius: var(--border-radius-sm);
  padding: 12px 26px;
  font-weight: 600;
  transition: all 0.2s;
}

.btn-primary:hover {
  background: linear-gradient(180deg, var(--color-primary) 0%, #cf7a35 100%) !important;
  border-color: transparent !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(219, 132, 62, 0.32);
}

/* Quiet outline button used for "Zobrazit všechny" style section actions. */
.btn-outline-primary,
.btn-outline-soft {
  background: var(--color-bg-alt) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-dark) !important;
  border-radius: var(--border-radius-sm);
  padding: 12px 22px;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-outline-primary:hover,
.btn-outline-soft:hover {
  background: var(--color-muted-1) !important;
  border-color: var(--color-muted-3) !important;
  color: var(--color-dark) !important;
}

/* Solid sage action, used inside the bento trust grid. */
.btn-sage {
  background: var(--color-sage) !important;
  border: 1px solid transparent !important;
  color: var(--color-dark) !important;
  border-radius: var(--border-radius-sm);
  padding: 12px 22px;
  font-weight: 600;
  transition: all 0.2s;
}

.btn-sage:hover {
  background: var(--color-sage-dark) !important;
  transform: translateY(-1px);
}

/* Translucent button that sits on top of hero imagery. */
.btn-ghost-on-image {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  color: #fff !important;
  border-radius: var(--border-radius-sm);
  padding: 12px 24px;
  font-weight: 500;
  backdrop-filter: blur(6px);
  transition: all 0.2s;
}

.btn-ghost-on-image:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
}

.btn-secondary {
  background: var(--color-bg) !important;
  border-color: var(--color-border) !important;
  color: var(--color-dark) !important;
  border-radius: var(--border-radius-sm);
  padding: 12px 26px;
  font-weight: 600;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: var(--color-border) !important;
}

/* ===================== HERO ===================== */
.hero-section {
  background: linear-gradient(135deg, #3a2e26 0%, #5a4e46 100%);
  color: white;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('/images/export/reference/reference_vzor.png') center/cover no-repeat;
  opacity: 0.2;
}

.hero-section .container { position: relative; }

.hero-section h1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
}

.hero-section h1 span { color: var(--color-primary); }

.hero-section p {
  font-size: 1.1rem;
  opacity: 0.85;
  margin-bottom: 30px;
}

/* ===================== CATEGORIES GRID ===================== */
.categories-section {
  padding: 60px 0;
  background: var(--color-bg);
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 10px;
}

.section-subtitle {
  color: var(--color-muted);
  margin-bottom: 40px;
  font-size: 1.05rem;
}

.category-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 30px 20px;
  text-align: center;
  text-decoration: none;
  color: var(--color-dark);
  display: block;
  transition: all 0.3s;
  height: 100%;
}

.category-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
  color: var(--color-primary);
}

.category-card .icon {
  width: 60px;
  height: 60px;
  background: var(--color-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  font-size: 24px;
  transition: all 0.3s;
}

.category-card:hover .icon {
  background: var(--color-primary);
  color: white;
}

.category-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

/* ===================== PRODUCT CARD ===================== */
.products-section { padding: 60px 0; }

.product-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: all 0.3s;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.product-card .product-image {
  background: #fff;
  padding: 20px;
  text-align: center;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-card .product-image img {
  max-height: 160px;
  max-width: 100%;
  object-fit: contain;
}

.product-card .product-body {
  padding: 15px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-card .product-category {
  font-size: 11px;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}

.product-card h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--color-dark);
  flex: 1;
}

.product-card h3 a {
  color: inherit;
  text-decoration: none;
}

.product-card h3 a:hover { color: var(--color-primary); }

.product-card .product-code {
  font-size: 12px;
  color: var(--color-muted);
  margin-bottom: 8px;
}

.product-price {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary);
}

.product-price .price-label {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-muted);
  display: block;
}

.product-card .product-footer {
  padding: 12px 18px;
  background: var(--color-bg);
}

.product-card-stock-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  max-width: calc(100% - 20px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--badge-bg, #e8f5e9);
  color: var(--badge-color, #2e7d32);
  border: 1px solid var(--badge-border, #c8e6c9);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card-stock-badge i {
  font-size: 0.72rem;
  flex: 0 0 auto;
}

.product-card-action {
  min-height: 46px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
}

/* ===================== SHOP PAGE ===================== */
.shop-sidebar {
  background: var(--color-bg);
  border-radius: var(--border-radius);
  padding: 20px;
  border: 1px solid var(--color-border);
}

.product-grid-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: all 0.3s;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.product-grid-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.product-grid-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 20px;
  text-align: center;
  height: auto;
  overflow: hidden;
}

.product-grid-image img {
  max-height: 160px;
  max-width: 100%;
  object-fit: contain;
}

.product-grid-body {
  padding: 15px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-grid-category {
  font-size: 11px;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0;
}

.product-grid-title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-dark);
  margin: 0;
  flex: 1;
}

.product-grid-meta {
  font-size: 12px;
  color: var(--color-muted);
}

.product-card-color-dots {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  min-height:24px;
  margin:2px 0 8px;
}

.product-card-color-dot {
  width:18px;
  height:18px;
  border-radius:50%;
  flex:0 0 18px;
  background:#e8dfd4;
  background-size:cover;
  background-position:center;
  /* 40% ink: at 16 a white or cream decor had no edge and read as a gap in
     the row. Same ring the configurator's own circles carry. */
  border:1px solid rgba(32,35,28,.4);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.55), 0 3px 8px rgba(33,23,15,.1);
}

.product-card-color-dots--large {
  gap:10px;
  min-height:40px;
  margin:4px 0 10px;
}

.product-card-color-dots--large .product-card-color-dot {
  width:36px;
  height:36px;
  flex-basis:36px;
  border-width:1px;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.55), 0 5px 12px rgba(33,23,15,.14);
}

.product-card-color-more {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:#f7efe7;
  color:var(--color-primary);
  font-size:0.7rem;
  font-weight:800;
  line-height:1;
}

.product-card-color-dots--large .product-card-color-more {
  min-width:36px;
  height:28px;
  padding:0 10px;
  font-size:0.82rem;
}

.product-grid-price {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--color-primary);
}

.product-grid-price .text-muted {
  font-size: 0.75rem !important;
}

.product-grid-price strong {
  font-size: 1.2rem;
  font-weight: 700;
}

.product-grid-footer {
  padding: 12px 18px;
  background: var(--color-bg);
}

.product-grid-footer .btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.2rem;
}

@media (max-width: 575.98px) {
  .listing-card-col {
    width: 100%;
  }

  .product-card {
    border-radius: 24px;
    box-shadow: 0 14px 32px rgba(41, 28, 16, 0.08);
  }

  .product-card:hover {
    transform: none;
  }

  .product-card .product-image {
    height: 220px;
    padding: 26px 22px 18px;
  }

  .product-card .product-image img {
    max-height: 172px;
  }

  .product-card .product-body {
    padding: 18px 20px 16px;
    gap: 6px;
  }

  .product-card .product-category {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    margin-bottom: 0;
  }

  .product-card h3 {
    font-size: 1.45rem;
    line-height: 1.08;
    margin-bottom: 2px;
  }

  .product-price {
    font-size: 1.9rem;
    line-height: 1.05;
  }

  .product-card .product-footer {
    padding: 14px 20px 18px;
  }

  .product-card-action {
    min-height: 52px;
    font-size: 1.14rem;
  }

  .product-card-stock-badge {
    top: 14px;
    right: 14px;
    max-width: calc(100% - 28px);
    font-size: 0.82rem;
    padding: 7px 12px;
  }

  .product-grid-card {
    border-radius: 24px;
    box-shadow: 0 14px 32px rgba(41, 28, 16, 0.08);
  }

  .product-grid-card:hover {
    transform: none;
  }

  .product-grid-image {
    height: 220px;
    padding: 26px 22px 18px;
  }

  .product-grid-image img {
    max-height: 172px;
  }

  .product-grid-body {
    padding: 18px 20px 16px;
    gap: 6px;
  }

  .product-grid-category {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
  }

  .product-grid-title {
    font-size: 1.15rem;
    line-height: 1.15;
  }

  .product-card-color-dots {
    gap:5px;
  }

  .product-card-color-dot {
    width:16px;
    height:16px;
    flex-basis:16px;
  }

  .product-card-color-dots--large {
    gap:8px;
    min-height:34px;
  }

  .product-card-color-dots--large .product-card-color-dot {
    width:32px;
    height:32px;
    flex-basis:32px;
  }

  .product-card-color-dots--large .product-card-color-more {
    min-width:32px;
    height:24px;
    padding:0 8px;
    font-size:0.76rem;
  }

  .product-grid-price {
    gap: 10px;
  }

  .product-grid-price strong {
    font-size: 1.55rem;
    line-height: 1.05;
  }

  .product-grid-footer {
    padding: 14px 20px 18px;
  }

  .product-grid-footer .btn {
    min-height: 52px;
    font-size: 1.14rem;
  }
}

.filter-title {
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-dark);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-primary);
}

.filter-item a {
  color: var(--color-text);
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.filter-item a:hover,
.filter-item a.active { color: var(--color-primary); font-weight: 600; }

/* ===================== PRODUCT DETAIL ===================== */
.product-detail .product-image-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 560px;
  background:
    radial-gradient(circle at top right, rgba(239, 140, 60, 0.14), transparent 34%),
    linear-gradient(180deg, #fffefb 0%, #f8f3eb 100%);
  border-radius: 28px;
  padding: 28px;
  text-align: center;
  border: 1px solid var(--color-border);
  margin-bottom: 15px;
  box-shadow: 0 26px 60px rgba(27, 20, 13, 0.08);
  overflow: hidden;
}

.product-detail .product-image-main img {
  width: auto;
  height: auto;
  max-height: min(72vh, 640px);
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 34px rgba(33, 24, 17, 0.14));
}

.product-detail .product-info { padding-left: 20px; }

.product-detail .price-big {
  font-size: 2.2rem;
  font-weight: 700;
  /* The price is a fact, not the call to action: ink, as on every other
     detail page. The orange belongs to the basket button under it. */
  color: var(--color-ink);
}

.product-detail .price-without-vat {
  font-size: 1rem;
  color: var(--color-muted);
}

/*
  The parameters on a standalone product (the accessories), written in the same
  language as the door detail's own "Parametre" band - see .detail-spec-row in
  shop/_detail_styles: the label plain on the left, the value in display type on
  the right, a hairline under each row and no panel around them. It used to sit
  in a tinted box, which read as a warning rather than as a spec list.

  Only the row rhythm is tighter than the band's: 16px where the band has 42px,
  because this list stands in the column beside the photo rather than across a
  full-width section.
*/
.product-attrs { margin: 12px 0 0; }

.product-attr-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--color-green-200);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.product-attr-row:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.product-attr-label { flex: 1 1 50%; font-weight: 400; }
.product-attr-value { flex: 1 1 50%; font-weight: 600; text-align: right; }

@media (max-width: 575.98px) {
  .product-attr-row { font-size: 16px; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; }
}

/* ===================== CART ===================== */
.cart-table th {
  background: var(--color-bg);
  border-color: var(--color-border);
  font-weight: 600;
  color: var(--color-dark);
}

.cart-table td { vertical-align: middle; }

.cart-summary-box {
  background: var(--color-bg);
  border-radius: var(--border-radius);
  padding: 25px;
  border: 1px solid var(--color-border);
}

/* ===================== CHECKOUT ===================== */
.checkout-form .form-label {
  font-weight: 500;
  color: var(--color-dark);
}

.checkout-form .form-control,
.checkout-form .form-select {
  border-color: var(--color-border);
  border-radius: var(--border-radius-sm);
  padding: 10px 15px;
}

.checkout-form .form-control:focus,
.checkout-form .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(239, 140, 60, 0.25);
}

.order-summary-box {
  background: var(--color-bg);
  border-radius: var(--border-radius);
  padding: 25px;
  border: 1px solid var(--color-border);
  position: sticky;
  top: 90px;
}

.payment-option, .shipping-option {
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  padding: 15px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 10px;
}

.payment-option:has(input:checked),
.shipping-option:has(input:checked) {
  border-color: var(--color-primary);
  background: rgba(239, 140, 60, 0.05);
}

/* ===================== THANK YOU PAGE ===================== */
.thankyou-box {
  text-align: center;
  padding: 60px 30px;
}

.thankyou-icon {
  width: 80px;
  height: 80px;
  background: #e8f5e9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
  font-size: 40px;
}

/* ===================== ADMIN ===================== */
/*
  height, not min-height: the sidebar is fixed, so min-height let the menu
  grow past the bottom of the screen with no way to reach what was down
  there - the list is long enough now that the last items were simply
  unreachable on a 16:10 screen at 100% zoom. Bounded to the viewport and
  laid out as a column, the brand stays put and the menu itself scrolls.
*/
.admin-sidebar {
  width: 240px;
  height: 100vh;
  background: #2c2c2c;
  color: white;
  position: fixed;
  left: 0;
  top: 0;
  padding: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.admin-sidebar .sidebar-brand {
  flex: 0 0 auto;
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* The X in the drawer and the hamburger in the header: both only exist on
   a phone, where the sidebar has nowhere to sit beside the content. */
.admin-sidebar-close,
.admin-nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.admin-sidebar-close { color: rgba(255,255,255,0.8); }
.admin-sidebar-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.admin-nav-toggle { color: #2c2c2c; margin-left: -8px; }
.admin-nav-toggle:hover { background: #f0f0f0; }

.admin-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 190;
  opacity: 0;
  transition: opacity 0.25s;
}

/* The scrolling part. overscroll-behavior keeps a flick that reaches the end
   of the menu from carrying on into the page behind it. */
.admin-sidebar nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}

.admin-sidebar nav::-webkit-scrollbar { width: 8px; }
.admin-sidebar nav::-webkit-scrollbar-track { background: transparent; }

.admin-sidebar nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.22);
  border-radius: 4px;
}

.admin-sidebar nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); }

.admin-sidebar .sidebar-brand span { color: var(--color-primary); }

.admin-sidebar .nav-link {
  color: rgba(255,255,255,0.7) !important;
  padding: 12px 20px !important;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s;
  border-left: 3px solid transparent;
}

.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
  color: white !important;
  background: rgba(255,255,255,0.1);
  border-left-color: var(--color-primary);
}

.admin-content {
  margin-left: 240px;
  padding: 30px;
  background: #f8f8f8;
  min-height: 100vh;
}

.admin-header {
  background: white;
  padding: 15px 30px;
  margin: -30px -30px 30px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-card {
  background: white;
  border-radius: var(--border-radius-sm);
  padding: 20px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 15px;
}

.stat-card .stat-icon {
  width: 50px;
  height: 50px;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.stat-card .stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 3px;
}

.stat-card .stat-label {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.admin-card {
  background: white;
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.admin-card-header {
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-table th {
  background: #f8f8f8;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--color-muted);
  border-bottom: 2px solid #e0e0e0;
}

.admin-table td { vertical-align: middle; }

/* Status badges */
.badge-new { background: #e3f2fd; color: #1565c0; }
.badge-confirmed { background: #e8f5e9; color: #2e7d32; }
.badge-processing { background: #fff3e0; color: #e65100; }
.badge-shipped { background: #f3e5f5; color: #6a1b9a; }
.badge-delivered { background: #e8f5e9; color: #1b5e20; }
.badge-cancelled { background: #ffebee; color: #b71c1c; }

/* ===================== FOOTER ===================== */
/*
 * The design renders the footer as an inset sage panel with a large radius,
 * floating on the page background rather than a full-bleed dark bar.
 */
.site-footer {
  background: transparent;
  color: var(--color-dark);
  padding: 0 0 24px;
  border-top: 0;
}

.site-footer > .container {
  background: var(--color-sage);
  border-radius: var(--border-radius-panel);
  padding: 48px 48px 0;
  overflow: hidden;
}

.site-footer h5 {
  color: var(--color-dark);
  font-weight: 600;
  margin-bottom: 18px;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0;
}

.site-footer a {
  color: var(--color-dark);
  text-decoration: none;
  font-size: 0.95rem;
  display: block;
  padding: 6px 0;
  transition: opacity 0.2s;
}

.site-footer a:hover {
  color: var(--color-dark);
  opacity: 0.62;
}

.site-footer p { color: var(--color-dark); }

.site-footer .footer-bottom {
  border-top: 1px solid rgba(32, 35, 28, 0.14);
  margin: 40px -48px 0;
  padding: 20px 48px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Newsletter signup in the footer's first column. */
.footer-newsletter-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 14px;
}

.footer-newsletter-input {
  width: 100%;
  max-width: 360px;
  padding: 14px 18px;
  border: 1px solid transparent;
  border-radius: var(--border-radius-sm);
  background: var(--color-white);
  color: var(--color-dark);
  font-family: inherit;
  font-size: 0.95rem;
}

.footer-newsletter-input::placeholder { color: var(--color-muted); }

.footer-newsletter-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.footer-newsletter-note {
  max-width: 360px;
  margin: 10px 0 18px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(32, 35, 28, 0.72);
}

.footer-newsletter-note a {
  display: inline;
  padding: 0;
  text-decoration: underline;
  font-size: inherit;
}

/* Rounded-square social tiles. */
.footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: var(--border-radius-sm);
  background: var(--color-bg-alt);
  color: var(--color-dark);
  font-size: 1.05rem;
  transition: all 0.2s;
}

.footer-social a:hover {
  opacity: 1;
  background: var(--color-white);
  transform: translateY(-2px);
}

.site-footer .payment-icons { margin-top: 0; }

/* ===================== BREADCRUMB ===================== */
.breadcrumb-section {
  background: var(--color-bg);
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.breadcrumb { margin: 0; font-size: 0.85rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--color-muted); }
.breadcrumb-item a { color: var(--color-text); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--color-primary); }
.breadcrumb-item.active { color: var(--color-muted); }

/* ===================== ALERTS ===================== */
.alert { border-radius: var(--border-radius-sm); border: none; }
.alert-success { background: #e8f5e9; color: #2e7d32; }
.alert-danger { background: #ffebee; color: #c62828; }
.alert-info { background: #e3f2fd; color: #1565c0; }

/* ===================== PAGINATION ===================== */
.pagination .page-link {
  color: var(--color-dark);
  border-color: var(--color-border);
  border-radius: 8px;
  margin: 0 2px;
}

.pagination .page-item.active .page-link {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.pagination .page-link:hover { color: var(--color-primary); }

/* Responsive */
@media (max-width: 768px) {
  .hero-section h1 { font-size: 2rem; }

  /* Admin: the sidebar becomes a drawer, opened from the header. */
  .admin-sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    width: min(300px, 85vw);
    box-shadow: 0 0 30px rgba(0,0,0,0.35);
  }
  .admin-nav-open .admin-sidebar { transform: translateX(0); }
  .admin-sidebar-close,
  .admin-nav-toggle { display: inline-flex; }
  .admin-sidebar-backdrop { display: block; pointer-events: none; }
  .admin-nav-open .admin-sidebar-backdrop { opacity: 1; pointer-events: auto; }
  .admin-nav-open { overflow: hidden; }

  .admin-content { margin-left: 0; padding: 20px; }
  .admin-header {
    padding: 12px 20px;
    margin: -20px -20px 20px;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .admin-header h4 { font-size: 1.1rem; }
  .product-detail .product-info { padding-left: 0; margin-top: 20px; }
}

/* =====================================================================
   DESIGN SYSTEM COMPONENTS
   Recurring pieces from the Figma design (docs/design/SPEC.md).
   Defined once here because each appears in several sections/pages.
   ===================================================================== */

/* ---- Section heading row: title left, optional action right ---- */
.section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.section-title {
  margin: 0;
  font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-dark);
}

/* ---- Pill badges ---- */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-dark);
  white-space: nowrap;
}

.badge-stock { background: var(--color-stock); }
.badge-online { background: var(--color-online); }
/* Outside advice hours the badge goes quiet rather than green, the same way the
   one on a product page does. */
.badge-offline { background: var(--color-green-200); color: var(--color-green-600); }
.badge-neutral { background: var(--color-bg-alt); }
.badge-muted { background: var(--color-muted-2); }

/* Brand chips (Invado / Porta / Erkado) sitting on a sage panel. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.chip {
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--color-bg-alt);
  color: var(--color-dark);
  font-size: 0.82rem;
  line-height: 1.3;
}

/* ---- Advisor contact pill (utility bar, calculator banner, footer) ---- */
.advisor-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 8px 8px;
  border-radius: var(--border-radius-sm);
  background: var(--color-white);
}

.advisor-pill__avatar {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* Green presence dot on the advisor avatar. */
.advisor-pill__avatar-wrap {
  position: relative;
  flex-shrink: 0;
  line-height: 0;
}

.advisor-pill__avatar-wrap::after {
  content: '';
  position: absolute;
  top: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--color-white);
  border-radius: 50%;
  background: #22c55e;
}

/* Outside advice hours the dot goes quiet, the same way the badge beside it
   does. It used to be green around the clock, which told someone reading the
   site at eleven at night that a person was sitting by the phone. The class is
   on the body - see layouts/app - so this one rule covers the header pill, the
   footer and the calculator banner at once. */
body.advisor-offline .advisor-pill__avatar-wrap::after {
  background: var(--color-green-300);
}

.advisor-pill__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.advisor-pill__contact {
  display: inline-block;
  padding: 0;
  color: var(--color-dark);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: underline;
  white-space: nowrap;
}

/* ---- Colour swatch row on product cards ---- */
.swatch-label {
  margin-bottom: 6px;
  font-size: 0.78rem;
  color: var(--color-muted);
}

.swatch-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.swatch {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(32, 35, 28, 0.14);
  border-radius: 50%;
}

/* ---- Carousel controls ---- */
.carousel-shell { position: relative; }

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-dark);
  box-shadow: 0 6px 20px rgba(32, 35, 28, 0.14);
  transition: all 0.2s;
}

.carousel-arrow:hover {
  background: var(--color-bg-alt);
  box-shadow: 0 8px 26px rgba(32, 35, 28, 0.2);
}

.carousel-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.carousel-arrow--prev { left: -18px; }
.carousel-arrow--next { right: -18px; }

.carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}

.carousel-dot {
  width: 26px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--color-border);
  transition: background 0.2s;
}

.carousel-dot.is-active { background: var(--color-sage-dark); }

/* ---- Sage panel (calculator banner, reviews, footer-like blocks) ---- */
.panel-sage {
  position: relative;
  border-radius: var(--border-radius-panel);
  background: var(--color-sage);
  padding: 44px;
  overflow: hidden;
}

.panel-muted {
  border-radius: var(--border-radius-panel);
  background: var(--color-muted-1);
  padding: 44px;
}

.panel-inset {
  border-radius: var(--border-radius-panel);
  background: var(--color-bg);
  padding: 44px;
}

/* ---- Opening calculator inputs ---- */
.calc-field { margin-bottom: 14px; }

.calc-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  color: var(--color-dark);
}

.calc-input {
  width: 100%;
  padding: 15px 18px;
  border: 1px solid transparent;
  border-radius: var(--border-radius-sm);
  background: var(--color-white);
  color: var(--color-dark);
  font-family: inherit;
  font-size: 0.95rem;
}

.calc-input::placeholder { color: var(--color-muted); }

.calc-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/*
 * The optional "mail me the result" field (partials/opening-calculator-email-field).
 *
 * It is separated from the three measurements by a rule rather than just
 * spacing: the dimensions are what the calculator needs, this is the extra the
 * visitor may leave blank, and the boundary has to be visible at a glance.
 *
 * The --inline variant sits on the sage hero and banner panels; --panel sits on
 * the white form card on the calculator page. Only the rule colour differs, so
 * the shared geometry is declared once.
 */
.calc-email-field {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-green-300);
}

.calc-email-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  color: var(--color-dark);
}

/*
 * The line saying what the address is for, above the field rather than under
 * it - the visitor decides whether to type at all on it, so it leads. Set the
 * same way as the listing's copy of this field: the accent the button carries,
 * bold, at the label's size, and in caps.
 */
.calc-email-hint {
  display: block;
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-orange-500);
}

/* Each sentence of the hint on its own line: the ask, then what happens if you
   say yes. A block span breaks where the sentence ends rather than wherever the
   column runs out. */
.calc-email-hint__line {
  display: block;
}

/* Only the question carries the weight. The line under it says what happens
   next, which is reassurance rather than the ask, and it reads as the quieter
   of the two. The sibling selector means a one-line wording keeps its bold. */
.calc-email-hint__line + .calc-email-hint__line {
  font-weight: 400;
}

/* On the sage panels the ramp step above the fill reads as a rule, not a line
   drawn on top of it. */
.calc-email-field--inline {
  border-top-color: rgba(255, 255, 255, 0.42);
}

/* The accent holds on the sage fills too - the line is the same offer there. */

/* ---- "Mail me this filtering" form, inside the komplety calculator box ----
 *
 * It is a box of its own now, not a divided-off foot of the warm one above it.
 * The two say different things - what the calculator did, and whether the
 * visitor wants it mailed - and sharing a border read as one long panel. This
 * one takes the category hero's fill, so the form is plainly the thing being
 * offered rather than a footnote.
 */
.calc-filter-note {
  margin-bottom: 16px;
  padding: 16px 18px;
  border: 1px solid #f2d4bc;
  border-radius: 18px;
  background: #fff7ef;
}

.calc-filter-note__kicker {
  margin-bottom: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b86a2f;
}

.calc-filter-note__body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-ink);
}

.calc-filter-mail {
  margin-bottom: 24px;
  padding: 18px;
  border-radius: 18px;
  /* The same fill the category hero carries at the top of the page. */
  background: linear-gradient(90deg, var(--color-green-200) 0%, var(--color-green-300) 100%);
  color: var(--color-ink);
}

.calc-filter-mail__label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  /* Plain weight: the line above it is the ask, and this is only the name of
     the box under it. Two bold lines running together read as one shout. */
  font-weight: 400;
  color: var(--color-ink);
}

.calc-filter-mail__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Grows to fill the row, but may wrap the button under it once the box is
   narrower than a legible address field. */
.calc-filter-mail__input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid #fff;
  border-radius: 12px;
  background: #fff;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--color-ink);
}

.calc-filter-mail__input::placeholder { color: var(--color-green-500); }

.calc-filter-mail__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(239, 135, 57, 0.2);
}

/* The shop's own accent, the same gradient every other button carries. */
.calc-filter-mail__button {
  flex: 0 0 auto;
  padding: 10px 22px;
  border: 0;
  border-radius: 12px;
  background: var(--gradient-primary);
  color: var(--color-orange-950);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}

.calc-filter-mail__button:hover { filter: brightness(0.97); }

.calc-filter-mail__button[disabled] {
  opacity: 0.6;
  cursor: default;
}

/*
 * What the address is for, said above the field rather than under it - the
 * visitor decides whether to type at all on this line, so it leads. Set in the
 * ink, not the accent: on this sage fill the orange fought the box it sits in,
 * and the line is a question rather than a call to action - the button below is
 * the only thing here that needs the accent.
 */
.calc-filter-mail__hint {
  display: block;
  margin: 0 0 10px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink);
}

/* On this fill the muted green reads as disabled; the sentence is a question
   being asked, so it is set in ink like the rest of the box. */
.calc-filter-mail .calc-consent { color: var(--color-ink); }

.calc-filter-mail__status {
  margin-top: 8px;
  font-size: 0.85rem;
  line-height: 1.45;
}

.calc-filter-mail__status--ok { color: #2f6b3a; }
.calc-filter-mail__status--error { color: #b3261e; }

/* ---- Marketing consent tick, under either address field ----
 *
 * Never pre-checked, and kept visually separate from the address above it: the
 * two are different questions, and a tick that reads as part of the field it
 * sits under is not a tick anyone can be said to have made.
 *
 * align-items:flex-start so the box stays on the first line of a sentence that
 * wraps to three; the label wraps the input so the whole sentence is the hit
 * area.
 */
.calc-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 12px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-muted);
  cursor: pointer;
}

.calc-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0 0;
  cursor: pointer;
}

/* ---- Benefits bar (appears twice on the homepage) ---- */
.benefits-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding: 30px 40px;
  border-radius: var(--border-radius-panel);
  background: var(--color-muted-2);
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--border-radius-sm);
  background: var(--color-muted-3);
  color: var(--color-dark);
  font-size: 1.1rem;
}

.benefit-text {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--color-dark);
}

.benefit-text strong { font-weight: 600; }

@media (max-width: 991px) {
  .benefits-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 26px;
  }
}

@media (max-width: 575px) {
  .benefits-bar { grid-template-columns: 1fr; }
  .panel-sage,
  .panel-muted,
  .panel-inset { padding: 26px; }
  .site-footer > .container { padding: 32px 22px 0; }
  .site-footer .footer-bottom {
    margin: 30px -22px 0;
    padding: 18px 22px;
    justify-content: flex-start;
  }
}

/* =====================================================================
   HEADER REFINEMENTS (Figma design)
   ===================================================================== */

/* The utility bar is white in the design, separated by a hairline only. */
.header-top {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted);
}

.header-utility-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  min-width: 0;
}

.header-top .header-utility-nav a {
  margin-left: 0;
  color: var(--color-muted);
  font-size: 0.875rem;
  white-space: nowrap;
  transition: color 0.2s;
}

.header-top .header-utility-nav a:hover,
.header-top .header-utility-nav a.active {
  color: var(--color-dark);
}

/* In the utility bar the advisor pill has no card background of its own. */
.advisor-pill--bare {
  background: transparent;
  padding: 0;
  gap: 10px;
}

/* Cart is a plain text+icon action in the design, not a bordered pill. */
.cart-btn {
  background: transparent;
  border: 0;
  border-radius: var(--border-radius-sm);
  padding: 8px 10px;
}

.cart-btn:hover {
  background: var(--color-bg-alt);
  border-color: transparent;
  color: var(--color-dark);
}

.cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-dark);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
}

/* Search trigger loses the warm-beige treatment for the neutral palette. */
.header-search-trigger {
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-dark);
  box-shadow: none;
}

.header-search-trigger:hover,
.header-search-trigger[aria-expanded="true"] {
  background: var(--color-bg-alt);
  border-color: var(--color-muted-3);
  color: var(--color-dark);
  box-shadow: none;
}

.main-nav .nav-link {
  font-weight: 500;
  font-size: 1rem;
}

.main-nav .nav-link:hover,
.main-nav .nav-link.active {
  color: var(--color-dark) !important;
  background: var(--color-bg-alt);
}

/* The category nav sits centred between the logo and the header actions: both
   outer items share the same flex basis, so the middle one lands on the axis. */
.site-header .header-main .header-actions {
  flex: 1 1 0;
  justify-content: flex-end;
  min-width: 0;
}

.site-header .header-main .main-nav {
  flex: 0 1 auto;
  justify-content: center;
}

/* Hairline separating the search trigger from the cart. */
.header-action-divider {
  width: 1px;
  height: 26px;
  background: var(--color-border);
  border-radius: 1px;
  flex-shrink: 0;
}

@media (max-width: 991px) {
  .header-utility-nav { gap: 16px; }
}

/* =====================================================================
   PRODUCT CARD (Figma design)
   Overrides the base card above: warm white surface, no border, badge
   column over the image, and a full-width orange CTA in the footer.
   ===================================================================== */
.product-card {
  background: var(--color-card);
  border: 1px solid transparent;
  border-radius: var(--border-radius-card);
  position: relative;
}

.product-card:hover {
  border-color: var(--color-border);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

/* Badges stack in the top-left corner, over the image. */
.product-card-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.product-card .product-image {
  background: transparent;
  padding: 26px 20px 10px;
  height: auto;
  min-height: 240px;
}

.product-card .product-image img {
  max-height: var(--group-card-image-max-height, 260px);
}

.product-card .product-body { padding: 4px 20px 0; }

.product-card .product-category {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--color-dark);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0;
}

/* The decor line under a search result's title. It is the one thing that
   separates two cards for the same model, so it is legible rather than fine
   print, but still quieter than the name above it. */
.product-card-decor {
  margin-top: 2px;
  color: var(--color-green-700, #575f4c);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
}

.product-card-title {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-dark);
  text-transform: uppercase;
  flex: 0 0 auto;
}

.product-card-text {
  margin: 0 0 12px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card .product-price {
  margin-top: auto;
  margin-bottom: 0;
  padding-bottom: 14px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-dark);
}

.product-card .product-footer {
  padding: 0 20px 20px;
  border-top: 0;
}

.product-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Swatch dots inside the card reuse the shared .swatch-row spacing. */
.product-card .product-card-color-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.product-card .product-card-color-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(32, 35, 28, 0.4);
  background-size: cover;
  background-position: center;
}

.product-card .product-card-color-more {
  font-size: 0.75rem;
  color: var(--color-muted);
}

@media (max-width: 575px) {
  .product-card .product-image { min-height: 180px; padding: 18px 14px 8px; }
  .product-card .product-body { padding: 4px 14px 0; }
  .product-card .product-footer { padding: 0 14px 14px; }
  .product-card-badges { top: 10px; left: 10px; }
}

/* =====================================================================
   CART & CHECKOUT (Figma "Nakupny proces")
   Targets the class names already used by cart/index.blade.php and
   checkout/index.blade.php. See docs/design/SPEC.md.
   ===================================================================== */

.cart-page-title,
.checkout-page-title {
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-dark);
}

/* Line items read as flat light cards rather than a bordered table. */
.cart-items-card {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.cart-table-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.cart-table thead th {
  background: transparent;
  color: var(--color-muted);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 0;
  padding: 0 18px 10px;
}

.cart-table tbody tr {
  background: var(--color-card);
  border-radius: var(--border-radius-card);
}

.cart-table tbody td {
  border: 0;
  padding: 18px;
  background: var(--color-card);
}

/* Round only the outer corners of each row. */
.cart-table tbody td:first-child {
  border-top-left-radius: var(--border-radius-card);
  border-bottom-left-radius: var(--border-radius-card);
}

.cart-table tbody td:last-child {
  border-top-right-radius: var(--border-radius-card);
  border-bottom-right-radius: var(--border-radius-card);
}

/* Spacer row effect between line items. */
.cart-table { border-collapse: separate; border-spacing: 0 12px; }

.cart-item-image,
.cart-item-placeholder {
  border-radius: var(--border-radius-sm);
  background: var(--color-white);
}

.cart-item-placeholder { color: var(--color-muted); }

.cart-item-name {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-dark);
}

.cart-item-code { color: var(--color-muted); }

/* ---- Order summary: warm accent card anchoring the primary action ---- */
.cart-summary-card {
  padding: 30px;
  border: 0;
  border-radius: var(--border-radius-panel);
  background: linear-gradient(180deg, var(--color-accent-tint) 0%, var(--color-accent-tint-deep) 100%);
  box-shadow: none;
}

.cart-summary-stat,
.cart-summary-total {
  border: 0;
  background: transparent;
}

.cart-summary-stat-label { color: var(--color-dark); font-size: 0.95rem; }
.cart-summary-stat-value { color: var(--color-dark); font-size: 0.95rem; }

.cart-summary-total {
  border-top: 1px solid rgba(32, 35, 28, 0.12);
  margin-top: 12px;
  padding-top: 16px;
}

.cart-summary-total .cart-summary-stat-label { font-size: 1.3rem; font-weight: 600; }
.cart-summary-total .cart-summary-stat-value { font-size: 1.3rem; font-weight: 600; }
.cart-summary-total .small { color: var(--color-muted); }

.cart-stock-alert { border-radius: var(--border-radius-sm); }

/* Quantity stepper shared with the product detail page. */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  background: var(--color-white);
}

.qty-stepper button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--color-dark);
  transition: background 0.2s;
}

.qty-stepper button:hover { background: var(--color-bg-alt); }
.qty-stepper button:disabled { opacity: 0.35; cursor: not-allowed; }

.qty-stepper input {
  width: 46px;
  border: 0;
  background: transparent;
  color: var(--color-dark);
  font-weight: 600;
  text-align: center;
}

.qty-stepper input:focus { outline: none; }

/* ---- Checkout ---- */
.checkout-card,
.checkout-section {
  padding: 28px;
  border: 0;
  border-radius: var(--border-radius-panel);
  background: var(--color-card);
}

.checkout-card .form-control,
.checkout-card .form-select,
.checkout-section .form-control,
.checkout-section .form-select {
  padding: 13px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  background-color: var(--color-white);
  color: var(--color-dark);
}

.checkout-card .form-control:focus,
.checkout-card .form-select:focus,
.checkout-section .form-control:focus,
.checkout-section .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: none;
}

@media (max-width: 991px) {
  .cart-table tbody td { padding: 14px; }
}

@media (max-width: 575px) {
  .cart-summary-card { padding: 22px; }
  .checkout-card,
  .checkout-section { padding: 20px; }
}