/*
 * verdon child theme - customizations that used to live inside a rebuilt copy of the Hummingbird 0.1.5 theme.css.
 * Extracted 2026-09-03 (see _prod/verdon-theme-css-customizations.md). The child now uses the stock Hummingbird 2.0.0
 * theme.css from the parent theme; everything the shop changed in the old compiled file is here, with the 2.0.0
 * selector added next to the 0.1.5 one where the markup was renamed.
 */

/* 0. Base tokens that Hummingbird 2.0.0 changed versus 0.1.5 (the shop's look was built on the 0.1.5 values) */
:root,
[data-bs-theme="light"] {
  --bs-body-line-height: 1.25;            /* 2.0.0: 1.5 */
  --bs-blue: #0d6efd;                     /* 2.0.0: #0b69f6 */
  --bs-primary: #0d6efd;
  --bs-primary-rgb: 13, 110, 253;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-red: #dc3545;                      /* 2.0.0: #ff4657 */
  --bs-danger: #dc3545;
  --bs-danger-rgb: 220, 53, 69;
  --bs-green: #198754;                    /* 2.0.0: #188251 */
  --bs-success: #198754;
  --bs-success-rgb: 25, 135, 84;
}

/* 1. Typography: Open Sans instead of Inter, slightly tighter headings */
:root {
  --bs-body-font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
body {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  line-height: 1.4;
}
h5, .h5 {
  font-size: 1.1rem;
}
/* h4: 2.0.0 shrank it to calc(var(--bs-body-font-size) * 1.125) (18px); PROD (0.1.5 / Bootstrap 5 default) had the
   fluid size below. Used by e.g. errors/404.tpl h1.h4, address aliases, ets_megamenu block titles, blockcart modal title. */
h4, .h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.5rem;
  }
}
.rich-text h3,
.rich-text .h3 {
  font-size: 1.3rem;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

/* 2. Listing sort dropdown button (0.1.5: .products-selection .select-title, 2.0.0: .products__sort-dropdown-button) */
.layout-full-width .products-selection .select-title,
.layout-left-column .products-selection .select-title,
.products__sort-dropdown-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 42px;
  padding: 0.75rem 1.25rem;
  border: 1px solid #dee2e6;
  text-align: left;
}

/* 3. Footer social links (child footer keeps the .social-sharing class next to the 2.0.0 ps-sharebuttons classes) */
.social-sharing > a,
.social-sharing .ps-sharebuttons__link {
  color: #fff;
}
.social-sharing > span,
.social-sharing a {
  display: inline-block;
  margin-right: 1rem;
}
.social-sharing .ps-sharebuttons__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

/* 4. Dark "skin" for category 591 (2.0.0 aliases: .category__header for .block-category, .header-bottom__logo for #header .logo) */
body.category-id-591 {
  background: #000;
}
body.category-id-591 #_mobile_search {
  background: #000;
}
body.category-id-591 #header .logo,
body.category-id-591 #header .header-bottom__logo {
  filter: brightness(0) invert(1);
}
body.category-id-591 #left-column .category-tree {
  display: none;
}
body.category-id-591 .block-category,
body.category-id-591 .category__header {
  background: #000;
  border: 4px solid #1a4703;
}
body.category-id-591 .block-category .card-body,
body.category-id-591 .category__header .card-body {
  padding: 0;
}
body.category-id-591 .block-category .page-title-section,
body.category-id-591 .category__header .page-title-section {
  display: none;
}
body.category-id-591 .block-category #category-description p,
body.category-id-591 .category__header .category__description p {
  color: #fff;
  padding: 1rem;
}
body.category-id-591 .breadcrumb__wrapper {
  background: #000;
  color: #fff;
}
body.category-id-591 .header-bottom {
  background: #000;
  border: none;
}
body.category-id-591 .header__right .cart-preview .header-block__title {
  color: #fff;
}
body.category-id-591 .header__right a:not(.dropdown-item):not(.btn) {
  color: #fff;
}
body.category-id-591 .product__add-to-cart__container .btn {
  background: #000;
}
body.category-id-591 .product__add-to-cart__container .btn:hover {
  background: #28a000;
}

/* 5. "Black November" mega-menu item (ets_megamenu) */
li.mm_menus_li.align-items-center.d-flex.black-november.mm_sub_align_full.hover {
  background: #d90000;
  padding: 0 20px;
}

/* 6. Footer colour variables: 2.0.0 puts the "footer" base class on the inner wrappers too, so the 0.1.5 rule
   `.footer{--footer-background-color:#16181c}` (kept in theme-legacy.css) would re-declare the variables on every wrapper.
   Restore inheritance from #footer, where the child's custom.css sets them (--grey-1 background, white text). */
#footer .footer {
  --footer-background-color: inherit;
  --footer-text-color: inherit;
  --footer-hover-color: inherit;
  --footer-heading-color: inherit;
}

/* 7. Fixes for Hummingbird 2.0.0 @layer ordering (2026-09-03, home + category review with the user).
   7a. Home slider (pch_imagesliderproh uses Bootstrap's .ratio box): 2.0.0 keeps `.ratio > *{position:absolute}` in the
       bs-base layer while `.carousel{position:relative}` sits in the later bs-components layer, so the carousel fell below
       the .ratio:before spacer (white block above the banner). Unlayered rule = wins over both. */
.ratio > * {
  position: absolute;
}
/* 7b. Product carousels (custom.css `.swiper-slide > *{margin-bottom:0!important}`): with !important the layer order is
       reversed, so the 2.0.0 `.mb-3{!important}` from the utilities layer beat the child's unlayered rule and every slide
       grew by 1rem (the extra space landed between the product title and the price). Same layer, later source = wins. */
@layer utilities {
  .swiper-slide > * {
    margin-bottom: 0 !important;
  }
}
/* 7c. Left-column category tree (ps_categorytree): 2.0.0 adds `.category-tree__list{display:flex;flex-direction:column;
       row-gap:.5rem}`; 0.1.5 had no such rule (block list, no gaps). */
.category-tree__list {
  row-gap: 0;
}
.category-tree__list[data-depth] {
  display: block;
}
/* 7d. Breadcrumb divider spacing: 2.0.0 `.breadcrumb-item{padding:0}` (bs-custom-components layer) cancels Bootstrap's
       `.breadcrumb-item + .breadcrumb-item{padding-left}` and shrinks the divider's padding to .25rem, giving "Acasa/ Page".
       PROD (0.1.5): 0.5rem before the "/" and 0.5rem after it. */
.breadcrumb-item + .breadcrumb-item {
  padding-left: var(--bs-breadcrumb-item-padding-x);
}
.breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: var(--bs-breadcrumb-item-padding-x);
}

/* 8. Cluster 3 (customer pages): account menu. 2.0.0 wraps the links in <nav class="account-menu__nav">, so every child
   rule built on `.account-menu > a` is dead (hover/active colour, hover background, the red sign-out link). The base look
   still works because the merged template carries `account-menu__line` and `link-item` as dual classes, but
   theme-legacy's `.account-menu .link-item{color:gray-800}` ties with 2.0.0's `.account-menu__link:hover` and wins on
   load order, so hover feedback disappears. Retargeted to the 2.0.0 structure (PROD values: green-4 text, #fbfcfc back). */
/* PROD shows the account menu at every width (the child dropped 0.1.5's d-none). 2.0.0 has `.account-menu--sidebar{display:none}`
   below 992px; today only theme-legacy's `.account-menu{display:flex;flex-direction:column}` overrides it, by load order alone.
   Made explicit here so trimming theme-legacy.css later cannot make the menu disappear. */
.account-left-column .account-menu--sidebar {
  display: flex;
  flex-direction: column;
}
/* The link itself is display:block via custom-second.css `.account-left-column .account-menu__line` (priority 200), so the
   icon sits on the text baseline; on 0.1.5 the inner span.link-item was flex + align-items:center.
   The tile itself (white, 13px 15px, 12px gap, radius 4) has to be declared here rather than left to .account-menu__line,
   because on 0.1.5 the tile came from `.account-menu > a`, which also caught the links that modules inject through the
   displayCustomerAccount hook (wishlist, GDPR data request/erase, order cancellation). Those links carry no theme class,
   and several carry Bootstrap column classes (col-lg-4 col-md-6 ...) that 0.1.5 neutralised with .account-menu>a{width:100%};
   without this rule they render untiled and one third of the width. gap:0 because the icon spacing is set separately. */
.account-left-column .account-menu__nav > a {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 13px 15px;
  margin-bottom: 12px;
  background: #fff;
  border-radius: 4px;
  color: var(--bs-gray-800);
}
/* Icon gap for the module links as well: the theme own links get it from .account-menu .link-item i and .svg_icon,
   but a module link (wishlist, GDPR data request/erase, order cancellation) carries neither class. */
