/* ============================================================
   Amber — a price-comparison style theme.
   Bright surfaces, product-first cards with a large image and
   a bold price, marine blue accents. Vertical cards on desktop,
   compact on mobile.
   ============================================================ */

html[data-theme="amber"] {
  --primary: #1766b5;
  --primary-dark: #104b83;
  --text-dark: #19334b;
  --text-light: #586c7c;
  --border: #d5e0e9;
  --bg-light: #eaf1f7;
  --studio-paper: #fff;
  --amber-canvas: #f4f7fa;
  --amber-surface: #fff;
  --amber-panel: #eaf1f7;
  --amber-ink: #19334b;
  color-scheme: light;
}

html[data-theme="amber"] body {
  background: var(--amber-canvas);
  color: var(--amber-ink);
  padding: 0;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
html[data-theme="amber"] .site-wrapper {
  max-width: 1240px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* ---------- Clean white masthead with amber accents ---------- */
html[data-theme="amber"] .top-nav {
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 10px #00000008;
}
html[data-theme="amber"] .nav-container {
  background: transparent;
  min-height: 82px;
  padding: 12px clamp(18px, 3vw, 42px);
}
html[data-theme="amber"] .logo a {
  color: var(--text-dark);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -0.04em;
}
html[data-theme="amber"] .logo img { filter: none; }
html[data-theme="amber"] .nav-right a,
html[data-theme="amber"] .theme-toggle,
html[data-theme="amber"] .mobile-menu-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dark);
  border-radius: 4px;
  min-height: 44px;
}
html[data-theme="amber"] .nav-right a:hover,
html[data-theme="amber"] .theme-toggle:hover,
html[data-theme="amber"] .mobile-menu-toggle:hover {
  background: #eaf3fb;
  border-color: var(--primary);
  color: var(--primary-dark);
}
html[data-theme="amber"] .nav-right a.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ---------- Content / search ---------- */
html[data-theme="amber"] .main-content { padding: clamp(18px, 2.7vw, 32px); }
html[data-theme="amber"] .search-section { margin: 4px auto 28px; }
html[data-theme="amber"] .search-container {
  width: 100%;
  max-width: 760px;
  height: 52px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 3px 12px #0000000a;
}
html[data-theme="amber"] .search-input { padding: 0 18px; font-size: 15px; min-width: 0; }
html[data-theme="amber"] .search-button { background: var(--primary); color: #fff; font-weight: 700; padding: 0 22px; }
html[data-theme="amber"] .search-container:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Headings ---------- */
html[data-theme="amber"] .section h2,
html[data-theme="amber"] .home-discovery-heading h2,
html[data-theme="amber"] .category-banner h1,
html[data-theme="amber"] .prod-title-top {
  letter-spacing: -0.04em;
  color: var(--text-dark);
}
html[data-theme="amber"] .section h2 {
  font-size: clamp(22px, 2.5vw, 30px);
  border: 0;
  padding: 0;
  margin-bottom: 18px;
}
html[data-theme="amber"] .section h2 i { color: var(--primary); font-size: 0.72em; }

/* ---------- Category banner cards ---------- */
html[data-theme="amber"] .home-category-banners { gap: 14px; margin-bottom: 32px; }
html[data-theme="amber"] .home-category-card {
  --banner-paper: #e8f1f8;
  --banner-ink: #19334b;
  background: var(--banner-paper);
  color: var(--banner-ink);
  border: 1px solid #d5e0e9;
  border-radius: 4px;
  min-height: 176px;
  padding: 24px 27px;
}
html[data-theme="amber"] .home-category-card::after {
  width: 95px; height: 100%; right: 0; top: 0;
  border-radius: 0; background: var(--primary); opacity: 0.16; transform: none;
}
html[data-theme="amber"] .home-category-card--2 { --banner-paper: #f4f8fc; }
html[data-theme="amber"] .home-category-card--3 { --banner-paper: #dcebf5; --banner-ink: #193b54; border-color: #c4d9e8; }
html[data-theme="amber"] .home-category-card--3 .home-category-subtitle { color: #536f83; }
html[data-theme="amber"] .home-category-card--4 { --banner-paper: #dcebf4; }
html[data-theme="amber"] .home-category-copy > strong {
  font-size: clamp(21px, 2.2vw, 28px);
  letter-spacing: -0.04em;
}
html[data-theme="amber"] .home-category-subtitle { color: #536f83; }
html[data-theme="amber"] .home-category-cta { font-weight: 700; color: var(--primary-dark); }

/* ---------- Product cards: big image, bold price ---------- */
html[data-theme="amber"] .produkte-grid { gap: 14px; }
html[data-theme="amber"] .produkte-grid > .produkt-card {
  background: var(--amber-surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 2px 6px #00000005;
  min-width: 0;
  overflow: hidden;
}
html[data-theme="amber"] .produkte-grid > .produkt-card:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 18px #00000010;
  transform: translateY(-2px);
}
html[data-theme="amber"] .produkte-grid > .produkt-card > .produkt-image {
  height: 220px;
  min-height: 0;
  margin: 0;
  padding: 18px;
  border-radius: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border);
}
html[data-theme="amber"] .produkte-grid > .produkt-card > .produkt-content {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
html[data-theme="amber"] .produkte-grid > .produkt-card .produkt-titel {
  font-size: 14px;
  height: 40px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--text-dark);
}
html[data-theme="amber"] .produkte-grid > .produkt-card .produkt-titel:hover { color: var(--primary-dark); }
html[data-theme="amber"] .produkte-grid > .produkt-card .produkt-actions {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  gap: 8px;
}
html[data-theme="amber"] .produkte-grid > .produkt-card .produkt-preis {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
html[data-theme="amber"] .produkte-grid > .produkt-card .produkt-preis small { color: var(--text-light); }

/* ---------- Shared card details ---------- */
html[data-theme="amber"] .produkt-zustand {
  background: #f4f4f4;
  color: #555;
  border-radius: 3px;
  padding: 2px 8px;
}
html[data-theme="amber"] .cart-btn,
html[data-theme="amber"] .fav-btn,
html[data-theme="amber"] .favorite-btn {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--primary-dark);
}
html[data-theme="amber"] .cart-btn:hover,
html[data-theme="amber"] .fav-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
html[data-theme="amber"] .fav-btn.active { background: #b95057; border-color: #b95057; color: #fff; }
html[data-theme="amber"] .neu-badge { background: #fff; color: #19334b; border-color: var(--primary); box-shadow: none; }
html[data-theme="amber"] .np-badge { background: #e8590c; }

/* ---------- Popular / discovery ---------- */
html[data-theme="amber"] .home-popular { border-color: var(--border); margin-top: 42px; }
html[data-theme="amber"] .home-popular .produkt-card { border-radius: 4px; }
html[data-theme="amber"] .home-popular .produkt-image { background: #fff; }
html[data-theme="amber"] .home-popular-tabs button[aria-selected="true"] {
  background: var(--primary); border-color: var(--primary); color: #fff;
}

/* ---------- Category banner (category page) ---------- */
html[data-theme="amber"] .category-banner {
  background: #fff;
  color: var(--text-dark);
  border: 1px solid var(--border);
  border-left: 5px solid var(--primary);
  border-radius: 4px;
  padding: 25px;
}
html[data-theme="amber"] .category-banner h1,
html[data-theme="amber"] .category-banner .category-stats { color: var(--text-dark); }
html[data-theme="amber"] .category-banner .back-btn { background: #fff; color: var(--primary-dark); border-color: var(--border); }

/* ---------- Filters ---------- */
html[data-theme="amber"] .filter-header h3 > i { color: var(--primary-dark); }
html[data-theme="amber"] .category-picker-path,
html[data-theme="amber"] .category-picker-choices,
html[data-theme="amber"] .filter-sidebar .category-picker-path,
html[data-theme="amber"] .filter-sidebar .category-picker-choices {
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
}
html[data-theme="amber"] .category-choice.is-selected,
html[data-theme="amber"] .filter-sidebar .category-choice.is-selected {
  background: #eaf3fb; border-color: var(--primary); color: var(--primary-dark);
}
html[data-theme="amber"] .category-choice:hover { background: #fbfaf8; }

/* ---------- Buttons / panels / forms ---------- */
html[data-theme="amber"] .btn,
html[data-theme="amber"] .back-btn,
html[data-theme="amber"] .pagination a,
html[data-theme="amber"] .pagination span { border-radius: 4px; }
html[data-theme="amber"] .btn:not(.sec):not(.danger):not(.ok),
html[data-theme="amber"] .pagination .cur { background: var(--primary); border-color: var(--primary); color: #fff; }
html[data-theme="amber"] .btn.sec,
html[data-theme="amber"] .back-btn { background: #fff; border-color: var(--border); color: var(--text-dark); }
html[data-theme="amber"] .panel,
html[data-theme="amber"] .summary,
html[data-theme="amber"] .cat-filters,
html[data-theme="amber"] .home-popular-picker,
html[data-theme="amber"] .mobile-product-filter {
  background: #fff; border-color: var(--border); border-radius: 4px; color: var(--text-dark);
}
html[data-theme="amber"] .form-row input,
html[data-theme="amber"] .form-row select,
html[data-theme="amber"] .form-row textarea,
html[data-theme="amber"] .qty-input {
  border-color: var(--border); background: #fff; color: var(--text-dark); border-radius: 4px;
}
html[data-theme="amber"] .gallery .main,
html[data-theme="amber"] .gallery .thumbs img { background: #fff; border-color: var(--border); border-radius: 4px; }
html[data-theme="amber"] .price-row,
html[data-theme="amber"] .prod-tools,
html[data-theme="amber"] .reco-box { background: var(--bg-light); border-color: var(--border); border-radius: 4px; }
html[data-theme="amber"] .price-lg { color: #1a1a1a; }
html[data-theme="amber"] .home-brand-card { border-radius: 4px; border-color: var(--border); background: #fff; }

/* ---------- Footer ---------- */
html[data-theme="amber"] footer {
  background: #fff; color: var(--text-dark); border-top: 3px solid var(--primary); margin-top: 42px;
}
html[data-theme="amber"] .footer-container { background: transparent; }
html[data-theme="amber"] .footer-section h4 { color: var(--primary-dark); }
html[data-theme="amber"] .footer-section.about p,
html[data-theme="amber"] .footer-section ul li a { color: #555; }
html[data-theme="amber"] .footer-bottom { background: #f7f8fa; border-color: var(--border); }
html[data-theme="amber"] .footer-bottom-content,
html[data-theme="amber"] .footer-bottom .copyright { color: #6f6f6f; }

html[data-theme="amber"] :focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

/* ============================================================
  DARK MODE — marine surfaces, blue accents
   ============================================================ */
html[data-theme="amber"][data-mode="dark"] {
  --primary: #8ecaff;
  --primary-dark: #addbff;
  --text-dark: #eef5fc;
  --text-light: #b6c7d6;
  --border: #365168;
  --bg-light: #203b50;
  --studio-paper: #193145;
  --amber-canvas: #0d2233;
  --amber-surface: #193145;
  --amber-panel: #203b50;
  --amber-ink: #eef5fc;
  color-scheme: dark;
}
html[data-theme="amber"][data-mode="dark"] body { background: var(--amber-canvas); color: var(--amber-ink); }
html[data-theme="amber"][data-mode="dark"] .site-wrapper { background: transparent; border: 0; }
html[data-theme="amber"][data-mode="dark"] .top-nav { background: #222; border-color: var(--border); }
html[data-theme="amber"][data-mode="dark"] .nav-container { background: transparent; }
html[data-theme="amber"][data-mode="dark"] .nav-right a { background: transparent; border-color: var(--border); color: var(--text-dark); }
html[data-theme="amber"][data-mode="dark"] .nav-right a.active { background: var(--primary); color: #1a1a1a; border-color: var(--primary); }
html[data-theme="amber"][data-mode="dark"] .theme-toggle,
html[data-theme="amber"][data-mode="dark"] .mobile-menu-toggle { background: transparent; color: var(--text-dark); border-color: var(--border); }
html[data-theme="amber"][data-mode="dark"] .search-container,
html[data-theme="amber"][data-mode="dark"] .search-input { background: var(--amber-surface); color: var(--text-dark); }
html[data-theme="amber"][data-mode="dark"] .search-button,
html[data-theme="amber"][data-mode="dark"] .btn:not(.sec):not(.danger):not(.ok),
html[data-theme="amber"][data-mode="dark"] .pagination .cur { background: var(--primary); border-color: var(--primary); color: #1a1a1a; }
html[data-theme="amber"][data-mode="dark"] .home-category-card { --banner-paper: #193c56; --banner-ink: #f0f7fc; border-color: #365a73; }
html[data-theme="amber"][data-mode="dark"] .home-category-card--3 { --banner-paper: #dcebf5; --banner-ink: #193b54; border-color: #c4d9e8; }
html[data-theme="amber"][data-mode="dark"] .home-category-subtitle { color: #bed6e6; }
html[data-theme="amber"][data-mode="dark"] .home-category-cta { color: var(--primary); }
html[data-theme="amber"][data-mode="dark"] .home-category-card--3 .home-category-subtitle { color: #536f83; }
html[data-theme="amber"][data-mode="dark"] .home-category-card--3 .home-category-cta { color: #104b83; }
html[data-theme="amber"][data-mode="dark"] .produkt-card,
html[data-theme="amber"][data-mode="dark"] .panel,
html[data-theme="amber"][data-mode="dark"] .summary,
html[data-theme="amber"][data-mode="dark"] .reco-item { background: var(--amber-surface); border-color: var(--border); color: var(--text-dark); }
html[data-theme="amber"][data-mode="dark"] .produkt-image,
html[data-theme="amber"][data-mode="dark"] .produkte-grid > .produkt-card > .produkt-image,
html[data-theme="amber"][data-mode="dark"] .home-popular .produkt-image,
html[data-theme="amber"][data-mode="dark"] .gallery .main { background: #fff; border-color: var(--border); }
html[data-theme="amber"][data-mode="dark"] .produkt-titel,
html[data-theme="amber"][data-mode="dark"] .section h2,
html[data-theme="amber"][data-mode="dark"] .home-discovery-heading h2 { color: #f0f0f0; }
html[data-theme="amber"][data-mode="dark"] .produkt-preis { color: #fff; }
html[data-theme="amber"][data-mode="dark"] .produkt-zustand { background: #333; color: #ccc; }
html[data-theme="amber"][data-mode="dark"] .cart-btn,
html[data-theme="amber"][data-mode="dark"] .fav-btn { background: #2f2f2f; border-color: var(--border); color: var(--primary); }
html[data-theme="amber"][data-mode="dark"] .neu-badge { background: #fff; color: #19334b; border-color: #fff; }
html[data-theme="amber"][data-mode="dark"] .category-banner { background: #222; color: #f0f0f0; border-color: var(--border); }
html[data-theme="amber"][data-mode="dark"] .category-banner h1,
html[data-theme="amber"][data-mode="dark"] .category-banner .category-stats { color: #f0f0f0; }
html[data-theme="amber"][data-mode="dark"] .category-picker-path,
html[data-theme="amber"][data-mode="dark"] .category-picker-choices,
html[data-theme="amber"][data-mode="dark"] .filter-sidebar .category-picker-path,
html[data-theme="amber"][data-mode="dark"] .filter-sidebar .category-picker-choices,
html[data-theme="amber"][data-mode="dark"] .home-popular-picker,
html[data-theme="amber"][data-mode="dark"] .cat-filters,
html[data-theme="amber"][data-mode="dark"] .mobile-product-filter { background: var(--amber-surface); border-color: var(--border); color: var(--text-dark); }
html[data-theme="amber"][data-mode="dark"] .category-choice,
html[data-theme="amber"][data-mode="dark"] .category-picker-path a { color: var(--text-dark); }
html[data-theme="amber"][data-mode="dark"] .category-choice.is-selected,
html[data-theme="amber"][data-mode="dark"] .filter-sidebar .category-choice.is-selected,
html[data-theme="amber"][data-mode="dark"] .category-choice:hover { background: #333; color: #fff; border-color: var(--primary); }
html[data-theme="amber"][data-mode="dark"] .btn.sec,
html[data-theme="amber"][data-mode="dark"] .back-btn { background: #2f2f2f; border-color: var(--border); color: var(--text-dark); }
html[data-theme="amber"][data-mode="dark"] .form-row input,
html[data-theme="amber"][data-mode="dark"] .form-row select,
html[data-theme="amber"][data-mode="dark"] .form-row textarea,
html[data-theme="amber"][data-mode="dark"] .qty-input { background: #2f2f2f; border-color: var(--border); color: var(--text-dark); }
html[data-theme="amber"][data-mode="dark"] .price-row,
html[data-theme="amber"][data-mode="dark"] .prod-tools,
html[data-theme="amber"][data-mode="dark"] .reco-box { background: #2a2a2a; border-color: var(--border); }
html[data-theme="amber"][data-mode="dark"] .mobile-filter-actions { background: var(--amber-surface); }
html[data-theme="amber"][data-mode="dark"] .home-brand-card { background: #fff; color: #243247; border-color: #4a4a4a; }
html[data-theme="amber"][data-mode="dark"] footer { background: #222; }
html[data-theme="amber"][data-mode="dark"] .footer-bottom { background: #1a1a1a; }
html[data-theme="amber"][data-mode="dark"] :focus-visible { outline-color: var(--primary); }

/* ============================================================
   MOBILE — compact product-first cards
   ============================================================ */
@media (max-width: 768px) {
  html[data-theme="amber"] .nav-container { gap: 12px; padding: 12px 14px; }
  html[data-theme="amber"] .logo { margin: 0; }
  html[data-theme="amber"] .logo a { font-size: 24px; }
  html[data-theme="amber"] .nav-right { gap: 7px; max-width: 100%; }
  html[data-theme="amber"] .nav-right a,
  html[data-theme="amber"] .theme-toggle,
  html[data-theme="amber"] .mobile-menu-toggle { width: 44px; height: 44px; padding: 0; }
  html[data-theme="amber"] .mobile-menu { background: #fff; border-color: var(--border); box-shadow: 0 12px 24px #00000022; }
  html[data-theme="amber"] .mobile-nav-links li a,
  html[data-theme="amber"] .mobile-user-section a { background: var(--bg-light); color: var(--text-dark); border-color: var(--border); border-radius: 4px; }
  html[data-theme="amber"] .mm-head { color: var(--text-dark); }
  html[data-theme="amber"] .main-content { padding: 16px 12px; }
  html[data-theme="amber"] .search-section { margin: 0 auto 12px !important; }
  html[data-theme="amber"] .search-container { height: 46px; }
  html[data-theme="amber"] .search-input { font-size: 16px; padding: 0 12px; }
  html[data-theme="amber"] .search-button { padding: 0 14px; }
  html[data-theme="amber"] .results-header { margin-bottom: 8px; }
  html[data-theme="amber"] .home-category-card { padding: 18px; min-height: 140px; }
  html[data-theme="amber"] .home-category-card::after { width: 56px; height: 100%; }
  html[data-theme="amber"] .home-category-copy > strong { font-size: 21px; }
  html[data-theme="amber"] .produkte-grid,
  html[data-theme="amber"] .produkte-grid.cols3 { gap: 6px; margin-top: 6px; }
  html[data-theme="amber"] .produkte-grid > .produkt-card > .produkt-image { height: 150px; padding: 8px; }
  html[data-theme="amber"] .produkte-grid > .produkt-card > .produkt-content { padding: 9px; gap: 5px; }
  html[data-theme="amber"] .produkte-grid > .produkt-card .produkt-titel { font-size: 12px; height: 36px; }
  html[data-theme="amber"] .produkte-grid > .produkt-card .produkt-preis { font-size: 17px; }
  html[data-theme="amber"] .produkte-grid > .produkt-card .produkt-actions { flex-wrap: wrap; }
  html[data-theme="amber"] .cart-btn,
  html[data-theme="amber"] .fav-btn { width: 34px; height: 34px; }
  html[data-theme="amber"] .category-banner { padding: 18px; gap: 12px; flex-wrap: wrap; }
  html[data-theme="amber"] .category-banner h1 { font-size: 24px; }
  html[data-theme="amber"] .mobile-filter-launcher { background: var(--primary); border-radius: 4px; color: #fff; }
  html[data-theme="amber"][data-mode="dark"] .mobile-menu { background: var(--amber-surface); }
}
@media (max-width: 390px) {
  html[data-theme="amber"] .main-content { padding: 15px 9px; }
  html[data-theme="amber"] .nav-right { gap: 4px; }
  html[data-theme="amber"] .produkte-grid > .produkt-card .produkt-actions { flex-wrap: wrap; }
  html[data-theme="amber"] .produkte-grid > .produkt-card .produkt-preis { line-height: 1.3; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="amber"] .produkt-card { transition: none; }
  html[data-theme="amber"] .produkt-card:hover { transform: none; }
}