/**
 * HOPSTOCK — Boutique Plants CSS
 * 
 * Couleurs brand guidelines :
 * - Primary dark:    #2c4241
 * - Primary cream:   #fffcf2
 * - Secondary:       #68A691, #49a179, #689689
 * - Accent red:      #FF595E
 * Typo : Noto Sans (brand) + JetBrains Mono (données)
 * 
 * Scoped : tous les sélecteurs commencent par .hop- pour éviter les conflits
 */

/* ============================================================
   VARIABLES
   ============================================================ */
.hop-catalog {
  --hop-dark: #2c4241;
  --hop-cream: #fffcf2;
  --hop-green-1: #68A691;
  --hop-green-2: #49a179;
  --hop-green-3: #689689;
  --hop-red: #FF595E;
  --hop-bg: #f8f7f3;
  --hop-card: #ffffff;
  --hop-text: #2c4241;
  --hop-muted: #6b7d7c;
  --hop-border: #e4e0d8;
  --hop-border-lt: #f0ede6;
  --hop-stock-ok: #49a179;
  --hop-stock-low: #d4963a;
  --hop-stock-out: #FF595E;
  --hop-shadow-sm: 0 1px 3px rgba(44,66,65,0.06);
  --hop-shadow-md: 0 4px 16px rgba(44,66,65,0.08);
  --hop-shadow-hover: 0 8px 24px rgba(44,66,65,0.12);
  --hop-radius: 8px;
  --hop-radius-lg: 12px;
  --hop-radius-full: 9999px;
  
  font-family: 'Noto Sans', -apple-system, sans-serif;
  color: var(--hop-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.hop-page-header {
  background: var(--hop-dark);
  padding: 48px 32px 40px;
  color: var(--hop-cream);
  position: relative;
  overflow: hidden;
}
.hop-page-header::after {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(104,166,145,0.2) 0%, transparent 70%);
  pointer-events: none;
}
.hop-header-inner { max-width: 1200px; margin: 0 auto; }
.hop-breadcrumb {
  font-size: 13px;
  color: rgba(255,252,242,0.5);
  margin-bottom: 16px;
}
.hop-breadcrumb a {
  color: rgba(255,252,242,0.5);
  text-decoration: none;
  transition: color 0.2s;
}
.hop-breadcrumb a:hover { color: var(--hop-cream); }
.hop-page-header h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}
.hop-subtitle {
  font-size: 15px;
  color: rgba(255,252,242,0.7);
  font-weight: 300;
  max-width: 600px;
}
.hop-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 6px 14px;
  background: rgba(255,252,242,0.1);
  border: 1px solid rgba(255,252,242,0.15);
  border-radius: var(--hop-radius-full);
  font-size: 13px;
}

/* ============================================================
   CONTROLS BAR
   ============================================================ */
.hop-controls {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.hop-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--hop-card);
  border: 1px solid var(--hop-border);
  border-radius: var(--hop-radius);
  padding: 9px 14px;
  width: 260px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.hop-search-box:focus-within {
  border-color: var(--hop-green-2);
  box-shadow: 0 0 0 3px rgba(73,161,121,0.12);
}
.hop-search-box input {
  border: none; background: none; outline: none;
  font-size: 14px; width: 100%;
  font-family: inherit; color: var(--hop-text);
}
.hop-search-box input::placeholder { color: var(--hop-muted); }
.hop-search-icon { font-size: 14px; }

/* Filter buttons & dropdowns */
.hop-filter-group { position: relative; }
.hop-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: var(--hop-card);
  border: 1px solid var(--hop-border);
  border-radius: var(--hop-radius);
  font-size: 13px;
  color: var(--hop-muted);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  white-space: nowrap;
}
.hop-filter-btn:hover {
  border-color: var(--hop-green-2);
  color: var(--hop-text);
}
.hop-filter-btn.active {
  background: rgba(73,161,121,0.08);
  border-color: var(--hop-green-2);
  color: var(--hop-green-2);
  font-weight: 500;
}

