/**
 * Bergsma en de Boer child theme — scoped HEADER + TOP MENU styles.
 * Ported 1:1 from the old PRS080193_06 / ammusic theme (BS4) compiled CSS
 * (theme.css + custom.css). Everything is scoped under #header so it cannot
 * clobber the Hummingbird (BS5) styling used by the rest of the page.
 * Loaded by core as `theme-custom` (priority 1000, i.e. after Hummingbird's theme.css).
 */

/* ---- Fonts ----
 * The body font is POPPINS 13px/24px, letter-spacing .5px, colour #000 — confirmed from the
 * live compiled bundle: body{font-family:"Poppins",sans-serif;font-size:13px;line-height:24px;
 * letter-spacing:.5px;color:#000}. (REBUILD-TODO.md previously recorded the font as "Roboto";
 * that was WRONG. `Roboto` occurs in the live bundle only inside Bootstrap's default
 * -apple-system/BlinkMacSystemFont/Segoe UI stack on .tooltip and .popover — there is no
 * standalone font-family:Roboto anywhere. Corrected 2026-07-29.)
 *
 * REMOVED 2026-07-29 — two unused Google Fonts imports:
 *     Open+Sans:400,400i,600,600i,700,700i,800,800i
 *     Oswald:400,500,600,700
 * The old theme's _partials/head.tpl loaded both, but NEITHER is referenced by a single
 * font-family declaration — verified 0 occurrences in this stylesheet AND 0 in the live
 * compiled bundle. They were two render-blocking font requests fetching families nothing used.
 * Dropping them cannot change rendering. Re-add only if a real declaration needs them.
 *
 * NOTE (not changed, flagged instead): loading fonts via CSS @import serialises the request
 * behind this stylesheet. A <link rel="preconnect"/"stylesheet"> in a head.tpl override would
 * be faster. Left alone because it is a perf change, not a parity change. */
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");
@import url("font-awesome.css");

/* COLOUR-ROLE CORRECTION 2026-07-29 — #ffd200 -> #d13925 (5 occurrences).
 * #ffd200 is AMMUSIC's brand yellow, inherited with this stylesheet. Bergsma's compiled live
 * bundle uses #ffd200 in exactly SIX places and every one is an owl/flexslider CAROUSEL-ARROW
 * hover (.flexslider .flex-direction-nav a:hover, .customNavigation a:hover[::before], ...).
 * It is never used on checkout or cart UI. Each of the five rules below was verified against
 * the live bundle and is #d13925 there:
 *     body#checkout [data-action="show-password"]                      background:#d13925
 *     #js-checkout-summary .card-block .cart-summary-products a         color:#d13925
 *     body#checkout .cancel-address:hover / .add-address a:hover        color:#d13925
 *     .cart-grid-body a.label                                          color:#d13925
 *     .product-line-grid-right ... .remove-from-cart:hover              color:#d13925
 * This supersedes REBUILD-TODO.md's note to "leave #ffd200 alone" — that was correct about
 * Bergsma USING the colour, but wrong about these particular roles.
 * NOTE: live also defines later #1f1f1f overrides for the show-password and
 * cart-summary-products a rules (almost certainly their :hover states). Those hover rules are
 * NOT reproduced here; verify hover colours on staging. */


@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(e79bfd88537def476913f3ed52f4f4b3.eot);
  src: local("Material Icons"), local("MaterialIcons-Regular"),
       url(570eb83859dc23dd0eec423a49e147fe.woff2) format("woff2"),
       url(012cf6a10129e2275d79d6adac7f3b02.woff) format("woff"),
       url(a37b0c01c0baf1888ca812cc0508f6e2.ttf) format("truetype");
}

/* ================= BASE (scoped) ================= */
#header {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #000;
  line-height: 24px;
  letter-spacing: 0.5px;
  background: transparent;
  position: static;
  top: auto;
}
#header,
#header a {
  color: #000;
}
#header a,
#header a:hover {
  text-decoration: none;
}
#header .material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

/* ---- container (theme uses NO desktop horizontal padding, max-width 1400 @>=1450) ---- */
#header .container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
#header .container::after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 544px)  { #header .container { max-width: 576px; } }
@media (min-width: 768px)  { #header .container { max-width: 720px; } }
@media (min-width: 992px)  { #header .container { max-width: 940px; } }
@media (min-width: 1200px) { #header .container { max-width: 1170px; } }
@media (min-width: 1450px) { #header .container { max-width: 1400px; } }
/* BREAKPOINT FIX 2026-07-29 — this was `max-width: 991px`, which is a RESPONSIVE BUG at tablet
 * width. Live's rule is at 767px:
 *     @media (max-width:767px){ .container{max-width:100%;padding-left:10px;padding-right:10px} }
 * With 991px, the 768-991px range matched BOTH this rule and
 * `@media (min-width:768px){max-width:720px}`; being later in the file this one won, so the
 * header container went FULL WIDTH from 768px up instead of staying a centred 720px. That is
 * directly one of the three target viewports (768x1024). */
/* FIXED 2026-07-29 — this was scoped to #header, but live's rule is UNSCOPED:
       @media(max-width:767px){ .container{max-width:100%;padding-left:10px;padding-right:10px} }
   Without the padding on the PAGE container, #spe_res's `margin:0 -5px` had nothing to eat into, so
   the product grid overflowed the viewport. Measured at 375px on the category page:
       live   .container p=10px/10px -> #columns_inner 355@x10 -> .products 365@x5  (right 370, inside)
       staged .container p=0px/0px   -> #center-column 375@x0  -> .products 385@x-5 (right 380, OVER)
   Fixing the container also brings the cards to live's size: item 183x324 instead of 193x354. */
@media (max-width: 767px) { .container { max-width: 100%; padding-left: 10px; padding-right: 10px; } }

/* ---- utilities (scoped) ---- */
#header .clearfix::after { content: ""; display: table; clear: both; }

/* REMOVED 2026-07-29 — a Bootstrap-4-ALPHA COMPAT SHIM that is now redundant:
 *     #header .pull-xs-left  { float: left  !important; }
 *     #header .pull-xs-right { float: right !important; }
 *     @media (min-width:992px){ #header .hidden-lg-up  { display:none !important } }
 *     @media (max-width:991px){ #header .hidden-md-down{ display:none !important } }
 * The scaffold re-implemented those four dead classes under #header so the markup pasted from
 * the BS4-alpha theme kept working. templates/_partials/header.tpl now uses real Bootstrap 5
 * utilities instead (float-end, d-lg-none, d-none d-lg-block), which Bootstrap itself defines,
 * so the shim only kept dead class names alive. Note the shim was also SCOPED TO #header, so
 * identical classes anywhere else in the theme silently did nothing — which is precisely the
 * failure mode the BS5 sweep exists to remove. */

#header ul { list-style: none; padding-left: 0; margin: 0; }

/* header-nav row is desktop-hidden on the live site */
#header .header-nav { display: none; }
#header .header-banner { padding: 0; margin: 0; }

/* ================= HEADER TOP (two rows) ================= */
#header .header-top { padding: 0; margin: 0; border: 0; }
#header .header-top > .container { position: relative; }

/* row 1 — white bar: logo + menu + language flags */
#header .header-top .header-div {
  background: #fff;
  width: 100%;
  float: left;
  padding: 23px 0;
  border: none;
}
#header .header-div > .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* row 2 — navy bar: search + user info + cart */
#header .header-top-main.bg_main {
  float: none;
  clear: both;
  background: #d13925;
  position: relative;
}

/* ---- logo ---- */
#header .logo { max-width: 100%; }
#header .header-top .header_logo {
  float: left;
  padding: 0;
  width: 20%;
}

/* ---- menu ---- */
#header .header-top .menu {
  float: left;
  padding: 0 0 0 6.5%;
  width: 65%;
  z-index: 9;
  margin-right: auto;
  min-height: 1px;
  position: relative;
}
#header .header-banner { min-height: 0; height: 0; padding: 0; margin: 0; line-height: 0; font-size: 0; overflow: hidden; }
#header .header-top .menu #top-menu {
  display: flex;
  margin: 0;
  flex-wrap: wrap;
}
#header #top-menu > li { margin: 0; position: relative; padding: 3px 0; }

#header .header-top a[data-depth="0"] {
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  text-transform: none !important;
}
#header .top-menu a[data-depth="0"] { padding: 0 12px; }
#header .header-top .menu a { text-transform: none !important; }
#header .top-menu a[data-depth="0"]:hover,
#header .top-menu .sub-menu a:hover { color: #1b71aa; text-decoration: none; }

/* sub-menus stay hidden on the static desktop header */
#header .top-menu .sub-menu {
  border: 1px solid #f0f0f0;
  margin-left: 0;
  width: auto;
  z-index: 10000;
  display: none;
  top: 24px !important;
  background: #fff;
  padding: 10px 10px 10px 0;
  position: absolute;
}
#header .top-menu .sub-menu.collapse { display: none; }
#header .top-menu[data-depth="1"] { margin: 0.625rem; }
#header .top-menu a:not([data-depth="0"]) { display: block; padding: 0.625rem; color: #acaaa6; font-weight: 400; }
#header .top-menu a.dropdown-submenu { color: #414141; text-transform: none !important; font-weight: 400; font-size: 14px; }

/* ---- language selector (flags, far right of white row) ---- */
#header #_desktop_language_selector { width: 130px; }
#header .language-selector .dropdown-menu.languages-block_ul {
  border: none;
  box-shadow: none;
  display: block;
  position: relative;
  text-align: right;
  margin: 2px 0 0;
  padding: 5px 0;
  background: transparent;
  min-width: 0;
}
#header .language-selector .dropdown-menu.languages-block_ul li {
  display: inline-block;
  opacity: 0.4;
}
#header .language-selector .dropdown-menu.languages-block_ul li.current { opacity: 1; }
#header .language-selector a { margin-bottom: 0 !important; padding: 0; margin-left: 5px; }

/* ================= NAVY ROW ITEMS ================= */
/* ---- cart ---- */
#header #_desktop_cart {
  float: right;
  padding: 0;
  width: auto;
  z-index: 999;
  position: relative;
  display: inline-block;
}
#header #_desktop_cart > div { padding: 0; }
#header .header-top .blockcart {
  display: block;
  float: right;
  padding: 0;
  margin: 10px 0 10px;
  position: relative;
  text-align: center;
  white-space: nowrap;
}
#header .header-top .blockcart .header,
#header #_desktop_cart .header,
#header #_desktop_cart .blockcart-header { background: transparent; position: static; cursor: pointer; z-index: auto; }
#header .cart-image { display: inline-block; vertical-align: middle; position: relative; margin-top: 5px; }
#header .header-top .blockcart .header .shopping-cart { display: none; }
#header .blockcart-header a #bgimage {
  background: rgba(0, 0, 0, 0) url("../img/megnor/cart.png") no-repeat scroll 0 0;
  height: 33px;
  position: relative;
  width: 35px;
  margin-right: 12px;
}
#header #_desktop_cart .cart-price { display: inline-block; text-align: left; vertical-align: middle; width: auto; }
#header #_desktop_cart .cart {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 20px;
  text-transform: capitalize;
}
#header #_desktop_cart .value {
  display: block;
  font-weight: 600;
  font-size: 15px;
  position: relative;
  line-height: 18px;
}
/* live bundle: `#_desktop_cart .cart-products-count{…background-color:#212121;…}`.
   `#216fa7` was ammusic's accent and appears 0 times in Bergsma's bundle. */
#header #_desktop_cart .cart-products-count {
  color: #fff;
  background-color: #212121;
  font-size: 11px;
  font-weight: 500;
  line-height: normal;
  position: absolute;
  width: 17px;
  height: 17px;
  right: 7px;
  top: 0;
  border-radius: 50%;
}
/* FIXED 2026-07-29: live measures rgb(33,33,33) on the cart text, not white. Its declaration is
   `#_desktop_cart .blockcart .cart-price .value{color:#212121}`. White here was inherited from the
   scaffold base, whose red bar used light text. */
#header #_desktop_cart .cart,
#header #_desktop_cart .blockcart .cart-price .value { color: #212121; }

/* ---- user info ---- */
#header #_desktop_user_info {
  width: 8%;
  float: right;
  margin: 10px 30px 0 0;
  position: relative;
  z-index: 9;
  cursor: pointer;
}
/* FIXED 2026-07-29: measured on live at 1600px — 'Inloggen' rgb(33,33,33) and 'Mijn Account'
   rgb(33,33,33) on the rgb(209,57,37) bar. Staged rendered both rgb(255,255,255). */
#header #_desktop_user_info .tm_userinfotitle {
  font-size: 13px;
  position: relative;
  color: #212121;   /* live: rgb(33,33,33) */
  line-height: 20px;
  letter-spacing: 0.5px;
  font-weight: 400;
  float: left;
  display: inline-block;
  vertical-align: middle;
}
#header #_desktop_user_info .tm_userinfotitle1 {
  font-size: 15px;
  position: relative;
  color: #212121;   /* live: rgb(33,33,33) */
  line-height: 20px;
  letter-spacing: 0.4px;
  font-weight: 600;
  float: left;
  display: inline-block;
  vertical-align: middle;
}
#header #_desktop_user_info .tm_userinfotitle1::after {
  position: absolute;
  content: "\f0d7";
  right: -15px;
  font-family: FontAwesome;
  left: auto;
  font-weight: 400;
  font-size: 12px;
}
#header #_desktop_user_info .material-icons {
  position: relative;
  font-size: 14px;
  color: #fff;
  float: right;
  bottom: 5px;
}
#header #_desktop_user_info .user-info .material-icons { display: none; }
#header #_desktop_user_info .user-info {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  display: none;
  margin: 0;
  min-width: 230px;
  padding: 15px;
  position: absolute;
  right: 0;
  text-align: left;
  top: 52px;
  z-index: 9;
  font-size: 13px;
  box-shadow: 0 2px 11px 0 rgba(0,0,0,0.1);
}
/* each dropdown link is a full-width stacked row (live child theme) — without
   this the logout + account-name links run together inline ("Afmelden dani
   test" on one line). The account link (customer name → my-account) then sits
   as its own row under "Afmelden", like live. */
#header #_desktop_user_info > .user-info a {
  clear: both; float: left; width: 100%; display: block;
  padding: 5px 5px 5px 0; margin: 0 3px 10px 0;
  font-size: 13px; line-height: 18px; color: #000;
  text-transform: capitalize; text-decoration: none; border-radius: 25px;
}
#header #_desktop_user_info > .user-info a:last-child { margin-bottom: 0; }
#header #_desktop_user_info > .user-info a:hover { color: #d13925; }

/* ---- two mobile-header bugs, both fixed with LIVE's own rules ----
   1. DOUBLE CART ICON. ps_shoppingcart renders two visuals inside .cart-image: a #bgimage div
      (theme sprite) AND an <i class="material-icons shopping-cart"> glyph. Live hides the glyph in
      BOTH header regions:
          #header .header-top .blockcart .header .shopping-cart{display:none}
          #header .header-nav .cart-preview .shopping-cart{display:none}
      Only the first was ported, and below 992px the JS/markup puts the cart in .header-nav — so
      both icons rendered. Second rule added verbatim.
   2. ACCOUNT DROPDOWN PUSHED THE PAGE DOWN. Live styles the panel once for BOTH mounts:
          #_desktop_user_info .user-info, #_mobile_user_info .user-info { position:absolute; right:0;
          top:52px; min-width:230px; padding:15px; background:#fff; border:1px solid #f0f0f0; ... }
      The child scoped all of that to #_desktop_user_info only, so the mobile panel had no
      position:absolute and opened IN FLOW, shifting everything under it. Live's declarations are
      applied to the mobile mount below; the 991px/480px blocks still override `top` (63px/49px). */
#header .header-nav .cart-preview .shopping-cart { display: none; }

#header #_mobile_user_info .user-info {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  display: none;
  margin: 0;
  min-width: 230px;
  padding: 15px;
  position: absolute;
  right: 0;
  text-align: left;
  top: 52px;
  z-index: 9;
  font-size: 13px;
  box-shadow: 0 2px 11px 0 rgba(0,0,0,.1);
}


/* ---- search ---- */
#header .search-widget { float: left; width: 100%; position: relative; min-height: 1px; }
#header .header-top .search-widget { padding: 10px 0; width: 42%; z-index: unset; }
#header .header-top .search-widget form input[type="text"] { min-width: inherit; width: 100%; }
#header .search-widget form {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #fff;
  border-radius: 5px;
  position: relative;
}
#header .search-widget form input[type="text"] {
  background: #fff none repeat scroll 0 0;
  border: medium none;
  color: #adadad;
  display: inline;
  font-size: 12px;
  height: 40px;
  letter-spacing: 0.6px;
  padding: 0 42px 0 20px;
  border-radius: 5px;
}
#header .search-widget form input[type=text]:focus { outline: none; }
#header .search-widget form button[type="submit"] {
  /* live: `background:#2d2d2d url(<inline png>) no-repeat scroll 13px 14px`. `#216fa7`
     was ammusic's accent (0 occurrences in Bergsma's bundle). */
  background: #2d2d2d url("../img/megnor/search.png") no-repeat scroll 13px 14px;
  border: medium none;
  bottom: 0;
  color: #adadad;
  display: block;
  font-weight: bold;
  height: 42px;
  padding: 0;
  position: absolute;
  right: -1px;
  text-align: center;
  text-transform: capitalize;
  top: -1px;
  width: 42px;
  border-radius: 2px 5px 5px 2px;
}
#header .search-widget form button[type="submit"] .submit-text { display: none; }
/* The `background` shorthand above sets #2d2d2d + the magnifier, but something later in the
   cascade (Hummingbird's button styling) was overriding background-COLOR only — the magnifier and
   geometry came through while the button rendered Bootstrap blue rgb(33,111,167). Restate the
   colour with id-level specificity so only the colour is pinned. */
#header #search_widget form button[type="submit"] { background-color: #2d2d2d; }
#header #search_widget form button[type="submit"]:hover { background-color: #000; }

/* ---- desktop search: DELIBERATE DEVIATION FROM LIVE ----
   Live had NO desktop search box. Evidence: its CSS hides the widget inside .header-top
   (`.header-top #search_widget{display:none}`, only `.header-nav #search_widget` is display:block),
   and its JS desktop branch did `insertAfter('.header-top #_desktop_user_info')` — an element that
   does NOT EXIST anywhere in the old header.tpl, so the move was a silent no-op and the widget
   stayed hidden in .header-top. Net effect: search was mobile-only on the live shop.
   Rather than reproduce a shop with no desktop search, the widget is kept visible and pinned INTO
   the red strip instead of floating below it as a 250px absolute panel overlapping the hero.
   Revert by deleting this block if exact live parity is preferred. */
@media (min-width: 992px) {
  #header .header-top #search_widget { display: block; }
  #header .header-top #search_widget .search_button { display: none; }   /* no toggle needed */
  #header .header-top #search_widget .searchtoggle {
    position: static; width: 100%; display: block; top: auto; right: auto;
  }
  #header .header-top #search_widget { width: 42%; padding: 10px 0; }
}

/* =========================================================================
   FOOTER (scoped under #footer)
   Ported 1:1 from the live child theme (themes/ammusic compiled theme.css +
   custom.css, TemplateMela BS4). Everything is scoped under #footer so it
   cannot clobber the Hummingbird (BS5) styling used by the rest of the page.
   Layout at >=1450px: 4 float columns (16% / 16% / 52% / 16%) in a navy
   .footer-container, a near-black .footer-after bar with a centered copyright,
   and the .block-social block absolutely positioned bottom-left of #footer.
   ========================================================================= */

/* ---- base (matches the live <footer> element) ---- */
#footer {
  background: #fff none repeat scroll 0 0;
  position: relative;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #000;
  line-height: 24px;
  letter-spacing: 0.5px;
}
#footer a { color: #000; }
#footer a, #footer a:hover { text-decoration: none; }
#footer ul { list-style: none; padding-left: 0; margin-top: 0; }
/* link-column + contact lists are .collapse -> margin 0 (see below); the
   .block-social <ul> keeps the default 1rem bottom margin, as on live. */

/* ---- container (no desktop padding; theme max-widths, max 1400 @>=1450) ---- */
#footer .container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
#footer .container::after { content: ""; display: table; clear: both; }
@media (min-width: 544px)  { #footer .container { max-width: 576px; } }
@media (min-width: 768px)  { #footer .container { max-width: 720px; } }
@media (min-width: 992px)  { #footer .container { max-width: 940px; } }
@media (min-width: 1200px) { #footer .container { max-width: 1170px; } }
@media (min-width: 1450px) { #footer .container { max-width: 1400px; } }

/* ---- row: classic float/clearfix (NOT flex) ---- */
#footer .row { display: block; margin-left: -10px; margin-right: -10px; }
#footer .row::after { content: ""; display: table; clear: both; }

/* ---- utilities (scoped) ---- */
#footer .clearfix::after { content: ""; display: table; clear: both; }
#footer .list-unstyled { padding-left: 0; list-style: none; }
#footer .text-white { color: #fff !important; }
/* REMOVED 2026-07-29 — BS4-alpha shim (.pull-xs-left/right, .hidden-lg-up, .hidden-md-down,
   .hidden-sm-up, .hidden-xs-down), scoped to #footer. The footer templates now use real
   Bootstrap 5 utilities, which Bootstrap defines itself. Being #footer-scoped, this shim also
   silently did nothing for the same classes anywhere else - exactly the failure mode the BS5
   sweep removes. */

/* ---- headings ---- */
#footer h3, #footer .h3 {
  font-size: 1.125rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}
#footer .h1, #footer .h2, #footer .h3 { text-transform: uppercase; color: #000; }

/* ================= FOOTER CONTAINER (near-black) =================
   CORRECTED 2026-07-29 — this whole footer section had been ported from
   ~/boksdingen/ammusic-child (a DIFFERENT shop), so its colours were ammusic's
   custom.css overrides, not Bergsma's. Measured on live
   (https://webshop.bergsmaendeboer.nl, which serves the very same bundle hash
   theme-9ca68c92.css that this port reads):
       #footer .footer-container  background-color: rgb(4, 6, 5)      <- NOT #d13925
       #footer .links h3          color: rgb(209, 57, 37)             <- NOT #fff
       #footer .footer-container li a:hover  color: #d13925           <- NOT #216fa7
   Bundle source of truth: `.footer-container{padding:65px 0;overflow:hidden;
   background-color:#040605}`. The red belongs on the TITLES, on the near-black
   panel — the panel itself is never red on live. */
#footer .footer-container {
  padding: 65px 0;
  overflow: hidden;
  background: #040605;
}
#footer .footer-container .container { padding: 0 10px; }
#footer .footer { position: relative; }   /* .row.footer */
/* classic BS grid base for the footer columns (position + 1px min-height);
   the 1px min-height on the empty newsletter col-xs-12 / recaptcha container
   reproduces live's exact column heights. */
#footer .footer-container [class*="col-"] { position: relative; min-height: 1px; }
#footer .footer-container li { margin-bottom: 0; }

/* ---- link / content columns ---- */
#footer .footer-container .links { padding: 0; width: 16%; float: left; position: relative; margin-bottom: 0; }
#footer .footer-container .links:last-child { padding: 0; }
#footer .footer-container .links.block:nth-child(3) { width: 20%; }
/* SCOPED 2026-07-29: this forced the footer link lists OPEN at EVERY width. Live keeps them open
   on desktop but COLLAPSED below 992px (measured at 414px: live's lists are 0x0, staged's were
   63x210 and 117x220). Desktop-only now; below 992 Bootstrap's own .collapse handling applies. */
@media (min-width: 992px) {
  #footer .footer-container .links .collapse { display: inherit; padding: 0; margin: 0; }
}
#footer .footer-container .links .collapse { padding: 0; margin: 0; }
/* live bundle: `.footer-container .links .h3,…{color:#d13925;font-size:16px;…}` */
#footer .footer-container .links .h3,
#footer .footer-container .links h3,
#footer .footer-container .links h3 a {
  color: #d13925;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 24px;
  text-transform: capitalize;
  margin-bottom: 15px;
}
#footer .footer-container li a {
  color: #ebebeb;
  cursor: pointer;
  font-size: 13px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: capitalize;    /* live value; the previous `none` was ammusic's override */
}
#footer .footer-container li a:hover,
#footer .footer-container .row.footer .links .block_content li a:hover { color: #d13925; }

/* generic footer h3.h3 / contact title fallback */
#footer .footer-container h3.h3,
#footer .blockcms-title,
#footer .block-contact-title {
  color: #000;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 20px;
  margin-bottom: 15px;
}

/* ================= BLOCK-CONTACT (Adres) =================
   SPECIFICITY-INVERSION FIX 2026-07-29. `.block-contact` IS the last `.links`
   child, so `…\.links:last-child{padding:0}` also matches it. On live that rule
   is `.footer-container .links:last-child` = (0,3,0) and LOSES to
   `#footer .footer-container .block-contact` = (1,2,0), so live keeps its 70px
   padding-left. This port had prefixed it with `#footer `, making it (1,3,0),
   which then BEAT the block-contact rule and zeroed the padding.
   Measured: live padding-left 70px / li.address x=619 ; staged 0px / x=549.
   Fixed by giving the block-contact rule the extra `.links` class so it is also
   (1,3,0) AND later in the file. Do not drop `.links` from these selectors. */
#footer .footer-container .block-contact,
#footer .footer-container .block-contact.links {
  padding: 0 0 0 70px;
  border-left: 1px solid #333534;
  width: 30%;
  margin-bottom: 0;
  position: relative;
}
/* verified present in LIVE's bundle as the last block-contact rule (NOT an
   ammusic artefact): @media (min-width:992px){#footer .footer-container
   .block-contact{width:52%}} -> 52% of 1400 = 728px, which live renders. */
@media (min-width: 992px) {
  #footer .footer-container .block-contact,
  #footer .footer-container .block-contact.links { width: 52%; }
}
#footer .footer-container .block-contact .block-contact-title { margin-bottom: 15px; }

#footer #block-contact_list > li {
  clear: both;
  float: left;
  margin-right: 0;
  position: relative;
  width: 100%;
  padding-bottom: 8px;
}
#footer #block-contact_list li .contactdiv {
  display: block;
  float: left;
  width: 85%;
  padding-left: 0;
  color: #ebebeb;
  font-size: 13px;
  line-height: 22px;
  letter-spacing: 0.5px;
  text-transform: capitalize;
  margin-bottom: 10px;
  margin-left: 10px;
}
#footer #block-contact_list li span {
  font-size: 13px;
  letter-spacing: 0.5px;
  font-weight: 400;
  line-height: 28px;
  color: #ebebeb;
  float: left;
  margin-bottom: 12px;
  margin-left: 10px;
}
#footer #block-contact_list .email a { margin-left: 10px; }
#footer #block-contact_list .address::before {
  position: absolute; content: "";
  background: url(../img/megnor/footer-icon.png) no-repeat scroll 0px -905px;
  top: 0; bottom: 0; left: -30px; right: auto; height: 30px; width: 25px; cursor: pointer;
}
#footer #block-contact_list .number::before {
  position: absolute; content: "";
  background: url(../img/megnor/footer-icon.png) no-repeat scroll 0px -542px;
  top: 0; bottom: 0; left: -30px; right: auto; height: 30px; width: 30px;
}
#footer #block-contact_list .email::before {
  position: absolute; content: "";
  background: url(../img/megnor/footer-icon.png) no-repeat scroll 0px -182px;
  top: 0; bottom: 0; left: -30px; right: auto; height: 30px; width: 25px;
}

/* ================= NEWSLETTER ================= */
#footer .block_newsletter { display: inline-block; float: left; position: relative; }
#footer .block_newsletter p {
  color: #fff;
  font-size: 12px;
  letter-spacing: 1.2px;
  line-height: 19px;
  margin: 0 0 16px;
  padding: 0;
}
#footer .block_newsletter .text {
  font-size: 13px;
  letter-spacing: 0.5px;
  line-height: 26px;
  font-weight: 400;
  margin: 0 0 25px 0;
}
#footer .block_newsletter form { position: relative; width: auto; }
#footer .block_newsletter form .col-12 { padding: 0; }
#footer .block_newsletter form .input-wrapper { overflow: hidden; }
#footer .block_newsletter form input {
  height: 40px;
  outline: 0 none;
}
#footer .block_newsletter form input[type="email"] {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #fff;
  color: #000;
  display: inline-block;
  float: left;
  font-size: 12px;
  height: 44px;
  letter-spacing: 1px;
  line-height: 18px;
  max-width: 100%;
  padding: 9px 50px 9px 20px;
  width: 100%;
  border-radius: 5px;
}
#footer .block_newsletter form input[type=email]:focus { outline: 0; }

/* newsletter submit button base (btn / btn-primary) then icon override */
#footer .btn {
  border: 1px solid rgba(0, 0, 0, 0);
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.7px;
  line-height: 24px;
  padding: 0.5rem 1rem;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: 5px;
}
#footer .btn-primary {
  background: #d13925 none repeat scroll 0 0;
  border: 1px solid #d13925;
  color: #fff;
  text-transform: uppercase;
}
#footer .block_newsletter form input.btn {
  font-size: 0;
  position: absolute;
  right: 0;
  top: 0;
  left: auto;
  padding: 0;
  border-radius: 0 5px 5px 0;
  background: #fff url(../img/megnor/mail.png) no-repeat scroll 9px 14px;
  height: 44px;
  width: 45px;
  border: none;
}

/* ================= BLOCK-SOCIAL — REMOVED 2026-07-29 (ammusic-only) =================
 * The whole #footer .block-social block (~35 rules, plus five per-network background-image
 * rules pointing at facebook/twitter/youtube/instagram/linkedin .png) has been DELETED.
 *
 * Reasons, in order of decisiveness:
 *   1. ps_socialfollow is NOT REGISTERED on any hook in Bergsma's migrated DB. displayFooter
 *      has exactly two modules (1 ps_linklist, 2 ps_contactinfo) and displayFooterBefore — the
 *      hook ammusic used for its social block — has ZERO registrations. So this block never
 *      rendered on Bergsma's site.
 *   2. ps_socialfollow is not even in Bergsma's installed-module list (72 modules in ps_module).
 *   3. The five PNGs it referenced were ammusic's own artwork and are not in Bergsma's asset
 *      set, so after removing ammusic's images these rules were five broken URLs.
 *
 * This is the "remove ammusic-only styling" half of the port, not just the "add Bergsma's
 * deltas" half — inherited CSS is not a safe floor.
 *
 * FOR REFERENCE, had it been needed: Bergsma's own bundle styled social icons from a SPRITE,
 * `url(../img/megnor/social.png)` with per-network offsets (facebook 5px 8px, hover -33px 8px)
 * — and that sprite is MISSING FROM THE PULL (not present in
 * themes/PRS080193_06/assets/img/megnor/). See REBUILD-TODO.md.
 */

/* ================= FOOTER-AFTER (near-black bar) + copyright ================= */
#footer .footer-after {
  clear: both;
  margin: 0;
  padding: 35px 0;
  width: 100%;
  z-index: 9;
  background: #040605;
  border-top: 1px solid #333534;
}
#footer .footer-after #links_block_footer {
  width: auto;
  text-align: left;
  padding: 0;
  margin: 0;
  border: none;
  float: left;
}
#footer .copyright { text-align: center; margin: 0; font-size: 13px; line-height: 24px; padding-top: 0; padding-block-start: 0; }
#footer .copyright a { color: #ebebeb; font-size: 13px; letter-spacing: 0.5px; line-height: 26px; }
#footer .copyright a:hover { color: #d13925; }

/* back-to-top button (hidden until scrolled) */
#footer .top_button {
  background: url(../img/megnor/back_to_top.png) no-repeat scroll 0 0 transparent;
  height: 50px;
  width: 45px;
  right: 10px;
  bottom: 10px;
  display: none;
  position: fixed;
  z-index: 95;
}

/* =========================================================================
   PRODUCT (product detail) PAGE
   Ported 1:1 from the old ammusic child + TemplateMela PRS080193_06 parent
   (PS 1.7.8.3, BS4) compiled theme.css + custom.css. Scoped under #main (the
   product content <section>, which excludes #header/#footer) so it cannot
   regress the header/navbar/footer. The single exception is the content
   CONTAINER width, scoped under body#product .columns-container (a class only
   the content wrapper carries — header/footer use bare .container), so the
   product row ends up 1420px wide like live (#main 1400 + row -10px margins).
   Target computed values verified against live (https://ammusic.nl) at 1600px.
   ========================================================================= */

/* ---- content container: match live width (#main = 1400 => .product-container 1420) ---- */
body#product .columns-container.container {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 544px)  { body#product .columns-container.container { max-width: 576px; } }
@media (min-width: 768px)  { body#product .columns-container.container { max-width: 720px; } }
@media (min-width: 992px)  { body#product .columns-container.container { max-width: 940px; } }
@media (min-width: 1200px) { body#product .columns-container.container { max-width: 1170px; } }
@media (min-width: 1450px) { body#product .columns-container.container { max-width: 1400px; } }
body#product #center-column {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  float: none;
}

/* ---- base font (Poppins 13, like the live product page) ---- */
#main {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  line-height: 24px;
  letter-spacing: 0.5px;
  color: #000;
}
#main .material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}

/* ================= ROW + 3 COLUMNS (float layout, BS4) ================= */
#main .product-container {
  display: block;
  margin: 0 -10px;
  padding: 0;
}
#main .product-container::after { content: ""; display: table; clear: both; }
#main .col-md-5.product_main_img {
  float: left;
  width: 33.33333%;
  padding: 0 10px;
  position: relative;
}
#main .product_middle {
  float: left;
  width: 46.2%;
  padding: 0 10px 0 30px;
  position: relative;
}
#main .right_cms {
  float: right;
  width: 18.30%;
  margin-left: 30px;
  padding: 0 10px 0 0;
}
/* right_cms promo banners (reproducing tm_rightbanner / tm_rightbanner1, absent on staged) */
#main .right_cms #tmrightbanner,
#main .right_cms #tmrightbanner1 {
  position: relative;
  width: 100%;
  clear: both;
  margin-bottom: 30px;
  float: right;
}
#main .right_cms #tmrightbanner ul,
#main .right_cms #tmrightbanner1 ul { margin: 0; padding: 0; list-style: none; }
#main .right_cms #tmrightbanner li,
#main .right_cms #tmrightbanner1 li { overflow: hidden; position: relative; display: inline-block; }
#main .right_cms #tmrightbanner img,
#main .right_cms #tmrightbanner1 img { max-width: 100%; width: 100%; height: auto; }
/* removed 2026-07-29: targeted #tmrightbanner1 ul.hidden-md-down. tm_rightbanner1 was INERT
   on live (no module_shop row) so its block was deleted, and tm_rightbanner's <ul> no longer
   carries a visibility class - nothing can match this rule. */

/* ---- left column: page-content / #content wrapper (no border/padding on product) ---- */
#main .page-content,
#main #content {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  float: none;
}
#main #content .product-leftside { position: relative; }

/* ---- flags (empty for products without flags) ---- */
#main .product-flags {
  position: absolute;
  top: 0;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ================= COVER IMAGE ================= */
#main .images-container { position: relative; }
#main .product-cover { position: relative; margin: 0 0 25px; }
#main .product-cover img {
  display: block;
  max-width: 100%;
  height: auto;
  background: #fff;
}
/* zoom-in magnifier (small box, bottom-right of cover, visible on desktop) */
#main .product-cover .layer {
  position: absolute;
  bottom: 10px;
  right: 10px;
  height: 50px;
  width: 50px;
  padding: 14px;
  opacity: 1;
  z-index: 1;
  cursor: pointer;
}
#main .product-cover .layer .zoom-in {
  font-size: 35px;
  color: #1f1f1f;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 99;
}
/* removed 2026-07-29: the .layer now carries BS5 `d-none d-md-block`, whose !important
   declarations already give exactly this behaviour (hidden <768, block >=768). Overriding a
   dead BS4-alpha class with display:block is redundant. */

/* ---- product images modal (#product-modal) — live-measured: 800px dialog
   (margin 30 auto), transparent content, white 15px-padded flex body,
   figure 616px (cover full width, description caption below), thumbnail
   column 154px (thumbs 134px, 22px apart, 20px left gap). Opened by the
   magnifier layer via BS5 data attributes; thumbs are static like live. ---- */
#product-modal .modal-dialog { max-width: 800px; width: 800px; margin: 30px auto; }
#product-modal .modal-content { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
#product-modal .modal-body { background: #fff; padding: 15px; display: flex; margin: 0; }
#product-modal figure { width: 616px; max-width: calc(100% - 154px); margin: 0; }
#product-modal .product-cover-modal { width: 100%; max-width: 100%; height: auto; }
#product-modal .image-caption { display: block; border-top: 1px solid #ebebeb; padding: 10px 20px; margin: 0; font-size: 13px; color: #000; line-height: 24px; }
#product-modal .image-caption #product-description-short { font-size: 13px; color: #000; }
#product-modal #thumbnails { width: 154px; padding: 0; position: relative; }
#product-modal .js-modal-product-images { list-style: none; margin: 0; padding: 0 0 0 20px; }
#product-modal .js-thumb-container { display: block; margin: 0; }
#product-modal .js-modal-thumb { width: 134px; height: auto; margin: 0 0 22px; border: 1px solid transparent; }

/* ================= THUMBNAILS (grid, < 5 images) ================= */
#main .images-container .js-qv-mask { position: relative; white-space: nowrap; }
#main .images-container .js-qv-mask ul.additional-image-slider,
#main #additional-grid {
  display: block;
  float: left;
  width: 100%;
  margin: 0 0 30px;
  padding: 0 25px;
  list-style: none;
  gap: normal;
  position: relative;
  top: 0;
  left: 0;
}
#main .additional-image-slider > li.thumb-container {
  display: list-item;
  float: left;
  width: 25%;
  padding: 0 5px;
  margin: 0;
  list-style: none;
}
#main .additional-image-slider .thumb-container .thumb {
  display: inline;
  cursor: pointer;
  max-width: 100%;
  margin: 0 0 22px;
}
/* thumbnail links inherit the theme's black text (Hummingbird links are blue) so the
   thumb's currentColor-based border stays black (width 0), matching live. */
#main .images-container a,
#main .elevatezoom-gallery { color: #000; }
#main .additional-image-slider .thumb-container .thumb:hover { border-color: #f9ba48; }
#main .scroll-box-arrows { display: none; }

/* ================= TITLE ================= */
#main .productpage_title {
  margin: 0 0 15px;
  padding: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  color: #000;
  text-transform: capitalize;
}

/* ================= INFO COLUMN ================= */
#main .product-information { font-size: 13px; color: #000; }
#main .product-information p { margin: 0; font-size: 13px; color: #808080; line-height: 24px; }
#main .delivery-label { font-size: 0.8125rem; font-weight: 600; color: #878787; line-height: 24px; }

/* ---- short description ---- */
#main [id^="product-description-short-"] { color: #000; font-size: 13px; line-height: 24px; }

/* ================= PRICES ================= */
#main .product-prices { margin: 0.75rem 0 1.25rem; }
#main .product-prices div { margin-bottom: 6px; font-size: 24px; font-weight: 600; display: inline-block; }
/* .product-price is the .h5 wrapper around .current-price; live gives it 5px top
   padding + 1.1 line-height (the extra 5px the info column needs to match live). */
