/* Author: Ethan Lowery | Randcore Development Pty Ltd
 *
 * Omnipart brand theme for Hummingbird 2.x (PrestaShop 9.1, Bootstrap 5.3).
 * Child-theme override, appended after Hummingbird's own CSS via
 * templates/_partials/head.tpl (block stylesheets append), so it loads last
 * and wins.
 *
 * Design system: Omnitronix endorsed-house. Navy #0A1228 (structure), red
 * #C41E2A (action only), slate neutrals. Inter for text, JetBrains Mono for
 * data (prices, part numbers, SKUs). Industrial B2B: hard edges, flat cards,
 * left-anchored editorial headings with a mono kicker and a red rule.
 *
 * SELECTOR NOTE: Hummingbird renders BEM class names (product__*,
 * product-miniature__*, details__*, products__*). The legacy Classic/PS1.7
 * selectors (.product-title, .current-price, .product-flag, .product-features)
 * do NOT exist in this markup, so every rule below targets the real BEM class.
 */

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

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  --navy-950:#0A1228; --navy-900:#0F1B47; --navy-800:#1A2A5A; --navy-700:#233364;
  --navy-500:#334477; --navy-400:#52618C; --navy-200:#9BA4BD;
  --red-500:#C41E2A; --red-600:#B01A25; --red-700:#9A1620; --red-400:#E0555F; --red-100:#FDE3E3;
  --slate-50:#F8FAFC; --slate-100:#F1F5F9; --slate-200:#E2E8F0; --slate-300:#CBD5E1;
  --slate-400:#94A3B8; --slate-500:#64748B; --slate-600:#475569; --slate-700:#334155;
  --slate-900:#0F172A;
  --success:#16A34A; --warning:#D97706; --error:#DC2626;

  /* Semantic */
  --brand:var(--navy-900); --brand-dark:var(--navy-950);
  --accent:var(--red-500); --accent-hover:var(--red-600); --accent-active:var(--red-700);
  --ink:var(--slate-900); --ink-2:var(--slate-600); --ink-3:var(--slate-400);
  --line:var(--slate-200); --line-strong:var(--slate-300);
  --surface:#fff; --surface-2:var(--slate-50); --surface-3:var(--slate-100);
  --ring:rgba(196,30,42,0.20);

  --font-sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --radius:4px; --radius-btn:6px; --radius-card:8px;
  --shadow-sm:0 1px 2px 0 rgba(2,6,23,.06);
  --shadow-md:0 4px 10px -2px rgba(2,6,23,.10);
  --shadow-lg:0 12px 28px -6px rgba(2,6,23,.18);
  --container-max:1280px;

  /* Retint Bootstrap 5.3 (Hummingbird runs on it) */
  --bs-primary:#C41E2A; --bs-primary-rgb:196,30,42;
  --bs-link-color:#C41E2A; --bs-link-color-rgb:196,30,42;
  --bs-link-hover-color:#9A1620; --bs-link-hover-color-rgb:154,22,32;
  --bs-body-color:#0F172A; --bs-body-color-rgb:15,23,42;
  --bs-body-bg:#fff;
  --bs-body-font-family:var(--font-sans);
  --bs-border-color:#E2E8F0;
  --bs-secondary-color:#475569;
  --bs-dark:#0A1228; --bs-dark-rgb:10,18,40;
  --bs-emphasis-color:#0F1B47;
  --bs-border-radius:.375rem; --bs-border-radius-sm:.25rem; --bs-border-radius-lg:.5rem;
  --bs-focus-ring-color:rgba(196,30,42,.20);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
body { font-family:var(--font-sans); color:var(--ink); background:var(--surface); -webkit-font-smoothing:antialiased; }

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family:var(--font-sans); color:var(--brand); font-weight:700;
  letter-spacing:-0.02em; line-height:1.15;
}
h1,.h1{ font-weight:800; letter-spacing:-0.025em; }

a { color:var(--accent); text-decoration:none; }
a:hover, a:focus { color:var(--accent-active); }

:focus-visible { outline:3px solid var(--ring); outline-offset:2px; }
.container, .container-fluid, .container-lg { max-width:var(--container-max); }

/* Data face: prices, part numbers, references, stock, quantities. Covers both
   the Classic-ish helpers and the Hummingbird BEM data classes. */
.price,.product-reference,.product-quantities,.reference,
.product-miniature__price,.product-miniature__regular-price,
.product__price,.product__regular-price,.product__unit-price,
.omni-mono {
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
}

/* Editorial devices (reused by tpl partials) */
.omni-kicker{
  display:inline-block; font-family:var(--font-mono); font-weight:600;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--accent); margin-bottom:.6rem;
}
.omni-rule-heading{ position:relative; padding-left:1rem; }
.omni-rule-heading::before{
  content:""; position:absolute; left:0; top:.15em; bottom:.15em;
  width:3px; background:var(--accent);
}

/* ==========================================================================
   3. BUTTONS  (red = action, navy = secondary, outline = tertiary)
   ========================================================================== */
