/* =====================================================================
   mobile-fixes.css — Mobiel fase 1: repareren + polish (2026-07)
   Alles strikt binnen max-width:767px. Verantwoording per regelgroep:
   assets/mobile-audit-20260706/diagnose.md
   ===================================================================== */

@media (max-width: 767px) {

  /* === BUGS === */

  /* diagnose.md: Bug 1 — PDP Related Products: de product-items is een
     swiper-wrapper waarvan de Swiper op mobiel niet initialiseert; het theme
     forceert `.column.main .products-grid .product-items{display:flex!important}`
     waardoor 5 smalle kaarten in één 1750px hoge kolom stapelen. !important is
     hier nodig om die bestaande !important te pareren. */
  .column.main .block.related .products-grid .product-items {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    transform: none;
  }
  .block.related .product-item {
    width: auto;
    margin: 0;
  }
  .block.related .product-item-info.related-available {
    width: 100%;
  }

  /* diagnose.md: Bug 2 — kaart-titels hard mid-woord afgekapt: vaste
     hoogte 76,8px + overflow:hidden, en de line-clamp op de link is dood
     (display:flow-root i.p.v. -webkit-box). Vaste hoogte eraf, échte
     clamp aan; min-height 2 regels zodat kaarten in een rij gelijk ogen. */
  .products-grid .product-item-name {
    height: auto;
    max-height: none;
  }
  .products-grid .product-item-link {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    min-height: 2.6em;
  }

  /* === POLISH === */

  /* diagnose.md: P1 — PDP details-tekstmuur: lucht en leesbaarheid */
  .product.attribute.description {
    line-height: 1.65;
    font-size: 14px;
  }
  .product.attribute.description p {
    margin-bottom: 0.9em;
  }

  /* diagnose.md: P2 — PDP attribuut-chips: wrappen met lucht */
  .bk-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .bk-meta__badge {
    margin: 0;
  }

  /* diagnose.md: P3 — homepage: gelijkmatig sectie-ritme */
  .vhg-section {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .vhg-section-header {
    margin-bottom: 20px;
  }

  /* diagnose.md: P4 — hero: rustiger kop en lucht tussen knoppen */
  .vhg-hero-title {
    line-height: 1.15;
  }
  .vhg-hero-section .vhg-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* diagnose.md: P5/P8 — prijs-hiërarchie: hoofdprijs voorop,
     excl.-vermelding visueel ondergeschikt */
  .products-grid .price-box .price-excluding-tax {
    font-size: 0.8em;
    color: #6b7280;
  }
  .product-info-price .price-excluding-tax {
    font-size: 0.85em;
    color: #6b7280;
  }

  /* diagnose.md: P6 — productkaarten: consistente lucht */
  .products-grid .product-item-info {
    padding: 8px;
  }
  .products-grid .product-item-details {
    padding-top: 6px;
  }

  /* diagnose.md: P7 — sectiekoppen: rustiger maat op mobiel */
  .vhg-section-title,
  .page-title {
    font-size: clamp(20px, 5.5vw, 24px);
    line-height: 1.2;
    overflow-wrap: break-word;
  }
  h1 {
    line-height: 1.15;
  }

  /* P9 — categorie-grid: nette kaarten, gelijke hoogtes (feedback Pierre 07-07).
     !important pareert de theme-flex !important, zelfde reden als Bug 1. */
  .page-products .column.main .products-grid .product-items {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
  }
  .page-products .column.main .products-grid .product-item {
    width: auto;
    margin: 0;
  }
  .page-products .products-grid .product-item .product-item-info {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(16, 42, 67, 0.06);
    padding: 10px;
  }
  .page-products .product-item-photo {
    display: block;
    text-align: center;
    margin-bottom: 8px;
  }
  .page-products .product-item-details {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
  .page-products .product-item-name {
    margin: 0 0 4px;
  }
  .page-products .product-item-details .price-box {
    margin-top: auto;
    padding-top: 8px;
  }
  .page-products .product-item-actions {
    margin-top: 8px;
  }
  .page-products .product-item-actions .action.tocart {
    width: 100%;
  }

  /* P15 — compactere kaarten: titel 2 regels i.p.v. 3 (feedback Pierre 07-07).
     !important + zelfde selectorvorm als de theme-regel (.product-item-name a). */
  .page-products .products-grid .product-item-name a,
  .page-products .products-grid .product-item-link {
    -webkit-line-clamp: 2 !important;
    min-height: 0;
  }
  .page-products .products-grid .product-item-name {
    margin: 0 0 2px;
  }

  /* P16 — bestelknop zichtbaar op mobiele kaarten (feedback Pierre 07-07):
     theme verbergt .product-item-inner/-actions op mobiel (hover-patroon). */
  .page-products .products-grid .product-item .product-item-info .product-item-inner {
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
    box-shadow: none;
    border: 0;
    margin: 0 !important;
    padding: 0;
  }
  .page-products .products-grid .product-item-actions,
  .page-products .products-grid .product-item-actions .actions-primary,
  .page-products .products-grid .product-item-actions .actions-primary form {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0;
  }
  .page-products .products-grid .product-item-actions {
    margin-top: 8px !important;
  }
  .page-products .products-grid .product-item-actions .actions-secondary {
    display: none !important;
  }
  .page-products .products-grid .product-item-actions .action.tocart {
    width: 100%;
    padding: 9px 10px;
    font-size: 13px;
  }

  /* P12 — "Shop By"-filterknop was wit-op-wit (bestaande bug, zichtbaar
     geworden na fase 1): echte knop in huisstijl. */
  .page-products .filter-title strong {
    background: #1b75bc !important;
    color: #fff !important;
    border: 0;
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 600;
    box-shadow: none;
  }

  /* P13 — filterpaneel: Amasty's fake-checkbox (span.amshopby-choice, absoluut
     gepositioneerd in de li) lag óver de optienaam heen. Checkbox links
     verticaal gecentreerd, anker krijgt passende padding: checkbox — naam — aantal. */
  .filter-options-content .items .item {
    position: relative;
  }
  .filter-options-content .items .item > a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 0 10px 34px !important;
  }
  .filter-options-content .items .item .amshopby-choice {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%);
    margin: 0 !important;
  }
  .filter-options-content .items .item .label {
    flex: 1 1 auto;
  }
  .filter-options-content .items .item .count {
    flex: 0 0 auto;
  }

  /* P11 — mobiel menu: compacte, gegroepeerde submenu's (feedback Pierre 07-07).
     Uitgeklapte level1-dropdown wordt een getint paneel; groepskoppen strak,
     level2-links compact en in huisstijlblauw, scheidingslijn per groep. */
  .nav-sections .navpro-dropdown-level1 {
    background: #f5f8fb;
    border-radius: 8px;
    margin: 2px 8px 10px;
    padding: 4px 0;
  }
  .nav-sections .navpro-dropdown-level1 li.level1 {
    border-bottom: 1px solid #e3e8ef;
    padding-bottom: 6px;
    margin-bottom: 4px;
  }
  .nav-sections .navpro-dropdown-level1 li.level1:last-child {
    border-bottom: 0;
    margin-bottom: 0;
  }
  .nav-sections .navpro-dropdown-level1 li.level1 > a {
    font-size: 15px;
    font-weight: 700;
    color: #103a5c;
    padding: 10px 14px 4px;
  }
  .nav-sections .navpro-dropdown-level2 li.level2 > a {
    font-size: 14px;
    line-height: 1.35;
    padding: 6px 14px 6px 22px;
    color: #1b75bc;
  }

  /* P10 — CTA's in huisstijlblauw (besluit Pierre 07-07). !important op de
     kleuren: pareert de gele theme-CTA met hogere specificiteit. */
  /* (vervolg onderaan dit bestand: P14 desktop-menu, eigen media query) */
  .box-tocart .action.tocart,
  .catalog-product-view .product-info-main .box-tocart .action.tocart,
  .page-products .product-item-actions .action.tocart,
  .block.related .action.tocart {
    background: #1b75bc !important;
    border-color: #1b75bc !important;
    color: #fff !important;
    border-radius: 8px;
    font-weight: 600;
  }
  .box-tocart .action.tocart:hover,
  .box-tocart .action.tocart:active,
  .page-products .product-item-actions .action.tocart:hover,
  .block.related .action.tocart:hover {
    background: #155e96 !important;
    border-color: #155e96 !important;
    color: #fff !important;
  }
}