#main .product-prices .product-price { display: inline-block; line-height: 1.1; padding-top: 5px; }
#main .product-prices .current-price { display: inline-block; }
#main .current-price-value { color: #000; line-height: 1.1; }
#main .product-prices .tax-shipping-delivery-label {
  font-size: 0.8125rem;
  color: #878787;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 6px;
  line-height: 24px;
}
#main .has-discount .discount {
  background: #d13925 none repeat scroll 0 0;
  color: #000;
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  margin-left: 10px;
  margin-right: 10px;
  padding: 5px 8px;
  text-transform: uppercase;
  vertical-align: middle;
}
#main .product-discount { color: #aaaaaa; }
#main .product-discount .regular-price { text-decoration: line-through; font-weight: 600; margin: 0 5px; font-size: 20px; }

/* ================= ACTIONS / ADD TO CART ================= */
#main .product-actions .control-label,
#main .product-add-to-cart .control-label {
  display: block;
  float: left;
  width: 100px;
  margin: 8px 20px 8px 0;
  color: #000;
  font-weight: 600;
  font-size: 13px;
  line-height: 24px;
}
/* empty .product-discounts keeps its 1.5rem bottom margin (as on live) -> the 24px
   gap between the short description and the add-to-cart block */
#main .product-discounts { margin-bottom: 1.5rem; }
#main .product-quantity .qty { float: left; width: 80px; margin: 0 0 8px; }
#main .product-quantity #quantity_wanted {
  color: #414141;
  background-color: #fff;
  height: 38px;
  width: 3rem;
  padding: 5px 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  display: block;
  align-items: normal;
}
#main .product-quantity .add { float: left; width: 100%; margin: 20px 0 10px; }
#main .btn-primary,
#main .add-to-cart {
  background: #d13925 none repeat scroll 0 0;
  border: 1px solid #d13925;
  color: #fff;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.7px;
  padding: 6px 20px 5px;
  border-radius: 5px;
  display: inline-block;
  justify-content: normal;
  align-items: normal;
  gap: normal;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
#main .product-actions .add-to-cart .material-icons { font-size: 20px; margin: -5px 5px 0 0; line-height: inherit; }
#main #product-availability {
  display: inline-block;
  vertical-align: middle;
  font-weight: 700;
  margin-top: 20px;
  width: 100%;
  float: left;
}

/* ---- social sharing (ps_sharebuttons via displayProductAdditionalInfo) ---- */
#main .social-sharing { width: 100%; clear: both; margin-top: 15px; }
#main .social-sharing ul { margin: 0; padding: 0; list-style: none; }
#main .social-sharing span { display: none; }
#main .social-sharing li {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  display: inline-block;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: 30px 25px;
  background-position: 2px 4px;
  cursor: pointer;
  margin-right: 4px;
  border: 1px solid #f0f0f0;
}
#main .social-sharing li a { display: block; width: 100%; height: 100%; white-space: nowrap; text-indent: 100%; overflow: hidden; }

/* The li geometry above is CORRECT for Bergsma — it matches the live bundle exactly
   (.social-sharing li{height:35px;width:35px;border-radius:50%;background-color:#FFF;
   background-size:30px 25px;background-position:2px 4px}), so ps_sharebuttons keeps its
   circular-chip look. This module IS legitimately part of Bergsma: displayProductAdditionalInfo
   -> 1 ps_sharebuttons, 2 ps_emailalerts, 3 mollie.

   REMOVED 2026-07-29 — the per-network icon overrides:
       .facebook { background-image: url(../img/megnor/facebook.png?v=2) }
       .twitter  { background-image: url(../img/megnor/twitter.png?v=2) }
   Those two PNGs were ammusic's artwork and were deleted with the rest of it, leaving two
   broken URLs. They are NOT replaced with Bergsma's originals because Bergsma's own bundle drew
   these from a SPRITE, url(../img/megnor/social.png) with per-network offsets, and social.png
   IS MISSING FROM THE PULL. Inventing a substitute icon set would be fabricating the design.
   With no override, ps_sharebuttons' own module CSS/icons apply.
   >>> ACTION FOR DANI: supply img/megnor/social.png from the server (or approve using the
   module's stock icons). Until then these chips may render without a glyph. <<<
   .pinterest is kept: its SVG is a local file that exists in this theme. */
#main .social-sharing .pinterest { background-image: url(../css/7988be8b63edf9c4accebf94d5db7927.svg); }

/* ================= TABS (product-tabcontent) ================= */
#main .product-tabcontent {
  float: left;
  clear: left;
  width: 78%;
  margin: 0 0 30px;
}
#main .product-tabcontent .tabs { margin: 0; width: 100%; }
#main .tabs .nav-tabs {
  border: 0;
  border-bottom: 0;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
#main .nav-tabs::after { content: ""; display: table; clear: both; }
#main .nav-tabs .nav-item { float: left; margin-bottom: 0; list-style: none; }
#main .product-tabcontent .nav-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #000;
  margin: 0 10px -1px 0;
  padding: 15px 20px;
  line-height: 20px;
  letter-spacing: 1px;
  text-transform: capitalize;
  border: 0;
  border-right: none;
  border-left: none;
  border-top: none;
  border-radius: 5px 5px 0 0;
  background: transparent;
}
#main .product-tabcontent .nav-link.active { background: #f5f5f5; color: #000; }

/* tab panes: default-active shown, others hidden (data-toggle="tab" is BS4, no BS5 JS) */
#main .tab-content > .tab-pane { display: none; opacity: 1; }
#main .tab-content > .active { display: block; }
#main .product-tabcontent .tabs .tab-pane {
  width: 100%;
  float: left;
  margin: 0;
  padding: 20px 20px 10px;
  border: 1px solid #f5f5f5;
  background: #f5f5f5;
  border-radius: 0 0 5px 5px;
}
#main .product-tabcontent .tabs .tab-pane .product-description p { font-size: 13px; line-height: 24px; color: #808080; }
/* CORRECTED: live does NOT restore list markers here. Its bundle carries a global
   `ul{list-style:none;padding-left:0}` reset, and its rendered description lists show no
   markers and no indent (measured: ul padding 0px on live vs 40px here). The earlier rule was
   an invention justified by "Hummingbird resets ol/ul" — but live resets them too, so adding
   markers moved AWAY from the reference. Live's values restated: */
#main .product-description ol,
#main .product-description ul { list-style: none; padding-left: 0; margin: 0 0 16px; }
#main .product-description li { display: list-item; list-style: inherit; }

/* ================= ACCESSORIES / DATA SHEET (below, not primary-measured) ================= */
#main .product-features { margin-top: 1.25rem; margin-left: 5px; }
#main .tab-main-title {
  float: left;
  position: relative;
  text-transform: capitalize;
  width: 100%;
  border-bottom: 2px solid #f0f0f0;
  margin-bottom: 60px;
}

/* =========================================================================
   CATEGORY / PRODUCT-LISTING PAGE
   Ported 1:1 from the old ammusic child + TemplateMela PRS080193_06 parent
   (PS 1.7.8.3, BS4) compiled theme.css + custom.css. Everything is scoped
   under #category (the category-page <body> id) / #js-product-list / .products
   and the card under .product-miniature so it cannot regress the already-PASS
   header / navbar / footer / product page (which live on other bodies/scopes).
   Layout matches live: layout-both-columns => #left-column (facets) col-lg-3 25%,
   #center-column col-lg-6 50%, empty #right-column 25%. Target computed values
   verified against live (https://ammusic.nl/nl/22-harmonie) at 1600px.
   ========================================================================= */

/* REMOVED 2026-07-29 — BS4-alpha responsive-visibility shim + .pull-xs-right, scoped to
   #category. The listing markup was swept to the real Bootstrap 5 d-none/d-*-block family and
   .float-end, so Bootstrap now provides these. The old comment claimed "BS5 has none", which is
   the wrong conclusion: BS5 has equivalents under different names, and re-implementing the dead
   names kept dead classes alive in the markup. */

/* ---- content container: match live width (1400 @>=1450), like the product page ---- */
body#category .columns-container.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 544px)  { body#category .columns-container.container { max-width: 576px; } }
@media (min-width: 768px)  { body#category .columns-container.container { max-width: 720px; } }
@media (min-width: 992px)  { body#category .columns-container.container { max-width: 940px; } }
@media (min-width: 1200px) { body#category .columns-container.container { max-width: 1170px; } }
@media (min-width: 1450px) { body#category .columns-container.container { max-width: 1400px; } }

/* ---- columns: match live float layout (container 1400, left 270, gap 31, content 1099) ---- */
#category .columns-container.container > .row {
  display: block;
  margin: 0;
}
#category .columns-container.container > .row::after { content: ""; display: table; clear: both; }
#category #left-column {
  float: left;
  width: 19.3%;          /* live: #left-column{width:19.3%} — see the COLUMN LADDER note below */
  max-width: none;
  padding: 0;
  margin: 0;
}
#category #center-column {
  float: left;
  width: 78.5%;          /* live's content wrapper; NOT a fixed 1099px */
  max-width: none;
  margin: 0;             /* live's content wrapper has NO left margin at any width */
  /* live #content-wrapper carries padding-bottom:30px (space below the product
     list before the footer); reproduce it so the content wrapper (#wrapper)
     matches live's extent/bottom exactly. */
  padding: 0 0 30px;
}
#category #right-column { display: none; }

/* base listing font (Poppins 13) for the WHOLE listing content incl. left column facets */
#category .columns-container {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  line-height: 24px;
  letter-spacing: 0.5px;
  color: #000;
}
#category .columns-container ul { list-style: none; padding-left: 0; margin: 0; }
#category .columns-container a { text-decoration: none; }

/* ================= BLOCK-CATEGORY HEADER ================= */
#category #js-product-list-header .block-category {
  width: 100%;
  float: left;
  /* live: 30px gap below the category title block (block-category margin-bottom).
     Match it so the product rows align vertically with live and the content
     wrapper (#wrapper) height matches live. */
  margin-bottom: 30px;
  background: none;
  box-shadow: none;
  border: none;
  padding: 0;
}
#category #js-product-list-header .block-category h1.h1 {
  margin: 0 0 20px;
  font: 500 18px/22px "Poppins", sans-serif;
  color: #313131;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#category #js-product-list-header .block-category .block-category-inner { float: left; width: 100%; }
#category #js-product-list-header #category-description,
#category #js-product-list-header #category-description p {
  font-size: 12px;
  letter-spacing: 0.6px;
  line-height: 24px;
  margin: 0;
  color: #808080;
}

/* ================= PRODUCTS SELECTION (count + sort + filter toggle) ================= */
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-selection {
  clear: both;
  display: inline-block;
  padding: 10px;
  width: 100%;
  margin-bottom: 0;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-selection > div { padding: 0; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-selection .total-products { width: 50%; float: left; padding: 0; position: relative; top: 0; left: 0; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-selection .total-products p { font-size: 13px; margin: 0 0 10px; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-selection .display { float: left; margin: 0 15px 0 0; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-selection .display li { float: left; text-align: center; padding: 0; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-selection .display li#grid { margin: 0 15px 0 0; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-selection .display li a { color: #929292; font-size: 0; line-height: 14px; cursor: pointer; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-selection .display li#grid a {
  background: url(../img/megnor/sprite.png) no-repeat scroll -5px -169px transparent;
  height: 20px; width: 20px; float: left;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-selection .display li#list a {
  background: url(../img/megnor/sprite.png) no-repeat scroll -41px -169px transparent;
  height: 20px; width: 20px; float: right;
}
/* selected/hover icon states + toggle behaviour (old theme bindGrid, ported in custom.js) */
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-selection .display li#grid:hover a,
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-selection .display li#grid.selected a { background-position: -5px -144px !important; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-selection .display li#list:hover a,
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-selection .display li#list.selected a { background-position: -41px -144px !important; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-selection .display li.selected a { cursor: default; }
/* sort wrapper: 33% floated right (total-products stays 50% left) — matches live */
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-selection .col-md-6:not(.total-products) { width: 33%; float: right; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-selection .col-md-6 .row { margin: 0 -20px; display: block; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-selection .col-md-6 .row::after { content: ""; display: table; clear: both; }

/* sort label + dropdown */
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-selection .sort-by {
  padding: 0 10px;
  text-align: right;
  white-space: nowrap;
  font-size: 13px;
  float: left;
  width: auto;
  color: #000;
  position: relative;
  top: 0;
  left: 0;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-sort-order {
  color: #878787;
  padding: 0;
  width: 293px;
  float: right;
  position: relative;
  top: 0;
  left: 0;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-sort-order .select-title {
  font-size: 13px;
  background: #fff none repeat scroll 0 0;
  border: 1px solid #f0f0f0;
  color: #000 !important;
  cursor: pointer;
  display: inline-block;
  margin: -5px 0 0;
  padding: 5px 3px 5px 0.625rem;
  width: 100%;
  text-align: left;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-sort-order .select-title:hover { color: #d13925 !important; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-sort-order .select-title .material-icons { float: right; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-sort-order .dropdown-menu {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #f0f0f0;
  left: 0;
  margin: -1px 0 0;
  padding: 0;
  width: 100%;
  z-index: 99;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-sort-order .select-list {
  display: block;
  color: #000;
  padding: 5px 15px;
  font-size: 13px;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-sort-order .select-list:hover { background: #d13925; color: #fff; text-decoration: none; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products-selection .filter-button { float: right; padding: 0; width: auto; }

/* ================= PRODUCTS GRID ================= */
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) #js-product-list .products {
  margin: 0 0 15px;
  /* CORRECTED: was `width: calc(100% + 20px)`. Live gets the grid's 20px bleed from the
     WRAPPER (`#spe_res{margin:0 -10px}`) and leaves the inner .products at plain width —
     live's own rule is `#products .products{margin-bottom:15px;position:relative;float:left;
     width:100%}`. Once #spe_res was ported, the calc here added the 20px a SECOND time:
     .product_list came out 1139px against live's 1119px and every card was 284.75 instead of
     279.75, so columns 2-4 drifted 5/10/15px right of live (visible in the pixel diff as
     doubled product titles, while column 1 aligned). */
  width: 100%;
  gap: normal;
  position: relative;
  float: left;
  display: block;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product_list {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  width: 100%;
  gap: normal;
  position: relative;
  top: 0;
  left: 0;
  display: block;            /* override Hummingbird's .grid { display:grid } */
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product_list li.product_item {
  width: 25%;
  height: auto;               /* live declares NO height on the card (verified by enumerating
                                 every CSS rule matching .product_item on live: only padding).
                                 The old 485px here was invented and made every card 53px too tall. */
  float: left;
  margin: 0;
  padding: 0 10px 30px;
  position: relative;
  top: 0;
  left: 0;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product-miniature { margin: 0 auto 20px; position: relative; top: 0; left: 0; }

/* ---- thumbnail / image ---- */
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .thumbnail-container {
  margin-bottom: 15px;
  position: relative;
  border-right: 1px solid #f0f0f0;
  height: auto;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product_list li:nth-child(4n+0).product_item .thumbnail-container { border-right: 1px solid #f0f0f0; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product-thumbnail {
  display: block;
  background: #fff;
  text-align: center;
  border-radius: 5px;
  color: #000;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product-thumbnail img { display: block; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products img {
  max-width: 100%;
  position: relative;
  margin: 0 auto;
  border-radius: 5px;
  height: auto;
}

/* ---- flags (hidden at rest on live: opacity 0) ---- */
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product-flags { margin: 0; opacity: 0; position: static; top: auto; left: auto; width: 100%; list-style: none; padding: 0; display: block; gap: normal; align-items: normal; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product-flags li {
  position: absolute;
  font-size: 11px;
  color: #000;
  letter-spacing: 0.8px;
  text-transform: capitalize;
  font-weight: 400;
  line-height: normal;
  padding: 0;
  opacity: 1;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product-flags .new { top: 10px; left: 10px; right: auto; bottom: auto; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product-flags .discount_type_flag {
  top: 10px; left: 10px;
  background: #d13925;
  color: #000;
  padding: 1px 5px;
  border-radius: 5px;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product-flags .discount { display: none; }

/* ---- description / title / price ---- */
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product_list li .product-description { min-height: 117px; overflow: hidden; position: relative; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product-title,
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) #products .product-title {
  text-transform: capitalize;
  margin: 14px 0 12px;
  display: block;
  float: left;
  position: static;
  width: auto;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-align: left;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .product-title a {
  color: #707070;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.9px;
  line-height: 20px;
  text-align: left;
  text-transform: none;
  float: left;
  width: auto;
  white-space: normal;
  text-decoration: none;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .product-title a:hover { color: #000; }

:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product-price-and-shipping {
  color: #000;
  font-size: 14px;
  font-weight: 700;
  clear: both;
  padding: 5px 0 0 0;
  text-align: left;
/* live: category price row pads 5px, but search/best-sales/etc pad 10px (both measured) */
:is(#search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product-price-and-shipping { padding: 10px 0 0; }
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product-price-and-shipping .price {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.6px;
  font-weight: 600;
  color: #000;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product-price-and-shipping .regular-price {
  font-size: 13px;
  line-height: 24px;
  letter-spacing: 0.8px;
  font-weight: 500;
  color: #c8c8c8;
  margin: 0;
  text-decoration: line-through;
  display: inline-block;
  vertical-align: top;
}

/* short description + variant hints hidden in the grid (as on live) */
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product_list li .product-detail { display: none; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .highlighted-informations { display: none; }

/* ---- actions ---- */
/* actions hidden at rest (opacity 0 + slid left), revealed on card hover — like live */
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product-actions-main {
  position: static;
  float: left;
  width: 100%;
  opacity: 0;
  transform: translateX(-150px);
  transition: 0.5s;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product_list li:hover .product-actions-main { opacity: 1; transform: none; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product_list li:hover .product-price-and-shipping { opacity: 0.6; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product-miniature .add-to-cart {
  display: inline-block;
  width: auto;
  margin: 0;
  font-size: 12px;
  padding: 5px 15px 5px 35px;
  background: #d13925 url(../img/megnor/sprite-1.png) no-repeat scroll 10px -20px;
  border: 1px solid #d13925;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.7px;
  line-height: 24px;
  border-radius: 5px;
  cursor: pointer;
}
/* the add-to-cart form shrinks to its button (live: display:inline-block) so
   the quick-view eye sits BESIDE the button instead of wrapping below it */
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product-actions-main form,
#index .featured-products .product-actions-main form,
#product .productscategory-products .product-actions-main form,
#product .product-accessories .product-actions-main form,
#product .crosssell-products .product-actions-main form { display: inline-block; vertical-align: middle; }

/* quick-view "eye" button — live shows it beside ADD TO CART on hover (35x35,
   sprite eye on #d13925, radius 5) on ALL product cards: listings, home
   featured, and the product-page carousels */
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product_list .quick-view,
#index .featured-products .quick-view,
#product .productscategory-products .quick-view,
#product .product-accessories .quick-view {
  text-align: center;
  font-size: 0;
  width: 35px;
  height: 35px;
  background: #d13925 url(../img/megnor/sprite-1.png) no-repeat scroll center 12px;
  float: none;
  display: inline-block;
  vertical-align: middle;
  border-radius: 5px;
  border: 0;              /* it's a <button> now — strip UA chrome */
  padding: 0;
  cursor: pointer;
}

/* ---- LIST VIEW (Grid/List toggle; classes swapped by custom.js bindGrid port).
   Live-measured in list mode: li full-width (pad 0 10), thumb 259px floated
   left (no grid borders), description floats beside (pad-left 20, left-
   aligned), short-description block visible (12px black), title 18px,
   price 14px full-width left, actions always visible (no hover reveal). ---- */
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product_list.list > li.product_item {
  width: 100%; float: left; text-align: left; padding: 0 10px;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product_list.list .thumbnail-container {
  width: 259px; float: left; margin: 0; padding: 0; border: none !important;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product_list.list .product-description {
  float: left; width: calc(100% - 279px); text-align: left; padding: 0 0 0 20px; min-height: 0;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product_list.list .product-title,
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product_list.list .product-title a {
  text-align: left; font-size: 18px;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product_list.list .product-price-and-shipping {
  text-align: left; float: none; width: 100%; font-size: 14px;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product_list.list li .product-detail {
  display: block; font-size: 12px; font-weight: 400; color: #000;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product_list.list .product-actions-main {
  opacity: 1; transform: none;
}

/* =====================================================================
 * QUICKVIEW MODAL — live layout (live-measured at 1600: dialog 1024px,
 * content pad 0/radius 0, body pad 26, cover 452, h1 20/600 capitalize,
 * price 24/600 + 13px #878787 tax label, desc 13px #808080 lh24,
 * cart btn #d13925 13px pad 6/20/5 r5, socials below the button).
 * Child template: templates/catalog/_partials/quickview.tpl
 * ===================================================================== */
.modal.quickview .quickview__dialog { max-width: 1024px; width: 1024px; }
.modal.quickview .quickview__content { padding: 0; border-radius: 0; border: 0; }
.modal.quickview .quickview__header { border: 0; padding: 16px 16px 0; }
.modal.quickview .quickview__body { padding: 15px 26px 40px; }
.modal.quickview .quickview__body .row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.modal.quickview .quickview__body [class*="col-"] { padding: 0 15px; width: 50%; }
.modal.quickview .qv-cover img { width: 100%; max-width: 100%; height: auto; display: block; }
.modal.quickview .qv-thumbs { list-style: none; margin: 15px 0 0; padding: 0; display: flex; gap: 10px; }
.modal.quickview .qv-thumbs img { width: 60px; height: auto; border: 1px solid #f0f0f0; }
.modal.quickview .qv-name {
  font-size: 20px; font-weight: 600; color: #000;
  text-transform: capitalize; margin: 0 0 15px; line-height: 1.1;
}
.modal.quickview .product-prices { margin: 0 0 10px; }
.modal.quickview .product-prices .price,
.modal.quickview .current-price { font-size: 24px; font-weight: 600; color: #000; }
.modal.quickview .tax-shipping-delivery-label,
.modal.quickview .tax-label { font-size: 13px; color: #878787; }
.modal.quickview .qv-description { font-size: 13px; color: #808080; line-height: 24px; margin: 0 0 15px; }
.modal.quickview .add-to-cart {
  background: #d13925; border: 1px solid #d13925; color: #fff;
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.7px;
  padding: 6px 20px 5px; border-radius: 5px; cursor: pointer;
}
.modal.quickview .qv-social { margin: 30px 0 0; }
.modal.quickview .qv-social ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
/* breakpoint normalised 1100px -> 1199px on 2026-07-29: 1100 belongs to neither
   theme (flagged in REBUILD-TODO). Live's step is 1199. Note this rule is inert
   in practice — live hides the quickview outright (`.quick-view{display:none}`,
   ported), so the dialog never renders; it is kept only so the modal degrades
   sanely if quickview is ever re-enabled. */
@media (max-width: 1199px) { .modal.quickview .quickview__dialog { max-width: calc(100vw - 40px); width: auto; } }
@media (max-width: 767px) { .modal.quickview .quickview__body [class*="col-"] { width: 100%; } }

/* ================= FACETS SIDEBAR ================= */
#category #search_filters_wrapper.block { border: 1px solid rgba(0, 157, 224, 0.5);   /* live cascade ends here (Verfspot shared-file override beats the theme's 3px #d13925) */ }
#category #search_filters {
  background: transparent;
  padding: 15px 10px;
  margin-bottom: 0;
  box-shadow: none;
}
#category #search_filters > .text-uppercase.h6 {
  color: #000;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0 0 8px;
}
#category #search_filters .facet { padding-top: 0.625rem; overflow: hidden; }
#category #search_filters .facet .collapse { display: block; }
#category #search_filters .facet .facet-title {
  color: #000;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.1;
  margin: 5px 0 10px;
}
#category #search_filters .facet ul { margin: 0 0 16px; padding: 0; list-style: none; }
#category #search_filters .facet .facet-label {
  margin-bottom: 0;
  font-weight: normal;
  text-align: left;
  line-height: normal;
}
#category #search_filters .facet .facet-label a {
  margin-top: 0;
  display: inline-block;
  font-size: 13px;
  color: #444;
}
#category #search_filters .facet .facet-label a .magnitude { color: #444; }
/* custom checkbox: live hides the native input + check icon; a 15x15 bordered span is the box */
#category #search_filters .custom-checkbox { display: inline; width: auto; position: relative; }
#category #search_filters .custom-checkbox input { opacity: 0; position: absolute; width: 13px; height: 13px; margin: 4px 0 0; cursor: pointer; }
#category #search_filters .custom-checkbox .material-icons { display: none; }
#category #search_filters .facet-label .ps-shown-by-js {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 3px 0 0;
  vertical-align: middle;
  border: 1px solid #bbb;
  box-sizing: border-box;
  background: transparent;
}
#category #search_filters .js-search-filters-clear-all {
  background: none;
  border: 0;
  color: #000;
  font-weight: normal;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
  font-size: 13px;
  text-transform: capitalize;
}
#category #search_filters .navbar-toggler .material-icons { color: #000; }

/* ================= PAGINATION ================= */
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .pagination { display: inline-block; width: 100%; margin: 10px 0 0; padding-left: 0; font-size: 13px; color: #000; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .pagination > div { display: inline; padding: 0; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .pagination .page-list { text-align: right; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .pagination .col-md-4 { width: 33.3333%; float: left; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .pagination .col-md-8 { width: 66.6666%; float: left; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .pagination > div:first-child { line-height: 2.5rem; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .pagination .page-list {
  margin-bottom: 0;
  float: right;
  padding-left: 0;
  list-style: none;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .pagination .page-list li {
  background: #fff;
  display: inline-block;
  float: left;
  margin: 0 0 0 4px;
  padding: 0;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .pagination a {
  background: #1f1f1f none repeat scroll 0 0;
  border: 1px solid #1f1f1f;
  color: #fff;
  display: block;
  font-size: 14px;
  font-weight: 400;
  height: 35px;
  width: 35px;
  margin: 0;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .pagination .previous,
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .pagination .next { font-size: 0; padding: 4px; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .pagination a .material-icons { font-size: 24px; margin-left: -2px; font-weight: 400; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .pagination .disabled { cursor: not-allowed; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .pagination .spacer { display: inline-block; }
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .pagination .current a,
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .pagination a:hover { background-color: #d13925; border-color: #d13925; text-decoration: none; color: #fff; }

/* ================= ACTIVE FILTERS ================= */
#category #js-active-search-filters.hide { display: none; }
#category #js-active-search-filters.active_filters {
  background: #dededd;
  padding: 10px 30px 0;
  margin-bottom: 20px;
}
#category #js-active-search-filters .filter-block {
  box-shadow: 2px 2px 11px 0 rgba(0, 0, 0, 0.1);
  color: #414141;
  margin-right: 10px;
  margin-bottom: 10px;
  background: #fff;
  padding: 10px;
  display: inline-block;
  font-size: 13px;
}

/* =========================================================================
   HOMEPAGE  (added by the homepage port)
   All rules scoped under body#index so the 5 already-PASS pages
   (header / navbar / footer / product / category) cannot regress.
   Live reference (viewport 1600): hero .topdiv 1600x418; body = centered 1400
   container -> left column 270 + 30 gutter + main 1099.
   ========================================================================= */

#index #content {
  display: block;               /* Hummingbird sets #content{display:grid}; its row-gap
                                   inserts a 40px gap between the hero and the body — the old
                                   theme stacked them as blocks, so restore block flow. */
  font: 400 13px/24px "Poppins", sans-serif;   /* match live's exact family stack */
  letter-spacing: 0.5px;
  color: #000;
}
#index #content a { text-decoration: none; }
#index #content ul { list-style: none; margin: 0; padding: 0; }
/* Hummingbird .btn is inline-flex (gap/justify/align); the old theme's buttons are not */
#index #content .btn { gap: normal; justify-content: normal; align-items: normal; }

/* ---- 1. HERO SLIDER (full-width single static banner via ps_imageslider) ---- */
#index .home-hero { position: relative; width: 100%; margin: 0; }
#index .home-hero .home-hero-inner,
#index .home-hero .home-hero-slide { display: block; }
#index .home-hero .home-hero-slide a { display: inline; color: #000; }   /* live: li>a is inline, img block */
#index .home-hero img { display: block; width: 100%; height: auto; margin: 0; border: 0; color: #000; }

/* ---- CAROUSEL mode (ps_imageslider's own ResponsiveSlides, enabled 2026-07-29) ----
   The module ships css/homeslider.css and registers it on every front page, which brings
   `.homeslider-container{float:left;width:100%;margin-bottom:50px}` — the 50px gap is wrong under
   a full-bleed hero, and the float is redundant inside .topdiv. Neutralise just those. */
#index .home-hero .homeslider-container { float: none; margin-bottom: 0; width: 100%; }
/* ResponsiveSlides absolutely-positions every slide except the active one and animates opacity.
   The module's own `.homeslider li{position:absolute}` handles that, but it needs the generated
   `homeslider` namespace class on the <ul>; keep our own rule from forcing the li's back into
   flow, or all slides would stack again. */
#index .home-hero ul.rslides { position: relative; list-style: none; margin: 0; padding: 0; overflow: hidden; }
#index .home-hero ul.rslides > li { margin: 0; }
/* Prev/next arrows: the module points at its own homeslider.gif (present, 351 B) and hides the
   label with text-indent. Lift them above the image and give a usable hit area. */
/* Carousel states, driven by assets/js/custom.js (the module's own ResponsiveSlides never loads —
   see the comment on the carousel block in custom.js). The ACTIVE slide stays in flow so the
   container keeps its height; the others are overlaid and faded out. Only applied once the JS has
   added .bergsma-carousel, so a single-slide hero is untouched. */
#index .home-hero .bergsma-carousel { position: relative; }
#index .home-hero .bergsma-carousel ul.rslides { position: relative; min-height: 1px; }
#index .home-hero .bergsma-carousel .home-hero-slide {
  position: absolute; top: 0; left: 0; right: 0;
  opacity: 0; pointer-events: none; transition: opacity .5s ease-in-out;
}
#index .home-hero .bergsma-carousel .home-hero-slide.is-active {
  position: relative; opacity: 1; pointer-events: auto;
}
#index .home-hero .homeslider_nav { z-index: 4; }
#index .home-hero .homeslider_nav:focus-visible { outline: 2px solid #d13925; outline-offset: 2px; }
/* Caption only appears when a description was entered in the BO (see slider.tpl). */
#index .home-hero .caption { z-index: 3; }
/* ---- quick-view button: live hid it OUTRIGHT ----
   The live bundle styles it as a 35x35 red button and then, in a later rule, sets
   `.products .product_list .quick-view{display:none}` with no rule ever setting it back to
   visible — so it never appeared on the live shop. That selector needs a `.product_list`
   ancestor, which our featured-products / cross-selling blocks do not have, so the button
   leaked through as a 16x6 unstyled stub that still opened the quickview modal (reported on
   the empty cart page's "Popular Products", staging 2026-07-29). Hide it wherever it renders. */
.product-miniature .quick-view,
.products .quick-view,
.featured-products .quick-view,
#cart .quick-view { display: none; }

/* Defensive, unscoped: a slide image is 1903px natural, so if it ever renders outside
   `#index .home-hero` it pushes the whole document to 1903px wide at every viewport
   (observed on staging 2026-07-29 before the .home-hero wrapper was added). */
.home-hero-inner img,
.home-hero-slide img,
.topdiv img { max-width: 100%; height: auto; }


/* ---- #index #left-column margins: LIVE's values, verbatim behaviour ----
   Checked against the live compiled bundle rather than guessed. Live declares
   `#index #left-column{margin:30px 30px 0 0}` and then, LATER in the same file,
   `#index #left-column{margin:0 0}` — equal specificity, so the second wins and live had NO gap
   under the hero at >=1200px. It then re-introduces a top gap only in the 1200-down range:
     @media(max-width:1199px){ #index #left-column{margin:30px 18px 0} }
     @media (max-width:991px){ #index #left-column{margin:0 0} }
   The child theme carried NONE of these, so the 992-1199px gap was missing. Resolved values below.
   NOTE for the record: live has no `.homeslider-container` rule at all (it ran tm_imageslider, not
   ps_imageslider), so the 50px margin-bottom on that container is PrestaShop's module default and
   NOT a live value — it stays overridden to 0, which is what matches live. */
#index #left-column { margin: 0; }
@media (max-width: 1199px) { #index #left-column { margin: 30px 18px 0; } }
@media (max-width: 991px)  { #index #left-column { margin: 0; } }

/* ---- 2-COLUMN BODY (exact live fractional widths so element pixel-dims match) ---- */
#index .home-container { max-width: 1400px; margin: 0 auto; padding: 0; }
#index .home-container::after { content: ""; display: table; clear: both; }
#index .home-row { display: flex; align-items: flex-start; }
#index .home-left-column { width: 270.188px; flex: 0 0 270.188px; margin-right: 30px; padding-top: 30px; }
#index .home-main-column { width: 1099px; flex: 0 0 1099px; min-width: 0; }

/* ================= 2a/2b. LEFT BANNERS ================= */
#index .home-left-banner { position: relative; margin-bottom: 30px; border-radius: 5px; overflow: hidden; }
#index .home-left-banner ul,
#index .home-left-banner li { display: block; }
#index .home-left-banner a { display: block; position: relative; top: 0; left: 0; line-height: 24px; color: #444; }
#index .home-left-banner img {
  display: inline;
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  line-height: 24px;
  color: #444;
}
/* live block heights: catalogus 394.5 (img 386.5 + 8), herdenk 410.5 (img + 24) */
#index #tmleftbanner  { height: auto;   /* live declares none — the banner image drives it */ }
#index #tmleftbanner1 { height: auto;   /* live declares none — the banner image drives it */ position: static; }

/* ================= 2c. SERVICE BLOCK (Klantenservice / Waarom Bergsma en de Boer?) ================= */

/* ================= 3a. CATEGORY CAROUSEL BAR (tm_categorylist) ================= */
#index .tmcategorylist { background: #d13925; margin-top: 30px; border-radius: 0; position: relative; }
#index .tmcategory-container { background: #d13925; position: relative; padding: 0; overflow: hidden; height: 118px; }
#index .tmcat-head { float: left; margin-left: -10px; }
#index .tmcategory-container h2.products-section-title {
  float: left; margin: 0;
  font-size: 16px; font-weight: 600; letter-spacing: 1px; line-height: 18px;
  text-transform: capitalize; text-align: left; color: #fff;
  padding: 22px 36px;
}
#index .tmcategory-container .menu-title {
  float: left;
  font-size: 12px; font-weight: 400; line-height: 24px; letter-spacing: 0.5px;
  text-transform: capitalize; color: #A5A5A5;
  padding-top: 22px;
}
#index .tmcategory-container .customNavigation { position: absolute; right: 20px; top: 15px; }
#index .tmcategory-container .customNavigation .btn {
  display: inline-block; position: relative; width: 25px; height: 30px;
  border-radius: 5px; color: #fff; background: transparent; border: 0; cursor: pointer;
}
#index .tmcategory-container .customNavigation .cat_prev::before { content: "\2039"; font-size: 26px; line-height: 30px; }
#index .tmcategory-container .customNavigation .cat_next::before { content: "\203A"; font-size: 26px; line-height: 30px; }
#index #content .tmcat-list {
  display: flex; align-items: flex-start; justify-content: flex-start;
  clear: left; padding: 0; margin: 0 0 0 -10px; height: 54px; overflow: hidden;
}
#index .tmcat-list .tmcat-item { flex: 0 0 187px; text-align: center; }
#index .tmcat-list .cate-heading a {
  display: inline;
  font-size: 14px; font-weight: 500; letter-spacing: 1px; line-height: 24px;
  text-transform: capitalize; text-align: center; color: #207AB3;
}
/* the last item (Melody Perc Ensemble) wraps to 2 lines on live (owl clips its cell) */
#index .tmcat-list .tmcat-item:last-child .cate-heading a { display: inline-block; max-width: 105px; white-space: normal; }

/* ================= 3b. THIN EMPTY STRIP (tm_cms3block) ================= */
#index #tmcms3_block { padding: 30px 0; position: relative; }
#index #tmcms3_block .cms_content { line-height: 24px; min-height: 24px; }
#index #tmcms3_block .cms_content a { display: inline; }

/* ================= 3c. FEATURED PRODUCTS (ps_featuredproducts -> "Uitgelichte producten") ==== */
#index .featured-products { position: relative; }
#index .featured-products .products-section-title {
  font-size: 20px; font-weight: 500; letter-spacing: 1px; line-height: 36px;
  text-transform: capitalize; text-align: left; color: #000; margin: 0 0 10px;
}
#index .featured-products .products {
  /* live's own rule is `margin:0;position:relative;padding:0` — the 20px bleed comes from the
     #spe_res wrapper (now reproduced in ps_featuredproducts.tpl), not from this element. */
  margin: 0; padding: 0; width: 100%; float: left; display: block; position: relative;
}
#index .featured-products .product_list {
  margin: 0; padding: 0; list-style: none; float: left; width: 100%; display: block;
  gap: normal; position: relative; top: 0; left: 0;
}
#index .featured-products .product_list li.product_item {
  /* live's HOME cards have NO bottom padding (`padding: 0px 10px`), unlike the category grid's
     `0 10px 30px`. That 30px was 30 of the 56px height gap (live 395 vs staged 451). */
  width: 25%; height: auto; float: left; margin: 0; padding: 0 10px; position: relative;
}
#index .featured-products .product-miniature { margin: 0 auto 20px; position: relative; }
#index .featured-products .thumbnail-container {
  margin-bottom: 15px; position: relative; border-right: 1px solid #f0f0f0; height: auto;
}
#index .featured-products .product-thumbnail {
  display: block; background: #fff; text-align: center; border-radius: 5px; color: #000;
}
#index .featured-products .product-thumbnail img,
#index .featured-products img {
  display: block; max-width: 100%; margin: 0 auto; border-radius: 5px; height: auto; position: relative;
}
#index .featured-products .product-flags {
  margin: 0; opacity: 0; position: static; width: 100%; list-style: none; padding: 0; display: block;
}
#index .featured-products .product-flags li {
  position: absolute; font-size: 11px; color: #000; letter-spacing: 0.8px;
  text-transform: capitalize; font-weight: 400; line-height: normal; padding: 0; opacity: 1;
}
/* live: `.products .product_list li .product-description{min-height:110px}` for the home grid
   (its 117px variant is #category-scoped). The 136px here was a baked measurement and made up
   the other 26px of the 56px card-height gap. */
#index .featured-products .product-description { min-height: 110px; overflow: hidden; position: relative; }
#index .featured-products .product-title {
  text-transform: capitalize; margin: 14px 0 12px; display: block; float: left;
  width: auto; font-size: 18px; font-weight: 500; line-height: 1.1; letter-spacing: 0.5px; text-align: left;
}
#index .featured-products .product-title a {
  color: #707070; font-size: 13px; font-weight: 400; letter-spacing: 0.9px; line-height: 20px;
  text-align: left; text-transform: none; float: left; width: auto; white-space: normal; text-decoration: none;
}
#index .featured-products .product-title a:hover { color: #000; }
#index .featured-products .product-price-and-shipping {
  color: #000; font-size: 14px; font-weight: 700; clear: both; padding: 10px 0 0; text-align: left;
}
#index .featured-products .product-price-and-shipping .price {
  font-size: 16px; line-height: 24px; letter-spacing: 0.6px; font-weight: 600; color: #000;
}
#index .featured-products .product-detail { display: none; }
#index .featured-products .highlighted-informations { display: none; }
#index .featured-products .product-actions-main {
  position: static; float: left; width: 100%; opacity: 0; transform: translateX(-150px); transition: 0.5s;
}
#index .featured-products .product_list li:hover .product-actions-main { opacity: 1; transform: none; }
#index .featured-products .product_list li:hover .product-price-and-shipping { opacity: 0.6; }
#index .featured-products .add-to-cart {
  display: inline-block; width: auto; margin: 0; font-size: 12px; padding: 5px 15px 5px 35px;
  background: #d13925 url(../img/megnor/sprite-1.png) no-repeat scroll 10px -20px;
  border: 1px solid #d13925; color: #fff; text-transform: uppercase; font-weight: 600;
  letter-spacing: 0.7px; line-height: 24px; border-radius: 5px; cursor: pointer;
}
/* "bekijk meer producten" button (navy, centered, below the grid — inside #feature-grid) */
#index .featured-products .feature-more,
#index .featured-products .loadmore {
  clear: both; float: none; width: 100%; height: auto; text-align: center; padding: 15px 0 29px;
  list-style: none; margin: 0;
}
#index .featured-products .btn.gridcount {
  display: inline-block; background: #d13925; color: #fff;
  border: 1px solid #d13925; border-radius: 5px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.7px; line-height: 24px;
  text-transform: uppercase; text-align: center; white-space: nowrap;
  padding: 6px 20px 5px; cursor: pointer;
}
/* live's "no more products" message — hidden until the button exhausts (JS
   shows it). Ported from the old theme's li.loadmore .tm-message. */
#index .featured-products .loadmore .tm-message {
  display: none; color: #000; font-size: 13px; line-height: 30px; cursor: pointer;
}
#index .featured-products .loadmore .tm-message i {
  vertical-align: middle; margin-right: 8px; line-height: 30px;
}
#index .featured-products .loadmore .tm-message:hover { color: #d13925; }

/* ================= 3d. VISIT-SHOP CMS BLOCK (tm_cms2block) ================= */
#index #tmcms2_block { position: relative; margin: 0.7px 0 34px; padding: 0; max-width: none; }  /* +0.7px so the storefront photo lands on live's sub-pixel row phase (avoids downscale-resampling bands) */
#index .tmcms2 { position: relative; padding-bottom: 8px; }  /* live block = img 262.75 + 8 = 270.75 (exact) */
#index .tmcms2 .cms_img { line-height: 24px; }   /* img inherits line-height 24 to match live */
#index .tmcms2 .cms_img img { display: inline; width: 1098.95px; height: auto; }  /* match live img width so downscale resampling is identical */
#index .tmcms2 .cms-block { position: absolute; top: 66px; left: 55px; width: 292px; }
#index .tmcms2 .cms_offer a {
  font-size: 28px; font-weight: 600; line-height: 32px; letter-spacing: 0.5px;
  text-transform: capitalize; text-align: left; color: #000;
}
#index .tmcms2 .cms_offer1 {
  display: block; width: 216.078px;
  font-size: 12px; font-weight: 400; line-height: 20px; letter-spacing: 0.5px;
  text-transform: capitalize; text-align: left; color: #000; margin: 20px 0;
}

/* =========================================================================
   CATEGORY LEFT-COLUMN CATEGORY BLOCK  (ps_categorytree — "Winkelen op categorie")
   Ported 1:1 from the live child theme (themes/ammusic compiled theme.css +
   custom.css, TemplateMela BS4). Scoped under #category so it can't regress
   the already-PASS pages. The desktop block title is the STATIC module label
   "Winkelen op categorie" (the current-category link is commented out in the
   template, matching live). Block sits ABOVE the facet block, sharing the same
   1px #003d8b bordered .block look as the facet wrapper.
   ========================================================================= */
/* live floats EVERY #left-column .block (they stack vertically). The rebuild left
   the facet .block un-floated; once the categorytree block floats, an un-floated
   facet wrapper wraps its content around the float (inflating its title <p> to
   ~490px). Float all left-column blocks like live so they stack cleanly. */
#category #left-column .block { float: left; width: 100%; }
#category #left-column .block-categories.block {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 30px;
  border: 1px solid rgba(0, 157, 224, 0.5);   /* live cascade ends here (Verfspot shared-file override beats the theme's 3px #d13925) */
  border-radius: 5px;
  background: transparent;      /* live block bg is transparent (rgba(0,0,0,0)) */
}
/* block title — same .block_title look as the facet-block titles below it */
#category .block-categories .block_title {
  color: #000;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.8px;
  margin: 0;
  padding: 16px;
  text-transform: capitalize;
  border-bottom: 2px solid #f0f0f0;
}
/* block content: BS5 hides .collapse; live shows it on desktop (display:inherit) */
#category .block-categories > .block_content {
  display: block;
  padding: 15px 10px;
}
#category .block-categories .category-top-menu { margin-bottom: 0; }
#category .block-categories .category-sub-menu { margin-top: 0; }
#category .block-categories .category-sub-menu .category-sub-link { font-size: 13px; }
#category .block-categories .category-sub-menu li { position: relative; }
#category .block-categories .category-sub-menu li > a {
  width: 100%;
  display: inline-block;
  padding: 5px 0;
  font-size: 13px;
}
#category .block-categories .category-sub-menu li[data-depth="1"] > a {
  padding-left: 15px;
  position: relative;
}
#category .block-categories .category-sub-menu li:not([data-depth="0"]):not([data-depth="1"]) a { padding-left: 20px; }
#category .block-categories .category-sub-menu li:not([data-depth="0"]):not([data-depth="1"]) a::before {
  content: "-";
  margin-right: 0.3125rem;
}
#category #left-column .block-categories a { color: #444; text-transform: none; }
/* material-icons glyphs for the collapse toggles (font-face declared globally above) */
#category .block-categories .material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}
#category .block-categories .block_content .collapse-icons {
  position: absolute;
  right: 0;
  top: 12px;
  padding: 0;
  cursor: pointer;
  border: 0;
}
#category .block-categories .block_content .collapse-icons i { width: 18px; height: 18px; font-size: 15px; color: #333; }
#category .block-categories .block_content .collapse-icons .remove { display: none; }
#category .block-categories .block_content .arrows .arrow-right,
#category .block-categories .block_content .arrows .arrow-down {
  font-size: 15px;
  cursor: pointer;
  margin-left: 0;
  position: absolute;
  right: 2px;
  color: #333;
  top: 10px;
}
#category .block-categories .block_content .arrows .arrow-down { display: none; }