.btn{ font-weight:600; border-radius:var(--radius-btn); letter-spacing:.01em; }
/* anchors used as filled buttons need explicit text colour (global a{} colours links) */
.btn-primary, a.btn-primary, .btn-secondary, a.btn-secondary,
.btn-primary:hover, a.btn-primary:hover, .btn-secondary:hover, a.btn-secondary:hover{ color:#fff; }
.btn-primary{
  --bs-btn-bg:var(--accent); --bs-btn-border-color:var(--accent);
  --bs-btn-hover-bg:var(--accent-hover); --bs-btn-hover-border-color:var(--accent-hover);
  --bs-btn-active-bg:var(--accent-active); --bs-btn-active-border-color:var(--accent-active);
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff;
  --bs-btn-disabled-bg:var(--accent); --bs-btn-disabled-border-color:var(--accent);
}
.btn-secondary{
  --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:var(--navy-800); --bs-btn-hover-border-color:var(--navy-800);
  --bs-btn-active-bg:var(--navy-950); --bs-btn-active-border-color:var(--navy-950);
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff;
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-tertiary{
  --bs-btn-color:var(--brand); --bs-btn-border-color:var(--line-strong);
  --bs-btn-hover-bg:var(--surface-2); --bs-btn-hover-color:var(--brand); --bs-btn-hover-border-color:var(--line-strong);
  --bs-btn-active-bg:var(--surface-3); --bs-btn-active-color:var(--brand);
}

/* ==========================================================================
   4. HEADER  (sticky white, slate-200 border, red-hover links)
   ========================================================================== */
.header, #header{ background:var(--surface); border-bottom:1px solid var(--line); }
.header-top{ padding-top:.65rem; padding-bottom:.65rem; }
/* Logo. The new lockup ("OMNIPART / BY OMNITRONIX") has a subline, so give it a
   little more height than a single wordmark would need. */
#_desktop_logo img, .header__logo img, .logo img, .header-top .logo img,
.header-bottom__logo img{ max-height:52px; width:auto; }

/* Search */
#search_widget input[type="text"], .search-widget input[type="text"]{
  border:1px solid var(--line-strong); border-radius:var(--radius-btn);
  background:var(--surface-2); font-family:var(--font-sans); height:44px;
}
#search_widget input[type="text"]:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); background:#fff; }
#search_widget button[type="submit"], .search-widget button{ color:var(--accent); }
/* Desktop utility row: the child header (header.tpl) rebuilds it as a single
   flex bar (.omni-topbar) holding contact info, search, the B2B action cluster,
   sign-in and cart. Children keep their module ids, so we re-order with `order`
   and let search grow to fill the gap. Only >=md; the row is d-none d-md-block. */
@media (min-width:768px){
  .omni-topbar{ display:flex; align-items:center; gap:.6rem; flex-wrap:nowrap; }

  /* Re-order the row by module id. The search widget carries Bootstrap's
     .order-2 / .ms-auto utilities, which are !important AND live in Hummingbird's
     `utilities` cascade layer. Layered !important beats UNLAYERED !important no
     matter the specificity, so the overrides must join the SAME layer; there,
     id-specificity wins the tie. Search sits left (widened); Contact us takes
     margin-left:auto so it and the B2B cluster group on the right, by Sign in. */
  @layer utilities{
    .omni-topbar #_desktop_ps_searchbar{ order:1 !important; margin:0 !important; }
    .omni-topbar #_desktop_ps_contactinfo{ order:2 !important; margin-left:auto !important; }
    .omni-topbar .omni-b2b{ order:3 !important; }
    .omni-topbar #_desktop_ps_customersignin{ order:4 !important; }
    .omni-topbar #_desktop_ps_shoppingcart{ order:5 !important; }
  }

  .omni-topbar #_desktop_ps_searchbar{ flex:0 1 460px; min-width:240px; max-width:460px; }
  .omni-topbar #_desktop_ps_searchbar #search_widget,
  .omni-topbar #_desktop_ps_searchbar .ps-searchbar,
  .omni-topbar #_desktop_ps_searchbar form{ width:100%; }
  .omni-topbar #_desktop_ps_contactinfo{ flex:0 0 auto; }
  .omni-topbar #_desktop_ps_customersignin{ flex:0 0 auto; }
  .omni-topbar #_desktop_ps_shoppingcart{ flex:0 0 auto; }
}

/* B2B action cluster (Request a quote / Trade account / Catalogue) */
.omni-b2b{ display:flex; align-items:center; gap:.4rem; flex:0 0 auto; }
.omni-b2b__btn{
  display:inline-flex; align-items:center; gap:.34rem; white-space:nowrap;
  padding:.36rem .72rem; border-radius:var(--radius-btn); border:1px solid transparent;
  font-family:var(--font-sans); font-size:.78rem; font-weight:600; line-height:1;
  text-decoration:none; transition:background-color .15s, color .15s, border-color .15s;
}
.omni-b2b__btn .material-icons{ font-size:16px; line-height:1; }
/* primary: filled red (the headline action) */
.omni-b2b__btn--quote{ background:var(--accent); border-color:var(--accent); color:#fff; }
.omni-b2b__btn--quote:hover, .omni-b2b__btn--quote:focus{ background:var(--accent-hover); border-color:var(--accent-hover); color:#fff; }
/* secondary: navy outline -> fills navy on hover */
.omni-b2b__btn--trade{ background:transparent; border-color:var(--brand); color:var(--brand); }
.omni-b2b__btn--trade:hover, .omni-b2b__btn--trade:focus{ background:var(--brand); color:#fff; }
/* tertiary: quiet slate outline for the download */
.omni-b2b__btn--catalog{ background:transparent; border-color:var(--line-strong); color:var(--ink-2); }
.omni-b2b__btn--catalog:hover, .omni-b2b__btn--catalog:focus{ background:var(--surface-2); border-color:var(--ink-3); color:var(--brand); }

/* Contact us: rendered by ps_contactinfo as a plain link; restyle it into a
   button that matches the cluster (quiet slate outline + a mail glyph) and sits
   right of the search, ahead of the B2B buttons. */
.omni-topbar #_desktop_ps_contactinfo .ps-contactinfo__email{
  display:inline-flex; align-items:center; gap:.34rem; white-space:nowrap;
  padding:.36rem .72rem; border-radius:var(--radius-btn); border:1px solid var(--line-strong);
  font-family:var(--font-sans); font-size:.78rem; font-weight:600; line-height:1;
  color:var(--ink-2); text-decoration:none; transition:background-color .15s,color .15s,border-color .15s;
}
.omni-topbar #_desktop_ps_contactinfo .ps-contactinfo__email::before{
  font-family:'Material Icons'; content:"\E0BE"; font-size:16px; line-height:1; font-weight:400;
  -webkit-font-feature-settings:'liga'; font-feature-settings:'liga';
}
.omni-topbar #_desktop_ps_contactinfo .ps-contactinfo__email:hover,
.omni-topbar #_desktop_ps_contactinfo .ps-contactinfo__email:focus{ background:var(--surface-2); border-color:var(--ink-3); color:var(--brand); }

/* Narrow desktop (md -> ~lg): space is tight with six items in the row.
   Drop the button labels to icon-only (title attrs keep them discoverable) and
   let search shrink further so nothing wraps or clips. */
@media (min-width:768px) and (max-width:1199.98px){
  .omni-b2b__btn span{ display:none; }
  .omni-b2b__btn{ padding:.4rem .5rem; }
  /* Contact us collapses to its mail glyph too (font-size:0 hides the text node,
     the ::before glyph is re-sized back up). */
  .omni-topbar #_desktop_ps_contactinfo .ps-contactinfo__email{ font-size:0; padding:.4rem .5rem; }
  .omni-topbar #_desktop_ps_contactinfo .ps-contactinfo__email::before{ font-size:18px; }
  .omni-topbar #_desktop_ps_searchbar{ flex:0 1 340px; min-width:160px; max-width:340px; }
  .omni-topbar{ gap:.45rem; }
}

/* quote + trade-account form pages (omniforms module) */
.omni-form-page{ max-width:640px; margin:1.5rem auto 3rem; }
.omni-form-page__lead, .omni-trade-lead{ color:var(--ink-2); margin-bottom:1.25rem; }
.omni-trade-lead{ background:var(--surface-2); border-left:3px solid var(--accent); border-radius:var(--radius-btn); padding:1rem 1.1rem; }
.omni-form .form-group{ margin-bottom:.9rem; }
.omni-form label{ display:block; font-weight:600; color:var(--brand); font-size:.85rem; margin-bottom:.25rem; }
.omni-form .form-control{ width:100%; }
.omni-form .btn{ min-height:48px; padding-inline:1.75rem; margin-top:.5rem; }

/* Cart + account */
.blockcart .header__cart-icon, .header .user-info a, .header .account, #_desktop_user_info{ color:var(--brand); }
.blockcart .cart-products-count, .header .cart-products-count,
.header-block__badge, .cart-preview .header-block__badge{ background:var(--accent); color:#fff; border-radius:9999px; }

/* ==========================================================================
   5. MAIN MENU  (this box runs a CUSTOM mega-menu ps_mainmenu, verified live)
   ==========================================================================
   Real class taxonomy on omnipart.co.za (NOT the stock .top-menu/.dropdown-item):
     - desktop bar : .ps-mainmenu__tree-link (already dark, add hover + active)
     - mega panel  : .js-sub-menu.submenu > .submenu__left(-item tabs) + .submenu__right
     - left tree   : ps_categorytree .category-tree__item-link / .left-block__title-link (inherit red)
     - mobile      : .ps-mainmenu--mobile offcanvas, links .menu__link / .menu__toggle-child (inherit red)
   Reserve red for hover + active; structure is navy/slate. */

/* desktop top bar */
.ps-mainmenu__tree-link{ color:var(--slate-700); font-weight:600; }
.ps-mainmenu__tree-link:hover{ color:var(--accent); }
.ps-mainmenu__tree-item.current > .ps-mainmenu__tree-item-wrapper > .ps-mainmenu__tree-link,
.ps-mainmenu__tree-link[aria-current="page"]{
  color:var(--brand); box-shadow:inset 0 -2px 0 var(--accent);
}

/* desktop mega-menu panel: give it a defined edge + brand accent */
.js-sub-menu.submenu, .ps-mainmenu .submenu{
  border-top:2px solid var(--accent); box-shadow:var(--shadow-lg);
  background:var(--surface); padding-block:1.5rem;
}
.submenu__left-item{ color:var(--slate-700); font-weight:600; border-radius:var(--radius); }
.submenu__left-item:hover, .submenu__left-item[aria-selected="true"]{ background:var(--surface-2); color:var(--accent); }
/* right panel: flow the category groups into balanced columns (the native grid
   left a tall "Gauges" column and pushed other groups to a disconnected 2nd row).
   Each group is a <ul>; keep it intact with break-inside:avoid. */
#top-menu .submenu__right-items{ display:block; column-count:4; column-gap:1.75rem; }
#top-menu .submenu__right-items > ul{
  break-inside:avoid; -webkit-column-break-inside:avoid; display:inline-block; width:100%;
  margin:0 0 1.4rem; padding:0; list-style:none;
}
.submenu__right-items .menu-item__group-main-item{
  display:block; color:var(--brand); font-weight:700; font-size:.9rem;
  margin-bottom:.5rem; padding-bottom:.4rem; border-bottom:2px solid var(--accent);
}
/* childless group heading (a lone category link) reads as a quiet divider, not a red rule */
.menu-item__group--nochild .menu-item__group-main-item{ border-bottom-color:var(--line); }
/* child links: subtle separator line between each */
.submenu__right-items .menu-item:not(.menu-item__group-main-item){
  display:block; padding:.32rem 0; color:var(--slate-700); font-size:.85rem;
  border-bottom:1px solid var(--surface-3);
}
.submenu__right-items li:last-child .menu-item{ border-bottom:none; }
.submenu__right-items .menu-item:hover{ color:var(--accent); }

/* left-column category tree (ps_categorytree): was inheriting red from a{} */
.left-block__title-link{ color:var(--brand); font-weight:700; }
.category-tree__item-link{ color:var(--slate-700); font-weight:500; }
.category-tree__item-link:hover, .left-block__title-link:hover{ color:var(--accent); }
.category-tree__item.current > .category-tree__item-wrapper > .category-tree__item-link,
.category-tree .current > .category-tree__item-link{ color:var(--brand); font-weight:700; }

/* ==========================================================================
   6. HOME SECTION RHYTHM + native product blocks
   ========================================================================== */
.featured-products, .home .products-section, #content.page-home > section{ padding-block:3.5rem 0; }
.products-section-title, .featured-products .h2, .h2.products-section-title, .home .h2{
  font-size:clamp(1.5rem,2.4vw,2.1rem); font-weight:800; color:var(--brand);
  letter-spacing:-0.02em; text-align:left; text-transform:none; margin-bottom:1.4rem;
  position:relative; padding-left:1rem;
}
.products-section-title::before{ content:""; position:absolute; left:0; top:.12em; bottom:.12em; width:3px; background:var(--accent); }
.products-section-title::after{ content:none; }
/* alternating band helper (used by tpl partials) */
.omni-band-navy{ background:var(--navy-950); color:#fff; }
.omni-band-slate{ background:var(--surface-2); }

/* --- Home hero (rendered by _partials/home/hero.tpl) --- */
.omni-hero{ background:var(--navy-950); color:#fff; position:relative; overflow:hidden; }
.omni-hero::after{ /* faint red edge accent */
  content:""; position:absolute; top:0; right:0; bottom:0; width:4px; background:var(--accent); opacity:.9;
}
.omni-hero__inner{
  display:grid; grid-template-columns:1.35fr 1fr; gap:3rem; align-items:center;
  padding-block:clamp(3rem,7vw,6rem);
}
.omni-hero__copy, .omni-hero__panel{ min-width:0; } /* let the grid tracks shrink below content size */
.omni-hero__eyebrow{
  display:inline-flex; align-items:center; font-family:var(--font-mono);
  text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--red-400);
}
.omni-hero__eyebrow::before{ content:""; width:28px; height:3px; background:var(--accent); margin-right:.7rem; }
.omni-hero__title{
  color:#fff; font-size:clamp(2rem,4vw,3.25rem); font-weight:800; line-height:1.05;
  letter-spacing:-0.03em; margin:1rem 0 1.1rem; max-width:18ch;
}
.omni-hero__sub{ color:var(--slate-300); font-size:1.05rem; line-height:1.6; max-width:54ch; margin-bottom:1.6rem; }
.omni-hero__cta{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.omni-hero__phone{ color:#fff; font-family:var(--font-mono); font-size:.85rem; text-decoration:none; }
.omni-hero__phone:hover{ color:var(--red-400); }
.omni-hero__panel{ background:var(--navy-900); border:1px solid var(--navy-700); border-radius:var(--radius-card); padding:1.5rem 1.5rem 1.35rem; }
.omni-hero__panel-label{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; color:var(--slate-400); }
.omni-hero__search{ display:flex; gap:.5rem; margin:.85rem 0 .7rem; }
.omni-hero__search-input{
  flex:1; min-width:0; height:46px; border-radius:var(--radius-btn); border:1px solid var(--navy-700);
  background:var(--navy-950); color:#fff; padding:0 .9rem; font-family:var(--font-mono); font-size:.82rem;
}
.omni-hero__search-input::placeholder{ color:var(--slate-500); }
.omni-hero__search-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.omni-hero__search .btn{ white-space:nowrap; }
.omni-hero__panel-note{ color:var(--slate-400); font-size:.8rem; line-height:1.5; margin:0; }

/* ==========================================================================
   7. PRODUCT CARDS  (.product-miniature__*, flat, hard-edged)
   ========================================================================== */
.product-miniature, .js-product-miniature{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card);
  transition:border-color .18s ease, box-shadow .18s ease; overflow:hidden;
}
.product-miniature:hover{ border-color:var(--brand); box-shadow:var(--shadow-md); }
/* square, contained image on a slate tile */
.product-miniature__image-container, .product-miniature .thumbnail-container,
.product-miniature__image-link{ display:block; background:var(--surface-2); border-radius:0; }
.product-miniature__image, .product-miniature .thumbnail-container img{
  aspect-ratio:1/1; width:100%; height:auto; object-fit:contain; mix-blend-mode:multiply; padding:8px;
}
.product-miniature__infos, .product-miniature__bottom{ padding:.85rem .9rem 1rem; }
/* title: dark ink, 2-line clamp (the whole point of this rule; the Classic
   selector never matched Hummingbird) */
.product-miniature__title, a.product-miniature__title{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  color:var(--ink); font-weight:500; font-size:.9rem; line-height:1.3;
}
.product-miniature__title:hover{ color:var(--accent); }
/* price on the data-face */
.product-miniature__price{ color:var(--brand); font-weight:700; }
.product-miniature__regular-price{ color:var(--ink-3); font-weight:500; text-decoration:line-through; }
.product-miniature__discount, .product-miniature__price--discount{ color:var(--accent); }
.product-miniature__variants{ font-size:.72rem; }

/* Flags: Hummingbird renders <li class="badge {type}"> inside ul.product-flags */
.product-flags .badge, .product-flag{
  background:var(--accent); color:#fff; font-weight:600; font-size:.68rem;
  letter-spacing:.02em; border-radius:9999px; text-transform:none; padding:.2rem .55rem;
}
/* Hummingbird sets .product-flags .badge:not(.discount) to --bs-primary with
   !important INSIDE a cascade @layer. An UNLAYERED !important loses to a LAYERED
   one, so we place ours in the earliest layer (vendors): for !important, earlier
   layers win, so vendors beats the later ps-components/utilities layers.
   New = navy, Out-of-Stock = quiet slate. */
@layer vendors{
  .product-flags li.badge.new:not(.discount){ background-color:var(--brand) !important; }
  .product-flags li.badge.out_of_stock:not(.discount),
  .product-flags li.badge.discount-percentage:not(.discount){ background-color:var(--slate-500) !important; }
}

/* stock chips */
.product-availability{ font-family:var(--font-mono); font-size:.78rem; }
.in-stock, .text-success{ color:var(--success); }
.product-unavailable, .out-of-stock{ color:var(--ink-3); }

/* ==========================================================================
   8. CATEGORY (PLP) + FACETS  (.products__*, #search-filters, .category__*)
   ========================================================================== */
#products .products, .products.product_list, .featured-products .products{ gap:1.25rem; }
/* grid column floor so cards never squash below a sane width */
#products .products{ grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }

/* category header */
#js-product-list-header h1, .page-title-section, .category__header h1{ color:var(--brand); }
.category__description, .category__additional-description, #category-description{ color:var(--ink-2); }

/* sort + filter bar */
.products__selection{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem; }
.products__count{ color:var(--ink-2); font-family:var(--font-mono); font-size:.85rem; }
.products__sort-dropdown-button, .products__filter-button{
  border-color:var(--line-strong); color:var(--brand); font-weight:600;
}

/* facets (ps_facetedsearch renders into #search-filters) */
#search-filters .facet .facet-title, .facet .facet-title, #search-filters .h6{
  color:var(--brand); font-weight:700; text-transform:none;
}
.facet .facet-label a, .facet .collapse a{ color:var(--ink-2); }
.facet .facet-label a:hover{ color:var(--accent); }

/* active-filter chips */
#js-active-search-filters .active_filters, .active_filters{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.active_filters .filter-block{
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--surface-3); border:1px solid var(--line); color:var(--ink-2);
  border-radius:9999px; padding:.2rem .7rem; font-size:.8rem;
}
.active_filters .filter-block .close{ color:var(--accent); }

/* subcategory tiles */
.subcategory__link{ color:var(--ink); font-weight:600; }
.subcategory__link:hover{ color:var(--accent); }
.subcategory__thumbnail{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-card); }