.account-left-column .account-menu__nav > a > i,
.account-left-column .account-menu__nav > a > svg,
.account-left-column .account-menu__nav > a > .account-menu__icon {
  margin-right: .75rem;
  flex-shrink: 0;
}
.account-left-column .account-menu__nav > a:hover {
  color: var(--green-4);
  background: #fbfcfc;
}
.account-left-column .account-menu__nav > a.account-menu__link--active {
  color: var(--green-4); /* PROD "you are here" green, from custom-second.css:484-487 (.account-menu > a.active .link-item), dead since the 2.0.0 <nav>. Must beat `> a{color:var(--bs-gray-800)}` above, so it is repeated on the --active selector. */
  background: #fbfcfc;
}
.account-left-column .account-menu__nav > a.account-menu--signout {
  color: var(--bs-danger);
}

/* The pchwiderruf module ("Anulare comanda") ships PS 9 CSS that detects .account-menu--sidebar and restyles its link as a
   plain 2.0.0 sidebar row: transparent background, 8px 0 padding, width auto - all !important. On 0.1.5 that branch never
   matched (the child aside had no --sidebar modifier), so the link got the shop tile from its .account-menu a#... rule.
   Restored here with a higher-specificity selector; module-scope item for the PM list.
   CORRECTED 2026-10-14: the first version used the generic menu-row values (13px 15px, radius 4px, gray-800, green
   hover), which is NOT what PROD shows - PROD renders this row with the module's own tile rule
   `.account-menu a#pchwr-account-link{padding:14px 18px;gap:14px;border-radius:8px;color:black;background:white}` and
   a #eceef2 / #1a1a1a hover. Measured on PROD with _qa/pdp/rwauth.js + acctmenu.js (row 52px, icon at x18). The
   client reported the account menu as "not arranged like live". */
.account-left-column .account-menu--sidebar .account-menu__nav > a#pchwr-account-link,
.account-left-column .account-menu--sidebar .account-menu__nav > a.pchwr-open-modal {
  display: flex !important;
  align-items: normal !important;
  flex-direction: row !important;
  gap: 14px !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  padding: 14px 18px !important;
  margin: 0 0 12px !important;
  background: #fff !important;
  border-radius: 8px !important;
  color: #000 !important;
}
.account-left-column .account-menu--sidebar .account-menu__nav > a#pchwr-account-link:hover {
  background: #eceef2 !important;
  color: #1a1a1a !important;
  opacity: 1 !important;
}
.account-left-column .account-menu--sidebar .account-menu__nav > a#pchwr-account-link .link-item {
  gap: .75rem !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  color: inherit !important;
}
.account-left-column .account-menu--sidebar .account-menu__nav > a#pchwr-account-link .material-icons {
  color: inherit !important;
  font-size: 24px !important;
}

/* 9. Category "read more / read less" (components/show-more-less.tpl, custom.js). custom.css 2005-2008 hides the inactive
   button with display:none !important, but the two buttons carry the Bootstrap utility d-inline-flex, and a layered
   !important beats an unlayered one - so both buttons showed at once. Same trap as 7b. Re-declared inside the utilities
   layer, after the parent stylesheet, so it wins on source order within the layer. */
@layer utilities {
  .show-more-less__container.opened .show-more-less__buttons .more,
  .show-more-less__container:not(.opened) .show-more-less__buttons .less {
    display: none !important;
  }
}

/* 10. Pagination. 2.0.0 redesigned the Bootstrap pagination tokens: transparent background, no borders, no negative
    link margin, bigger padding, and an active state that is coloured text rather than a filled box. PROD (0.1.5) shows a
    joined group of white bordered boxes with a filled green active page. Restoring the 0.1.5 token values; custom.css
    (priority 200) still wins for the ones it sets itself (active background/border, hover background, focus shadow). */
.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-bg: #fff;
  --bs-pagination-border-width: 1px;
  --bs-pagination-border-color: #dee2e6;
  --bs-pagination-border-radius: 0.375rem;
  --bs-pagination-hover-border-color: #dee2e6;
  --bs-pagination-focus-bg: #e9ecef;
  --bs-pagination-active-color: #fff;
  --bs-pagination-disabled-bg: #fff;
  --bs-pagination-disabled-border-color: #dee2e6;
}
/* 0.1.5 drew the pages as one joined group: every box square, the first and last rounded, each link pulled 1px left so
   neighbours share a border. 2.0.0 rounds every item (.page-item .page-link) and zeroes the pull
   (.page-item:not(:first-child) .page-link{margin-left:0}), giving separate pills. Both are outspecified here. */
.pagination .page-item .page-link {
  border-radius: 0;
}
.pagination .page-item:not(:first-child) .page-link {
  margin-left: -1px;
}
.pagination .page-item:first-child .page-link {
  border-top-left-radius: var(--bs-pagination-border-radius);
  border-bottom-left-radius: var(--bs-pagination-border-radius);
}
.pagination .page-item:last-child .page-link {
  border-top-right-radius: var(--bs-pagination-border-radius);
  border-bottom-right-radius: var(--bs-pagination-border-radius);
}

/* 11. The Bootstrap "xs" tier that 2.0.0 introduced (rewritten 2026-09-21).
    Hummingbird 0.1.5 defined NO col-xs-N rules at all (0 occurrences in the 0.1.5 parent theme.css and in the child's
    own 0.1.5 theme.css), so every col-xs-N class was inert on PROD - dead Bootstrap-3-era markup. 2.0.0 adds a real xs
    tier at 360px in @layer bs-base, source-ordered after `.row > *` and `.col-N` and before `.col-sm-N`, which switched
    them all on. They are used far beyond the theme templates: product descriptions (84 products, mostly
    "col-xs-12 col-sm-12 col-md-6 col-lg-6" and "col-xs-6 col-sm-6 col-md-6 col-lg-6"), CMS page 10, the contact page
    team grid and cards (modules/contactform), the ets_reviews lists, the cart-dropdown and checkout cart lines, the
    address card (customer/_partials/block-address.tpl), cariera.tpl and distribution.tpl.

    Goal: the cascade PROD computes, i.e. as if the xs rules did not exist. Per element that means
      - a larger tier class that is ACTIVE at the current width (col-sm-N from 576px, col-md-N 768, col-lg-N 992,
        col-xl-N 1200, col-xxl-N 1400) wins - it already beats the xs rule by source order, so the element is excluded;
      - a non-tiered .col / .col-N / .col-auto wins - in every use found its N equals the xs one, so it is excluded too;
      - otherwise the element falls back to what it had before the xs tier: `.row > *` (width 100%, flex 0 0 auto)
        as a row child, else width auto and the initial flex (0 1 auto).
    Declared INSIDE @layer bs-base (after theme.css in source order), so everything that beat the xs rule on DEV still
    beats this one: bs-components `.card-body{flex:1 1 auto}`, utilities such as `.w-100`, the child's unlayered CSS.
    offset-xs-1 (the only other xs-tier class in use) sits in onepagecheckoutps, which is not installed-active.

    History: the first version (2026-09-04) set an UNLAYERED `width:auto` on every col-xs-N element. That fixed the
    address card (its two `col-xs-12 action` columns got `flex:0 0 auto;width:100%`, squeezing the card body from 729px
    to 123px and pushing Delete off-screen at x=1916), but an unlayered rule beats EVERY layered one, so it also cancelled
    .col-md-6, .col-xl-3 and even .row > * {width:100%} on any element that carried a col-xs class next to them.
    Found 2026-09-21 by the dead-selector sweep: product-description halves rendered 852px + 719px instead of 632 + 632,
    the contact team photos at their natural 1024px (page 22,663px tall instead of 4,920px), review texts 1,799px wide
    inside a 1440px window. _qa/colxs-impact.js compares every col-xs element's width, PROD vs DEV, per breakpoint. */
@layer bs-base {
  @media (min-width: 360px) and (max-width: 575.98px) {
    :is(.col-xs-auto, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12):not(.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12) {
      width: auto;
      flex: 0 1 auto;
    }
    .row > :is(.col-xs-auto, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12):not(.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12) {
      width: 100%;
      flex: 0 0 auto;
    }
  }
  @media (min-width: 576px) and (max-width: 767.98px) {
    :is(.col-xs-auto, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12):not(.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
           [class*="col-sm"]) {
      width: auto;
      flex: 0 1 auto;
    }
    .row > :is(.col-xs-auto, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12):not(.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
           [class*="col-sm"]) {
      width: 100%;
      flex: 0 0 auto;
    }
  }
  @media (min-width: 768px) and (max-width: 991.98px) {
    :is(.col-xs-auto, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12):not(.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
           [class*="col-sm"], [class*="col-md"]) {
      width: auto;
      flex: 0 1 auto;
    }
    .row > :is(.col-xs-auto, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12):not(.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
           [class*="col-sm"], [class*="col-md"]) {
      width: 100%;
      flex: 0 0 auto;
    }
  }
  @media (min-width: 992px) and (max-width: 1199.98px) {
    :is(.col-xs-auto, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12):not(.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
           [class*="col-sm"], [class*="col-md"], [class*="col-lg"]) {
      width: auto;
      flex: 0 1 auto;
    }
    .row > :is(.col-xs-auto, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12):not(.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
           [class*="col-sm"], [class*="col-md"], [class*="col-lg"]) {
      width: 100%;
      flex: 0 0 auto;
    }
  }
  @media (min-width: 1200px) and (max-width: 1399.98px) {
    :is(.col-xs-auto, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12):not(.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
           [class*="col-sm"], [class*="col-md"], [class*="col-lg"], [class*="col-xl"]) {
      width: auto;
      flex: 0 1 auto;
    }
    .row > :is(.col-xs-auto, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12):not(.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
           [class*="col-sm"], [class*="col-md"], [class*="col-lg"], [class*="col-xl"]) {
      width: 100%;
      flex: 0 0 auto;
    }
  }
  @media (min-width: 1400px) {
    :is(.col-xs-auto, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12):not(.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
           [class*="col-sm"], [class*="col-md"], [class*="col-lg"], [class*="col-xl"], [class*="col-xxl"]) {
      width: auto;
      flex: 0 1 auto;
    }
    .row > :is(.col-xs-auto, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12):not(.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
           [class*="col-sm"], [class*="col-md"], [class*="col-lg"], [class*="col-xl"], [class*="col-xxl"]) {
      width: 100%;
      flex: 0 0 auto;
    }
  }
}