/* =========================================================================
   CATEGORY CONTENT WRAPPER — 30px top gap (live: #wrapper{padding-top:30px})
   On live the full-width #wrapper carries padding-top:30px, so the whole content
   region (the floated breadcrumb bar AND the columns below it) starts 30px under
   the header (breadcrumb nav @245, section#main @284 at 1600px). Hummingbird's
   main#wrapper has no top padding, so both sat 30px too high. Reproduce it on the
   same element (main#wrapper), scoped to the category body so home/product are
   untouched. This is the element that carries the 30px on live; putting it on
   .columns-container alone would push the columns down but leave the breadcrumb
   bar (which precedes .columns-container) 30px too high vs live.
   ========================================================================= */
#category #wrapper {
  padding-top: 30px;
  /* match live #wrapper's own box + inherited text defaults (old theme sets these
     on #wrapper: min-height 700, Poppins 13/24, letter-spacing .5, black). */
  min-height: 700px;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  line-height: 24px;
  letter-spacing: 0.5px;
  color: #000;
}

/* =========================================================================
   BREADCRUMB — GLOBAL (all pages, like live)
   Ported from the live child theme (themes/ammusic theme.css .breadcrumb rules,
   which are GLOBAL there). Live: transparent, no padding, crumbs inline
   separated by "/#1f1f1f", last crumb has no separator. Geometry (width/float/
   position) calibrated to the live-measured .breadcrumb box at viewport 1600
   (verified identical on category/cms/search/login/cart: x=401 y=245 w=1099;
   product float:none: x=100 y=245 w=1099).

   PLACEMENT (matches live #columns_inner): the nav is a SIBLING inside the columns
   .row — order: #left-column (float left) → nav.breadcrumb (float right) → #center-
   column (float left). Floated right in the 1400 row it lands at x≈401 / w≈1099
   (= 78.5% of 1400), at the TOP of the content region, so #left-column top-aligns
   with it (y≈240) instead of being pushed down by an above-columns band. The content
   column then drops BELOW the floated breadcrumb (section#main y≈284). The nav is
   rendered by the child layouts directly in the row/container (no wrapper),
   exactly like live where <nav class="breadcrumb"> is a direct child of
   #columns_inner. The page h1 is moved INTO the bar by custom.js (as on live).
   ========================================================================= */
#wrapper nav.breadcrumb {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  /* live: nav is 1099px (= 78.5% of the 1400 columns .row), floated right so it sits
     at the top of the content region over the (dropped-below) content column. float
     => computed display:block, margins stay 0 (matches live's measured
     margin-left/right:0, display:block). */
  width: 78.5%;
  max-width: 1099px;
  display: block;              /* override Hummingbird .breadcrumb{display:flex} so float applies */
  float: right;
  clear: none;                 /* must not clear #left-column's left float */
  margin: 5px 0 15px;
  position: relative;
  top: 0;
  left: 0;
  gap: normal;                 /* override Hummingbird .breadcrumb flex gap (8px) */
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  line-height: 24px;
  letter-spacing: 0.5px;
  color: #000;
}
/* live: #product .breadcrumb{float:none} — plain left-aligned crumbs on product */
#product #wrapper nav.breadcrumb,
#product #wrapper nav.breadcrumb ol { float: none; text-align: left; }
/* old-theme responsive widths (nav is hidden-sm-down below 768px anyway) */
@media (max-width: 1199px) { #wrapper nav.breadcrumb { width: 76%; } }
@media (max-width: 991px)  { #wrapper nav.breadcrumb { width: 100%; } }
#wrapper nav.breadcrumb ol {
  padding-left: 0;
  margin-bottom: 0;
  min-height: 0;
  float: right;
  list-style: none;
  display: block;
}
#wrapper nav.breadcrumb li { display: inline; }
#wrapper nav.breadcrumb li::after { content: "/"; color: #1f1f1f; margin: 0; }
#wrapper nav.breadcrumb li:last-child::after { content: ""; display: none; }
#wrapper nav.breadcrumb a { font-size: 13px; font-weight: 500; color: #000; text-decoration: none; }
#wrapper nav.breadcrumb a span { color: inherit; }
#wrapper nav.breadcrumb a:hover { color: #d13925; }
/* inner .container is a passthrough (neutralise Hummingbird's centred container) */
#wrapper nav.breadcrumb .container { max-width: none; width: 100%; padding: 0; margin: 0; }
/* the page title lives in the breadcrumb bar (floated left), as on live — both the
   category bar's server-side h1.h1 and the JS-moved h1.page-title-section/h1.h1 */
#wrapper nav.breadcrumb .container h1 {
  float: left;
  margin: 0;
  padding: 0;
  color: #000;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
/* pages that newly carry the in-row bar need live's #wrapper top gap (live sets
   padding-top:30px on #wrapper GLOBALLY; #category already has it above, and the
   verified home/auth/account pages keep their own calibrated spacing) */
#product #wrapper, #cms #wrapper, #search #wrapper, #sitemap #wrapper,
#cart #wrapper, #stores #wrapper, #contact #wrapper, #best-sales #wrapper,
#new-products #wrapper, #prices-drop #wrapper, #manufacturer #wrapper,
#supplier #wrapper, #order-confirmation #wrapper, #guest-tracking #wrapper {
  padding-top: 30px;
}
/* the h1 is moved out of Hummingbird's .page-header wrapper into the bar —
   collapse the emptied wrapper so it leaves no gap (live has no such wrapper) */
#cms #wrapper .page-header:not(:has(h1)), #sitemap #wrapper .page-header:not(:has(h1)),
#stores #wrapper .page-header:not(:has(h1)), #contact #wrapper .page-header:not(:has(h1)),
#cart #wrapper .page-header:not(:has(h1)) {
  margin: 0; padding: 0;
}
/* cart mobile: the page-leftcol container's side padding is stripped for live's
   desktop geometry, which lets the cart rows' -12px gutters overflow the mobile
   viewport (live mobile cart has no hscroll) — restore the padding below md so
   the gutters cancel like stock */
/* breakpoint normalised 767.98px -> 767px on 2026-07-29: 767.98 is a Bootstrap 5
   boundary and belongs to neither theme (flagged in REBUILD-TODO). Live's step is
   the integer 767, and every other rule in this file is keyed to live's ladder
   (544/768/992/1200/1450 + 480). Behaviour is identical on integer viewports. */
@media (max-width: 767px) {
  /* html body#cart outranks the desktop strip rule body:not(#category) .container...
     whose :not(#category) argument counts a full ID in specificity */
  html body#cart .container:has(> .row.page-leftcol) { padding-left: 12px; padding-right: 12px; }
}
/* cms content like live: the in-content page heading is hidden (the page title
   lives in the breadcrumb bar) and the content sits in a bordered box
   (live-measured: 1px #f0f0f0, 30px padding, 5px radius, 25px bottom margin) */
#cms .page-heading { display: none; }
#cms #content {
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  padding: 30px;
  margin-bottom: 25px;
}

/* =========================================================================
   FIX A — CATEGORY LEFT-COLUMN BANNERS + SERVICE BLOCK
   Live renders these below the facets via displayLeftColumn (the dead tm_leftbanner /
   tm_leftbanner1 / tm_testimonialcmsblock modules); reproduced as static markup in
   catalog/_partials/left-column-banners.tpl. Values mirror the already-PASS #index
   copy (which matched live's homepage left column) + the live-category measurements
   (#tmleftbanner 270.2x394.5, service block internals). Scoped under #category so the
   home / product / other pages cannot regress. The herdenk banner is HIDDEN on
   category exactly like live (live child theme: #category #tmleftbanner1{display:none}).
   ========================================================================= */
/* --- a. catalogus banner (#tmleftbanner) --- */
#category #left-column #tmleftbanner {
  float: left;
  width: 100%;
  height: auto;   /* live declares none — the banner image drives it */
  margin: 0 0 30px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
#category #left-column #tmleftbanner ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
#category #left-column #tmleftbanner li {
  /* live: li.slide is inline-block, which is what gives the ul its +8px baseline
     descender (ul 394 vs li 386). It was lumped in with the ul at display:block. */
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
}
#category #left-column #tmleftbanner a {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  line-height: 24px;
  color: #444;
}
#category #left-column #tmleftbanner img {
  display: inline;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 0;
  line-height: 24px;
  color: #444;
}

/* --- b. herdenk banner — hidden on category, exactly like live --- */
#category #tmleftbanner1 { display: none; }

/* --- c. service block (#tmtestimonialcmsblock) — Klantenservice / Waarom Bergsma en de Boer? --- */

/* =========================================================================
   FIX B — PRODUCT-CARD HOVER IMAGE-FLIP
   The 2nd (first non-cover) product image is rendered by the bw_imagehover module
   inside the cover <a> as <img class="replace-2x img_1 img-responsive">. Ported 1:1
   from the old TemplateMela theme.css: the img_1 is absolutely positioned over the
   cover, hidden at rest (opacity 0 + scaleX 0), and cross-fades in over 500ms on
   .product_item:hover. 1-image cards get no .img_1 (module returns empty), so they do
   not flip — exactly like live. At rest img_1 is opacity:0 + absolute, so the static
   category / home-featured screenshots are unchanged (no regression). Scoped to the
   listing (#category .products) and home-featured (#index .featured-products) cards.
   ========================================================================= */
#category .products img.img_1,
#index .featured-products img.img_1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  opacity: 0;
  transform: scaleX(0);
  transition: all 500ms ease 0s;
}
#category .products .product_item:hover img.replace-2x,
#index .featured-products .product_item:hover img.replace-2x {
  opacity: 1;
  transform: scaleX(1);
  margin: 0 auto;
}


/* =====================================================================
 * DEFECT 3 — PRODUCT PAGE: "same category products" OWL CAROUSEL
 * (ps_categoryproducts / ps_crossselling / accessories on displayFooterProduct).
 * Ported from the old TemplateMela child (owl.carousel 1.3.2 base + the
 * .productscategory-products layout + card, scoped to #product so it can't
 * regress the already-PASS home/category grids). owl JS in assets/js/custom.js.
 * ===================================================================== */

/* ---- owl.carousel 1.3.2 structural base (owl JS toggles display/inline transform) ---- */
#product .tm-carousel { display: none; position: relative; float: left; width: 100%; margin: 0; -ms-touch-action: pan-y; }
#product .owl-carousel .owl-wrapper { display: none; position: relative; }
#product .owl-carousel .owl-wrapper:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
#product .owl-carousel .owl-wrapper-outer { overflow: hidden; position: relative; float: left; width: 100%; }
#product .owl-carousel .owl-item { float: left; }
/* NOTE: the old theme put translate3d(0,0,0)+backface-visibility:hidden here as a mobile-drag
   GPU hack. It is NOT needed for this static (non-animated) carousel and it promotes the
   8960px-wide .owl-wrapper to a compositing layer that headless Chromium fails to rasterise
   (blank screenshots). Removed — owl positions via `left`, so no transform is required. */
#product .owl-carousel .owl-wrapper,
#product .owl-carousel .owl-item { text-align: center; }

/* ---- section wrapper + title ----
   IMPORTANT: keep this section IN FLOW (no float). The tabs above it are float:left(78%);
   an in-flow, clear:both carousel forces the product <section id=main> to grow and CONTAIN
   both floats. If this section is ALSO floated, #main collapses to the product-container
   height and the floated tabs+carousel overflow it (invisible / unpainted). */
#product .productscategory-products,
#product .product-accessories,
#product .crosssell-products { position: relative; float: none; clear: both; width: 100%; margin: 30px 0 0; }
#product .productscategory-products .products-section-title,
#product .product-accessories .products-section-title,
#product .crosssell-products .products-section-title {
  font-size: 20px; font-weight: 500; letter-spacing: 1px; line-height: 36px;
  /* headings render capitalize like live — the templates drop Hummingbird's
     .text-uppercase utility (its @layer !important cannot be out-cascaded) */
  text-transform: capitalize; text-align: left; color: #000; margin: 0 0 60px;
  padding-bottom: 10px; border-bottom: 1px solid #f0f0f0;
}
/* accessories/crosssell headings sit in .tab-main-title, which carries the 2px
   underline on live — the h2 itself has only a 10px bottom margin there
   (live-measured; a doubled line + 120px gap rendered otherwise) */
#product :is(.product-accessories, .crosssell-products) .products-section-title {
  margin: 0 0 10px; padding-bottom: 0; border-bottom: 0;
}
#product :is(.product-accessories, .crosssell-products) .tab-main-title {
  border-bottom: 2px solid #f0f0f0; margin: 0 0 60px; float: left; width: 100%;
}
#product .productscategory-products #spe_res { position: relative; width: 100%; float: left; }
/* live overflows the carousel 10px each side (UL 1420 within a 1400 section) -> owl item width 284 */
#product .productscategory-products .products { margin: 0 0 0 -10px; width: calc(100% + 20px); float: left; position: relative; display: block; }
#product .productscategory-products .product_list { margin: 0; padding: 0; list-style: none; float: left; width: 100%; }

/* ---- carousel item + card (values cloned from the parity-matched #category grid) ---- */
#product :is(.productscategory-products, .product-accessories, .crosssell-products) .product_list li:is(.item, .product_item) { padding: 0 10px; margin: 0; position: relative; }
/* live's same-category li carries 30px extra below the card (li 484 = card 434
   + mini margin 20 + 30), closing the section-height gap vs live */
#product .productscategory-products .product_list li:is(.item, .product_item) { padding-bottom: 30px; }
#product :is(.productscategory-products, .product-accessories, .crosssell-products) .product-miniature { margin: 0 auto 20px; position: relative; top: 0; left: 0; }
#product :is(.productscategory-products, .product-accessories, .crosssell-products) .thumbnail-container { margin-bottom: 15px; position: relative; height: auto; }
#product :is(.productscategory-products, .product-accessories, .crosssell-products) .product-thumbnail { display: block; background: #fff; text-align: center; border-radius: 5px; color: #000; }
#product :is(.productscategory-products, .product-accessories, .crosssell-products) .product-thumbnail img { display: block; }
#product :is(.productscategory-products, .product-accessories, .crosssell-products) img { max-width: 100%; position: relative; margin: 0 auto; border-radius: 5px; height: auto; }

/* flags hidden at rest (as on live) */
#product :is(.productscategory-products, .product-accessories, .crosssell-products) .product-flags { margin: 0; opacity: 0; position: static; top: auto; left: auto; width: 100%; list-style: none; padding: 0; display: block; }
#product :is(.productscategory-products, .product-accessories, .crosssell-products) .product-flags li { position: absolute; font-size: 11px; color: #000; letter-spacing: 0.8px; text-transform: capitalize; font-weight: 400; line-height: normal; padding: 0; opacity: 1; }
#product :is(.productscategory-products, .product-accessories, .crosssell-products) .product-flags .discount { display: none; }

/* description / title / price */
#product :is(.productscategory-products, .product-accessories, .crosssell-products) .product-description { min-height: 110px; overflow: hidden; position: relative; }
#product :is(.productscategory-products, .product-accessories, .crosssell-products) .product-title {
  text-transform: capitalize; margin: 14px 0 12px; display: block; float: left; position: static;
  width: auto; font-size: 18px; font-weight: 500; line-height: 1.1; letter-spacing: 0.5px; text-align: left;
}
#product :is(.productscategory-products, .product-accessories, .crosssell-products) .product-title a {
  color: #707070; font-size: 13px; font-weight: 400; letter-spacing: 0.9px; line-height: 20px;
  text-align: left; text-transform: none; float: left; width: auto; white-space: normal; text-decoration: none;
}
#product :is(.productscategory-products, .product-accessories, .crosssell-products) .product-title a:hover { color: #000; }
#product :is(.productscategory-products, .product-accessories, .crosssell-products) .product-price-and-shipping {
  color: #000; font-size: 14px; font-weight: 700; clear: both; padding: 10px 0 0; text-align: left;
}
#product :is(.productscategory-products, .product-accessories, .crosssell-products) .product-price-and-shipping .price {
  font-size: 16px; line-height: 24px; letter-spacing: 0.6px; font-weight: 600; color: #000;
}
#product :is(.productscategory-products, .product-accessories, .crosssell-products) .product-price-and-shipping .regular-price {
  font-size: 13px; line-height: 24px; letter-spacing: 0.8px; font-weight: 500; color: #c8c8c8;
  margin: 0; text-decoration: line-through; display: inline-block; vertical-align: top;
}
/* short description + variant hints hidden in the card (as on live) */
#product :is(.productscategory-products, .product-accessories, .crosssell-products) .product-detail { display: none; }
#product :is(.productscategory-products, .product-accessories, .crosssell-products) .highlighted-informations { display: none; }

/* actions hidden at rest, revealed on card hover — like live (price/actions swap) */
#product :is(.productscategory-products, .product-accessories, .crosssell-products) .product-actions-main { position: static; float: left; width: 100%; opacity: 0; transform: translateX(-150px); transition: 0.5s; }
#product :is(.productscategory-products, .product-accessories, .crosssell-products) :is(.item, .product_item):hover .product-actions-main { opacity: 1; transform: none; }
#product :is(.productscategory-products, .product-accessories, .crosssell-products) :is(.item, .product_item):hover .product-price-and-shipping { opacity: 0.6; }
#product :is(.productscategory-products, .product-accessories, .crosssell-products) .add-to-cart {
  display: inline-block; width: auto; margin: 0; font-size: 12px; padding: 5px 15px 5px 35px;
  background: #d13925 url(../img/megnor/sprite-1.png) no-repeat scroll 10px -20px;
  border: 1px solid #d13925; color: #fff; text-transform: uppercase; font-weight: 600;
  letter-spacing: 0.7px; line-height: 24px; border-radius: 5px; cursor: pointer;
}

/* the cards' floated internals (title/price/actions) must be cleared or the
   li height excludes them (live item 484 vs 429 without); plus live's #wrapper
   font stack so line-heights match (desc 116/price 34 like live) */
#product :is(.productscategory-products, .product-accessories, .crosssell-products) {
  font-family: "Poppins", sans-serif; font-size: 13px; line-height: 24px; letter-spacing: 0.5px; color: #000;
}
#product :is(.productscategory-products, .product-accessories, .crosssell-products) .product-miniature::after {
  content: ""; display: table; clear: both;
}

/* ---- GRID variants (< 5 products: accessories_grid / crosssell_grid) —
   Hummingbird's stock .product_list{display:grid;12 tracks} collapsed the
   items to ~32px. Live: plain block list, floated lis — accessories 20%
   (5/row, li 222 at 1600) and cross-sell 25% (4/row, li 284), ±10px bleed
   via #spe_res like the other sections. ---- */
#product :is(.product-accessories, .crosssell-products) #spe_res { position: relative; float: left; width: 100%; }
#product :is(.product-accessories, .crosssell-products) .products { margin: 0 0 0 -10px; width: calc(100% + 20px); float: left; position: relative; display: block; }
#product :is(.product-accessories, .crosssell-products) .product_list {
  display: block; gap: normal; grid-template-columns: none;
  margin: 0; padding: 0; list-style: none; float: left; width: 100%;
}
#product :is(.product-accessories, .crosssell-products) .product_list::after { content: ""; display: table; clear: both; }
#product .product-accessories .product_list > li.product_item,
#product .crosssell-products .product_list > li.product_item { display: list-item; float: left; width: 20%; }
/* live renders the accessories section at 78% of the 1400 row (1092px, next to
   the right-banner area) while cross-sell spans the full row; items 20% both */
#product .product-accessories { width: 78%; }
@media (max-width: 991px) {
  #product :is(.product-accessories, .crosssell-products) .product_list > li.product_item { width: 50%; }
  #product .product-accessories { width: 100%; }
}

/* ---- prev/next arrows (customNavigation) ---- */
#product .productscategory-products .customNavigation,
#product .product-accessories .customNavigation,
#product .crosssell-products .customNavigation { position: absolute; z-index: 2; width: auto; top: 0; left: auto; right: 33px; text-align: center; }
/* reset Bootstrap-5 .btn (display:flex/gap/color) so the arrow <a class="btn ..."> matches live */
#product .customNavigation a {
  position: absolute; padding: 0; height: 30px; width: 25px; cursor: pointer; overflow: hidden;
  font-size: 0; display: block; font-weight: 600; line-height: 24px; white-space: nowrap;
  color: #000; text-align: center; gap: normal; justify-content: normal; align-items: normal;
  border: 1px solid transparent; background: none; border-radius: 5px;
}
#product .customNavigation a.prev { left: auto; right: 0; }
#product .customNavigation a.next { right: auto; left: 0; }
#product .customNavigation a::before { position: absolute; font-family: fontawesome; font-size: 24px; left: 0; right: 0; top: 7px; bottom: 0; color: #000; font-weight: 400; line-height: 24px; }
#product .customNavigation a:hover::before { color: #d13925; }
#product .customNavigation a.prev::before { content: "\f104"; }
#product .customNavigation a.next::before { content: "\f105"; right: -5px; }

/* =====================================================================
 * PRODUCT PAGE — "Productdetails" tab datasheet (matches live's 2-column
 * grey table). Live renders dt/dd as side-by-side inline-table cells
 * (~504px, bg #ebebeb, 10px padding, 40px min-height, rows alternating
 * #ebebeb/#f6f6f6); Hummingbird's default stacks them (bold label + value).
 * Scoped to #product so it only affects the product page.
 * ===================================================================== */
/* live measures margin-top:5px on section.product-features (parity: the tab pane
   is 418px on live vs 413px with margin-top:0) */
#product #product-details .product-features { margin-top: 5px; }
#product #product-details .product-features h3,
#product #product-details h3.h6 { font-size: 15px; font-weight: 600; line-height: 1.1; margin: 0 0 12px; text-transform: none; }
#product #product-details .data-sheet { display: block; margin: 0 0 16px; }
#product #product-details .data-sheet dt.name,
#product #product-details .data-sheet dd.value {
  display: inline-table; width: 48%; box-sizing: border-box; vertical-align: top;
  background: #ebebeb; padding: 10px; margin: 0 10px 0 0; min-height: 40px;
  font-weight: 400; font-size: 13px; word-break: break-word;
}
#product #product-details .data-sheet dt.name { text-transform: capitalize; }
#product #product-details .data-sheet dd.value { margin-bottom: 8px; }
#product #product-details .data-sheet dt.name:nth-of-type(even),
#product #product-details .data-sheet dd.value:nth-of-type(even) { background: #f6f6f6; }

/* =====================================================================
 * Product qty stepper — vertical up/down arrows on the right, matching
 * live (ammusic.nl). Markup: #add-to-cart-or-refresh .bergsma-qty-vertical
 * (input + .bergsma-qty-arrows > .js-increment/.js-decrement-button).
 * ===================================================================== */
#add-to-cart-or-refresh .bergsma-qty-vertical {
  display: inline-flex; align-items: stretch; vertical-align: middle; margin: 0 0 8px;
}
#add-to-cart-or-refresh .bergsma-qty-vertical #quantity_wanted {
  display: inline-block; width: 3rem; height: 38px;
  font-size: 13px; line-height: 24px; text-align: start; position: relative; min-height: 0;
  padding: 5px 12px; margin: 0; color: #414141; background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; box-shadow: none;
}
#add-to-cart-or-refresh .bergsma-qty-arrows {
  display: flex; flex-direction: column; height: 38px; width: 24px; margin-left: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; overflow: hidden;
}
#add-to-cart-or-refresh .bergsma-qty-arrows > button {
  flex: 1 1 50%; display: flex; align-items: center; justify-content: center;
  padding: 0; min-height: 0; margin: 0; border: 0; border-radius: 0;
  background: #fff; color: #414141; line-height: 1; cursor: pointer;
}
#add-to-cart-or-refresh .bergsma-qty-arrows > .bergsma-qty-up { border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
#add-to-cart-or-refresh .bergsma-qty-arrows > button:hover { background: #f2f2f2; }
#add-to-cart-or-refresh .bergsma-qty-arrows .material-icons { font-size: 15px; line-height: 1; }

/* =====================================================================
 * PRODUCT PAGE — "You might also like" (accessories) carousel:
 * same card + carousel treatment as .productscategory-products (the
 * accessories section reuses the identical markup/partial).
 * ===================================================================== */
#product .product-accessories #spe_res { position: relative; width: 100%; float: left; }
#product .product-accessories .products { margin: 0 0 0 -10px; width: calc(100% + 20px); float: left; position: relative; display: block; }
#product .product-accessories .product_list { margin: 0; padding: 0; list-style: none; float: left; width: 100%; }
#product .product-accessories .product_list li.item { padding: 0 10px; margin: 0; position: relative; }
#product .product-accessories .product_list li.product_item { padding: 0 10px; margin: 0 0 20px; position: relative; float: left; }
#product .product-accessories .product-miniature { margin: 0 auto 20px; position: relative; top: 0; left: 0; }
#product .product-accessories .thumbnail-container { margin-bottom: 15px; position: relative; height: auto; }
#product .product-accessories .product-thumbnail { display: block; background: #fff; text-align: center; border-radius: 5px; color: #000; }
#product .product-accessories .product-thumbnail img { display: block; }
#product .product-accessories img { max-width: 100%; position: relative; margin: 0 auto; border-radius: 5px; height: auto; }
#product .product-accessories .product-flags { margin: 0; opacity: 0; position: static; width: 100%; list-style: none; padding: 0; display: block; }
#product .product-accessories .product-flags li { position: absolute; font-size: 11px; color: #000; letter-spacing: 0.8px; text-transform: capitalize; font-weight: 400; line-height: normal; padding: 0; opacity: 1; }
#product .product-accessories .product-description { min-height: 110px; overflow: hidden; position: relative; }
#product .product-accessories .product-title { text-transform: capitalize; margin: 14px 0 12px; display: block; float: left; position: static; width: auto; font-size: 18px; font-weight: 500; line-height: 1.1; letter-spacing: 0.5px; text-align: left; }
#product .product-accessories .product-title a { color: #707070; font-size: 13px; font-weight: 400; letter-spacing: 0.9px; line-height: 20px; text-align: left; text-transform: none; float: left; width: auto; white-space: normal; text-decoration: none; }
#product .product-accessories .product-title a:hover { color: #000; }
#product .product-accessories .product-price-and-shipping { color: #000; font-size: 14px; font-weight: 700; clear: both; padding: 10px 0 0; text-align: left; }
#product .product-accessories .product-price-and-shipping .price { font-size: 16px; line-height: 24px; letter-spacing: 0.6px; font-weight: 600; color: #000; }
#product .product-accessories .product-detail { display: none; }
#product .product-accessories .highlighted-informations { display: none; }
#product .product-accessories .product-actions-main { position: static; float: left; width: 100%; opacity: 0; transform: translateX(-150px); transition: 0.5s; }
#product .product-accessories .item:hover .product-actions-main,
#product .product-accessories .product_item:hover .product-actions-main { opacity: 1; transform: none; }
#product .product-accessories .item:hover .product-price-and-shipping,
#product .product-accessories .product_item:hover .product-price-and-shipping { opacity: 0.6; }
#product .product-accessories .add-to-cart { display: inline-block; width: auto; margin: 0; font-size: 12px; padding: 5px 15px 5px 35px; background: #d13925 url(../img/megnor/sprite-1.png) no-repeat scroll 10px -20px; border: 1px solid #d13925; color: #fff; text-transform: uppercase; font-weight: 600; letter-spacing: 0.7px; line-height: 24px; border-radius: 5px; cursor: pointer; }

/* hover image-flip (bw_imagehover .img_1) — hidden at rest on the PRODUCT page
   sections too (was only scoped to #category/#index; on #product the flip img
   rendered visibly under the cover, doubling tile heights). */
#product .productscategory-products img.img_1,
#product .product-accessories img.img_1 {
  position: absolute;
  top: 0; left: 0; right: 0;
  margin: 0 auto;
  opacity: 0;
  transform: scaleX(0);
  transition: all 500ms ease 0s;
}
#product .productscategory-products .item:hover img.replace-2x,
#product .productscategory-products .product_item:hover img.replace-2x,
#product .product-accessories .item:hover img.replace-2x,
#product .product-accessories .product_item:hover img.replace-2x {
  opacity: 1;
  transform: scaleX(1);
  margin: 0 auto;
}

/* =====================================================================
 * CART + ORDER-CONFIRMATION — "Popular Products" featured grid
 * (ps_featuredproducts on displayCrossSellingShoppingCart /
 * displayOrderConfirmation2): classic 4-wide card grid like live.
 * ===================================================================== */
#cart .featured-products,
#order-confirmation .featured-products { position: relative; clear: both; width: 100%; margin: 30px 0 0; overflow: hidden; }
#cart .featured-products .products-section-title,
#order-confirmation .featured-products .products-section-title {
  font-size: 20px; font-weight: 500; letter-spacing: 1px; line-height: 36px;
  text-transform: capitalize !important; text-align: left; color: #000; margin: 0 0 30px;
  padding-bottom: 10px; border-bottom: 1px solid #f0f0f0;
}
#cart .featured-products .product_list,
#order-confirmation .featured-products .product_list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; }
#cart .featured-products .product_list li.product_item,
#order-confirmation .featured-products .product_list li.product_item { width: 25%; padding: 0 10px; margin: 0 0 20px; position: relative; }
@media (max-width: 991px) {
  #cart .featured-products .product_list li.product_item,
  #order-confirmation .featured-products .product_list li.product_item { width: 50%; }
}
@media (max-width: 543px) {
  #cart .featured-products .product_list li.product_item,
  #order-confirmation .featured-products .product_list li.product_item { width: 100%; }
}
#cart .featured-products .product-miniature,
#order-confirmation .featured-products .product-miniature { margin: 0 auto 20px; position: relative; }
#cart .featured-products .thumbnail-container,
#order-confirmation .featured-products .thumbnail-container { margin-bottom: 15px; position: relative; }
#cart .featured-products img,
#order-confirmation .featured-products img { max-width: 100%; height: auto; margin: 0 auto; border-radius: 5px; position: relative; }
#cart .featured-products .product-title a,
#order-confirmation .featured-products .product-title a { color: #707070; font-size: 13px; font-weight: 400; letter-spacing: 0.9px; line-height: 20px; text-decoration: none; }
#cart .featured-products .product-title a:hover,
#order-confirmation .featured-products .product-title a:hover { color: #000; }
#cart .featured-products .product-price-and-shipping,
#order-confirmation .featured-products .product-price-and-shipping { color: #000; padding: 5px 0 0; }
#cart .featured-products .product-price-and-shipping .price,
#order-confirmation .featured-products .product-price-and-shipping .price { font-size: 16px; font-weight: 600; color: #000; }
#cart .featured-products .product-detail,
#cart .featured-products .highlighted-informations,
#cart .featured-products .product-flags,
#order-confirmation .featured-products .product-detail,
#order-confirmation .featured-products .highlighted-informations,
#order-confirmation .featured-products .product-flags { display: none; }
#cart .featured-products img.img_1,
#order-confirmation .featured-products img.img_1 { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; opacity: 0; }


/* =====================================================================
 * LEFT COLUMN ON CMS / SEARCH / CART (+ tree on HOME) — live parity.
 * Auto-generated per-selector twins of every #category-scoped rule that
 * styles the left-column blocks (tree, banners, service, facets), for the
 * pages that now use layout-left-column like live. Source rules unchanged.
 * ===================================================================== */
#cms #left-column,
#search #left-column,
#cart #left-column {
  float: left;
  width: 19.3%;
  max-width: none;
  padding: 0;
  margin: 0; }

#cms #search_filters_wrapper.block,
#search #search_filters_wrapper.block,
#cart #search_filters_wrapper.block { border: 1px solid rgba(0, 157, 224, 0.5);   /* live cascade ends here (Verfspot shared-file override beats the theme's 3px #d13925) */ }

#cms #search_filters,
#search #search_filters,
#cart #search_filters {
  background: transparent;
  padding: 15px 10px;
  margin-bottom: 0;
  box-shadow: none; }

#cms #search_filters > .text-uppercase.h6,
#search #search_filters > .text-uppercase.h6,
#cart #search_filters > .text-uppercase.h6 {
  color: #000;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0 0 8px; }

#cms #search_filters .facet,
#search #search_filters .facet,
#cart #search_filters .facet { padding-top: 0.625rem; overflow: hidden; }

#cms #search_filters .facet .collapse,
#search #search_filters .facet .collapse,
#cart #search_filters .facet .collapse { display: block; }

#cms #search_filters .facet .facet-title,
#search #search_filters .facet .facet-title,
#cart #search_filters .facet .facet-title {
  color: #000;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.1;
  margin: 5px 0 10px; }

#cms #search_filters .facet ul,
#search #search_filters .facet ul,
#cart #search_filters .facet ul { margin: 0 0 16px; padding: 0; list-style: none; }

#cms #search_filters .facet .facet-label,
#search #search_filters .facet .facet-label,
#cart #search_filters .facet .facet-label {
  margin-bottom: 0;
  font-weight: normal;
  text-align: left;
  line-height: normal; }

#cms #search_filters .facet .facet-label a,
#search #search_filters .facet .facet-label a,
#cart #search_filters .facet .facet-label a {
  margin-top: 0;
  display: inline-block;
  font-size: 13px;
  color: #444; }

#cms #search_filters .facet .facet-label a .magnitude,
#search #search_filters .facet .facet-label a .magnitude,
#cart #search_filters .facet .facet-label a .magnitude { color: #444; }

#cms #search_filters .custom-checkbox,
#search #search_filters .custom-checkbox,
#cart #search_filters .custom-checkbox { display: inline; width: auto; position: relative; }

#cms #search_filters .custom-checkbox input,
#search #search_filters .custom-checkbox input,
#cart #search_filters .custom-checkbox input { opacity: 0; position: absolute; width: 13px; height: 13px; margin: 4px 0 0; cursor: pointer; }

