@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* =============================================================
   Contabo Cart — "Engineered Console" design layer
   Order configurator for Contabo Cloud VPS/VDS. Light + Dark.
   Scoped to the order form (#order-standard_cart / ovh classes),
   layered non-destructively over the vendor template. Uses the
   id-prefix + !important pattern to beat vendor id rules.
   Signature: Space Grotesk UI, JetBrains Mono for spec/price
   figures (tabular), one royal-blue accent + one teal signal,
   the running total as the single bold moment.
   Angelegt/ausgebaut 2026-09-08.
   ============================================================= */

/* ---------- Design tokens (LIGHT = default) ----------
   Neutrale Lagom2-Grautoene (kein eigenes Blau-Schema).
   Abgeglichen mit den Theme-Variablen --card-bg/--ui-block-divider-color
   /--gray-base/--brand-primary. Geaendert 2026-09-08. */
#order-standard_cart,
.product-configure,
#orderfrm {
  --font-ui: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Code', Menlo, monospace;
  --bg: #f4f5f6;
  --surface-1: #ffffff;
  --surface-2: #f4f5f6;
  --surface-3: #e9eaec;
  --border: #e9eaec;
  --border-strong: #d3d5d9;
  --text: #17191c;
  --text-muted: #5e636e;
  --text-faint: #5e636e;
  --accent: #1062fe;
  --accent-strong: #0b4fd0;
  --accent-soft: #eef2f7;
  --signal: #0a7359;
  --signal-soft: #e2f6ef;
  --radius-lg: 14px;
  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(20,30,55,.04), 0 8px 24px rgba(20,30,55,.06);
  --ring: 0 0 0 3px rgba(47,107,255,.22);
}

/* ---------- Design tokens (DARK) ---------- */
html.lagom-dark-mode #order-standard_cart,
html.lagom-dark-mode .product-configure,
html.lagom-dark-mode #orderfrm {
  --bg: #121212;
  --surface-1: #242424;
  --surface-2: #2b2b2b;
  --surface-3: #333333;
  --border: #2e2e2e;
  --border-strong: #424242;
  --text: #e0e0e0;
  --text-muted: #b3b3b3;
  --text-faint: #b3b3b3;
  --accent: #4d8dff;
  --accent-strong: #7aa6ff;
  --accent-soft: #2b2b2b;
  --signal: #2fd6a6;
  --signal-soft: #10241f;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  --ring: 0 0 0 3px rgba(77,141,255,.30);
}

/* ---------- Base typography for the order form region ---------- */
#order-standard_cart,
#order-standard_cart p,
#order-standard_cart label,
#order-standard_cart span,
#order-standard_cart h1,
#order-standard_cart h2,
#order-standard_cart h3,
#order-standard_cart h4,
#order-standard_cart h5,
#order-standard_cart h6 {
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
#order-standard_cart .main-header-title,
#order-standard_cart h1.font-size-36 {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  color: var(--text) !important;
}

/* mono, tabular figures for every price / spec number */
#order-standard_cart .ctbo-price,
#order-standard_cart .total-due-today .amt,
#order-standard_cart .summary-container span.pull-right.float-right,
#order-standard_cart .order-summary .total-due-today span,
#order-standard_cart .billingcycle-box .price,
#order-standard_cart small {
  font-family: var(--font-mono) !important;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.01em;
}

/* =============================================================
   PRODUCT HERO  (.product-info)
   ============================================================= */
#order-standard_cart .product-info {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow);
  padding: 24px 26px !important;
  margin: 8px 0 22px !important;
  position: relative;
  overflow: hidden;
}
/* left accent spine — a hardware "rail" */
#order-standard_cart .product-info::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(var(--accent), var(--accent-strong));
}
#order-standard_cart .product-info .product-title {
  font-family: var(--font-ui) !important;
  font-size: 27px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  color: var(--text) !important;
  margin: 0 0 14px !important;
}
/* spec readout lines */
#order-standard_cart .product-info p,
#order-standard_cart .product-info li {
  color: var(--text-muted) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 0 7px !important;
  padding-left: 20px;
  position: relative;
}
#order-standard_cart .product-info p::before,
#order-standard_cart .product-info li::before {
  content: "";
  position: absolute; left: 2px; top: 9px;
  width: 6px; height: 6px; border-radius: 2px;
  background: var(--accent);
  opacity: .8;
}
#order-standard_cart .product-info p:first-of-type { color: var(--text) !important; }

