/* ==========================================================================
   automation-shop — custom stylesheet
   Base theme for balkanautomation24 family of stores.
   Each store "flavor" overrides only the :root tokens below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Montserrat — local, variable font (weights 300–500)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Design tokens — override these per store flavor
   -------------------------------------------------------------------------- */

:root {
  /* Brand colors */
  --color-primary:       #dd3333;
  --color-primary-hover: #dd6e6e;

  /* Text */
  --color-text:          #343434;
  --color-heading:       #1a1a1a;
  --color-muted:         #908989;

  /* UI */
  --color-bg:            #ffffff;
  --color-border:        #e8e8e8;
  --color-price-old:     #b0b0b0;
  --color-sale:          #dd3333;

  /* Typography */
  --font-base:           'Montserrat', sans-serif;
  --font-size-base:      14px;
  --line-height-base:    1.7;

  /* Shapes */
  --radius-btn:          2em;
  --radius-input:        3px;

  /* Motion */
  --transition:          0.2s ease-in-out;

  /* --------------------------------------------------------------------
     Unit 6a — Unified card/list design tokens
     These centralize the scattered hard-coded values used across
     Family A (product text cards), Family B (brand grid) and
     Family C (julosalesdeep sd-card) so the whole "card/list" surface
     can be retuned from one place.
     -------------------------------------------------------------------- */

  /* Card surfaces */
  --card-bg:             #ffffff;
  --card-bg-muted:       #fafbfc;   /* used behind thumbnails / brand img well */
  --card-bg-alt:         #f5f7fa;   /* used on spec chips / initials tile top */
  --card-bg-alt2:        #eceff3;   /* used on initials tile bottom */

  /* Card borders / dividers */
  --card-border:         #e3e6ec;   /* default card separator */
  --card-border-soft:    #f0f2f5;   /* subtle inner divider (between thumb + body) */

  /* Card radii */
  --card-radius:         6px;
  --card-radius-sm:      4px;
  --card-radius-chip:    3px;

  /* Card typography colors */
  --card-heading-color:  #1a2942;   /* model / price / name */
  --card-subtle-color:   #6b7785;   /* brand label, meta */
  --card-body-color:     #4a5360;   /* card body text */
  --card-meta-color:     #8a93a0;   /* spec chip / initials text */

  /* Card padding scale (side — used horizontally) */
  --card-pad-x:          16px;
  --card-pad-x-sm:       14px;

  /* Card padding scale (vertical) */
  --card-pad-top:        18px;
  --card-pad-top-chip:   26px;      /* when top-left chip reserved */
  --card-pad-y-mid:      12px;      /* around card footer / between sections */
  --card-pad-bottom:     14px;

  /* Card hover elevation */
  --card-hover-shadow:   0 4px 12px rgba(26, 74, 122, 0.12);
  --card-hover-lift:     translateY(-2px);
  --card-hover-anim:     box-shadow 0.15s ease, transform 0.15s ease;

  /* Section headings (home sections, listing pages, related-products) */
  --section-heading-size:    22px;
  --section-heading-weight:  700;
  --section-heading-spacing: 0.5px;
  --section-heading-color:   var(--card-heading-color);
  --section-heading-mb:      24px;

  /* Flags / chips */
  --flag-font-size:      10px;
  --flag-pad-x:          8px;
  --flag-pad-y:          2px;
  --flag-gap:            4px;
  --flag-radius:         var(--card-radius-chip);
  --flag-bg-new:         var(--color-primary);
  --flag-bg-discount:    #f39d72;
  --flag-fg:             #ffffff;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: var(--line-height-base);
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-base);
  color: var(--color-heading);
  line-height: 1.3;
}

h1 { font-size: 28px; font-weight: 600; }
h2 { font-size: 22px; font-weight: 600; }
h3 { font-size: 18px; font-weight: 600; }
h4 { font-size: 15px; font-weight: 600; }
h5 { font-size: 13px; font-weight: 600; }
h6 { font-size: 12px; font-weight: 600; }

a {
  color: var(--color-text);
  transition: color var(--transition);
}

a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 13px;
  border-radius: var(--radius-btn);
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-secondary {
  border-radius: var(--radius-btn);
}

/* --------------------------------------------------------------------------
   5. Primary color — replace Classic's #24b9d7
   -------------------------------------------------------------------------- */

a:hover,
#header .top-menu a[data-depth="0"]:hover {
  color: var(--color-primary);
}

#header .header-nav .cart-preview.active {
  background-color: var(--color-primary);
}

.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-link                       { color: var(--color-primary); }
.text-primary                   { color: var(--color-primary) !important; }
.bg-primary                     { background-color: var(--color-primary) !important; }
.page-link                      { color: var(--color-primary); }
.pagination .current a,
.pagination a:hover             { color: var(--color-primary); }

/* Pagination spacing (classic uses `display:inline` on li → numbers
   collide). Use flex container with gap. */