/* pagination */
.pagination .page-item.active .page-link, .pagination .current a{ background:var(--brand); border-color:var(--brand); color:#fff; }
.pagination .page-link{ color:var(--brand); }

/* ==========================================================================
   9. PRODUCT PAGE (PDP)  (.product__*, .details__*, accordion)
   ==========================================================================
   Hummingbird PDP is BEM + a Bootstrap accordion (no tabs). Every rule here
   targets the real class; the old Classic selectors were all dead. */

/* part-number surfaced next to the H1 (rendered by the product.tpl override) */
.omni-sku{
  display:inline-block; margin:.35rem 0 .6rem;
  font-family:var(--font-mono); font-size:.85rem; letter-spacing:.02em;
  color:var(--ink-2);
}
.omni-sku b, .omni-sku strong{ color:var(--brand); font-weight:600; }
.omni-sku__sep{ color:var(--line-strong); margin:0 .5rem; }
.omni-sku__brand, .omni-sku__range{ color:var(--ink-2); }
.omni-sku__brand b{ color:var(--brand); }
.product__name{ overflow-wrap:anywhere; }

/* not VAT registered: hide the "Tax included/excluded" label everywhere */
.product__tax-infos, .product__tax-label, .tax-shipping-delivery-label,
.product-prices .tax_label, .product__prices .product__tax-infos{ display:none !important; }

/* ---- shared PDP + Quick View extras (disclaimer, CTAs, mini reassurance) ---- */
.omni-disclaimer{
  display:flex; gap:.6rem; align-items:flex-start; margin:1rem 0;
  padding:.75rem .9rem; border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--radius-btn); background:var(--surface-2);
}
.omni-disclaimer .material-icons{ color:var(--accent); font-size:20px; flex:0 0 auto; }
.omni-disclaimer__body{ font-size:.82rem; line-height:1.45; color:var(--ink-2); }
.omni-disclaimer__body strong{ color:var(--brand); }