/* =============================================================
   FIELD CONTAINERS / SECTION WRAPPERS
   ============================================================= */
#order-standard_cart .field-container,
#order-standard_cart .location-center,
#order-standard_cart .header-lined,
#order-standard_cart .list-radio-btn,
#order-standard_cart .billing-inner,
#order-standard_cart div#productConfigurableOptions,
#order-standard_cart .addon-promo-container {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
}
#order-standard_cart .field-container { padding: 20px 22px !important; box-shadow: var(--shadow); }

/* Section label above cards ("Abrechnungszeitraum wählen" etc.) */
#order-standard_cart .field-container label,
#order-standard_cart label#billingcycleheader,
#order-standard_cart .bil-title h3,
#order-standard_cart .bil-title h4,
#order-standard_cart .choose-os h4 {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--text) !important;
  letter-spacing: -0.01em;
  text-transform: none !important;
}

/* Section dividers ("Server konfigurieren" / "Konfigurierbare Optionen" / "Verfügbare Add-ons")
   — restyle from centered-on-hr to a clean left-aligned section header */
#order-standard_cart hr { border: 0 !important; height: 0 !important; margin: 30px 0 4px !important; }
#order-standard_cart span.primary-bg-color {
  color: var(--text) !important;
  background: transparent !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em;
  padding: 0 0 0 14px !important;
  position: relative;
  left: 0 !important;
  display: inline-block;
}
#order-standard_cart span.primary-bg-color::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 20px; border-radius: 2px;
  background: linear-gradient(var(--accent), var(--accent-strong));
}

/* =============================================================
   BILLING CYCLE CARDS
   ============================================================= */
#order-standard_cart .billingcycle .billing-inner {
  background: var(--surface-2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 16px 18px !important;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  position: relative;
  min-height: 104px;
}
#order-standard_cart .billingcycle .billing-inner:hover {
  border-color: var(--border-strong) !important;
  background: var(--surface-1) !important;
}
#order-standard_cart .billingcycle .billing-inner.active {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  box-shadow: var(--ring);
}
#order-standard_cart .billingcycle .billing-inner h6 {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--text) !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.01em;
}
#order-standard_cart .billingcycle .billing-inner .ctbo-price {
  display: block;
  font-size: 23px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1.1;
}
#order-standard_cart .billingcycle .billing-inner.active .ctbo-price { color: var(--accent-strong) !important; }
#order-standard_cart .billingcycle .billing-inner small {
  display: inline-block;
  margin-top: 6px;
  color: var(--text-muted) !important;
  font-size: 12px !important;
}
/* savings badge injected in tpl on the annual card */
#order-standard_cart .ctbo-save {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--font-mono) !important;
  font-size: 11px !important; font-weight: 700 !important;
  color: var(--signal) !important;
  background: var(--signal-soft) !important;
  border: 1px solid var(--signal) !important;
  border-radius: 999px;
  padding: 2px 9px;
  letter-spacing: 0;
}

/* =============================================================
   CONFIG OPTION CARDS  (OS, region, panel, disk, add-ons)
   ============================================================= */
#order-standard_cart .billingcycle-box,
#order-standard_cart .billingcycle-box.config-box,
#order-standard_cart .billingcycle-box.operating-box,
#order-standard_cart .operating-box,
#order-standard_cart .htmlOS {
  background: var(--surface-2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  color: var(--text) !important;
  transition: border-color .15s ease, background .15s ease;
  padding: 14px !important;
}
#order-standard_cart .billingcycle-box:hover,
#order-standard_cart .operating-box:hover {
  border-color: var(--border-strong) !important;
  background: var(--surface-1) !important;
}
#order-standard_cart .billingcycle-box:has(.checked),
#order-standard_cart .billingcycle-box.active {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  box-shadow: var(--ring);
}
#order-standard_cart .billingcycle-box h4,
#order-standard_cart .billingcycle-box p strong,
#order-standard_cart .config-box p strong,
#order-standard_cart .radioname {
  color: var(--text) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
}
#order-standard_cart .billingcycle-box p { color: var(--text-muted) !important; }
#order-standard_cart .billingcycle-box:has(.checked) p strong { color: var(--accent-strong) !important; }

