/* ============================================================
   SNTTemplate58 v6.0.0 — Technical Premium Commerce
   snt-v6.css — v6 Komponenten- und Commerce-Schicht
   Basis: v5.8.3 custom-snt.css (Tokens/Base) bleibt unangetastet.
   Ergänzt: Catalog, PDP, Checkout, Account, Forms, Filter,
   Empty/Error-States, 404, Modals, Pagination, Tabs, Consent.

   Ziel: JTL/NOVA-Bootstrap-Markup wird GEERBT und v6-stylisiert,
   damit Smarty-Logik unverändert bleibt (Function > Design).
   ============================================================ */

/* ---------- 0b. Bootstrap Grid ERGÄNZUNG ----------
   KRITISCH: sntChild.css (v5.8.3 inline NOVA-Basis) definiert .row/.container,
   aber NICHT die .col-*-Spaltenklassen. Dadurch laufen alle JTL-Grid-Layouts
   (Productlist, PDP, Checkout, Account) ohne Spaltenbreiten -> Produkte
   stapeln links, grosse Leerflaechen rechts. Dies ist die komplette
   Bootstrap-4-Row/Col-Schicht (rein aus NOVA clear.css-Row/Col, hier
   kompiliert als eigene Regeln, kein !important). */
.row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
/* Semantische Grid-Verankerung: NOVA-Basis kann .row auf block zuruecksetzen.
   Bewusst und technisch begruendet, da JTL auf .row>col-Flex basiert. */
.row.product-list { display: flex !important; flex-wrap: wrap !important; }
.row.eq-height, .row-eq-height { display: flex !important; flex-wrap: wrap !important; }
.no-gutters { margin-right: 0; margin-left: 0; }
.no-gutters > [class*="col-"] { padding-right: 0; padding-left: 0; }
[class*="col-"] { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; }
.col { flex-basis: 0; flex-grow: 1; max-width: 100%; }
.col-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 576px) {
  .col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
  .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 768px) {
  .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 992px) {
  .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  .offset-lg-1 { margin-left: 8.333333%; }
  .offset-lg-2 { margin-left: 16.666667%; }
  .offset-lg-3 { margin-left: 25%; }
  .offset-lg-4 { margin-left: 33.333333%; }
  .offset-lg-5 { margin-left: 41.666667%; }
  .offset-lg-6 { margin-left: 50%; }
  .offset-lg-7 { margin-left: 58.333333%; }
  .offset-lg-8 { margin-left: 66.666667%; }
  .offset-lg-9 { margin-left: 75%; }
  .offset-lg-10 { margin-left: 83.333333%; }
  .offset-lg-11 { margin-left: 91.666667%; }
}
@media (min-width: 1200px) {
  .col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
  .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
  .col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
  .col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}
.row-eq-height { display: flex; flex-wrap: wrap; }
.row-eq-height > [class*="col-"] { display: flex; flex-direction: column; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-none { display: none !important; }
.d-md-flex { display: flex !important; }
.d-md-none { display: none !important; }
.d-lg-flex { display: flex !important; }
.d-lg-none { display: none !important; }
.d-xl-flex { display: flex !important; }
@media (max-width: 767.98px) { .d-md-flex { display: none !important; } .d-md-none { display: block !important; } }
@media (max-width: 991.98px) { .d-lg-flex { display: none !important; } .d-lg-none { display: block !important; } }
@media (max-width: 1199.98px) { .d-xl-flex { display: none !important; } }
.text-left-util { text-align: left !important; }
.text-right-util { text-align: right !important; }
.text-center-util { text-align: center !important; }
.ml-auto-util { margin-left: auto !important; }
.mr-auto-util { margin-right: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.col-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
.float-right { float: right !important; }

/* ---------- 1. Bootstrap-Basis auf v6-Tokens heben ---------- */
:root {
  /* Bootstrap-Variablen gezielt überschreiben (kein !important) */
  --bs-primary: var(--snt-brand);
  --bs-primary-rgb: 23, 45, 59;
  --primary: var(--snt-brand);
  --secondary: var(--snt-ink-500);
  --success: var(--snt-ok-500);
  --info: var(--snt-accent-600);
  --warning: var(--snt-warn-500);
  --danger: var(--snt-bad-500);
  --border-radius: var(--snt-r-md);
  --border-radius-lg: var(--snt-r-lg);
  --border-radius-sm: var(--snt-r-sm);
  --font-family-base: var(--snt-font-body);
  --body-color: var(--snt-text);
  --body-bg: var(--snt-surface-1);
  --headings-color: var(--snt-text-strong);
  --snt-ctl-radius: 10px;   /* Controls 8-10px gemäß Auftrag */
  --snt-card-radius: 14px;  /* Cards 12-16px gemäß Auftrag */
  --snt-bento-radius: 18px; /* Bento 16-20px gemäß Auftrag */
  --snt-gutter-x: var(--snt-gutter);
}

/* Container-Breiten (NOVA .container-Logik, hier explizit, da sntChild.css
   im Runtime-Pfad nicht sicher geladen wird; entspricht Tokens --snt-container) */
.container, .container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  --bs-gutter-x: var(--snt-gutter);
}
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container, .container-xl { max-width: 1140px; } }
@media (min-width: 1300px) { .container, .container-xl { max-width: var(--snt-container, 1320px); } }