.omni-pdp-cta{ display:flex; gap:.6rem; flex-wrap:wrap; margin:.85rem 0; }
.omni-pdp-cta .btn{ flex:1 1 auto; min-height:44px; font-weight:600; }
.omni-pdp-cta__trade{ position:relative; }
.omni-pdp-cta__note{ font-size:.75rem; color:var(--ink-3); margin:-.4rem 0 .2rem; }

.omni-reassure-mini{ display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem .9rem; margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line); }
.omni-reassure-mini__item{ display:flex; gap:.5rem; align-items:center; font-size:.78rem; color:var(--ink-2); }
.omni-reassure-mini__item .material-icons{ color:var(--accent); font-size:18px; flex:0 0 auto; }

/* price: the single most important number on the page */
.product__prices .product__price, .product__price{
  color:var(--brand); font-family:var(--font-mono); font-weight:800;
  font-size:clamp(1.5rem,3vw,2rem); line-height:1.1;
}
.product__regular-price{ color:var(--ink-3); font-family:var(--font-mono); text-decoration:line-through; }
.product__discount-percentage, .product__discount--percentage{ color:var(--accent); }
.product__tax-infos, .product__tax-label{ color:var(--ink-3); font-size:.85rem; }

/* availability status → chip */
.product__availability{ margin:.5rem 0; }
.product__availability-status{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.3rem .7rem; border:1px solid var(--line); border-radius:var(--radius-btn);
  font-weight:600; font-size:.85rem; background:var(--surface-2);
}