#cms #search_filters .custom-checkbox .material-icons,
#search #search_filters .custom-checkbox .material-icons,
#cart #search_filters .custom-checkbox .material-icons { display: none; }

#cms #search_filters .facet-label .ps-shown-by-js,
#search #search_filters .facet-label .ps-shown-by-js,
#cart #search_filters .facet-label .ps-shown-by-js {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 3px 0 0;
  vertical-align: middle;
  border: 1px solid #bbb;
  box-sizing: border-box;
  background: transparent; }

#cms #search_filters .js-search-filters-clear-all,
#search #search_filters .js-search-filters-clear-all,
#cart #search_filters .js-search-filters-clear-all {
  background: none;
  border: 0;
  color: #000;
  font-weight: normal;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
  font-size: 13px;
  text-transform: capitalize; }

#cms #search_filters .navbar-toggler .material-icons,
#search #search_filters .navbar-toggler .material-icons,
#cart #search_filters .navbar-toggler .material-icons { color: #000; }

#cms #left-column .block,
#search #left-column .block,
#cart #left-column .block { float: left; width: 100%; }

#cms #left-column .block-categories.block,
#search #left-column .block-categories.block,
#cart #left-column .block-categories.block,
#index #left-column .block-categories.block {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 30px;
  border: 1px solid rgba(0, 157, 224, 0.5);   /* live cascade ends here (Verfspot shared-file override beats the theme's 3px #d13925) */
  border-radius: 5px;
  background: transparent;      /* live block bg is transparent (rgba(0,0,0,0)) */ }

#cms .block-categories .block_title,
#search .block-categories .block_title,
#cart .block-categories .block_title,
#index .block-categories .block_title {
  color: #000;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.8px;
  margin: 0;
  padding: 16px;
  text-transform: capitalize;
  border-bottom: 2px solid #f0f0f0; }

#cms .block-categories > .block_content,
#search .block-categories > .block_content,
#cart .block-categories > .block_content,
#index .block-categories > .block_content {
  display: block;
  padding: 15px 10px; }

#cms .block-categories .category-top-menu,
#search .block-categories .category-top-menu,
#cart .block-categories .category-top-menu,
#index .block-categories .category-top-menu { margin-bottom: 0; }

#cms .block-categories .category-sub-menu,
#search .block-categories .category-sub-menu,
#cart .block-categories .category-sub-menu,
#index .block-categories .category-sub-menu { margin-top: 0; }

#cms .block-categories .category-sub-menu .category-sub-link,
#search .block-categories .category-sub-menu .category-sub-link,
#cart .block-categories .category-sub-menu .category-sub-link,
#index .block-categories .category-sub-menu .category-sub-link { font-size: 13px; }

#cms .block-categories .category-sub-menu li,
#search .block-categories .category-sub-menu li,
#cart .block-categories .category-sub-menu li,
#index .block-categories .category-sub-menu li { position: relative; }

#cms .block-categories .category-sub-menu li > a,
#search .block-categories .category-sub-menu li > a,
#cart .block-categories .category-sub-menu li > a,
#index .block-categories .category-sub-menu li > a {
  width: 100%;
  display: inline-block;
  padding: 5px 0;
  font-size: 13px; }

#cms .block-categories .category-sub-menu li[data-depth="1"] > a,
#search .block-categories .category-sub-menu li[data-depth="1"] > a,
#cart .block-categories .category-sub-menu li[data-depth="1"] > a,
#index .block-categories .category-sub-menu li[data-depth="1"] > a {
  padding-left: 15px;
  position: relative; }

#cms .block-categories .category-sub-menu li:not([data-depth="0"]):not([data-depth="1"]) a,
#search .block-categories .category-sub-menu li:not([data-depth="0"]):not([data-depth="1"]) a,
#cart .block-categories .category-sub-menu li:not([data-depth="0"]):not([data-depth="1"]) a,
#index .block-categories .category-sub-menu li:not([data-depth="0"]):not([data-depth="1"]) a { padding-left: 20px; }

#cms .block-categories .category-sub-menu li:not([data-depth="0"]):not([data-depth="1"]) a::before,
#search .block-categories .category-sub-menu li:not([data-depth="0"]):not([data-depth="1"]) a::before,
#cart .block-categories .category-sub-menu li:not([data-depth="0"]):not([data-depth="1"]) a::before,
#index .block-categories .category-sub-menu li:not([data-depth="0"]):not([data-depth="1"]) a::before {
  content: "-";
  margin-right: 0.3125rem; }

#cms #left-column .block-categories a,
#search #left-column .block-categories a,
#cart #left-column .block-categories a,
#index #left-column .block-categories a { color: #444; text-transform: none; }

#cms .block-categories .material-icons,
#search .block-categories .material-icons,
#cart .block-categories .material-icons,
#index .block-categories .material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased; }

#cms .block-categories .block_content .collapse-icons,
#search .block-categories .block_content .collapse-icons,
#cart .block-categories .block_content .collapse-icons,
#index .block-categories .block_content .collapse-icons {
  position: absolute;
  right: 0;
  top: 12px;
  padding: 0;
  cursor: pointer;
  border: 0; }

#cms .block-categories .block_content .collapse-icons i,
#search .block-categories .block_content .collapse-icons i,
#cart .block-categories .block_content .collapse-icons i,
#index .block-categories .block_content .collapse-icons i { width: 18px; height: 18px; font-size: 15px; color: #333; }

#cms .block-categories .block_content .collapse-icons .remove,
#search .block-categories .block_content .collapse-icons .remove,
#cart .block-categories .block_content .collapse-icons .remove,
#index .block-categories .block_content .collapse-icons .remove { display: none; }

#cms .block-categories .block_content .arrows .arrow-right,
#search .block-categories .block_content .arrows .arrow-right,
#cart .block-categories .block_content .arrows .arrow-right,
#index .block-categories .block_content .arrows .arrow-right,
#cms .block-categories .block_content .arrows .arrow-down,
#search .block-categories .block_content .arrows .arrow-down,
#cart .block-categories .block_content .arrows .arrow-down,
#index .block-categories .block_content .arrows .arrow-down {
  font-size: 15px;
  cursor: pointer;
  margin-left: 0;
  position: absolute;
  right: 2px;
  color: #333;
  top: 10px; }

#cms .block-categories .block_content .arrows .arrow-down,
#search .block-categories .block_content .arrows .arrow-down,
#cart .block-categories .block_content .arrows .arrow-down,
#index .block-categories .block_content .arrows .arrow-down { display: none; }

#cms #left-column #tmleftbanner,
#search #left-column #tmleftbanner,
#cart #left-column #tmleftbanner {
  float: left;
  width: 100%;
  height: auto;   /* live declares none — the banner image drives it */
  margin: 0 0 30px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  overflow: hidden;
  position: relative; }

#cms #left-column #tmleftbanner ul,
#search #left-column #tmleftbanner ul,
#cart #left-column #tmleftbanner ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none; }
#cms #left-column #tmleftbanner li,
#search #left-column #tmleftbanner li,
#cart #left-column #tmleftbanner li {
  /* live: li.slide is inline-block, which is what gives the ul its +8px baseline
     descender (ul 394 vs li 386). It was lumped in with the ul at display:block. */
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none; }

#cms #left-column #tmleftbanner a,
#search #left-column #tmleftbanner a,
#cart #left-column #tmleftbanner a {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  line-height: 24px;
  color: #444; }

#cms #left-column #tmleftbanner img,
#search #left-column #tmleftbanner img,
#cart #left-column #tmleftbanner img {
  display: inline;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 0;
  line-height: 24px;
  color: #444; }

#cms #tmleftbanner1,
#search #tmleftbanner1,
#cart #tmleftbanner1 { display: none; }

/* live per-page visibility: cms/search/cart show tree + catalogus + service;
   the herdenk banner is hidden everywhere (live removed it site-wide) */
#cms #tmleftbanner1,
#search #tmleftbanner1,
#cart #tmleftbanner1 { display: none; }

/* ---------------------------------------------------------------------
 * REMOVED 2026-07-29 — the GLOBAL BS4-alpha responsive-visibility shim
 * (.hidden-{sm,md,lg,xl}-up and .hidden-{xs,sm,md,lg}-down).
 *
 * The original comment here read: "Bootstrap 5 dropped the whole
 * hidden-*-up/down family. Reproduce them with PrestaShop-classic
 * breakpoints (sm576 md768 lg992 xl1200)". That reasoning was wrong twice
 * over, which is why this block is gone rather than kept:
 *
 *  1. BS5 did not "drop" the capability, it RENAMED it — the d-none /
 *     d-{sm,md,lg}-block family does the same job. Re-implementing the dead
 *     names kept dead classes alive in the markup, so the templates never
 *     got swept and every one of those utilities silently depended on this
 *     one file continuing to exist.
 *  2. The breakpoints were BOOTSTRAP 5's (576 / 575.98 / 767.98 / 991.98 /
 *     1199.98), which do NOT occur anywhere in the old theme. Bergsma's
 *     compiled bundle uses 543/544, 767/768, 991/992, 1199/1200, 1449/1450
 *     — Bootstrap 4-ALPHA's scale, whose small step is 544, not 576. So
 *     this shim was hiding and showing elements at the WRONG WIDTHS, on
 *     exactly the classic templates it names (order history table vs mobile
 *     cards, order-detail tables, password-email dual submit buttons).
 *
 * All affected markup now uses Bootstrap 5's own utilities, chosen per
 * element so the display type is preserved (d-*-inline / -inline-block /
 * -table / -table-cell rather than blanket -block).
 * ------------------------------------------------------------------- */
/* live shows no facet block on the search-results page.
 * !important ADDED 2026-07-29 — REQUIRED, not cosmetic. The BS5 sweep changed
 * modules/ps_facetedsearch/ps_facetedsearch.tpl from `hidden-md-down` to `d-none d-lg-block`,
 * and Bootstrap 5's `.d-lg-block` is `display:block !important`. That beats a plain
 * `display:none`, so at >=992px the wrapper would become visible on #search. Its children stay
 * hidden, but `#search #search_filters_wrapper.block` carries a 1px solid #003d8b border
 * (see the left-column block rules), so the search results page would show an EMPTY BORDERED
 * BOX that live does not have. */
#search #search_filters,
#search #search_filters_wrapper { display: none !important; }

/* columns layout + base typography for the left-column pages (cms/search/cart),
   twinned from the #category originals (270px left col, float layout, Poppins 13) */
@media (min-width: 1450px) {
  body#cms .columns-container.container,
  body#search .columns-container.container,
  body#cart .columns-container.container { max-width: 1400px; }
}
#cms .columns-container.container > .row,
#search .columns-container.container > .row,
#cart .columns-container.container > .row { display: block; margin: 0; }
#cms .columns-container.container > .row::after,
#search .columns-container.container > .row::after,
#cart .columns-container.container > .row::after { content: ""; display: table; clear: both; }
#cms #left-column,
#search #left-column,
#cart #left-column { float: left; width: 19.3%; max-width: none; padding: 0; margin: 0; }
#cms #center-column,
#search #center-column,
#cart #center-column { float: left; width: 78.5%; max-width: none; margin: 0; padding: 0 0 30px; }
#cms #right-column,
#search #right-column,
#cart #right-column { display: none; }
#cms .columns-container,
#search .columns-container,
#cart .columns-container {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  line-height: 24px;
  letter-spacing: 0.5px;
  color: #000;
}
#cms .columns-container ul,
#search .columns-container ul,
#cart .columns-container ul { list-style: none; padding-left: 0; margin: 0; }
#cms .columns-container a,
#search .columns-container a,
#cart .columns-container a { text-decoration: none; }

/* =====================================================================
 * RESPONSIVE GUARDS — the ported layout pins desktop widths (270/1099 in a
 * 1400 container). Below 1450px the center column must go fluid, and below
 * 992px the columns stack — matching live's responsive behaviour (live has
 * zero horizontal scroll on mobile). Desktop (≥1450px) values untouched.
 * ===================================================================== */
@media (max-width: 1449px) {
  #category #center-column, #cms #center-column, #search #center-column, #cart #center-column {
    width: calc(100% - 295.188px);
  }
  #index .home-main-column { width: calc(100% - 300.188px); flex: 1 1 auto; }
}
@media (max-width: 991px) {
  #category #left-column, #cms #left-column, #search #left-column, #cart #left-column {
    float: none; width: 100%; max-width: 100%;
  }
  #category #center-column, #cms #center-column, #search #center-column, #cart #center-column {
    float: none; width: 100%; margin: 0; 
  }
  #index .home-row { display: block; }
  #index .home-left-column { width: 100%; flex: none; margin-right: 0; }
  #index .home-main-column { width: 100%; flex: none; }
}

/* cms2 offer-banner image must scale to its container (natural width 1099px) */
#index #tmcms2_block img { max-width: 100%; height: auto; }

/* the ±10px gutter-bleed on product grids overflows small screens */
@media (max-width: 991px) {
  #category .products,
  #index .featured-products .products,
  #product .productscategory-products .products,
  #product .product-accessories .products { width: 100%; margin-left: 0; margin-right: 0; }
}

@media (max-width: 991px) {
  /* higher-specificity guard: the listing grid's ±10px bleed */
  #category #js-product-list .products,
  #search #js-product-list .products,
  #category #spe_res .products,
  #search #spe_res .products { width: 100%; margin-left: 0; margin-right: 0; }
  /* hover-revealed add-to-cart actions: pointless on touch and their fixed-width
     button overflows the narrow cards (live mobile equally hides grid actions) */
  #category .product-actions-main,
  #search .product-actions-main,
  #index .product-actions-main,
  #product .product-actions-main { display: none; }
}

/* mobile burger + close icons — live's sizes (icon collapses to 0x0 without them) */
@media (max-width: 991px) {
  #header .mobile-menu { display: flex; align-items: center; }
  #header .mobile-menu .menu-icon { width: 33px; height: 37px; }
  #header .mobile-menu .menu-icon i.material-icons,
  #mobile_top_menu_wrapper .menu-icon i.material-icons {
    font-size: 33px; line-height: 36px; margin: 4px 0 0; cursor: pointer; display: inline-block;
  }
  #mobile_top_menu_wrapper .menu-icon { width: 33px; height: 37px; margin-left: auto; }
}

/* the header-nav row is desktop-hidden but on MOBILE it hosts the burger (live shows it) */
@media (max-width: 991px) {
  #header .header-nav { display: block; }
}


/* =====================================================================
 * GENERIC LEFT-COLUMN PAGE STYLING (.page-leftcol on the layout's .row —
 * survives page templates overriding container_class): same tree/banner/
 * service/facet + typography rules as #category for EVERY page using
 * layout-left-column (contact, login/account, 404, best-sales, ...).
 * ===================================================================== */
/* the float layout needs the row to be a block, not a flex row */
.row.page-leftcol { display: block; margin: 0; }
.row.page-leftcol::after { content: ""; display: table; clear: both; }
.row.page-leftcol #left-column { float: left; width: 19.3%; max-width: none; padding: 0; margin: 0; }
.row.page-leftcol #center-column { float: left; width: 78.5%; max-width: none; margin: 0; padding: 0 0 30px; }
@media (min-width: 1450px) { .container:has(> .row.page-leftcol) { max-width: 1400px; } }
body:not(#category) .container:has(> .row.page-leftcol) { padding-left: 0; padding-right: 0; }

.row.page-leftcol #left-column {
  float: left;
  width: 19.3%;
  max-width: none;
  padding: 0;
  margin: 0; }

.row.page-leftcol {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  line-height: 24px;
  letter-spacing: 0.5px;
  color: #000; }

.row.page-leftcol ul { list-style: none; padding-left: 0; margin: 0; }

.row.page-leftcol a { text-decoration: none; }

.row.page-leftcol #search_filters_wrapper.block { border: 1px solid rgba(0, 157, 224, 0.5);   /* live cascade ends here (Verfspot shared-file override beats the theme's 3px #d13925) */ }

.row.page-leftcol #search_filters {
  background: transparent;
  padding: 15px 10px;
  margin-bottom: 0;
  box-shadow: none; }

.row.page-leftcol #search_filters > .text-uppercase.h6 {
  color: #000;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0 0 8px; }

.row.page-leftcol #search_filters .facet { padding-top: 0.625rem; overflow: hidden; }

.row.page-leftcol #search_filters .facet .collapse { display: block; }

.row.page-leftcol #search_filters .facet .facet-title {
  color: #000;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.1;
  margin: 5px 0 10px; }

.row.page-leftcol #search_filters .facet ul { margin: 0 0 16px; padding: 0; list-style: none; }

.row.page-leftcol #search_filters .facet .facet-label {
  margin-bottom: 0;
  font-weight: normal;
  text-align: left;
  line-height: normal; }

.row.page-leftcol #search_filters .facet .facet-label a {
  margin-top: 0;
  display: inline-block;
  font-size: 13px;
  color: #444; }

.row.page-leftcol #search_filters .facet .facet-label a .magnitude { color: #444; }

.row.page-leftcol #search_filters .custom-checkbox { display: inline; width: auto; position: relative; }

.row.page-leftcol #search_filters .custom-checkbox input { opacity: 0; position: absolute; width: 13px; height: 13px; margin: 4px 0 0; cursor: pointer; }

.row.page-leftcol #search_filters .custom-checkbox .material-icons { display: none; }

.row.page-leftcol #search_filters .facet-label .ps-shown-by-js {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 3px 0 0;
  vertical-align: middle;
  border: 1px solid #bbb;
  box-sizing: border-box;
  background: transparent; }

.row.page-leftcol #search_filters .js-search-filters-clear-all {
  background: none;
  border: 0;
  color: #000;
  font-weight: normal;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
  font-size: 13px;
  text-transform: capitalize; }

.row.page-leftcol #search_filters .navbar-toggler .material-icons { color: #000; }

.row.page-leftcol #left-column .block { float: left; width: 100%; }

.row.page-leftcol #left-column .block-categories.block {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 30px;
  border: 1px solid rgba(0, 157, 224, 0.5);   /* live cascade ends here (Verfspot shared-file override beats the theme's 3px #d13925) */
  border-radius: 5px;
  background: transparent;      /* live block bg is transparent (rgba(0,0,0,0)) */ }

.row.page-leftcol .block-categories .block_title {
  color: #000;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.8px;
  margin: 0;
  padding: 16px;
  text-transform: capitalize;
  border-bottom: 2px solid #f0f0f0; }

.row.page-leftcol .block-categories > .block_content {
  display: block;
  padding: 15px 10px; }

.row.page-leftcol .block-categories .category-top-menu { margin-bottom: 0; }

.row.page-leftcol .block-categories .category-sub-menu { margin-top: 0; }

.row.page-leftcol .block-categories .category-sub-menu .category-sub-link { font-size: 13px; }

.row.page-leftcol .block-categories .category-sub-menu li { position: relative; }

.row.page-leftcol .block-categories .category-sub-menu li > a {
  width: 100%;
  display: inline-block;
  padding: 5px 0;
  font-size: 13px; }

.row.page-leftcol .block-categories .category-sub-menu li[data-depth="1"] > a {
  padding-left: 15px;
  position: relative; }

.row.page-leftcol .block-categories .category-sub-menu li:not([data-depth="0"]):not([data-depth="1"]) a { padding-left: 20px; }

.row.page-leftcol .block-categories .category-sub-menu li:not([data-depth="0"]):not([data-depth="1"]) a::before {
  content: "-";
  margin-right: 0.3125rem; }

.row.page-leftcol #left-column .block-categories a { color: #444; text-transform: none; }

.row.page-leftcol .block-categories .material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased; }

.row.page-leftcol .block-categories .block_content .collapse-icons {
  position: absolute;
  right: 0;
  top: 12px;
  padding: 0;
  cursor: pointer;
  border: 0; }

.row.page-leftcol .block-categories .block_content .collapse-icons i { width: 18px; height: 18px; font-size: 15px; color: #333; }

.row.page-leftcol .block-categories .block_content .collapse-icons .remove { display: none; }

.row.page-leftcol .block-categories .block_content .arrows .arrow-right,
.row.page-leftcol .block-categories .block_content .arrows .arrow-down {
  font-size: 15px;
  cursor: pointer;
  margin-left: 0;
  position: absolute;
  right: 2px;
  color: #333;
  top: 10px; }

.row.page-leftcol #left-column #tmleftbanner {
  float: left;
  width: 100%;
  height: auto;   /* live declares none — the banner image drives it */
  margin: 0 0 30px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  overflow: hidden;
  position: relative; }

.row.page-leftcol #left-column #tmleftbanner ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none; }
.row.page-leftcol #left-column #tmleftbanner li {
  /* live: li.slide is inline-block, which is what gives the ul its +8px baseline
     descender (ul 394 vs li 386). It was lumped in with the ul at display:block. */
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none; }

.row.page-leftcol #left-column #tmleftbanner a {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  line-height: 24px;
  color: #444; }

.row.page-leftcol #left-column #tmleftbanner img {
  display: inline;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 0;
  line-height: 24px;
  color: #444; }

/* REMOVED 2026-07-29 — these two rules hid the SECOND left banner ("Gratis verzending" /
   #tmleftbanner1) on the HOMEPAGE, because .row.page-leftcol is this theme's own class for the
   home layout. They were mis-scoped ports of live's rule, which is page-specific:
       #category #tmleftbanner1{display:none}        <- category pages ONLY
   Measured on live's homepage: #tmleftbanner 270x394 AND #tmleftbanner1 270x410, both visible.
   Staged had #tmleftbanner1 at 0x0 display:none. The "herdenk banner" comment came from the
   ammusic port — that was ammusic's banner, not Bergsma's. */
/* responsive: same guards as the named pages */
@media (max-width: 1449px) {
  .row.page-leftcol #center-column { width: 77.5%; }
}
@media (max-width: 991px) {
  .row.page-leftcol #left-column { float: none; width: 100%; max-width: 100%; }
  .row.page-leftcol #center-column { float: none; width: 100%; margin: 0; }
}

/* =====================================================================
 * LOGIN PAGE (#authentication) — matched to live's computed styles:
 * small uppercase title + crumbs right (no breadcrumb band), bordered box,
 * horizontal label/input rows, navy WEERGEVEN + INLOGGEN.
 * ===================================================================== */
#authentication nav.breadcrumb__wrapper { display: none; }
/* live positions the title bar at y=245: #wrapper padding-top 30 (global on
   live) + the bar's 5px top margin — same offsets as the breadcrumb bar */
#authentication #wrapper, #registration #wrapper, #password #wrapper,
#my-account #wrapper, #identity #wrapper, #history #wrapper, #addresses #wrapper,
#address #wrapper, #order-detail #wrapper, #order-slip #wrapper, #discount #wrapper,
#order-follow #wrapper { padding-top: 30px; }
#authentication .auth-title-row { margin: 5px 0 18px; }
#authentication .auth-title {
  float: left; margin: 0;
  font: 600 16px/24px "Poppins", sans-serif;
  text-transform: uppercase; letter-spacing: 0.5px; color: #000;
}
#authentication .auth-breadcrumb {
  float: right; list-style: none; margin: 0; padding: 0; font-size: 13px; color: #000;
}
#authentication .auth-breadcrumb li { display: inline; }
#authentication .auth-breadcrumb a { color: #000; text-decoration: none; }
#authentication .auth-breadcrumb a:hover { color: #d13925; }

#authentication .auth-box {
  border: 1px solid #f0f0f0; border-radius: 5px; padding: 30px; background: #fff;
}
#authentication .auth-row { margin: 0 0 15px; display: block; }
#authentication .auth-row::after { content: ""; display: table; clear: both; }
#authentication .auth-label {
  float: left; width: 264px; padding-right: 15px; margin: 0;
  font-size: 13px; font-weight: 500; text-align: right; color: #000; line-height: 36px;
}
#authentication .auth-label.required::after { content: ""; }
#authentication .auth-input { float: left; width: 607px; max-width: calc(100% - 264px); display: flex; }
#authentication .auth-input .form-control {
  height: 36px; border: 1px solid #bbb; border-radius: 0; font-size: 13px;
  padding: 6px 12px; box-shadow: none; flex: 0 0 509px; max-width: 100%;
}
#authentication .auth-show-pass {
  background: #d13925; color: #fff; border: 1px solid #d13925; border-radius: 0;
  font-size: 11px; text-transform: uppercase; padding: 6px 12px; height: 36px;
  line-height: 1; letter-spacing: 0.5px; flex: 0 0 auto;
}
#authentication .forgot-password { text-align: center; font-size: 13px; margin: 16px 0 0; }
#authentication .forgot-password a { color: #000; }
#authentication .forgot-password a:hover { color: #d13925; }
#authentication .auth-footer { text-align: center; margin: 15px 0 0; }
#authentication #submit-login {
  background: #d13925; border: 1px solid #d13925; color: #fff; border-radius: 5px;
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.7px;
  padding: 6px 20px 5px; line-height: 24px;
}
#authentication .no-account { text-align: center; font-size: 14px; margin: 16px 0 0; }
#authentication .no-account a { color: #000; text-decoration: none; }
#authentication .no-account a:hover { color: #d13925; }
@media (max-width: 767px) {
  #authentication .auth-label { float: none; width: 100%; text-align: left; line-height: 20px; margin-bottom: 4px; }
  #authentication .auth-input { float: none; width: 100%; }
}

/* =====================================================================
 * CUSTOMER / ACCOUNT PAGES — matched to live (classic-1.7 look):
 * small uppercase title + crumbs right, bordered box, horizontal forms,
 * navy buttons, my-account link tiles. Scope: all customer body ids.
 * ===================================================================== */
#password nav.breadcrumb__wrapper, #registration nav.breadcrumb__wrapper,
#my-account nav.breadcrumb__wrapper, #identity nav.breadcrumb__wrapper,
#addresses nav.breadcrumb__wrapper, #address nav.breadcrumb__wrapper,
#history nav.breadcrumb__wrapper, #order-detail nav.breadcrumb__wrapper,
#order-slip nav.breadcrumb__wrapper, #discount nav.breadcrumb__wrapper,
#order-follow nav.breadcrumb__wrapper, #guest-tracking nav.breadcrumb__wrapper { display: none; }

.acct-title-row { margin: 5px 0 18px; }
.acct-title {
  float: left; margin: 0;
  font: 600 16px/24px "Poppins", sans-serif;
  text-transform: uppercase; letter-spacing: 0.5px; color: #000;
}
.acct-breadcrumb { float: right; list-style: none; margin: 0; padding: 0; font-size: 13px; color: #000; }
.acct-breadcrumb li { display: inline; }
.acct-breadcrumb a { color: #000; text-decoration: none; }
.acct-breadcrumb a:hover { color: #d13925; }

.acct-box { border: 1px solid #f0f0f0; border-radius: 5px; padding: 30px; background: #fff; }
#registration #content.page-content, #password #content.page-content {
  border: 1px solid #f0f0f0; border-radius: 5px; padding: 30px; background: #fff;
}
/* registration/password use the root page.tpl — give them the title treatment too */
#registration .page-header, #password .page-header { margin: 0 0 18px; }
#registration .page-header h1, #password .page-header h1,
#registration .page-title-section, #password .page-title-section {
  font: 600 16px/24px "Poppins", sans-serif; text-transform: uppercase;
  letter-spacing: 0.5px; color: #000; margin: 0; text-align: left;
}

/* ---- classic horizontal form rows (registration, identity, address, password) ---- */
#registration .form-group.row, #password .form-group,
#identity .form-group.row, #address .form-group.row {
  display: block; margin: 0 0 15px;
}
#registration .form-group.row::after, #identity .form-group.row::after,
#address .form-group.row::after, #password .form-group::after {
  content: ""; display: table; clear: both;
}
#registration .form-control-label, #password .form-control-label,
#identity .form-control-label, #address .form-control-label {
  float: left; width: 264px; padding: 0 15px 0 0; margin: 0;
  font-size: 13px; font-weight: 500; text-align: right; color: #000; line-height: 36px;
}
#registration .form-group.row > div[class*="col-"],
#identity .form-group.row > div[class*="col-"],
#address .form-group.row > div[class*="col-"] {
  float: left; width: 607px; max-width: calc(100% - 264px); padding: 0; flex: none;
}
#registration label.form-control-label, #identity label.form-control-label,
#address label.form-control-label { width: 264px; }
#registration input.form-control, #password input.form-control,
#identity input.form-control, #address input.form-control,
#registration select.form-control, #identity select.form-control, #address select.form-control {
  height: 36px; border: 1px solid #bbb; border-radius: 0; font-size: 13px;
  padding: 6px 12px; box-shadow: none; width: 509px; max-width: 100%;
}
#registration .input-group, #identity .input-group, #address .input-group {
  display: flex; width: 607px; max-width: 100%; flex-wrap: nowrap;
}
#registration .input-group .form-control, #identity .input-group .form-control,
#address .input-group .form-control { width: auto; flex: 1 1 auto; }
#registration [data-action="show-password"], #identity [data-action="show-password"],
#address [data-action="show-password"] {
  background: #d13925; color: #fff; border: 1px solid #d13925; border-radius: 0;
  font-size: 11px; text-transform: uppercase; padding: 6px 12px; height: 36px;
  line-height: 1; letter-spacing: 0.5px; flex: 0 0 auto;
}
#registration .radio-inline, #identity .radio-inline { line-height: 36px; margin-right: 14px; font-size: 13px; }
#registration .form-footer, #identity .form-footer, #address .form-footer { margin-top: 15px; }
#registration .float-end, #identity .float-end, #address .float-end { float: right; }
#registration .btn-primary, #password .btn-primary, #identity .btn-primary,
#address .btn-primary, #my-account .btn-primary, #history .btn-primary,
#order-detail .btn-primary, #guest-tracking .btn-primary {
  background: #d13925; border: 1px solid #d13925; color: #fff; border-radius: 5px;
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.7px;
  padding: 6px 20px 5px; line-height: 24px;
}

/* ---- password (forgot) page: label + email + button on one row, like live ---- */
#password .center-email-fields > .form-control-label { width: 264px; }
#password .center-email-fields .email { float: left; width: 412px; max-width: calc(100% - 264px); padding: 0; }
#password .center-email-fields button { float: left; margin: 0 0 0 12px; }
#password .send-renew-password-link { font-size: 13px; margin: 0 0 18px; }

/* ---- my-account dashboard tiles (live/classic look, old theme paddings) ---- */
#my-account #content .links { display: flex; flex-wrap: wrap; }
#my-account #content .links a { padding: 0 10px; font-size: 15px; width: 33.333%; text-align: center; color: #414141; margin: 0 0 20px; text-decoration: none; }
#my-account #content .links a .link-item { display: block; height: 100%; padding: 20px 10px; background: #fff; box-shadow: 2px 2px 11px 0 rgba(0,0,0,0.1); }
#my-account #content .links a i { display: block; font-size: 44px; margin: 0 auto 10px; color: #d13925; }
#my-account #content .links a:hover { color: #d13925; }
@media (max-width: 991px) { #my-account #content .links a { width: 50%; } }
@media (max-width: 543px) { #my-account #content .links a { width: 100%; } }
.acct-signout { text-align: center; margin: 20px 0 0; }
.acct-page-footer { margin: 20px 0 0; text-align: center; font-size: 13px; }
@media (max-width: 767px) {
  #registration .form-control-label, #password .form-control-label,
  #identity .form-control-label, #address .form-control-label {
    float: none; width: 100%; text-align: left; line-height: 20px; margin-bottom: 4px;
  }
  #registration .form-group.row > div[class*="col-"], #identity .form-group.row > div[class*="col-"],
  #address .form-group.row > div[class*="col-"], #password .center-email-fields .email {
    float: none; width: 100%;
  }
}

/* =====================================================================
 * CUSTOMER LIST/DETAIL PAGES — history, addresses, order-detail.
 * These templates use classic (BS3/4) classes Hummingbird's BS5 doesn't
 * style (.label/.label-pill, .table-labeled, .thead-default, .box,
 * .address). Reproduce the live/classic look, navy accents.
 * Scope: #history, #addresses, #address, #order-detail.
 * ===================================================================== */
#history .page-content, #addresses .page-content,
#address .page-content, #order-detail .page-content { color: #414141; font-size: 14px; }

/* ---- tables (order history + order-detail history/carriers) ---- */
#history table.table, #order-detail table.table {
  width: 100%; margin: 0 0 20px; border-collapse: collapse; background: #fff; font-size: 13px;
}
#history table.table th, #order-detail table.table th,
#history table.table td, #order-detail table.table td {
  padding: 10px 12px; border: 1px solid #f0f0f0; vertical-align: middle; text-align: left;
}
#history .thead-default th, #order-detail .thead-default th {
  background: #d13925; color: #fff; font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.5px; border-color: #d13925;
}
#history table.table-striped tbody tr:nth-child(odd),
#order-detail table.table-striped tbody tr:nth-child(odd) { background: #f8f8f8; }
#history table .text-end { text-align: right; }
#history table .text-center { text-align: center; }
#history .order-actions a { display: inline-block; margin: 0 6px; color: #d13925; font-weight: 500; text-decoration: none; }
#history .order-actions a:hover { text-decoration: underline; }
#history table .material-icons { font-size: 20px; vertical-align: middle; color: #d13925; }

/* ---- status pills (.label.label-pill — bg set inline by presenter) ----
   SHARED-REGION + WHITE-ON-WHITE FIX 2026-07-29. These were page-id-scoped
   (`#order-detail .label`), which reaches EVERY `.label` on the page — including
   `order-detail-no-return.tpl:65` / `order-detail-return.tpl:78`, which use
   `class="col-sm-3 col-4 label"` for an ordinary FIELD LABEL. Those got
   `color:#fff` on a white background = invisible text (REBUILD-TODO
   "pre-existing bug 2"). Now scoped to `#content` AND narrowed to the pill's own
   `.label-pill`, which is what the status presenter actually emits, so a plain
   `.label` field label is untouched. `#footer`/`#header` are siblings of
   `#wrapper`, so `#content` also cannot leak into the shared regions. */
#history #content .label.label-pill,
#order-detail #content .label.label-pill {
  display: inline-block; padding: 4px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 600; line-height: 1.2; color: #fff; white-space: nowrap;
}
#history #content .label-pill, #order-detail #content .label-pill { border-radius: 12px; }

/* ---- boxes (order-detail sections) ---- scoped to #content: `.box` is generic
   and a bare `#order-detail .box` would also paint any `.box` a module drops
   into the header/footer on that page. */
#order-detail #content .box {
  border: 1px solid #f0f0f0; border-radius: 5px; padding: 20px; margin: 0 0 20px; background: #fff; overflow: auto;
}
#order-detail #order-infos { display: block; }
#order-detail #order-infos .box ul { list-style: none; margin: 0; padding: 0; }
#order-detail #order-infos .box li { padding: 3px 0; }
#order-detail h3 { font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #000; margin: 0 0 14px; }
#order-detail h4 { font-size: 14px; font-weight: 600; color: #000; margin: 0 0 10px; }
#order-detail .addresses { display: flex; flex-wrap: wrap; margin: 0 -10px; }
#order-detail .addresses > [class*="col-"] { padding: 0 10px; }
#order-detail address { font-style: normal; line-height: 1.6; margin: 0; }
#order-detail .button-primary, #order-detail a.button-primary {
  display: inline-block; background: #d13925; color: #fff; border-radius: 5px; padding: 6px 16px;
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.7px; text-decoration: none;
}

/* ---- address cards (.address / .addresses list) ---- */
#addresses .page-content { display: flex; flex-wrap: wrap; margin: 0 -10px; }
#addresses .page-content > [class*="col-"] { padding: 0 10px; margin: 0 0 20px; }
#addresses .addresses-footer { width: 100%; padding: 0 10px; clear: both; }
/* FIXED 2026-07-29. The previous scoping (#addresses/.address, #address/.address,
   #order-detail/.address) did NOT work: a body-id scope does not exclude the FOOTER, because the
   footer is rendered on those pages too. ps_contactinfo emits <li class="address"> in the footer,
   so it inherited this white card — border, 20px padding, background:#fff, height:100% — over a
   red footer, which read as an empty input box with invisible text. Reported on ?controller=
   order-detail. Now scoped to #content, which the footer sits OUTSIDE of (#footer is a sibling of
   #wrapper, not a descendant).
   GENERAL RULE: a generic class name scoped only by page id still collides with shared regions
   contact block's <li class="address"> (ps_contactinfo) and painted a white
   card over the footer address — never leave this unscoped. */
#addresses #content .address, #address #content .address, #order-detail #content .address {
  border: 1px solid #f0f0f0; border-radius: 5px; padding: 20px; background: #fff; height: 100%;
}
#addresses #content .address .address-body h4, #address #content .address .address-body h4, #order-detail #content .address .address-body h4 { font-size: 15px; font-weight: 600; color: #000; margin: 0 0 10px; }
#addresses #content .address .address-body address, #address #content .address .address-body address, #order-detail #content .address .address-body address { font-style: normal; line-height: 1.6; margin: 0 0 14px; color: #414141; }
#addresses #content .address .address-footer, #address #content .address .address-footer, #order-detail #content .address .address-footer { display: flex; gap: 16px; border-top: 1px solid #f0f0f0; padding-top: 12px; }
#addresses #content .address .address-footer a, #address #content .address .address-footer a, #order-detail #content .address .address-footer a { color: #d13925; text-decoration: none; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
#addresses #content .address .address-footer a:hover, #address #content .address .address-footer a:hover, #order-detail #content .address .address-footer a:hover { text-decoration: underline; }
#addresses #content .address .address-footer .material-icons, #address #content .address .address-footer .material-icons, #order-detail #content .address .address-footer .material-icons { font-size: 18px; }
#addresses .addresses-footer a { display: inline-flex; align-items: center; gap: 6px; color: #d13925; font-weight: 600; text-decoration: none; font-size: 14px; }
#addresses .addresses-footer a:hover { text-decoration: underline; }

/* mobile card variants for order history */
#history .orders .order { border: 1px solid #f0f0f0; border-radius: 5px; padding: 16px; margin: 0 0 12px; }
#history .orders .order h3 { font-size: 15px; margin: 0 0 6px; }

/* =====================================================================
 * NAVBAR CART DROPDOWN (mini-cart) — ported from the old theme. The markup
 * (.cart_block.dropdown-menu inside #_desktop_cart) was ported but its CSS
 * wasn't, and it used BS4 data-toggle; custom.js slides it open/closed on
 * click (same 'fast' slide as the header account dropdown).
 * ===================================================================== */