/* Radio option lists (disk / IPv4 / add-ons) */
#order-standard_cart .list-radio-btn { padding: 6px 4px !important; }
#order-standard_cart .location-center .list-section .list-radio-btn p label,
#order-standard_cart .list-section .list-radio-btn p label,
#order-standard_cart .list-radio-btn p label {
  color: var(--text) !important;
  background: transparent !important;
  font-family: var(--font-ui) !important;
  border-radius: var(--radius-sm) !important;
  transition: background .12s ease;
}
#order-standard_cart .list-radio-btn p label:hover { background: var(--surface-2) !important; }
#order-standard_cart .list-radio-btn p label span,
#order-standard_cart .list-radio-btn p label span * {
  font-family: var(--font-mono) !important;
  color: var(--text-muted) !important;
  font-feature-settings: "tnum" 1;
}
#order-standard_cart .list-section .list-radio-btn [type="radio"]:checked + label {
  background: var(--accent-soft) !important;
  color: var(--text) !important;
}
#order-standard_cart .list-section .list-radio-btn [type="radio"]:checked + label span { color: var(--accent-strong) !important; }
#order-standard_cart .panel-check .check h6.check-title,
#order-standard_cart .check-title,
#order-standard_cart h6.check-title { color: var(--text) !important; font-family: var(--font-ui) !important; }

/* =============================================================
   ORDER SUMMARY (sticky sidebar) — the bold moment lives here
   ============================================================= */
#order-standard_cart .order-summary,
#order-standard_cart #orderSummary,
#order-standard_cart .summary-container,
#order-standard_cart #producttotal.summary-container {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow);
}
#order-standard_cart #orderSummary { padding: 22px 22px 24px !important; position: sticky; top: 20px; }
#order-standard_cart .order-summary h2,
#order-standard_cart h2.font-size-30 {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  color: var(--text) !important;
  letter-spacing: -0.01em;
  margin: 0 0 18px !important;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
#order-standard_cart .summary-container .product-name {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important; font-size: 15px !important;
  color: var(--text) !important; display: block;
}
#order-standard_cart .summary-container .product-group {
  color: var(--text-faint) !important; font-size: 12px !important;
  font-style: normal !important; display: block; margin-bottom: 10px;
}
#order-standard_cart .summary-container .clearfix { font-size: 12.5px !important; margin-bottom: 9px !important; }
#order-standard_cart .summary-container span.pull-left.float-left { color: var(--text-muted) !important; }
#order-standard_cart .summary-container span.pull-right.float-right { color: var(--text) !important; }
#order-standard_cart .summary-totals { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; }
#order-standard_cart .total-due-today {
  border-top: 1px solid var(--border); margin-top: 6px; padding-top: 14px;
}
#order-standard_cart .total-due-today .amt {
  font-size: 30px !important; font-weight: 700 !important;
  color: var(--text) !important; letter-spacing: -0.02em;
}
#order-standard_cart .total-due-today span:not(.amt) { color: var(--text-faint) !important; font-size: 11.5px !important; }

/* CTA */
#order-standard_cart #btnCompleteProductConfig,
#order-standard_cart .order-summary .btn-primary,
#order-standard_cart #orderSummary .btn {
  background: #2159e6 !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
  color: #fff !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 13px 20px !important;
  width: 100%;
  margin-top: 18px;
  box-shadow: 0 6px 16px rgba(47,107,255,.28);
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
#order-standard_cart #btnCompleteProductConfig:hover,
#order-standard_cart .order-summary .btn-primary:hover {
  background: #1a49c8 !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(47,107,255,.36);
}

/* =============================================================
   FORM FIELDS
   ============================================================= */