/* buy row: qty stepper + add-to-cart, prominent and wrap-safe (fixes the #1
   mobile overflow risk) */
.product__actions-qty-add, .product-quantity{ display:flex; gap:.75rem; align-items:stretch; flex-wrap:wrap; }
.product__quantity, .quantity-button{ flex:0 0 auto; }
.product__add-to-cart{ flex:1 1 220px; }
.product__add-to-cart-button{ width:100%; min-height:48px; padding-inline:1.5rem; font-weight:700; }
#quantity_wanted, .quantity-button__group{ border-radius:var(--radius-btn); }

/* spec / data-sheet: turn the <ul> details lists into a clean 2-col table */
.details__list{ display:grid; margin:0; padding:0; list-style:none; }
.details__item{
  display:grid; grid-template-columns:minmax(120px,38%) 1fr; gap:.4rem 1rem;
  padding:.55rem .75rem; border-bottom:1px solid var(--line); align-items:baseline;
}
.details__item:nth-child(even){ background:var(--surface-2); }
.details__title{ color:var(--brand); font-weight:600; }
.details__right{ min-width:0; overflow-wrap:anywhere; color:var(--ink-2); }
.details__item--reference .details__right{ font-family:var(--font-mono); color:var(--brand); }

/* accordion (styled to read as industrial spec panels, not chatty tabs) */
.product__accordion .accordion-button{ font-weight:700; color:var(--brand); }
.product__accordion .accordion-button:not(.collapsed){
  color:var(--accent); background:var(--surface-2); box-shadow:inset 0 -2px 0 var(--accent);
}
.product__accordion .accordion-button:focus{ box-shadow:0 0 0 3px var(--ring); }
.product__description{ color:var(--ink-2); }
.product__description :is(img,table,iframe){ max-width:100%; height:auto; } /* guard operator HTML */
.product__discounts, .discounts-table-wrapper{ overflow-x:auto; }