.pagination .page-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  padding: 8px;
  margin: 0;
  list-style: none;
}
.pagination .page-list li {
  display: inline-flex;
  margin: 0;
}
.pagination .page-list li a,
.pagination .page-list li .spacer {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  min-width: 36px;
  justify-content: center;
  text-decoration: none;
  border-radius: 3px;
  color: #333;
  font-weight: 500;
}
.pagination .page-list li a:hover {
  background: #f0f0f0;
}
.pagination .page-list li.current a {
  background: var(--color-primary, #c8102e);
  color: #fff;
  font-weight: 600;
}
.pagination .page-list li.current a:hover {
  background: var(--color-primary, #c8102e);
  color: #fff;
}
.pagination .page-list li a.previous,
.pagination .page-list li a.next {
  gap: 4px;
}
.pagination .page-list li a .material-icons {
  font-size: 16px;
  line-height: 1;
}

.page-item.active .page-link,
.page-item.active .page-link:hover,
.page-item.active .page-link:focus {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ==========================================================================
   Salesdeep B2B text-only product miniature
   Replaces image-based card. Brand+model focused, no logos (trademark-safe).
   ========================================================================== */

.product-miniature-text .thumbnail-container-text {
    background: var(--card-bg);
    border: none;                      /* Unit 5d: drop framed look; cards now flat */
    border-radius: var(--card-radius);
    transition: var(--card-hover-anim);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.product-miniature-text .thumbnail-container-text:hover {
    box-shadow: var(--card-hover-shadow);
    transform: var(--card-hover-lift);
}

.product-miniature-text .text-card {
    display: block;
    padding: var(--card-pad-top) var(--card-pad-x) var(--card-pad-y-mid);
    text-decoration: none;
    color: inherit;
    flex: 1;
    border-bottom: none;               /* Unit 5d: drop inline separator between content + footer */
}

.product-miniature-text .text-card:hover {
    text-decoration: none;
    color: inherit;
}

.text-card-brand {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--card-subtle-color);
    margin-bottom: 6px;
}

.text-card-model {
    font-family: 'Courier New', monospace;
    font-size: 17px;
    font-weight: 700;
    color: var(--card-heading-color);
    line-height: 1.2;
    margin-bottom: 10px;
    word-break: break-word;
}

.text-card-type {
    font-size: 13px;
    color: var(--card-body-color);
    line-height: 1.4;
    margin-bottom: 10px;
    min-height: 36px;
}

.text-card-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--card-meta-color);
}

.text-card-specs .spec {
    background: var(--card-bg-alt);
    padding: 2px 6px;
    border-radius: var(--card-radius-chip);
    white-space: nowrap;
}

.text-card-footer {
    padding: var(--card-pad-y-mid) var(--card-pad-x);
    background: transparent;           /* Unit 5d: unified card background, no 2-section visual */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.text-card-footer .product-price-and-shipping {
    margin: 0;
}

.text-card-footer .price {
    font-size: 18px;
    font-weight: 700;
    color: var(--card-heading-color);
}

.text-card-stock {
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
}

.text-card-stock .material-icons {
    font-size: 16px;
}

.text-card-stock.in-stock {
    color: #1e7c4a;
}

.text-card-stock.no-stock {
    color: #c0392b;
}

/* ==========================================================================
   6. Product miniature — equal-height cards + NEW flag repositioning
   Rationale:
     - Classic's .product-miniature/.thumbnail-container do not stretch,
       so each card sizes to its own text. On listings this looks ragged.
     - Catalog currently has no product images (placeholder only), so the
       NEW flag (absolute, top:0 left:0) lands over the brand+model text.
       We move it to the top-right as a compact chip, lower its z-index,
       and reserve a small gutter at the card top so it never overlaps.
   ========================================================================== */

/* Stretch the column wrapper so inner card can fill row height */
.products > .js-product,
#products .products > .js-product,
.featured-products .products > .js-product,
.product-accessories .products > .js-product {
    display: flex;
    align-items: stretch;
}

/* Equal-height cards: the inner .product wrapper and the miniature fill the column */
.product-miniature,
.product-miniature .product {
    width: 100%;
    height: 100%;
}

.product-miniature .product {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    margin: 0 .8125rem;
}

/* thumbnail-container stretches and arranges children as a column */
.product-miniature .thumbnail-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 1rem;
    /* allow the NEW flag to bleed outside if we later need it */
    overflow: visible;
}

/* Thumbnail area: fixed-ish block so all cards have matching image zone
   even when only the placeholder renders. */
.product-miniature .thumbnail-top {
    flex: 0 0 auto;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg-muted);
    border-bottom: 1px solid var(--card-border-soft);
    /* small top padding so content never touches the NEW chip */
    padding-top: 8px;
}

.product-miniature .thumbnail-top .product-thumbnail,
.product-miniature .thumbnail-top .product-thumbnail img {
    max-height: 150px;
    width: auto;
    height: auto;
}

/* Description fills remaining vertical space so prices align bottom-ish */
.product-miniature .product-description {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: .75rem .5rem .5rem;
}

.product-miniature .product-description .product-title {
    margin-top: 0;
    margin-bottom: .375rem;
    min-height: 2.6em; /* reserve space for 1-2 line titles so prices align */
}

.product-miniature .product-description .product-price-and-shipping {
    margin-top: auto; /* push price to the bottom of the description block */
}

/* --- NEW flag: move to top-right as a compact chip --- */
.product-miniature .product-flags {
    /* keep absolute so it overlays the thumbnail, not the text */
    top: 6px;
    right: 6px;
    left: auto;
    width: auto;
    /* Unit 6d: flags stack vertically to prevent overlap
       when multiple statuses coexist (NEW + OUT-OF-STOCK + ON-SALE). */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--flag-gap);
    z-index: 1;
    pointer-events: none;
}