.hop-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--hop-card);
  border: 1px solid var(--hop-border);
  border-radius: var(--hop-radius);
  box-shadow: var(--hop-shadow-md);
  padding: 12px 16px;
  z-index: 100;
  min-width: 200px;
}
.hop-dropdown.open { display: block; }
.hop-dropdown label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  cursor: pointer;
  color: var(--hop-text);
}
.hop-dropdown label:hover { color: var(--hop-green-2); }
.hop-dropdown input[type="checkbox"],
.hop-dropdown input[type="radio"] {
  accent-color: var(--hop-green-2);
}
.hop-range-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hop-range-group input[type="number"] {
  width: 70px;
  padding: 6px 8px;
  border: 1px solid var(--hop-border);
  border-radius: 4px;
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  text-align: center;
}

.hop-spacer { flex: 1; }

/* Sort */
.hop-sort-select {
  padding: 9px 12px;
  border: 1px solid var(--hop-border);
  border-radius: var(--hop-radius);
  font-size: 13px;
  font-family: inherit;
  color: var(--hop-text);
  background: var(--hop-card);
  cursor: pointer;
}

/* View toggle */
.hop-view-toggle {
  display: flex;
  border: 1px solid var(--hop-border);
  border-radius: var(--hop-radius);
  overflow: hidden;
}
.hop-view-toggle button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 36px;
  border: none;
  background: var(--hop-card);
  cursor: pointer;
  color: var(--hop-muted);
  transition: all 0.2s;
  font-size: 16px;
}
.hop-view-toggle button + button { border-left: 1px solid var(--hop-border); }
.hop-view-toggle button.active {
  background: var(--hop-dark);
  color: var(--hop-cream);
}

/* ============================================================
   FILTER CHIPS
   ============================================================ */
.hop-filter-chips {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.hop-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(73,161,121,0.1);
  color: var(--hop-green-2);
  border-radius: var(--hop-radius-full);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.hop-chip:hover { background: rgba(73,161,121,0.18); }
.hop-chip-x { opacity: 0.5; font-size: 14px; }
.hop-chip-x:hover { opacity: 1; }
.hop-chip-clear {
  color: var(--hop-muted);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hop-result-count {
  font-size: 13px;
  color: var(--hop-muted);
  margin-left: auto;
}

/* ============================================================
   LIST VIEW
   ============================================================ */
.hop-list-view {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 40px;
}
.hop-list-header {
  display: grid;
  grid-template-columns: 2.5fr 1fr 0.8fr 0.8fr 0.7fr 0.7fr 200px;
  gap: 12px;
  padding: 10px 20px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--hop-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--hop-border);
}
.hop-product-row {
  display: grid;
  grid-template-columns: 2.5fr 1fr 0.8fr 0.8fr 0.7fr 0.7fr 200px;
  gap: 12px;
  padding: 14px 20px;
  background: var(--hop-card);
  border: 1px solid var(--hop-border-lt);
  border-radius: var(--hop-radius);
  margin-bottom: 6px;
  align-items: center;
  transition: all 0.2s;
  text-decoration: none;
  color: inherit;
}
.hop-product-row:hover {
  border-color: var(--hop-green-1);
  box-shadow: var(--hop-shadow-md);
}

/* Product identity is the clickable part */
.hop-product-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.hop-thumb {
  width: 48px; height: 48px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--hop-border-lt);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hop-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hop-placeholder { font-size: 22px; }
.hop-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--hop-text);
  line-height: 1.3;
  text-decoration: none;
}
/* Supprimer TOUS les soulignements dans le catalogue */
.hop-catalog a,
.hop-catalog a:hover,
.hop-catalog a:visited,
.hop-catalog a:focus {
  text-decoration: none;
}
.hop-sku {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--hop-muted);
  margin-top: 2px;
}
.hop-bio-dot {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--hop-stock-ok);
  margin-left: 6px;
  padding: 1px 6px;
  background: rgba(73,161,121,0.1);
  border-radius: var(--hop-radius-full);
}
.hop-muted { color: var(--hop-muted); font-size: 13px; }

/* Alpha bar */
.hop-alpha-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hop-alpha-track {
  flex: 1;
  height: 5px;
  background: var(--hop-border-lt);
  border-radius: 3px;
  overflow: hidden;
  max-width: 80px;
}
.hop-alpha-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.hop-alpha-fill.low  { background: var(--hop-green-1); }
.hop-alpha-fill.mid  { background: var(--hop-stock-low); }
.hop-alpha-fill.high { background: var(--hop-red); }
.hop-alpha-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  min-width: 32px;
}