#order-standard_cart .form-control,
#order-standard_cart select,
#order-standard_cart input[type="text"],
#order-standard_cart input[type="password"],
#order-standard_cart input[type="email"],
#order-standard_cart textarea {
  background: var(--surface-2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  font-family: var(--font-ui) !important;
  transition: border-color .12s ease, box-shadow .12s ease;
}
#order-standard_cart .form-control:focus,
#order-standard_cart select:focus,
#order-standard_cart input:focus,
#order-standard_cart textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: var(--ring) !important;
  outline: none !important;
}
#order-standard_cart select option { background: var(--surface-1) !important; color: var(--text) !important; }
#order-standard_cart ::placeholder { color: var(--text-faint) !important; }
#order-standard_cart .field-container hr,
#order-standard_cart .form-group label { color: var(--text-muted) !important; }

/* generic link accent */
#order-standard_cart a { color: var(--accent) !important; }

/* =============================================================
   RESPONSIVE  (mobile-first refinements)
   ============================================================= */
@media (max-width: 767px) {
  #order-standard_cart .product-info { padding: 18px 18px !important; }
  #order-standard_cart .product-info .product-title { font-size: 22px !important; }
  #order-standard_cart .field-container { padding: 16px 16px !important; }
  #order-standard_cart .billingcycle { margin-bottom: 12px; }
  #order-standard_cart .billingcycle .billing-inner { min-height: 0; }
  #order-standard_cart #orderSummary { position: static; }
  #order-standard_cart .total-due-today .amt { font-size: 26px !important; }
  #order-standard_cart .billingcycle .billing-inner .ctbo-price { font-size: 21px !important; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  #order-standard_cart * { transition: none !important; }
}

/* ===== Data Center Location — Flaggen-Karten (JS-Enhancement) ===== */
#order-standard_cart .ctbo-dc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
#order-standard_cart .ctbo-dc-card {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px;
  background: var(--surface-2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
#order-standard_cart .ctbo-dc-card:hover {
  border-color: var(--border-strong) !important;
  background: var(--surface-1) !important;
}
#order-standard_cart .ctbo-dc-card.active {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  box-shadow: var(--ring);
}
#order-standard_cart .ctbo-dc-flag { flex: 0 0 auto; line-height: 0; }
#order-standard_cart .ctbo-dc-flag img {
  width: 28px; height: 20px; object-fit: cover;
  border-radius: 3px; display: block;
  box-shadow: 0 0 0 1px rgba(0,0,0,.10);
}
#order-standard_cart .ctbo-dc-name {
  font-family: var(--font-ui); font-weight: 500; font-size: 13.5px;
  color: var(--text) !important; letter-spacing: -0.005em;
}
#order-standard_cart .ctbo-dc-card.active .ctbo-dc-name { color: var(--accent-strong) !important; }
@media (max-width: 767px) {
  #order-standard_cart .ctbo-dc-grid { grid-template-columns: 1fr 1fr; }
}

/* dc card body: name + price stacked */
#order-standard_cart .ctbo-dc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#order-standard_cart .ctbo-dc-price {
  font-family: var(--font-mono) !important;
  font-feature-settings: "tnum" 1;
  font-size: 12px; color: var(--text-muted) !important; letter-spacing: -0.01em;
}
#order-standard_cart .ctbo-dc-card.active .ctbo-dc-price { color: var(--accent-strong) !important; }

/* Nameserver-Präfix-Felder ausblenden (für Contabo-VPS irrelevant) */
#order-standard_cart .form-group:has(> #inputNs1prefix),
#order-standard_cart .form-group:has(> #inputNs2prefix),
#order-standard_cart .form-group:has(> input[name="ns1prefix"]),
#order-standard_cart .form-group:has(> input[name="ns2prefix"]) { display: none !important; }

/* ===== Operating System — Familien-Icon-Karten (JS-Enhancement) ===== */
#order-standard_cart .ctbo-os-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px; margin-top: 10px;
}
#order-standard_cart .ctbo-os-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 12px;
  background: var(--surface-2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  text-align: center;
}
#order-standard_cart .ctbo-os-card:hover { border-color: var(--border-strong) !important; background: var(--surface-1) !important; }
#order-standard_cart .ctbo-os-card.active { border-color: var(--accent) !important; background: var(--accent-soft) !important; box-shadow: var(--ring); }
#order-standard_cart .ctbo-os-ic img { width: 34px; height: 34px; object-fit: contain; display: block; }
#order-standard_cart .ctbo-os-name { font-family: var(--font-ui); font-weight: 600; font-size: 13px; color: var(--text) !important; letter-spacing: -0.01em; }
#order-standard_cart .ctbo-os-card.active .ctbo-os-name { color: var(--accent-strong) !important; }
#order-standard_cart .ctbo-os-version { margin-top: 14px; max-width: 340px; }
#order-standard_cart .ctbo-os-verlabel {
  display: block; font-family: var(--font-ui); font-weight: 600; font-size: 13px;
  color: var(--text-muted) !important; margin-bottom: 6px;
}