.product-miniature .product-flags li.product-flag {
    position: static; /* neutralize online-only absolute positioning edge case */
    margin: 0;
    padding: var(--flag-pad-y) var(--flag-pad-x);
    font-size: var(--flag-font-size);
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1.4;
    min-width: 0;
    min-height: 0;
    border-radius: var(--flag-radius);
    text-transform: uppercase;
    background: var(--flag-bg-new);
    color: var(--flag-fg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

/* Keep discount colors distinct from the "new" chip */
.product-miniature .product-flags li.product-flag.discount,
.product-miniature .product-flags li.product-flag.discount-amount,
.product-miniature .product-flags li.product-flag.discount-percentage {
    background: var(--flag-bg-discount);
}

.product-miniature .product-flags li.product-flag.on-sale {
    order: 0;
    width: auto;
    text-align: center;
    background: var(--flag-bg-discount);
}

/* Out-of-stock chip — distinct muted palette so a card with NEW + OOS
   reads as two separate states rather than looking double-badged. */
.product-miniature .product-flags li.product-flag.out-of-stock,
.product-miniature .product-flags li.product-flag.out_of_stock,
.product-miniature .product-flags li.product-flag.product-unavailable {
    background: #6b7785;
    color: var(--flag-fg);
}

/* online-only: PrestaShop absolutely positions this one at top:25rem by default;
   bring it back inline with the other chips in the top-right stack. */
.product-miniature .product-flags li.product-flag.online-only {
    position: static;
    top: auto;
    right: auto;
    font-size: var(--flag-font-size);
}

/* ==========================================================================
   6b. Unit 5 follow-up — Popular/Best/New parity + row gap + NEW/heart overlap
   Rationale:
     - The theme overrides Classic's miniature with the Salesdeep B2B
       text variant (.product-miniature-text / .thumbnail-container-text /
       .text-card / .text-card-footer). Used by ALL home product sections
       (Popular / Best Sellers / New) via `catalog/_partials/productlist.tpl`.
     - STRUCTURAL ASYMMETRY: ps_featuredproducts.tpl wraps with
       `<div class="products row">` (passes cssClass="row"), but
       ps_newproducts.tpl wraps with `<div class="products">` (no `row`).
       With `row` Bootstrap flex is active — children stretch to equal
       heights, which made Popular cards look tall/stretched ("old style")
       vs the natural, compact New cards the user prefers.
     - FIX: do NOT rely on `.row` — target `.product-miniature-text`
       directly in both sections. Neutralize the row-forced stretch so
       Popular cards size to content like New. Also collapse the
       `height:100%` on the card/thumbnail-container so a short card next
       to a tall one doesn't balloon vertically.
     - ROW GAP: the product grid wraps without vertical spacing between
       rows. Apply `margin-bottom` to each `.js-product` column — works
       for both flex (`row`) and block (`products` without row) layouts.
     - blockwishlist injects `.wishlist-button-add` absolutely at
       top:0.635rem right:0.635rem (z-index 10). NEW chip moves to the
       top-left corner so they never overlap.
   ========================================================================== */

/* --- Unit 5f: drop the `.featured-products` scope so every page with text
   cards (home, category, search, /new-products, manufacturer list…) gets
   the same layout. Earlier iterations kept reusing `.featured-products`
   which only matched two home sections — every other listing regressed
   (notably the NEW chip overlapping brand text on /en/new-products). --- */

/* Cards size to their own content everywhere — no Bootstrap .row stretch. */
.product-miniature-text,
.product-miniature-text .thumbnail-container-text {
    height: auto;
}

.product-miniature-text .thumbnail-container-text {
    position: relative; /* anchor for product-flags and injected wishlist btn */
}

/* Reserve top padding for the NEW chip (top-left) and heart (top-right)
   so they never overlap the brand label. */
.product-miniature-text .text-card {
    padding-top: var(--card-pad-top-chip);
}

/* Description/type — clamp to 2 lines so cards line up visually. */
.product-miniature-text .text-card-type {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- NEW chip: move from top-right to TOP-LEFT so it never overlaps the
   injected .wishlist-button-add (blockwishlist, top:0.635rem right:0.635rem).
   Also force column layout so NEW + OUT-OF-STOCK + ON-SALE stack vertically
   (Unit 6d) instead of competing for the same 8px offset. --- */
.product-miniature .product-flags,
.product-miniature-text .product-flags {
    top: 8px;
    left: 8px;
    right: auto;                /* override Unit 5's top-right anchor */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--flag-gap);
}

/* Keep the heart (injected by blockwishlist) unambiguously on top */
.product-miniature .wishlist-button-add,
.product-miniature-text .wishlist-button-add {
    z-index: 20;
}

/* ==========================================================================
   Unit 6c — Unified section heading style across listings
   Rationale:
     - Home featured sections emitted h2.products-section-title (21px / 500 /
       uppercase / mb 40px) via ps_featuredproducts + ps_newproducts templates.
     - /new-products & /best-sellers emitted h1.h2 (21px / 700 / uppercase /
       mb 8px) via the catalog page-header.
     - Category (/182-siemens) emitted h1.h1 (32px / 700 / uppercase / mb 16px).
     - Product page "16 other products..." emitted a bare <h2> (22px / 600 /
       sentence case / mb 8px) from ps_categoryproducts template.
     - Five distinct heading styles for what's conceptually the same thing:
       "title of a product listing section on this page".
     - Fix: a single rule drives font-size / weight / transform / color /
       letter-spacing / margin-bottom on all of them, sourced from tokens.
   ========================================================================== */

/* Unified section heading — covers featured/home, listing page headers,
   category page header, product-page related-products header. */
.featured-products .products-section-title,
.featured-products > h1,
.featured-products > h2,
.featured-products > .h1,
.featured-products > .h2,
section.featured-products > header h1,
section.featured-products > header h2,
h1#js-product-list-header,
h2#js-product-list-header,
#js-product-list-header h1,
#js-product-list-header h2,
.product-accessories > h1,
.product-accessories > h2,
#content-wrapper > .page-header h1,
#content-wrapper > .page-header h2 {
    font-family: var(--font-base);
    font-size: var(--section-heading-size) !important;
    font-weight: var(--section-heading-weight) !important;
    line-height: 1.25;
    color: var(--section-heading-color) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--section-heading-spacing);
    margin: 0 0 var(--section-heading-mb) !important;
    padding: 0;
}