#header #_desktop_cart .blockcart { position: relative; }
#header #_desktop_cart .cart_block {
  display: none; position: absolute; right: -16px; top: 100%; margin-top: 6px;
  width: 270px; background: #fff; border: 1px solid #f0f0f0; border-radius: 5px;
  box-shadow: 0 2px 11px rgba(0,0,0,0.1); z-index: 9999; padding: 0; text-align: left;
}
#header #_desktop_cart .cart_block.show { display: block; }
#header #_desktop_cart .cart_block_list { max-height: 300px; overflow: auto; }
#header #_desktop_cart .cart-item { padding: 10px; overflow: hidden; border-bottom: 1px solid #f0f0f0; margin: 0; }
#header #_desktop_cart .cart-item:last-child { border-bottom: 0; }
#header #_desktop_cart .cart-item .cart-image { display: inline-block; float: left; margin-right: 12px; border: 1px solid #f0f0f0; height: auto; margin-top: 0; }
#header #_desktop_cart .cart-item .cart-image img { width: 100%; height: auto; display: block; }
#header #_desktop_cart .cart-info { overflow: hidden; position: relative; padding-right: 20px; }
#header #_desktop_cart .cart-info .product-quantity { display: inline-block; text-transform: uppercase; padding-right: 5px; font-size: 13px; }
#header #_desktop_cart .cart-info .product-name { font-size: 13px; line-height: 18px; display: inline-block; }
#header #_desktop_cart .cart-info .product-name a { color: #414141; text-decoration: none; }
#header #_desktop_cart .cart-info .product-price { display: block; font-size: 14px; font-weight: 600; color: #000; }
#header #_desktop_cart .cart-info .remove-from-cart { position: absolute; right: 0; top: 4px; color: #1f1f1f; }
#header #_desktop_cart .cart-info .remove-from-cart .material-icons { font-size: 18px; }
#header #_desktop_cart .cart-summary-line { overflow: hidden; padding: 2px 15px; font-size: 13px; }
#header #_desktop_cart .cart-summary-line .label { float: left; color: #414141; }
#header #_desktop_cart .cart-summary-line .value { float: right; color: #000; font-weight: 600; }
#header #_desktop_cart .cart-summary-line.cart-total { border-top: 1px solid #f0f0f0; padding-top: 8px; margin-top: 4px; }
#header #_desktop_cart .checkout.card-block { padding: 12px 15px; text-align: center; }
#header #_desktop_cart .checkout .viewcart { display: block; }
#header #_desktop_cart .checkout .btn-primary {
  width: 100%; background: #d13925; border: 1px solid #d13925; color: #fff;
  text-transform: uppercase; font-size: 13px; font-weight: 600; letter-spacing: 0.7px;
  border-radius: 5px; padding: 8px; cursor: pointer;
}

/* =====================================================================
 * CHECKOUT — ported from live: PARENT (PRS080193_06) theme.css blocks first,
 * then the ammusic CHILD theme.css overrides (live's cascade order — navy
 * buttons etc.). Each extracted range brace-balanced so a mid-rule cut can
 * never swallow later rules. Structure: templates/checkout/*.
 * ===================================================================== */
body#checkout {
    color: #000;
}

#checkout .col-md-8 {
  margin-bottom: 20px;
  width: 54.5%;
  padding: 0 15px;
}
#checkout #content .col-md-4 {
  width: 24%;
  padding:0; 

}
body#checkout [data-action="show-password"] {
  background: #d13925 none repeat scroll 0 0;
}
body#checkout [data-action="show-password"]:hover {
  background: #1f1f1f;
  color:#fff;
}
body#checkout .custom-checkbox {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
}
body#checkout .custom-checkbox span {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 15px;
    -moz-flex: 0 0 15px;
    -ms-flex: 0 0 15px;
    flex: 0 0 15px;
    margin-top: 6px;
    margin-right: 8px;
}
body#checkout a:hover {
}
body#checkout section#content {
    margin-bottom: 1.5625rem;
}
body#checkout .container {
   /* min-height: 100%;*/
}
body#checkout section.checkout-step {
    
    background-color: #FFFFFF;
    border: 1px #f0f0f0 solid;
    padding: 15px;
     border-radius: 5px;
      -webkit-border-radius: 5px;
     -khtml-border-radius: 5px;
     -moz-border-radius: 5px;
     -o-border-radius: 5px;
     margin-bottom: 20px;
}
body#checkout section.checkout-step .step-title {
    text-transform: uppercase;
    cursor: pointer;
    font-size: 16px;
    margin-bottom: 0;
    font-weight: 600;
}
body#checkout section.checkout-step .content {
    padding: 0 2.3125rem;
}
body#checkout section.checkout-step .step-edit {
    text-transform: lowercase;
    font-weight: normal;
}
body#checkout section.checkout-step .step-edit .edit {
    font-size: 1rem;
}
body#checkout section.checkout-step .not-allowed {
    cursor: not-allowed;
    opacity: 0.5;
     -khtml-opacity: 0.5;
    -webkit-opacity: 0.5;
    -moz-opacity: 0.5;
    -ms-opacity: 0.5;
-o-opacity: 0.5;
}
body#checkout section.checkout-step .content,
body#checkout section.checkout-step .done,
body#checkout section.checkout-step .step-edit {
    display: none;
}
body#checkout section.checkout-step.-current .content {
    display: block;
}
#js-checkout-summary .card-block .cart-summary-products a, #conditions-to-approve .condition-label .js-terms a {
  color: #d13925;
}
#js-checkout-summary .card-block .cart-summary-products a:hover, #conditions-to-approve .condition-label .js-terms a:hover {
  color: #1f1f1f;
}
body#checkout section.checkout-step.-current.-reachable.-complete .done,
body#checkout section.checkout-step.-current.-reachable.-complete .step-edit {
    display: none;
}
body#checkout section.checkout-step.-current.-reachable.-complete .step-number {
    display: inline-block;
}
    body#checkout section.checkout-step.-current.-reachable.-complete .content {
    display: block;
}
#checkout #delivery #delivery_message {
  float: left;
  margin-bottom: 20px;
  width: 100%;
}
#checkout #delivery > label {
  text-align: left;
}
body#checkout section.checkout-step.-reachable.-complete h1 .done {
    display: inline-block;
}
body#checkout section.checkout-step.-reachable.-complete h1 .step-number {
    display: none;
}
body#checkout section.checkout-step.-reachable.-complete h1 .step-edit {
    cursor: pointer;
    display: block;
    float: right;
    margin-right: 0.125rem;
    text-transform: capitalize;
    font-weight: 500;
    
}
body#checkout section.checkout-step.-reachable.-complete .content {
    display: none;
}
body#checkout section.checkout-step small {
    color: #acaaa6;
}
body#checkout section.checkout-step .default-input {
    min-width: 40%;
}
body#checkout section.checkout-step .default-input[name=address1],
body#checkout section.checkout-step .default-input[name=address2] {
    min-width: 60%;
}
body#checkout section.checkout-step .radio-field {
    margin-top: 1.875rem;
}
body#checkout section.checkout-step .radio-field label {
    display: inline;
}
body#checkout section.checkout-step .checkbox-field div {
    margin-top: 3.75rem;
}
body#checkout section.checkout-step .checkbox-field + .checkbox-field div {
    margin-top: 0;
}
body#checkout section.checkout-step .select-field div {
    background: #f6f6f6;
    padding: 0.625rem 3.125rem;
}
body#checkout section.checkout-step .form-footer {
    text-align: center;
}
body#checkout section.checkout-step #conditions-to-approve {
    padding-top: 1rem;
}
body#checkout section.checkout-step .payment-options label {
    display: table-cell;
}
body#checkout section.checkout-step .payment-options .custom-radio {
    margin-right: 15px;
    margin-top: 6px;
}
body#checkout section.checkout-step .payment-options .payment-option {
    margin-bottom: 0.5rem;
}
body#checkout section.checkout-step .step-number {
    display: inline-block;
    padding: 0.625rem;
}
body#checkout section.checkout-step .address-selector {}
/* [range 7085-7269 balanced +1] */
body#checkout section.checkout-step .address-item {
    border: 1px solid #f0f0f0;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 60%;
    -moz-flex: 0 0 60%;
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    margin-bottom: 15px;
}
body#checkout section.checkout-step .address-item .h4{ 
    font-size:14px; 
    line-height: 24px;
}
body#checkout section.checkout-step .address-item.selected {
    background: #FFFFFF;
    border-color: #ddd;
}
body#checkout section.checkout-step .address-alias {
    display: inline-block;
    font-weight: 600;
    margin-bottom: 0.625rem;
}
body#checkout section.checkout-step .address {
    margin-left: 1.5625rem;
    font-weight: normal;
}
body#checkout section.checkout-step .radio-block {
    padding: 20px;
    text-align: left;
}
body#checkout section.checkout-step .custom-radio {
    margin-right: 4px;
    margin-top: 0;
}
body#checkout section.checkout-step .address-item .custom-radio{
    margin-right: 5px;
    margin-top: 0px;
}
body#checkout section.checkout-step .custom-radio input[type="radio"] {
    height: 1.25rem;
    width: 1.25rem;
}
body#checkout section.checkout-step .delete-address,
body#checkout section.checkout-step .edit-address {
    display: inline-block;
    margin: 0 10px;
}
body#checkout section.checkout-step .delete-address .delete,
body#checkout section.checkout-step .delete-address .edit,
body#checkout section.checkout-step .edit-address .delete,
body#checkout section.checkout-step .edit-address .edit {
    font-size: 1rem;
    padding-right: 22px;
}
body#checkout section.checkout-step hr {
    margin: 0;
}
body#checkout section.checkout-step .address-footer {
    padding: 0 40px 20px;
    text-align: left;
}
body#checkout section.checkout-step #delivery-addresses,
body#checkout section.checkout-step #invoice-addresses {
    margin-top: 1.25rem;
}
body#checkout section.checkout-step .add-address {
    margin-top: 1.25rem;
}
body#checkout section.checkout-step .add-address a {
    color: #000;
}
body#checkout section.checkout-step .add-address a i {
    font-size: 0.9375rem;
}
body#checkout section.checkout-step .delivery-option {
    padding: 10px 0;
    margin: 15px 0;
    border: 1px solid #f0f0f0;
}
body#checkout section.checkout-step .delivery-option .custom-radio{
    margin-top: 12px;
}
body#checkout section.checkout-step .delivery-option label {
    text-align: inherit;
}
body#checkout section.checkout-step .carrier-delay,
body#checkout section.checkout-step .carrier-name {
    display: inline-block;
    word-break: break-word;
    text-align: left;
}
body#checkout section.checkout-step #customer-form,
body#checkout section.checkout-step #delivery-address,
body#checkout section.checkout-step #invoice-address,
body#checkout section.checkout-step #login-form {
    margin-left: 0.3125rem;
    margin-top: 1.5625rem;
}
body#checkout section.checkout-step #customer-form .form-control-label,
body#checkout section.checkout-step #delivery-address .form-control-label,
body#checkout section.checkout-step #invoice-address .form-control-label,
body#checkout section.checkout-step #login-form .form-control-label {
    text-align: left;
}
body#checkout section.checkout-step #customer-form .radio-inline,
body#checkout section.checkout-step #delivery-address .radio-inline,
body#checkout section.checkout-step #invoice-address .radio-inline,
body#checkout section.checkout-step #login-form .radio-inline {
    padding: 0;
}
body#checkout section.checkout-step .sign-in {
    font-size: 0.875rem;
}
body#checkout section.checkout-step .forgot-password {
  margin: 0 auto;
  text-align: center;
}
body#checkout .additional-information {
    font-size: 0.875rem;
    margin-left: 2.875rem;
    margin-top: 1.25rem;
}
body#checkout .condition-label {
    margin-left: 2.5rem;
    margin-top: 0.625rem;
}
body#checkout .condition-label label {
    text-align: inherit;
}
body#checkout .cancel-address {
    margin: 0.625rem;
    display: block;
    color: #878787;
    text-decoration: underline;
}
body#checkout .cancel-address:hover, body#checkout section.checkout-step .add-address a:hover { color: #d13925;}
body#checkout .modal-content {
    padding: 1.25rem;
    background-color: #ebebeb;
}
body#checkout #cart-summary-product-list {
    font-size: 0.875rem;
}
body#checkout #cart-summary-product-list img {
    border: 1px solid #f0f0f0;
    width: 3.125rem;
}
body#checkout #cart-summary-product-list .media-body {
    vertical-align: middle;
    display: inline-block;
}
body#checkout #order-summary-content {
    padding-top: 0.9375rem;
}
body#checkout #order-summary-content h4.h4 {
    margin-top: 0.625rem;
    margin-bottom: 1.25rem;
    color: #414141;
}
body#checkout #order-summary-content h4.black {
    color: #000000;
}
body#checkout #order-summary-content h4.addresshead {
    margin-top: 0.1875rem;
}
body#checkout #order-summary-content .noshadow {
    box-shadow: none;
   -moz-box-shadow: none;
  -webkit-box-shadow: none;
    border-bottom: 0;
}
body#checkout #order-summary-content #order-items {
    border-right: 0;
}
body#checkout #order-summary-content #order-items h3.h3 {
    color: #414141;
    margin-top: 1.25rem;
}
body#checkout #order-summary-content #order-items table tr:first-child td {
    border-top: 0;
}
body#checkout #order-summary-content .order-confirmation-table {
    padding: 1rem;
    margin-bottom: 2rem;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 0;
     -webkit-border-radius: 0;
    -khtml-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
}
body#checkout #order-summary-content .summary-selected-carrier {
    margin-bottom: 0.75rem;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 0;
     -webkit-border-radius: 0;
    -khtml-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    padding: 1rem;
}
body#checkout #order-summary-content .step-edit {
    display: inline;
    text-transform: capitalize;
}
body#checkout #order-summary-content .step-edit:hover {
    cursor: pointer;
}
body#checkout #order-summary-content a .step-edit {
     
}
body#checkout #gift_message {
    max-width: 100%;
    border-color: #414141;
}

/**** ORDER CONFIRMATION *****/

#order-details {
    padding-left: 1.875rem;
}
#order-details > .card-title {
    margin-bottom: 1.875rem;
}
#order-details ul {
    margin-bottom: 1.25rem;
}
#order-details ul li {
    margin-bottom: 0.625rem;
}
#order-items {
    border-right: #ddd 1px solid;
}
#order-items hr {
   
}
#order-items table {
    width: 100%;
}
#order-items table tr {
    height: 1.875rem;
}
#order-items table tr td:last-child {
    text-align: right;
}
#order-items .order-line {
    margin-top: 0;
    padding: 15px 0 0;
    border-top: 1px solid #ddd;
}
#order-items .image img {
    width: 100%;
    border: 1px solid gray-lighter;
    margin-bottom: 1rem;
}
#order-items .details {
    margin-bottom: 1rem;
}
#order-items .details .customizations {
    margin-top: 0.625rem;
}
#order-items .qty {
    margin-bottom: 1rem;
}
#order-confirmation #registration-form {
    width: 50%;
    margin: 0 auto 1rem;
}

@media (max-width: 767px) {
    body#checkout section.checkout-step.-reachable.-complete h1 .step-edit {
        float: none;
        margin-top: 0.25rem;
        margin-left: 1.25rem;
    }
    body#checkout section.checkout-step .content {
        padding: 0.9375rem;
    }
    body#checkout .form-group {
        margin-bottom: 0.5rem;
    }
    #order-items {
        border-right: 0;
        margin-bottom: 2.5rem;
    }
    #order-items .card-title {
        border-bottom: 1px solid #ebebeb;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }
    #order-items hr {
        border-top-color: #ebebeb;
    }
    .bold {
        font-weight: bold;
    }
    #order-details {
        padding-left: 0.9375rem;
    }
    #order-details .card-title {
        border-bottom: 1px solid #ebebeb;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }
}
@media (max-width: 543px) {
    body#checkout section.checkout-step .content {}}
/* [range 7307-7617 balanced +2] */
.page-order-detail #order-infos ul {
    margin: 0;
}
.page-order-detail #order-history .history-lines .history-line {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f6f6f6;
}
.page-order-detail #order-history .history-lines .history-line:last-child {
    border-bottom: 0;
}
.page-order-detail #order-history .history-lines .history-line .label {
    display: inline-block;
    margin: 0.25rem 0;
    padding: 0.25rem 0.375rem;
    color: #FFFFFF;
    border-radius: 3px;
     -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
}
.page-order-detail .addresses {
    margin: 0 -0.9375rem;
}
.page-order-detail .addresses h4 {
    font-size: 1rem;
    font-weight: 700;
}
.page-order-detail #order-products.return {
    margin-bottom: 1rem;
}
.page-order-detail #order-products.return th.head-checkbox {
    width: 30px;
}
.page-order-detail #order-products.return td {
    padding: 1.375rem 0.75rem;
}
.page-order-detail #order-products.return td.qty {
    min-width: 125px;
}
.page-order-detail #order-products.return td.qty .current {
    width: 30%;
    float: left;
    text-align: right;
    padding-right: 0.5rem;
}
.page-order-detail #order-products.return td.qty .select {
    width: 70%;
    float: left;
    margin: -0.625rem 0;
    padding-left: 0.25rem;
}
.page-order-detail #order-products.return td.qty .select select {}
/* [range 7825-7877 balanced +1] */
.cart-summary-line {
    clear: both;
}
.cart-summary-line::after {
    content: "";
    display: table;
    clear: both;
}
.cart-summary-line .label {
    padding-left: 0;
    font-weight: normal;
    white-space: inherit;
    float: left;
    font-size: 13px;
}
.best-sales #search_filters_wrapper, .new-products #search_filters_wrapper, .prices-drop #search_filters_wrapper, .pagenotfound #search_filters_wrapper {
    display: none;
}
.cart-summary-line .value {
    color: #000;
    float: right !important;
}
.cart-summary-line.cart-summary-subtotals .label,
.cart-summary-line.cart-summary-subtotals .value {}
/* [range 11531-11554 balanced +1] */

/* ---- live CHILD theme overrides (must stay AFTER the parent block) ---- */
body#checkout {
    color: #000;
}

#checkout .col-md-8 {
  margin-bottom: 20px;
  width: 54.5%;
  padding: 0 15px;
}
#checkout #content .col-md-4 {
  width: 24%;
  padding:0; 

}
body#checkout [data-action="show-password"] {
  background: #d13925 none repeat scroll 0 0;
}
body#checkout [data-action="show-password"]:hover {
  background: #1f1f1f;
  color:#fff;
}
body#checkout .custom-checkbox {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
}
body#checkout .custom-checkbox span {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 15px;
    -moz-flex: 0 0 15px;
    -ms-flex: 0 0 15px;
    flex: 0 0 15px;
    margin-top: 6px;
    margin-right: 8px;
}
body#checkout section#content {
    margin-bottom: 1.5625rem;
}
body#checkout section.checkout-step {
    
    background-color: #FFFFFF;
    border: 1px #f0f0f0 solid;
    padding: 15px;
     border-radius: 5px;
      -webkit-border-radius: 5px;
     -khtml-border-radius: 5px;
     -moz-border-radius: 5px;
     -o-border-radius: 5px;
     margin-bottom: 20px;
}
body#checkout section.checkout-step .step-title {
    text-transform: uppercase;
    cursor: pointer;
    font-size: 16px;
    margin-bottom: 0;
    font-weight: 600;
}
body#checkout section.checkout-step .content {
    padding: 0 2.3125rem;
}
body#checkout section.checkout-step .step-edit {
    text-transform: lowercase;
    font-weight: normal;
}
body#checkout section.checkout-step .step-edit .edit {
    font-size: 1rem;
}
body#checkout section.checkout-step .not-allowed {
    cursor: not-allowed;
    opacity: 0.5;
     -khtml-opacity: 0.5;
    -webkit-opacity: 0.5;
    -moz-opacity: 0.5;
    -ms-opacity: 0.5;
-o-opacity: 0.5;
}
body#checkout section.checkout-step .content,
body#checkout section.checkout-step .done,
body#checkout section.checkout-step .step-edit {
    display: none;
}
body#checkout section.checkout-step.-current .content {
    display: block;
}
#js-checkout-summary .card-block .cart-summary-products a, #conditions-to-approve .condition-label .js-terms a {
  color: #d13925;
}
#js-checkout-summary .card-block .cart-summary-products a:hover, #conditions-to-approve .condition-label .js-terms a:hover {
  color: #1f1f1f;
}
body#checkout section.checkout-step.-current.-reachable.-complete .done,
body#checkout section.checkout-step.-current.-reachable.-complete .step-edit {
    display: none;
}
body#checkout section.checkout-step.-current.-reachable.-complete .step-number {
    display: inline-block;
}
    body#checkout section.checkout-step.-current.-reachable.-complete .content {
    display: block;
}
#checkout #delivery #delivery_message {
  float: left;
  margin-bottom: 20px;
  width: 100%;
}
#checkout #delivery > label {
  text-align: left;
}
body#checkout section.checkout-step.-reachable.-complete h1 .done {
    display: inline-block;
}
body#checkout section.checkout-step.-reachable.-complete h1 .step-number {
    display: none;
}
body#checkout section.checkout-step.-reachable.-complete h1 .step-edit {
    cursor: pointer;
    display: block;
    float: right;
    margin-right: 0.125rem;
    text-transform: capitalize;
    font-weight: 500;
    
}
body#checkout section.checkout-step.-reachable.-complete .content {
    display: none;
}
body#checkout section.checkout-step small {
    color: #acaaa6;
}
body#checkout section.checkout-step .default-input {
    min-width: 40%;
}
body#checkout section.checkout-step .default-input[name=address1],
body#checkout section.checkout-step .default-input[name=address2] {
    min-width: 60%;
}
body#checkout section.checkout-step .radio-field {
    margin-top: 1.875rem;
}
body#checkout section.checkout-step .radio-field label {
    display: inline;
}
body#checkout section.checkout-step .checkbox-field div {
    margin-top: 3.75rem;
}
body#checkout section.checkout-step .checkbox-field + .checkbox-field div {
    margin-top: 0;
}
body#checkout section.checkout-step .select-field div {
    background: #f6f6f6;
    padding: 0.625rem 3.125rem;
}
body#checkout section.checkout-step .form-footer {
    text-align: center;
}
body#checkout section.checkout-step #conditions-to-approve {
    padding-top: 1rem;
}
body#checkout section.checkout-step .payment-options label {
    display: table-cell;
}
body#checkout section.checkout-step .payment-options .custom-radio {
    margin-right: 15px;
    margin-top: 6px;
}
body#checkout section.checkout-step .payment-options .payment-option {
    margin-bottom: 0.5rem;
}
body#checkout section.checkout-step .step-number {
    display: inline-block;
    padding: 0.625rem;
}
body#checkout section.checkout-step .address-selector {}
/* [range 6912-7091 balanced +1] */
body#checkout section.checkout-step .address-item {
    border: 1px solid #f0f0f0;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 60%;
    -moz-flex: 0 0 60%;
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    margin-bottom: 15px;
}
body#checkout section.checkout-step .address-item .h4{ 
    font-size:14px; 
    line-height: 24px;
}
body#checkout section.checkout-step .address-item.selected {
    background: #FFFFFF;
    border-color: #ddd;
}
body#checkout section.checkout-step .address-alias {
    display: inline-block;
    font-weight: 600;
    margin-bottom: 0.625rem;
}
body#checkout section.checkout-step .address {
    margin-left: 1.5625rem;
    font-weight: normal;
}
body#checkout section.checkout-step .radio-block {
    padding: 20px;
    text-align: left;
}
body#checkout section.checkout-step .custom-radio {
    margin-right: 4px;
    margin-top: 0;
}
body#checkout section.checkout-step .address-item .custom-radio{
    margin-right: 5px;
    margin-top: 0px;
}
body#checkout section.checkout-step .custom-radio input[type="radio"] {
    height: 1.25rem;
    width: 1.25rem;
}
body#checkout section.checkout-step .delete-address,
body#checkout section.checkout-step .edit-address {
    display: inline-block;
    margin: 0 10px;
}
body#checkout section.checkout-step .delete-address .delete,
body#checkout section.checkout-step .delete-address .edit,
body#checkout section.checkout-step .edit-address .delete,
body#checkout section.checkout-step .edit-address .edit {
    font-size: 1rem;
    padding-right: 22px;
}
body#checkout section.checkout-step hr {
    margin: 0;
}
body#checkout section.checkout-step .address-footer {
    padding: 0 40px 20px;
    text-align: left;
}
body#checkout section.checkout-step #delivery-addresses,
body#checkout section.checkout-step #invoice-addresses {
    margin-top: 1.25rem;
}
body#checkout section.checkout-step .add-address {
    margin-top: 1.25rem;
}
body#checkout section.checkout-step .add-address a {
    color: #000;
}
body#checkout section.checkout-step .add-address a i {
    font-size: 0.9375rem;
}
body#checkout section.checkout-step .delivery-option {
    padding: 10px 0;
    margin: 15px 0;
    border: 1px solid #f0f0f0;
}
body#checkout section.checkout-step .delivery-option .custom-radio{
    margin-top: 12px;
}
body#checkout section.checkout-step .delivery-option label {
    text-align: inherit;
}
body#checkout section.checkout-step .carrier-delay,
body#checkout section.checkout-step .carrier-name {
    display: inline-block;
    word-break: break-word;
    text-align: left;
}
body#checkout section.checkout-step #customer-form,
body#checkout section.checkout-step #delivery-address,
body#checkout section.checkout-step #invoice-address,
body#checkout section.checkout-step #login-form {
    margin-left: 0.3125rem;
    margin-top: 1.5625rem;
}
body#checkout section.checkout-step #customer-form .form-control-label,
body#checkout section.checkout-step #delivery-address .form-control-label,
body#checkout section.checkout-step #invoice-address .form-control-label,
body#checkout section.checkout-step #login-form .form-control-label {
    text-align: left;
}
body#checkout section.checkout-step #customer-form .radio-inline,
body#checkout section.checkout-step #delivery-address .radio-inline,
body#checkout section.checkout-step #invoice-address .radio-inline,
body#checkout section.checkout-step #login-form .radio-inline {
    padding: 0;
}
body#checkout section.checkout-step .sign-in {
    font-size: 0.875rem;
}
body#checkout section.checkout-step .forgot-password {
  margin: 0 auto;
  text-align: center;
}
body#checkout .additional-information {
    font-size: 0.875rem;
    margin-left: 2.875rem;
    margin-top: 1.25rem;
}
body#checkout .condition-label {
    margin-left: 2.5rem;
    margin-top: 0.625rem;
}
body#checkout .condition-label label {
    text-align: inherit;
}
body#checkout .cancel-address {
    margin: 0.625rem;
    display: block;
    color: #878787;
    text-decoration: underline;
}
body#checkout .cancel-address:hover, body#checkout section.checkout-step .add-address a:hover { color: #d13925;}
body#checkout .modal-content {
    padding: 1.25rem;
    background-color: #ebebeb;
}
body#checkout #cart-summary-product-list {
    font-size: 0.875rem;
}
body#checkout #cart-summary-product-list img {
    border: 1px solid #f0f0f0;
    width: 3.125rem;
}
body#checkout #cart-summary-product-list .media-body {
    vertical-align: middle;
    display: inline-block;
}
body#checkout #order-summary-content {
    padding-top: 0.9375rem;
}
body#checkout #order-summary-content h4.h4 {
    margin-top: 0.625rem;
    margin-bottom: 1.25rem;
    color: #414141;
}
body#checkout #order-summary-content h4.black {
    color: #000000;
}
body#checkout #order-summary-content h4.addresshead {
    margin-top: 0.1875rem;
}
body#checkout #order-summary-content .noshadow {
    box-shadow: none;
   -moz-box-shadow: none;
  -webkit-box-shadow: none;
    border-bottom: 0;
}
body#checkout #order-summary-content #order-items {
    border-right: 0;
}
body#checkout #order-summary-content #order-items h3.h3 {
    color: #414141;
    margin-top: 1.25rem;
}
body#checkout #order-summary-content #order-items table tr:first-child td {
    border-top: 0;
}
body#checkout #order-summary-content .order-confirmation-table {
    padding: 1rem;
    margin-bottom: 2rem;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 0;
     -webkit-border-radius: 0;
    -khtml-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
}
body#checkout #order-summary-content .summary-selected-carrier {
    margin-bottom: 0.75rem;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 0;
     -webkit-border-radius: 0;
    -khtml-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    padding: 1rem;
}
body#checkout #order-summary-content .step-edit {
    display: inline;
    text-transform: capitalize;
}
body#checkout #order-summary-content .step-edit:hover {
    cursor: pointer;
}
body#checkout #gift_message {}
/* [range 7129-7341 balanced +1] */
    body#checkout section.checkout-step.-reachable.-complete h1 .step-edit {
        float: none;
        margin-top: 0.25rem;
        margin-left: 1.25rem;
    }
    body#checkout section.checkout-step .content {
        padding: 0.9375rem;
    }
    body#checkout .form-group {}
/* [range 7397-7405 balanced +1] */
    #checkout .col-md-8 {     
      width: 52%;
    }

@media(max-width: 1200px){
    #header .cart_block {
    right: -12px;
}

}
@media(max-width: 1199px){
    .products-selection > div {
    width: 35%;
}
.btn-primary, .btn-secondary, .btn-tertiary {
    padding: 6px 10px 5px;
}
.products-sort-order {
    width: 73%;
}
#checkout #content .col-md-4 {}
} /* close @media(max-width:1199px) — its closer was lost in the range splice */
/* [range 14143-14164 balanced +1] */
    #checkout .col-md-8 {
      width: 100%;
    }
    #checkout #content .col-md-4 {}
/* [range 15472-15475 balanced +1] */

/* width adaptation to the child column geometry (live-measured rects) */
#checkout .checkout-row { display: block; margin: 0 -15px; }
#checkout .checkout-row::after { content: ""; display: table; clear: both; }
#checkout .checkout-process-col { float: left; width: 67.2%; margin-bottom: 20px; padding: 0 15px; }
#checkout #content .checkout-summary-col { float: right; width: 30.8%; padding: 0; }
@media (max-width: 991px) { #checkout .checkout-process-col, #checkout #content .checkout-summary-col { float: none; width: 100%; } }

/* classic checkbox check-icon: hidden until checked (classic base rule that
   lived outside the ported ranges; live shows empty squares when unchecked) */
body#checkout .custom-checkbox .checkbox-checked { display: none; }
body#checkout .custom-checkbox input:checked + span .checkbox-checked { display: inline-block; }

/* step-1 detail pass (live-measured): icon must stay hidden even against
   utility display rules; labels right-aligned like classic; tabs black/bold */
body#checkout .custom-checkbox .checkbox-checked { display: none !important; }
body#checkout .custom-checkbox input:checked + span .checkbox-checked { display: inline-block !important; }
body#checkout .form-control-label { text-align: right; }
body#checkout .nav-tabs .nav-link { color: #000; font-weight: 600; border: 0; padding: 0 0 5px; }
body#checkout .nav-tabs .nav-link.active { border-bottom: 2px solid #d13925; background: none; }
body#checkout .nav-tabs { border-bottom: 0; }

/* payment step: live styles the order button navy like all primary actions */
body#checkout #payment-confirmation .btn-primary, body#checkout .payment-options + div .btn,
body#checkout button.btn-primary[type=submit] {
  background: #d13925; border-color: #d13925; color: #fff;
}
body#checkout #payment-confirmation .btn-primary:disabled { opacity: 0.5; }

/* all checkout primary buttons are navy on live (Doorgaan/Plaats bestelling) */
body#checkout .btn-primary {
  background: #d13925; border-color: #d13925; color: #fff;
}
body#checkout .btn-primary:hover { background: #1f1f1f; border-color: #1f1f1f; }
/* the check icon sits in a span AFTER the input; hide it unchecked regardless
   of wrapper class (form renderer + classic payment tpl variants) */
body#checkout .custom-checkbox input:not(:checked) ~ span .material-icons,
body#checkout .custom-checkbox input:not(:checked) + span .material-icons { display: none !important; }
body#checkout .custom-checkbox input:checked ~ span .material-icons { display: inline-block !important; }

/* BS5 buttons paint from --bs-btn-* variables; override the variables so the
   navy wins regardless of how the utility layer is cascaded */
body#checkout .btn-primary {
  --bs-btn-bg: #d13925; --bs-btn-border-color: #d13925;
  --bs-btn-hover-bg: #1f1f1f; --bs-btn-hover-border-color: #1f1f1f;
  --bs-btn-active-bg: #1f1f1f; --bs-btn-active-border-color: #1f1f1f;
  --bs-btn-disabled-bg: #d13925; --bs-btn-disabled-border-color: #d13925;
}
/* icon hide via uncontested properties (a layered !important display rule
   outguns unlayered !important, but visibility/position are uncontested) */
body#checkout .custom-checkbox input:not(:checked) + span .material-icons,
body#checkout .custom-checkbox input:not(:checked) ~ span .material-icons {
  visibility: hidden; position: absolute;
}


/* =====================================================================
 * CART PAGE — ported from live theme.css (.cart-grid/.cart-item/
 * .product-line-grid/.cart-summary), templates/checkout/cart.tpl +
 * child cart-detailed-* partials. Live look, Hummingbird JS kept.
 * ===================================================================== */
.cart-grid {
    margin-bottom: 1rem;
}
.cart-items {
    margin-bottom: 0;
}
li.cart-item:last-child{ border-bottom: 0px; }
.cart-item {
    border-bottom: 1px solid #ddd;
    padding: 1rem 0;
}
.cart-summary-line {
    clear: both;
}
.cart-summary-line::after {
    content: "";
    display: table;
    clear: both;
}
.cart-summary-line .label {
    padding-left: 0;
    font-weight: normal;
    white-space: inherit;
    float: left;
    font-size: 13px;
}
.best-sales #search_filters_wrapper, .new-products #search_filters_wrapper, .prices-drop #search_filters_wrapper, .pagenotfound #search_filters_wrapper {
    display: none;
}
.cart-summary-line .value {
    color: #000;
    float: right !important;
}
.cart-summary-line.cart-summary-subtotals .label,
.cart-summary-line.cart-summary-subtotals .value {
    font-weight: normal;
}
#cart .cart-grid .label i {
  line-height: 22px;
}
/** CART BODY **/

.cart-grid-body {
    margin-bottom: 0.75rem;
}
.cart-grid-body a.label:hover {
    color: #d13925;
}
.cart-grid-body .card-block {
    padding: 1rem;
}
#cart .cart-grid-body .card-block {
  padding: 0;
}
.cart-grid-body .card-block h1 {
    margin-bottom: 0;
    font-size:20px;
}
.cart-grid-body hr {
    margin: 0;
}
.cart-grid-body .cart-overview {
    padding: 1rem;
}
/** CART RIGHT **/

.cart-grid-right hr {
    margin: 0;
}
.cart-grid-right .promo-discounts {
    margin-bottom: 0;
}
.cart-grid-right .promo-discounts .cart-summary-line .label {
    color: #878787;
}
.cart-grid-right .promo-discounts .cart-summary-line .label .code {
    text-decoration: underline;
    cursor: pointer;
}
.block-promo .promo-code {
    padding: 1.60rem;
    background: #ebebeb;
}
.block-promo .promo-code .alert-danger {
    position: relative;
    margin-top: 1.25rem;
    background: #ff4c4c;
    color: #FFFFFF;
    display: none;
}
.block-promo .promo-code .alert-danger::after {
    bottom: 100%;
    left: 10%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #ff4c4c;
    border-width: 10px;
    margin-left: -10px;
}
.block-promo .promo-input {
    color: #414141;
    border: #acaaa6 1px solid;
    height: 2.5rem;
    text-indent: 0.625rem;
    width: 60%;
}
.block-promo .promo-input + button {
    margin-top: -4px;
    text-transform: capitalize;
}
.block-promo .cart-summary-line .label,
.block-promo .promo-name {
    color: #ff9a52;
    font-weight: 600;
}
.block-promo .cart-summary-line .label a,
.block-promo .promo-name a {
    font-weight: normal;
    color: #414141;
    display: inline-block;
}
.block-promo .promo-code-button {
    padding-left: 1.25rem;
    margin-bottom: 1.25rem;
    display: inline-block;
}
.block-promo.promo-highlighted {
    padding: 1.25rem;
    padding-bottom: 0;
    margin-bottom: 0;
}
/** CONTENT LEFT **/

.product-line-grid-left img {
    max-width: 100%;
    border: 1px solid #f0f0f0;
}
/** CONTENT BODY **/

.product-line-grid-body > .product-line-info > .label {
    padding: 0;
    line-height: inherit;
    text-align: left;
    white-space: inherit;
    font-weight: normal;
}
.product-line-grid-body > .product-line-info > .out-of-stock {
    color: red;
}
.product-line-grid-body > .product-line-info > .available {
    color: #4cbb6c;
}
.product-line-grid-body > .product-line-info > .unit-price-cart {
    padding-left: 0.3125rem;
    font-size: 0.875rem;
    color: #878787;
}
/** CONTENT LEFT **/

.product-line-grid-right .bootstrap-touchspin {
    width: 4.25rem;
    float: left !important;
}
.product-line-grid-right .bootstrap-touchspin > .form-control,
.product-line-grid-right .bootstrap-touchspin > .input-group {
    color: #414141;
    background-color: #FFFFFF;
    height: 2.5rem;
    padding: 0.175rem 0.5rem;
    width: 3rem;
}
.product-line-grid-right .bootstrap-touchspin > .input-group-btn-vertical {
    width: auto;
}
.product-line-grid-right .cart-line-product-actions,
.product-line-grid-right .cart-line-product-actions-main,
.product-line-grid-right .product-price {
    color: #000;
    line-height: 36px;
}

.product-line-grid-right .product-price strong{
    font-size: 18px;
    font-weight:600;
}
.product-line-grid-right .cart-line-product-actions .remove-from-cart,
.product-line-grid-right .cart-line-product-actions-main .remove-from-cart,
.product-line-grid-right .product-price .remove-from-cart {
    color: #000;
    display: inline-block;
    margin-top: 0.3125rem;
}
.product-line-grid-right .cart-line-product-actions .remove-from-cart:hover, 
.product-line-grid-right .cart-line-product-actions-main .remove-from-cart:hover, 
.product-line-grid-right .product-price .remove-from-cart:hover {
  color: #d13925;

  color: #d13925;
}
/* ---- adaptations to the child layout + PS9 markup ---- */
#cart .card.cart-container, #cart .card.cart-summary {
  border: 1px solid #f0f0f0; border-radius: 5px; background: #fff; margin-bottom: 20px;
}
#cart .cart-summary .card-block { padding: 1rem; }
#cart .cart-summary .summary-title { font-size: 20px; font-weight: 600; margin: 0; color: #000; }
#cart .cart-grid-body .card-block h1 { font-size: 20px; font-weight: 600; text-transform: none; }
#cart .cart-grid { display: block; margin: 0 -10px; }
#cart .cart-grid::after { content: ""; display: table; clear: both; }
#cart .cart-grid-body { float: left; width: 66.66%; padding: 0 10px; }
#cart .cart-grid-right { float: left; width: 33.33%; padding: 0 10px; }
/* TABLET/MOBILE: live puts the cart FIRST and the category sidebar BELOW it.
   The layout's #left-column holds floated promo banners; when it stacks it must
   contain them (flow-root) or it collapses to height 0 and the banners overlap
   the cart (bug: summary shoved ~1800px down / "disappeared"). Flex-order the
   row so cart content leads, breadcrumb on top, sidebar last. */
@media (max-width: 991px) {
  #cart .row.page-leftcol { display: flex !important; flex-direction: column !important; }
  #cart .row.page-leftcol nav.breadcrumb { order: 0; }
  #cart .row.page-leftcol #center-column { order: 1; float: none; width: 100%; margin: 0; }
  #cart .row.page-leftcol #left-column { order: 2; float: none; width: 100%; display: flow-root; margin-top: 24px; }
  #cart .cart-grid { margin: 0; }
  #cart .cart-grid-body, #cart .cart-grid-right { float: none; width: 100%; padding: 0; }
  #cart .cart-grid-right { margin-top: 20px; }
}
#cart .product-line-grid { display: flex; flex-wrap: wrap; align-items: center; }
#cart .product-line-grid-left { flex: 0 0 25%; max-width: 25%; padding: 0 15px; }
#cart .product-line-grid-body { flex: 0 0 40%; max-width: 40%; padding: 0 15px; }
#cart .product-line-grid-right { flex: 0 0 35%; max-width: 35%; padding: 0 15px; }
#cart .product-line-grid-left img { max-width: 100%; height: auto; border: 1px solid #f0f0f0; }
#cart .product-line-info .label { color: #000; font-weight: 400; text-decoration: none; }
#cart .product-line-info .price, #cart .product-line-info .current-price .price { color: #000; font-weight: 700; font-size: 14px; }
#cart .product-line-grid-right .product-price strong { font-size: 18px; font-weight: 600; color: #000; }
#cart .remove-from-cart { color: #1f1f1f; }
#cart .remove-from-cart:hover { color: #d13925; }
#cart .remove-from-cart .material-icons { font-size: 20px; }
#cart .cart-detailed-actions .btn-primary, #cart .cart-detailed-actions a.btn {
  --bs-btn-bg: #d13925; --bs-btn-border-color: #d13925;
  --bs-btn-hover-bg: #1f1f1f; --bs-btn-hover-border-color: #1f1f1f;
  background: #d13925; border-color: #d13925; color: #fff;
  display: block; width: 100%; text-transform: uppercase; font-weight: 600; letter-spacing: 0.7px;
  border-radius: 5px; padding: 10px; margin-bottom: 10px;
}
#cart .cart-detailed-actions { padding: 1rem; text-align: center; }
/* compact stepper (live look): input left full-height + increment/decrement
   stacked as small arrows on the right. CSS grid places by explicit cell so
   the source order (decrement,input,increment) doesn't matter — the
   js-increment/js-decrement hooks PS9 binds stay intact. */
