/* ===================================================
   GreenShop – Main Stylesheet
   =================================================== */

:root {
  /* Brand palette */
  --green-dark:   #1b4332;
  --green-mid:    #2d6a4f;
  --green-light:  #3a9d6e;
  --green-pale:   #d8f3dc;
  --accent:       #95d5b2;
  --gold:         #c9a84c;
  --gold-light:   #f0d080;
  --gold-pale:    #fdf6e3;
  --bg:           #f5f6f8;
  --text:         #212529;
  --muted:        #5a6370;

  /* Semantic color tokens */
  --color-primary:    var(--green-mid);
  --color-primary-strong: var(--green-dark);
  --color-primary-subtle: #b7e4c7;
  --color-primary-bg: var(--green-pale);
  --color-text:       var(--text);
  --color-text-subtle: var(--muted);
  --color-surface:    #ffffff;
  --color-divider:    #e5e7eb;

  /* Shadows: 3 levels (Swiss premium) */
  --shadow-rest:     0 0 6px rgba(51,51,51,.1);
  --shadow-elevated: 0 0 12px rgba(0,0,0,.15);
  --shadow-modal:    0 10px 25px rgba(0,0,0,.5);
  --card-shadow:     var(--shadow-rest);
  --shadow-hover:    var(--shadow-elevated);
  --shadow-lg:       var(--shadow-modal);

  /* Spacing (8px grid) */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;

  /* Radii */
  --radius:       8px;
  --radius-sm:    4px;
  --radius-card:  8px;
  --btn-radius:   2em;
  --radius-input: 8px;

  /* Buttons */
  --btn-padding:    .6rem 1.6rem;
  --btn-padding-sm: .45rem 1rem;
  --btn-padding-lg: .75rem 2.2rem;

  /* Typography scale */
  --font-display:  clamp(2.25rem, 4vw + 1rem, 3.5rem);
  --font-headline: clamp(1.5rem, 2vw + 0.75rem, 2rem);
  --font-title:    1.125rem;
  --font-body1:    1rem;
  --font-body2:    0.875rem;
  --font-body3:    0.75rem;

  /* Transitions (Swiss premium: consistent, subtle) */
  --ease: cubic-bezier(.4, 0, .6, 1);
  --duration-fast: 125ms;
  --duration-normal: 200ms;
}