/* ==========================================================================
   Unit 6b — Unified .products-grid wrapper
   Rationale:
     - Historically productlist.tpl emitted either `<div class="products">`
       or `<div class="products row">` depending on the caller. Bootstrap's
       `.row` path used `.col-*` math, the non-row path used a freeform
       block layout. Result: identical cards were 248px wide on home
       (no-row) vs 255px on listings (row) — a visible 7px jitter.
     - productlist.tpl override now emits `<div class="products products-grid">`
       unconditionally (dropping `.row` + `.col-*`). We own the column math
       here so every listing page gets identical card widths.
     - CSS grid with explicit breakpoints replaces Bootstrap's col-xs-12 /
       col-sm-6 / col-lg-4 / col-xl-3 cascade.
   ========================================================================== */

/* `!important` + double-class specificity beats classic's
   `.featured-products .products {display: flex}` and `.product-accessories
   .products {display: flex}` rules without invasive theme.css surgery. */
.products.products-grid,
.featured-products .products.products-grid,
.product-accessories .products.products-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    flex-wrap: initial;
    justify-content: initial;
    align-items: stretch;
    /* Neutralize any leftover Bootstrap row styling (negative margins etc.) */
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 1199px) {
    .products.products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .products.products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 479px) {
    .products.products-grid {
        grid-template-columns: 1fr;
    }
}

/* Each grid cell is a .js-product wrapper — neutralize Bootstrap col-*
   widths and any legacy margin-bottom we added to simulate row gap
   (grid `gap` now handles row spacing natively). */
.products.products-grid > .js-product {
    width: auto;
    max-width: none;
    flex: initial;
    margin: 0;
    padding: 0;
    /* override `col-xs-12` (100% width) and similar if a caller
       still passes them — grid column math wins. */
    min-width: 0;
}

/* Neutralize the legacy inner gutter from Unit 5 (`margin: 0 .8125rem` on
   .product-miniature .product). Grid `gap` already spaces cards; the inner
   margin would otherwise shrink the card uniformly by ~26px and undo
   width parity on narrow columns. */
.products.products-grid .product-miniature .product {
    margin-left: 0;
    margin-right: 0;
}

/* ==========================================================================
   Unit 6 — Brand/manufacturer list grid
   Rationale:
     - Classic theme renders /brands as <ul><li class="brand">… with
       inline-block-ish, list-item display. At ~460 brands, most of which
       have no logo, each cell sized itself to its own text content,
       so rows broke and heights were ragged.
     - Almost every brand renders PrestaShop's "-default-" placeholder
       ("No image available"). The theme override in brand.tpl now
       detects that URL pattern and swaps the img for an initials tile.
     - Layout: CSS grid, uniform columns, auto-equal-height rows. Same
       flat aesthetic as product cards from 5d/5e/5f (no heavy border,
       subtle hover lift).
   ========================================================================== */

/* Wrap override adds class="brand-grid" to the <ul> (see
   templates/catalog/brands.tpl override). Styled under #manufacturer
   scope to beat classic-theme specificity (`#manufacturer #main ul`,
   lines ~1662-1667 of theme.css). */
#manufacturer #main ul.brand-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    flex-wrap: initial;   /* neutralize classic's flex-wrap */
    justify-content: initial;
    align-items: initial;
}

@media (max-width: 1199px) {
    #manufacturer #main ul.brand-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    #manufacturer #main ul.brand-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    #manufacturer #main ul.brand-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

#manufacturer #main ul.brand-grid li.brand {
    display: block;           /* override list-item */
    width: auto;              /* neutralize classic's width: calc(20% - 10px) */
    min-width: 0;             /* neutralize classic's min-width:210px */
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--card-bg);
    border-radius: var(--card-radius);
    overflow: hidden;
    transition: var(--card-hover-anim);
    text-align: left;         /* card owns its own alignment */
}

#manufacturer #main ul.brand-grid li.brand:hover {
    box-shadow: var(--card-hover-shadow);
    transform: var(--card-hover-lift);
}