/* 12. Order pages: the shop's table chrome on the 2.0.0 grid-tables (customer/order-detail.tpl,
    customer/_partials/order-detail-no-return.tpl, customer/guest-tracking.tpl).
    custom-second.css (priority 200, lines 1116-1129) gives every table on these two pages a grey header row and 1px
    cell borders:
      #order-detail .table-wrapper,      #guest-tracking .table-wrapper      { border-radius: card }
      #order-detail .table-wrapper thead, #guest-tracking .table-wrapper thead { background-color: #efefef }
      #order-detail .table-wrapper td/th, #guest-tracking .table-wrapper td/th { border: 1px solid #dddddd }
    The last two select ELEMENT names. 2.0.0 replaced `table > thead > tr > th/td` with
    `div.grid-table__header` / `div.grid-table__row` / `span.grid-table__cell`, so keeping `table-wrapper` as a dual
    class in the merged templates only rescues the border-radius rule. Everything else falls back to 2.0.0's much
    lighter treatment (@layer ps-components: a single `--bs-border-color` line under the header and under each row),
    which is a visible change on the order status table, the tracking table, the products table and the order totals -
    i.e. every table of /order-detail and /guest-tracking. These are the grid-table twins of the two dead rules; they
    ship in the SAME deploy as the merged order templates.

    Reproducing what `border-collapse: collapse` on a 100%-wide Bootstrap `.table` did, on the >=768px grid:
      - `column-gap: 0` (2.0.0 uses `gap: 0 1rem`, which would leave the vertical borders floating apart);
      - `justify-self: stretch` on the cells (2.0.0 sets `justify-self: start`, so a bordered cell would only be as
        wide as its text); the `--center` / `--right` modifiers are re-expressed as `justify-items` so the 2.0.0
        column alignment survives the stretch;
      - borders on the block-end + inline-end of each cell plus a block-start + inline-start border on the grid
        itself - that is the collapsed-border grid, with no doubled 2px lines between neighbours;
      - `padding: .5rem` on the cells (Bootstrap `.table > * > * > *`), and the header/row block padding zeroed so the
        border hugs the cell.
    Below 768px 2.0.0 hides the header and already draws a full 1px border around each row block, which is the closest
    equivalent of the child's old per-line mobile cards (U2 in customer/order-detail.tpl/merge-notes.md); only the
    border colour is aligned with #dddddd there.
    Unlayered on purpose: it must beat @layer ps-components without !important (see sections 7b, 9 and 11). */
@media (min-width: 768px) {
  #order-detail .table-wrapper .grid-table__inner,
  #guest-tracking .table-wrapper .grid-table__inner {
    column-gap: 0;
    border-block-start: 1px solid #dddddd;
    border-inline-start: 1px solid #dddddd;
  }

  #order-detail .table-wrapper .grid-table__header,
  #guest-tracking .table-wrapper .grid-table__header {
    background-color: #efefef;
  }

  #order-detail .table-wrapper .grid-table__header,
  #order-detail .table-wrapper .grid-table__row,
  #guest-tracking .table-wrapper .grid-table__header,
  #guest-tracking .table-wrapper .grid-table__row {
    border-block-end: 0;
    padding-block: 0;
  }

  #order-detail .table-wrapper .grid-table__cell,
  #guest-tracking .table-wrapper .grid-table__cell {
    justify-self: stretch;
    border-block-end: 1px solid #dddddd;
    border-inline-end: 1px solid #dddddd;
    padding: 0.5rem;
  }

  #order-detail .table-wrapper .grid-table__cell--center,
  #guest-tracking .table-wrapper .grid-table__cell--center {
    justify-items: center;
  }

  #order-detail .table-wrapper .grid-table__cell--right,
  #guest-tracking .table-wrapper .grid-table__cell--right {
    justify-items: end;
  }
}

@media (max-width: 767.98px) {
  #order-detail .table-wrapper .grid-table__row,
  #guest-tracking .table-wrapper .grid-table__row {
    border-color: #dddddd;
  }
}

/* 13. Product page: availability line spacing.
    Found by _qa/dead-class-scan.js, same bug family as section 11. `.product__availability` is a class the child
    templates (catalog/product.tpl, catalog/_partials/product-add-to-cart.tpl) already carried on 0.1.5, where NO
    stylesheet defined it - it was a naming hook only. 2.0.0 groups it with product__actions and
    product__add-to-cart-container under `margin-block-end:1.25rem`, so the shop suddenly gained 32px of empty space
    below the availability line on desktop (18.75px on phones). Measured PROD 0px vs DEV 32px; width and height are
    identical, so this is purely the new margin.
    2.0.0 also switches it to display:flex with a 4px gap. That is left alone: the element renders at the same 20px
    height and 498px width either way, so it is invisible, and keeping the flex context is closer to upstream.
    The two other newly-activated product classes the scan flagged need no rule: .product__bottom is absent from the
    merged template by design (the child keeps the reassurance block full-width before the tabs instead of adopting
    the 2.0.0 55%/1fr grid - see catalog/product.tpl merge notes), and .product__minimal-quantity computes to
    display:none on both shops. */
.page-product .product__availability {
  margin-block-end: 0;
}

/* 13. Vouchers page: the child's `table-bordered` cell grid on the 2.0.0 grid-table (customer/discount.tpl).
    custom.diff hunk 3 is a CHILD customization: the shop added `table-bordered` to the desktop voucher table
    (`table table-striped table-bordered d-none d-xl-table`), and theme-legacy.css 508-509
      .table-bordered > :not(caption) > *      { border-width: 1px 0 }
      .table-bordered > :not(caption) > * > *  { border-width: 0 1px }
    still ship in the child (priority 55). On a real <table> the reboot rule `tbody,td,tfoot,th,thead,tr{border:0 solid;
    border-color:inherit}` supplies the style and `.table{border-color:var(--bs-table-border-color)}` the colour
    (--bs-border-color = #dee2e6 outside #footer), so PROD draws a full 1px grid of cell borders.
    2.0.0 replaced the table with div.grid-table__header / div.grid-table__row / span.grid-table__cell, so both legacy
    rules are dead there (and re-adding `table-bordered` as a dual class would only set border-width without a
    border-style - no borders - while stripping the left/right border of the <768px row box). This is the grid-table
    twin of that dead child rule, i.e. the same treatment section 12 gives the order pages.

    Reproducing what `border-collapse:collapse` on a `.table.table-bordered` did, on the >=768px grid:
      - `column-gap: 0` on the grid AND on `.grid-table__header` / `.grid-table__row` (2.0.0 sets `gap: 0 1rem` on
        `.grid-table__inner` and `gap: .5rem 1rem` on `.grid-table__row`, and never resets the latter inside the
        >=768px block). Both are `grid-template-columns: subgrid`: in a subgridded axis a gutter of `normal` (the
        header) resolves to the parent grid's gutter, but an explicit `gap` on the subgrid (the row) overrides it,
        so zeroing only the parent would leave every ROW with a 1rem column gutter inside a 0-gutter grid - the
        border of a cell and of its neighbour floating ~1rem apart instead of collapsing, and the header cells no
        longer lined up with the row cells. All three are zeroed;
      - `justify-self: stretch` on the cells (2.0.0 sets `justify-self: start`, so a bordered cell would only be as
        wide as its text);
      - block-end + inline-end border on each cell plus block-start + inline-start on the grid itself - the collapsed
        border grid, no doubled 2px lines between neighbours;
      - `padding: .5rem` on the cells (Bootstrap `.table > * > * > *`) with the header/row block padding zeroed so the
        border hugs the cell.
    Below 768px nothing is added: PROD's mobile view was the separate `.cart-rule` list, which `table-bordered` never
    touched, and 2.0.0 already draws a 1px --bs-border-color box around each row block there.
    Unlayered on purpose: it must beat @layer ps-components without !important (see sections 7b, 9, 11 and 12). */
