/* Soft / System claymorphism layer — retains the Market Plus brand palette. */
:root {
  --clay-surface: #f7f8f2;
  --clay-surface-light: #ffffff;
  --clay-shadow-dark: rgba(9, 68, 61, 0.14);
  --clay-shadow-soft: rgba(9, 68, 61, 0.08);
  --clay-highlight: rgba(255, 255, 255, 0.92);
  --clay-raised:
    12px 12px 26px var(--clay-shadow-dark),
    -10px -10px 24px var(--clay-highlight),
    inset 1px 1px 0 rgba(255, 255, 255, 0.72);
  --clay-raised-soft:
    8px 8px 18px var(--clay-shadow-soft),
    -7px -7px 16px rgba(255, 255, 255, 0.8),
    inset 1px 1px 0 rgba(255, 255, 255, 0.7);
  --clay-pressed:
    inset 5px 5px 11px rgba(9, 68, 61, 0.18),
    inset -5px -5px 11px rgba(255, 255, 255, 0.88);
  --clay-dark-raised:
    12px 12px 28px rgba(1, 20, 18, 0.48),
    -7px -7px 18px rgba(28, 94, 82, 0.2),
    inset 1px 1px 0 rgba(255, 255, 255, 0.08);
}

/* Social links: compact, accessible, and intentionally free of glow effects. */
.social-links {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.social-link {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: #cbe47b;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 13px;
  text-decoration: none;
  box-shadow: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.social-link svg {
  width: 22px;
  height: 22px;
}

.social-link:hover,
.social-link:focus-visible {
  color: #031f1c;
  background: #9ec52a;
  border-color: #9ec52a;
  transform: translateY(-2px);
  outline: none;
}

.social-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(67, 178, 189, 0.45);
}

/* Header and navigation */
.site-header {
  border-bottom-color: transparent !important;
  box-shadow: 0 10px 28px rgba(9, 68, 61, 0.1);
}

.menu-toggle,
.home-link,
.submenu {
  border-color: rgba(255, 255, 255, 0.72) !important;
  box-shadow: var(--clay-raised-soft) !important;
}

.menu-toggle:active,
.home-link:active {
  box-shadow: var(--clay-pressed) !important;
  transform: translateY(1px);
}

.nav-links a.nav-link,
.nav-links > a,
.nav-parent {
  border: 1px solid transparent;
}

.nav-links a.nav-link:hover,
.nav-links > a:hover,
.nav-parent:hover {
  border-color: rgba(255, 255, 255, 0.74);
  background: rgba(255, 255, 255, 0.52);
  box-shadow: var(--clay-raised-soft);
}

.nav-links a.is-active,
.nav-links a.nav-link.is-active {
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    8px 8px 18px rgba(9, 68, 61, 0.22),
    -6px -6px 15px rgba(255, 255, 255, 0.78),
    inset 1px 1px 0 rgba(255, 255, 255, 0.22) !important;
}

/* Buttons feel raised at rest and gently pressed when selected. */
.button,
.brand-action {
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    8px 8px 18px rgba(9, 68, 61, 0.2),
    -5px -5px 15px rgba(255, 255, 255, 0.56),
    inset 1px 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.button:active,
.brand-card:active .brand-action {
  transform: translateY(1px) !important;
  box-shadow:
    inset 5px 5px 11px rgba(3, 31, 28, 0.22),
    inset -4px -4px 10px rgba(255, 255, 255, 0.18) !important;
}

.button-secondary,
.button-light,
.home-link {
  background: linear-gradient(145deg, #ffffff, #f0f2ec) !important;
}

/* Main light surfaces */
.hero-image-wrap,
.brand-card,
.brand-feature-panel img,
.legal-card {
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  border-radius: 28px !important;
  box-shadow: var(--clay-raised) !important;
}

.hero-card {
  border-radius: 22px !important;
  box-shadow:
    12px 12px 26px rgba(3, 31, 28, 0.32),
    -7px -7px 18px rgba(255, 255, 255, 0.13),
    inset 1px 1px 0 rgba(255, 255, 255, 0.16) !important;
}

.year-badge,
.service-icon,
.retailer-list li::before {
  box-shadow:
    7px 7px 15px rgba(9, 68, 61, 0.2),
    -5px -5px 13px rgba(255, 255, 255, 0.54),
    inset 1px 1px 0 rgba(255, 255, 255, 0.34);
}

/* Keep service icons clean and flat while preserving their colour and shape. */
.service-icon {
  box-shadow: none !important;
}

.about-grid {
  gap: 1.2rem !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
}

.value-card,
.retailer-list li {
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, #ffffff, #f1f3ed) !important;
  box-shadow: var(--clay-raised-soft);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.value-card:hover,
.retailer-list li:hover {
  transform: translateY(-3px);
  box-shadow: var(--clay-raised);
}

/* Dark brand panels retain the same green palette with soft depth. */
.service-grid {
  gap: 1.25rem !important;
}

.service-card,
.route-card,
.contact-panel {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 28px !important;
  box-shadow: var(--clay-dark-raised) !important;
}

.service-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow:
    15px 15px 32px rgba(1, 20, 18, 0.52),
    -8px -8px 20px rgba(28, 94, 82, 0.23),
    inset 1px 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.route-card,
.contact-panel {
  overflow: hidden;
}

.contact-copy {
  box-shadow: inset -12px 0 28px rgba(3, 31, 28, 0.2);
}

/* Form fields are softly recessed, like the reference system UI. */
.field input,
.field textarea,
.field select {
  border-color: rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow:
    inset 5px 5px 12px rgba(1, 20, 18, 0.5),
    inset -4px -4px 10px rgba(255, 255, 255, 0.055) !important;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  box-shadow:
    inset 5px 5px 12px rgba(1, 20, 18, 0.5),
    inset -4px -4px 10px rgba(255, 255, 255, 0.055),
    0 0 0 3px rgba(157, 197, 41, 0.18) !important;
}

/* Brand and product catalogue surfaces */
.brand-card {
  background: linear-gradient(145deg, #ffffff, #f0f2ec) !important;
}

.brand-action {
  margin: 0 1rem 1rem;
}

.product-grid {
  gap: 1.5rem !important;
}

.product-face {
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 24px !important;
  box-shadow: var(--clay-raised-soft) !important;
}

.product-card:hover .product-face,
.product-card:focus-visible .product-face {
  box-shadow: var(--clay-raised) !important;
}

.product-image {
  background: linear-gradient(145deg, #ffffff, #eef2eb) !important;
}

.flip-hint,
.catalogue-note {
  box-shadow:
    5px 5px 12px rgba(9, 68, 61, 0.16),
    -4px -4px 10px rgba(255, 255, 255, 0.62);
}

.legal-card section + section {
  border-top-color: rgba(9, 68, 61, 0.1) !important;
}

a:focus-visible,
button:focus-visible,
.product-card:focus-visible {
  outline: 3px solid rgba(157, 197, 41, 0.65);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  :root {
    --clay-raised:
      8px 8px 18px rgba(9, 68, 61, 0.13),
      -6px -6px 15px rgba(255, 255, 255, 0.82),
      inset 1px 1px 0 rgba(255, 255, 255, 0.68);
  }

  .nav-links.open {
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    box-shadow: var(--clay-raised) !important;
  }

  .nav-links a.nav-link,
  .nav-links > a,
  .nav-parent {
    border-radius: 14px !important;
  }

  .brand-card,
  .hero-image-wrap,
  .brand-feature-panel img,
  .route-card,
  .contact-panel,
  .legal-card {
    border-radius: 22px !important;
  }

  .value-card,
  .retailer-list li,
  .product-face,
  .service-card {
    border-radius: 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .value-card,
  .retailer-list li,
  .service-card {
    transition: none !important;
  }
}

/* Site-wide soft shade: reduces glare without muting brand colours or images. */
:root {
  --paper: #edf0e9;
  --white: #f7f9f5;
  --clay-surface: #edf0e9;
  --clay-surface-light: #f7f9f5;
  --clay-highlight: rgba(255, 255, 255, 0.68);
  --clay-raised:
    12px 12px 26px var(--clay-shadow-dark),
    -10px -10px 24px var(--clay-highlight),
    inset 1px 1px 0 rgba(255, 255, 255, 0.5);
  --clay-raised-soft:
    8px 8px 18px var(--clay-shadow-soft),
    -7px -7px 16px rgba(255, 255, 255, 0.56),
    inset 1px 1px 0 rgba(255, 255, 255, 0.48);
}

body {
  background: var(--paper) !important;
}

.site-header {
  background: rgba(237, 240, 233, 0.96) !important;
}

.hero,
.brands-page,
.brand-hero,
.legal-hero {
  background:
    radial-gradient(circle at 9% 5%, rgba(158, 197, 42, 0.14), transparent 27%),
    linear-gradient(135deg, #f3f5ea, #e7ece7) !important;
}

.catalogue {
  background: #e4eae3 !important;
}

.value-card,
.retailer-list li,
.brand-card,
.legal-card,
.product-face {
  background: linear-gradient(145deg, #f8faf6, #ebefe8) !important;
}

.product-image,
.product-back {
  background: linear-gradient(145deg, #f6f8f3, #e8ede6) !important;
}

.button-secondary,
.button-light,
.home-link,
.menu-toggle,
.submenu,
.slider-arrow {
  background: linear-gradient(145deg, #f7f9f5, #e9ede7) !important;
}

/* Remove bright edge highlights while retaining gentle, natural depth. */
:root {
  --clay-highlight: transparent;
  --clay-raised: 10px 12px 26px rgba(9, 68, 61, 0.14);
  --clay-raised-soft: 7px 9px 18px rgba(9, 68, 61, 0.1);
  --clay-pressed: inset 4px 4px 10px rgba(9, 68, 61, 0.16);
  --clay-dark-raised: 12px 14px 28px rgba(1, 20, 18, 0.42);
}

.menu-toggle,
.home-link,
.submenu,
.nav-links.open,
.hero-image-wrap,
.brand-card,
.brand-feature-panel img,
.legal-card,
.value-card,
.retailer-list li,
.product-face {
  border-color: rgba(9, 68, 61, 0.14) !important;
}

.nav-links a.nav-link:hover,
.nav-links > a:hover,
.nav-parent:hover {
  border-color: rgba(9, 68, 61, 0.12) !important;
}

.nav-links a.is-active,
.nav-links a.nav-link.is-active {
  box-shadow: 7px 9px 18px rgba(9, 68, 61, 0.2) !important;
}

.button,
.brand-action,
.slider-arrow {
  border-color: rgba(9, 68, 61, 0.14) !important;
  box-shadow: 7px 9px 18px rgba(9, 68, 61, 0.16) !important;
}

.button:active,
.brand-card:active .brand-action,
.slider-arrow:active {
  box-shadow: inset 4px 4px 10px rgba(9, 68, 61, 0.17) !important;
}

.hero-card {
  box-shadow: 11px 13px 26px rgba(3, 31, 28, 0.32) !important;
}

.year-badge,
.retailer-list li::before {
  box-shadow: 6px 8px 15px rgba(9, 68, 61, 0.18) !important;
}

.service-card,
.route-card,
.contact-panel {
  border-color: rgba(255, 255, 255, 0.07) !important;
}

.service-card:hover {
  box-shadow: 14px 16px 32px rgba(1, 20, 18, 0.5) !important;
}

.field input,
.field textarea,
.field select {
  box-shadow: inset 5px 5px 12px rgba(1, 20, 18, 0.48) !important;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  box-shadow:
    inset 5px 5px 12px rgba(1, 20, 18, 0.48),
    0 0 0 3px rgba(157, 197, 41, 0.18) !important;
}

.flip-hint,
.catalogue-note {
  box-shadow: 5px 7px 12px rgba(9, 68, 61, 0.15) !important;
}