#manufacturer #main ul.brand-grid .brand-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--card-pad-x) var(--card-pad-x-sm) var(--card-pad-bottom);
    text-decoration: none;
    color: inherit;
    text-align: center;
}

#manufacturer #main ul.brand-grid .brand-card:hover {
    text-decoration: none;
    color: inherit;
}

#manufacturer #main ul.brand-grid .brand-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;              /* classic sets width:200px */
    margin: 0 0 12px;
    height: 90px;
    background: var(--card-bg-muted);
    border-radius: var(--card-radius-sm);
    overflow: hidden;
}

#manufacturer #main ul.brand-grid .brand-img a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#manufacturer #main ul.brand-grid .brand-img a::before {
    display: none;            /* classic adds an absolute overlay we don't want */
}

#manufacturer #main ul.brand-grid .brand-img img {
    max-width: 90%;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Initials tile for brands with no logo — neutral grey gradient,
   no "No image available" label. Keeps the listing calm. */
#manufacturer #main ul.brand-grid .brand-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-base);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 2px;
    color: var(--card-meta-color);
    background: linear-gradient(180deg, var(--card-bg-alt) 0%, var(--card-bg-alt2) 100%);
    text-transform: uppercase;
}

#manufacturer #main ul.brand-grid .brand-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--card-heading-color);
    line-height: 1.3;
    margin: 0 0 4px;
    /* clamp name to two lines — some brands have very long names */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

#manufacturer #main ul.brand-grid .brand-products {
    display: block;           /* classic sets display:none on .brand-products */
    margin-top: auto;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--card-subtle-color);
}

/* ==========================================================================
   Unit 6e — Subcategories as nav chips (not product cards)
   Rationale:
     - On /category pages Classic renders `#subcategories.card > ul.subcategories-list
       > li > div.subcategory-image + h5 > a.subcategory-name`. Each `<li>`
       with default theme styling occupies roughly the same footprint as a
       product card, which turns the navigation block into ~42 "empty product
       cards" above the actual product grid (e.g. /en/182-siemens shows 42
       identical-looking NESTT10 SERIES tiles masquerading as products).
     - Fix: treat subcategories as what they are — navigation links.
       Render the list as a wrap-flowing chip/pill cluster: compact, text-
       first, clearly distinct from the product grid below.
     - Strategy: hide the image well (always empty in this catalog), flatten
       the list to inline-flex items, style each anchor as a pill.
   ========================================================================== */

#subcategories.card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0 0 2rem;
}

#subcategories .subcategory-heading {
    /* re-use the unified section-heading style (Unit 6c) visually. */
    font-family: var(--font-base);
    font-size: var(--section-heading-size);
    font-weight: var(--section-heading-weight);
    line-height: 1.25;
    color: var(--section-heading-color);
    text-transform: uppercase;
    letter-spacing: var(--section-heading-spacing);
    margin: 0 0 16px;
}

#subcategories .subcategories-list {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Block context with inline-block children keeps items at content width
       with natural wrap; classic's flex/justify-content rules fought this. */
    display: block !important;
    font-size: 0;                      /* kill inter-li whitespace */
}

#subcategories .subcategories-list > li {
    display: inline-block !important;
    vertical-align: top;
    width: -moz-fit-content !important;
    width: fit-content !important;
    min-width: 0 !important;           /* neutralize classic's 200px */
    max-width: none;
    margin: 0 4px 8px 0 !important;   /* chip spacing (gap emulation) */
    padding: 0;
    background: transparent;
    border: none;
    text-align: left;       /* neutralize classic's text-align:center */
    font-size: 12px;        /* restore from font-size:0 wrapper */
}

#subcategories .subcategories-list > li > h5 {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
}

/* Image well is always empty on this catalog — hide it so the list can
   read as pure navigation. */
#subcategories .subcategory-image {
    display: none;
}

#subcategories .subcategory-name {
    display: inline-block;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 6px 14px;
    background: var(--card-bg-alt);
    color: var(--card-heading-color);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;       /* pill */
    border: 1px solid transparent;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition);
    white-space: nowrap;
}

#subcategories .subcategory-name:hover,
#subcategories .subcategory-name:focus {
    background: var(--color-primary) !important;
    color: var(--flag-fg) !important;
    border-color: var(--color-primary) !important;
    text-decoration: none !important;
}

/* ==========================================================================
   Unit 6g — Classic product card fills its grid cell
   Classic theme.css hardcodes .thumbnail-container width (218px) and height
   (348px). That ignores our .products-grid cell width. Result: card shrinks
   and looks like it "floats" inside the grid cell. Force full-width fill
   and natural height.
   ========================================================================== */