@media (min-width: 768px) {
  #discount .grid-table__inner {
    column-gap: 0;
    border-block-start: 1px solid var(--bs-border-color);
    border-inline-start: 1px solid var(--bs-border-color);
  }

  #discount .grid-table__header,
  #discount .grid-table__row {
    column-gap: 0;
    border-block-end: 0;
    padding-block: 0;
  }

  #discount .grid-table__cell {
    justify-self: stretch;
    border-block-end: 1px solid var(--bs-border-color);
    border-inline-end: 1px solid var(--bs-border-color);
    padding: 0.5rem;
  }
}

/* 14. Header logo width (cluster-1 checklist item "logo max sizes vs 2.0.0 .navbar-brand .logo").
    The logo is an inline <svg class="shoplogo_icon logo" width="253" height="116">. On 0.1.5 nothing in any
    stylesheet set its `width`, so the used width came from the width="253" attribute, clamped by the child's
    max-width / max-height in custom.css. 2.0.0 adds
    `.header-bottom .navbar-brand .logo{max-height:3rem;max-width:8rem;width:auto}` - and that `width:auto` makes the
    browser derive the width from the 253:116 aspect ratio instead, so the logo renders NARROWER at the same height.
    Measured across five widths:
      1440px  PROD 250x70  DEV 153x70   <- differs
      1200px  PROD 170x50  DEV 170x50
       992px  PROD 170x50  DEV 170x50
       768px  PROD 170x50  DEV 170x50
       375px  PROD 160x50  DEV 109x50   <- differs
    The three middle widths already agree because custom.css sets `width:auto; min-width:170px` itself between 768px
    and 1199.98px - the child WANTS auto there. So this only restores the attribute-driven width in the two ranges
    where the child sets no width of its own, and lets max-width do the clamping exactly as it does on PROD
    (253 -> 250 at 1440, 253 -> 160 at 375). Deliberately NOT applied between 768px and 1199.98px.
    VERIFIED AFTER: 1600/1280/1210/1100/900px all match PROD exactly. Below 768px a 3-4px residual remains (600px
    PROD 253 vs DEV 250, 375px PROD 160 vs DEV 164, 360px PROD 145 vs DEV 149) - that is the header container being a
    few px wider on DEV, not the logo rule, and it is down from a ~50px error. Left as is. */
@media (min-width: 1200px) {
  #header .navbar-brand .logo,
  #header .logo {
    width: 253px;
  }
}
@media (max-width: 767.98px) {
  #header .navbar-brand .logo,
  #header .logo {
    width: 253px;
  }
}

/* 15. Product price block type sizes (cluster-2 checklist item "product price block gap").
    It turned out not to be the gap at all - the gap is 0 on both. 2.0.0 renamed the two price elements AND sizes
    them smaller, and the child CSS sizes the OLD names, so the price - the most important element on the page -
    rendered noticeably smaller on DEV. Measured on /motoferastraie/drujba-husqvarna-135-mark-ii-14-.html:
      PROD  .product__current-price   24px / lh 30px     .product__discount (.small)  17.5px / lh 21.875px   block 48px
      DEV   .product__prices-inline   20px / lh 20px     .product__discount-price     16px   / lh 16px       block 38px
    Restoring the PROD sizes on the 2.0.0 names, keeping the 0.1.5 names alongside so this survives either markup.
    1.5rem = 24px and 1.09375rem = 17.5px at the shop's 16px root, and line-height 1.25 reproduces 30px / 21.875px. */
.product__prices-block .product__prices-inline,
.product__prices-block .product__current-price,
.product-prices .product__current-price {
  font-size: 1.5rem;
  line-height: 1.25;
}
/* The crossed-out price scales purely with the root size, so 1.09375rem reproduces PROD at both widths (17.5px
   desktop, 16.4062px on phones - verified). The MAIN price does not: PROD renders 24px on desktop but 20.25px on
   phones, while a flat 1.5rem gives 22.5px there because the root drops to 15px. Matching the measured PROD value
   below the md breakpoint - the price stays fluid below 768px. */
@media (max-width: 767.98px) {
  .product__prices-block .product__prices-inline,
  .product__prices-block .product__current-price,
  .product-prices .product__current-price {
    font-size: 1.35rem;
  }
}
.product__prices-block .product__discount-price,
.product__prices-block .product__discount,
.product-prices .product__discount {
  font-size: 1.09375rem;
  line-height: 1.25;
}

/* 16. Page title block bottom margin (cluster-1 checklist item "page-title-section size vs PROD h4").
    The font size and line-height already match (20.8px / 29.12px); only the gap under the block was lost -
    PROD 24px, DEV 16px on desktop, 22.5px vs 15px on phones. Same class name on both, so 2.0.0 simply sets a
    smaller margin. Restored as 1.5rem so it keeps scaling with the root size the way PROD's does. */
.page-title-section {
  margin-bottom: 1.5rem;
}

/* 17. Product page: variants block and the add-to-cart bottom margin.
    Found with a proper fixture product (15 images, 6 combinations - the earlier test product had neither, which is
    why the cluster-2 checklist item "variants gap retarget" had stayed inconclusive for two days).
    Two separate 2.0.0 changes stack up here:
      1. `.product-variants` became `display:flex; gap:1rem`. Its single child carries margin-bottom:1rem. Under the
         0.1.5 `display:block` that margin COLLAPSES through the parent's bottom edge, so the block measures 104px and
         the 16px shows up as the gap to the next block. Under flex the margin is contained, so the block measures
         120px and the 16px is now INSIDE it.
      2. The add-to-cart container had lost its 2rem bottom margin - but NOT because of a 2.0.0 rule. The merged
         template carried an mb-0 class a merge agent had added on the premise that "PROD has no gap under the buy
         block"; measuring PROD on a product WITH combinations shows it does (32px). 2.0.0 sets exactly that 2rem
         itself, so the fix was to delete mb-0 from catalog/_partials/product-add-to-cart.tpl and let upstream
         stand - not to override it. It could not have been overridden from here anyway: .mb-0 is in @layer
         utilities with !important, which outranks any unlayered !important (sections 7b/9/11 again).
      Measured before: PROD variants 286x104 margin 0, add-to-cart margin-bottom 32px; DEV variants 286x120
      margin-bottom 32px, add-to-cart margin 0.
    Restoring the PROD geometry: variants back to block with no bottom margin (this is what PROD renders for
    multi-group variants too, so it is not specific to the fixture), and the 2rem back on the add-to-cart container. */
.page-product .product-variants,
.page-product .product__variants {
  display: block;
  margin-block-end: 0;
}
.page-product .product-add-to-cart,
.page-product .product__add-to-cart-container {
  margin-block-end: 2rem;
}

/* 18. customer/history.tpl on the 2.0.0 ARIA grid `.order-history` (dual classes table-wrapper / table-striped / orders /
    thead-default / order / order__actions; the 6-column track count is handled in the template with
    grid-table__inner--6 + grid-table__header + grid-table__row). Supersedes the never-applied blocks 8 and 9 of
    the history.tpl merge notes.
    18a. PROD switches table <-> cards at 1200px (`d-none d-xl-table` / `d-block d-xl-none`), 2.0.0 switches at 768px, so
         the 768-1199.98px band has to be put back into card mode; and the card interior itself has to be redrawn,
         because theme-legacy.css 367-371 selects `> div` children while 2.0.0 emits `> span` (dead rules). The
         `table-wrapper` dual class now also wraps the card list (on 0.1.5 it wrapped the desktop table only), so its
         #fefefe panel is neutralised below 1200px - otherwise the 1rem gutters between the #fefefe cards would not show
         the page background.
    18b. Port of custom-second.css 491-512 (#history .thead-default th / .table-striped > ... > th,td /
         #history tbody tr td), dead since 2.0.0 renders div[role=row] > span[role=cell]. It also neutralises
         theme-legacy.css 366+372 above the breakpoint (0.1.5 MOBILE card rules that the dual classes now expose to the
         desktop layout: they inset the rows 1rem against the header on the subgrid and zero the row block padding) and
         re-scopes custom-second.css 523-528 (`.orders .order .order__actions .btn-verdon{width:100%}` +
         `flex-direction:column`) back to card mode only. */

