/* /shop: flat, square product grid with faint grid background */
html body .shop-section-label {
  display: inline-block; margin-bottom: 22px; padding: 7px 16px;
  background: #e8f6f0; border: 1px solid #cfeade; color: #0f7a58;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  border-radius: 0 !important;
}
html body .shop-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1px !important;
  background: #d5e2dc !important;
  border: 1px solid #d5e2dc;
}
html body .shop-card {
  position: relative; display: flex !important; flex-direction: column;
  background: #fff !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; transform: none !important; padding: 0 0 24px !important;
  text-decoration: none; color: inherit;
}
html body .shop-card:hover { transform: none !important; box-shadow: none !important; }
html body .shop-card-img {
  position: relative; aspect-ratio: 1 / 1; width: 100%; margin: 0 0 18px !important;
  background: #f2f8f5 !important; border-radius: 0 !important;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
html body .shop-card-img img { width: 100%; height: 100%; object-fit: contain; padding: 14px; border-radius: 0 !important; display: block; }
html body .shop-card-img svg { width: 48px; height: 48px; stroke: #8aa098; fill: none; stroke-width: 1.4; }
html body .shop-card-badge {
  position: absolute !important; top: 0 !important; left: 0 !important; right: auto !important;
  border-radius: 0 !important; padding: 6px 12px; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
html body .shop-card-badge.low { background: #f5d77a; color: #5c4300; }
html body .shop-card-badge.out { background: #0B3D2E; color: #fff; }
html body .shop-card-cat { padding: 0 20px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #1A9E72; margin-bottom: 6px; }
html body .shop-card-name { padding: 0 20px; font-size: 17px; font-weight: 600; line-height: 1.35; color: #0B3D2E; margin-bottom: 10px; }
html body .shop-card-price { padding: 0 20px; margin-top: auto; font-size: 16px; font-weight: 600; color: #0f1f1a; }
html body .shop-card-price span { color: #8aa098; font-weight: 500; }
html body .shop-empty { border: 1px solid #d5e2dc; background: #fff; border-radius: 0 !important; }
@media (max-width: 1000px) { html body .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 700px)  { html body .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body .shop-card-name { font-size: 15px; } }

/* ===== Shop hero ===== */
html body .shop-hero .img-hero-overlay {
  background-color: rgba(7,38,29,.84) !important;
  background-image:
    radial-gradient(800px 320px at 15% 0, rgba(26,158,114,.30), transparent 70%),
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px) !important;
  background-size: auto, 44px 44px, 44px 44px !important;
  background-repeat: no-repeat, repeat, repeat !important;
}
html body .shop-hero h1 { color: #fff !important; font-weight: 600; letter-spacing: -.03em; }
html body .shop-hero p { color: rgba(255,255,255,.82) !important; }

/* ===== Shop header bits and category bar ===== */
html body .shop-logo-badge { border-radius: 0 !important; }
html body .shop-cart-link {
  border: 1px solid #d5e2dc; border-radius: 0 !important; padding: 8px 16px;
  font-weight: 600; background: #fff;
}
html body .shop-cart-link:hover { border-color: #1A9E72; }
html body .shop-cart-badge { border-radius: 0 !important; }
html body .shop-nav { background: #f2f8f5 !important; border-top: 1px solid #d5e2dc; border-bottom: 1px solid #d5e2dc !important; }
html body .shop-nav-links > li > a {
  font-size: 15px; font-weight: 600; color: #0B3D2E;
  padding: 16px 22px !important; border-bottom: 3px solid transparent; border-radius: 0 !important;
}
html body .shop-nav-links > li:hover > a { color: #1A9E72; border-bottom-color: #1A9E72; background: transparent; }
html body .shop-mega { border-radius: 0 !important; border: 1px solid #d5e2dc !important; box-shadow: none !important; background: #fff !important; }
html body .shop-mega-item { border-radius: 0 !important; }
html body .shop-mega-item:hover { padding-left: 14px !important; background: #f2f8f5 !important; }