.products-grid .thumbnail-container {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0;
    padding: 14px 12px;
    background: #fff;
    border-radius: 6px;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    box-sizing: border-box;
}
.products-grid .thumbnail-container:hover {
    box-shadow: 0 4px 12px rgba(26, 74, 122, 0.08);
    transform: translateY(-2px);
}
.products-grid .product-miniature {
    width: 100%;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────
   Dark header — applied uniformly to ALL shops (per user 2026-05-06).
   Per-shop conditional (header-nav--dark only on shop != 1,2) was
   removed because it caused mismatched look between test and regional
   shops. Caveat: ba24-logo.png on shops 1 and 2 is dark and may be
   poorly visible on this dark backdrop until light versions are made.
   ───────────────────────────────────────────────────────────────── */
.header-top--dark {
  background-color: #1a1a1a;
  color: #f0f0f0;
}
.header-top--dark a {
  color: #f0f0f0;
}
.header-top--dark a:hover {
  color: var(--color-primary);
}
.header-top--dark .top-menu .sub-menu a {
  color: var(--color-text);
}

/* Logo desktop — sits in col-md-3 (~285px wide). Aspect ratio of regional
   logos is ~3:1, so width-fit gives ~95px height naturally; max-height is
   a safety cap. Mobile logo handled separately via #_mobile_logo below. */
#header .logo {
  max-height: 95px;
  width: auto;
  height: auto;
}

/* Light text for items sitting directly on the dark nav backdrop:
   contact link (phone), language/currency selector buttons, user-info,
   material-icons used as inline icons. NOT the cart box (light bg)
   or dropdown menus (light bg) — those keep their classic palette. */
.header-nav--dark #contact-link,
.header-nav--dark #contact-link a,
.header-nav--dark > .container .language-selector > button,
.header-nav--dark > .container .currency-selector > button,
.header-nav--dark > .container .material-icons,
.header-nav--dark > .container .expand-more,
.header-nav--dark .user-info,
.header-nav--dark .user-info span,
.header-nav--dark .user-info a {
  color: #f0f0f0 !important;
}
.header-nav--dark #contact-link a:hover,
.header-nav--dark .user-info a:hover {
  color: var(--color-primary) !important;
}

/* Cart box keeps classic light backdrop (#f6f6f6) — make icon match
   the grey text colour theme.css uses for the rest of the cart. */
.header-nav--dark .blockcart .shopping-cart,
.header-nav--dark .cart-preview .shopping-cart {
  color: #7a7a7a !important;
}

/* Dropdown menus (language, currency, user) keep their light
   background from theme.css. Force dark text so items stay readable —
   the previous broad .header-nav--dark a !important made them invisible. */
.header-nav--dark .dropdown-menu,
.header-nav--dark .dropdown-menu a,
.header-nav--dark .dropdown-menu .dropdown-item {
  color: var(--color-text) !important;
}
.header-nav--dark .dropdown-menu a:hover,
.header-nav--dark .dropdown-menu .dropdown-item:hover {
  color: var(--color-primary) !important;
}

/* Dark header-nav background — same as header-top.
   Mobile logo lands here, so it needs the dark backdrop too. */
#header .header-nav--dark {
  background-color: #1a1a1a;
  color: #f0f0f0;
  border-bottom: 0;
}
.header-nav--dark a,
.header-nav--dark .material-icons,
.header-nav--dark .expand-more {
  color: #f0f0f0;
}
.header-nav--dark a:hover {
  color: var(--color-primary);
}
.header-nav--dark .dropdown-menu a {
  color: var(--color-text);
}
.header-nav--dark #_mobile_logo img {
  max-height: 60px;
  width: auto;
  height: auto;
}

/* Material icons in the header (sign-in person, cart, expand arrows...) —
   pin line-height:1 so vertical-align:middle aligns to the text baseline.
   Without this our body line-height:1.7 inflates the line-box and the
   icon drifts down relative to its sibling text. */
#header .material-icons,
.header-nav .material-icons,
.header-top .material-icons {
  line-height: 1 !important;
  vertical-align: middle;
}

/* Sort-by dropdown on category/listing pages.
   Three things made the button look like it had an empty row underneath:
   (1) theme.css 3px cyan border + .625rem padding,
   (2) inherited line-height:1.7 from body inflates the text line-box,
   (3) .material-icons inherits the same line-height with font-size:24px,
       producing a ~41px line-box that dominates the flex row.
   Trim border, padding, and pin line-heights for both the button and the
   dropdown options. */
.products-sort-order .select-title {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-width: 1px;
  line-height: 1;
}
.products-sort-order .select-title .material-icons,
.products-sort-order .dropdown-menu .material-icons {
  line-height: 1 !important;
}
.products-sort-order .dropdown-menu .select-list {
  padding: 8px 14px;
  line-height: 1.3;
}

/* "All brands" link at the bottom of the sidebar brandlist (theme override
   in modules/ps_brandlist/views/templates/hook/ps_brandlist.tpl). */
#search_filters_brands .brandlist-all-link {
  display: block;
  padding: 8px 0 0;
  margin-top: 8px;
  border-top: 1px solid var(--card-border);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--color-primary);
}
#search_filters_brands .brandlist-all-link:hover {
  color: var(--color-primary-hover);
}

/* Search row — sits OUTSIDE .container in header.tpl so the brand-color
   backdrop bleeds full window width. The .container inside re-centers
   the search input to the same gutters as the rest of the header. */
.search-row {
  background-color: var(--color-primary);
  padding: 0.75rem 0;
}
.search-row .search-widget,
.search-row .search-widgets {
  display: block !important;
  float: none !important;
  max-width: 600px !important;
  width: 100%;
  margin: 0 0 0 auto !important;
}

/* Site-wide notice strip under the search row — informs visitors the site
   is under modernization but business runs as usual. Subtle so it doesn't
   compete with the search. */