/* reassurance rail on the PDP: align-self:start so it sizes to its 4 items
   instead of stretching to the tall accordion column's height */
.product__bottom-right{ align-self:start; border:1px solid var(--line); border-radius:var(--radius-card); padding:1.25rem; background:var(--surface-2); }
.product__bottom-right .reassurance{ padding-block:.5rem; }
.product__bottom-right .reassurance__title{ color:var(--brand); font-weight:600; }
/* reassurance icons: smaller (was 64px) + brand red. The SVG is JS-inlined, so
   colour the svg and every shape inside it. */
.blockreassurance .reassurance__image{ width:40px; height:40px; flex:0 0 40px; }
.blockreassurance .reassurance__image svg{ width:40px; height:40px; }
.blockreassurance .reassurance__image svg,
.blockreassurance .reassurance__image svg *{ fill:var(--accent) !important; }

/* thumbnails: never wrap into stacked rows */
.product__thumbnails-list{ display:flex; flex-wrap:nowrap; overflow-x:auto; gap:.5rem; }

/* ==========================================================================
   10. FORMS / INPUTS  (44px, red focus ring)
   ========================================================================== */
.form-control, .input-group input, select.form-select, .form-select{
  border:1px solid var(--line-strong); border-radius:var(--radius-btn);
}
.form-control:focus, .form-select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.custom-radio input:checked + span, .custom-checkbox input:checked + span, .form-check-input:checked{
  background-color:var(--accent); border-color:var(--accent);
}
.form-check-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }

/* ==========================================================================
   11. BREADCRUMB  (plain, no pill; scroll-safe on mobile)
   ========================================================================== */
.breadcrumb{ background:transparent; padding:.75rem 0; margin:0; font-size:.875rem; }
.breadcrumb li a, .breadcrumb-item a{ color:var(--slate-500); }
.breadcrumb li a:hover, .breadcrumb-item a:hover{ color:var(--accent); }
.breadcrumb li.active, .breadcrumb-item.active, .breadcrumb li:last-child span{ color:var(--slate-900); }
.breadcrumb li::after, .breadcrumb-item + .breadcrumb-item::before{ content:"/"; color:var(--slate-300); }

/* ==========================================================================
   12. REASSURANCE BAND
   ========================================================================== */
.block-reassurance, #blockreassurance_wrapper .block-reassurance{ background:var(--surface-2); border-block:1px solid var(--line); }
.block-reassurance li{ border:none !important; }
.block-reassurance .block-reassurance-item span, .block-reassurance p{ color:var(--ink-2); font-weight:500; }

/* ==========================================================================
   13. NEWSLETTER  (ps_emailsubscription, red band)
   ========================================================================== */
section.ps-emailsubscription, .ps-emailsubscription.bg-body-tertiary,
.block_newsletter, .ps-emailsubscription-block{
  --bs-tertiary-bg-rgb:196,30,42;              /* make bg-body-tertiary compute red-500 */
  background-color:var(--accent) !important; color:#fff;
}
.ps-emailsubscription h1, .ps-emailsubscription h2, .ps-emailsubscription h3,
.ps-emailsubscription .h1, .ps-emailsubscription .h2, .ps-emailsubscription .h3,
.ps-emailsubscription label, .block_newsletter .h3{ color:#fff !important; }
.ps-emailsubscription p:not(.h3), .ps-emailsubscription small,
.ps-emailsubscription .text-muted, .block_newsletter p:not(.h3){ color:rgba(255,255,255,.88) !important; }
/* white field on the red band for legibility */
.ps-emailsubscription input[type="email"], .block_newsletter input[type="email"]{
  border-radius:var(--radius-btn); border:1px solid rgba(255,255,255,.55);
  background:#fff; color:var(--ink);
}
.ps-emailsubscription input[type="email"]::placeholder{ color:var(--slate-500); }
.ps-emailsubscription input[type="email"]:focus, .block_newsletter input[type="email"]:focus{
  border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.35); outline:0;
}
/* navy CTA so it stands out on red (a red-on-red button would vanish) */
.ps-emailsubscription .btn, .block_newsletter .btn, .ps-emailsubscription-block .btn{
  background:var(--brand); border-color:var(--brand); color:#fff;
}
.ps-emailsubscription .btn:hover, .block_newsletter .btn:hover, .ps-emailsubscription-block .btn:hover{
  background:var(--navy-950); border-color:var(--navy-950); color:#fff;
}

/* ==========================================================================
   14. FOOTER  (.omni-footer* from the footer.tpl override, navy-950)
   ========================================================================== */