/* 18a. card mode - everything below the PROD xl breakpoint */
@media (max-width: 1199.98px) {
  #history .order-history.table-wrapper {
    background: transparent;
    border-radius: 0;
  }

  #history .orders.order-history__inner {
    gap: 0;                                /* 2026-10-14: was 1rem - PROD's cards sit flush, only their corners part them */
    grid-template-columns: 1fr;
    overflow-x: visible;
    padding: 0.5rem;                       /* = theme-legacy.css 372 .page-history .orders */
    margin-inline: -0.75rem;               /* 2026-10-14: PROD's card list is a .row (negative half-gutter), so the
                                              cards overhang the content box by .25rem a side: 375px at 390 vs 353 */
  }

  #history .order-history__header {
    display: none;
  }

  #history .orders .order.order-history__row {
    background: #fefefe;                   /* = theme-legacy.css 366, restated so 768-1199.98px matches < 768px */
    border: none;
    border-radius: 0.5rem;
    gap: 0;
    grid-column: auto;
    grid-template-columns: 1fr;
    padding: 0 1rem;
  }

  /* PROD card interior (theme-legacy.css 367-371, dead against the 2.0.0 `span` cells) */
  #history .order-history__row .order-history__cell {
    align-items: center;
    color: inherit;
    display: flex;
    font-size: 1rem;
    font-weight: 400;
    gap: 0.5rem;
    justify-content: space-between;
    justify-self: stretch;
    padding: 1rem 0;
    line-height: 1.25;                     /* 2026-10-14: PROD's .order__label/.order__value are 18.75px (row pitch 50px),
                                              2.0.0's 22.5px made every card row 54px */
  }

  #history .order-history__row .order-history__cell:not(:last-child) {
    border-bottom: 1px solid #e9ecef;
  }

  #history .order-history__row .order-history__cell:before {
    color: inherit;
    content: attr(data-ps-label);
    display: block;
    font-weight: 600;                      /* = theme-legacy.css 371 .order__label */
  }

  #history .order-history__row .order-history__cell--actions:before {
    display: none;
  }
  /* 2026-10-14: PROD's card button is 33px (line-height 1.25 at 13px) with 31px of card below it; 2.0.0 gave 37px
     and 15px, so each card ended 12px short. Measured with _qa/pdp/capauth.js at 390. */
  #history .order-history__row .order-history__cell--actions {
    padding-bottom: 2rem;
  }
  #history .order-history__row .order-history__cell--actions .btn {
    line-height: 1.25;
  }
}
/* 2026-10-14: PROD's cards are `col col-lg-6`, each in its own row - so from 992px to the 1200px table switch they
   are half width and stacked in the left column (357px at 1024), not full width. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #history .orders.order-history__inner {
    grid-template-columns: 50%;
  }
}

/* 18b. table mode - the PROD desktop table look, from 1200px up */
@media (min-width: 1200px) {
  #history .orders.order-history__inner {
    column-gap: 0;
    padding: 0;
    border-block-start: 1px solid #dddddd;
    border-inline-start: 1px solid #dddddd;
  }

  #history .orders .order.order-history__row {
    background: transparent;
    border-radius: 0;
    padding: 0;
  }

  #history .order-history__header,
  #history .order-history__row {
    border-block-end: 0;
    padding-block: 0;
    gap: 0;                                /* 2026-10-14: the template's grid-table__row brings gap .5rem 1rem INSIDE each
                                              row - a 16px white break between every pair of cells, so the cell borders
                                              no longer met (client: "not arranged like live") */
  }

  #history .order-history__cell {
    justify-self: stretch;
    border-block-end: 1px solid #dddddd;
    border-inline-end: 1px solid #dddddd;
    background-color: #fff;
    font-size: 13px;
    font-weight: 400;
    padding: 0.5rem;
    line-height: 1.25;                     /* 2026-10-14: PROD table cells 16.25px, 2.0.0 19.5px (header 33 vs 37px) */
    color: #212529;                        /* 2026-10-14: PROD's .table colours every cell #212529; 2.0.0 mutes date and
                                              payment (--bs-secondary-color) and the rest inherit #000 */
  }

  /* 2026-10-14: PROD's status badge is inline-block in a table cell, so it hugs its text (136px); here it is a grid
     item and stretched across the column (167px). Weight 500 as on PROD. */
  #history .order-history__status {
    justify-self: start;
    font-weight: 500;
    display: inline-block;
  }

  /* 2026-10-14: render the ARIA grid as a CSS table in table mode. PROD's column widths come from the browser's table
     auto-layout (each column sized by its content: 142/107/128/214/231/124px at 1440); the 2.0.0 grid shares the spare
     width out evenly across `minmax(0,auto)` tracks, which shifted the columns by up to 23px. Same markup, same
     algorithm as PROD -> same widths. border-spacing 0 keeps the cell borders of 18b meeting; vertical-align middle =
     the UA's tbody default PROD's cells inherit. The actions cell keeps its `d-flex` (PROD's td carried it too). */
  #history .orders.order-history__inner {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }
  #history .order-history__header,
  #history .orders .order.order-history__row {
    display: table-row;
  }
  #history .order-history__cell {
    display: table-cell;
    vertical-align: middle;
  }

  #history .order-history__header .order-history__cell {
    background-color: #f4ffd5;             /* = custom-second.css 491-493 #history .thead-default th */
  }

  /* custom-second.css 523-528 was mobile-only on PROD (`.orders` lived on the card list) */
  #history .orders .order .order__actions {
    flex-direction: row;
  }

  #history .orders .order .order__actions .btn-verdon {
    width: auto;
  }
}


/* 19. Category additional-description headings (2026-09-15).
   PROD renders the category "additional description" h3 at 18px, from custom.css:630
   `.div-additional-category-description { h3 { font-size: 18px } }`. During the module week
   catalog/_partials/category-footer.tpl was rewritten on DEV to drop the
   `additionalcategorydescription` module fallback (the module is gone and the {widget} call was
   printing a "cannot be used as a widget" notice). That rewrite also dropped the
   `.div-additional-category-description` wrapper, so the child rule no longer matches and the
   heading fell back to the theme default.
   MEASURED: PROD h3 = 18px, DEV h3 = 20.8px on /agricultura.
   Retargeted onto the wrapper the template actually renders now. `.rich-text` is on the same
   element, so this stays a single-class selector and does not need !important. */
.block-additional-category-description h3 {
  font-size: 18px;
}

/* 20. blockwishlist miniature button - restore the PROD 32px circle (2026-09-15).
   ROOT CAUSE #1 again, and the clearest example of it yet. 2.0.0's theme.css carries, INSIDE
   `@layer ps-modules`:
       .wishlist-button-add { width:inherit!important; height:inherit!important; min-width:inherit!important;
                              border-radius:var(--bs-border-radius-sm)!important; box-shadow:none!important;
                              padding:.375rem!important }
       .wishlist-button-add, .wishlist-button-add:hover { border:1px solid var(--bs-body-bg)!important }
   The child's own rule lives UNLAYERED in themes/verdon/modules/blockwishlist/public/wishlist.css:
       .product-miniature .wishlist-button-add { width:2rem!important; height:2rem!important;
                                                 min-width:2rem!important; box-shadow:...!important }
   For `!important` the layer order REVERSES, so the LAYERED rule beats the UNLAYERED one and the
   button rendered 38x38 / radius 4px / 1px border / no shadow instead of PROD's 32x32 circle.
   0.1.5 had no layered counterpart, which is why PROD is fine.
   MEASURED PROD: 32x32, border-radius 50%, border 0, box-shadow rgba(0,0,0,.1) 2px -2px 4px, icon #F75341.
   FIX: re-declare inside the SAME layer. Same-layer !important resolves by specificity then source
   order, and theme-overrides.css loads after the parent theme.css, so this wins on both counts.
   Do NOT move this to `@layer utilities` - utilities is declared LAST, which for !important is the
   WEAKEST position, and it would lose to ps-modules. */
@layer ps-modules {
  .product-miniature .wishlist-button-add,
  .products article .wishlist-button-add {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0.125rem -0.125rem 0.25rem 0 rgba(0, 0, 0, 0.1) !important;
    padding: 3px 6px 1px !important;
  }

  .product-miniature .wishlist-button-add i,
  .products article .wishlist-button-add i {
    color: #F75341 !important;          /* = wishlist.css `.wishlist-button-add i`, beaten the same way */
  }
}

/* 21. Homepage section rhythm - the 40px gap between Creative Elements sections (2026-09-15).
   ROOT CAUSE #2 (renamed wrapper). The child styles the home page through a `.page-home` ancestor:
       themes/verdon/modules/creativeelements/views/css/hook/display_home.css
       .page-home .elementor-inner-section,
       .page-home .elementor-section-wrap > * { margin-bottom: 2.5rem; }
   2.0.0 renamed that wrapper, so the selector matches nothing on DEV:
       PROD  section#content.page-content.page-home
       DEV   div#content.page-content.page-content--home      (and a new #center-column above it)
   MEASURED at 1440px: all 8 home sections had margin-bottom 40px on PROD and 0px on DEV, i.e. every
   one of the 7 gaps between sections collapsed by 40px. `display_home.css` IS still served on DEV -
   the file is fine, only the hook class changed.
   No !important: nothing else declares a bottom margin on these sections on DEV (verified - 0 matching
   rules), and theme-overrides.css is unlayered, so a plain declaration wins over the layered parent CSS.
   Both class names are listed so this keeps working if the wrapper is ever renamed back. */
.page-home .elementor-section-wrap > *,
.page-home .elementor-inner-section,
.page-content--home .elementor-section-wrap > *,
.page-content--home .elementor-inner-section {
  margin-bottom: 2.5rem;
}