/* Badges */
.hop-badge {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--hop-radius-full);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.hop-badge.badge-fort   { background: rgba(73,161,121,0.12); color: var(--hop-stock-ok); }
.hop-badge.badge-moyen  { background: rgba(212,150,58,0.12); color: var(--hop-stock-low); }
.hop-badge.badge-faible { background: rgba(255,89,94,0.1);   color: var(--hop-stock-out); }

.hop-format-badge {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--hop-radius-full);
  font-size: 12px;
  font-weight: 500;
  background: var(--hop-border-lt);
  color: var(--hop-muted);
  white-space: nowrap;
}
.hop-format-badge.pot     { background: rgba(73,161,121,0.08); color: var(--hop-green-2); }
.hop-format-badge.racine  { background: rgba(44,66,65,0.08);   color: var(--hop-dark); }
.hop-format-badge.racine2 { background: rgba(104,166,145,0.12);color: #4a8876; }
.hop-format-badge.xxl     { background: rgba(212,150,58,0.1);  color: #b8841f; }
.hop-format-badge.kit     { background: rgba(255,89,94,0.08);  color: var(--hop-red); }

.hop-price-cell {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 14px;
}
/* Overrider le style WooCommerce par défaut pour les prix */
.hop-price-cell .woocommerce-Price-amount {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 14px !important;
}
.hop-price-cell del { opacity: 0.5; font-size: 12px; }
.hop-price-cell ins { text-decoration: none; }

/* Stock dots */
.hop-stock-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
}
.hop-stock-dot::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hop-stock-dot.in::before  { background: var(--hop-stock-ok); }
.hop-stock-dot.in  { color: var(--hop-stock-ok); }
.hop-stock-dot.out::before { background: var(--hop-stock-out); }
.hop-stock-dot.out { color: var(--hop-stock-out); }
.hop-stock-dot.low::before { background: var(--hop-stock-low); }
.hop-stock-dot.low { color: var(--hop-stock-low); }

/* Row actions */
.hop-row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}
.hop-action-btn {
  width: 32px; height: 32px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hop-muted);
  transition: all 0.15s;
  font-size: 14px;
}
.hop-action-btn:hover {
  background: rgba(73,161,121,0.1);
  color: var(--hop-green-2);
}

/* No results */
.hop-no-results {
  padding: 60px 20px;
  text-align: center;
  color: var(--hop-muted);
}
.hop-no-results a {
  color: var(--hop-green-2);
  text-decoration: underline;
}

/* ============================================================
   GRID / CARD VIEW
   ============================================================ */
.hop-grid-view {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 40px;
  display: none; /* Hidden by default on desktop */
}
.hop-grid-view.visible { display: block; }
.hop-list-view.hidden  { display: none; }