body { background: var(--snt-surface-1); color: var(--snt-text); }

h1, .h1, h2, .h2, h3, .h3, h4, .h4 { color: var(--snt-text-strong); }
.title, .ttitle { color: var(--snt-text-strong); }

/* ---------- 2. Buttons ---------- */
.btn {
  --bs-btn-border-radius: var(--snt-ctl-radius);
  font-weight: 600;
  letter-spacing: .01em;
  transition: background-color var(--snt-dur-2) var(--snt-ease-out),
              border-color var(--snt-dur-2) var(--snt-ease-out),
              color var(--snt-dur-2) var(--snt-ease-out),
              transform var(--snt-dur-2) var(--snt-ease-out),
              box-shadow var(--snt-dur-2) var(--snt-ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary, .btn-de, .btn.btn-primary, .btn-primary.btn-block, #add-to-cart .btn-primary, .basket-details-add-to-cart, .productdetails .btn-primary, .btn.js-cfg-validate {
  background-color: var(--snt-brand) !important;
  border-color: var(--snt-brand) !important;
  color: #fff !important;
  font-weight: 700;
}
.btn-primary:hover, .btn-primary:focus, .btn.js-cfg-validate:hover {
  background-color: var(--snt-brand-700) !important;
  border-color: var(--snt-brand-700) !important;
}
#add-to-cart { border-top: 2px solid var(--snt-line); padding-top: var(--snt-s4); }
.btn-outline-primary {
  --bs-btn-color: var(--snt-brand);
  --bs-btn-border-color: var(--snt-line-strong);
  --bs-btn-hover-bg: var(--snt-brand-050);
  --bs-btn-hover-border-color: var(--snt-brand);
  --bs-btn-hover-color: var(--snt-brand-700);
}
.btn-outline-secondary {
  --bs-btn-color: var(--snt-ink-600);
  --bs-btn-border-color: var(--snt-line-strong);
  --bs-btn-hover-bg: var(--snt-ink-700);
  --bs-btn-hover-border-color: var(--snt-ink-700);
  --bs-btn-hover-color: #fff;
}
.btn-lg { --bs-btn-border-radius: 12px; }
.btn-sm { --bs-btn-border-radius: 8px; }

/* ---------- 3. Cards ---------- */
.card {
  --bs-card-border-radius: var(--snt-card-radius);
  --bs-card-border-color: var(--snt-line);
  --bs-card-cap-bg: var(--snt-surface-1);
  --bs-card-bg: var(--snt-surface-0);
  border-radius: var(--snt-card-radius);
  box-shadow: var(--snt-e1);
  border: 0;
}
.card.card-gray {
  background: var(--snt-surface-1);
}
.card-header {
  background: var(--snt-surface-1);
  border-bottom: 1px solid var(--snt-line-soft);
  padding: var(--snt-s4) var(--snt-s5);
}
.card-header .h3, .card-header h3 { margin-bottom: 0; }
.card-body { padding: var(--snt-s5); }

/* ---------- 4. Forms ---------- */
.form-control, .custom-select, .form-select {
  --bs-border-radius: var(--snt-ctl-radius);
  border-radius: var(--snt-ctl-radius);
  border-color: var(--snt-line-strong);
  padding: .55rem .85rem;
  color: var(--snt-text);
  background-color: #fff;
  transition: border-color var(--snt-dur-2) var(--snt-ease-out), box-shadow var(--snt-dur-2) var(--snt-ease-out);
}
.form-control:focus, .custom-select:focus, .form-select:focus {
  border-color: var(--snt-accent-600);
  box-shadow: 0 0 0 .2rem rgba(0,102,204,.15);
}
.form-group, .form-group label { color: var(--snt-text); font-weight: 600; font-size: var(--snt-fs-sm); }
.input-group-text {
  background: var(--snt-surface-1);
  border-color: var(--snt-line-strong);
  color: var(--snt-text-muted);
  border-radius: var(--snt-ctl-radius);
}
.form-counter .form-control { border-radius: 0; }
select.form-control, select.custom-select { cursor: pointer; }
.required-info { color: var(--snt-text-muted); font-size: var(--snt-fs-sm); }
.form-error-msg { color: var(--snt-bad-500); font-size: var(--snt-fs-sm); }
.has-error .form-control, .has-error input, .has-error select, .has-error textarea { border-color: var(--snt-bad-500); }
label.control-label { color: var(--snt-text-strong); }

fieldset legend { font-family: var(--snt-font-head); color: var(--snt-text-strong); font-weight: 700; font-size: 1.05rem; }

/* ---------- 5. Tables ---------- */
.table {
  --bs-table-bg: transparent;
  color: var(--snt-text);
}
.table thead th {
  border-bottom: 2px solid var(--snt-line);
  color: var(--snt-text-strong);
  font-family: var(--snt-font-head);
  font-size: var(--snt-fs-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.table td, .table th { border-color: var(--snt-line-soft); vertical-align: middle; }
.table-hover tbody tr:hover { background: var(--snt-surface-2); }
.table .price, .table .price_overall, .table strong { color: var(--snt-text-strong); }
.table-responsive { border-radius: var(--snt-card-radius); }

/* ---------- 6. Alerts & Notifications ---------- */
.alert {
  --bs-alert-border-radius: var(--snt-card-radius);
  border-radius: var(--snt-card-radius);
  border: 0;
  font-size: var(--snt-fs-sm);
  box-shadow: var(--snt-e1);
}
.alert-info { background: var(--snt-accent-050); color: var(--snt-ink-700); }
.alert-danger { background: var(--snt-bad-050); color: var(--snt-bad-500); }
.alert-warning { background: var(--snt-warn-050); color: var(--snt-warn-text); }
.alert-success { background: var(--snt-ok-050); color: var(--snt-ok-500); }
#no-cookies-warning { display: block; }

/* ---------- 7. Badges (NOVA ribbons, badges, counts) ---------- */
.badge {
  border-radius: var(--snt-r-pill);
  font-weight: 600;
  padding: .35em .65em;
}
.badge-primary, .badge-pill.badge-primary { background: var(--snt-brand); color: #fff; }
.badge-success { background: var(--snt-ok-500); color: #fff; }
.badge-warning { background: var(--snt-warn-500); color: #fff; }
.badge-danger { background: var(--snt-bad-500); color: #fff; }
.badge-info { background: var(--snt-accent-600); color: #fff; }
.badge-light { background: var(--snt-surface-2); color: var(--snt-text); }

/* ---------- 8. Breadcrumbs ---------- */
.breadcrumb {
  background: transparent;
  padding: var(--snt-s3) 0;
  margin-bottom: var(--snt-s4);
  font-size: var(--snt-fs-sm);
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--snt-line-strong); content: "/"; }
.breadcrumb-item a { color: var(--snt-text-muted); }
.breadcrumb-item a:hover { color: var(--snt-accent-600); }
.breadcrumb-item.active { color: var(--snt-text-strong); font-weight: 600; }

/* ---------- 9. Pagination ---------- */
.pagination .page-link {
  border-radius: var(--snt-ctl-radius);
  margin: 0 2px;
  border: 1px solid var(--snt-line);
  color: var(--snt-text);
  font-weight: 600;
  min-width: 38px;
  text-align: center;
  transition: background-color var(--snt-dur-2), color var(--snt-dur-2), border-color var(--snt-dur-2);
}
.pagination .page-item.active .page-link {
  background: var(--snt-brand);
  border-color: var(--snt-brand);
  color: #fff;
}
.pagination .page-link:hover { background: var(--snt-brand-050); border-color: var(--snt-accent-600); color: var(--snt-brand-700); }
.page-item:first-child .page-link, .page-item:last-child .page-link { border-radius: var(--snt-ctl-radius); }

/* ---------- 10. Nav / Dropdowns ---------- */
.dropdown-menu {
  border: 1px solid var(--snt-line);
  border-radius: var(--snt-card-radius);
  box-shadow: var(--snt-e2);
  padding: var(--snt-s2);
}
.dropdown-item { border-radius: 8px; padding: .5rem .9rem; font-weight: 500; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--snt-surface-2); color: var(--snt-brand-700); }
.dropdown-divider { border-color: var(--snt-line-soft); }

/* ---------- 11. Tabs ---------- */
.nav-tabs {
  border-bottom: 2px solid var(--snt-line-soft);
}
.nav-tabs .nav-link {
  border: 0;
  color: var(--snt-text-muted);
  font-weight: 600;
  margin-right: var(--snt-s2);
  padding: .75rem 1rem;
  border-bottom: 3px solid transparent;
  transition: color var(--snt-dur-2), border-color var(--snt-dur-2);
}
.nav-tabs .nav-link:hover { color: var(--snt-brand-700); }
.nav-tabs .nav-link.active {
  color: var(--snt-brand);
  border-bottom-color: var(--snt-accent-600);
  background: transparent;
}
.tab-content { padding-top: var(--snt-s4); }
#tab-productdetails .tab-pane { padding: var(--snt-s4) 0; }

/* ---------- 12. Accordion ---------- */
.accordion .card { border-radius: var(--snt-card-radius); overflow: hidden; }
.accordion .card-header { padding: 0; }
.accordion .card-header .btn {
  width: 100%;
  text-align: left;
  font-weight: 600;
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: var(--snt-text-strong);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0;
}
.accordion .card-header .btn::after { content: "+"; font-size: 1.4rem; color: var(--snt-accent-600); }
.accordion .card-header .btn[aria-expanded="true"]::after { content: "−"; }

/* ---------- 13. Modals ---------- */
.modal-content {
  border: 0;
  border-radius: var(--snt-bento-radius);
  box-shadow: var(--snt-e4);
}
.modal-header { border-bottom: 1px solid var(--snt-line-soft); }
.modal-footer { border-top: 1px solid var(--snt-line-soft); }
.modal-backdrop.show { opacity: .45; }

/* ---------- 14. Tooltips/Popovers ---------- */
.tooltip-inner { border-radius: var(--snt-r-sm); font-size: var(--snt-fs-xs); }
.popover { border-radius: var(--snt-card-radius); border-color: var(--snt-line); }

/* ---------- 15. Productlist / Catalog ---------- */
#result-wrapper { animation: snt-fade-in var(--snt-dur-3) var(--snt-ease-out); }
@keyframes snt-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Listing-Wrapper: Basis kann .snt-listing auf grid setzen -> Container
   schrumpft auf Inhalt (Karten à 70px). Verankert auf Block + voller Breite. */
.snt-listing { display: block !important; width: 100%; }
.snt-listing__container { width: 100% !important; }

.productlist-header-description-image {
  border-radius: var(--snt-card-radius);
  overflow: hidden;
  margin-bottom: var(--snt-s4);
}

/* SNT v6 — Category Page Head */
.snt-pagehead {
  padding: var(--snt-s7) 0 var(--snt-s5);
}
.snt-pagehead__title h1 {
  font-family: var(--snt-font-head);
  font-size: var(--snt-fs-h1);
  letter-spacing: var(--snt-ls-tight);
  margin-bottom: var(--snt-s3);
  color: var(--snt-text-strong);
}
.snt-pagehead__desc p { color: var(--snt-text-muted); max-width: 72ch; font-size: var(--snt-fs-lead); line-height: var(--snt-lh-loose); }
.snt-pagehead__image { border-radius: var(--snt-card-radius); overflow: hidden; margin-bottom: var(--snt-s4); }

/* SNT v6 — Subcategory Cards */
.snt-subcats { margin: var(--snt-s5) 0 var(--snt-s7); }
.snt-subcat {
  background: var(--snt-surface-0);
  border: 1px solid var(--snt-line);
  border-radius: var(--snt-card-radius);
  overflow: hidden;
  height: 100%;
  transition: box-shadow var(--snt-dur-3) var(--snt-ease-out), transform var(--snt-dur-3) var(--snt-ease-out), border-color var(--snt-dur-3);
}
.snt-subcat:hover { box-shadow: var(--snt-e2); border-color: var(--snt-line-strong); transform: translateY(-3px); }
.snt-subcat__media { display: block; background: var(--snt-surface-2); }
.snt-subcat__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.snt-subcat__body { padding: var(--snt-s4); }
.snt-subcat__title { font-family: var(--snt-font-head); font-weight: 700; color: var(--snt-text-strong); text-decoration: none; font-size: 1.05rem; }
.snt-subcat__title:hover { color: var(--snt-accent-600); }
.snt-subcat__desc { color: var(--snt-text-muted); font-size: var(--snt-fs-sm); margin: var(--snt-s2) 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.snt-subcat__children { list-style: none; margin: var(--snt-s3) 0 0; padding: 0; display: grid; gap: 4px; }
.snt-subcat__children a { color: var(--snt-text-muted); font-size: var(--snt-fs-sm); text-decoration: none; }
.snt-subcat__children a:hover { color: var(--snt-accent-600); }

/* SNT v6 — Productlist grid */
.snt-productlist { row-gap: 0; }
.snt-product-item { margin-bottom: var(--snt-s6); }

/* SNT v6 — Empty state */
.snt-empty {
  text-align: center;
  padding: var(--snt-s11) var(--snt-s4);
  border-radius: var(--snt-card-radius);
  background: var(--snt-surface-0);
  border: 1px dashed var(--snt-line-strong);
  margin: var(--snt-s7) 0;
}
.snt-empty__icon { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--snt-surface-2); color: var(--snt-line-strong); margin-bottom: var(--snt-s4); }
.snt-empty h2 { font-size: var(--snt-fs-h3); color: var(--snt-text-strong); }
.snt-empty p { color: var(--snt-text-muted); max-width: 46ch; margin-inline: auto; }
.snt-empty__form fieldset { display: flex; gap: var(--snt-s2); align-items: flex-end; justify-content: center; flex-wrap: wrap; border: 0; padding: 0; margin: var(--snt-s5) 0 0; }
.snt-empty__field { min-width: 280px; }

/* SNT v6 — result options / filter row */
.snt-result-options { margin: var(--snt-s4) 0; }
.snt-btn-filter .snt-filter-count { margin-left: var(--snt-s2); }
.snt-filter-panel { border-radius: var(--snt-card-radius); padding: var(--snt-s4); box-shadow: var(--snt-e2); }

/* Kat-Beschreibung / Heading */
#result-wrapper .title h1, #result-wrapper .title h2, .productlist-header .title h1 {
  font-size: var(--snt-fs-h1);
  letter-spacing: var(--snt-ls-tight);
  margin-bottom: var(--snt-s3);
}
#result-wrapper .desc p { color: var(--snt-text-muted); max-width: 72ch; }

/* Subcategory tiles */
.sub-categories { border-radius: var(--snt-card-radius); padding: var(--snt-s3); }
.sub-categories:hover { background: var(--snt-surface-2); }
.content-cats-small .sub-categories img { border-radius: var(--snt-r-md); }
.sub-categories .caption a { font-weight: 600; color: var(--snt-text-strong); text-decoration: none; }
.sub-categories .caption a:hover { color: var(--snt-accent-600); }
.sub-categories ul li a { color: var(--snt-text-muted); font-size: var(--snt-fs-sm); }
.sub-categories ul li a:hover { color: var(--snt-accent-600); }
.sub-categories hr { border-color: var(--snt-line-soft); }

/* Productbox (Card) */
.productbox {
  background: var(--snt-surface-0);
  border: 1px solid var(--snt-line);
  border-radius: var(--snt-card-radius);
  padding: var(--snt-s4);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow var(--snt-dur-3) var(--snt-ease-out), transform var(--snt-dur-3) var(--snt-ease-out), border-color var(--snt-dur-3) var(--snt-ease-out);
}
.productbox:hover, .productbox-hover:hover {
  border-color: var(--snt-line-strong);
  box-shadow: var(--snt-e2);
  transform: translateY(-4px);
  z-index: var(--snt-z-card-hover);
}
.productbox-inner { flex: 1; display: flex; flex-direction: column; }
.productbox-image { border-radius: var(--snt-r-md); overflow: hidden; margin-bottom: var(--snt-s4); background: var(--snt-surface-2); }
.productbox-image img { object-fit: contain; }
.productbox-title { font-family: var(--snt-font-head); font-weight: 600; color: var(--snt-text-strong); font-size: var(--snt-fs-body); line-height: 1.35; margin-bottom: var(--snt-s2); }
.productbox-title a { color: var(--snt-text-strong); text-decoration: none; }
.productbox-title a:hover { color: var(--snt-accent-600); }
.productbox .price_wrapper, .productbox .price {
  font-family: var(--snt-font-body);
  color: var(--snt-text-strong);
}
.productbox .price, .productbox-price {
  font-weight: 700;
  font-size: var(--snt-fs-h4);
  color: var(--snt-brand);
}
.productbox .price_label { color: var(--snt-text-muted); }
.productbox-quick-actions .btn { color: var(--snt-text-muted); padding: .35rem .5rem; }
.productbox-quick-actions .btn:hover { color: var(--snt-accent-600); background: var(--snt-surface-2); border-radius: 8px; }
.product-wrapper { margin-bottom: var(--snt-s6); }

/* Productbox variations */
.productbox-variations .custom-select, .productbox-variations select { width: auto; min-width: 160px; }
.variations-collapse .form-group { margin-bottom: var(--snt-s2); }

/* List view */
.productlist .product-list .productbox { flex-direction: row; }
.productlist .product-list .productbox-image { margin-right: var(--snt-s4); margin-bottom: 0; max-width: 200px; }

/* ---------- 16. PDP ---------- */
.productdetails-section { padding: var(--snt-block-y) 0; }
#gallery .slick-slide img { border-radius: var(--snt-r-md); }
.product-detail-image, .product-detail .product-detail-image { border-radius: var(--snt-r-md); overflow: hidden; }
.productdetails img { border-radius: var(--snt-r-md); }

/* PDP price block */
.price_wrapper .price, .price_wrapper .product-detail-price, .product-detail-price {
  color: var(--snt-brand);
  font-weight: 800;
  font-size: var(--snt-fs-h2);
}
.price_wrapper .price_label { color: var(--snt-text-muted); }
.saving-price, .price .save-percent { color: var(--snt-ok-500); font-weight: 600; }
.saving-price { font-size: var(--snt-fs-sm); }
.price-note, .delivery-note, .vat-note { color: var(--snt-text-muted); font-size: var(--snt-fs-sm); }
.my-5 a[href*="versand"], .shipping-note a { color: var(--snt-text-muted); }

/* Availability / stock */
.stock-information { margin: var(--snt-s3) 0; }
.delivery-status.text-success, .stock-status { color: var(--snt-ok-500); font-weight: 600; }
.delivery-status { font-size: var(--snt-fs-sm); }
.estimated-delivery { font-weight: 600; color: var(--snt-text-strong); }
.estimated-delivery-info { color: var(--snt-text-muted); font-weight: 400; }
.stock-status .fas, .stock-status i, .delivery-status .fas { margin-right: 6px; }

/* Variations */
.variations { border-radius: var(--snt-card-radius); background: var(--snt-surface-1); padding: var(--snt-s4); }
.variation label { font-weight: 600; color: var(--snt-text-strong); }
.variation .form-control, .variation .custom-select { min-width: 220px; }

/* Gallery thumbnails */
.productdetails-thumbs img, .gallery-thumbs img { opacity: .75; border: 2px solid transparent; border-radius: 8px; transition: opacity var(--snt-dur-2), border-color var(--snt-dur-2); }
.productdetails-thumbs img:hover, .productdetails-thumbs li.active img, .gallery-thumbs img.active { opacity: 1; border-color: var(--snt-accent-600); }

/* Header info list (PDP meta) */
.details-attributes { border-top: 1px solid var(--snt-line-soft); }
.details-attributes table td { padding: var(--snt-s2) var(--snt-s4); }
.details-attributes table td:first-child { color: var(--snt-text-muted); }
.manufacturer a { color: var(--snt-text-strong); font-weight: 600; }

/* Reviews */
.review-rating, .rating .fa-star.checked, .rating i.checked { color: var(--snt-warn-500); }
.reviews .card, .review .card { box-shadow: none; border: 1px solid var(--snt-line-soft); }
.review-heading { color: var(--snt-text-strong); font-family: var(--snt-font-head); font-weight: 700; }

/* SNR v6 — PDP */
.snt-pdp { row-gap: var(--snt-s4); }
.snt-pdp__title { font-size: var(--snt-fs-h2) !important; }
.snt-pdp__rating { margin-bottom: var(--snt-s3); }
.snt-pdp__meta li { margin-bottom: var(--snt-s2); color: var(--snt-text-muted); font-size: var(--snt-fs-sm); }
.snt-pdp__meta li strong { color: var(--snt-text-strong); }
.snt-pdp__meta li a { color: var(--snt-accent-600); }
.snt-pdp__shortdesc { color: var(--snt-text); font-size: var(--snt-fs-lead); line-height: var(--snt-lh-loose); margin-bottom: var(--snt-s4); }
.snt-pdp__offer { background: var(--snt-surface-0); border: 1px solid var(--snt-line); border-radius: var(--snt-card-radius); padding: var(--snt-s5); box-shadow: var(--snt-e1); }
.snt-pdp__offer::before { content: "Artikeldetails & Bestellung"; display: block; font-family: var(--snt-font-head); font-weight: 700; font-size: var(--snt-fs-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--snt-text-muted); margin-bottom: var(--snt-s4); }
.snt-pdp__sliders .recommendations .slick-list { margin: 0 calc(var(--snt-s2) * -1); }

/* Cross-selling / Slider */
.sn-product-slider .card, .basket-xsell .card, .product-slider .card { margin: 0 var(--snt-s2); }

/* ---------- 17. Checkout ---------- */
#checkout, .checkout, .basket { animation: snt-fade-in var(--snt-dur-3) var(--snt-ease-out); }
.checkout-steps { list-style: none; display: flex; padding: 0; margin: 0 0 var(--snt-s6); gap: var(--snt-s2); flex-wrap: wrap; }
.checkout-steps li { flex: 1; min-width: 120px; }
.checkout-steps li a, .checkout-steps li span {
  display: block;
  padding: var(--snt-s3) var(--snt-s4);
  border-radius: var(--snt-ctl-radius);
  background: var(--snt-surface-0);
  border: 1px solid var(--snt-line);
  color: var(--snt-text-muted);
  font-weight: 600;
  font-size: var(--snt-fs-sm);
  text-decoration: none;
}
.checkout-steps li.active a, .checkout-steps li.active span { background: var(--snt-brand); border-color: var(--snt-brand); color: #fff; }
.checkout-steps li.done a { background: var(--snt-ok-050); border-color: var(--snt-ok-500); color: var(--snt-ok-500); }
.checkout-steps li a:hover { border-color: var(--snt-accent-600); }

.checkout-items-header, .cart-items-header { color: var(--snt-text-muted); font-size: var(--snt-fs-sm); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.checkout-items-item, .cart-items-body { border-radius: var(--snt-r-md); background: var(--snt-surface-0); margin-bottom: var(--snt-s3); padding: var(--snt-s3) 0; }
.checkout-items-total-wrapper { background: var(--snt-surface-1); border-radius: var(--snt-card-radius); padding: var(--snt-s4); }
.checkout-items-total-total .price, .basket-summary-total .total-sum, .price.total-sum {
  color: var(--snt-brand);
  font-weight: 800;
}
.cart-summary .card-gray { box-shadow: var(--snt-e1); }
.cart-summary .basket-summary-total { border-top: 2px solid var(--snt-line); padding-top: var(--snt-s3); }
#cart-checkout-btn, .checkout-btn, .cart-summary .btn-primary { width: 100%; }

/* ---------- 17b. Cart v6 (Tabellen-Layout robust) ---------- */
.basket .basket_wrapper { background: transparent; }
.basket .basket-items { display: block; }
.basket .cart-items-body, .basket .row.cart-items-body { display: flex; flex-wrap: wrap; align-items: center; background: var(--snt-surface-0); border: 1px solid var(--snt-line); border-radius: var(--snt-card-radius); padding: var(--snt-s4); margin-bottom: var(--snt-s4); }
.basket .cart-items-body > [class*="col-"] { padding: var(--snt-s2); }
.basket .cart-items-image img { max-width: 90px; border-radius: var(--snt-r-md); }
.basket .cart-items-name { font-family: var(--snt-font-head); font-weight: 700; color: var(--snt-text-strong); text-decoration: none; font-size: 1rem; }
.basket .cart-items-name:hover { color: var(--snt-accent-600); }
.basket .cart-items-quantity .form-counter { max-width: 140px; }
.basket .cart-items-price, .basket .price_overall { font-weight: 700; color: var(--snt-brand); }
.basket .cart-items-delete .btn { color: var(--snt-text-muted); }
.basket .cart-items-delete .btn:hover { color: var(--snt-bad-500); }
.basket .cart-items-header { color: var(--snt-text-muted); text-transform: uppercase; letter-spacing: .04em; font-size: var(--snt-fs-xs); font-weight: 700; margin-bottom: var(--snt-s3); }
.basket .cart-items-header hr, .basket .cart-items-body > .col-12 > hr { border-color: var(--snt-line-soft); }

/* Checkout item rows (NOVA/5.7-kompatibel) */
.checkout-items-item { display: flex; flex-wrap: wrap; align-items: center; background: var(--snt-surface-0); border: 1px solid var(--snt-line); border-radius: var(--snt-card-radius); padding: var(--snt-s4); margin-bottom: var(--snt-s3); }
.checkout-items-item > [class*="col-"] { padding: var(--snt-s2); }
.checkout-items-total-wrapper { display: block; }

/* Kassen-Zusammenfassung (rechte Sidebar) */
.cart-summary { border-radius: var(--snt-card-radius); }
.cart-summary .card-gray { box-shadow: var(--snt-e2); }
.cart-summary .basket-summary-total { border-top: 2px solid var(--snt-line); padding-top: var(--snt-s3); }
.cart-summary .basket-summary-total .total-sum, .cart-summary .price.total-sum { color: var(--snt-brand); font-weight: 800; font-size: 1.3rem; }
#cart-checkout-btn, .checkout-btn, .cart-summary .btn-primary { width: 100%; }

/* Coupon / Gutschein */
.card-gray .card-header .btn.collapsed, .card-gray .card-header strong { color: var(--snt-text-strong); }
#coupon-code, #couponCode { text-transform: uppercase; letter-spacing: .08em; }

/* ---------- 18. Login / Register / Account ---------- */
.snt-auth { padding: var(--snt-s11) 0; }
.snt-auth__card { max-width: 520px; margin-inline: auto; }
.snt-auth .login-form, .snt-auth .register-form { background: var(--snt-surface-0); border: 1px solid var(--snt-line); border-radius: var(--snt-card-radius); padding: var(--snt-s7); box-shadow: var(--snt-e2); max-width: 520px; }
.snt-auth legend { font-size: var(--snt-fs-h4); color: var(--snt-text-strong); }
.login-form, .register-form, .account-form { background: var(--snt-surface-0); border: 1px solid var(--snt-line); border-radius: var(--snt-card-radius); padding: var(--snt-s6); box-shadow: var(--snt-e1); max-width: 640px; }
.login-form legend, .register-form legend { font-size: var(--snt-fs-h4); }
.register-wrapper, .resetpw-wrapper { display: block; font-size: var(--snt-fs-sm); margin-top: var(--snt-s2); }
.account-head-data { margin-bottom: var(--snt-s4); }
.account-data-item .card { min-height: 180px; }
.account-data-item .card-header { background: var(--snt-surface-0); }
.btn-row .btn { margin-bottom: var(--snt-s2); }

/* ---------- 19. Empty States ---------- */
.basket-empty, .wishlist-empty, .no-results, .list-empty {
  text-align: center;
  padding: var(--snt-s11) var(--snt-s4);
  border-radius: var(--snt-card-radius);
  background: var(--snt-surface-0);
  border: 1px dashed var(--snt-line-strong);
}
.basket-empty .bubble, .wishlist-empty i, .no-results i { font-size: 2.4rem; color: var(--snt-line-strong); margin-bottom: var(--snt-s3); }
.basket-empty .alert, .wishlist-empty .alert, .no-results .alert { box-shadow: none; background: transparent; font-size: var(--snt-fs-h4); color: var(--snt-text-strong); }
.basket-empty+*, .empty-actions { margin-top: var(--snt-s4); }

/* ---------- 20. Error States ---------- */
.form-field-error, .invalid-feedback, .nhr .has-error + .form-error-msg { color: var(--snt-bad-500); font-size: var(--snt-fs-sm); }
input.is-invalid, .was-validated input:invalid { border-color: var(--snt-bad-500); }

/* ---------- 20b. 404 v6 ---------- */
.snt-404 { padding: var(--snt-s12) 0 var(--snt-s11); }
.snt-404__inner { text-align: center; max-width: 720px; margin-inline: auto; }
.snt-404__visual { color: var(--snt-line-strong); margin-bottom: var(--snt-s5); }
.snt-404__code { font-family: var(--snt-font-tech); text-transform: uppercase; letter-spacing: .18em; color: var(--snt-accent-600); font-weight: 700; font-size: var(--snt-fs-sm); margin-bottom: var(--snt-s3); }
.snt-404 h1 { font-size: var(--snt-fs-h1); margin-bottom: var(--snt-s4); }
.snt-404__text { color: var(--snt-text-muted); font-size: var(--snt-fs-lead); line-height: var(--snt-lh-loose); margin-bottom: var(--snt-s7); }
.snt-404__actions { display: flex; gap: var(--snt-s3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--snt-s8); }
.snt-404__cats { display: flex; gap: var(--snt-s3); justify-content: center; flex-wrap: wrap; }
.snt-404__cats a { font-size: var(--snt-fs-sm); font-weight: 600; color: var(--snt-text-muted); text-decoration: none; border: 1px solid var(--snt-line); border-radius: var(--snt-r-pill); padding: .5rem 1rem; transition: color var(--snt-dur-2), border-color var(--snt-dur-2); }
.snt-404__cats a:hover { color: var(--snt-accent-600); border-color: var(--snt-accent-600); }

/* ---------- 21. Footer v6 (NOVA fallback) ---------- */
footer { font-size: var(--snt-fs-sm); }
footer .footer-boxes, footer .box, footer .list-unstyled a { color: var(--snt-text-on-dark-muted); text-decoration: none; }
footer .box a:hover { color: var(--snt-text-on-dark); }
footer h3 { color: var(--snt-text-on-dark); }

/* ---------- 22. Consent / Cookie ---------- */
#jtl-consent-container, .consent-container { z-index: var(--snt-z-overlay); }
.consent-modal .modal-content { border-radius: var(--snt-bento-radius); }
.consent-modal .btn-primary { background: var(--snt-brand); border-color: var(--snt-brand); }
.consent-modal h3, .consent-modal h2 { color: var(--snt-text-strong); }
.consent-modal .option-row { border-radius: var(--snt-r-md); margin-bottom: var(--snt-s2); }
.consent-modal .option-row.is-fixed { background: var(--snt-surface-2); border-left: 4px solid var(--snt-ok-500); }
.consent-modal .option-row input[type="checkbox"], .consent-modal .custom-control-input { margin-right: 6px; }

/* ---------- 23. NOVA suggestion / livesearch ---------- */
#livesearch { background: var(--snt-surface-0); border: 1px solid var(--snt-line); border-radius: var(--snt-card-radius); box-shadow: var(--snt-e2); }
#livesearch .h2 { font-size: var(--snt-fs-h4); color: var(--snt-text-strong); }
#livesearch a { color: var(--snt-accent-600); }
#livesearch .badge-pill { background: var(--snt-accent-050); color: var(--snt-accent-700); }

/* ---------- 24. Search result wrapper ---------- */
#search .search-wrapper, .search-wrapper { background: var(--snt-surface-0); border: 1px solid var(--snt-line); border-radius: var(--snt-card-radius); padding: var(--snt-s4); }
.search-suggestions { margin: var(--snt-s4) 0; }

/* ---------- 24b. Contact v6 ---------- */
.snt-contact { background: var(--snt-surface-0); border: 1px solid var(--snt-line); border-radius: var(--snt-card-radius); padding: var(--snt-s6); box-shadow: var(--snt-e1); }
.snt-contact__top { color: var(--snt-text-muted); margin-bottom: var(--snt-s4); }
.snt-contact__bottom { color: var(--snt-text-muted); margin-top: var(--snt-s4); }
.snt-contact .contact-form-hr, .snt-contact form hr { border-color: var(--snt-line-soft); }
.snt-contact fieldset { border: 0; margin: 0; padding: 0; }
.snt-contact .contact-form-privacy a { color: var(--snt-text-muted); font-size: var(--snt-fs-sm); text-decoration: underline; }

/* ---------- 24c. Manufacturers v6 ---------- */
.snt-manufacturers { margin-top: var(--snt-s5); }
.snt-manufacturer-card {
  background: var(--snt-surface-0);
  border: 1px solid var(--snt-line);
  border-radius: var(--snt-card-radius);
  padding: var(--snt-s4);
  text-align: center;
  height: 100%;
  transition: box-shadow var(--snt-dur-3) var(--snt-ease-out), transform var(--snt-dur-3) var(--snt-ease-out), border-color var(--snt-dur-3);
}
.snt-manufacturer-card:hover { box-shadow: var(--snt-e2); border-color: var(--snt-line-strong); transform: translateY(-3px); }
.snt-manufacturer-card img { margin-inline: auto; margin-bottom: var(--snt-s3); max-height: 90px; object-fit: contain; }
.snt-manufacturer-card a { text-decoration: none; }
.snt-manufacturer-card__name { display: block; font-family: var(--snt-font-head); font-weight: 700; color: var(--snt-text-strong); font-size: var(--snt-fs-sm); }
.snt-manufacturer-card a:hover .snt-manufacturer-card__name { color: var(--snt-accent-600); }

/* Sitemap v6 */
.sitemap-wrapper-linkgroup .card, .sitemap-wrapper-categories .card, .sitemap-wrapper-manufacturer .card, .sitemap-wrapper-news .card, .sitemap-wrapper-news-categories .card { margin-bottom: var(--snt-s6); }
.sitemap-group ul { list-style: none; padding-left: 0; }
.sitemap-group li { padding: 6px 0; }
.sitemap-group a { color: var(--snt-text-muted); text-decoration: none; }
.sitemap-group a:hover { color: var(--snt-accent-600); text-decoration: underline; }

/* ---------- 25. Product Slider ---------- */
.slick-prev, .slick-next { background: var(--snt-surface-0); border: 1px solid var(--snt-line); color: var(--snt-brand-700); border-radius: 50%; width: 40px; height: 40px; box-shadow: var(--snt-e1); }
.slick-prev:hover, .slick-next:hover { background: var(--snt-brand); color: #fff; }
.slick-dots li button::before { color: var(--snt-line-strong); font-size: .6rem; }
.slick-dots li.slick-active button::before { color: var(--snt-accent-600); }

/* ---------- 26. Ribbons (NOVA) ---------- */
.ribbon { border-radius: 0 var(--snt-r-sm) var(--snt-r-sm) 0; }
.ribbon-danger { background: var(--snt-bad-500); }
.ribbon-success { background: var(--snt-ok-500); }
.ribbon-primary { background: var(--snt-brand); font-weight: 700; }

/* ---------- 27. Selection wizard ---------- */
.selection-wizard-page .card { border-radius: var(--snt-card-radius); }
.selection-wizard-step { font-weight: 700; font-family: var(--snt-font-head); color: var(--snt-text-strong); }

/* ---------- 28. Newsletter ---------- */
.newsletter-container .form-control { min-width: 240px; }
.newsletter-input-group { gap: var(--snt-s2); }

/* ---------- 29. Sticky header offset ---------- */
body.snt-sticky-body { padding-top: 0; }
.snt-header { z-index: var(--snt-z-header); }

/* ---------- 30. Reduced motion global ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 31. Print ---------- */
@media print {
  .snt-header, .snt-footer, .snt-topbar, .snt-burger, .snt-act, footer, .snt-band, .snt-section { display: none !important; }
  body { background: #fff; }
  .container, .container-fluid { max-width: 100%; }
}