#cart .qty .quantity-button__group.input-group {
  display: grid !important; grid-template-columns: 46px 22px; grid-template-rows: 20px 20px;
  width: 68px !important; align-items: stretch; flex-wrap: nowrap;
}
#cart .qty .js-cart-line-product-quantity {
  grid-column: 1; grid-row: 1 / 3; width: 46px; height: 40px; text-align: center;
  border: 1px solid #ddd; border-radius: 0; padding: 2px; -moz-appearance: textfield;
}
#cart .qty .btn.js-increment-button, #cart .qty .btn.js-decrement-button {
  min-width: 0 !important; width: 22px !important; height: 20px !important; padding: 0 !important; border: 1px solid #ddd; border-left: 0;
  background: #f7f7f7; border-radius: 0; display: flex; align-items: center; justify-content: center; margin: 0 !important;
}
#cart .qty .btn.js-increment-button { grid-column: 2; grid-row: 1; border-bottom: 0; }
#cart .qty .btn.js-decrement-button { grid-column: 2; grid-row: 2; }
#cart .qty .btn .material-icons { font-size: 14px; line-height: 1; }
/* keep the line total on one line (live: €\xa0103,50) */
#cart .product-line-grid-right .price { min-width: 90px; }
#cart .product-line-grid-right .product-price strong { white-space: nowrap; }
/* live: lines have NO horizontal padding (the 20px inset comes from the
   card-block); value floats flush to the card-block edge. My old 1rem line
   padding double-inset the total to 33px and kept values off the edge. */
#cart .cart-summary, #cart .cart-detailed-totals { color: #000; }
#cart .cart-detailed-totals { min-height: 0; }
#cart .cart-summary .card-block { padding: 20px; }
#cart .cart-summary-line { overflow: hidden; padding: 0; clear: both; }
#cart .cart-summary-line .label { float: left; font-size: 13px; color: #000; }
#cart .cart-summary-line .value { float: right; color: #000; }
#cart .cart-summary-line.cart-total .value { font-weight: 400; }
#cart .continue { display: inline-block; margin: 12px 0; color: #414141; text-decoration: none; }
#cart .continue:hover { color: #d13925; }

/* stepper arrows as chevrons like live's touchspin (hide the qty-input +/-
   material glyph, inject up/down chevrons; button + JS hook stay intact) */
#cart .qty .btn.js-increment-button .material-icons,
#cart .qty .btn.js-decrement-button .material-icons { font-size: 0 !important; }
#cart .qty .btn.js-increment-button::after,
#cart .qty .btn.js-decrement-button::after {
  font-family: 'Material Icons'; font-size: 15px; line-height: 1; color: #414141;
}
#cart .qty .btn.js-increment-button::after { content: '\E316'; }  /* keyboard_arrow_up */
#cart .qty .btn.js-decrement-button::after { content: '\E313'; }  /* keyboard_arrow_down */

/* checkout carrier logo: BS5 doesn't apply the global img{max-width:100%} the
   old BS4 theme relied on, so the img/s/{id}.jpg carrier logo overflowed the
   row. Constrain it to its column like live (small thumbnail). */
#checkout .carrier-logo img { max-width: 100%; height: auto; display: block; }
#checkout .delivery-option .carrier-logo { max-width: 60px; }

/* checkout form rhythm + button case to match live (measured): form rows have
   a 15px gap on live (staging had 0), and the step submit buttons are uppercase. */
#checkout .checkout-step .form-group { margin-bottom: 15px; }
#checkout .checkout-step [type=submit], #checkout .checkout-step .continue,
#checkout .checkout-step button.btn-primary { text-transform: uppercase; }

/* product page mobile: the .row.product-container and the cross-sell rows carry
   BS negative gutters that overflow ~10px on narrow screens (live has none).
   Zero them below md so the page has no horizontal scroll, like live. */
@media (max-width: 991px) {
  #product .row.product-container { margin-left: 0; margin-right: 0; }
  #product .crosssell-products .products,
  #product .productscategory-products .products,
  #product .product-accessories .products { margin-left: 0; margin-right: 0; width: 100%; }
  #product .right_cms { max-width: 100%; }
}

/* =====================================================================
 * Popular Products (ps_featuredproducts on displayCrossSellingShoppingCart /
 * order-confirmation): rendered <section class="featured-products"> WITHOUT the
 * #featureProduct id, and the homepage grid CSS is #index-scoped, so it fell
 * back to an overlapping unstyled stack (visible add-to-cart buttons, no grid).
 * Reuse the SAME homepage card/grid layout for the non-home instance only.
 * ===================================================================== */
.featured-products:not(#featureProduct) { position: relative; }
.featured-products:not(#featureProduct) .products-section-title {
  font-size: 20px; font-weight: 500; letter-spacing: 1px; line-height: 36px;
  text-transform: capitalize; text-align: left; color: #000; margin: 0 0 10px;
}
.featured-products:not(#featureProduct) .products {
  margin: 0 0 0 -10px; width: calc(100% + 20px); float: left; display: block; position: relative;
}
.featured-products:not(#featureProduct) .product_list {
  margin: 0; padding: 0; list-style: none; float: left; width: 100%; display: block; position: relative;
}
.featured-products:not(#featureProduct) .product_list li.product_item {
  width: 25%; height: auto; float: left; margin: 0; padding: 0 10px 30px; position: relative;
}
.featured-products:not(#featureProduct) .product-miniature { margin: 0 auto 20px; position: relative; }
.featured-products:not(#featureProduct) .thumbnail-container {
  margin-bottom: 15px; position: relative; border-right: 1px solid #f0f0f0; height: auto;
}
.featured-products:not(#featureProduct) .product-thumbnail {
  display: block; background: #fff; text-align: center; border-radius: 5px; color: #000;
}
.featured-products:not(#featureProduct) .product-thumbnail img,
.featured-products:not(#featureProduct) img {
  display: block; max-width: 100%; margin: 0 auto; border-radius: 5px; height: auto; position: relative;
}
.featured-products:not(#featureProduct) .product-description { min-height: 136px; overflow: hidden; position: relative; }
.featured-products:not(#featureProduct) .product-title {
  text-transform: capitalize; margin: 14px 0 12px; display: block; float: left; width: auto;
  font-size: 18px; font-weight: 500; line-height: 1.1; letter-spacing: 0.5px; text-align: left;
}
.featured-products:not(#featureProduct) .product-title a {
  color: #707070; font-size: 13px; font-weight: 400; letter-spacing: 0.9px; line-height: 20px;
  text-align: left; text-transform: none; float: left; width: auto; white-space: normal; text-decoration: none;
}
.featured-products:not(#featureProduct) .product-title a:hover { color: #000; }
.featured-products:not(#featureProduct) .product-price-and-shipping {
  color: #000; font-size: 14px; font-weight: 700; clear: both; padding: 10px 0 0; text-align: left;
}
.featured-products:not(#featureProduct) .product-price-and-shipping .price {
  font-size: 16px; line-height: 24px; letter-spacing: 0.6px; font-weight: 600; color: #000;
}
.featured-products:not(#featureProduct) .product-detail,
.featured-products:not(#featureProduct) .highlighted-informations { display: none; }
.featured-products:not(#featureProduct) .product-actions-main {
  position: static; float: left; width: 100%; opacity: 0; transform: translateX(-150px); transition: 0.5s;
}
.featured-products:not(#featureProduct) .product_list li:hover .product-actions-main { opacity: 1; transform: none; }
.featured-products:not(#featureProduct) .product_list li:hover .product-price-and-shipping { opacity: 0.6; }
.featured-products:not(#featureProduct) .add-to-cart {
  display: inline-block; width: auto; margin: 0; font-size: 12px; padding: 5px 15px 5px 35px;
  background: #d13925 url(../img/megnor/sprite-1.png) no-repeat scroll 10px -20px;
  border: 1px solid #d13925; color: #fff; text-transform: uppercase; font-weight: 600;
  letter-spacing: 0.7px; line-height: 24px; border-radius: 5px; cursor: pointer;
}

/* =====================================================================
 * STICKY HEADER — live adds .fixed to .header-top-main past 210px scroll
 * (>=992px viewports) and animates it down from the top. The rebuild had
 * no .fixed rule at all, so the header never stuck. Ported 1:1 from the
 * old theme (theme.css .header-top-main.fixed + fixedAnim keyframes).
 * ===================================================================== */
#header .header-top-main.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  display: block;
  z-index: 9991;
  margin-bottom: 0;
  animation: fixedAnim 0.8s ease 0s normal both 1 running;
  -webkit-animation: fixedAnim 0.8s ease 0s normal both 1 running;
}
@keyframes fixedAnim { 0% { top: -100%; } 100% { top: 0; } }
@-webkit-keyframes fixedAnim { 0% { top: -100%; } 100% { top: 0; } }

/* =====================================================================
 * "Shop by department" bar (bw_categorylist): the subcategory links and the
 * category description are rendered for DOM/SEO parity but HIDDEN — measured
 * on live, its tm_categorylist emits both and the theme sets them to
 * display:none (0x0 in NL and GB). Without this the bar would grow taller
 * than live and break the measured category_bar parity.
 * ===================================================================== */
.tmcategorylist .subcategory,
.tmcategorylist .cate-description { display: none; }

/* =====================================================================
 * Order detail > "Add a message" form — live PRS080193_06 parity.
 *
 * Live styles this block through rules the Hummingbird child does not
 * have, which is why the rebuild rendered a LEFT-aligned "Product"
 * label, a caret-less <select> and a CENTRED Send button:
 *
 *   live theme.css:6307  label, .label            { text-align: right; }
 *   live theme.css:6317  .form-control-label      { padding-top: 4px; }
 *   live theme.css:5930  .order-message-form .text-xs-center
 *                                                 { text-align: right !important; }
 *   live theme.css:6342  .form-control-select     { height: 2.625rem;
 *                            appearance: none; padding-right: 2rem;
 *                            background: url(<caret png>) no-repeat
 *                                        right .5rem center/1.25rem 1.25rem; }
 *
 * Hummingbird ships `.text-xs-center { text-align: center !important }` —
 * that is what centred the button — and styles neither the label alignment
 * nor .form-control-select at all. Measured on the rebuild before this fix:
 * label text-align "start" / padding-top 0px, select background-image
 * "none" (no caret) / height 38px / padding-right 16px, footer
 * text-align "center".
 *
 * Deliberately SCOPED to .order-message-form: live applies the label and
 * select rules globally, but the registration / identity / checkout /
 * product-variant selects in this theme have already been parity-verified
 * against live, so widening the scope would risk regressing them.
 * background-* longhand (not live's shorthand) so Bootstrap 5's white
 * background-color survives — live's shorthand resets it to transparent
 * over an already-white box, so the result is identical.
 * ===================================================================== */
.order-message-form .form-control-label {
  text-align: right;
  padding-top: 4px;
}

.order-message-form .form-control-select {
  height: 2.625rem;
  padding-right: 2rem;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAAPklEQVR4Ae3TwREAEBQD0V/6do4SXPZg7EsBhsQ8IEmSMOsiuEfg3gL3oXC7wK0bd1G4o8X9F4yIkyQfSrIByQBjp7QuND8AAAAASUVORK5CYII=");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1.25rem 1.25rem;
}

/* The Send button. Live right-aligns it with
 *   .order-message-form .text-xs-center { text-align: right !important; }
 * but Hummingbird's `.text-xs-center { text-align: center !important }` sits
 * inside `@layer utilities`, and for !IMPORTANT declarations the cascade
 * REVERSES layer order and ranks un-layered rules lowest — so an un-layered
 * copy of live's rule loses however specific it is (measured: computed
 * text-align stayed "center", button still centred at x=789). Declaring it in
 * the SAME layer puts both rules under the normal cascade again, where the
 * higher specificity (0,2,0 vs 0,1,0) wins. Layer name matching is global, so
 * this appends to the layer theme.css already declared — and it holds whether
 * CCC emits custom.css before or after theme.css.
 * (Same trap as the .text-uppercase product headings further up, which the
 * templates dodge by dropping the utility class instead.) */
@layer utilities {
  /* `.text-xs-center` is a dead Bootstrap-4-ALPHA class; the templates were swept to plain
     `.text-center` for BS5, so both are targeted here to survive the rename either way. */
  .order-message-form .text-center {
    text-align: right !important;
  }
}

/* =============================================================================================
 * RESPONSIVE LAYER — ADDED 2026-07-29
 *
 * WHY THIS EXISTS: the scaffold inherited desktop-oriented CSS but was missing the old theme's
 * small-screen layers outright. Two concrete gaps, both measured, not guessed:
 *
 *   1. THE MOBILE MENU HAD NO CSS AT ALL. The whole child stylesheet contained exactly two
 *      rules mentioning #mobile_top_menu_wrapper (icon sizing) and ZERO for .mobile-menu-inner
 *      or the `.slide` open state. Since the drawer is positioned off-canvas by CSS and brought
 *      in by a class, no CSS meant no working mobile menu on any page.
 *   2. NO `@media (max-width:480px)` BLOCK EXISTED, while the live bundle has 114 rules there.
 *      480px is live at the 375x812 target viewport, so the entire small-mobile header layout
 *      (centred logo, absolutely-positioned burger, drawer offset, cart/search offsets, 2-up
 *      product grid) was missing.
 *
 * Every declaration below is copied from the LIVE COMPILED BUNDLE
 * themes/PRS080193_06/assets/cache/theme-9ca68c92.css — extracted programmatically per
 * @media block, not transcribed by eye. Vendor-prefixed duplicates (-webkit-/-moz-/-ms-/-o-
 * transition, box-shadow, border-radius) are dropped: they are 2013-era prefixes that current
 * browsers do not need, and keeping them adds bytes without changing computed values.
 *
 * BREAKPOINTS ARE THE OLD THEME'S, deliberately: Bootstrap 4-ALPHA used 544/768/992/1200 plus
 * this theme's own 1450, and a 480 small-phone step. They are NOT Bootstrap 5's
 * 576/768/992/1200/1400. Do not "modernise" these numbers — they are the contract the rest of
 * the ported CSS was written against. (The stylesheet still contains a handful of stray
 * 575.98/767.98/991.98/1199.98/576/1100 queries that exist in NEITHER theme; they are listed in
 * REBUILD-TODO.md as still-to-reconcile.)
 *
 * NOT VERIFIED AGAINST A RENDER — there is no reference site available (live is suspended and
 * standing up a reference was explicitly out of scope). These are source-accurate, not
 * parity-proven. Every number below needs confirming on staging at 375x812, 768x1024, 1600x1000.
 * ============================================================================================= */

/* ---------------------------------------------------------------------------------------------
 * SEARCH WIDGET — collapsed-by-default toggle.
 * Live hides .searchtoggle at EVERY width in CSS and relies on JS to reveal it above 991px
 * (old assets/js/custom.js:589 `$(".searchtoggle").show()`), which is why assets/js/custom.js
 * now ports that behaviour. Without these rules the mobile search is an unstyled always-open
 * form and .search_button is an invisible empty span.
 * The 404 page is the exception: displaySearch renders the bar inline and live forces it open.
 * --------------------------------------------------------------------------------------------- */
.searchtoggle {
  display: none;
  position: absolute;
  right: 0;
  top: 63px;
  width: 250px;
  z-index: 9;
}

span.search_button {
  /* Live inlined this icon as a ~4KB base64 PNG. Referencing the real asset we already ship
     (assets/img/megnor/search.png, copied from the old theme) is the same artwork without the
     payload. */
  background: #000 url(../img/megnor/search.png) no-repeat scroll 9px 11px;
  border: 1px solid #000;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 0;
  height: 38px;
  width: 38px;
  padding: 0;
  position: relative;
  text-align: center;
  z-index: 5;
}

/* 404 page: search is inline and always open; the toggle button is not shown. */
#pagenotfound .page-not-found .searchtoggle,
#products .page-not-found .searchtoggle {
  display: block !important;
  position: relative;
  top: 0;
  width: 100%;
  border: none;
  overflow: visible !important;
  height: auto !important;
}
#pagenotfound .page-not-found .search-widget span.search_button,
#products .page-not-found .search-widget span.search_button {
  display: none;
}

/* =========================== <= 991px — THE MASTER MOBILE SWITCH ============================
 * 991/992 (not 768) is where this theme flips between desktop and mobile: the red .header-nav
 * bar appears, .header-top-main is hidden, both columns go full width, and the drawer arms.
 * =========================================================================================== */
@media (max-width: 991px) {


  /* ---- mobile account block: collapse the desktop markup to live's 38px icon ----
     ps_customersignin renders its FULL desktop markup into the #_mobile_user_info mount — the
     "Inloggen" title, the "Mijn Account" title, an expand icon and the user-info list — which
     stacked to 190x97 and made the whole mobile header row 97px tall (measured on staging at
     375px). Live collapsed it to a single 38px black icon button and hid the rest; these are its
     own rules, lifted verbatim from the compiled bundle (including the base64 icon) and scoped
     under #header. */
#header #_mobile_user_info .tm_userinfotitle{background:#000 url(data:image/png;base64,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) no-repeat scroll 12px 12px;border:1px solid #000;border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;cursor:pointer;font-size:0;height:38px;margin:0;padding:0;position:relative;text-align:center;width:38px;transition:all 500ms ease 0s;-webkit-transition:all 500ms ease 0s;-moz-transition:all 500ms ease 0s;-ms-transition:all 500ms ease 0s;-o-transition:all 500ms ease 0s}
#header #_mobile_user_info { position: relative; margin: 0 10px; }
#header #_mobile_user_info .tm_userinfotitle1 { display: none; }
#header #_mobile_user_info .material-icons { display: none; }
#header #_mobile_user_info .user-info { display: none; z-index: 10; top: 63px; }
#header #_mobile_user_info > .user-info a { margin-right: 0; }

  /* The red strip is EMPTY below 992px and was rendering as a 10px red sliver: its two occupants
     both leave — the JS reparents #search_widget into .header-nav, and #_desktop_cart measures 0x0
     because ps_shoppingcart's mobile output goes to the #_mobile_cart mount instead. Measured on
     staging at 375px: .header-top-main was 375x10 with nothing inside it. */
  /* NOTE 2026-07-29: this hide is now scoped to <=767 (see the max-width:767px block below).
     Between 768 and 991 the mobile mounts are NOT populated on this build — measured at 900px,
     `#_mobile_logo img` is absent from the DOM entirely and #_mobile_cart / #_mobile_user_info are
     0x0 — so hiding the desktop strip up to 991 left that whole band with only a hamburger, while
     live shows logo 187x115 + cart 71x36 + user 38x38 there. Keeping the strip visible in 768-991
     restores a working navbar in that band. */

  /* ---- search widget: kill a PHANTOM overflow ----
     Below 991px the JS reparents #search_widget into .header-nav, where the base rule
     `#header .search-widget{float:left;width:100%}` makes it 100% of the 720px container while a
     preceding inline sibling (the menu icon) offsets it ~33px — so its box ended at 777px in a
     768px viewport and the document scrolled sideways on EVERY tablet page. Nothing visible was
     cut off: the only rendered child is the 38px .search_button, the .searchtoggle panel is
     absolutely positioned and hidden until opened. So sizing the box to its content removes the
     overflow with no visual change. Live's own ≤991 rule is only `.header-nav #search_widget
     {margin:0}` — it never needed this because its mobile header nests the icons differently.
     STILL TO CHECK on a real tablet: where the .searchtoggle panel lands when opened at ~768px
     (it is right-anchored, so on a narrow widget it may extend off the left edge). */
  #header .header-nav .search-widget { width: auto; max-width: 100%; }

  /* ---- the off-canvas drawer itself (was completely missing) ---- */
  #mobile_top_menu_wrapper .mobile-menu-inner {
    background: #fff none repeat scroll 0 0;
    box-shadow: 0 8px 15px 0 rgba(0, 0, 0, .1);
    height: 100%;
    left: -100%;
    margin-left: 0;
    overflow: auto;
    padding: 10px 10px 10px;
    position: fixed;
    top: 0;
    transition: all 0.3s ease 0s;
    width: 300px;
    z-index: 9999;
  }
  /* assets/js/custom.js toggles this class on #mobile_top_menu_wrapper */
  #mobile_top_menu_wrapper.slide .mobile-menu-inner {
    left: 0;
    transition: all 0.3s ease 0s;
  }

  /* ---- drawer contents: the top menu is flattened into an accordion ---- */
  #mobile_top_menu_wrapper #top-menu {
    margin-bottom: .625rem;
    padding: 0;
  }
  #mobile_top_menu_wrapper .top-menu a[data-depth="0"] {
    padding: 8px 10px;
  }
  #header .header-top .menu a,
  #mobile_top_menu_wrapper .top-menu a,
  #mobile_top_menu_wrapper .top-menu .sub-menu a {
    color: #000;
  }
  #mobile_top_menu_wrapper .top-menu a .material-icons.left,
  #mobile_top_menu_wrapper .top-menu a .material-icons.right {
    display: none;
  }
  .top-menu .sub-menu {
    background: #fff;
    border: 0;
    box-shadow: none;
    display: block;
    margin-left: 0;
    min-width: 100%;
    overflow: hidden;
    padding: 0;
    position: static;
    width: 100%;
    z-index: inherit;
  }
  .top-menu ul[data-depth="0"] > li {
    border-bottom: 1px solid #acaaa6;
  }
  .top-menu ul[data-depth="1"] > li { padding-left: 20px; }
  .top-menu [data-depth="2"] li a { padding-left: 30px; }
  .top-menu [data-depth="3"] li a { padding-left: 40px; }
  .top-menu [data-depth="4"] li a { padding-left: 50px; }

  /* Collapse state. Live's BS4-alpha CSS used `.in`; BS5 uses `.show`. assets/js/custom.js
     sets BOTH, and both are honoured here, so the accordion works regardless of which
     convention a given ported template carries. */
  .top-menu .collapse,
  .top-menu .sub-menu.collapse {
    display: none;
  }
  .top-menu .collapse.in,
  .top-menu .collapse.show,
  .top-menu .sub-menu.collapse.in,
  .top-menu .sub-menu.collapse.show {
    display: block;
  }

  /* burger / close icon */
  #header .header-nav .menu-icon .material-icons,
  #header .header-top .menu-icon .material-icons {
    color: #000;
    cursor: pointer;
    font-size: 33px;
    line-height: 36px;
    margin-right: 20px;
    margin-top: 4px;
    top: 0;
  }
  #header .header-nav .menu-icon .material-icons:hover,
  #header .header-top .menu-icon .material-icons:hover {
    color: #1f1f1f;
  }
  .container.menu-container {
    float: left;
    margin: 0 30px 0 0;
  }
}

/* =============================== <= 767px ================================= */
@media (max-width: 767px) {
  .container.menu-container {
    margin: 0 10px 0 0;
  }
  #mobile_top_menu_wrapper {
    left: 0;
  }
}

/* ======================= <= 480px — SMALL PHONE LAYER =======================
 * This whole layer was absent. It is what makes 375x812 correct: the logo goes full-width and
 * centred, the burger is lifted out of flow, and the drawer/cart/search get explicit offsets
 * because the mobile bar is ~54px tall.
 * Rules for TemplateMela CMS blocks that this shop does not have (#tmcmsblock, .tmcms1block,
 * #servicecmsblock, #tmsubbanner, .special-banner, .tm-hometabcontent, #tmcategorytabs) are
 * deliberately NOT ported — those modules are not installed on 9.1.4.
 * ========================================================================== */
@media (max-width: 480px) {

  /* header: centred logo, burger lifted out of flow */
  #header .header-nav .top-logo {
    width: 100%;
    float: left;
    text-align: center;
    margin-bottom: 5px;
  }
  #header .header-nav .menu-container {
    position: absolute;
    top: 75px;
  }
  #header .header-nav .menu-icon .material-icons,
  #header .header-top .menu-icon .material-icons {
    margin-right: 0;
  }
  .header-nav .mobile.container {
    padding: 0;
  }
  #header .header-nav .blockcart {
    padding: 0;
  }
  #_mobile_cart {
    padding: 0;
  }

  /* offsets below the ~54px mobile bar */
  #mobile_top_menu_wrapper {
    width: 100%;
    top: 54px;
  }
  #header #_mobile_cart,
  #_mobile_user_info,
  .search-widget {
    top: 10px;
  }
  #_mobile_user_info,
  .search-widget {
    margin-right: 10px;
  }
  .searchtoggle {
    top: 49px;
    width: 180px;
    right: -4px;
  }
  #header .cart_block {
    width: 270px;
    right: -16px;
    top: 43px;
  }
  #_desktop_user_info .user-info,
  #_mobile_user_info .user-info {
    min-width: 190px;
  }

  /* sticky mobile bar variants */
  #header .header-nav.fixed .top-logo { display: none; }
  #header .header-nav.fixed .menu-container { position: relative; top: 2px; }
  #header .header-nav.fixed .menu-icon .material-icons { margin-right: 0; margin-top: 0; }
  #header .header-nav.fixed #_mobile_cart,
  #header .header-nav.fixed #_mobile_user_info,
  #header .header-nav.fixed .search-widget { top: 0; }
  #header .header-nav.fixed .searchtoggle { top: 53px; }
  #header .header-nav.fixed #_mobile_user_info .user-info { top: 53px; }
  #header .header-nav.fixed .cart_block { top: 47px; }

  /* product grid: 2-up, and the list view full width */
  .products .product_list li.product_item {
    width: 50%;
    float: left;
    text-align: center;
  }
  .products .product_list.list li.product_item {
    width: 100%;
  }
  .products .product_list li.product_item,
  .products .product_list li.item {
    padding: 10px 5px 17px;
  }
  .products .product_list li .product-description {
    min-height: auto;
    width: 100%;
  }
  /* live hides the corner flags at this width */
  .products .product-miniature .online-only,
  .products .product-miniature .on-sale,
  .products .product-miniature .discount-percentage {
    display: none;
  }

  /* product page */
  #product .page-content .product-leftside { width: 270px; }
  #product .tabs .nav-tabs { padding: 0; margin-bottom: 20px; }
  .tabs .nav-tabs .nav-link { padding: 10px 0; }
  .product-features > dl.data-sheet dd.value,
  .product-features > dl.data-sheet dt.name { width: 100%; }
  .products-section-title { text-align: center; line-height: 40px; }
}


/* =============================================================================================
 * COLOUR ROLES RESTORED — 2026-07-29
 *
 * Context: REBUILD-TODO.md flagged that Bergsma's live bundle uses #f9ba48 42x and #4cbb6c 34x
 * while this stylesheet had 1x and 9x, and asked for the ROLES to be checked. Having actually
 * classified every occurrence in the live bundle, the raw counts are misleading:
 *
 *   #f9ba48 - 42 occurrences, but the LARGE MAJORITY ARE DEAD. It is Bootstrap-4-alpha's
 *     $brand-primary, so the bundle carries .btn-outline-primary / .btn-link / .text-primary /
 *     .bg-primary / .tag-primary / .card-primary / .nav-pills .active / .list-group-item.active
 *     / .page-item.active .page-link etc. NONE of those classes appear in any template of this
 *     shop (the visible pagination is .pagination a / .pagination .current a, which is #d13925).
 *     So chasing "42x" would mean shipping dead Bootstrap CSS. Only 7 roles are real, and they
 *     are the ones below.
 *   #4cbb6c - the success/in-stock green. Likewise about half its occurrences are dead
 *     Bootstrap (.btn-success, .btn-outline-success, .tag-success, .progress-success, .bg-success,
 *     .text-success). Note .alert-success is NOT this green - live uses #3c763d on #dff0d8.
 *
 * Also note this file previously had 9 x #4cbb6c, but EIGHT of them belonged to the ammusic
 * #tmtestimonialcmsblock service block, which has been deleted (its template was ammusic
 * content and tm_testimonialcmsblock was never registered on any Bergsma hook). So the count
 * legitimately went DOWN before coming back up here with real roles.
 *
 * All declarations below are copied from the live compiled bundle.
 * NOT PARITY-VERIFIED (no reference render available) - source-accurate only.
 * ============================================================================================= */

/* ---- #4cbb6c : success / in-stock / confirmed ---- */

/* product page in-stock line. The markup exists already
   (product-add-to-cart.tpl emits <i class="material-icons ... product-available">) but had no
   colour rule at all, so the in-stock indicator was rendering in the inherited text colour. */
#product-availability .product-available {
  color: #4cbb6c;
}

/* checkout step completed tick. The child already hides .done until the step completes
   (body#checkout section.checkout-step .done{display:none}); this only adds the colour, so it
   cannot fight that display logic. */
body#checkout section.checkout-step .done,
.done {
  color: #4cbb6c;
}

/* "added to cart" modal — live paints the header and title green. The child had ZERO
   #blockcart-modal rules. Hummingbird's blockcart modal id is #blockcart-modal
   (SelectorsMap blockcart.modal), so this targets the real element. */
#blockcart-modal .modal-header {
  color: #4cbb6c;
}
#blockcart-modal .modal-title {
  color: #4cbb6c;
  font-weight: 500;
  font-size: 18px;
  text-align: left !important;
}

/* form success state — DELIBERATELY NOT PORTED.
 * Live has .has-success .form-control-label/.form-check-label/.custom-control{color:#4cbb6c},
 * .has-success .form-control{border-color:#4cbb6c} and
 * .has-success .input-group-addon{color:#4cbb6c;border-color:#4cbb6c;background-color:#e0f3e5}.
 * I wrote those rules out and then removed them, because `.has-success` IS NEVER EMITTED on
 * PS 9.1.4: Hummingbird's _partials/form-fields.tpl:13 emits only
 *     <div class="mb-3{if !empty($field.errors)} has-error{/if}">
 * i.e. there is an error state but no success state. `has-success` occurs in Hummingbird solely
 * inside stories/ui/form/states.html (a styleguide page, not a template) and ZERO times in this
 * child theme's templates. Shipping it would have been exactly the dead-CSS problem this pass is
 * supposed to be removing. If a success state is ever added to the forms, the live values are
 * recorded above. */

/* ---- #f9ba48 : secondary hover / selected accent ---- */

/* product gallery thumbnail selected + hover border. The child only had the
   .additional-image-slider hover variant, so the SELECTED thumb had no highlight. */
.product-images > li.thumb-container > .thumb.selected,
.product-images > li.thumb-container > .thumb:hover,
.images-container .product_list .thumb-container .thumb:hover,
#main .additional-image-slider .thumb-container .thumb.selected {
  border-color: #f9ba48;
}

/* left-column category-tree expand/collapse arrow hover. The child styles these arrows
   (colour #333) but had no :hover rule at all. */
.block-categories .block_content .arrows .arrow-right:hover,
.block-categories .block_content .arrows .arrow-down:hover {
  color: #f9ba48;
}

/* ps_imageslider / carousel prev-next hover */
.carousel .carousel-control .icon-next:hover i,
.carousel .carousel-control .icon-prev:hover i {
  color: #f9ba48;
}

/* my-account link hover */
.account-list a:hover {
  color: #f9ba48;
}

/* DELIBERATELY NOT PORTED, with reasons:
 *  - .scroll-box-arrows i:hover{border-color:#f9ba48;color:#f9ba48}
 *      This child hides that control entirely (#main .scroll-box-arrows{display:none}), so the
 *      hover state can never be seen.
 *  - .block_newsletter form input[type=email]:focus{outline:3px solid #f9ba48} and its two
 *      sibling rules.
 *      ps_emailsubscription is NOT INSTALLED on Bergsma (not in the 72-module list) and is not
 *      registered on any hook, so there is no newsletter form to focus. The child still carries
 *      some inherited .block_newsletter CSS; it is harmless but dead, and is listed in
 *      REBUILD-TODO.md as a candidate for removal.
 *  - #tmcmsblock .text>a:hover{color:#f9ba48}
 *      tm_cmsblock does not exist on 9.1.4. */


/* ---------------------------------------------------------------------------------------------
 * .custom-file — kept as a LIVE STYLING HOOK, not converted (2026-07-29)
 *
 * `custom-file` is a Bootstrap 4 class that BS5 renamed away, so the BS5 sweep would normally
 * replace it. It is NOT converted here, for two reasons:
 *   1. In templates/catalog/_partials/product-customization.tpl the element is a WRAPPER <span>
 *      around a js-file-name span + the file input + a button. Bootstrap 5's suggested
 *      replacement, `form-control`, would put input borders, padding and width:100% on a
 *      wrapper — visibly wrong.
 *   2. Bergsma's live theme styles this exact context itself, so the class carries real design.
 * The live declarations are therefore ported below (from the old theme's assets/css/theme.css,
 * `.product-customization .custom-file`), which makes the token load-bearing rather than dead —
 * the same treatment given to .custom-checkbox / .custom-radio (PrestaShop swatch wrappers).
 * Vendor-prefixed duplicates dropped.
 * ------------------------------------------------------------------------------------------- */
.product-customization .custom-file {
  position: relative;
  display: block;
  width: 100%;
  height: 2.625rem;
  line-height: 2.625rem;
  background: #ebebeb;
  color: #acaaa6;
  text-indent: 0.625rem;
  margin-top: 1.25rem;
}
.product-customization .custom-file button {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}


/* =========================================================================
 * ===  RESPONSIVE PORT FROM LIVE'S COMPILED BUNDLE  (2026-07-29)        ===
 * =========================================================================
 * WHY: the rebuild carried only ~14% of live's responsive rules (145 rules
 * inside media queries vs live's 1062), which is why mobile was unusable.
 *
 * SOURCE OF TRUTH — and it is now confirmed authoritative:
 *   themes/PRS080193_06/assets/cache/theme-9ca68c92.css
 * The LIVE site (https://webshop.bergsmaendeboer.nl) was reachable on
 * 2026-07-29 and its <head> references *that exact bundle hash*, so the file
 * this port reads is byte-identical to what production serves. Every value
 * below is copied from it, not transcribed by eye.
 *
 * BREAKPOINTS ARE LIVE'S, DELIBERATELY (Bootstrap 4-ALPHA, not BS5):
 *   544/768/992/1200/1450 + 480 + the odd ones 315/360/400/479/543/768/867.
 *   The master desktop<->mobile switch is 991/992, NOT 768.
 *   Do NOT "modernise" these to BS5's 576/…/1400.
 *
 * WHAT WAS PORTED vs SKIPPED — 1062 media-query rules in live's bundle:
 *   472 judged portable (the new theme renders matching markup), of which
 *   480 selector-level rules are emitted here (a comma-list counts once per
 *   part, and rules the child already had are omitted);
 *   590 skipped. Skip reasons, largest first:
 *     251  Bootstrap 4-alpha's own framework: .col-/.pull-/.push-/.offset-*,
 *          .text-{sm,md,lg,xl}-*, .hidden-*-{up,down}, .navbar-*, .card-deck/
 *          -group/-columns, .progress-*, .form-inline, .input-group-addon/-btn,
 *          .jumbotron, .modal-sm, .visible-print-*. The parent ships BS5's
 *          equivalents under NEW names and the child's templates use those, so
 *          porting these would be dead weight. Consequence accepted and
 *          documented: BS5's `sm` tier starts at 576px, live's at 544px, so
 *          544-575px behaves like BS5 rather than like live.
 *      ~8  BS4 carousel 3D transitions keyed on .next/.prev/.left/.right —
 *          BS5 renamed these to .carousel-item-{next,prev,start,end}.
 *      ~3  an IE9-only `screen and (min-width:0\0)` hack for .progress.
 *     rest  markup this shop does not render: every tm_* TemplateMela module
 *          (#tmcmsblock, .tmcms1block, #servicecmsblock, #tmcategorytabs,
 *          .tm-hometabcontent, #tmsubbanner, .special-banner, #tmfootercmsblock,
 *          #links_block_top/_footer, #tm_toplink, #tm_footerlink, #tmpaymentcmsblock,
 *          .cms-block, .cms_offer1 and .cms_offer2, .service-cms-banner-list1..4,
 *          .first-content, .second-content, .third-content),
 *          the blog (#categories_blog_menu, .outer_blog, #tmsmartblog_block),
 *          brands (#brand_list, .brand-*: this shop has 0 manufacturers),
 *          #stores/.page-stores/.store-item-* (hummingbird's stores.tpl uses
 *          different markup), .flexslider/.flex-direction-nav (not bundled),
 *          .block-social/#block_social_toggle (ps_socialfollow is NOT installed
 *          and registered on no hook), #right-column (the layout's right_column
 *          block is EMPTY, so it never renders), .online-only, .currency-selector
 *          (single currency), #order-details, #checkout-cart-summary.
 *
 * RETARGETED, not skipped (live selector -> what this theme actually renders):
 *   #content-wrapper -> #center-column     (layout-left-column.tpl)
 *   #order-items     -> .order-items       (child emits a class, live an id)
 *   #menu-icon       -> .menu-icon         (live's id existed only on checkout)
 *   .page-not-found  -> .page-pagenotfound (PS9 body class)
 *   .page-my-account -> .page-customer-account
 *   .col-xs-3.text-xs-right -> .col-4.text-end   (BS5 sweep already done in tpl)
 *   .col-xs-2/-12    -> .col-2/.col-12
 *
 * ONE BUG IN LIVE'S OWN CSS NOT REPRODUCED: live's bundle contains
 * `category #left-column #search_filter_controls button .material-icons{color:#fff}`
 * — missing the `#`, so it matches a non-existent <category> element and does
 * nothing on live either. A later, correct `#category …{color:#000}` rule is the
 * one that applies, and that one IS ported.
 *
 * Vendor prefixes (-webkit-/-moz-/-ms-/-o-) are dropped throughout: 2013-era
 * prefixes with identical computed values in every browser this shop targets.
 * ========================================================================= */

@media (min-width:544px) {
  .container { max-width: 576px; }
  .modal-dialog { max-width: 600px; margin: 30px auto; }
  .carousel-caption { right: 20%; left: 20%; padding-bottom: 30px; }
  .carousel-indicators { bottom: 20px; }
  .js-product-images-modal .modal-dialog { max-width: 800px; }
}

@media (min-width:768px) {
  .container { max-width: 720px; }
  .products .product_list li.product_item.col-sm-6 { width: 33.33%; }
  .products .product_list li.item.col-sm-6 { width: 33.33%; }
  .products .product_list li.product_item.col-md-6 { width: 33.33%; }
}

@media (min-width:992px) {
  .container { max-width: 940px; }
  .products .product_list li.product_item.col-md-4 { width: 33.33333%; }
  .products .product_list li.item.col-md-4 { width: 33.33333%; }
  .products .product_list li.product_item.col-md-6 { width: 33.33%; }
  .products .product_list li.product_item.col-sm-6 { width: 33.33%; }
  .products .product_list li.item.col-sm-6 { width: 33.33%; }
}