/* 22. Homepage bottom gap above the footer (2026-09-15, value corrected 2026-09-21).
   Same family as section 21: 2.0.0 restructured the layout wrapper, so the child's bottom spacing
   landed on an element that no longer exists. The general fix is section 26 (#center-column 4rem on every
   page); the home page needs 8px more because its structure differs:
     PROD  last Elementor section (margin-bottom 40px) -> the empty footer.page-footer (margin-top 48px; the
           two margins collapse to 48) -> #content-wrapper padding-bottom 64px  = 112px to the footer
     DEV   #content is display:grid, so the section's 40px stays inside the grid item, and 2.0.0 renders no
           page-footer on the home page: 40px + padding-bottom = 112px needs 72px.
   In rem, because the root font drops to 15px on phones (PROD: 3rem + 4rem = 105px at 390px):
   3rem + 4rem - 2.5rem (section 21's margin, which stays inside) = 4.5rem = 72px / 67.5px.
   The first value (48px) came from a narrower 2026-09-15 measurement that ignored the collapsed margins; the
   2026-09-21 re-measure (_qa/home-bottom.js, 1440px) gave PROD 112px vs DEV 88px from the last section to the
   footer. More specific than section 26's `#center-column`, so it wins on the home page only. */
body#index #center-column {
  padding-bottom: 4.5rem;
}

/* 23. Add-to-cart modal (ps_shoppingcart modal.tpl, ported to 2.0.0 on 2026-09-21).
   The child's PROD markup is back (merge workspace _merge/modules/ps_shoppingcart/modal.tpl). These
   rules undo the 2.0.0 parent CSS that restyles it. Each was found with _qa/rule-winner.js and
   measured PROD vs DEV with _qa/modal-style.js at 1440px.
   - title colour: PROD inherits white from the green .modal-header. 2.0.0 adds
       @layer bs-custom-components .modal-title { color: var(--bs-body-color) }
     which stops the inheritance (DEV rgb(33,37,41)). Unlayered `inherit` wins over a layered rule.
   - title line-height: PROD 24px from .modal-title's own var. On DEV section 0's unlayered
     `h1..h6 { line-height: 1.4 }` out-ranked it (22.4px). Put the modal-title var back.
   - product name margin: 2.0.0 bs-base headings use margin-bottom 1rem (0.1.5: .5rem). 16 -> 8px.
   - totals rows: 2.0.0 @layer ps-modules sets .blockcart-modal__total { margin-bottom: .25rem }. 4 -> 8px.
   - footer padding: 2.0.0 raised --bs-modal-padding, so the footer calc() gives 20px vs PROD 12px.
   - close button: 2.0.0 `.modal-header .btn-close` padding var gives 12px (40x40 box) vs PROD 8px (32x32).
   - "Poate te intereseaza si:" heading: ROOT CAUSE #1. The child's
       #blockcart-modal .featured-products.crosselling-products h2 { font-size: 18px !important }
     (custom-second.css, unlayered) loses to 2.0.0 `@layer utilities .fs-6 { ...!important }` because a
     LAYERED !important beats an UNLAYERED one. Re-declared inside `utilities`, the opponent's own layer:
     same-layer !important resolves by specificity (1,2,1 vs 0,1,0), so this wins. 14 -> 18px.
   The 1px footer top border (DEV only) was ROOT CAUSE #3 - `border-1` on .modal-footer had no rule on
   0.1.5 and 2.0.0 revived it; fixed by dropping the dead class from the template, not here. */
#blockcart-modal .modal-title {
  color: inherit;
  line-height: var(--bs-modal-title-line-height);
}

#blockcart-modal .btn-close {
  padding: 0.5rem;
}

#blockcart-modal .product-name {
  margin-bottom: 0.5rem;
}

#blockcart-modal .blockcart-modal__total {
  margin-bottom: 0.5rem;
}

#blockcart-modal .modal-footer {
  padding: 0.75rem;
}

@layer utilities {
  #blockcart-modal .featured-products.crosselling-products h2 {
    font-size: 18px !important;
  }
}

/* 24. Checkout (thecheckout 3.3.12) - field height and row spacing back to PROD (2026-09-21).
   NOT a theme-merge regression: both come from the NEWER thecheckout's own stylesheet,
   modules/thecheckout/views/css/front.less.css, which PROD's older build did not have:
       .page-content .form-control,
       .page-content select.form-control-select.form-control { height: min(45px, 2.8em); }   line 1229
       .form-group { margin-bottom: 1rem; }   line 3183, under the module comment "Fix for Hummingbird theme"
   MEASURED (1440px, guest checkout): every text input/select 54px on PROD (2.8em = 53.75px) vs a hard
   45px cap on DEV. The float-label padding (19.2px top) is unchanged, so the shorter box pushed the typed
   text and placeholder down to the bottom edge - the "weird" fields. Row gaps: PROD .form-group mb 0 ->
   22px between rows; DEV 16px extra margin -> 38-45px.
   Kept here rather than in the module file (a module update overwrites it) or the module owner's
   themes/verdon/modules/thecheckout/views/css/custom.less.css (actively edited 2026-09-18).
   Scoped to body#checkout so nothing else in the shop moves; the extra id also out-specifies the
   module's unlayered selectors regardless of load order, so no !important. */
body#checkout .page-content .form-control,
body#checkout .page-content select.form-control-select.form-control {
  height: 2.8em;
}

body#checkout #tc-container .form-group,
body#checkout #tc-container-mobile .form-group {
  margin-bottom: 0;
}

/* 25. Checkout (thecheckout 3.3.12) - remaining visual differences vs PROD (2026-09-21).
   Each measured PROD vs DEV with _qa/checkout-dom.js / checkout-rules.js / pageheader-probe.js.
   - required-field asterisk: PROD red. 3.3.12 generates css-config.css, which paints
       .mark-required ... label.required .field-label::after { color: var(--tc-color-base) }
     and TC_color_base is #212529 (set 2026-09-18 by the module owner - correct for the step badges and
     checkbox borders, which ARE near-black on PROD, so the setting is left alone and only this is re-pointed).
   - checked radio: PROD green var(--green-4) = rgb(29,162,4). css-config.css's
       body:not(.cute) #content.page-content .custom-radio input[type=radio]:checked + span
     (1 id) paints it --tc-color-base; the module owner's own green rule in custom.less.css
     (body#checkout .custom-radio ...) loses on specificity. Two ids here win.
   - carrier name: 2.0.0 shrank .h6 to .875rem in bs-base (PROD 1rem) -> 14 vs 16px.
   - terms link: 3.3.12 front.less.css adds `.js-terms a { text-decoration: underline }`; PROD none.
   - "Cod produs" in the cart line: in the markup, but 3.3.12 front.less.css hides it with
       .product-line-desc .product-reference { display: none }.
   - space above the checkout: ROOT CAUSE #2. PROD zeroes the empty page header with
       body#checkout #content-wrapper .page-header { margin: 0 }
     but 2.0.0 has no #content-wrapper (it is #center-column), so the rule is dead and
     @layer ps-pages .page-header { margin-bottom: 2rem } applies; the empty h1 then collapses through
     with section 16's 1.5rem. PROD gap = the h1's own .5rem (8px); DEV was 32px. Plus 3.3.12's
     div#tc-container { padding-top: 3px }.
   FOLLOW-UP (not fixed here): every child rule keyed on #content-wrapper is dead on 2.0.0. The
   dead-selector scan only covered custom.css, not theme-legacy.css, where most of those live. */
body#checkout #tc-container label.required .field-label::after,
body#checkout #tc-container-mobile label.required .field-label::after {
  color: red;
}

body#checkout #content.page-content .custom-radio input[type="radio"]:checked + span {
  background-color: var(--green-4, #1da204);
}

body#checkout #tc-container .carrier-name,
body#checkout #tc-container-mobile .carrier-name {
  font-size: 1rem;
}

body#checkout #tc-container .js-terms a,
body#checkout #tc-container-mobile .js-terms a {
  text-decoration: none;
}

body#checkout #tc-container .product-line-desc .product-reference,
body#checkout #tc-container-mobile .product-line-desc .product-reference {
  display: block;
}

body#checkout .page-header {
  margin: 0;
}

body#checkout .page-header .page-title-section {
  margin-bottom: 0.5rem;
}

body#checkout div#tc-container {
  padding-top: 0;
}

/* 26. Wrapper spacing: the child's `#content-wrapper` rules re-pointed at 2.0.0's `#center-column` (2026-09-21).
   0.1.5 wrapped the main column in div#content-wrapper.wrapper__content; 2.0.0 renders div#center-column.center-column.page,
   so these rules (theme-legacy.css lines 4-8 and 545, carried over from the 0.1.5 theme.css) matched nothing on DEV and
   2.0.0's own values showed instead. The follow-up flagged in section 25. Measured with _qa/wrapper-rules.js and
   _qa/wrapper-impact.js at 1440px, PROD vs DEV:
     wrapper padding-bottom   PROD 64px (#content-wrapper 4rem)       DEV 32px (@layer ps-pages .page:not(body) 2rem)
     .page-header bottom      PROD 48px, 16px below 576px             DEV 32px (@layer ps-pages .page-header 2rem)
     .page-footer top/links   PROD 48px, links 16px apart             DEV 0 / 0 (visible on the password page footer link)
   Pages that set their own spacing keep it, as on PROD: page headers carrying the `mb-4` utility (cart, 404) stay at 24px,
   because the utilities-layer !important still beats these unlayered rules; the checkout keeps section 25's
   `body#checkout .page-header{margin:0}` and the home page keeps section 22 (both more specific).
   custom.css already carries the `#center-column .page-footer:empty{display:none}` twin. */