/* ============================================================
   P14 — desktop mega-menu (feedback Pierre 07-07): de Products-
   dropdown stapelde alle groepen in één smalle linkerkolom in een
   verder leeg wit vlak (navpro-stacked). Hier: 4-koloms grid +
   dezelfde designtaal als de mobiele menu-polish (P11).
   P18 — feedback Pierre 08-07 ("desktop: lettertype te groot,
   links te klein"): P14-grid strakker gescoped op de échte mega
   (.navpro-stacked) — de oude descendant-selector raakte óók de
   geneste level2-lijsten en het Browse Standards-flyout, waardoor
   links in mini-kolommen van ±53px wrapten. Plus: navpro's
   7/12-linkkolom naar volle breedte, koppen 15px, links 14px, en
   huisstijlkleuren met !important (pareert de grijze
   body.cms-vhg_home-!important-regel op de homepage).
   ============================================================ */
@media (min-width: 768px) {
  .navpro .navpro-dropdown-level1.navpro-stacked ul.children.multicolumn {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 40px;
    align-items: start;
  }
  .navpro .navpro-dropdown-level1.navpro-stacked ul.children.multicolumn > li.level1 {
    width: auto;
    margin: 0;
  }
  .navpro .navpro-dropdown-level1 .navpro-dropdown-inner {
    padding: 28px 36px;
  }

  /* P18: navpro reserveert in level2-panelen een 7/12-kolom voor de
     links (rest blijft leeg wit vlak) — kolom naar volle breedte. */
  .navpro .navpro-dropdown-level2 .navpro-row {
    margin: 0;
  }
  .navpro .navpro-dropdown-level2 .navpro-row > .navpro-col {
    width: 100% !important;
    margin: 0;
  }

  /* P18: geneste level2-lijst IN de mega: strakke verticale lijst
     direct onder de groepskop (de 28px inner-padding lekte hierin). */
  .navpro .navpro-dropdown-level1.navpro-stacked .navpro-dropdown-level2 .navpro-dropdown-inner {
    padding: 6px 0 0;
  }
  .navpro .navpro-dropdown-level1.navpro-stacked .navpro-dropdown-level2 ul.children {
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .navpro .navpro-dropdown-level1.navpro-stacked .navpro-dropdown-level2 li.level2 {
    width: 100% !important;
    margin: 0;
    float: none;
  }

  /* P18: flyout-paneel (persistente Browse Standards-lijst → domein):
     volle paneelbreedte, 2 nette kolommen i.p.v. mini-kolommen.
     P20: child-combinators — de oude descendant-selectors lekten in het
     geneste level3-blok (TOGAF → 10th Edition): dubbele 20/28px-padding
     en een mini-gridkolom waarin "10th Edition" afbrak. */
  .navpro .navpro-dropdown-level1.persistent .navpro-dropdown-level2 > .navpro-dropdown-inner {
    padding: 20px 28px;
  }
  .navpro .navpro-dropdown-level1.persistent .navpro-dropdown-level2 > .navpro-dropdown-inner > .navpro-row > .navpro-col > ul.children {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
    width: 100% !important;
    margin: 0;
    padding: 0;
  }
  .navpro .navpro-dropdown-level1.persistent .navpro-dropdown-level2 li.level2 {
    width: auto !important;
    margin: 0;
    float: none;
  }

  /* P14/P18: typografie-balans — koppen 15px, links 14px leesbaar. */
  .navpro .navpro-dropdown-level1 li.level1 > a {
    font-size: 15px;
    color: #103a5c !important;
    padding: 0 0 6px;
  }
  /* P19 (feedback Pierre 08-07): vet alléén voor de groepskoppen in de
     mega; in de Services-dropdowns en de persistente Browse Standards-
     lijst zijn level1-items gewone links — 700 oogde daar te zwaar. */
  .navpro .navpro-dropdown-level1.navpro-stacked li.level1 > a {
    font-weight: 700;
  }
  .navpro .navpro-dropdown-level1:not(.navpro-stacked) li.level1 > a {
    font-weight: 500;
  }
  .navpro .navpro-dropdown-level2 li.level2 > a {
    font-size: 14px !important;
    line-height: 1.4;
    padding: 5px 0;
    color: #1b75bc !important;
  }

  /* P20 (feedback Pierre 08-07): het level3-blok (TOGAF → 10th Edition in
     Browse Standards → Enterprise Architecture) rendert navpro permanent
     inline-expanded, zónder eigen paneelstijl (position:static, transparant)
     — het oogde als losse zwevende tekst in het witte flyout-vlak. Nu: een
     getint subpaneel in de P11-designtaal (#f5f8fb + rand + radius) dat
     direct onder de parent-link aansluit, zodat duidelijk is dat dit een
     eigen (sub)menu is. Generiek op level3 zodat óók de Products-mega
     meeprofiteert als daar een level3 opduikt. */
  .navpro .navpro-dropdown-level1 .navpro-dropdown-level2 li.level2 > .navpro-dropdown-level3 {
    margin: 2px 0 8px;
    background: #f5f8fb;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
  }
  .navpro .navpro-dropdown-level1 .navpro-dropdown-level2 .navpro-dropdown-level3 .navpro-dropdown-inner {
    padding: 4px 12px;
  }
  .navpro .navpro-dropdown-level1 .navpro-dropdown-level2 .navpro-dropdown-level3 .navpro-row,
  .navpro .navpro-dropdown-level1 .navpro-dropdown-level2 .navpro-dropdown-level3 .navpro-col {
    width: 100% !important;
    margin: 0;
  }
  .navpro .navpro-dropdown-level1 .navpro-dropdown-level2 .navpro-dropdown-level3 ul.children {
    display: block !important;
    width: 100% !important;
    margin: 0;
    padding: 0;
  }
  .navpro .navpro-dropdown-level3 li.level3 {
    width: 100% !important;
    margin: 0;
    float: none;
  }
  .navpro .navpro-dropdown-level3 li.level3 > a {
    display: block;
    font-size: 14px !important;
    line-height: 1.4;
    padding: 5px 0;
    color: #1b75bc !important;
  }
}