.hop-product-card {
  background: var(--hop-card);
  border: 1px solid var(--hop-border-lt);
  border-radius: var(--hop-radius-lg);
  overflow: hidden;
  transition: all 0.2s;
  color: inherit;
}
.hop-product-card:hover {
  border-color: var(--hop-green-1);
  box-shadow: var(--hop-shadow-hover);
}
.hop-card-img {
  display: block;
  width: 100%;
  height: 160px;
  background: var(--hop-border-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.hop-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hop-card-placeholder { font-size: 48px; }
.hop-card-badges-top {
  position: absolute;
  top: 8px; left: 8px;
  display: flex;
  gap: 4px;
}
.hop-card-body { padding: 16px; }
.hop-card-body .hop-name { font-size: 15px; margin-bottom: 10px; }
.hop-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.hop-card-alpha {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--hop-muted);
}
.hop-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--hop-border-lt);
}
.hop-card-price {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 16px;
}
.hop-card-action {
  padding: 7px 16px;
  background: var(--hop-dark);
  color: var(--hop-cream);
  border: none;
  border-radius: var(--hop-radius);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.hop-card-action:hover { background: #3d5a59; }
.hop-card-action.hop-out {
  background: var(--hop-border-lt);
  color: var(--hop-muted);
  cursor: not-allowed;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.hop-pagination {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 48px;
  display: flex;
  justify-content: center;
}
.hop-pagination ul {
  display: flex;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.hop-pagination li { display: flex; }
.hop-pagination a,
.hop-pagination span {
  width: 36px; height: 36px;
  border-radius: var(--hop-radius);
  border: 1px solid var(--hop-border);
  background: var(--hop-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  text-decoration: none;
  color: var(--hop-text);
  transition: all 0.2s;
}
.hop-pagination a:hover {
  border-color: var(--hop-green-2);
  color: var(--hop-green-2);
}
.hop-pagination .current {
  background: var(--hop-dark);
  border-color: var(--hop-dark);
  color: var(--hop-cream);
}

/* ============================================================
   SEO CONTENT
   ============================================================ */
.hop-seo-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px;
  border-top: 1px solid var(--hop-border);
}
.hop-seo-content h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}
.hop-seo-content h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 20px 0 8px;
}
.hop-seo-content p {
  font-size: 14px;
  color: var(--hop-muted);
  line-height: 1.8;
  margin-bottom: 12px;
  max-width: 800px;
}
.hop-seo-content a { color: var(--hop-green-2); }

/* ============================================================
   RANGE SLIDER — Acides Alpha
   ============================================================ */
.hop-dropdown-wide { min-width: 260px; }
.hop-range-labels {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--hop-text);
  margin-bottom: 4px;
}
.hop-range-slider {
  position: relative;
  height: 36px;
  display: flex;
  align-items: center;
}
.hop-range-track {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 4px;
  background: var(--hop-border);
  border-radius: 2px;
  transform: translateY(-50%);
}
.hop-range-track-fill {
  position: absolute;
  height: 100%;
  background: var(--hop-green-2);
  border-radius: 2px;
  left: 0; width: 100%;
  transition: left 0.05s, width 0.05s;
}
.hop-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  width: 100%;
  height: 36px;
  background: transparent;
  pointer-events: none;
  z-index: 2;
  margin: 0;
  padding: 0;
}
.hop-range-thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--hop-card);
  border: 2px solid var(--hop-green-2);
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: transform 0.15s, box-shadow 0.15s;
}
.hop-range-thumb::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(73,161,121,0.3);
}
.hop-range-thumb::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--hop-card);
  border: 2px solid var(--hop-green-2);
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.hop-range-thumb-min { z-index: 3; }
.hop-range-thumb-max { z-index: 4; }
.hop-range-hint {
  font-size: 11px;
  color: var(--hop-muted);
  margin-top: 4px;
}

/* Promo badge */
.hop-promo-dot {
  display: inline-flex;
  font-size: 9px;
  font-weight: 700;
  color: white;
  background: var(--hop-red);
  padding: 1px 6px;
  border-radius: var(--hop-radius-full);
  margin-left: 6px;
  letter-spacing: 0.5px;
}

/* ============================================================
   GRID VIEW — body wrapper for JS injection
   ============================================================ */
.hop-grid-view #hop-grid-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

/* Sortable headers */
.hop-sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.hop-sortable:hover { color: var(--hop-green-2); }
.hop-sortable.sort-asc,
.hop-sortable.sort-desc {
  color: var(--hop-green-2);
  font-weight: 700;
}

/* Card name */
.hop-card-name {
  display: block;
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 8px;
  min-height: 36px;
}

/* Card price block */
.hop-card-price-block {
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.hop-card-ttc {
  font-size: 10px;
  color: var(--hop-muted);
}

/* Grid qty — smaller, visible number */
.hop-qty-sm .hop-qty-input {
  width: 28px;
  font-size: 12px;
  padding: 0;
  text-align: center;
}
.hop-qty-sm .hop-qty-btn {
  width: 22px;
  font-size: 11px;
}

/* ============================================================
   CHIP FILTERS (format + rendement selectable chips)
   ============================================================ */
.hop-chip-filters-row {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 8px;
}
.hop-chip-filters-row .hop-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--hop-muted);
  margin-right: 10px;
  display: inline;
}
.hop-chip-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: var(--hop-card);
  border: 1px solid var(--hop-border);
  border-radius: var(--hop-radius-full);
  font-size: 13px;
  color: var(--hop-muted);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  margin: 3px 3px 3px 0;
}
.hop-chip-filter:hover {
  border-color: var(--hop-green-2);
  color: var(--hop-text);
}
.hop-chip-filter.selected {
  background: var(--hop-green-2);
  border-color: var(--hop-green-2);
  color: white;
  font-weight: 500;
}