.footer, #footer, .footer-container, .js-footer, .omni-footer{ background:var(--navy-950); color:var(--slate-300); }
.footer-container{ margin-top:0; }
/* the inherited footer renders the module columns into .footer__main-top.row as
   Bootstrap .col-lg-3 blocks, which already lay out as a clean 4-up row (2-up at
   md, 1-up at sm). Keep that native layout; do NOT force a grid here (the col-*
   width:25% fights a grid track and collapses each column). Just add breathing
   room. .omni-footer__cols is the class the older full-replace footer emitted. */
.footer__main-top{ padding-block:2.75rem; }
.omni-footer__cols{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:2rem; padding-block:2.75rem;
}
.omni-footer__logo img{ max-height:40px; width:auto; }
#footer .h3, #footer .h4, .footer h3, .footer .title, .footer-container .h3,
.omni-footer .h3, .omni-footer h3, .block-contact .h3, #footer .title-block{
  color:#fff; font-weight:700; text-transform:none;
}
#footer a, .footer a, .footer-container a, .omni-footer a, .block-contact a{ color:var(--slate-400); }
#footer a:hover, .footer a:hover, .footer-container a:hover, .omni-footer a:hover{ color:#fff; }
.footer-container li a::before, .omni-footer li a::before{ color:var(--accent); }
#footer .links .collapse, #footer .block-contact, .footer-container .links{ border-color:var(--navy-800); }

/* copyright strip: store logo + copyright on the left, Randcore (dofollow, logo)
   + PrestaShop attribution on the right */
.omni-footer__bottom{
  margin-top:2rem; padding-top:1.25rem; padding-bottom:1.5rem;
  border-top:1px solid var(--navy-800);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center;
}
.omni-footer__copy{ color:var(--slate-500); font-size:.85rem; margin:0; }
.omni-footer__attrib{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.5rem; margin-left:auto; }
.omni-footer__credit{ color:var(--slate-400); font-size:.85rem; margin:0; display:inline-flex; align-items:center; gap:.55rem; }
.omni-footer__credit a{ display:inline-flex; align-items:center; }
.omni-footer__randcore{ height:26px; width:auto; opacity:.9; vertical-align:middle; transform:translateY(-3px); transition:opacity .15s ease; }
.omni-footer__credit a:hover .omni-footer__randcore{ opacity:1; }
/* PrestaShop + Randcore attribution: sits LEFT of the "Designed & developed by"
   credit and matches its size/colour so the two read as a symmetrical, inline
   pair (align-items:center on the parent keeps the text baselines level despite
   the Randcore logo's height). */