/* Hostname-Feld ausblenden (Contabo vergibt automatisch; nicht kundenseitig setzbar) */
#order-standard_cart .form-group:has(> #inputHostname),
#order-standard_cart .form-group:has(> input[name="hostname"]) { display: none !important; }

/* ===== Kontrast-Fix: Add-on-Sektionen (SSL/Monitoring) + faint-Tokens ===== */
#order-standard_cart .addon-promo-container label,
#order-standard_cart .addon-promo-container .radio-inline,
#order-standard_cart .radio-inline,
#order-standard_cart ins.iCheck-helper,
#order-standard_cart .addon-promo-container p,
#order-standard_cart .addon-promo-container h3,
#order-standard_cart .addon-promo-container h4 { color: var(--text) !important; }
#order-standard_cart .addon-promo-container .pull-right.float-right,
#order-standard_cart .addon-promo-container .pull-left.float-left,
#order-standard_cart .addon-promo-container span[class*="pull-right"],
#order-standard_cart .addon-promo-container span[class*="pull-left"] {
  color: var(--text-muted) !important;
  font-family: var(--font-mono) !important;
  font-feature-settings: "tnum" 1;
}
/* description sub-text in add-ons a touch quieter but still AA */
#order-standard_cart .addon-promo-container .addon-desc,
#order-standard_cart .addon-promo-container p.small { color: var(--text-muted) !important; }

/* Alert-Link Kontrast */
#order-standard_cart .alert-link { color: var(--accent-strong) !important; text-decoration: underline; }

/* Vendor alert-warning Textkontrast (Order-Form) */
#order-standard_cart .alert-warning { color: #8a5300 !important; }
html.lagom-dark-mode #order-standard_cart .alert-warning { color: #ffcf80 !important; }


/* =============================================================
   GRUPPEN-LISTENSEITE  /store/<gruppe>
   Gehoert zu products.tpl (Wrapper <div id="order-standard_cart"
   class="hw-store">). Identischer Block in ovh_cart und contabo_cart,
   damit beide Shopseiten gleich aussehen.

   FARBEN: ausschliesslich Lagom2-Theme-Variablen, keine eigenen
   Farbwerte. Damit sind die Flaechen die neutralen Lagom-Grautoene
   (#fff / #242424, Trenner #E9EAEC / #2E2E2E) statt eines eigenen
   blauen Farbschemas, und der Dunkelmodus kommt automatisch mit —
   Lagom schaltet ihn ueber html.lagom-dark-mode, nicht ueber
   prefers-color-scheme. Nur die beiden Kopfleisten-Toene sind
   eigene neutrale Grauwerte, weil Lagom dafuer keine Variable hat.

   SCOPE: alles auf .hw-store — die Konfigurationsseite
   (configureproduct.tpl) traegt diese Klasse NICHT und bleibt
   unberuehrt. Seitenkopf/Hauptmenue werden nicht angefasst,
   die Kategorie-Leiste behaelt die Lagom-Standardfarben.
   !important ist noetig, weil die Vendor-Regeln (style-ovh.css,
   all.min.css) mit #order-standard_cart-Prefix und !important
   arbeiten. Angelegt 2026-09-08.
   ============================================================= */

#order-standard_cart.hw-store {
  --hw-card: var(--card-bg);
  --hw-border: var(--ui-block-divider-color);
  --hw-title: var(--panel-title-color);
  --hw-text: var(--gray-base);
  --hw-accent: var(--brand-primary);
  --hw-head: #f4f5f6;
  --hw-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}