/* Stock toggle chip */
.hop-stock-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: var(--hop-card);
  border: 1px solid var(--hop-border);
  border-radius: var(--hop-radius-full);
  font-size: 13px;
  color: var(--hop-muted);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  margin: 3px;
}
.hop-stock-chip:hover { border-color: var(--hop-stock-ok); }
.hop-stock-chip.selected {
  background: var(--hop-stock-ok);
  border-color: var(--hop-stock-ok);
  color: white;
  font-weight: 500;
}

/* Active filters bar */
.hop-active-bar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 24px;
  justify-content: flex-start;
}
.hop-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(73,161,121,0.1);
  color: var(--hop-green-2);
  border-radius: var(--hop-radius-full);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.hop-active-chip:hover { background: rgba(73,161,121,0.2); }
.hop-clear-all {
  font-size: 12px;
  color: var(--hop-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 4px;
}

/* ============================================================
   QUANTITY CONTROLS
   ============================================================ */
.hop-qty-group {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hop-border);
  border-radius: 6px;
  overflow: hidden;
  height: 32px;
}
.hop-qty-group.hop-qty-sm { height: 28px; }
.hop-qty-btn {
  width: 28px;
  height: 100%;
  border: none;
  background: var(--hop-bg);
  color: var(--hop-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  padding: 0;
  line-height: 1;
}
.hop-qty-sm .hop-qty-btn { width: 24px; font-size: 12px; }
.hop-qty-btn:hover { background: var(--hop-border); }
.hop-qty-input {
  width: 36px;
  height: 100%;
  border: none;
  border-left: 1px solid var(--hop-border);
  border-right: 1px solid var(--hop-border);
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--hop-text);
  background: var(--hop-card);
  -moz-appearance: textfield;
  padding: 0;
}
.hop-qty-sm .hop-qty-input { width: 30px; font-size: 11px; }
.hop-qty-input::-webkit-outer-spin-button,
.hop-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Cart button */
.hop-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: var(--hop-dark);
  color: var(--hop-cream);
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  height: 32px;
}
.hop-cart-btn:hover { background: #3d5a59; }
.hop-cart-btn.hop-cart-sm { padding: 4px 10px; height: 28px; }
.hop-cart-btn.hop-out-btn {
  background: var(--hop-border-lt);
  color: var(--hop-muted);
  cursor: not-allowed;
}
.hop-cart-btn.hop-options-btn {
  background: var(--hop-green-2);
  color: white;
}
.hop-cart-btn.hop-cart-success {
  background: var(--hop-stock-ok);
  color: white;
}

/* Card footer cart row */
.hop-card-cart-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================
   SKELETON LOADERS
   ============================================================ */
.hop-skeleton-row {
  height: 76px;
  background: linear-gradient(90deg, var(--hop-border-lt) 25%, rgba(255,252,242,0.6) 50%, var(--hop-border-lt) 75%);
  background-size: 200% 100%;
  animation: hop-shimmer 1.5s infinite;
  border-radius: var(--hop-radius);
  margin-bottom: 6px;
}
.hop-skeleton-card {
  height: 240px;
  background: linear-gradient(90deg, var(--hop-border-lt) 25%, rgba(255,252,242,0.6) 50%, var(--hop-border-lt) 75%);
  background-size: 200% 100%;
  animation: hop-shimmer 1.5s infinite;
  border-radius: var(--hop-radius-lg);
}
@keyframes hop-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   LOADING STATE
   ============================================================ */
.hop-loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.2s;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .hop-list-header { display: none; }
  .hop-list-view { display: none !important; }
  .hop-grid-view { display: block !important; }
  .hop-grid-view #hop-grid-body {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
  }
  .hop-grid-view { padding: 0 16px 32px; }
  .hop-controls { padding: 16px; }
  .hop-chip-filters-row { padding: 0 16px 8px; }
  .hop-active-bar { padding: 0 16px 8px; }
  .hop-page-header { padding: 32px 16px 28px; }
  .hop-page-header h1 { font-size: 24px; }
  .hop-search-box { width: 100%; order: -1; }
  .hop-seo-content { padding: 24px 16px; }
  .hop-pagination { padding: 0 16px 32px; }
  .hop-card-img { height: 120px; }
  .hop-view-toggle { display: none; }
  .hop-sort-select { width: 100%; order: 10; }
  .hop-card-footer { flex-direction: column; align-items: stretch; gap: 8px; }
  .hop-card-cart-row { justify-content: space-between; }
}

@media (min-width: 901px) {
  .hop-list-view { display: block; }
  .hop-grid-view { display: none; }
}