/** Shopify CDN: Minification failed

Line 37:0 All "@import" rules must come first

**/
/* ==========================================================================
   ECLOHER™ — Custom CSS for Shopify Horizon Theme
   Paste this into: Online Store → Themes → Edit Code → Assets → base.css
   (Paste at the very bottom of base.css, after all existing code)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (BRAND TOKENS)
   -------------------------------------------------------------------------- */
:root {
  --ec-gold:         #C9A84C;
  --ec-gold-dark:    #A8852A;
  --ec-gold-light:   #E8C97A;
  --ec-rose:         #B05070;
  --ec-black:        #8B1A3A;
  --ec-dark:         #FC8EAC;
  --ec-dark-2:       #6B1028;
  --ec-border:       #C9A84C;
  --ec-text:         #2C0A1A;
  --ec-text-muted:    #E8C97A;
  --ec-text-soft:    #D4B05A;
  --ec-radius-pill:  50px;
  --ec-radius-card:  6px;
  --ec-transition:   0.25s ease;
  --ec-font-serif:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --ec-font-sans:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. GOOGLE FONTS IMPORT
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   3. GLOBAL OVERRIDES
   -------------------------------------------------------------------------- */
body {
  background-color: var(--ec-black);
  color: var(--ec-text);
  font-family: var(--ec-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3 {
  font-family: var(--ec-font-serif);
  color: var(--ec-text);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   4. ANNOUNCEMENT BAR
   -------------------------------------------------------------------------- */
.announcement-bar {
  background-color: var(--ec-rose) !important;
  color: #fff !important;
  font-family: var(--ec-font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  padding: 9px 16px !important;
  text-align: center !important;
}

.announcement-bar a,
.announcement-bar p,
.announcement-bar span {
  color: #fff !important;
  text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   5. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.header,
.site-header,
header.header {
  background-color: var(--ec-black) !important;
  border-bottom: 1px solid var(--ec-border) !important;
  padding: 16px 40px !important;
}

/* Logo text */
.header__heading-link,
.header__heading,
.site-header__logo {
  font-family: var(--ec-font-serif) !important;
  color: var(--ec-gold) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  line-height: 1.1 !important;
}

/* Logo tagline — add via Theme Editor "Logo subtext" if available,
   or via the Liquid snippet (see ecloher-header-logo.liquid) */
.ec-logo-tagline {
  display: block;
  font-family: var(--ec-font-sans);
  font-size: 8px;
  font-weight: 300;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ec-gold);
  margin-top: 2px;
}

/* Nav links */
.header__menu-item,
.header__menu-item a,
.site-nav__link {
  font-family: var(--ec-font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #aaaaaa !important;
  transition: color var(--ec-transition) !important;
  text-decoration: none !important;
}

.header__menu-item:hover a,
.header__menu-item a:hover,
.site-nav__link:hover {
  color: var(--ec-gold) !important;
}

/* Active nav link (Shop page) */
.header__menu-item--active a,
.header__menu-item[aria-current] a {
  color: var(--ec-gold) !important;
  border-bottom: 1.5px solid var(--ec-gold) !important;
  padding-bottom: 3px !important;
}

/* Header icons */
.header__icon svg,
.header__icon path,
.cart-count-bubble {
  color: #aaaaaa !important;
  fill: #aaaaaa !important;
  stroke: #aaaaaa !important;
  transition: color var(--ec-transition) !important;
}

.header__icon:hover svg,
.header__icon:hover path {
  color: var(--ec-gold) !important;
  fill: var(--ec-gold) !important;
  stroke: var(--ec-gold) !important;
}

/* Cart bubble count */
.cart-count-bubble {
  background-color: var(--ec-gold) !important;
  color: var(--ec-black) !important;
}

/* --------------------------------------------------------------------------
   6. HERO BANNER SECTION
   -------------------------------------------------------------------------- */
.ec-hero,
section.ec-hero {
  background-color: #0f0a0f;
  padding: 72px 40px 52px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Shopify image banner overrides */
.banner,
.banner--content-align-center {
  background-color: #0f0a0f !important;
  min-height: 520px !important;
}

.banner__media {
  opacity: 0.45 !important;
}

/* Eyebrow label above hero heading */
.banner__kicker,
.ec-eyebrow {
  display: block;
  font-family: var(--ec-font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--ec-gold);
  margin-bottom: 16px;
}

/* Hero heading */
.banner__heading,
.banner .title {
  font-family: var(--ec-font-serif) !important;
  font-size: clamp(32px, 5vw, 52px) !important;
  font-weight: 400 !important;
  color: #fff !important;
  line-height: 1.15 !important;
  margin-bottom: 18px !important;
}

/* Italic gold portion of heading — wrap "Your Radiance" in <em> in the editor */
.banner__heading em,
.banner .title em {
  font-style: italic !important;
  color: var(--ec-gold) !important;
  font-family: var(--ec-font-serif) !important;
}

/* Hero subtext */
.banner__text,
.banner p {
  font-family: var(--ec-font-sans) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  color: var(--ec-text-soft) !important;
  line-height: 1.8 !important;
  max-width: 520px !important;
  margin: 0 auto 32px !important;
}

/* Hero buttons */
.banner__buttons {
  display: flex !important;
  gap: 14px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin-bottom: 52px !important;
}

/* Primary gold button */
.button--primary,
.banner .button:first-child,
.ec-btn-primary {
  background-color: var(--ec-gold) !important;
  color: var(--ec-black) !important;
  border: 2px solid var(--ec-gold) !important;
  font-family: var(--ec-font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  padding: 14px 32px !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: background-color var(--ec-transition), color var(--ec-transition) !important;
}

.button--primary:hover,
.banner .button:first-child:hover,
.ec-btn-primary:hover {
  background-color: var(--ec-gold-dark) !important;
  border-color: var(--ec-gold-dark) !important;
  color: #fff !important;
}

/* Secondary outline button */
.button--secondary,
.banner .button:last-child,
.ec-btn-secondary {
  background-color: transparent !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  font-family: var(--ec-font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  padding: 14px 32px !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: background-color var(--ec-transition), color var(--ec-transition) !important;
}

.button--secondary:hover,
.banner .button:last-child:hover,
.ec-btn-secondary:hover {
  background-color: rgba(255,255,255,0.1) !important;
}

/* --------------------------------------------------------------------------
   7. TRUST / ICON ROW (below hero buttons)
   -------------------------------------------------------------------------- */
.ec-trust-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ec-border);
  padding-top: 36px;
  max-width: 800px;
  margin: 0 auto;
}

.ec-trust-item {
  text-align: center;
  padding: 0 12px;
}

.ec-trust-item + .ec-trust-item {
  border-left: 1px solid var(--ec-border);
}

.ec-trust-icon {
  color: var(--ec-gold);
  font-size: 24px;
  margin-bottom: 10px;
  display: block;
}

.ec-trust-label {
  font-family: var(--ec-font-sans);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  line-height: 1.3;
}

.ec-trust-desc {
  font-family: var(--ec-font-sans);
  font-size: 10px;
  font-weight: 300;
  color: var(--ec-text-muted);
  letter-spacing: 0.5px;
}

/* Horizon "Feature" columns block used for trust icons */
.feature-list {
  background-color: var(--ec-black) !important;
  padding: 36px 40px !important;
  border-top: 1px solid var(--ec-border) !important;
}

.feature-list__item-heading {
  font-family: var(--ec-font-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #fff !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
}

.feature-list__item-text {
  font-family: var(--ec-font-sans) !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  color: var(--ec-text-muted) !important;
}

.feature-list__icon {
  color: var(--ec-gold) !important;
  fill: var(--ec-gold) !important;
}

/* --------------------------------------------------------------------------
   8. COLLECTION FILTER BAR (Category Tabs + Search)
   -------------------------------------------------------------------------- */
.facets,
.facets-container,
.collection__filters {
  background-color: var(--ec-black) !important;
  border-bottom: 1px solid var(--ec-border) !important;
  padding: 0 32px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
}

/* Filter/tab labels */
.facets__label,
.facets-container .facets__label,
.collection__filter-group-label {
  font-family: var(--ec-font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #777 !important;
  padding: 18px 18px !important;
  cursor: pointer !important;
  border: none !important;
  background: transparent !important;
  transition: color var(--ec-transition) !important;
  white-space: nowrap !important;
}

.facets__label:hover,
.collection__filter-group-label:hover {
  color: var(--ec-gold) !important;
}

/* Active filter pill */
.active-facets__button,
.active-facets .facets-remove,
.facets__label.active,
.collection__filter-tag--active {
  background-color: var(--ec-gold) !important;
  color: var(--ec-black) !important;
  font-family: var(--ec-font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border-radius: var(--ec-radius-pill) !important;
  padding: 8px 20px !important;
  margin: 8px !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color var(--ec-transition) !important;
}

.active-facets__button:hover,
.active-facets .facets-remove:hover {
  background-color: var(--ec-gold-dark) !important;
}

/* Search bar within collection */
.search__input,
.search-modal__input,
.facets__search input {
  background-color: var(--ec-dark-2) !important;
  border: 1px solid var(--ec-border) !important;
  color: #fff !important;
  font-family: var(--ec-font-sans) !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  padding: 10px 40px 10px 16px !important;
  border-radius: 0 !important;
  outline: none !important;
  transition: border-color var(--ec-transition) !important;
  min-width: 220px !important;
}

.search__input::placeholder,
.facets__search input::placeholder {
  color: #555 !important;
}

.search__input:focus,
.facets__search input:focus {
  border-color: var(--ec-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(201,168,76,0.15) !important;
}

/* Search icon button */
.search__button,
.facets__search .search__button {
  background-color: var(--ec-gold) !important;
  color: var(--ec-black) !important;
  border: none !important;
  padding: 10px 14px !important;
  cursor: pointer !important;
  transition: background-color var(--ec-transition) !important;
}

.search__button:hover {
  background-color: var(--ec-gold-dark) !important;
}

/* --------------------------------------------------------------------------
   9. PRODUCT GRID
   -------------------------------------------------------------------------- */
.collection,
.collection__grid,
.product-grid {
  background-color: var(--ec-black) !important;
  padding: 32px 32px 48px !important;
}

.product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 24px !important;
}

/* --------------------------------------------------------------------------
   10. PRODUCT CARD
   -------------------------------------------------------------------------- */
.card-wrapper,
.product-card-wrapper {
  border-radius: var(--ec-radius-card) !important;
  overflow: hidden !important;
}

.card,
.card--product {
  background-color: var(--ec-dark) !important;
  border: 1px solid var(--ec-border) !important;
  border-radius: var(--ec-radius-card) !important;
  overflow: hidden !important;
  transition: border-color var(--ec-transition), transform var(--ec-transition) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.card:hover,
.card--product:hover {
  border-color: var(--ec-gold) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(201,168,76,0.12) !important;
}

/* Card image container */
.card__media,
.card--product .card__media {
  background: linear-gradient(150deg, #1a0e14 0%, #0f0a12 50%, #14100f 100%) !important;
  overflow: hidden !important;
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
}

.card__media img {
  object-fit: contain !important;
  transition: transform 0.4s ease !important;
  padding: 20px !important;
}

.card:hover .card__media img,
.card--product:hover .card__media img {
  transform: scale(1.04) !important;
}

/* Card body */
.card__content,
.card__information {
  background-color: var(--ec-dark) !important;
  padding: 18px 20px 20px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Card product title */
.card__heading,
.card__heading a,
.card--product .card__heading {
  font-family: var(--ec-font-serif) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #fff !important;
  line-height: 1.35 !important;
  margin-bottom: 10px !important;
  text-decoration: none !important;
  transition: color var(--ec-transition) !important;
}

.card__heading a:hover {
  color: var(--ec-gold) !important;
}

/* Star rating */
.rating,
.product-card__rating {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-bottom: 8px !important;
}

.rating__star {
  color: var(--ec-gold) !important;
  font-size: 14px !important;
}

.rating__count {
  font-family: var(--ec-font-sans) !important;
  font-size: 11px !important;
  color: var(--ec-text-muted) !important;
  font-weight: 300 !important;
}

/* Price */
.price,
.card__price,
.price-item--regular {
  font-family: var(--ec-font-sans) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ec-gold) !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 16px !important;
}

.price--on-sale .price-item--sale {
  color: var(--ec-gold) !important;
}

.price--on-sale .price-item--regular {
  color: var(--ec-text-muted) !important;
  text-decoration: line-through !important;
  font-size: 13px !important;
}

/* "Add to cart" / "View Product" button on card */
.card__footer .button,
.product-card__add-to-cart,
.quick-add__submit,
.ec-card-btn {
  width: 100% !important;
  background-color: var(--ec-gold) !important;
  color: var(--ec-black) !important;
  border: 2px solid var(--ec-gold) !important;
  font-family: var(--ec-font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  padding: 14px 20px !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  text-align: center !important;
  display: block !important;
  text-decoration: none !important;
  margin-top: auto !important;
  transition: background-color var(--ec-transition), color var(--ec-transition) !important;
}

.card__footer .button:hover,
.quick-add__submit:hover,
.ec-card-btn:hover {
  background-color: var(--ec-gold-dark) !important;
  border-color: var(--ec-gold-dark) !important;
  color: #fff !important;
}

/* "NEW" badge on card */
.card__badge,
.badge,
.product-badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  background-color: var(--ec-gold) !important;
  color: var(--ec-black) !important;
  font-family: var(--ec-font-sans) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 4px 12px !important;
  border-radius: 50px !important;
  z-index: 2 !important;
  line-height: 1.5 !important;
}

/* Sale badge variant */
.badge--sale {
  background-color: var(--ec-rose) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   11. FORMULA STATS BAR
   -------------------------------------------------------------------------- */
.ec-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 32px 48px;
  border: 1px solid var(--ec-border);
  background-color: var(--ec-dark);
}

.ec-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 20px;
  border-right: 1px solid var(--ec-border);
}

.ec-stat:last-child {
  border-right: none;
}

.ec-stat__icon {
  color: var(--ec-gold);
  font-size: 26px;
  flex-shrink: 0;
}

.ec-stat__num {
  font-family: var(--ec-font-serif);
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  line-height: 1.1;
}

.ec-stat__desc {
  font-family: var(--ec-font-sans);
  font-size: 10px;
  font-weight: 300;
  color: var(--ec-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.4;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   12. SORT BY DROPDOWN
   -------------------------------------------------------------------------- */
.facets__sort .select,
.collection__sort select {
  background-color: var(--ec-dark-2) !important;
  border: 1px solid var(--ec-border) !important;
  color: var(--ec-text-muted) !important;
  font-family: var(--ec-font-sans) !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  padding: 8px 32px 8px 14px !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* --------------------------------------------------------------------------
   13. PAGINATION
   -------------------------------------------------------------------------- */
.pagination {
  background-color: var(--ec-black) !important;
  padding: 32px !important;
}

.pagination__item a,
.pagination__item button,
.pagination .page-link {
  background-color: transparent !important;
  border: 1px solid var(--ec-border) !important;
  color: var(--ec-text-muted) !important;
  font-family: var(--ec-font-sans) !important;
  font-size: 12px !important;
  padding: 8px 14px !important;
  transition: all var(--ec-transition) !important;
}

.pagination__item--current a,
.pagination__item a:hover,
.pagination .page-link:hover {
  background-color: var(--ec-gold) !important;
  border-color: var(--ec-gold) !important;
  color: var(--ec-black) !important;
}

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.footer,
footer.footer {
  background-color: var(--ec-dark) !important;
  border-top: 1px solid var(--ec-border) !important;
  color: var(--ec-text-muted) !important;
  font-family: var(--ec-font-sans) !important;
}

.footer__heading,
.footer-block__heading {
  font-family: var(--ec-font-serif) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  margin-bottom: 16px !important;
}

.footer-block__link,
.footer__list a,
.footer a {
  color: var(--ec-text-muted) !important;
  font-family: var(--ec-font-sans) !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  transition: color var(--ec-transition) !important;
}

.footer-block__link:hover,
.footer__list a:hover {
  color: var(--ec-gold) !important;
}

.footer__copyright,
.footer__copyright-content {
  color: #444 !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
}

/* Newsletter input in footer */
.footer .newsletter-form__input,
.footer-block .field__input {
  background-color: var(--ec-dark-2) !important;
  border: 1px solid var(--ec-border) !important;
  border-right: none !important;
  color: #fff !important;
  font-family: var(--ec-font-sans) !important;
  font-size: 12px !important;
  padding: 12px 16px !important;
  border-radius: 0 !important;
}

.footer .newsletter-form__button,
.footer-block .field__button {
  background-color: var(--ec-gold) !important;
  color: var(--ec-black) !important;
  font-family: var(--ec-font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border: none !important;
  padding: 12px 20px !important;
  cursor: pointer !important;
  transition: background-color var(--ec-transition) !important;
}

.footer .newsletter-form__button:hover {
  background-color: var(--ec-gold-dark) !important;
}

/* --------------------------------------------------------------------------
   15. SCROLL-TO-TOP / MISC UI
   -------------------------------------------------------------------------- */
.back-to-top,
#back-to-top {
  background-color: var(--ec-gold) !important;
  color: var(--ec-black) !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Loader/spinner */
.loading-overlay__spinner .path,
.spinner {
  stroke: var(--ec-gold) !important;
}

/* --------------------------------------------------------------------------
   16. MOBILE RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

  .header,
  .site-header,
  header.header {
    padding: 14px 20px !important;
  }

  /* Stack nav items behind hamburger — Horizon handles this automatically
     These overrides style the mobile drawer */
  .menu-drawer {
    background-color: var(--ec-black) !important;
    border-right: 1px solid var(--ec-border) !important;
  }

  .menu-drawer__navigation a,
  .menu-drawer__menu-item {
    color: #fff !important;
    font-family: var(--ec-font-sans) !important;
    font-size: 14px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--ec-border) !important;
    padding: 16px 20px !important;
  }

  /* Hero */
  .banner,
  .ec-hero {
    padding: 48px 20px 36px !important;
    min-height: auto !important;
  }

  .banner__heading,
  .banner .title {
    font-size: 30px !important;
  }

  /* Trust bar — 2 columns on mobile */
  .ec-trust-bar {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 0 !important;
  }

  .ec-trust-item + .ec-trust-item:nth-child(2n+1) {
    border-left: none !important;
  }

  /* Filter bar — horizontal scroll on mobile */
  .facets,
  .facets-container,
  .collection__filters {
    padding: 0 16px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .facets::-webkit-scrollbar {
    display: none !important;
  }

  .facets__search,
  .ec-search {
    min-width: 160px !important;
    flex-shrink: 0 !important;
  }

  /* Product grid — 1 column on mobile, 2 on tablet */
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 16px !important;
    padding: 20px 16px 32px !important;
  }

  /* Stats bar — 2x2 on mobile */
  .ec-stats-bar {
    grid-template-columns: repeat(2, 1fr) !important;
    margin: 0 16px 32px !important;
  }

  .ec-stat {
    border-right: none !important;
    border-bottom: 1px solid var(--ec-border) !important;
  }

  .ec-stat:nth-child(odd) {
    border-right: 1px solid var(--ec-border) !important;
  }

  .ec-stat:nth-child(3),
  .ec-stat:nth-child(4) {
    border-bottom: none !important;
  }

  .collection,
  .collection__grid {
    padding: 20px 16px 32px !important;
  }

  /* Buttons full width on mobile */
  .banner__buttons {
    flex-direction: column !important;
    align-items: center !important;
  }

  .button--primary,
  .button--secondary {
    width: 80% !important;
    text-align: center !important;
  }

  /* Feature / trust row — Horizon block on mobile */
  .feature-list {
    padding: 28px 20px !important;
  }

  .feature-list__list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: 1fr !important;
  }

  .banner__heading,
  .banner .title {
    font-size: 26px !important;
  }

  .ec-trust-bar {
    grid-template-columns: 1fr 1fr !important;
  }

  .card__heading,
  .card__heading a {
    font-size: 14px !important;
  }
}

/* --------------------------------------------------------------------------
   17. FOCUS ACCESSIBILITY
   -------------------------------------------------------------------------- */
*:focus-visible {
  outline: 2px solid var(--ec-gold) !important;
  outline-offset: 3px !important;
}

/* --------------------------------------------------------------------------
   18. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .card:hover,
  .card--product:hover {
    transform: none !important;
  }
}