html.lagom-dark-mode #order-standard_cart.hw-store {
  --hw-head: #2b2b2b;
}

/* ---- Raster: gleich hohe Karten, eine Spalte auf dem Handy ---- */
#order-standard_cart.hw-store .hw-grid .row { align-items: stretch; }
#order-standard_cart.hw-store .hw-col { display: flex; margin-bottom: 24px; }

/* ---- Karte ---- */
#order-standard_cart.hw-store .hw-card {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  float: none !important;
  background: var(--hw-card) !important;
  border: 1px solid var(--hw-border) !important;
  border-radius: var(--border-radius-base, 6px) !important;
  box-shadow: var(--ui-block-shadow) !important;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
  transition: transform .15s ease, border-color .15s ease;
}
#order-standard_cart.hw-store .hw-card:hover {
  border-color: var(--hw-accent) !important;
  transform: translateY(-2px);
}

/* ---- Kartenkopf ---- */
#order-standard_cart.hw-store .hw-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--hw-head) !important;
  border-bottom: 1px solid var(--hw-border) !important;
  padding: 15px 20px !important;
  margin: 0 !important;
  min-height: 0 !important;
}
#order-standard_cart.hw-store .hw-card-title {
  color: var(--hw-title) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.3;
}
#order-standard_cart.hw-store .hw-qty {
  color: var(--hw-text) !important;
  font-size: 12px !important;
  white-space: nowrap;
}

/* ---- Spec-Liste ----
   Die API-importierten Beschreibungen sind eine <li>-Kette; products.tpl
   huellt sie in <ul class="hw-specs">. Label steht im <b>, Wert dahinter. */
#order-standard_cart.hw-store .hw-desc {
  flex: 1 1 auto;
  padding: 14px 20px 6px !important;
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  color: var(--hw-text) !important;
}
#order-standard_cart.hw-store .hw-specs {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#order-standard_cart.hw-store .hw-specs li {
  display: block;
  padding: 7px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--hw-border);
  color: var(--hw-text) !important;
  font-size: 14px;
  line-height: 1.45;
  background: none !important;
}
#order-standard_cart.hw-store .hw-specs li:last-child { border-bottom: 0; }
#order-standard_cart.hw-store .hw-specs li b,
#order-standard_cart.hw-store .hw-specs li strong {
  color: var(--hw-title) !important;
  font-weight: 600 !important;
}
/* .feature-value ist bei den Contabo-Produkten die GANZE Zeile (der
   Merkmalsname ist leer). Deshalb nur leicht hervorheben, sonst steht
   die komplette Liste fett. */
#order-standard_cart.hw-store .hw-specs li .feature-value {
  color: var(--hw-title) !important;
  font-weight: 500 !important;
}
#order-standard_cart.hw-store .hw-desc-text {
  color: var(--hw-text) !important;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 !important;
}

/* Beschreibung als Zeilenliste, obwohl die Listenstruktur fehlt.
   WHMCS entfernt <li>/<ul> aus $product.featuresdesc (die Beschreibungen
   kommen per API-Import genau als <li><b>Label</b> Wert</li>-Kette), uebrig
   bleibt eine Fliesstext-Wurst mit fetten Labels. Ein Block-Pseudoelement vor
   jedem <b> erzwingt den Zeilenumbruch, Label und Wert bleiben zusammen.
   Bewusst im CSS und nicht in der Datenbank geloest: die Produkttexte werden
   vom Anbieter-Import ueberschrieben. */
#order-standard_cart.hw-store .hw-desc-text b,
#order-standard_cart.hw-store .hw-desc-text strong {
  color: var(--hw-title) !important;
  font-weight: 600 !important;
}
#order-standard_cart.hw-store .hw-desc-text b::before,
#order-standard_cart.hw-store .hw-desc-text strong::before {
  content: "";
  display: block;
  height: 7px;
}
#order-standard_cart.hw-store .hw-desc-text > b:first-child::before,
#order-standard_cart.hw-store .hw-desc-text > strong:first-child::before {
  display: none;
}