.site-notice {
  background-color: var(--card-bg-alt);
  color: var(--card-body-color);
  font-size: 12px;
  line-height: 1.5;
  padding: 6px 0;
  text-align: center;
  border-bottom: 1px solid var(--card-border);
}
.site-notice a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}
.site-notice a:hover {
  text-decoration: underline;
}

/* Undo theme.css's `h1-h6 { margin-top: 0 }` reset. */
h1, h2, h3, h4, h5, h6 { margin-top: 1em; }

/* ============================================================
   Listing pages: full-width container.
   Default Bootstrap container is max 1140px @lg, leaving wasted
   space on wide displays. For listing pages with a table we want
   the full viewport so the row stretches end-to-end.
   ============================================================ */
@media (min-width: 1200px) {
  body#category .container,
  body#search .container,
  body#manufacturer .container,
  body#supplier .container,
  body#new-products .container,
  body#prices-drop .container,
  body#best-sales .container {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ============================================================
   Tabular product listing (Unit 7).
   Applies when products.tpl passes layout='table' to productlist.tpl
   (category / search / manufacturer / supplier pages). Module-driven
   product blocks (featured, new, bestsellers, etc.) stay on grid.
   Rationale: Salesdeep imports = no images, no real descriptions.
   Tile grid wastes space on 13k×0.1% image-having products. Table
   maps directly to how B2B customers shop: scan brand+reference.
   ============================================================ */
.products-table-wrap {
  margin-bottom: 1.5rem;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  overflow-x: auto;
}
.products-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 0;
  table-layout: fixed;
}
.products-table thead th {
  background: #1a1a1a;
  color: #f0f0f0;
  text-align: left;
  padding: 14px 18px;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  border: 0;
}
.products-table tbody td {
  padding: 16px 18px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
  line-height: 1.5;
}
.products-table tbody tr:last-child td {
  border-bottom: 0;
}
.products-table tbody tr:nth-child(even) {
  background: #fafafa;
}
.products-table tbody tr:hover {
  background: #f0f4f8;
}
/* Column widths in percent so layout is identical across categories,
   search results, manufacturer pages — irrespective of content width.
   Combined with `table-layout: fixed` above. */
.products-table colgroup col.col-num    { width: 4%; }
.products-table colgroup col.col-brand  { width: 15%; }
.products-table colgroup col.col-ref    { width: 17%; }
.products-table colgroup col.col-name   { width: 34%; }
.products-table colgroup col.col-price  { width: 12%; }
.products-table colgroup col.col-actions{ width: 18%; }