@media (min-width:1200px) {
  .container { max-width: 1170px; }
  .products .product_list li.product_item.col-sm-6 { width: 25%; }
  .products .product_list li.item.col-sm-6 { width: 25%; }
  .products .product_list li.product_item.col-md-6 { width: 25%; }
}

@media (min-width:1450px) {
  .container { max-width: 1400px; }
  .products .product_list li.product_item.col-lg-3 { width: 25%!important; }
  .products .product_list li.item.col-lg-3 { width: 20%!important; }
  #index .products .product_list li.product_item.col-lg-3 { width: 20%!important; }
  .products .product_list li.product_item.col-sm-6 { width: 20%; }
  .products .product_list li.item.col-sm-6 { width: 25%; }
  .products .product_list li.product_item.col-md-6 { width: 25%; }
  .featured-products .products .product_list li.product_item.col-sm-6 { width: 25%; }
}

@media (min-width:481px) {
  .products .product_list li.product_item.col-sm-6 { width: 33.33%; }
  .products .product_list li.item.col-sm-6 { width: 33.33%; }
  .products .product_list li.product_item.col-md-6 { width: 33.33%; }
}

@media (max-width:1449px) {
  #_desktop_user_info { width: 10%; }
  .products-selection>div { width: 46%; }
  #center-column { width: 77.5%; }
  #product .product_middle { width: 45.2%; }
  #products .product-title { float: left; position: relative; width: 100%; }
  .products .product-title { float: left; position: relative; width: 100%; }
  .product-accessories .product-title { float: left; position: relative; width: 100%; }
  .products .product-price-and-shipping { clear: both; }
  .product-price { clear: both; }
  .footer-container .links { padding: 0; }
  /* DROPPED (dead): #products .products .list li.product_item .center-block { width: 69%; } -- `.center-block`
     is a BS3 utility this theme does not emit on product cards (only two
     checkout partials use the token, a different context), so the rule could
     never match. Retargeting would be guesswork about the list-view markup. */
  .product-features>dl.data-sheet dd.value { width: 47%; }
  .product-features>dl.data-sheet dt.name { width: 47%; }
  #checkout .col-md-8 { width: 52%; }
}

@media (max-width:1200px) {
  #header .header-top.fixed { padding: 11px 18px; }
}

@media (max-width:1199px) {
  #checkout #content .col-md-4 { width: 23%; }
  #product .product_middle { width: 41.2%; }
  .right_cms { width: 22.2%; }
  #category .products .product_list li:last-child.product_item .thumbnail-container { border: none; }
  #category .products .product_list li:nth-child(3n+0).product_item .thumbnail-container { border: none; }
  #category .products .product_list li:nth-child(4n+0).product_item .thumbnail-container { border-right: 1px solid #f0f0f0; }
  .breadcrumb { width: 76%; }
  .layout-left-column #center-column { width: 76%; }
  #_desktop_user_info .tm_userinfotitle { font-size: 12px; }
  #_desktop_user_info .tm_userinfotitle1 { font-size: 12px; }
  #_desktop_cart .cart { font-size: 12px; }
  #_desktop_cart .value { font-size: 12px; }
  .header-top .search-widget { width: 42%; }
  #center-column { width: 75%; }
  .product-actions .add-to-cart { font-size: 13px; padding: 6px 10px; }
  .product-actions-main .add-to-cart { font-size: 13px; padding: 6px 10px; }
  #left-column .block .block_title { padding: 15px; }
  #left-column .links .h3 { padding: 15px; }
  #left-column .block .block_content { padding: 15px 15px 20px; }
  .footer-container { padding: 67px 0 35px; }
  #_desktop_logo { padding: 45px 0; }
  #left-column { width: 21%; }
  .tabs .nav-tabs .nav-link { padding: 10px 10px; }
  #blockcart-modal .product-image { width: 231px; }
  .cart_block_list { max-height: 91px; }
  .footer-container .links.block:nth-child(3) { width: 21%; }
  #footer .footer-container .block-contact { padding: 0 0 0 50px; width: 31%; }
  .copyright { text-align: center; width: 100%; clear: both; }
  .products-selection .total-products p { font-size: 12px; }
  .products-selection .display { margin: 0 10px 0 0; }
  /* DROPPED (dead): #products .products .list li.product_item .center-block { min-height: auto; width: 61%; } -- `.center-block`
     is a BS3 utility this theme does not emit on product cards (only two
     checkout partials use the token, a different context), so the rule could
     never match. Retargeting would be guesswork about the list-view markup. */
  .pagination .col-md-4 { width: 38%; }
  .pagination .col-md-8 { float: right; width: 54%; }
  .productpage_title { font-size: 20px; line-height: 24px; }
  #cart .product-line-grid .col-md-6.col-2.price { padding: 0 20px; }
  #cart .product-line-grid .product-line-grid-right .product-price strong { font-size: 16px; }
  .page-customer-account #content .links a { padding: 0 10px; font-size: 15px; }
  .page-customer-account #content .links a span.link-item { padding: 20px 10px; }
  #addresses .col-lg-4.col-md-6.col-sm-6 { width: 45%; }
  .breadcrumb .h1 { font-size: 20px; }
  .page-order-detail .box { overflow: auto; }
  .product-prices div { font-size: 20px; }
  .product-tabcontent { width: 74%; }
  .product-accessories { width: 74%; }
  .products-selection>div { width: 50%; }
}

