/* ===========================================================================
   overrides.css - static token bindings for the whole storefront
   ---------------------------------------------------------------------------
   Extracted from an inline <style> block that used to live in the Blade layout.
   Loaded LAST (after theme.min.css, laravel-storefront.css, storefront.css and
   source-inline.css) on every storefront page, so header / footer / product-card
   styling is identical site-wide.

   Everything here references CSS custom properties only. The values those
   properties resolve to are emitted once per request by
   resources/views/partials/theme-vars.blade.php from the Admin > Tools > Colours
   settings, so this file never needs to change when a colour is edited.
   =========================================================================== */

body.storefront-body { background: var(--bg); color: var(--text) }

/* Header */
.site-header { background: var(--bg) !important; border-bottom-color: var(--border) !important }
.announcement {
  background: linear-gradient(105deg, var(--primary), var(--primary-hover)) !important;
  color: var(--color-white);
  border-bottom-color: var(--border) !important;
}

/* Surfaces: drawers, filters, cards, modals */
.mobile-drawer,
.catalog-filters,
.buy-box,
.form-card,
.content-card,
.modal,
.popup-backdrop .promo-popup { background: var(--bg) !important; border-color: var(--border) !important }

/* Page + section backgrounds */
.home-section,
.section { background: var(--bg) !important }
.muted-section,
.seo-content-section { background: var(--bg) !important }
.catalog-section,
.product-page { background: var(--bg) !important }
.page-hero,
.catalog-hero { background: var(--card-bg) !important }

/* Buttons */
.btn,
.category-menu-button,
.search-form button,
.product-card-button,
.footer-newsletter button,
.product-tab-nav button.active {
  background: var(--primary) !important;
  color: var(--color-white) !important;
  border-color: var(--primary) !important;
}
.btn-white,
.btn-outline,
.btn-light {
  background: var(--bg) !important;
  color: var(--primary) !important;
  border-color: var(--border) !important;
}

/* Navigation + search */
.nav-bar { background: var(--card-bg) !important; border-top-color: var(--border) !important }
.search-form { background: var(--bg) !important; border-color: var(--border) !important }

/* Form controls */
.input,
.select,
.textarea { background: var(--bg) !important; border-color: var(--border) !important; color: var(--text) !important }

/* Borders */
.empty,
.promo-popup,
.product-content-shell,
.order-summary,
.review-form,
.product-stage,
.product-thumb,
.brand-tile,
.wellness-grid a,
.guide-grid article { border-color: var(--border) !important }

/* Links */
a:hover { color: var(--primary-hover) }

/* Product detail brand link */
.td-accord-body td a, .td-spec strong a { color: var(--color-primary); text-decoration: underline }