#center-column {
  padding-bottom: 4rem;
}
#center-column .page-header {
  margin-bottom: 3rem;
}
@media (max-width: 575.98px) {
  #center-column .page-header {
    margin-bottom: 1rem;
  }
}
#center-column .page-footer {
  margin-top: 3rem;
}
#center-column .page-footer a {
  margin-right: 1rem;
}
#center-column .page-footer > .container > a:last-of-type:not(:first-of-type) {
  float: right;
}

/* 27. Page title on the generic page layout (2026-09-21): register, password, sitemap, guest tracking, CMS, stores.
   The child has no page.tpl, so the parent's is used. 0.1.5 rendered `div.page-header > h1.h4` (PROD: 24px, weight 600,
   margin-bottom .5rem); 2.0.0 renders `div.page-header > h1.page-title-section` via components/page-title-section.tpl
   (DEV: 32px from @layer ps-components clamp(), weight 700 from custom.css `h1{font-weight:700}` - on PROD the `.h4`
   class out-ranked that - and margin-bottom 1.5rem from section 16). Measured with _qa/pageheader-internals.js.
   Restyled to PROD's h4 values (same fluid size as section 0). Scoped to `.page-header >` so the listing and category
   titles that include the same component inside their own cards (catalog listings, category-header.tpl - equal to
   PROD, section 16) are not touched. The .5rem bottom margin collapses into the page header's own 3rem (section 26),
   so the gap to the content stays 48px as on PROD. */
.page-header > .page-title-section {
  font-size: calc(1.275rem + 0.3vw);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
@media (min-width: 1200px) {
  .page-header > .page-title-section {
    font-size: 1.5rem;
  }
}

/* 28. Bootstrap font-size utility scale (2026-10-14).
   0.1.5 shipped Bootstrap's default $font-sizes, so on PROD .fs-1..6 = 2.5/2/1.75/1.5/1.25/1rem. 2.0.0 re-declares the
   map one step smaller: .fs-5 resolves to `var(--bs-body-font-size)` (16px) instead of 1.25rem (20px), and every other
   step shrinks with it. The child's templates were written against the PROD scale, so each use renders a size too
   small: the phone block (.c-u-t-additional.fs-3  28 -> 20px), the add-to-cart label (.btn-cart__label.fs-5  20 ->
   16px), the footer rating stars (.rating-stars.fs-5  20 -> 16px), the account page titles (.fs-4  24 -> 18px).
   Measured with _qa/pdp/probe2.js: PROD 40/32/28/24/20/16px, DEV 32/24/20/18/16/14px.
   Restored in @layer utilities - the same layer 2.0.0 declares them in, so the later source order wins while both keep
   !important (an unlayered rule here would also beat every other layered rule on the element, see sections 7b/9/11).
   Only fs-3..fs-6 are restored: fs-1/fs-2 are used nowhere in the child, and .fs-7/.fs-8/.fs-9 are the child's own and
   already match. 2.0.0's own page templates use no fs-N class at all; the only non-child users are five parent module
   templates (ps_imageslider, ambjolisearch, productcomments, ps_emailalerts, ps_emailsubscription). */
/* CORRECTED 2026-10-14 (same day): the first version pinned fs-3/fs-4 at 1.75rem/1.5rem, measured at 1440px only.
   PROD's fs-3/fs-4 are Bootstrap RFS-fluid below 1200px - calc(1.3rem + .6vw) and calc(1.275rem + .3vw) - and only
   become 1.75rem/1.5rem from 1200px. _qa/pdp/fsscale.js on PROD: fs-3 21.84 / 24.11 / 26.69 / 28px and fs-4
   20.30 / 21.43 / 22.72 / 24px at 390 / 768 / 1199 / 1200. The pinned version made e.g. the order-history title
   22.5px on phones instead of 20.3px. fs-5/fs-6 are below the RFS threshold and stay static. */
@layer utilities {
  .fs-3 { font-size: calc(1.3rem + 0.6vw) !important; }
  .fs-4 { font-size: calc(1.275rem + 0.3vw) !important; }
  .fs-5 { font-size: 1.25rem !important; }
  .fs-6 { font-size: 1rem !important; }
  @media (min-width: 1200px) {
    .fs-3 { font-size: 1.75rem !important; }
    .fs-4 { font-size: 1.5rem !important; }
  }
}

/* 29. Accordion header colours on the product page (2026-10-14).
   PROD's open accordion header ("Informatii", "Specificatii", ...) is #212529 on #fff. 2.0.0 themes the Bootstrap
   accordion from the brand colour, so --bs-accordion-active-color becomes #1da204 (green) and --bs-accordion-active-bg
   becomes transparent - the open header turns green and loses its white background. The two variables are set on the
   element itself, so re-declaring them in the same layer 2.0.0 declares .accordion-button in is enough; the colour
   rules themselves are untouched. */
@layer bs-components {
  .accordion-button {
    --bs-accordion-active-color: #212529;
    --bs-accordion-active-bg: #fff;
  }
}

/* 30. Card text colour (2026-10-14).
   2.0.0 adds `color: var(--bs-body-color)` to .card in @layer bs-components; 0.1.5's .card set no colour at all, so on
   PROD every card inherits the body's #000 (custom.css sets `body{color:var(--main-text-color,#000000)}` while
   --bs-body-color stays Bootstrap's #212529). On DEV that made all card content #212529: 532 elements on the product
   page alone - product descriptions, miniatures, the accordions, the newsletter block. `inherit` reproduces PROD
   exactly without touching --bs-body-color, which must stay #212529 because .table still derives its cell colour from
   it (PROD's discount table cells are #212529 too). .accordion-item carries the same colour through
   --bs-accordion-color, so it gets the same treatment. */
@layer bs-components {
  .card { color: inherit; }
  .accordion-item { color: inherit; }
}

/* 31. Quantity-discount table header (2026-10-14).
   The header row is `<thead class="text-white">` on a red background. 0.1.5's table rule set only a background on the
   cells, so the th inherited the white. 2.0.0's `.discounts-table > :not(caption) > * > *` also sets
   `color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)))`, which lands directly on the
   th and beats the inherited white - the header rendered black on red. Restoring `inherit` on the header cells only;
   the body cells keep 2.0.0's colour, which already equals PROD's #212529. */
@layer bs-components {
  .product__discounts__table > thead > tr > th { color: inherit; }
}

/* 32. .btn-danger label colour (2026-10-14).
   The Outlet CTA ("PROFITĂ ACUM", an `a.btn.btn-danger.rounded-pill`) rendered with BLACK text on DEV and white on
   PROD. Nothing in the theme says so: Bootstrap 5.3 derives a button's label colour with color-contrast(), and for
   this red it now resolves to #000 where 5.2 resolved to #fff, so --bs-btn-color / -hover-color / -active-color all
   flipped. Background is identical on both (#e42b11, set by the child), so only the three label variables are
   restored. Audited with _qa/pdp/btnvars.js: of the 15 Bootstrap button variants only danger flipped; the unused
   .btn-outline-danger has the same flip on hover/active plus a lighter base red (#ff4657 vs #dc3545) and is left
   alone because no child template or module template uses it. */
@layer bs-components {
  .btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
  }
}

/* 33. Product miniature corners (2026-10-14, user approved).
   2.0.0 adds `.product-miniature__inner, .product-miniature__top { border-radius: var(--bs-border-radius) }` in
   @layer ps-components, which rounds the card to 8px and the image area to 8px. PROD: the card is 4px (it is a plain
   `.card`, 2.0.0 is the one that adds the __inner class) and the image area is square. Measured with
   _qa/pdp/badge.js on /agricultura/ingrasaminte/. 4px literal, not 0.25rem, because PROD stays 4px below 576px where
   the root font-size drops to 15px. */
@layer ps-components {
  .product-miniature__inner { border-radius: 4px; }
  .product-miniature__top { border-radius: 0; }
}

/* 34. Badge padding and vertical margin (2026-10-14, user approved).
   The "Discount per Cantitate" / stock badges. 0.1.5's Bootstrap had --bs-badge-padding-y/x = 0.3125rem/0.625rem
   (5px/10px) and a 0.25rem badge margin; 2.0.0 ships 0.25rem/0.5rem (4px/8px) and dropped the margin, so the badges
   render slightly smaller and sit flush. Only the two variables and the block margin are restored - the padding rule
   itself stays 2.0.0's. The horizontal margin is `mx-auto` on these badges and follows the width automatically. */