/* ---- Fuss: Preis links, Bestellknopf rechts ---- */
#order-standard_cart.hw-store .hw-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 20px 16px !important;
  margin: 0 !important;
  border-top: 1px solid var(--hw-border) !important;
  background: none !important;
  float: none !important;
  width: auto !important;
  text-align: left !important;
}
#order-standard_cart.hw-store .hw-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  color: var(--hw-text) !important;
}
#order-standard_cart.hw-store .hw-from,
#order-standard_cart.hw-store .hw-cycle {
  color: var(--hw-text) !important;
  font-size: 12px !important;
  line-height: 1.3;
}
/* Preis: der wichtigste Wert der Karte. Im Dunkelmodus war er vorher
   unsichtbar, weil die Vendor-Regel eine dunkle Schriftfarbe setzt. */
#order-standard_cart.hw-store .hw-price .price {
  display: block;
  color: var(--hw-title) !important;
  font-family: var(--hw-mono);
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
#order-standard_cart.hw-store .hw-setup {
  color: var(--hw-text) !important;
  font-size: 12px !important;
  line-height: 1.35;
  margin-top: 3px;
}

/* ---- Bestellknopf: Lagom-Markenfarbe statt Bootstrap-Gruen ---- */
#order-standard_cart.hw-store .hw-cta {
  background: var(--hw-accent) !important;
  border: 0 !important;
  color: #ffffff !important;
  border-radius: var(--border-radius-base, 6px) !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap;
  box-shadow: none !important;
  transition: filter .15s ease;
}
#order-standard_cart.hw-store .hw-cta:hover,
#order-standard_cart.hw-store .hw-cta:focus {
  filter: brightness(1.12);
  color: #ffffff !important;
}
#order-standard_cart.hw-store .hw-cta:focus-visible {
  outline: 2px solid var(--hw-accent);
  outline-offset: 2px;
}
#order-standard_cart.hw-store .hw-cta i { margin-right: 7px; }

/* ---- Kategorie-Leiste bleibt Lagom-Standard.
   Nur Absicherung: eine pauschale a-Regel des Order-Form-Layers darf
   die Menuefarben nicht ueberschreiben. ---- */
#order-standard_cart.hw-store .cart-sidebar .list-group-item {
  color: var(--list-group-action-color) !important;
}
#order-standard_cart.hw-store .cart-sidebar .list-group-item:hover {
  color: var(--list-group-action-active-color) !important;
  background-color: var(--ui-block-link-hover-bg) !important;
}
#order-standard_cart.hw-store .cart-sidebar .list-group-item.active {
  color: var(--list-group-action-active-color) !important;
}

/* ---- Handy ---- */
@media (max-width: 767px) {
  #order-standard_cart.hw-store .hw-col { margin-bottom: 18px; }
  #order-standard_cart.hw-store .hw-card-head { padding: 14px 16px !important; }
  #order-standard_cart.hw-store .hw-desc { padding: 12px 16px 4px !important; }
  #order-standard_cart.hw-store .hw-card-foot { padding: 12px 16px 14px !important; }
  #order-standard_cart.hw-store .hw-cta { width: 100%; text-align: center; }
  #order-standard_cart.hw-store .hw-price .price { font-size: 22px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #order-standard_cart.hw-store .hw-card,
  #order-standard_cart.hw-store .hw-cta { transition: none; }
  #order-standard_cart.hw-store .hw-card:hover { transform: none; }
}

/* ---- Produkt-Chat / Teilen / Produktblatt (Addon product_page, hooks.php)
   Der Hook haengt die Links vor dem Bestellknopf ein, verpackt in .l2ps-links.
   Hier werden sie in der Fusszeile zu einer eigenen Zeile unter Preis und
   Knopf. Farben kommen aus dem Hook (Lagom-Variablen), hier nur Layout. ---- */
#order-standard_cart.hw-store .hw-card-foot .l2ps-links {
  order: 9;            /* eigene Zeile UNTER Preis und Bestellknopf */
  flex: 0 0 100%;      /* nur hier, nicht global im Hook (siehe hooks.php) */
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hw-border);
}
#order-standard_cart.hw-store .hw-card-foot .l2ps-links > div {
  width: auto !important;
  margin: 0 !important;
}
#order-standard_cart.hw-store .hw-card-foot .l2ps-links a {
  font-size: 13px !important;
  font-weight: 600 !important;
}