@media (max-width:991px) {
  #left-column .block .block_content.collapse { display: none; }
  #left-column .block .block_content.collapse.in { display: block; }
  #category #left-column #search_filter_controls { text-align: center; margin-bottom: 1rem; }
  #category #left-column #search_filter_controls button { margin: 15px 5px 0; padding: 5px 12px; text-transform: capitalize; }
  #category #left-column #search_filters { margin-bottom: 0; box-shadow: none; padding: 0; }
  #category #left-column #search_filters .facet { padding-top: 0; border-bottom: 1px solid #f6f6f6; }
  #category #left-column #search_filters .facet .title { cursor: pointer; padding: 13px 15px; }
  #category #left-column #search_filters .facet .title .collapse-icons .remove { display: none; }
  #category #left-column #search_filters .facet .title[aria-expanded='true'] .collapse-icons .add { display: none; }
  #category #left-column #search_filters .facet .title[aria-expanded='true'] .collapse-icons .remove { display: block; }
  #category #left-column #search_filters .facet .h6 { margin: 0; padding: 0; display: inline-block; }
  #category #left-column #search_filters .facet .navbar-toggler { display: inline-block; padding: 0 0 0 0; }
  #category #left-column #search_filters .facet .collapse { display: none; }
  #category #left-column #search_filters .facet .collapse.in { display: block; }
  #category #left-column #search_filters .facet .facet-label a { margin-top: 0; }
  #category #left-column #search_filters .facet ul { margin-bottom: 0; }
  #category #left-column #search_filters .facet ul li { border-top: 1px solid #f6f6f6; padding: 13px 15px; }
  #left-column .block .block_title .collapse-icons .remove { display: none; }
  #tmrightbanner .block .block_title .collapse-icons .remove { display: none; }
  #left-column .block .block_title[aria-expanded='true'] .collapse-icons .add { display: none; }
  #tmrightbanner .block .block_title[aria-expanded='true'] .collapse-icons .add { display: none; }
  #left-column .block .block_title[aria-expanded='true'] .collapse-icons .remove { display: block; }
  #tmrightbanner .block .block_title[aria-expanded='true'] .collapse-icons .remove { display: block; }
  #left-column .block .block_title .navbar-toggler { display: inline-block; padding: 0; color: #414141; }
  #tmrightbanner .block .block_title .navbar-toggler { display: inline-block; padding: 0; color: #414141; }
  #product-modal .modal-content .modal-body .mask { margin-top: 20px; margin-bottom: 0; }
  #product-modal .modal-content .modal-body .product-images img { margin-right: 10px; }
  .product-images>li.thumb-container { display: inline-block; }
  .product-cover img { width: 100%; }
  #product-modal .modal-content .modal-body { box-orient: vertical; box-direction: normal; flex-direction: column; margin-left: 0; }
  #product-modal .modal-content .modal-body img.product-cover-modal { width: 100%; }
  #product-modal .modal-content .modal-body .arrows { display: none; }
  #product-modal .modal-content .modal-body .image-caption { width: 100%; }
  #blockcart-modal .modal-dialog { width: calc(100% - 20px); }
  #blockcart-modal .modal-body { padding: 1.875rem; }
  .social-sharing { padding: 15px 0; text-align: left; }
  .product-quantity .add { margin-left: 0; width: 100%; }
  .col-md-5.product_main_img { width: 41.33333%; }
  #header .header-nav .language-selector img { margin-right: 0; margin-top: -1px; }
  #_desktop_user_info>.user-info a { margin-right: 0; }
  #_mobile_user_info>.user-info a { margin-right: 0; }
  #tmleftbanner { margin: 0!important; }
  .product-title a { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #product .product_middle { width: 58.2%; }
  .right_cms { width: 100%; padding: 15px; margin: 0; }
  #tmrightbanner .block .block_title { font-size: 14px; text-transform: uppercase; background: #f0f0f0; padding: 16px; font-weight: 600; color: #000; line-height: 20px; }
  #tmrightbanner ul { margin: 10px 0; }
  .breadcrumb { width: 100%; }
  .layout-left-column #center-column { padding: 0; width: 100%; }
  #header .header-top .header-div { padding: 0; border: none; }
  #header .header-nav { background: #d13925; padding: 15px; box-shadow: 0 2px 11px 0 rgba(0,0,0,.1); }
  /* RE-SCOPED 2026-07-29: live hides this strip, but on this build the mobile cart/account mounts
     are only populated below 768 (PS responsive JS), so hiding it up to 991 left 768-991 with no
     navbar at all. The <=767 hide now lives in its own block further down. */

  /* RE-SCOPED 2026-07-29: these hid the desktop account/cart across the whole <=991 range, but the
     MOBILE mounts are only populated below 768 (PS responsive JS moves them), so 768-991 ended up
     with no account and no cart at all. The hides now apply only below 768, where the mobile mounts
     really do take over. Measured at 900px after the change: #_desktop_logo 144x89,
     #_desktop_cart 51x58, strip 900x58 visible. */
  #_desktop_user_info { width: auto; margin: 0; }
  #header .blockcart .cart-price .material-icons { display: inline-block!important; font-size: 18px; }
  #_mobile_cart .cart_block .cart-item .cart-image { margin-top: 0; }
  #_mobile_cart .cart-price { display: none; }
  #_mobile_user_info { position: relative; margin-right: 25px; margin: 0 10px; }
  #product-modal .modal-content .modal-body figure { width: 100%; }
  #product-modal .modal-content .modal-body .thumbnails { width: 100%; }
  #product-modal .modal-content .modal-body .product-images { transform: none!important; margin: 0; }
  #_mobile_user_info .tm_userinfotitle { background: #000 url(data:image/png;base64,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) no-repeat scroll 12px 12px; border: 1px solid #000; border-radius: 5px; cursor: pointer; font-size: 0; height: 38px; margin: 0; padding: 0; position: relative; text-align: center; width: 38px; transition: all 500ms ease 0s; }
  #_mobile_user_info .tm_userinfotitle1 { display: none; }
  #_mobile_user_info .material-icons { display: none; }
  .btn.prev.additional_prev { left: 0; }
  .btn.prev.additional_next { right: 0; }
  #left-column #tmleftbanner1 { border: 3px solid #d13925; }
  .slide.tmleftbanner1-container { margin: 10px; }
  #left-column .block { margin-bottom: 10px; }
  #left-column .links { margin-bottom: 10px; }
  .footer-container .links { border: none; width: 100%; margin: 0; padding: 0; }
  #left-column .material-icons { color: #000; }
  #left-column #search_filters .navbar-toggler .material-icons { color: #000; }
  #left-column #search_filters .navbar-toggler .material-icons.remove { color: #d13925; }
  #category #left-column #search_filter_controls button .material-icons { color: #000; transition: all 500ms ease 0s; }
  #category #left-column #search_filter_controls button:hover .material-icons { color: #fff; }
  #left-column .category-sub-menu .material-icons { color: #333; }
  .block-categories .block_title>a { color: #000!important; text-transform: uppercase!important; }
  .block-categories .category-sub-menu li { padding: 3px 15px; }
  .block-categories .block_content .collapse-icons { right: 10px; }
  .footer-container .links.block:nth-child(3) { width: 100%; }
  #footer .footer-container .block-contact { border-left: 0; width: 100%; padding: 0; }
  #index #center-column { margin: 0 0 30px 0; padding-left: 0; padding-right: 0; width: 100%; }
  #center-column { margin: 0 0 15px 0; width: 100%; }
  #_mobile_cart { float: right; width: auto; z-index: 99; position: relative; }
  #header #_mobile_cart .blockcart { background: #000 none repeat scroll 0 0; border: 1px solid #000; border-radius: 5px; display: block; float: right; padding: 5px 10px; position: relative; text-align: center; white-space: nowrap; transition: all 500ms ease 0s; }
  #_mobile_cart .cart-products-count { display: inline-block; vertical-align: middle; color: #fff; background-color: #1f1f1f; font-size: 12px; font-weight: 500; line-height: 14px; position: relative; padding: 3px 7px; border-radius: 50%; }
  #_mobile_cart a .cart-image { margin: 0; display: inline-block; vertical-align: middle; }
  #header .header-nav .right-nav #_desktop_cart { display: none; }
  #header .header-nav .right-nav #_desktop_user_info { display: none; }
  #header .header-nav .right-nav #_desktop_language_selector { display: none; }
  #header .header-nav .menu-icon { margin: 12px 0 0 0; }
  .cart-price { width: auto; }
  #header .logo { width: auto; }
  #products .product-miniature { margin: 0 auto; }
  .products .product-miniature { margin: 0 auto; }
  .sub-menu { left: 0; min-width: 100%; }
  #blockcart-modal .product-image { width: 100%; display: block; max-width: 250px; margin: 0 auto .9375rem; }
  #blockcart-modal .product-name { margin-top: .625rem; }
  #product-availability { margin-top: .625rem; }
  #search_filters .facet .facet-label { text-align: left; }
  .block-category .category-cover { position: relative; text-align: center; margin: 0 0 20px 0; }
  .block-category { margin-bottom: 20px; }
  .done { margin: 0; padding: 0; }
  body#checkout section.checkout-step .delivery-option-2 { box-orient: vertical; box-direction: normal; flex-direction: column; }
  .delivery-option { display: flex; margin: auto; }
  .delivery-option .custom-radio { box-flex: 0; flex: 0 0 auto; }
  .condition-label label[for='conditions_to_approve[terms-and-conditions]'] { text-align: left; }
  .header-top .search-widget { width: 100%; float: none; padding: 0; left: 0; }
  #_mobile_user_info .user-info { display: none; z-index: 10; top: 63px; }
  .header-top .search-widget form { margin: 0 auto; }
  .header-top .search-widget form input[type='text'] { min-width: inherit; background: #FFF; }
  #header .header-nav.fixed { position: fixed; top: 0; width: 100%; z-index: 9999; animation: fixedAnim 0.8s ease 0s normal both 1 running; }
  #header .header-nav .top-logo { float: left; margin: 0; margin-right: auto; }
  #_mobile_language_selector .language-selector .link { background: #e7e7e7 none repeat scroll 0 0; border-radius: 5px; padding: 3px 5px 2px; }
  #header .header-nav .menu-icon:hover span { color: #fff!important; }
  #header .header-nav .menu-icon:hover i { color: #fff!important; }
  #_desktop_top_menu { display: none; }
  #left-column .block .block_title { margin: 0; cursor: pointer; text-align: left; border: none; }
  #left-column .links .h3 { margin: 0; cursor: pointer; text-align: left; border: none; }
  .block_newsletter form { width: 100%; float: left; }
  .block_newsletter { width: 100%; }
  .block-contact { padding-left: 1.5rem; }
  .footer-container .links:first-child { width: 100%; margin: 0; padding: 0; }
  .footer-container .wrapper { padding-left: 0!important; padding-right: 0!important; }
  .footer-container .links .title { padding: 10px 0; cursor: pointer; margin: 0; line-height: 20px; width: 100%; float: left; }
  .footer-container .links:last-child { padding: 0; }
  .footer-container .links .h3 { font-size: 15px; margin: 0; }
  .footer-container .links h3 { font-size: 15px; margin: 0; }
  .footer-container .links h3 a { font-size: 15px; margin: 0; }
  .footer-container .links .title .collapse-icons .remove { display: none; }
  .footer-container .links .title[aria-expanded='true'] .collapse-icons .add { display: none; }
  .footer-container .links .title[aria-expanded='true'] .collapse-icons .remove { display: block; }
  #block-contact_list i { margin-top: 0; line-height: 24px; }
  .footer-container .links .navbar-toggler { display: inline-block; vertical-align: middle; padding: 0; color: #d13925; }
  .footer-container .links .collapse { display: none; }
  .footer-container .links .collapse.in { display: block; }
  .footer-container .links ul { margin-bottom: 0; padding: 0; width: 100%; float: left; }
  #footer .footer-container .block-contact ul { width: 100%; float: left; padding: 0 30px; }
  #footer .footer-container .block-contact ul>li { width: 100%; float: left; }
  .footer-container .copyright { text-align: center; float: left; width: 100%; }
  .footer-container { padding: 30px 0; }
  .footer-after { padding: 20px 0; }
  .block_newsletter .title { margin-bottom: 15px; }
  .footer-container .col-md-6 { width: 100%; }
  #wrapper { margin-bottom: 30px; }
  #left-column { width: 100%; padding-left: 0; padding-right: 0; }
  #product #center-column { width: 100%; padding: 0; }
  .products-selection .sort-by { text-align: left; margin-left: 0; width: auto; padding-top: 5px; }
  .products-sort-order { width: 70%; float: left; }
  .products-sort-order .select-title { margin: 0; }
  #header .header-nav .cart-preview #bgimage { background: rgba(0,0,0,0) url(data:image/png;base64,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) no-repeat scroll 0 0; height: 20px; position: relative; width: 20px; margin-right: 3px; display: inline-block; vertical-align: middle; }
  #header .header-nav .cart-preview .shopping-cart { display: none; }
  #header .header-nav .right-nav { margin-top: 0; }
  .header-top #search_widget { display: none; }
  #header .header-top { background: rgba(0,0,0,0) none repeat scroll 0 0; height: auto; margin: 0; padding: 0; position: relative; }
  .searchtoggle { display: none; position: absolute; right: 0; top: 63px; width: 250px; z-index: 9; }
  span.search_button { background: #000 url(data:image/png;base64,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) no-repeat scroll 9px 11px; border: 1px solid #000; border-radius: 5px; color: #fff; cursor: pointer; display: block; font-size: 0; height: 38px; padding: 0; position: relative; text-align: center; width: 38px; z-index: 5; }
  #products .page-pagenotfound .search-widget span.search_button { display: none; }
  #pagenotfound .page-pagenotfound .search-widget span.search_button { display: none; }
  #products .page-pagenotfound .searchtoggle { display: block; position: relative; top: 0; width: 100%; border: none; }
  #pagenotfound .page-pagenotfound .searchtoggle { display: block!important; position: relative; top: 0; width: 100%; border: none; overflow: visible!important; height: auto!important; }
  #search #products .page-pagenotfound .searchtoggle { display: block!important; overflow: visible!important; height: auto!important; }
  .search-widget { display: block; float: right; margin-right: 25px; padding: 0; position: relative; width: auto; }
  .header-nav #search_widget { display: block; margin: 0; }
  .search-widget form input[type='text'] { width: 100%; border-radius: 5px; box-shadow: 0 2px 11px 0 rgba(0,0,0,.1); padding: 0 44px 0 20px; }
  #header .header-nav #_mobile_user_info .user-info .account .material-icons { display: none; }
  #_mobile_user_info>.user-info a:hover .material-icons { color: #d13925!important; }
  #_mobile_user_info>.user-info a:hover span { color: #d13925!important; }
  .cart_block_list { max-height: 96px; }
  #header .cart_block { top: 56px; }
  .product-tabcontent { padding-top: 30px; width: 100%; }
  #tmrightbanner { margin: 0; }
  #left-column .block .block_title .navbar-toggler .material-icons { line-height: 16px; }
  #left-column .block .block_content { padding: 0; }
  #left-column .products { padding: 0 15px 25px; }
  .products-selection>div { padding: 0 10px; }
  .products-selection .filter-button { float: right; padding: 0; width: auto; margin-top: -3px; }
  .products-selection .col-md-6 { width: 100%; }
  .products-selection .showing { margin-top: 10px; padding: 0; font-size: 13px; float: left; width: auto; }
  #checkout .col-md-8 { width: 100%; }
  #checkout #content .col-md-4 { width: 100%; padding: 0 15px; }
  .slide.tmleftbanner-container { margin: 10px; }
  .quickview .modal-footer { padding: 0; }
  .product-accessories { width: 100%; }
}

@media (max-width:768px) {
  .product-cover .layer { position: absolute; top: 0; left: 0; height: 100%; width: 100%; padding: 14px; cursor: pointer; z-index: 1; }
}

@media (max-width:767px) {
  .order-items { border-right: 0; margin-bottom: 2.5rem; }
  .order-items .card-title { border-bottom: 1px solid #ebebeb; margin-bottom: 1rem; padding-bottom: 1rem; }
  .order-items hr { border-top-color: #ebebeb; }
  .products .product_list .quick-view { opacity: 1; transform: scale(1); display: none; }
  .products-sort-order .select-title { margin-left: 0; }
  .products-selection h1 { padding-top: 0; text-align: center; margin-bottom: 1rem; }
  .products-selection .showing { padding-top: 1rem; }
  .pagination .page-list { float: left; }
  #blockcart-modal .modal-body { padding: 1rem; }
  #product .page-content .product-leftside { width: 310px; margin: 0 auto 25px; clear: both; overflow: hidden; height: 100%; }
  .product-line-grid-body { margin-bottom: 1rem; }
  .tab-main-title { margin-bottom: 20px; }
  .col-md-5.product_main_img { width: auto; float: none; }
  #category .products .product_list li:last-child.product_item .thumbnail-container { border-right: 1px solid #f0f0f0; border: none; }
  #category .products .product_list li:nth-child(3n+0).product_item .thumbnail-container { border-right: 1px solid #f0f0f0; }
  #category .products .product_list li:nth-child(2n+0).product_item .thumbnail-container { border: none; }
  .featured-products .hb-animate-element.left-to-right { width: 100%; float: none; }
  #products .products .list li.product_item .thumbnail-container { border: none; }
  #products .products .list li.product_item .thumbnail-container .product-thumbnail { border: none; }
  #_mobile_user_info { margin-right: 10px; }
  .search-widget { margin-right: 10px; }
  .products .product_list li.product_item:hover .product-miniature { box-shadow: none; }
  .products .product_list li.item:hover .product-miniature { box-shadow: none; }
  #center-column .products .product-price-and-shipping .regular-price { margin: 0; }
  .products .product_list li.product_item:hover .product-actions { float: none; left: auto; right: auto; position: relative; display: inline-block; }
  .products .product_list li.product_item:hover .product-actions-main { float: none; left: auto; right: auto; position: relative; display: inline-block; }
  .products .product_list li.item:hover .product-actions { float: none; left: auto; right: auto; position: relative; display: inline-block; }
  .products .product_list li.item:hover .product-actions-main { float: none; left: auto; right: auto; position: relative; display: inline-block; }
  .products .product-miniature .add-to-cart { margin: 0; display: inline-block; }
  .thumb-container.product_item { width: 50%; }
  #wrapper { box-shadow: none; }
  #header .header-nav .right-nav { box-orient: vertical; box-direction: normal; flex-direction: column; }
  #header .header-nav .user-info { text-align: left; margin-left: 0; }
  #header .header-nav .blockcart { background: inherit; }
  section.checkout-step { width: 100%; }
  label { clear: both; }
  #products .product-miniature { margin: 0 auto; }
  .products .product-miniature { margin: 0 auto; }
  .products .product_list li.product_item:hover .product-miniature .add-to-cart { display: inline-block; }
  .products .product_list li.item:hover .product-miniature .add-to-cart { display: inline-block; }
  .products .product_list.list .quick-view { margin: 0 5px; }
  .block-contact { padding-left: .9375rem; border: none; }
  .menu { padding-left: 0; }
  .dropdown-item { padding-left: 0; }
  .container { max-width: 100%; padding-left: 10px; padding-right: 10px; }
  #header .header-nav .container { padding: 0; }
  .block_newsletter .title { margin-bottom: 8px; margin-left: 10px; }
  .products .product-miniature:hover .product-price-and-shipping { display: block; }
  body#checkout section.checkout-step .delivery-option-2 .row div { width: 100%; }
  #_mobile_cart .header.blockcart-header { display: block; float: left; }
  #header .blockcart .cart-price .material-icons { display: none!important; }
  .products-section-title { margin-bottom: 10px; }
  .products .product_list li.product_item.col-sm-6 { width: 50%; }
  .products .product_list li.item.col-sm-6 { width: 50%; }
  .products .product_list li.product_item.col-md-6 { width: 50%; }
  .footer-container { padding: 30px 0; }
  .products .product_list li .product-miniature .product-actions { transform: translateX(0); position: relative; opacity: 1!important; margin-top: 10px; }
  .products .product_list li .product-miniature .product-actions-main { transform: translateX(0); position: relative; opacity: 1!important; margin-top: 10px; }
  .products .product_list li:hover .product-price-and-shipping { opacity: 1; }
  .product-flags { opacity: 1!important; }
  .products .product_list li .product-description { min-height: 150px; }
  #footer .footer-container .row.footer { margin: 0 auto; }
  .copyright { margin: 0; padding: 0; }
  .products-selection>div .row { margin: 0 -10px; }
  .products-selection .filter-button { margin-top: -2px; }
  .pagination .col-md-8 { width: auto; }
  /* DROPPED (dead): #products .products .list li.product_item .center-block { padding: 0; width: 100%; margin-top: 25px; } -- `.center-block`
     is a BS3 utility this theme does not emit on product cards (only two
     checkout partials use the token, a different context), so the rule could
     never match. Retargeting would be guesswork about the list-view markup. */
  #product .col-md-7 { float: left; width: 100%; padding: 0 15px; }
  #addresses .col-lg-4.col-md-6.col-sm-6 { width: auto; }
  #password .btn { margin: 20px 0 0 10px; }
  #password .forgotten-password .center-email-fields .form-control-submit { padding: 6px 25px 5px; }
  .searchtoggle { width: 250px; }
  .search-widget form input[type='text'] { letter-spacing: 0; }
  .block_newsletter .text { margin: 0 0 15px 0; }
  #header .cart_block { right: -16px; top: 56px; }
  .social-sharing { margin-top: 0; }
  #password .forgotten-password .center-email-fields .form-control-label.required { padding: 0 10px; }
  /* DROPPED (dead): #products .products .list li.product_item .center-block .product-title a { text-align: left; } -- `.center-block`
     is a BS3 utility this theme does not emit on product cards (only two
     checkout partials use the token, a different context), so the rule could
     never match. Retargeting would be guesswork about the list-view markup. */
  .customNavigation { opacity: 1; top: 32%; }
  .product-accessories .customNavigation a.prev { left: auto; right: 0; }
  .crosssell-products .customNavigation a.prev { left: auto; right: 0; }
  .productscategory-products .customNavigation a.prev { left: auto; right: 0; }
  .product-accessories .customNavigation a.next { right: auto; left: 0; }
  .crosssell-products .customNavigation a.next { right: auto; left: 0; }
  .productscategory-products .customNavigation a.next { right: auto; left: 0; }
  .customNavigation a.prev { left: 0; right: auto; }
  .customNavigation a.next { right: 0; left: auto; }
  #featureProduct .customNavigation a { position: relative; }
}

@media (max-width:543px) {
  body#checkout section.checkout-step .content { padding: .9375rem 0; }
  #payment-confirmation button { font-size: .875rem; }
  #payment-confirmation button.btn { white-space: normal; }
  .products-selection .filter-button { padding-left: 0; }
  .cart-item { border-bottom: 1px solid #ebebeb; }
  .cart-item:last-child { border-bottom: 0; }
}

@media (max-width:480px) {
  body#checkout .additional-information { margin-left: 0; }
  .js-qv-mask .customNavigation a.next { right: 0!important; left: auto!important; }
  .products .list .product-miniature .product-actions { width: 100%; }
  .products .list .product-miniature .product-actions-main { width: 100%; }
  #header .header-nav .menu-icon { margin-left: 10px; margin-top: 5px; }
  #products .products .list li.product_item .thumbnail-container { max-width: 100%; margin: 0 auto; }
  /* DROPPED (dead): #products .products .list li.product_item .center-block { max-width: 100%; } -- `.center-block`
     is a BS3 utility this theme does not emit on product cards (only two
     checkout partials use the token, a different context), so the rule could
     never match. Retargeting would be guesswork about the list-view markup. */
  .block_newsletter .title { margin: 0; }
  .block_newsletter form { width: 100%; }
  #_mobile_user_info .user-info { top: 49px; }
  .products .product-miniature .discount { display: none; }
  #spe_res { margin: 0 -5px; }
  .products .product-miniature .discount-percentage.discount-percentage { padding: 0; }
  #cart .cart-grid-body .cart-item .has-discount .discount { padding: 0; }
  #left-column .product-description .discount-percentage { padding: 0; }
  .products-selection .filter-button { padding-left: 0; padding-right: 0; }
  .products-sort-order { width: 60%; }
  #products .products .list li.product_item .thumbnail-container img { width: auto; }
  .pagination>div:first-child { float: left; text-align: right; width: 100%; }
  .tabs .nav-tabs .nav-item { width: 100%; float: left; text-align: center; margin: 0 0 5px 0; }
  #product .tabs .nav-tabs .nav-link.active { display: block; border-radius: 5px; }
  #product .tabs .nav-tabs .nav-link:hover { display: block; border-radius: 5px; }
  #product .product-tabcontent .nav-link { margin-right: 0; }
  .tabs .tab-pane { border-radius: 5px; }
  .products .tm-carousel { margin: 0 0 0; }
  #blockcart-modal .modal-title { font-size: 15px; }
  #cart .product-line-grid .col-md-6.col-2.price { margin-top: 5px; padding: 0 10px; }
  #payment-confirmation button { font-size: 12px; }
  #history .orders .order .label { font-size: 12px; letter-spacing: 0; }
  .form-control-comment { padding-left: 10px; }
  .page-order-detail .box { overflow: initial; }
  #order-detail #order-infos .col-4.text-end .button-primary { font-size: 13px; }
  #order-detail #order-infos .col-4.text-end { padding: 0; }
  .page-order-detail #order-history .history-lines .history-line .label { font-size: 13px; }
  .top_button { bottom: 42px; }
  #mobile_top_menu_wrapper #top-menu { padding: 0; }
  #order-confirmation .h1.card-title { font-size: 15px; letter-spacing: 0; }
  .page-footer .account-link span { letter-spacing: 0; }
  .order-totals .order-total .col-4 { font-size: 13px; padding: 0 5px; }
  .page-order-detail .order-items .order-item .qty .col-4.text-end { font-size: 13px; padding: 0 5px; }
  body#checkout section.checkout-step .address-item { flex: 0 0 100%; }
  #header .header-nav .top-logo { padding-right: 15px; margin-bottom: 0; }
  #header #_mobile_cart { top: 0; }
  #_mobile_user_info { top: 0; }
  .search-widget { top: 0; }
}

@media (max-width:480px)and (min-width:315px) {
  .products .product_list.list li.product_item { width: 100%; }
  .products .product_list li.product_item { width: 50%; float: left; text-align: center; }
}

@media (max-width:479px) {
  .product-accessories .customNavigation { width: 100%; top: 40%; left: auto; right: 0; }
  .crosssell-products .customNavigation { width: 100%; top: 40%; left: auto; right: 0; }
  .productscategory-products .customNavigation { width: 100%; top: 40%; left: auto; right: 0; }
  .product-accessories .customNavigation a.prev { left: 0; right: auto; }
  .crosssell-products .customNavigation a.prev { left: 0; right: auto; }
  .productscategory-products .customNavigation a.prev { left: 0; right: auto; }
  .product-accessories .customNavigation a.next { right: 0; left: auto; }
  .crosssell-products .customNavigation a.next { right: 0; left: auto; }
  .productscategory-products .customNavigation a.next { right: 0; left: auto; }
  .customNavigation a.prev { left: 0; }
  .customNavigation a.next { right: 0; }
  .js-qv-mask.additional_slider .customNavigation { top: 26%; }
}

@media (max-width:360px) {
  .product-line-grid-right .qty { width: 100%; }
  .product-line-grid-right .price { width: 100%; }
}

@media print {
  * { text-shadow: none!important; box-shadow: none!important; }
  *::before { text-shadow: none!important; box-shadow: none!important; }
  *::after { text-shadow: none!important; box-shadow: none!important; }
  *::first-letter { text-shadow: none!important; box-shadow: none!important; }
  *::first-line { text-shadow: none!important; box-shadow: none!important; }
  a { text-decoration: underline; }
  a:visited { text-decoration: underline; }
  abbr[title]::after { content: " (" attr(title) ")"; }
  pre { border: 1px solid #f0f0f0; page-break-inside: avoid; }
  blockquote { border: 1px solid #f0f0f0; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr { page-break-inside: avoid; }
  img { page-break-inside: avoid; }
  p { orphans: 3; widows: 3; }
  h2 { orphans: 3; widows: 3; page-break-after: avoid; }
  h3 { orphans: 3; widows: 3; page-break-after: avoid; }
  .table { border-collapse: collapse!important; }
  .table td { background-color: #fff!important; }
  .table th { background-color: #fff!important; }
  .table-bordered th { border: 1px solid #ddd!important; }
  .table-bordered td { border: 1px solid #ddd!important; }
}


/* =========================================================================
 * === POST-PORT FIXES: defects the port alone does not close ===============
 * ========================================================================= */

/* ---- 1. PRODUCT GRID: the specificity trap that caused the mobile report ----
 * MEASURED on staging before this fix (Playwright, 9 pages x 8 widths):
 *   products per row = 4 at EVERY width 360 -> 1600, card width 70px @360,
 *   74px @375, 100px @480 … and a fixed height of 485px at all widths.
 *   Live @375 renders 182.5px cards, 2 per row.
 * CAUSE: `:is(#category, #search, …) .products .product_list li.product_item`
 *   (line ~1433) is specificity (1,3,1) because :is() takes its most specific
 *   argument — an ID. Every responsive override in live's bundle is written
 *   unscoped, e.g. `.products .product_list li.product_item{width:50%}` =
 *   (0,3,1), so ALL of them lost and the 25% desktop width applied on phones.
 * FIX: restate live's cadence at live's breakpoints with the SAME :is() scope
 *   so the media queries actually win. Live's cadence, from its bundle:
 *     <=480  -> 50%   (2 per row)   [(max-width:480px)and (min-width:315px)]
 *     481-767-> 33.33% (3 per row)  [(min-width:481px)]
 *     768-1199 -> 33.33% (3 per row)
 *     >=1200 -> 25%    (4 per row)
 *   which matches the measured live cards: 182.5px @375 (2-up) and 279.8px
 *   @1600 (4-up).
 * The fixed `height:485px` is also released below 1200px — live's cards are
 * 323.5px tall at 375px, and a hard 485px leaves a large empty gap per row.
 * Desktop keeps 485px so the already-matched >=1200 layout is not disturbed. */
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product_list li.product_item { box-sizing: border-box; }
@media (max-width: 1199px) {
  :is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product_list li.product_item { width: 33.3333%; height: auto; }
  :is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product_list.list > li.product_item { width: 100%; height: auto; }
}
@media (max-width: 480px) {
  :is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product_list li.product_item { width: 50%; height: auto; }
  :is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) .products .product_list.list > li.product_item { width: 100%; height: auto; }
}
/* the per-row border dividers assume a 4-up rhythm; re-key them per breakpoint
   exactly as live does (3n at <=1199, 2n at <=767) at matching specificity */
@media (max-width: 1199px) {
  :is(#category, #search) .products .product_list li:nth-child(4n+0).product_item .thumbnail-container { border-right: 1px solid #f0f0f0; }
  :is(#category, #search) .products .product_list li:nth-child(3n+0).product_item .thumbnail-container { border: none; }
}
@media (max-width: 767px) {
  :is(#category, #search) .products .product_list li:nth-child(3n+0).product_item .thumbnail-container { border-right: 1px solid #f0f0f0; }
  :is(#category, #search) .products .product_list li:nth-child(2n+0).product_item .thumbnail-container { border: none; }
}

/* ---- 2. HERO SLIDER: 1px-tall collapse below 992px, and 2 slides on desktop ----
 * MEASURED: staged .topdiv height = 1px at 375 and 768 (live: 98.5 / 201.8),
 * with both slide images at 0x0; at 1600 the height is correct (420.4 = live).
 * CAUSE: the carousel presentation is entirely JS-driven — every
 * .home-hero-slide is `position:absolute; opacity:0` and only `.is-active`
 * returns one to flow. Below 992px no slide receives `.is-active`, so nothing
 * is in flow and `ul.rslides{min-height:1px}` is all the height that remains.
 * FIX (CSS-only, and JS-independent by design): make the FIRST slide the
 * default in-flow/visible one. With working JS `.is-active` still wins; with
 * broken or not-yet-run JS the hero shows exactly ONE image and can never
 * collapse. This also matches live, which shows a single image. */
#index .home-hero .bergsma-carousel .home-hero-slide:first-child {
  position: relative; opacity: 1; pointer-events: auto;
}
/* …but once JS has designated an active slide, a non-active first slide must
   go back to being an overlay, or two images would be in flow at once. */
#index .home-hero .bergsma-carousel:has(.home-hero-slide.is-active) .home-hero-slide:first-child:not(.is-active) {
  position: absolute; opacity: 0; pointer-events: none;
}
/* Belt and braces: if the JS never adds .bergsma-carousel at all, every slide
   is in normal flow and they stack vertically. Live shows one. */
#index .home-hero .homeslider-container:not(.bergsma-carousel) .home-hero-slide:not(:first-child) { display: none; }
/* NOTE FOR DANI — not a CSS problem: staging's slider has TWO ACTIVE SLIDES
   where live has ONE (live's slide id 1 is active=0). Deactivate the extra
   slide in BO > Design > Image slider to match live's content. The CSS above
   makes the page correct either way. */

/* ---- 3. HORIZONTAL OVERFLOW (measured; must be 0 at every width) ----
 * CART: document scrollWidth exceeded the viewport by 124px @360/375/480/543
 * and 127px @768/991. Cause: `#cart #left-column` is (2,0,0) with a hard
 * `width:270.188px`, which beats the stacking override
 * `.row.page-leftcol #left-column` (1,2,0); the flex-order block at (2,1,0)
 * only reaches it inside `.row.page-leftcol`, and the sidebar was left beside
 * a 100%-wide content column, starting at x=361 on a 360px viewport.
 * Fix: stack it at matching specificity, and clamp the two known wide children. */
@media (max-width: 991px) {
  #cart #left-column,
  #cart .row.page-leftcol #left-column { float: none; width: 100%; max-width: 100%; }
  #cart #center-column,
  #cart .row.page-leftcol #center-column { float: none; width: 100%; max-width: 100%; margin: 0; }
  #cart #content .cart-grid, #cart #content .cart-grid-body, #cart #content .cart-grid-right { max-width: 100%; }
  /* the totals/subtotal rows put a long label and a price on one line */
  #cart #content .cart-summary-totals, #cart #content .cart-detailed-subtotals { overflow-wrap: anywhere; }
}
/* LOGIN: `.btn.auth-show-pass` (the show-password toggle) overflowed by 41.5px
 * @768 and 25.7px @1200. The markup is
 *     <div class="auth-input input-password">
 *       <input class="form-control"> <button class="btn auth-show-pass">
 * i.e. a 100%-wide input with the button following it in normal flow, so the
 * button is pushed past the column edge. Make that wrapper a flex row and let
 * the input shrink; the button then always sits inside the column.
 * (The first attempt targeted `.input-group`, which this markup does not use —
 * it left 11px of overflow at 1200px. Measured, then corrected.) */
#authentication #content .auth-input.input-password,
#password #content .auth-input.input-password {
  display: flex; align-items: stretch; max-width: 100%;
}
#authentication #content .auth-input.input-password > .form-control,
#password #content .auth-input.input-password > .form-control { flex: 1 1 auto; min-width: 0; }
#authentication #content .auth-input.input-password > .auth-show-pass,
#password #content .auth-input.input-password > .auth-show-pass { flex: 0 0 auto; white-space: nowrap; }
/* 404: the ps_searchbar input emitted into displaySearch is a fixed 259px and
 * overflowed the content column by 9px at 1200/1600. */
#pagenotfound #content .search-widget form input[type="text"],
#pagenotfound #content #search_widget input[type="text"] { max-width: 100%; box-sizing: border-box; }
#pagenotfound #content #search_widget, #pagenotfound #content .search-widget { max-width: 100%; }

/* ---- 4. Guard: nothing may create a horizontal scrollbar ----
 * A backstop, not a substitute for the fixes above — every overflow found by
 * measurement is fixed at source. Live's own body has no such guard, so this is
 * a deliberate, documented deviation: it prevents a single mis-sized module from
 * making the whole phone layout pannable, which is what "looks like dogwater"
 * feels like to a customer. */
@media (max-width: 991px) {
  html, body { overflow-x: hidden; }
}


/* ---- 5. Two more specificity fixes found by MEASURING the port ----
 * (a) FOOTER PADDING. Live reduces the footer panel on small screens:
 *       @media (max-width:991px){.footer-container{padding:30px 0}}
 *       @media (max-width:991px){.footer-after{padding:20px 0}}
 *       @media (max-width:767px){.footer-container{padding:30px 0}}
 *     Ported verbatim those are (0,1,0) and LOSE to this file's base rule
 *     `#footer .footer-container{padding:65px 0}` = (1,1,0). Measured after the
 *     port: padding was still 65px 0 at every width down to 360px. Restated
 *     with the `#footer` scope so they actually apply.
 *     Live @375: .footer-container padding 30px 0, .footer-after 20px 0. */
@media (max-width: 991px) {
  #footer .footer-container { padding: 30px 0; }
  #footer .footer-after { padding: 20px 0; }
}
@media (max-width: 767px) {
  #footer .footer-container { padding: 30px 0; }
}

/* (b) HOMEPAGE FEATURED-PRODUCTS GRID. Same :is()/id-specificity trap as the
 *     category grid: `#index .featured-products .product_list li.product_item`
 *     and `.featured-products:not(#featureProduct) .product_list li.product_item`
 *     are both (1,3,1), so live's unscoped responsive widths lost. Measured
 *     after the port: still 4 per row at 360px with 90px-wide cards.
 *     Live's ladder, restated at matching specificity:
 *        <=480 -> 50% (2-up) ; 481-1199 -> 33.33% (3-up) ; >=1200 -> 25%
 *     NOTE >=1450 stays 5-up (20%) on the homepage — that IS live's behaviour
 *     (`#index .products .product_list li.product_item.col-lg-3{width:20%!important}`
 *     in the min-width:1450px block), so it is deliberately not touched. */
@media (max-width: 1199px) {
  #index .featured-products .product_list li.product_item,
  .featured-products:not(#featureProduct) .product_list li.product_item { width: 33.3333%; height: auto; }
}
@media (max-width: 480px) {
  #index .featured-products .product_list li.product_item,
  .featured-products:not(#featureProduct) .product_list li.product_item { width: 50%; height: auto; }
}

/* ---- PRODUCT PAGE TABS (Omschrijving / Productdetails / Rating) — LIVE's own rules ----
   Rewritten 2026-07-29 after the first attempt broke them. MY BUG: I set `display:inline-block` on
   `.nav-tabs` (copying live) but omitted live's companion rule on the ITEM. Bootstrap 4-alpha
   floated `.nav-item`; Bootstrap 5 does not and instead relies on `.nav{display:flex}` — which my
   `inline-block` on the <ul> overrode. Result: tabs stacked vertically, "Omschrijving" in a white
   box with "Productdetails" as a bare blue link underneath.
   Live's declarations, lifted verbatim from its compiled bundle:
     .tabs .nav-tabs{border-bottom:0;display:inline-block;vertical-align:middle;width:100%}
     .tabs .nav-tabs .nav-item{float:none;margin-bottom:0;display:inline-block;position:relative}
     .tabs .nav-tabs .nav-link{font-size:16px;letter-spacing:1px;line-height:20px;color:#c7c7c7;
                               font-weight:400;padding:10px 22px;border:none;display:inline-block;
                               text-transform:capitalize}
     .tabs .nav-tabs .nav-link.active,.tabs .nav-tabs .nav-link:hover{color:#d13925}
     #product .tabs .nav-tabs .nav-link.active,#product ... :hover{background:#f5f5f5;
                               border-radius:5px 5px 0 0}
     .tabs .nav-tabs .nav-item:first-child .nav-link{background:none}   <- why tab 1 reads white
     #product .tabs .nav-tabs{padding:0;margin-bottom:20px}
     .product-tabcontent .tabs .tab-pane{width:100%;float:left;margin-top:0;
                               padding:20px 20px 10px;margin-bottom:60px}
   Measured on live at 1600px: .nav-tabs 1108x49, .tab-pane 1108x407 bg rgb(245,245,245)
   border 1px solid rgb(245,245,245) padding 20px 20px 10px, text 13px/24px. */
#product .tabs .nav-tabs {
  border-bottom: 0; display: inline-block; vertical-align: middle; width: 100%;
  padding: 0; margin-bottom: 20px; background: transparent;
}
#product .tabs .nav-tabs .nav-item {
  float: none; margin-bottom: 0; display: inline-block; position: relative;
}
#product .tabs .nav-tabs .nav-link {
  font-size: 16px; letter-spacing: 1px; line-height: 20px; color: #c7c7c7;
  font-weight: 400; padding: 10px 22px; border: none; display: inline-block;
  text-transform: capitalize; text-decoration: none; background: none;
}
#product .tabs .nav-tabs .nav-link.active,
#product .tabs .nav-tabs .nav-link:hover {
  color: #d13925; background: #f5f5f5 none repeat scroll 0 0; border-radius: 5px 5px 0 0;
}
#product .tabs .nav-tabs .nav-item:first-child .nav-link { background: none; }
#product .tabs .nav-tabs .nav-item:first-child .nav-link.active { background: none; }

#product .tabs .tab-pane,
#product .product-tabcontent .tabs .tab-pane {
  width: 100%; float: left; margin-top: 0;
  padding: 20px 20px 10px; margin-bottom: 60px;
  border: 1px solid #f5f5f5; background: #f5f5f5; border-radius: 0 0 5px 5px;
  font-size: 13px; line-height: 24px; color: #000;
}
#product .tabs .tab-pane .product-description p,
#product .product-tabcontent .tabs .tab-pane .product-description p {
  font-size: 13px; line-height: 24px; color: gray; letter-spacing: .5px;
}

/* ---- productcomments: live's product page renders NO comments block ----
   Verified by measurement on live (zero "Commentaar"/"recensie" text) and by ps_module (the module
   is not among live's 72). Uninstall it in the BO; this is a guard only. */
#product .product-comments,
#product #product-comments-list,
#product .comments-note,
#product #product-comments-list-header,
#product .product-comments__wrapper,
#product .hook-reviews { display: none; }


/* ---- homepage: LIVE hides the category block entirely ----
   Live declares `#index .block-categories.block{display:none}` and its homepage measures
   .block-categories at 0x0 display:none, while staged showed it at 270x120 — the
   "Winkelen Op Categorie" box that should not be on the home page at all. Live's left column on
   the homepage is the two banners only. (The category block IS shown on category pages.) */
#index .block-categories.block { display: none; }


/* ---- MOBILE MINI-CART: contents overflowed the panel ----
   Measured on staging at 375px: children of the open .cart_block extended past the right edge —
   div.cart-info 268x24 and span.product-price both with right > 375 — and the thumbnail rendered
   at 125x125 (cart_default size) inside a 270px panel, which is the white block filling it.
   Live's own rules for the same panel, lifted from its compiled bundle:
     @media(max-width:991px){ #header .cart_block{top:56px}
                              .cart_block_list{max-height:96px}
                              #_mobile_cart a .cart-image{margin:0;display:inline-block;vertical-align:middle}
                              #_mobile_cart .cart_block .cart-item .cart-image{margin-top:0} }
     @media(max-width:767px){ #header .cart_block{right:-16px;top:56px} }
     @media(max-width:480px){ #header .cart_block{width:270px} #header .cart_block{right:-16px;top:43px}
                              #header .header-nav.fixed .cart_block{top:47px} }
   Live never states a thumbnail size here, so it is constrained to the 50px the desktop panel uses
   and the text columns are given min-width:0 so they can shrink instead of pushing the row wider —
   without that, a flex/float child keeps its intrinsic width and overflows. */
@media (max-width: 991px) {
  #header .cart_block { top: 56px; }
  #header .cart_block_list, .cart_block_list { max-height: 96px; }
  #_mobile_cart a .cart-image { margin: 0; display: inline-block; vertical-align: middle; }
  #_mobile_cart .cart_block .cart-item .cart-image { margin-top: 0; }
  /* REPLACED 2026-07-29 — I had invented a flexbox layout here. Live is FLOAT-based, which is why
     the price sat beside the name instead of under it and the value column clipped. Live's own rules
     are applied below, outside this media block, so they govern at every width. */
}
@media (max-width: 767px) {
  #header .cart_block { right: -16px; top: 56px; }
}
@media (max-width: 480px) {
  #header .cart_block { width: 270px; right: -16px; top: 43px; }
  #header .header-nav.fixed .cart_block { top: 47px; }
}


/* ---- MOBILE CART BUTTON: white block inside the black button ----
   Measured live vs staged at 414px (Galaxy Note UA), leaf elements inside #header:
       div.header.blockcart-header   live bg rgba(0,0,0,0)   staged bg rgb(255,255,255)
   The existing transparent rule was scoped `#header #_desktop_cart .blockcart-header`, so below the
   desktop breakpoint — where the cart renders in the #_mobile_cart mount — the parent theme's white
   background won and filled the button. Unscoped from the mount so both copies match live.
   The badge (span.cart-products-count rgb(31,31,31)) already matches live. */
#header .blockcart-header,
#header #_mobile_cart .blockcart-header,
#header #_mobile_cart .header.blockcart-header { background: transparent; }

/* ---- MOBILE hamburger sat 10px right of live ----
   Measured at 414px: live .menu-container 33x37 @x=15 with .menu-icon @x=15;
   staged .menu-container 43x42 @x=15 with .menu-icon @x=25 — an extra 10px of box pushing the
   icon inward. Match live's dimensions so the icon starts flush with the container. */
@media (max-width: 991px) {
  #header .menu-container { width: 33px; height: 37px; padding: 0; margin: 0; }
  #header .menu-container .menu-icon { margin-left: 0; padding-left: 0; }
}


/* ---- MINI-CART DROPDOWN INTERNALS — live's own rules, verbatim ----
   Extracted from live's compiled bundle. Note `.product-price{display:block}` — the price sits on
   its OWN line under the product name, and the remove button is absolutely positioned at the right
   with `.cart-info{padding-right:20px}` reserving room for it. My earlier flexbox version put the
   price beside the name and let the value column overflow the panel. */
#header .cart_block .cart-item { margin-bottom: 5px; padding: 10px; overflow: hidden; }
#header .cart_block .cart-item .cart-image {
  /* NO width/max-width — live declares none. Live's rules for this element are exactly:
       .cart-image{display:inline-block}
       .cart_block .cart-item .cart-image{float:left}
       .cart_block .cart-item .cart-image img{width:100%}
     so the box shrink-wraps to the cart_default thumbnail's intrinsic 125px (+2px border =
     127px, which is what live measures). The `width:50px;max-width:50px` here was a baked
     invention: it shrank the thumbnail to 50px, which widened .cart-info from live's 109px to
     186px — that is why the mini-cart row looked nothing like live on mobile. */
  display: inline-block;
  float: left; margin-right: 12px; border: 1px solid #f0f0f0; text-align: center;
  margin-top: 0;
}
#header .cart_block .cart-item .cart-image img { width: 100%; height: auto; }
#header .cart_block .cart-item .cart-info { overflow: hidden; position: relative; padding-right: 20px; }
#header .cart_block .cart-item .cart-info .product-quantity {
  display: inline-block; text-transform: uppercase; padding-right: 5px; font-size: 13px;
}
#header .cart_block .cart-item .cart-info .product-name { font-size: 13px; line-height: 18px; display: inline-block; }
#header .cart_block .cart-item .cart-info .product-price { display: block; font-size: 15px; }
#header .cart_block .cart-item .cart-info .remove-from-cart { position: absolute; right: 0; top: 4px; }
#header .cart_block .cart-item .cart-info .remove-from-cart .material-icons { font-size: 20px; }
#header .cart_block .cart-summary { border: 0; margin: 0; }
#header .cart_block .block_content .card-block { padding: 10px 15px 15px; }
#header .cart_block .block_content .checkout.card-block { text-align: right; padding: 15px; float: right; }
#header .cart_block_list { overflow: auto; max-height: 100px; }
/* the checkout button: live paints it with the brand red, not Bootstrap blue */
#header .cart_block .checkout a,
#header .cart_block a.viewcart,
#header .cart_block .btn-primary {
  background: #d13925; border-color: #d13925; color: #fff;
}

/* ---- FOOTER on mobile — live's stacking rules, verbatim ----
   Measured at 414px: live's section headers are 394x46 full-width rows stacked vertically with the
   toggle at the far right (x=378) and the lists COLLAPSED; staged had 63px-wide columns sitting side
   by side with the lists open. Cause: the footer blocks kept their grid column widths below the
   breakpoint. Live's declarations: */
@media (max-width: 991px) {
  .footer-container .links:first-child,
  .footer-container .links { width: 100%; margin: 0; padding: 0; border: none; }
  .footer-container .links.block:nth-child(3) { width: 100%; }
  .footer-container .links .title {
    padding: 10px 0; cursor: pointer; margin: 0; line-height: 20px; width: 100%; float: left;
  }
  .footer-container .links .h3,
  .footer-container .links h3,
  .footer-container .links h3 a { font-size: 15px; margin: 0; }
  .footer-container .links:last-child { padding: 0; }
  .footer-container .wrapper { padding-left: 0 !important; padding-right: 0 !important; }
  .footer-container .hidden-sm-down { display: none !important; }
  #footer .footer-container .block-contact { width: 100%; border-left: 0; padding: 0; }
  .block-contact { padding-left: 1.5rem; }
  .footer-container .links .title .collapse-icons .remove { display: none; }
  /* toggle icon to the far right of the full-width row, as live has it */
  .footer-container .links .title .float-end,
  .footer-container .links .title .collapse-icons { float: right; }
}
@media (max-width: 767px) {
  .block-contact { padding-left: .9375rem; border: none; }
}


/* ---- FOOTER MOBILE: force the columns to stack ----
   Measured at 414px: live's three section headers are 394x46 stacked vertically (y=543/589/635);
   staged had 63x68, 63x92 and 117x44 sitting SIDE BY SIDE. The blocks were shrink-to-fit rather
   than full width, so live's `.links{width:100%}` alone was not enough — the floats had to be
   cleared too. `!important` is used deliberately here: the desktop column widths
   (`.links.block:nth-child(3){width:20%}` etc.) are equal-specificity and appear earlier, and the
   grid classes on the elements (col-md-4 / col-sm-4) also set width. */
@media (max-width: 991px) {
  #footer .footer-container .row.footer > * ,
  #footer .footer-container .links,
  #footer .footer-container .block-contact {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #footer .footer-container .row.footer { display: block; }
  /* collapsed by default, opened by the accordion toggle (BS5 uses .show, live used .in) */
  #footer .footer-container .links .collapse:not(.show):not(.in) { display: none; }
  #footer .footer-container .links .collapse.show,
  #footer .footer-container .links .collapse.in { display: block; }
}

/* ---- MINI-CART PANEL hung off the right edge ----
   Measured at 414px: panel 270 wide at x=247, right edge 517 — 103px outside the viewport, which is
   why the amounts and the button looked cut off. Bootstrap's `.dropdown-menu` sets `left:0`, and
   live's `right:-16px` cannot win while `left` is still 0, so the panel anchored to the cart's LEFT
   edge and grew rightwards. Clearing `left` lets live's right-anchoring govern. */
#header .cart_block.dropdown-menu,
#header #_mobile_cart .cart_block,
#header #_desktop_cart .cart_block { left: auto !important; right: -16px; }
@media (max-width: 991px) {
  #header .cart_block { max-width: calc(100vw - 20px); }
}


/* ---- FOOTER: address icons were clipped off the left edge ----
   `#footer .footer-container .block-contact{padding:0}` (id+2 classes) outranks the later
   `.block-contact{padding-left:1.5rem}` (1 class), so live's inset was lost and the absolutely
   positioned location/phone icons landed at negative x — visible as half-cut glyphs against the
   viewport edge when the Adres accordion opens. Restated at matching specificity. */
@media (max-width: 991px) {
  #footer .footer-container .block-contact { padding-left: 1.5rem; }
  /* live renders the footer section headings at 15px on mobile; staged was 16px */
  #footer .footer-container .links .h3,
  #footer .footer-container .links h3,
  #footer .footer-container .links h3 a,
  #footer .footer-container .links .title,
  #footer .footer-container .links .title span { font-size: 15px; }
}
@media (max-width: 767px) {
  #footer .footer-container .block-contact { padding-left: .9375rem; }
}


/* ---- the empty red strip is only empty BELOW 768 ----
   At <=767 the search widget is reparented into .header-nav and the desktop cart is unpopulated, so
   .header-top-main renders as a bare ~10px sliver and is hidden. From 768 to 991 it still carries
   the account and cart, so it must stay visible or that band has no navbar at all. */
@media (max-width: 767px) {
  #header .header-top-main { display: none; }
}


/* below 768 the mobile mounts take over, so the desktop pair is hidden there (not up to 991) */
@media (max-width: 767px) {
  #_desktop_user_info { display: none; }
  #_desktop_cart { display: none; }
}


/* ---- BASE TYPOGRAPHY: Hummingbird's Inter was winning on <body> ----
   Measured live vs staged at 1600px:
       body   live "Poppins 13px/24px ls=0.5px rgb(0,0,0)"   staged "Inter 16px/24px ls=normal rgb(33,37,41)"
   Individually-styled elements (p, a, h3, product title, price) already matched Poppins — only the
   INHERITED base was wrong, which is why every unstyled/loose text node in the page rendered 3px too
   large in the wrong face. The parity engine surfaced it on .topdiv, but it affects everything that
   inherits. Live's own body declaration is reproduced here. */
body {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  line-height: 24px;
  letter-spacing: .5px;
  color: #000;
}

/* ---- HOMEPAGE left column margins ----
   The parity engine measured live's computed values as margin-top 30px / margin-right 30px, and
   staged at 0/0 — a 30px delta each way and a 29px height difference. An earlier change here set
   `margin:0` after reading live's stylesheet cascade; the MEASURED value disagreed, and the
   measurement wins. Live's declaration: `#index #left-column{margin:30px 30px 0 0}`. */
#index #left-column { margin: 30px 30px 0 0; }


/* (the whitespace/strut theory for the 53px card delta was WRONG — text nodes measure 0h on both
   sides, so that hack is removed rather than left in place doing nothing.) */

/* ---- LEFT COLUMN: second banner was missing live's 30px bottom margin ----
   Measured: live #tmleftbanner1 margin "0px 0px 30px", staged "0px" — the entire 29px column-height
   delta the parity engine reported. Live also has the column itself positioned. */
#left-column { position: relative; top: 0; left: 0; }
#tmleftbanner, #tmleftbanner1 { margin: 0 0 30px; }


/* =========================================================================
   MEASURED DELTAS closed after the DOM-corruption fix (all verified against
   live's compiled bundle theme-9ca68c92.css and live's rendered geometry).
   ========================================================================= */

/* #footer — live computes position:static/top:auto/left:auto. An earlier rule here set
   position:relative;top:0;left:0, which the parity engine flagged on every page. Live's
   bundle has no position declaration for #footer at all. */
#footer { position: static; top: auto; left: auto; }

/* .topdiv (hero wrapper) — live: `.topdiv{float:left;margin:0;position:relative;width:100%}`.
   Staged computed position:static/top:auto/left:auto because only the img rule was ported. */
.topdiv { position: relative; top: 0; left: 0; margin: 0; width: 100%; }

/* #wrapper — live declares `#wrapper{padding-top:10px;padding-bottom:0;min-height:700px}`
   unconditionally. min-height was missing on staged (0px), which is why the short cart page
   came out 2.4px short and the empty-state block sat differently. */
#wrapper { min-height: 700px; }
/* cart: CORRECTED. The 0px was measured off live's /winkelmandje, which 302-redirects to the
   HOME page — so that reading never came from a cart at all. Live's real cart
   (/winkelmandje?action=show) computes padding-top:10px on #wrapper, matching live's global
   `#wrapper{padding-top:10px;padding-bottom:0;min-height:700px}`. */
#cart #wrapper { padding-top: 10px; }


/* -------------------------------------------------------------------------
   PRODUCT TAB NAV — specificity inversion vs live.
   Live's cascade for the tab links is:
       .tabs .nav-tabs .nav-link            (0,3,0)  font-size:16px; padding:10px 22px
       #product .product-tabcontent .nav-link (1,2,1)  font-size:14px; padding:15px 20px  <-- WINS
   This stylesheet had re-scoped live's GENERIC rule as `#product .tabs .nav-tabs .nav-link`
   (1,3,1), which outranks the product-specific override and inverted live's outcome: the tab
   nav rendered 39px tall with 16px/10px-22px links instead of live's 49px with 14px/15px-20px.
   Restated here at a specificity that wins outright, with live's declarations verbatim.
   ------------------------------------------------------------------------- */
#product #main .product-tabcontent .tabs .nav-tabs .nav-link {
  font-size: 14px;
  font-weight: 600;
  color: #000;
  line-height: 20px;
  letter-spacing: 1px;
  margin: 0 10px -1px 0;
  padding: 15px 20px;
  text-transform: capitalize;
  border-right: none;
  border-left: none;
  border-top: none;
  display: inline-block;
}


/* -------------------------------------------------------------------------
   TAB BOX — the last three deltas, each measured on live at 1600px:
     live .product-tabcontent  padding 0px      | staged was 0px 12px
     live .nav-tabs            margin  0px      | staged was 0px 0px 20px
     live .tab-pane            margin  0px      | staged was 0px 0px 60px

   (1) The 12px horizontal padding is BOOTSTRAP 5's row gutter: `.row > *` gets
       padding-inline: calc(var(--bs-gutter-x) * .5) = 12px. Live is Bootstrap 4, which puts
       gutters on `.col-*` classes only, so a non-column row child there has no padding. Now
       that .product-tabcontent is a direct row child (as on live), BS5 gutters it and live
       does not — it shrank the inner width from 1107.59 to 1083.59 and reflowed the
       description text, which is where the last of the height gap came from.
       Killed at all widths: live has no horizontal padding on this element at any breakpoint.
   (2)+(3) live drops both bottom margins at >=992 (its own
       `.product-tabcontent .tabs .tab-pane,.product-accessories .tab-main-title{margin-bottom:0}`
       and the desktop nav-tabs rule). Only the desktop values are asserted here — the <=991
       values (nav 20px / pane 60px) are left as they are, matching live's mobile cascade.
   ------------------------------------------------------------------------- */
#product #main .row .product-tabcontent { padding-left: 0; padding-right: 0; }

@media (min-width: 992px) {
  #product #main .product-tabcontent .tabs .nav-tabs { margin: 0; }
  #product #main .product-tabcontent .tabs .tab-pane { margin-bottom: 0; }
}


/* -------------------------------------------------------------------------
   PARAGRAPH MARGIN — live's bundle ends with a global `p{margin:0 0 10px 0}` that beats
   Bootstrap's `p{margin-bottom:1rem}`. Hummingbird keeps the 1rem (16px), so every paragraph
   on staged carried 6px more bottom margin than live. In the product description that summed
   to the last 18px of the tab-pane delta (live pane 422 vs staged 440).
   Applied globally because live applies it globally — same element, same value. The full
   three-viewport sweep is re-run after this to catch anything it shifts.
   ------------------------------------------------------------------------- */
p { margin: 0 0 10px; }


/* -------------------------------------------------------------------------
   LEFT-COLUMN BANNER HEIGHTS — live 394 / 410 vs staged 386.3 / 386 (sum -31.7px, which was
   the whole left_column delta AND the whole cart_page content delta, since #left-column is
   the tallest thing in the cart's #wrapper).
   Both images are 270x386 natively, so live is TALLER than its own image. Measured why:
     * live `li.slide` is display:inline-block. An inline-block in a block `ul` sits on the
       line box's baseline, so the ul gets the font's descender space beneath it: ul 394 vs
       li 386 = +8px. Staged had display:block / list-item, which creates no line box at all.
     * live's `#tmleftbanner1 > ul#left_banner1_toggle` additionally computes
       margin-bottom:16px (Bootstrap reboot's `ul{margin-bottom:1rem}`, which live never
       resets on that element), giving 386 + 8 + 16 = 410. Staged had margin 0.
   Reproduced with live's computed values rather than by hardcoding 394/410 — the earlier
   revision of this file DID hardcode `height:394.531px/410.531px` here, which is exactly the
   kind of baked measurement that breaks as soon as the image or font changes.
   ------------------------------------------------------------------------- */
#left-column #tmleftbanner li.slide,
#left-column #tmleftbanner1 li.slide {
  display: inline-block;
  /* overflow:hidden is what actually produces the +8px. Per CSS 2.1 §10.8.1 an inline-block
     whose overflow is NOT visible takes its baseline from its BOTTOM MARGIN EDGE, so the
     parent ul's line box then adds the 13px/24px strut's below-baseline space underneath it
     (ul 394 vs li 386). With overflow:visible the baseline comes from the li's own inner line
     box instead and no space is added — which is why setting display alone changed nothing.
     Live declares overflow:hidden + position:relative on this li; both are restated here. */
  overflow: hidden;
  position: relative;
}
#left-column #tmleftbanner1 > ul { margin: 0 0 16px; }


/* -------------------------------------------------------------------------
   CATEGORY GRID HORIZONTAL OFFSET — live's whole product grid sits 10px LEFT of
   #js-product-list; staged's was flush, so every card, name and price rendered 10px right of
   live (the 9.97% pixel diff on product_grid, with identical geometry).
   Cause: live's `#spe_res{margin:0 -10px}` cancels the cards' 10px side padding so the
   artwork lines up with the content column edge. Staged's #spe_res had margin 0.
   Ported from live's bundle. Live also carries a narrower `#spe_res{margin:0 -5px}` variant;
   the per-breakpoint values are asserted from live's own computed margins (see below).
   ------------------------------------------------------------------------- */
#spe_res { margin: 0 -10px; }

/* CARD DIVIDERS — live gives every .thumbnail-container a right border, then removes it from
   the row-end card. Staged drew one to the right of the LAST card (visible in the diff as an
   extra vertical rule after "Tussen kunst en kitsch"); live does not.
   Live: `#category ... li:last-child.product_item .thumbnail-container{border:none}` and the
   same for the row-end nth-child. last-child is suppressed at every width (the last card is
   always a row end); 4n is suppressed only where the grid is actually 4-up (>=1200). */
#category .products .product_list li:last-child.product_item .thumbnail-container { border-right: 0; }
@media (min-width: 1200px) {
  #category .products .product_list li:nth-child(4n+0).product_item .thumbnail-container { border-right: 0; }
}

/* live switches #spe_res to -5px at <=480px (bisected against live: -10px down to 481px,
   -5px at 480px). Ported at live's own breakpoint rather than guessed. */
@media (max-width: 480px) { #spe_res { margin: 0 -5px; } }


/* -------------------------------------------------------------------------
   FOOTER LINK CASING — live's bundle declares `.footer-container li a{text-transform:
   capitalize}` and then OVERRIDES it later with `.footer-container li a{text-transform:none}`.
   Only the first of the pair had been ported, so staged rendered "Over Ons", "Veilige
   Betaling", "Algemene Voorwaarden" where live shows "Over ons", "Veilige betaling",
   "Algemene voorwaarden" (the raw CMS page names — identical in both DBs; the difference was
   purely this CSS). Live's final computed value is `none`.
   ------------------------------------------------------------------------- */
#footer .footer-container li a { text-transform: none; }


/* -------------------------------------------------------------------------
   FOOTER — the remaining 74px, measured piece by piece against live:
     38px  the contact e-mail <li>            -> DB setting, see config-fix-footer-email.sql
     16px  the contact <ul>'s margin-bottom   -> live 0 0 16px, staged 0        (below)
     20px  the VAT notice's 10px top+bottom   -> live margin 10px 0, staged 0   (below)
   ------------------------------------------------------------------------- */

/* live's contact list keeps Bootstrap's `ul{margin-bottom:1rem}`; Hummingbird resets it. */
#footer .block-contact #block-contact_list,
#footer .block-contact ul { margin: 0 0 16px; }

/* The list's <li>s are float:left (both sides), so on staged they escaped the <ul>, leaving it
   0px tall — which also made the 16px margin above have no effect. Live's same <ul> measures
   192px, i.e. it DOES contain its floats; live has no ::after clearfix on it (checked:
   ::after content is `none`), so live gets containment some other way in its cascade that I
   could not pin down to a single declaration. Containment is asserted explicitly here.
   flow-root, NOT overflow:hidden — each <li>'s sprite icon is an absolutely positioned
   ::before at left:-30px, i.e. OUTSIDE the <li>'s box, and overflow:hidden would clip the
   address/phone/mail icons off. flow-root contains the floats without clipping. */
/* SCOPED TO DESKTOP 2026-07-29 — this rule was unscoped and that BROKE THE MOBILE FOOTER.
   ps_contactinfo wraps the address list in `class="collapse"` for the mobile accordion, and
   Bootstrap 5's `.collapse:not(.show){display:none}` is what keeps it shut. `display:flow-root`
   here outranked that, so on mobile the address block was permanently expanded and the title
   could not close it again. Float containment is only needed where the footer is in columns. */
@media (min-width: 992px) {
  #footer .block-contact #block-contact_list { display: flow-root; }
}

/* live's VAT notice: margin 10px 0 and font-size 14px (staged inherited 13px, margin 0). */
#footer .footer-after .aeuc_footer_info { margin: 10px 0; font-size: 14px; }


/* -------------------------------------------------------------------------
   HEADER LOGO WIDTH — live declares `#header .header-top .header_logo{float:left;padding:0;
   width:13%}`. That was missing here, so the logo rendered at its natural 187x115 instead of
   live's 182x111.92 (13% of the 1400px container, with the height following the aspect ratio).
   Same image file on both sides (bergsma-de-boer-logo-1620292728.jpg, natural 187x115) — the
   3.08px header height delta was purely this constraint. The logo wrapper is the tallest item
   in the flex row, so it sets .header-div's height and therefore #header's.
   ------------------------------------------------------------------------- */
#header .header-top .header_logo { width: 13%; padding: 0; }
#header .header-top .header_logo img { max-width: 100%; height: auto; }


/* top-menu items: live's <li>s have padding 0; Hummingbird gives them 3px 0, making the menu
   30px tall against live's 24px. Not a height driver for #header (the logo is the tallest flex
   item) but it shifts the menu text vertically, which the pixel diff sees. */
#header .header-top #_desktop_top_menu #top-menu > li { padding: 0; }


/* HOME 'Uitgelichte producten' GRID — the 5-up/4-up defect was NOT a CSS specificity problem
   after all: live's `#index .products .product_list li.product_item.col-lg-3{width:20%
   !important}` (min-width:1450px) simply never matched live's own markup, whose <li> is
   col-lg-4. The child template emitted col-lg-3, so it did match, and !important cannot be
   out-specified. Fixed in the template instead (ps_featuredproducts.tpl -> col-lg-4).
   An earlier attempt here added `#index #featureProduct .products .product_list
   li.product_item{width:25%}` with NO media query; it fixed 1600px but then beat the whole
   responsive ladder below 1200px, pinning the grid at 4-up where live goes 3-up (>=992) and
   2-up (<=480). Removed — with the template fixed, live's own width rules apply unchanged. */


/* =========================================================================
   COLUMN LADDER — bisected against live (home page, #left-column + its content
   wrapper), one measurement per breakpoint:

     viewport   container   #left-column   margin-right   content wrapper
     >=1450       1400        19.3%           30px           78.5%
     1200-1449    1170        19.3%           30px           77.5%
      992-1199     940          21%           18px             75%
       <=991         -          100%            0              100%

   content wrapper margin-LEFT is 0px at EVERY width on live.

   Two bugs this replaces:
   1. Every column width here was a baked pixel measurement (`270.188px`, `1099px`,
      `calc(100% - 301px)`, `calc(100% - 295.188px)`) — correct only at a 1400px container and
      progressively wrong below it, because live's columns are percentages that re-tier twice.
   2. The content column also carried `margin-left: 25px`, which live does not have. Combined
      with its width that made the content column need 25 + 1099 = 1124px beside a left column
      occupying 270.188 + 30 = 300.188px of a 1400px row — 1424px of demand for 1400px of space.
      A float that does not fit beside a preceding float DROPS BELOW IT, so the whole content
      column (with 'Uitgelichte producten' in it) rendered underneath the two side banners
      instead of to their right, and started at x=125 instead of live's x=400.
      This is why it looked like a stacking bug: it was an overflow-by-24px bug.
   ========================================================================= */
@media (max-width: 1449px) {
  #category #center-column,
  #cms #center-column, #search #center-column, #cart #center-column { width: 77.5%; }
}
@media (max-width: 1199px) {
  .row.page-leftcol #left-column,
  #category #left-column,
  #cms #left-column, #search #left-column, #cart #left-column { width: 21%; margin-right: 18px; }
  .row.page-leftcol #center-column,
  #category #center-column,
  #cms #center-column, #search #center-column, #cart #center-column { width: 75%; }
}
@media (max-width: 991px) {
  .row.page-leftcol #left-column,
  #category #left-column,
  #cms #left-column, #search #left-column, #cart #left-column { width: 100%; max-width: 100%; margin-right: 0; }
  .row.page-leftcol #center-column,
  #category #center-column,
  #cms #center-column, #search #center-column, #cart #center-column { width: 100%; margin: 0; }
}


/* -------------------------------------------------------------------------
   COLUMN LADDER, part 2 — the two remaining offsets, both measured on live.

   (a) <=991: live's #left-column computes `margin: 0px`. Staged held `30px 30px 0px 0px`
       because `#index #left-column{margin:30px 30px 0 0}` is specificity (2,0,0) — two ids —
       which outranks the ladder's `.row.page-leftcol #left-column` (1,2,0) no matter how late
       the ladder appears. Restated here with two ids of its own so it actually wins.
       (Live's own margins by tier: >=1200 `30px 30px 0 0`; 992-1199 `30px 18px 0`; <=991 `0`.)

   (b) <=767: live's column row is inset 10px each side (at 375px: 355px wide starting at x=10;
       at 600px: 580; at 480px: 460). Staged ran full-bleed (375/600/480) because
       `body:not(#category) .container:has(> .row.page-leftcol){padding-left:0;padding-right:0}`
       zeroes the 10px container padding. That rule is right on desktop, where live's row does
       sit flush at the container edge — it is only wrong once .container goes max-width:100%.
       Re-asserted at matching specificity, later in the file, for <=767 only.
   ------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  #index #left-column, #category #left-column,
  #cms #left-column, #search #left-column, #cart #left-column { margin: 30px 18px 0; }
}
@media (max-width: 991px) {
  #index #left-column, #category #left-column,
  #cms #left-column, #search #left-column, #cart #left-column { margin: 0; }
}
@media (max-width: 767px) {
  body:not(#category) .container:has(> .row.page-leftcol),
  .columns-container.container { padding-left: 10px; padding-right: 10px; }
}


/* -------------------------------------------------------------------------
   FOOTER CONTACT ICONS ON MOBILE — "content inside moves left off-screen when opening".
   Each contact <li> draws its icon as an absolutely positioned `::before` at `left:-30px`,
   i.e. THIRTY PIXELS OUTSIDE its own box. On desktop live has room for them because
   `.block-contact` carries `padding:0 0 0 70px`. On mobile live drops that padding and insets
   the LIST by 30px instead, so the icons land exactly on the block's left edge:
       live @375: .block-contact L=10 -> li L=40 -> icon L=10  (on screen)
     staged @375: .block-contact L=10 -> li L=11 -> icon L=-19 (OFF SCREEN)
   The 30px inset was missing, so every icon hung off the left edge of the viewport as soon as
   the accordion opened. Restated at live's measured geometry.
   ------------------------------------------------------------------------- */
@media (max-width: 991px) {
  /* live insets BOTH sides by 30px on mobile: its <li> spans L=40..R=335 inside a block that
     spans 10..365 (355 - 60 = 295px wide). Left makes room for the icons, right keeps the text
     off the opposite edge. */
  #footer .block-contact #block-contact_list,
  #footer .block-contact ul { padding-left: 30px; padding-right: 30px; }
}


/* =========================================================================
   SIDE BANNERS HIDDEN ON PHONES — Dani's decision, 2026-07-29.

   This reproduces live's own configuration, which until now was deliberately left un-ported:
   tm_leftbanner, tm_leftbanner1 AND tm_rightbanner all carried
       module_shop.enable_device = 3  =  DEVICE_COMPUTER(1) | DEVICE_TABLET(2)
   i.e. DEVICE_MOBILE(4) was NOT set, so live never rendered any of them on a phone.

   Live enforced that with PrestaShop's USER-AGENT device detection. These slots are now theme
   partials, not modules, so that mechanism is gone and a media query is the substitute. The
   breakpoint is 767px on purpose: live's setting kept the banners on TABLETS, and 768px up is
   where tablet-width layouts start — hiding at <=991px would also strip them from tablets,
   which live did not do.

   >>> CONSEQUENCE FOR PARITY (do not "fix" this back): the parity harness drives a desktop
   >>> user agent at a 375px viewport, so LIVE still serves the banners there while staged now
   >>> correctly hides them. The mobile `left_column` component therefore CANNOT pass — the
   >>> divergence is intentional and matches live's real phone output. Noted in
   >>> projects/bergsmaendeboer-mobile.json too.
   ========================================================================= */
@media (max-width: 767px) {
  #left-column #tmleftbanner,
  #left-column #tmleftbanner1,
  #main .right_cms #tmrightbanner,
  #main .right_cms #tmrightbanner1 { display: none; }

  /* With the banners gone the homepage left column has no visible child left
     (.block-categories is already display:none on #index), so collapse its box instead of
     leaving an empty band above the content. */
  #index #left-column { margin: 0; padding: 0; }
}