@layer bs-components {
  .badge {
    --bs-badge-padding-y: 0.3125rem;
    --bs-badge-padding-x: 0.625rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
}

/* 35. Account forms: hide company + identification number again (2026-10-14).
   custom.css:4078-4083 hides `.box-field-company` / `.box-field-siret` on #identity and #registration with
   `display:none !important` (PS_B2B_ENABLE=1 makes the core add both fields; PROD never shows them). The field wrapper
   also carries `d-flex`, and 2.0.0's `.d-flex{display:flex!important}` lives in @layer utilities - a layered
   !important beats an unlayered one, so on DEV "Firma" and "Numar de identificare/inregistrare" reappeared. Root
   cause #1 again. Re-declared in the same layer, where the id selector out-ranks .d-flex. The inputs stay in the form
   (display:none still submits them), exactly as on PROD. */
@layer utilities {
  #identity .box-field-siret,
  #identity .box-field-company,
  #registration .box-field-siret,
  #registration .box-field-company {
    display: none !important;
  }
}

/* 36. Required-field asterisks (2026-10-14).
   2.0.0 adds `.form-label.required:after` and `.form-check-label.required:before` {content:"*"} in
   @layer bs-custom-components. PROD (0.1.5) has no such rule, so required labels carry no marker there; on DEV every
   form grew red asterisks, and the consent checkbox got a lone "*" on its own line above its text. Switched off in the
   same layer. The `required` classes themselves stay - the validation JS still reads them. */
@layer bs-custom-components {
  .form-label.required:after,
  .form-check-label.required:before {
    content: none;
  }
}

/* 37. Form control height (2026-10-14).
   PROD's .form-control padding is .5rem 1rem (inputs 42px); Bootstrap 5.3 in 2.0.0 uses .375rem 1rem (38px), so every
   text input on DEV was 4px shorter. Restored in @layer bs-components, the layer 2.0.0 declares it in, so the more
   specific per-page rules (checkout section 24, search widget) keep winning exactly as they did. */
@layer bs-components {
  .form-control {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* 38. Radio / checkbox outline (2026-10-14).
   Bootstrap 5.2 (PROD): `.form-check-input{border:1px solid rgba(0,0,0,.25)}`. 5.3 (DEV) switched it to
   var(--bs-border-color) = #dee2e6, so the unchecked circles and boxes were much paler. Only the colour is restored;
   :checked / :focus set their own border-color with a more specific selector and are unaffected.
   Also the vertical offset: PROD sits the box .125rem below the line top (2px desktop, 1.875px under the 15px mobile
   root); 2.0.0 uses .25rem, so every radio and checkbox sat 2px lower than its label on DEV. */
@layer bs-components {
  .form-check-input {
    border-color: rgba(0, 0, 0, 0.25);
    margin-top: 0.125rem;
  }
}

/* 39. Doubled material icon in the account menu (2026-10-14).
   DEV's gdprpro template (modules/gdprpro/views/templates/hook/customer-account.tpl:29) wraps the "Request my data"
   icon twice: `<i class="material-icons"><i class="material-icons">assignment_returned</i></i>`. PROD's copy has a
   single <i>. The inner one is inline-block with vertical-align:middle on the outer one's line box, which drops the
   glyph 6px below its label - the misaligned icon the client reported. The template belongs to the module (handoff
   list); this neutralises the nesting from the theme so the inner icon sits exactly where a single one would.
   A nested .material-icons never occurs legitimately, so the selector cannot touch anything else. */
.material-icons > .material-icons {
  display: block;
  vertical-align: top;
}

/* 40. Checkout (thecheckout) - mobile container + cart-summary product line back to PROD (2026-10-14).
   Client report: the product line in the checkout's cart summary "nu e aranjat".
   PROD's checkout cannot be opened without a PROD cart, so PROD was rendered as: PROD's own stylesheets
   (empty cart page bundle + PROD's thecheckout CSS files) around the same checkout markup
   (_qa/pdp/ckemu.js, ckrw.js). Module templates and TC_* config are identical on both shops.
   - Sections 24-25 were scoped to #tc-container only. Below ~992px thecheckout moves every block into
     #tc-container-mobile, so on phones/tablets those rules never applied (rows +15px, terms link
     underlined, carrier names 13px). Their selectors now list #tc-container-mobile too.
   - .product-line: 2.0.0 @layer ps-components .product-line { gap: 1.5rem; align-items: flex-start }
     (ROOT CAUSE #3, 2.0.0 reuses the class for its own cart). The gap narrowed the text column; on mobile
     (column layout) flex-start shrank the image box to 125px instead of the full row, so the image sat left.
   - price block .h5: 2.0.0 bs-base headings margin-bottom 1rem; PROD .5rem.
   - prices and the "-20%" tag: css-config.css paints .page-content .product-price with --tc-color-base
     (#212529) and .has-discount .discount as a filled #212529 tag with white text, plus the newer module's
     2px tag padding. PROD never loads css-config.css (403 on www.verdon.ro), so prices inherit black and
     the tag is plain grey text. Scoped to the summary block, which moves between both containers. */
body#checkout #thecheckout-cart-summary .cart-item .product-line {
  gap: normal;
  align-items: normal;
}

body#checkout #thecheckout-cart-summary .product-line-info.h5 {
  margin-bottom: 0.5rem;
}

body#checkout #thecheckout-cart-summary .product-price {
  color: inherit;
}

body#checkout #thecheckout-cart-summary .has-discount .discount {
  background-color: transparent;
  color: inherit;
  padding-left: 0;
  padding-right: 0;
}

/* 41. Megamenu "Categorii Produse" - tab chevrons hidden again (2026-10-14). ROOT CAUSE #1.
   Client report: "Meniul nu arata ca pe cel live acum". The tab markup (menu-html.tpl) gives the chevron
   div.svg-icon-container the `d-flex` utility; themes/verdon/modules/ets_megamenu/views/css/megamenu.css
   (identical to PROD) hides it with unlayered `display: none !important`, but 2.0.0's
   @layer utilities .d-flex { display: flex !important } outranks any unlayered !important.
   Desktop: a chevron on every row squeezed the labels onto two lines. Below 992px: chevrons on the rows
   without a submenu (Produse B2B, Pachete SMART-MIX). Same selectors and breakpoints as megamenu.css,
   re-declared inside the utilities layer, where the higher specificity beats .d-flex. */
@layer utilities {
  @media (min-width: 992px) {
    .mm_tab_toggle_title .svg-icon-container {
      display: none !important;
    }
  }
  @media (max-width: 991px) {
    .mm_tab_li_content.pe-none .mm_tab_toggle_title .svg-icon-container,
    .mm_tabs_li:not(.mm_tabs_has_content) .mm_tab_toggle_title .svg-icon-container {
      display: none !important;
    }
  }
}

/* 42. Mobile megamenu - back arrow + "Vezi toate produsele", like Dedeman (client request 2026-10-15).
   Markup: themes/verdon/modules/ets_megamenu/views/templates/hook/menu-html.tpl (arrow in the "Meniul principal"
   header, link under the opened category) and block.tpl (link under an opened 3rd level); behaviour in
   views/js/megamenu.js (while a level is open the header's left part goes back one level). Below 992px only;
   d-lg-none in the markup hides the links on desktop. No utility display classes on the elements toggled
   here (ROOT CAUSE #1: they would outrank these rules). */
@media (max-width: 991px) {
  .ets_mm_megamenu .close_menu .mm_menus_back_icon {
    display: none;
  }
  .ets_mm_megamenu .mm_menus_ul:has(.mm_tab_li_content.opened) .close_menu .mm_menus_back_icon {
    display: block;
  }
  .ets_mm_megamenu .mm_menus_ul:has(.mm_tab_li_content.opened) .close_menu .icon-menu_icon {
    display: none;
  }
  .ets_mm_megamenu .mm_menus_ul .mm_view_all {
    display: flex;
    align-items: center;
    min-height: 60px;
    padding: 9px 15px;
    line-height: 1;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  /* colour on its own, more specific: theme-legacy.css .header a:not(.dropdown-item):not(.btn) is (0,3,1) */
  .ets_mm_megamenu .mm_menus_ul .mm_menus_li a.mm_view_all {
    color: var(--green-5);
  }
  /* category level: gone once a 3rd level is open, which shows its own */
  .mm_menus_li_tab .mm_columns_contents_ul:has(.ets_mm_block-title.opened) > .mm_view_all_li {
    display: none;
  }
  /* 3rd level: only inside the opened block, never in the other menus' always-visible blocks */
  .ets_mm_megamenu .ets_mm_block_content > .mm_view_all {
    display: none;
  }
  .mm_menus_li_tab .mm_blocks_li .ets_mm_block-title.opened + .ets_mm_block_content > .mm_view_all {
    display: flex;
  }
}
.product-variant__colors .input-color.product-variant__color,
.page-product .product__variants .variant .input-color.product-variant__color {
  display: block;
}

/* Category sort bar ("Sorteaza dupa"): the 0.1.5 markup put the product count in a .col-lg-6, so on large screens
   the sort dropdown only got the other half (~270px). Hummingbird 2.0.0 dropped that column and the dropdown
   stretched over the whole bar. Give .products__count the same half width from lg up. */
@media (min-width: 992px) {
  #js-product-list-top .products__count {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
.category-header-image--list .category-banner { margin-top: 0 !important; }
.category-header-image--list .category-banner img { display: block; max-width: 100%; height: auto; }