body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.5;
  animation: pageIn .3s ease;
}
body.page-leaving {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

/* === Typography Scale === */
.text-display  { font-family: 'Playfair Display', Georgia, serif; font-size: var(--font-display); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; }
.text-headline { font-size: var(--font-headline); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.text-title    { font-size: var(--font-title); font-weight: 700; line-height: 1.35; }
.text-body2    { font-size: var(--font-body2); line-height: 1.5; }
.text-body3    { font-size: var(--font-body3); line-height: 1.5; }
.text-subtle   { color: var(--color-text-subtle); }

/* Star rating select widget */
.star-select { display:inline-flex; flex-direction:row-reverse; gap:2px; }
.star-select input { display:none; }
.star-select label { cursor:pointer; font-size:1.6rem; color:#d9d9d9; transition:color .15s; }
.star-select label:hover, .star-select label:hover ~ label,
.star-select input:checked ~ label { color:#ffc107; }
.fw-800 { font-weight: 800; letter-spacing: -0.03em; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Focus styles for keyboard accessibility ── */
:focus-visible {
  outline: 2px solid var(--green-mid);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible,
.btn-add-cart:focus-visible,
.btn-primary-green:focus-visible,
.btn-outline-green:focus-visible {
  outline: 2px solid var(--green-dark);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(82,183,136,.25);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--green-light);
  box-shadow: 0 0 0 3px rgba(82,183,136,.2);
}

/* ── Image placeholder (replaces emoji 🌿) ── */
.img-placeholder {
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px;
  background:linear-gradient(145deg, #f0f7f2 0%, #e2efe6 40%, #f0f7f2 100%);
  background-size:200% 200%;
  animation: placeholderShift 12s ease infinite;
  min-height:80px; border-radius:var(--radius-card);
  aspect-ratio:1;
  position:relative; overflow:hidden;
}
@keyframes placeholderShift {
  0%,100% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
}
.img-placeholder::before {
  content: attr(data-emoji);
  font-size:3.5rem;
  filter: grayscale(.3);
  opacity:.35;
}
.img-placeholder::after {
  content:'Foto folgt'; display:block;
  font-size:.65rem; color:var(--green-mid); opacity:.3;
  font-weight:600; letter-spacing:.04em; text-transform:uppercase;
}

/* --- Navbar --- */
.navbar-brand {
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--green-dark) !important;
  letter-spacing: .06em;
}
.navbar-brand span { color: var(--green-dark); }

.nav-link.active, .nav-link:hover { color: var(--green-mid) !important; }

.cart-badge {
  background: var(--green-mid);
  color: #fff;
  font-size: .7rem;
  padding: 2px 6px;
  border-radius: 20px;
  vertical-align: super;
}

/* --- Lang switcher --- */
.lang-switcher a {
  font-size: .82rem;
  color: var(--muted);
  text-decoration: none;
  padding: 0 4px;
}
.lang-switcher a.active,
.lang-switcher a:hover { color: var(--green-mid); font-weight: 600; }
.lang-switcher span { color: #ccc; }

/* --- Search bar --- */
.search-bar { max-width: 500px; transition: max-width .3s var(--ease); }
.search-bar:focus-within { max-width: 600px; }
.search-bar .form-control {
  transition: all .25s var(--ease);
  border: 2px solid transparent;
}
.search-bar .form-control:focus {
  border-color: var(--green-light);
  box-shadow: 0 0 0 4px rgba(58,157,110,.12), var(--shadow-rest);
  background: #f0faf5;
}
.search-bar .btn-search {
  background: var(--green-mid);
  border-color: var(--green-mid);
  color: #fff;
}
.search-bar .btn-search:hover { background: var(--green-dark); border-color: var(--green-dark); }

/* --- Free shipping bar --- */
.free-shipping-bar {
  background: var(--green-dark);
  color: #fff;
  text-align: center;
  font-size: .85rem;
  font-weight: 500;
  padding: 6px 0;
  letter-spacing: .02em;
}
.free-shipping-bar .bi-truck {
  margin-right: 6px;
  font-size: .95rem;
}
@media (max-width: 576px) {
  .free-shipping-bar { font-size: .78rem; padding: 5px 12px; }
}

/* --- Mia-Bar (proactive AI salesperson) --- */
.mia-bar {
  background: linear-gradient(135deg, #f0faf0 0%, #d8f3dc 100%);
  border-bottom: 1px solid #b7e4c7;
  padding: 12px 0;
}
.mia-bar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mia-bar-avatar {
  font-size: 1.8rem;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.mia-bar-content {
  flex: 1;
  min-width: 0;
}
.mia-bar-text {
  font-size: .9rem;
  color: var(--green-dark);
}
.mia-bar-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.mia-chip {
  background: #fff;
  border: 1px solid var(--green-light);
  color: var(--green-dark);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.mia-chip:hover {
  background: var(--green-dark);
  color: #fff;
  border-color: var(--green-dark);
}
.mia-chip-alt {
  background: var(--green-dark);
  color: #fff;
  border-color: var(--green-dark);
}
.mia-chip-alt:hover {
  background: var(--green-mid);
}
.mia-bar-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
.mia-bar-close:hover { color: var(--green-dark); }
@media (max-width: 768px) {
  .mia-bar-inner { flex-wrap: wrap; }
  .mia-bar-content { flex-basis: calc(100% - 60px); }
  .mia-bar-buttons { flex-basis: 100%; padding-left: 54px; }
  .mia-bar-text { font-size: .84rem; }
}

/* --- Mia product widget --- */
.mia-product-widget {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #f0faf0 0%, #e8f5e9 100%);
  border: 1px solid #c8e6c9;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.mia-pw-avatar {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.mia-pw-content {
  flex: 1;
  font-size: .85rem;
  color: var(--green-dark);
}
.mia-chip-sm {
  font-size: .78rem;
  padding: 5px 12px;
}

/* --- Hero banner --- */
.hero {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-mid) 100%);
  color: #fff;
  padding: 48px 0;
  margin-bottom: 2rem;
}
.hero h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: 1rem;
}
.hero p   { opacity: .85; font-size: 1.1rem; }

/* --- Product card --- */
.product-card {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-rest);
  transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}
.product-card .card-img-wrap {
  overflow: hidden;
  aspect-ratio: 1;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Skeleton shimmer while lazy images load */
.product-card .card-img-wrap img[loading="lazy"] {
  opacity: 0;
  transition: opacity .3s ease;
}
.product-card .card-img-wrap img[loading="lazy"].loaded,
.product-card .card-img-wrap img[loading="lazy"][complete] {
  opacity: 1;
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.product-card .card-img-wrap:not(:has(img.loaded)) {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
/* Quick view button on card hover */
.btn-quickview {
  position:absolute; top:8px; right:8px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.9); border:none; color:var(--green-dark);
  font-size:.9rem; cursor:pointer; opacity:0; transition:opacity .2s, transform .2s;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-rest);
}
.btn-quickview:hover { background:#fff; transform:scale(1.1); }
.product-card:hover .btn-quickview { opacity:1; }
@media (max-width:768px) { .btn-quickview { opacity:.7; } }

.product-card .card-img-wrap img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  transition: transform .3s, opacity .3s;
}
.product-card .card-img-wrap img[loading="lazy"] {
  opacity: 0;
}
.product-card .card-img-wrap img.loaded {
  opacity: 1;
}
.product-card:hover .card-img-wrap img { transform: scale(1.05); }

.product-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}
.product-card .product-name {
  font-weight: 700;
  font-size: var(--font-body1);
  line-height: 1.4;
  margin-bottom: var(--space-2);
  flex: 1;
  color: var(--color-text);
}
.product-card .price-gross {
  font-size: var(--font-title);
  font-weight: 800;
  color: var(--green-dark);
  letter-spacing: -0.02em;
}
.product-card .price-uvp {
  font-size: var(--font-body3);
  color: var(--color-text-subtle);
  text-decoration: line-through;
}
.product-card .badge-stock {
  font-size: var(--font-body3);
  border-radius: var(--btn-radius);
}
.btn-add-cart {
  background: var(--green-mid);
  border: none;
  color: #fff;
  border-radius: var(--btn-radius);
  font-weight: 600;
  font-size: var(--font-body2);
  padding: var(--btn-padding-sm);
  width: 100%;
  transition: all var(--duration-fast) var(--ease);
}
.btn-add-cart:hover   { background: var(--green-dark); color: #fff; transform: translateY(-1px); }
.btn-spinner { display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .5s linear infinite; vertical-align:middle; }
@keyframes spin { to { transform:rotate(360deg); } }
.btn-add-cart:disabled { background: var(--muted); cursor: not-allowed; }

/* --- Filters sidebar --- */
.filter-card {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}
.filter-card .card-header {
  background: var(--green-dark);
  color: #fff;
  border-radius: var(--radius) var(--radius) 0 0;
  font-weight: 700;
}

/* --- Product detail --- */
.product-gallery {
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff;
  cursor: zoom-in;
  position: relative;
}
.product-gallery img {
  border-radius: var(--radius);
  max-height: 420px;
  object-fit: contain;
  background: #fff;
  width: 100%;
  transition: transform .4s cubic-bezier(.25,.1,.25,1);
  transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
}
.product-gallery:hover img {
  transform: scale(1.8);
}
@media (max-width: 768px) {
  .product-gallery:hover img { transform: none; }
  .product-gallery { cursor: default; }
}
.product-thumbs img {
  height: 72px;
  width: 72px;
  object-fit: contain;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
  transition: border-color .2s;
}
.product-thumbs img.active,
.product-thumbs img:hover { border-color: var(--green-light); }

.btn-add-cart-lg {
  background: var(--green-mid);
  color: #fff;
  border: none;
  border-radius: var(--btn-radius);
  padding: var(--btn-padding-lg);
  font-size: 1.05rem;
  font-weight: 700;
  transition: background .2s;
}
.btn-add-cart-lg:hover { background: var(--green-dark); color: #fff; }

/* --- Cart --- */
.cart-table th { background: var(--green-pale); color: var(--green-dark); font-weight: 700; }
.qty-input { width: 70px; text-align: center; }
.qty-wrap { border-radius: 8px !important; }
.qty-wrap .btn { min-width: 36px; min-height: 36px; font-size: 1.1rem; font-weight: 700; display:flex; align-items:center; justify-content:center; }
.qty-wrap .qty-input { width: 48px !important; font-size: .95rem; font-weight: 600; -moz-appearance: textfield; }
.qty-wrap .qty-input::-webkit-inner-spin-button,
.qty-wrap .qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 768px) {
  .qty-wrap .btn { min-width: 44px; min-height: 44px; font-size: 1.2rem; }
  .qty-wrap .qty-input { width: 52px !important; font-size: 1rem; }
}

/* --- Checkout --- */
.checkout-summary { background: #fff; border-radius: var(--radius); box-shadow: var(--card-shadow); }
.payment-option { cursor: pointer; }
.payment-option input[type=radio]:checked + label .payment-box {
  border-color: var(--green-mid) !important;
  background: var(--green-pale);
}
.payment-box {
  border: 2px solid #dee2e6;
  border-radius: 10px;
  padding: 1rem;
  transition: border-color .2s, background .2s;
}
.payment-box:hover { border-color: var(--green-light); }

/* --- Buttons --- */
.btn-primary-green {
  background: var(--green-mid);
  border: none;
  color: #fff;
  font-weight: 700;
  border-radius: var(--btn-radius);
  padding: var(--btn-padding);
  font-size: var(--font-body1);
  transition: all var(--duration-fast) var(--ease);
}
.btn-primary-green:hover { background: var(--green-dark); color: #fff; transform: translateY(-1px); }

.btn-outline-green {
  border: 1.5px solid var(--green-mid);
  color: var(--green-mid);
  font-weight: 600;
  border-radius: var(--btn-radius);
  padding: var(--btn-padding);
  background: transparent;
  transition: all var(--duration-fast) var(--ease);
}
.btn-outline-green:hover { background: var(--green-mid); color: #fff; transform: translateY(-1px); }

/* --- Badges --- */
.badge-green  { background: var(--green-pale); color: var(--green-dark); font-weight: 600; letter-spacing: 0.02em; padding: .25em .65em; }
.badge-red    { background: #ffe0e0;           color: #c00; font-weight: 600; letter-spacing: 0.02em; padding: .25em .65em; }

/* --- Toast notification --- */
#toast-container { position: fixed; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); right: 1.5rem; z-index: 9999; }
.toast-item {
  background: var(--green-dark);
  color: #fff;
  padding: .8rem 1.3rem;
  border-radius: 10px;
  margin-top: .5rem;
  box-shadow: var(--shadow-elevated);
  font-size: .93rem;
  animation: slideIn .3s ease;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Age Gate --- */
#age-gate {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.age-gate-box {
  background: #fff;
  border-radius: 20px;
  padding: 2.5rem;
  max-width: 460px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.age-gate-box .logo-big { font-size: 3rem; margin-bottom: .5rem; }
.age-gate-box .logo-big-img { width: 72px; height: 72px; margin: 0 auto .75rem; display: block; }
.age-gate-box h2 { color: var(--green-dark); font-weight: 800; }

/* --- Footer --- */
footer {
  background: var(--green-dark);
  color: rgba(255,255,255,.8);
  padding: 3rem 0 2rem;
  margin-top: 4rem;
}
footer h6 { color: #fff; font-weight: 700; text-transform: uppercase; font-size: .72rem; letter-spacing: .12em; }
footer a  { color: rgba(255,255,255,.7); text-decoration: none; font-size: .9rem; }
footer a:hover { color: var(--accent); }
footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15);
  margin-top: 2rem;
  padding-top: 1.5rem;
  font-size: .82rem;
  color: rgba(255,255,255,.5);
}
.trust-icon { font-size: 1.4rem; margin-bottom: .3rem; }

/* --- Pagination --- */
.page-link { color: var(--green-mid); border-radius: 8px !important; margin: 0 2px; }
.page-item.active .page-link { background: var(--green-mid); border-color: var(--green-mid); }
.page-link:hover { color: var(--green-dark); }

/* --- Responsive --- */
@media (max-width: 576px) {
  .hero h1 { font-size: 1.5rem; }
  .product-card .card-img-wrap { height: 200px; }
}

/* ==============================================
   DESIGN UPGRADE — Animations & Effects
   ============================================== */

/* Frosted glass navbar on scroll */
.navbar { transition: box-shadow .3s, background .3s; }
.navbar.nav-scrolled {
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-rest) !important;
}

/* Animated hero gradient */
.hero {
  background: linear-gradient(135deg, #0d2818, #1b4332, #2d6a4f, #40916c, #1b4332, #0d2818) !important;
  background-size: 400% 400% !important;
  animation: heroGrad 14s ease infinite;
  position: relative;
  overflow: hidden;
}
@keyframes heroGrad {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Floating leaf particles */
.hero-particle {
  position: absolute;
  bottom: -2rem;
  pointer-events: none;
  animation: floatUp var(--dur, 10s) var(--delay, 0s) ease-in infinite;
  opacity: .5;
  user-select: none;
  z-index: 0;
}
@keyframes floatUp {
  0%   { transform: translateY(0) translateX(0)  rotate(0deg);   opacity: .5; }
  50%  { transform: translateY(-45vh) translateX(var(--sway, 40px)) rotate(180deg); opacity: .65; }
  100% { transform: translateY(-110vh) translateX(0) rotate(360deg); opacity: 0; }
}

/* Make hero content sit above particles */
.hero .container { position: relative; z-index: 1; }

/* Hero trust icons */
.hero-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
}
.hero-trust-icon { font-size: 1.6rem; }
.hero-trust-label { font-size: .8rem; font-weight: 600; opacity: .9; letter-spacing: .03em; }

/* Product card: spring hover + green glow */
.product-card {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease !important;
}
/* Hover box-shadow only — transform is handled by JS magnetic effect on desktop,
   CSS fallback for touch/no-JS */
.product-card:hover {
  box-shadow: 0 14px 40px rgba(45,106,79,.22) !important;
}
/* CSS-only hover lift for touch/no-JS environments */
@media (pointer: coarse) {
  .product-card:hover {
    transform: translateY(-8px) scale(1.02);
  }
}

/* Shine sweep on add-to-cart button */
.btn-add-cart {
  position: relative;
  overflow: hidden;
}
.btn-add-cart::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.32), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
}
.btn-add-cart:not(:disabled):hover::before { left: 135%; }

/* Price badge */
.price-gross {
  background: none;
  color: var(--green-dark) !important;
  padding: 0;
  border-radius: 0;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  display: inline-block;
  letter-spacing: -.02em;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero { animation: none !important; background-size: 100% 100% !important; }
  .hero-particle { display: none !important; }
}

/* #2 — Preis fällt verzögert ins Bild beim Scroll-Reveal */
.reveal .price-gross {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s ease .32s, transform .4s cubic-bezier(.4,0,.2,1) .32s;
}
.reveal.is-visible .price-gross {
  opacity: 1;
  transform: none;
}

/* #3 — Nervöser Button shake */
@keyframes btnShake {
  0%,100% { transform: none; }
  15%  { transform: translateX(-5px) rotate(-1.5deg); }
  30%  { transform: translateX(5px)  rotate(1.5deg); }
  45%  { transform: translateX(-4px) rotate(-1deg); }
  60%  { transform: translateX(4px)  rotate(1deg); }
  75%  { transform: translateX(-2px); }
  90%  { transform: translateX(2px); }
}
.btn-shake { animation: btnShake .55s ease !important; }

/* #6 — Seite träumt + Grün-Modus */
body { transition: background-color 9s ease, filter .5s ease; }
body.page-dreaming { background-color: #fff0f6 !important; }
body.body-green    { filter: hue-rotate(100deg) saturate(1.4) !important; }


/* Card hover overlay — quick add from grid */
.card-hover-overlay {
  position:absolute; bottom:0; left:0; right:0;
  padding:var(--space-5);
  background:linear-gradient(to top, rgba(27,67,50,.88) 0%, rgba(27,67,50,.4) 60%, transparent 100%);
  display:flex; align-items:flex-end; justify-content:center;
  transform:translateY(100%);
  transition:transform .25s var(--ease);
  pointer-events:none;
  border-radius:0 0 var(--radius-card) var(--radius-card);
  z-index:3;
}
.product-card:hover .card-hover-overlay {
  transform:translateY(0);
  pointer-events:auto;
}
.quick-add-btn {
  background:#fff; color:var(--green-dark); border:none;
  border-radius:var(--btn-radius); padding:8px 18px;
  font-weight:700; font-size:var(--font-body3); cursor:pointer;
  transition:all var(--duration-fast) var(--ease);
  box-shadow:var(--shadow-rest);
}
.quick-add-btn:hover { background:var(--gold-light); transform:scale(1.03); }
@media (max-width:768px) { .card-hover-overlay { display:none; } }

/* Discount badge: gold instead of Bootstrap red */
.product-card .badge.bg-danger { background: var(--gold) !important; color: #1a0a00; font-weight: 800; }

/* Compare button: hide on mobile to give ATC full width */
@media (max-width: 768px) { .product-card .btn-compare { display: none; } }

/* Search dropdown entrance animation */
.search-suggest-dropdown { animation: suggestIn .18s ease; }
@keyframes suggestIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }

/* Toast: fix overlap with bottom nav on mobile */
@media (max-width: 991.98px) {
  #toast-container { bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* News ticker: hide on mobile to save viewport space */
@media (max-width: 768px) { .news-ticker { display: none; } }

/* Cursors: standard for premium look */
.btn-add-cart,
.btn-add-cart-lg,
.btn-primary-green,
.btn-outline-green { cursor: pointer; }
.card-img-wrap { cursor: pointer; }
.product-gallery img { cursor: zoom-in; }

/* Category showcase cards */
.cat-card {
  border-radius: 16px;
  padding: 1.6rem 1rem 1.4rem;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none !important;
  height: 100%;
  border: none;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
  color: #fff !important;
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .01em;
  box-shadow: var(--shadow-rest);
}
.cat-card:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: var(--shadow-elevated);
  color: #fff !important;
}
.cat-card .cat-icon {
  font-size: 1.9rem;
  margin-bottom: .55rem;
  opacity: .95;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
  line-height: 1;
}
.cat-card .cat-label { line-height: 1.2; text-shadow: 0 1px 4px rgba(0,0,0,.25); }

.cat-cbd   { background: linear-gradient(160deg, #071a0e 0%, #1b4332 60%, #2d6a4f 100%); }
.cat-tabak { background: linear-gradient(160deg, #1a0e05 0%, #4a3020 60%, #7a5230 100%); }
.cat-vapes { background: linear-gradient(160deg, #060d22 0%, #1a2a5c 60%, #1e4a8a 100%); }
.cat-zub   { background: linear-gradient(160deg, #0e0f11 0%, #2a2d35 60%, #4a4f5a 100%); }
.cat-food  { background: linear-gradient(160deg, #1a0830 0%, #4a1070 60%, #8b35a8 100%); }
.cat-sonst { background: linear-gradient(160deg, #051510 0%, #0a3020 60%, #1a5038 100%); }

/* ── Subcategory showcase (homepage) ─────────────────────── */
.subcat-showcase {
  background: #fff;
  padding: 2rem 0 2.5rem;
  border-bottom: 1px solid #e5e7eb;
}
.subcat-showcase-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1.5rem;
}
.subcat-groups { display: flex; flex-direction: column; gap: 1.5rem; }
.subcat-group-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: .6rem;
}
.subcat-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .55rem .75rem;
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  text-decoration: none !important;
  color: var(--text);
  font-size: .82rem;
  font-weight: 500;
  transition: background .18s, border-color .18s, transform .18s, box-shadow .18s;
  overflow: hidden;
}
.subcat-card:hover {
  background: var(--green-pale);
  border-color: var(--green-light);
  color: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.07);
}
.subcat-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.subcat-count {
  background: var(--green-mid);
  color: #fff;
  border-radius: 20px;
  padding: 1px 8px;
  font-size: .72rem;
  font-weight: 600;
  flex-shrink: 0;
  margin-left: .5rem;
}

/* ── Header Mega-Menu ─────────────────────────────────────── */
.mega-dropdown {
  min-width: min(620px, 96vw);
  padding: 1rem 1.2rem 0 !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-elevated) !important;
}
.mega-col { padding: .2rem .6rem .8rem; }
.mega-col + .mega-col { border-left: 1px solid #f0f0f0; }
.mega-group-title {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--green-dark) !important;
  text-decoration: none !important;
  margin-bottom: .35rem;
  padding: .2rem .3rem;
}
.mega-group-title:hover { color: var(--green-mid) !important; }
.mega-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .28rem .5rem;
  border-radius: 6px;
  font-size: .82rem;
  color: var(--text) !important;
  text-decoration: none !important;
  transition: background .15s;
  line-height: 1.3;
}
.mega-item:hover { background: var(--green-pale); color: var(--green-dark) !important; }
.mega-count {
  font-size: .72rem;
  color: var(--muted);
  flex-shrink: 0;
  margin-left: .4rem;
}
.mega-footer {
  border-top: 1px solid #f0f0f0;
  padding: .6rem .3rem;
  margin: 0 -.6rem;
}
.mega-footer a {
  font-size: .82rem;
  font-weight: 600;
  color: var(--green-mid) !important;
  text-decoration: none !important;
}
.mega-footer a:hover { color: var(--green-dark) !important; }
@media (max-width: 767px) {
  .mega-dropdown { min-width: 90vw; }
  .mega-col + .mega-col { border-left: none; border-top: 1px solid #f0f0f0; }
}

/* ── Category Context Section ─────────────────────────────── */
.cat-context-section { background: #fff; border-bottom: 1px solid #e5e7eb; padding: .75rem 0 0; }
.cat-context-header { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; padding-bottom: .6rem; }
.cat-context-back { transition: color .15s; }
.cat-context-back:hover { color: var(--green-mid) !important; }
.cat-context-title { font-size: 1.15rem; font-weight: 800; color: var(--green-dark); line-height: 1.2; margin: 0; }
.cat-context-subcat { font-size: .88rem; font-weight: 600; color: var(--green-mid); }
.cat-context-count { font-size: .82rem; margin-left: auto; }

/* ── Subcategory Pills ─────────────────────────────────────── */
.cat-pills-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cat-pills-wrap::-webkit-scrollbar { display: none; }
.cat-pills-row { display: flex; gap: .4rem; padding: .5rem 0 .75rem; flex-wrap: nowrap; }
@media (min-width: 768px) { .cat-pills-row { flex-wrap: wrap; } }
.cat-pill {
  display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem;
  border-radius: 20px; border: 1.5px solid #dee2e6; background: #fff; color: var(--text);
  font-size: .82rem; font-weight: 500; text-decoration: none !important;
  white-space: nowrap; transition: border-color .15s, background .15s, color .15s; flex-shrink: 0;
}
.cat-pill:hover { border-color: var(--green-light); background: var(--green-pale); color: var(--green-dark); }
.cat-pill.active { background: var(--green-dark); border-color: var(--green-dark); color: #fff; font-weight: 600; }
.cat-pill.active:hover { background: var(--green-mid); border-color: var(--green-mid); }
.cat-pill-count { font-size: .72rem; opacity: .75; font-weight: 400; }
.cat-pill.active .cat-pill-count { opacity: .85; }

/* ── Tag Chips ─────────────────────────────────────────────── */
.cat-tags-row { display: flex; flex-wrap: wrap; gap: .3rem; padding: .35rem 0 .75rem; }
.cat-tag-chip {
  display: inline-block; padding: .18rem .55rem; border-radius: 20px;
  background: #f0f0f0; color: var(--muted); font-size: .75rem; font-weight: 500;
  text-decoration: none !important; transition: background .15s, color .15s; white-space: nowrap;
}
.cat-tag-chip:hover { background: var(--green-pale); color: var(--green-dark); }
.cat-tag-chip.active { background: var(--green-mid); color: #fff; }
.cat-tag-chip.active-clear { background: #ffe0e0; color: #c00; font-weight: 600; }
.cat-tag-chip.active-clear:hover { background: #ffc5c5; }

/* ── Inline Sort Toolbar ───────────────────────────────────── */
.cat-toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cat-toolbar-select { width: auto; min-width: 150px; }

@media (max-width: 575px) {
  .cat-context-title { font-size: 1rem; }
  .cat-context-count { display: none; }
}

/* ── Headshop: body leaf texture ──────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23fff' d='M50 5C50 5 35 20 30 35C20 30 10 35 15 50C5 48 2 58 10 62C8 72 15 78 25 75C28 85 40 90 50 88C60 90 72 85 75 75C85 78 92 72 90 62C98 58 95 48 85 50C90 35 80 30 70 35C65 20 50 5 50 5Z'/%3E%3C/svg%3E");
  background-size: 380px;
  opacity: .012;
}

/* ── Headshop: hero leaf watermark ────────────────────────────────── */
.hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23fff' d='M50 5C50 5 35 20 30 35C20 30 10 35 15 50C5 48 2 58 10 62C8 72 15 78 25 75C28 85 40 90 50 88C60 90 72 85 75 75C85 78 92 72 90 62C98 58 95 48 85 50C90 35 80 30 70 35C65 20 50 5 50 5Z'/%3E%3C/svg%3E");
  background-size: 220px;
  opacity: .038;
}

/* ── Headshop: hero eyebrow + gold divider ────────────────────────── */
.hero-eyebrow {
  display: block;
  font-size: .7rem;
  letter-spacing: .2em;
  color: var(--gold-light);
  text-transform: uppercase;
  margin-bottom: .6rem;
  opacity: .85;
}
.hero-gold-line {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: .7rem auto 1.2rem;
}

/* ── Headshop: cat-card gold hover ────────────────────────────────── */
.cat-card:hover {
  box-shadow: 0 16px 36px rgba(0,0,0,.35), 0 0 0 1.5px var(--gold) !important;
}

/* ── Headshop: product card gold accent + badges ──────────────────── */
.product-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.product-card:hover::after { opacity: 1; }

.badge-new {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: var(--gold); color: #1a0a00;
  font-size: .62rem; font-weight: 800; letter-spacing: .07em;
  padding: 3px 8px; border-radius: 4px; text-transform: uppercase;
}
.badge-scarcity {
  position: absolute; bottom: 8px; right: 8px; z-index: 2;
  background: #dc3c28; color: #fff;
  font-size: .62rem; font-weight: 700;
  padding: 2px 7px; border-radius: 4px;
}

/* ── Cursor Thermostat letters ───────────────────────────────────────── */
.thermo-letter {
  display: inline-block;
  transition: transform .12s ease, color .12s ease;
  will-change: transform;
}

/* ── Chill Mode ──────────────────────────────────────────────────────── */
.chill-toggle {
  cursor: pointer; font-size: .82rem; color: var(--muted);
  text-decoration: none; padding: 0 6px; transition: color .2s;
  user-select: none;
}
.chill-toggle:hover, .chill-toggle.active { color: var(--green-mid); }
.chill-toggle.active { font-weight: 600; }
body.chill-mode {
  background-color: #f0f4f0 !important;
  filter: saturate(0.92) sepia(0.06);
  transition: background-color 2s ease, filter 2s ease;
}
body.chill-mode .hero {
  background: linear-gradient(135deg, #1a3a2a 0%, #2a5a42 60%, #3a6a52 100%);
  filter: brightness(0.92);
}

/* ── 420 Mode icon ───────────────────────────────────────────────────── */
#four-twenty-signal {
  position: fixed; bottom: 18px; left: 18px; z-index: 9999;
  font-size: 1.4rem; opacity: 0; pointer-events: none;
  animation: ft-breathe 3s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(82,183,136,.7));
  transition: opacity 1.2s ease;
}
#four-twenty-signal.visible { opacity: 1; }
@keyframes ft-breathe {
  0%,100% { transform: translateY(0) scale(1);   opacity: .6; }
  50%     { transform: translateY(-5px) scale(1.1); opacity: 1; }
}

/* ── Leaf Catch Mini Game ──────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; }

#hero-game-btn {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: transparent;
  border: 1px solid rgba(201,168,76,.45);
  color: rgba(201,168,76,.85);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}
#hero-game-btn:hover {
  background: rgba(201,168,76,.15);
  border-color: rgba(201,168,76,.85);
  color: #c9a84c;
  box-shadow: 0 0 14px rgba(201,168,76,.3);
}

#leaf-game-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(6,13,8,.97);
  display: flex;
  flex-direction: column;
  align-items: center;
}
#lgame-header {
  width: 100%;
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  color: var(--gold);
  font-weight: 700;
  font-size: 1rem;
  border-bottom: 1px solid rgba(201,168,76,.18);
  flex-shrink: 0;
}
#lgame-title {
  font-size: .8rem;
  opacity: .55;
  letter-spacing: .06em;
}
#lgame-lives { font-size: 1rem; letter-spacing: 2px; }
#lgame-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.45);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: color .15s;
}
#lgame-close:hover { color: #fff; }
#lgame-canvas {
  display: block;
  max-width: 600px;
  width: 100%;
}
#lgame-screen-start,
#lgame-screen-over {
  position: absolute;
  inset: 58px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #fff;
  text-align: center;
  padding: 0 20px;
  pointer-events: none;
}
#lgame-screen-start > *,
#lgame-screen-over > * { pointer-events: auto; }
#lgame-screen-start h2,
#lgame-screen-over h2 {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--gold);
  font-family: 'Playfair Display', serif;
  margin: 0;
}
#lgame-screen-start p,
#lgame-screen-over p {
  color: rgba(255,255,255,.65);
  font-size: .95rem;
  margin: 0;
}
.lgame-score-big {
  font-size: 3.2rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}
.lgame-hi {
  color: rgba(201,168,76,.65) !important;
  font-size: .85rem !important;
}
.lgame-hint {
  font-size: .75rem !important;
  color: rgba(255,255,255,.3) !important;
}
#lgame-start-btn,
#lgame-restart-btn {
  background: var(--gold);
  color: #1a0a00;
  border: none;
  font-weight: 800;
  font-size: 1.1rem;
  padding: 13px 44px;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: .06em;
  transition: transform .15s, box-shadow .15s;
}
#lgame-start-btn:hover,
#lgame-restart-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 0 22px rgba(201,168,76,.5);
}
#lgame-quit-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.45);
  padding: 8px 26px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .88rem;
  transition: border-color .15s, color .15s;
}
#lgame-quit-btn:hover {
  border-color: rgba(255,255,255,.4);
  color: rgba(255,255,255,.7);
}

/* ── Search Autocomplete Dropdown ───────────────────────────────────────── */
.search-suggest-dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  box-shadow: var(--shadow-elevated); z-index: 9999;
  max-height: 420px; overflow-y: auto; margin-top: 2px;
}
.suggest-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; text-decoration: none; color: inherit;
  border-bottom: 1px solid #f3f4f6; transition: background .12s;
}
.suggest-item:last-child { border-bottom: none; }
.suggest-item:hover, .suggest-item.active { background: var(--green-pale); }
.suggest-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.suggest-img-placeholder { width: 40px; height: 40px; background: #f3f4f6; border-radius: 4px; flex-shrink: 0; }
.suggest-body { flex: 1; min-width: 0; }
.suggest-name { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest-meta { font-size: .72rem; color: var(--muted); margin-top: 1px; }
.suggest-price { font-size: .85rem; font-weight: 700; color: var(--green-mid); white-space: nowrap; }

/* ── Bestseller Section ──────────────────────────────────────────────────── */
.bestseller-section { padding: 1.5rem 0; background: #fff; border-bottom: 1px solid #e5e7eb; }
.section-title { font-size: 1.05rem; font-weight: 800; margin-bottom: 1rem; color: var(--green-dark); display: flex; align-items: center; gap: 6px; }
.section-title .bi { color: var(--gold); }
.bestseller-scroll {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px;
  scrollbar-width: thin; scrollbar-color: var(--green-pale) transparent;
}
.bestseller-scroll::-webkit-scrollbar { height: 4px; }
.bestseller-scroll::-webkit-scrollbar-thumb { background: var(--green-pale); border-radius: 4px; }
.bestseller-card {
  flex: 0 0 140px; border-radius: 10px; overflow: hidden;
  border: 1px solid #e5e7eb; transition: box-shadow .2s, transform .2s; background: #fff;
}
.bestseller-card:hover { box-shadow: var(--shadow-elevated); transform: translateY(-2px); }
.bestseller-card a { display: block; text-decoration: none; color: inherit; }
.bestseller-card img { width: 100%; height: 110px; object-fit: cover; display: block; }
.bestseller-card .bs-placeholder { width: 100%; height: 110px; background: #f3f4f6; display: block; }
.bs-info { padding: 6px 8px 8px; }
.bs-name { font-size: .72rem; font-weight: 600; line-height: 1.3;
           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bs-price { font-size: .8rem; font-weight: 700; color: var(--green-mid); margin-top: 3px; }

/* ── Mega-Menu Subcat items ──────────────────────────────────────────────── */
.mega-subitem {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 8px 3px 20px;
  font-size: .73rem; color: rgba(0,0,0,.45);
  text-decoration: none; transition: color .15s;
  border-left: 1px solid rgba(0,0,0,.08); margin-left: 8px; margin-top: 1px;
}
.mega-subitem:hover { color: var(--green-dark); }

/* ── Brand Chips (Homepage strip) ───────────────────────────────────────── */
.brands-section { padding: 1rem 0; background: #f8fffe; border-bottom: 1px solid #e5e7eb; }
.brands-scroll {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: thin; scrollbar-color: var(--green-pale) transparent;
}
.brands-scroll::-webkit-scrollbar { height: 4px; }
.brands-scroll::-webkit-scrollbar-thumb { background: var(--green-pale); border-radius: 4px; }
.brand-chip {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 5px 14px; border-radius: 20px; font-size: .8rem; font-weight: 600;
  border: 1px solid var(--gold); color: var(--green-dark);
  text-decoration: none; transition: background .15s, color .15s; flex-shrink: 0;
}
.brand-chip:hover { background: var(--gold); color: #1a0a00; }
.brand-chip-count { font-size: .7rem; opacity: .55; }

/* ── Product page brand tags ─────────────────────────────────────────────── */
.product-brand-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.product-brand-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 14px; font-size: .78rem; font-weight: 600;
  border: 1px solid var(--gold); color: var(--green-dark);
  text-decoration: none; transition: background .15s, color .15s;
}
.product-brand-tag:hover { background: var(--gold); color: #1a0a00; }

/* ── Mega-menu brands column ─────────────────────────────────────────────── */
.mega-col-brands { border-top: 1px solid rgba(0,0,0,.08); }
@media (min-width: 768px) { .mega-col-brands { border-top: none; border-left: 1px solid rgba(0,0,0,.08); } }

/* Related products — "Wird oft zusammen gekauft" */
.related-products-section h3 { font-size: 1.2rem; }
.related-product-card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid #e9ecef; border-radius: 8px;
  overflow: hidden; transition: box-shadow .2s;
}
.related-product-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.related-product-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.related-product-name { padding: 8px 10px 2px; font-size: .85rem; font-weight: 500; }
.related-product-price { padding: 0 10px 10px; font-size: .9rem; color: var(--green-dark, #2d6a4f); font-weight: 600; }

/* Filter Bar */
.filter-bar { background: #f8f9fa; padding: 12px 16px; border-radius: 8px; }
.filter-chip { display:inline-flex; align-items:center; gap:6px; background:var(--green-dark,#2d6a4f); color:#fff; padding:3px 10px; border-radius:20px; font-size:.8rem; }
.filter-chip a { color:#fff; text-decoration:none; font-weight:700; }

/* Mobile Touch-Target-Mindestgrösse (44x44px) */
@media (max-width: 991px) {
  .btn, .nav-link, .dropdown-item, .mega-item, .mega-subitem,
  .add-to-cart-btn, .wishlist-btn { min-height: 44px; min-width: 44px; }
  .navbar-toggler { min-height: 44px; min-width: 44px; }
}

/* Expand/Collapse Produktbeschreibung auf Mobile */
@media (max-width: 767px) {
  .description-collapse { max-height: 80px; overflow: hidden; position: relative; transition: max-height .3s ease; }
  .description-collapse.expanded { max-height: none; }
  .description-collapse:not(.expanded)::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 30px; background: linear-gradient(transparent, #fff);
  }
  .description-toggle { display: block; color: var(--green-dark,#2d6a4f); font-size: .85rem; cursor: pointer; margin-top: 4px; }
}
@media (min-width: 768px) { .description-toggle { display: none; } }

/* Recently Viewed Sektion */
.recently-viewed-section h4 { font-size: 1rem; color: #666; }
.recently-viewed-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.recently-viewed-card { flex: 0 0 120px; text-decoration: none; color: inherit; border: 1px solid #e9ecef; border-radius: 8px; overflow: hidden; }
.recently-viewed-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.recently-viewed-card .rv-name { padding: 4px 6px; font-size: .75rem; font-weight:500; }

/* Mobile hero: show products sooner */
@media (max-width: 768px) {
  .hero { padding: 30px 0 !important; }
  .hero h1 { font-size: 1.6rem !important; }
}

/* Collapsible category list chevron rotation */
.subcat-details[open] > summary .bi-chevron-down { transform: rotate(180deg); }
.subcat-details > summary::-webkit-details-marker { display: none; }

/* ── Mobile: prevent iOS auto-zoom on inputs ──────────────────────────── */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ── Mobile: chat touch-targets (min 44px) ────────────────────────────── */
@media (max-width: 768px) {
  #chat-send { min-width: 44px; min-height: 44px; }
  .chat-header-btn { min-width: 44px; min-height: 44px; padding: 8px; }
  .chat-action-btn { min-height: 44px; padding: 10px 12px; }
}

/* ══════════════════════════════════════════════════════════
   RETO DARK MODE — Complete coverage
   ══════════════════════════════════════════════════════════ */
html.buddy-dark {
  --bg: #0f1117;
  --text: #e2e4e9;
  --muted: #8b8f9a;
  --green-dark: #a3c9b0;
  --green-mid: #6faa83;
  --green-light: #4d9466;
  --green-pale: #1a2e24;
  --accent: #5a9e7a;
  --gold: #d4af5a;
  --gold-light: #c9a040;
  --gold-pale: #1c1a14;
  --shadow-rest: 0 0 6px rgba(0,0,0,.3);
  --shadow-elevated: 0 0 12px rgba(0,0,0,.5);
  --shadow-modal: 0 10px 25px rgba(0,0,0,.7);
  --color-surface: #1a1d27;
  --color-divider: #2a2d37;
  --card-shadow: 0 4px 20px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --shadow-hover: 0 12px 36px rgba(0,0,0,.5);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.5);
  --radius: 12px;
  color-scheme: dark;
}

/* Body + Base */
html.buddy-dark body { background: var(--bg); color: var(--text); }
html.buddy-dark .text-muted { color: #7a7f8e !important; }
html.buddy-dark .text-dark { color: #e2e4e9 !important; }
html.buddy-dark a:not(.btn) { color: var(--green-mid); }
html.buddy-dark hr { border-color: #2a2d37; }

/* Navbar */
html.buddy-dark .navbar,
html.buddy-dark .bg-white { background: #12141c !important; }
html.buddy-dark .navbar { border-bottom: 1px solid #2a2d37 !important; }
html.buddy-dark .navbar-brand span { color: var(--green-mid); }
html.buddy-dark .nav-link { color: #b0b4be !important; }
html.buddy-dark .nav-link.active, html.buddy-dark .nav-link:hover { color: var(--green-mid) !important; }

/* Cards + Product Cards */
html.buddy-dark .card,
html.buddy-dark .product-card,
html.buddy-dark .checkout-summary,
html.buddy-dark .bestseller-card,
html.buddy-dark .related-product-card,
html.buddy-dark .recently-viewed-card { background: #1a1d27; border-color: #2a2d37; }
html.buddy-dark .product-card:hover { box-shadow: 0 14px 40px rgba(0,0,0,.5); }
html.buddy-dark .card-img-wrap,
html.buddy-dark .product-gallery,
html.buddy-dark .product-gallery img,
html.buddy-dark .product-thumbs img,
html.buddy-dark .bs-placeholder,
html.buddy-dark .suggest-img-placeholder { background: #22252f; }

/* Sections + Backgrounds */
html.buddy-dark .cat-context-section,
html.buddy-dark .bestseller-section,
html.buddy-dark .subcat-showcase,
html.buddy-dark .mia-product-widget { background: #14161e; border-color: #2a2d37; }
html.buddy-dark .brands-section { background: #11131a; border-color: #2a2d37; }
html.buddy-dark .bg-light { background: #14161e !important; }

/* Footer */
html.buddy-dark .footer,
html.buddy-dark footer { background: #0a0c12; }

/* Forms + Inputs */
html.buddy-dark input,
html.buddy-dark select,
html.buddy-dark textarea,
html.buddy-dark .form-control,
html.buddy-dark .form-select { background: #1a1d27; color: #e2e4e9; border-color: #333; }
html.buddy-dark input:focus,
html.buddy-dark .form-control:focus { background: #1e2130; border-color: var(--green-mid); }
html.buddy-dark .form-check-input { background-color: #2a2d37; border-color: #444; }
html.buddy-dark .form-check-input:checked { background-color: var(--green-mid); border-color: var(--green-mid); }

/* Buttons */
html.buddy-dark .btn-outline-dark { color: #ccc; border-color: #555; }
html.buddy-dark .btn-outline-dark:hover { background: #2a2d37; color: #fff; }
html.buddy-dark .btn-quickview { background: #1a1d27; color: #e2e4e9; }
html.buddy-dark .btn-quickview:hover { background: #2a2d37; }
html.buddy-dark .btn-light { background: #2a2d37; color: #e2e4e9; border-color: #333; }

/* Breadcrumbs */
html.buddy-dark .breadcrumb-item a { color: #8b8f9a; }
html.buddy-dark .breadcrumb-item.active { color: #e2e4e9; }

/* Borders — all light borders become visible on dark */
html.buddy-dark .subcat-card,
html.buddy-dark .cat-pill,
html.buddy-dark .payment-box { border-color: #2a2d37; background: #1a1d27; }
html.buddy-dark .mega-col + .mega-col { border-color: #2a2d37; }
html.buddy-dark .mega-footer { border-color: #2a2d37; }

/* Tags + Chips + Pills */
html.buddy-dark .cat-tag-chip { background: #2a2d37; color: #ccc; }
html.buddy-dark .cat-tag-chip.active { background: var(--green-mid); color: #fff; }
html.buddy-dark .cat-tag-chip.active-clear { background: #3a2020; color: #f88; }
html.buddy-dark .mia-chip { background: #2a2d37; color: #ddd; }

/* Mia Bar */
html.buddy-dark .mia-bar { background: linear-gradient(135deg, #1a2e24, #14261c); border-color: #2a4a37; }
html.buddy-dark .mia-bar-avatar { background: #1a1d27; }

/* Search Autocomplete */
html.buddy-dark .search-suggest-dropdown { background: #1a1d27; border-color: #2a2d37; }
html.buddy-dark .suggest-item { border-color: #2a2d37; }
html.buddy-dark .suggest-item:hover { background: #22252f; }

/* Chat Widget */
html.buddy-dark #chat-window { background: #14161e; }
html.buddy-dark .chat-msg.bot { background: #1a2e24; color: #e2e4e9; }
html.buddy-dark .chat-msg.user { background: var(--green-mid); }
html.buddy-dark .chat-action-btn { background: #1a2e24; color: var(--green-mid); }
html.buddy-dark .chat-order-item { background: #1a1d27; border-color: #2a2d37; }
html.buddy-dark .chat-msg.system-info { background: #2a2518; color: #d4af5a; }
html.buddy-dark #chat-input-row { border-color: #2a2d37; }
html.buddy-dark #chat-input { background: #1a1d27; border-color: #333; color: #e2e4e9; }

/* Dark Mode Fixes — unstyled elements */
html.buddy-dark .age-gate-box { background: #1a1d27; color: #e2e4e9; }
html.buddy-dark .age-gate-box .text-muted { color: #8b8f9a !important; }
html.buddy-dark .bottom-nav { background: #12141c; border-top-color: #2a2d37; }
html.buddy-dark .bottom-nav-item { color: #8b8f9a; }
html.buddy-dark .bottom-nav-item.active { color: var(--green-mid); }
html.buddy-dark .sticky-add-to-cart { background: #12141c; border-top-color: var(--green-mid); }
html.buddy-dark .hamburger-bar { background: #b0b4be; }
html.buddy-dark .cat-pill.active { background: #2d5a42; color: #e2e4e9; }
html.buddy-dark .hero { background: linear-gradient(135deg, #080e0b, #0f1f17, #162e22, #1a3a2a, #0f1f17, #080e0b) !important; background-size: 400% 400% !important; }
html.buddy-dark .star-rating .rating-value { color: #e2e4e9; }

/* Image Placeholders + Loading */
html.buddy-dark .img-placeholder { background: linear-gradient(135deg, #1a2e24 0%, #1e3329 50%, #1a2e24 100%); background-size:200% 200%; animation:placeholderShift 8s ease infinite; color:#4d9466; }
html.buddy-dark .img-placeholder::after { color:#4d9466; }
html.buddy-dark .shimmer { background: linear-gradient(90deg, #1a1d27 25%, #22252f 50%, #1a1d27 75%); }

/* Gradients */
html.buddy-dark .recently-viewed-fade { background: linear-gradient(transparent, var(--bg)); }

/* Mega Menu */
html.buddy-dark .mega-subitem { color: rgba(255,255,255,.5); }

/* Misc Overrides */
html.buddy-dark img { opacity: .92; }
html.buddy-dark .badge.bg-light { background: #2a2d37 !important; color: #ccc; }
html.buddy-dark .table { color: #e2e4e9; }
html.buddy-dark .table td, html.buddy-dark .table th { border-color: #2a2d37; }
html.buddy-dark .modal-content { background: #1a1d27; border-color: #2a2d37; }
html.buddy-dark .dropdown-menu { background: #1a1d27; border-color: #2a2d37; }
html.buddy-dark .dropdown-item { color: #e2e4e9; }
html.buddy-dark .dropdown-item:hover { background: #22252f; }
html.buddy-dark .alert { background: #1a2e24; border-color: #2a4a37; color: #a3c9b0; }
html.buddy-dark .pagination .page-link { background: #1a1d27; border-color: #2a2d37; color: #ccc; }
html.buddy-dark .pagination .page-item.active .page-link { background: var(--green-mid); border-color: var(--green-mid); }

/* Category Pills + Filter */
html.buddy-dark .cat-pill { background: #1a1d27; border: 1.5px solid #3a3d47; color: #ccc; }
html.buddy-dark .cat-pill:hover, html.buddy-dark .cat-pill.active { background: var(--green-mid); border-color: var(--green-mid); color: #fff; }
html.buddy-dark .cat-tag-chip { background: #22252f; border: 1px solid #3a3d47; color: #b0b4be; }
html.buddy-dark .cat-tag-chip:hover { background: #2a2d37; color: #e2e4e9; }
html.buddy-dark .cat-tag-chip.active { background: var(--green-mid); border-color: var(--green-mid); color: #fff; }

/* Filter Bar */
html.buddy-dark .filter-bar, html.buddy-dark .cat-toolbar { background: #14161e; border-color: #2a2d37; }
html.buddy-dark .form-control, html.buddy-dark .form-select { background: #22252f; color: #e2e4e9; border-color: #3a3d47; }

/* Product Card Images — softer contrast */
html.buddy-dark .product-card .card-img-wrap { background: #1e2130; border-bottom: 1px solid #2a2d37; }
html.buddy-dark .product-card img { border-radius: var(--radius) var(--radius) 0 0; }

/* Mix & Match / Bundle Banner */
html.buddy-dark .bundle-bar, html.buddy-dark [class*="mix-match"] { background: #1a2e24; border-color: #2a4a37; }

/* Price display */
html.buddy-dark .product-price, html.buddy-dark .price { color: var(--green-mid); }
html.buddy-dark .price-old { color: #666; }

/* Badges (NEU, Sale, etc) */
html.buddy-dark .badge.bg-success { background: var(--green-mid) !important; }
html.buddy-dark .badge.bg-warning { background: #8a6d1b !important; color: #f0d080; }
html.buddy-dark .badge.bg-danger { background: #7a2020 !important; }

/* Subcategory Dropdown Buttons */
html.buddy-dark .subcat-card { background: #1a1d27; border: 1px solid #2a2d37; }
html.buddy-dark .subcat-card:hover { background: #22252f; border-color: var(--green-mid); }

/* Scrollbar */
html.buddy-dark ::-webkit-scrollbar { width: 8px; }
html.buddy-dark ::-webkit-scrollbar-track { background: #0f1117; }
html.buddy-dark ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
html.buddy-dark ::-webkit-scrollbar-thumb:hover { background: #444; }

/* Transition for smooth switch */
html.buddy-dark body,
html.buddy-dark .card,
html.buddy-dark .navbar,
html.buddy-dark .product-card,
html.buddy-dark input { transition: background .4s ease, color .4s ease, border-color .4s ease; }