.omni-footer__ps{ color:var(--slate-400); font-size:.85rem; margin:0; display:inline-flex; align-items:center; gap:.28rem; }
.omni-footer__ps a{ color:var(--slate-300); text-decoration:none; }
.omni-footer__ps a:hover{ color:#fff; text-decoration:underline; }

/* payment / delivery / secured badge strip */
.omni-footer__partners{ border-top:1px solid var(--navy-800); padding:1.15rem 0 .35rem; }
.omni-footer__partners-inner{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem; }
.omni-footer__pgroup{ display:flex; align-items:center; gap:.6rem; }
.omni-footer__plabel{ color:var(--slate-400); font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; }
.omni-footer__pchip{ display:inline-flex; align-items:center; justify-content:center; height:30px; min-width:48px; padding:0 .55rem; background:#fff; border-radius:5px; }
.omni-footer__pchip img{ max-height:20px; width:auto; display:block; }
.omni-footer__pchip--bobgo{ height:36px; min-width:78px; }
.omni-footer__pchip--bobgo img{ max-height:28px; }
.omni-footer__pchip--secured{ background:transparent; border:1px solid var(--navy-700); color:var(--slate-300); font-size:.74rem; gap:.4rem; padding:0 .65rem; }

/* ==========================================================================
   15. CROSS-SITE NETWORK BAR  (navy strip, rendered by header tpl override)
   ========================================================================== */
.omni-crossbar{ background:var(--navy-950); border-bottom:1px solid var(--navy-800); }
.omni-crossbar__inner{
  max-width:var(--container-max); margin:0 auto; min-height:34px;
  display:flex; align-items:center; gap:.25rem; padding:0 1rem;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; overflow-x:auto; white-space:nowrap;
}
.omni-crossbar__link{ color:var(--slate-400); text-decoration:none; padding:.3rem .4rem; }
.omni-crossbar__link:hover{ color:#fff; }
.omni-crossbar__link.is-active{ color:#fff; }
.omni-crossbar__sep{ color:var(--navy-700); }
.omni-crossbar__meta{ margin-left:auto; color:var(--slate-500); text-transform:none; letter-spacing:0; }
.omni-crossbar__meta a{ color:var(--slate-300); }

/* ==========================================================================
   16. RESPONSIVE  (the brand layer only had a hero rule before; these fill the
        crossbar / header / menu / PLP / PDP / footer gaps)
   ========================================================================== */

/* --- tablets and below --- */
@media (max-width:991.98px){
  /* mobile offcanvas menu (.ps-mainmenu--mobile, verified live): the links and
     child-toggle chevrons inherit red; force navy with real 48px tap rows. */
  .ps-mainmenu--mobile .menu__link, .ps-mainmenu--mobile .menu__toggle-child{
    color:var(--slate-700); font-weight:600;
  }
  .ps-mainmenu--mobile .menu__link{
    min-height:48px; display:flex; align-items:center;
    padding:.85rem 1rem; border-bottom:1px solid var(--line);
  }
  .ps-mainmenu--mobile .menu__link:hover{ color:var(--accent); }
  .ps-mainmenu--mobile .menu__toggle-child{ min-width:48px; min-height:48px; }

  /* enriched mobile drawer: search at top, contact + Omnitronix logo at the bottom */
  .ps-mainmenu--mobile.offcanvas{ display:flex; flex-direction:column; }
  .ps-mainmenu__mobile{ flex:1 1 auto; overflow-y:auto; }
  .ps-mainmenu__additionnals, .omni-mobile-foot{ flex:0 0 auto; }
  .omni-msearch{
    display:flex; align-items:center; gap:.5rem; margin:.25rem 1rem 1rem;
    padding:.3rem .3rem .3rem .75rem; border:1px solid var(--line-strong);
    border-radius:var(--radius-btn); background:var(--surface-2);
  }
  .omni-msearch:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); background:#fff; }
  .omni-msearch__icon{ color:var(--ink-3); font-size:20px; }
  .omni-msearch__input{ flex:1; min-width:0; border:none; background:transparent; height:40px; font-family:var(--font-sans); color:var(--ink); }
  .omni-msearch__input:focus{ outline:none; }
  .omni-msearch__btn{ flex:0 0 auto; height:40px; padding-inline:1rem; }
  .omni-mobile-foot{ padding:1.25rem 1rem 1.5rem; border-top:1px solid var(--line); background:var(--surface-2); }
  .omni-mobile-foot__contact{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.1rem; }
  .omni-mobile-foot__contact a{ display:inline-flex; align-items:center; gap:.55rem; color:var(--brand); font-weight:600; font-size:.95rem; }
  .omni-mobile-foot__contact a .material-icons{ color:var(--accent); font-size:20px; }
  .omni-mobile-foot__contact a:hover{ color:var(--accent); }
  .omni-mobile-foot__brand img{ max-height:46px; width:auto; }
}

/* --- phones --- */
@media (max-width:767.98px){
  .omni-crossbar__inner{ font-size:12px; letter-spacing:.03em; gap:.15rem; }
  /* keep the mobile hero single-column and let it actually fit */
  .omni-hero__inner{ grid-template-columns:1fr; gap:2rem; padding-block:2.5rem; }
  .omni-hero__title{ max-width:none; }
  .omni-hero__panel{ padding:1.25rem 1.1rem; }
  /* footer: Bootstrap .row already stacks the columns; just tidy the bottom strip */
  .footer__main-top{ padding-block:2rem; }
  .omni-footer__cols{ grid-template-columns:repeat(2,1fr); gap:1.5rem; padding-block:2rem; }
  .omni-footer__bottom{ flex-direction:column; align-items:flex-start; }
  .omni-footer__attrib{ margin-left:0; }
}

@media (max-width:559.98px){
  /* crossbar: drop the 5 sibling-site hops + their dots so the phone + delivery
     CTA are reachable without a hidden horizontal scroll */
  .omni-crossbar__inner > .omni-crossbar__link:not(.is-active),
  .omni-crossbar__inner > .omni-crossbar__sep{ display:none; }
  .omni-crossbar__delivery{ display:none; }   /* keep just SHOP PARTS + phone */
  .omni-crossbar__meta{ margin-left:auto; }
  .omni-crossbar__link, .omni-crossbar__meta a{ padding:.5rem .4rem; } /* taller tap */
  /* footer to a single column */
  .omni-footer__cols{ grid-template-columns:1fr; }
}

@media (max-width:479.98px){
  /* buy rows go full width so the qty stepper + add button never clip */
  .product__actions-qty-add{ flex-wrap:wrap; row-gap:.75rem; }
  .product__add-to-cart, .product__add-to-cart-button{ width:100%; }
  .product-miniature__actions .product-miniature__add{ flex:1; }
  /* spec table to a single column so long values don't crush the value cell */
  .details__item{ grid-template-columns:1fr; gap:.15rem; }
  .details__title{ font-size:.85rem; }
}

/* ==========================================================================
   17. MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   18. OMNI SEARCH  (Meilisearch instant typeahead, .omni-ac dropdown)
   ========================================================================== */
.omni-ac{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:1200;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:12px;
  box-shadow:0 16px 40px rgba(10,18,40,.16); overflow:hidden; max-height:70vh; overflow-y:auto;
}
.omni-ac[hidden]{ display:none; }
.omni-ac__item{
  display:flex; align-items:center; gap:.75rem; padding:.6rem .8rem; text-decoration:none;
  border-bottom:1px solid var(--surface-3); color:var(--ink);
}
.omni-ac__item:last-of-type{ border-bottom:0; }
.omni-ac__item.is-active, .omni-ac__item:hover{ background:var(--surface-2); }
.omni-ac__img{
  width:44px; height:44px; flex:0 0 44px; object-fit:contain; border-radius:6px;
  background:#fff; border:1px solid var(--surface-3);
}
.omni-ac__img--ph{ background:var(--surface-3); }
.omni-ac__body{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.omni-ac__name{
  font-size:.86rem; font-weight:600; color:var(--brand); line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.omni-ac__meta{
  font-family:var(--font-mono, 'Cascadia Code',Consolas,monospace); font-size:.72rem; color:var(--ink-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px;
}
.omni-ac__price{
  flex:0 0 auto; font-size:.82rem; font-weight:700; color:var(--ink); white-space:nowrap;
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
}
.omni-ac__oos{ font-size:.62rem; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:.5px; }
.omni-ac__all{
  display:block; width:100%; text-align:left; padding:.6rem .8rem; border:0; cursor:pointer;
  background:var(--surface-2); color:var(--accent); font-family:var(--font-sans);
  font-size:.78rem; font-weight:600;
}
.omni-ac__all:hover{ background:var(--surface-3); }
.omni-ac__empty{ padding:.9rem .8rem; color:var(--ink-2); font-size:.84rem; }
/* Suppress the stock ps_searchbar autocomplete/results — omnisearch replaces it
   entirely, so its grid must not peek out behind the Meilisearch dropdown.
   !important beats the module's inline display:grid toggle. */
#ps_searchbar_results, .ps-searchbar__results.js-search-results,
#ps_searchbar_result.js-search-template, .ps-searchbar .ui-autocomplete{ display:none !important; }