.products-table tbody td.col-num {
  color: #999;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.products-table tbody td.col-brand {
  font-weight: 600;
  color: #333;
}
.products-table tbody td.col-ref {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.products-table tbody td.col-ref .ref-link {
  color: var(--color-primary, #c8102e);
  text-decoration: none;
  font-weight: 600;
}
.products-table tbody td.col-ref .ref-link:hover {
  text-decoration: underline;
}
.products-table tbody td.col-name {
  word-break: break-word;
  overflow: hidden;
}
.products-table tbody td.col-name a {
  color: #1a1a1a;
  text-decoration: none;
}
.products-table tbody td.col-name a:hover {
  color: var(--color-primary, #c8102e);
  text-decoration: underline;
}
.products-table th.col-price,
.products-table td.col-price {
  text-align: right;
}
.products-table tbody td.col-price {
  font-weight: 600;
  white-space: nowrap;
}
.products-table tbody td.col-price .regular-price {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #999;
  text-decoration: line-through;
}
.products-table th.col-actions,
.products-table td.col-actions {
  text-align: right;
}
.products-table .col-actions .btn {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Tablet (769-1199px): hide Description; Reference column gets enough
   width that long parts like 6ES7515-2AM02-0AB0 no longer wrap.
   Visible: # / Brand / Reference / Price / Details. */
@media (min-width: 769px) and (max-width: 1199px) {
  .products-table colgroup col.col-name,
  .products-table th.col-name,
  .products-table td.col-name {
    display: none;
  }
  .products-table colgroup col.col-num     { width: 5%; }
  .products-table colgroup col.col-brand   { width: 22%; }
  .products-table colgroup col.col-ref     { width: 30%; }
  .products-table colgroup col.col-price   { width: 18%; }
  .products-table colgroup col.col-actions { width: 25%; }
}

/* Mobile: keep the table layout but drop the columns that would
   otherwise wrap into vertical letter-stacks on a 375px viewport.
   Visible on mobile: Reference, Price, Details. */
@media (max-width: 768px) {
  .products-table colgroup col.col-num,
  .products-table colgroup col.col-brand,
  .products-table colgroup col.col-name,
  .products-table th.col-num,
  .products-table td.col-num,
  .products-table th.col-brand,
  .products-table td.col-brand,
  .products-table th.col-name,
  .products-table td.col-name {
    display: none;
  }
  .products-table colgroup col.col-ref     { width: 55%; }
  .products-table colgroup col.col-price   { width: 25%; }
  .products-table colgroup col.col-actions { width: 20%; }
  .products-table thead th {
    padding: 10px 8px;
    font-size: 11px;
  }
  .products-table tbody td {
    padding: 12px 8px;
    line-height: 1.35;
  }
  .products-table tbody td.col-ref {
    word-break: break-all;
    font-size: 12px;
  }
  .products-table tbody td.col-price {
    font-size: 14px;
  }
  .products-table .col-actions .btn {
    padding: 4px 8px;
    font-size: 10px;
  }
}

/* ============================================================
   Product page (Unit 8) — designed for image-light catalog.
   ============================================================ */
.product-page {
  margin: 0 0 2rem;
}

/* HERO ----- brand + reference + name + price + cta */
.product-hero {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 32px;
  margin-bottom: 24px;
  align-items: flex-start;
}
.product-page--no-cover .product-hero {
  /* full-width hero when no image */
}
.product-hero-cover {
  border-right: 1px solid var(--card-border-soft);
  padding-right: 24px;
}
.product-hero-cover .product-cover img {
  max-width: 100%;
  height: auto;
}

.product-hero-info .hero-brand {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--card-subtle-color);
  margin: 0 0 8px;
}
.product-hero-info .hero-reference {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 32px;
  font-weight: 700;
  color: var(--color-primary, #c8102e);
  line-height: 1.15;
  margin: 0 0 12px;
  word-break: break-all;
}
.product-hero-info .hero-name {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  margin: 0 0 24px;
  line-height: 1.4;
}
.product-hero-info .hero-price-block {
  margin: 0 0 16px;
}
.product-hero-info .hero-price-block .current-price,
.product-hero-info .hero-price-block .price {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-heading);
}
.product-hero-info .product-description {
  margin: 0 0 16px;
  color: var(--color-text);
}
.product-hero-info .product-actions {
  margin-top: 16px;
}

/* SPECIFICATIONS */
.product-specs {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 24px 32px;
  margin-bottom: 24px;
}
.product-specs .section-heading,
.product-content-tabs .section-heading,
.product-accessories .section-heading {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--card-subtle-color);
  margin: 0 0 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--card-border);
}
.specs-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.specs-table tr {
  border-bottom: 1px solid #f0f0f0;
}
.specs-table tr:last-child { border-bottom: 0; }
.specs-table th {
  width: 200px;
  padding: 10px 0;
  text-align: left;
  font-weight: 500;
  color: var(--card-subtle-color);
  font-size: 13px;
  vertical-align: top;
}
.specs-table td {
  padding: 10px 0;
  color: var(--color-text);
  vertical-align: top;
}
.specs-table td code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  color: var(--color-heading);
  background: transparent;
}
.specs-table td a {
  color: var(--color-primary, #c8102e);
}

/* CONTENT TABS */
.product-content-tabs {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 24px 32px;
  margin-bottom: 24px;
}
.product-content-tabs .nav-tabs {
  border-bottom: 1px solid var(--card-border);
  margin-bottom: 16px;
}
.product-content-tabs .nav-tabs .nav-link {
  color: var(--card-subtle-color);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.6px;
  padding: 10px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
}
.product-content-tabs .nav-tabs .nav-link.active {
  color: var(--color-primary, #c8102e);
  border-bottom-color: var(--color-primary, #c8102e);
  background: transparent;
}
.product-content-tabs .product-description {
  color: var(--color-text);
  line-height: 1.6;
}
.product-content-tabs .product-description h3,
.product-content-tabs .product-description h4 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 1.5em 0 0.5em;
}
.product-content-tabs .product-description ul {
  padding-left: 1.2em;
}

/* ACCESSORIES */
.product-accessories {
  margin-top: 32px;
}

@media (max-width: 767px) {
  .product-hero { padding: 20px; }
  .product-hero-cover { border-right: 0; border-bottom: 1px solid var(--card-border-soft); padding-right: 0; padding-bottom: 20px; margin-bottom: 20px; }
  .product-hero-info .hero-reference { font-size: 24px; }
  .product-hero-info .hero-price-block .current-price,
  .product-hero-info .hero-price-block .price { font-size: 22px; }
  .product-specs, .product-content-tabs { padding: 20px; }
  .specs-table th { width: 40%; }
}

/* Footer: legal "operated by" line + bank accounts column */
.block-contact .operator-line {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--card-subtle-color, #6b7785);
}
.block-bank-accounts .bank-account-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
  line-height: 1.4;
}
.block-bank-accounts .bank-currency {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.5px;
  min-width: 36px;
  color: var(--card-subtle-color, #6b7785);
}
.block-bank-accounts .bank-iban {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  word-break: break-all;
  background: transparent;
  color: inherit;
}
.block-bank-accounts .bank-meta {
  margin-top: 10px;
  font-size: 11px;
  color: var(--card-subtle-color, #6b7785);
  line-height: 1.5;
}

/* Footer layout: force 4 columns in one row on desktop.
   ps_linklist's outer wrapper is hardcoded col-md-6 (it stacks two link
   blocks horizontally inside). On a 4-block footer (linklist + account
   + contactinfo + bankaccounts) that overflows. Shrink the linklist
   outer to col-md-3 and stack its inner link blocks vertically. */
@media (min-width: 992px) {
  .footer-container .col-md-6.links {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
  /* The inner <div class="row"> wraps both link blocks side-by-side via
     flex. Switch it to block so children stack and use the full column. */
  .footer-container .col-md-6.links > .row {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .footer-container .col-md-6.links .col-md-6.wrapper {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}