/* ==================================================================
   NR Agri — de twee kolommen onder het koopblok gelijktrekken

   WAT ER MIS WAS
   ==============
   Onder het koopblok staan twee kolommen naast elkaar: "Omschrijving" links en
   "Meer informatie" rechts. Beide zijn een <section> in hetzelfde raster, met
   een <h2> erboven en een kaart eronder.

   De kop links is niet "Omschrijving" maar "Omschrijving / <productnaam>". Bij
   een lange naam — en die zijn hier eerder regel dan uitzondering, denk aan
   "Pompe à vide pour LELY A2, A3, A3 next et A4" — loopt die kop over twee
   regels. De kaart eronder zakt dan mee, terwijl de kaart rechts blijft staan.
   Twee kaarten die niet op dezelfde hoogte beginnen, en twee koppen die niet op
   dezelfde regel staan.

   HOE HET NU WERKT
   ================
   1. Elke kolom is een flexkolom. De kop krijgt de hoogte van twee regels,
      of de naam nu wel of niet afbreekt. Daarmee beginnen beide kaarten op
      dezelfde lijn.
   2. Breekt een naam tóch over meer dan twee regels, dan wordt hij op twee
      regels afgekapt met een beletselteken. De volledige naam staat al als H1
      boven aan de pagina, dus er gaat geen informatie verloren.
   3. De kaarten rekken mee tot de onderkant van de langste kolom, zodat het
      blok als één geheel oogt in plaats van als twee losse stukken.

   Geen enkel sjabloon van Hyvä of Magento wordt hiervoor aangeraakt.
   ================================================================== */

/* De id van het rechterblok bevat letterlijk een punt (id="product.attributes");
   in CSS moet die met een backslash worden ontsnapt. */
.catalog-product-view #description,
.catalog-product-view #product\.attributes {
    display: flex;
    flex-direction: column;
}

.catalog-product-view #description > h2,
.catalog-product-view #product\.attributes > h2 {
    /* text-2xl = 1.5rem met een regelhoogte van 2rem; twee regels = 4rem. */
    min-height: 4rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.catalog-product-view #description > .card,
.catalog-product-view #product\.attributes > .card {
    flex: 1 1 auto;
}

/* Op een smal scherm staan de kolommen onder elkaar; dan is uitlijnen zinloos
   en kost een vaste kophoogte alleen maar lege ruimte. */
@media (max-width: 1023px) {
    .catalog-product-view #description > h2,
    .catalog-product-view #product\.attributes > h2 {
        min-height: 0;
        -webkit-line-clamp: none;
        line-clamp: none;
        display: block;
    }
}

/* ==================================================================
   FOTO VERGROTEN — het venster kwam áchter de middenkolom terecht
   (gemeld 21 september 2026)

   WAT DE BEZOEKER ZAG
   ===================
   Klik op de productfoto → de foto werd groter, maar verdween deels
   achter de tekst- en koopkolom in plaats van er als apart venster
   bovenop te komen.

   OORZAAK 1 — STAPELCONTEXT
   =========================
   Hyvä opent de vergrote foto als overlay over de hele pagina:
   `position: fixed` met `z-index: 50`. Onze mediakolom (.nr-pdp-media)
   staat vanaf 1024 px op `position: sticky`, en een sticky element maakt
   een EIGEN stapelcontext. Alles daarbinnen — ook een `fixed` overlay —
   kan dan nooit boven een broer of zus uitkomen die later in de HTML
   staat. De midden- en rechterkolom komen later, dus die werden er
   overheen geschilderd.

   Oplossing: zolang de overlay openstaat is de kolom niet sticky. Dat
   herkennen wij aan de klassen die Hyvä er op dat moment zelf op zet
   (`fixed` + `z-50`), dus zonder één regel JavaScript en zonder het
   sjabloon van Hyvä aan te raken.

   OORZAAK 2 — ONTBREKENDE TAILWIND-KLASSEN
   ========================================
   Onze Tailwind-bouw scant alleen de themamap — zie de `@source`-regel in
   `web/tailwind/tailwind-source.css` — en dus niet de sjablonen van Hyvä
   zelf. Klassen die ALLEEN in Hyvä's
   galerij-sjabloon voorkomen, zijn daardoor nooit gegenereerd —
   gemeten op 21 september: `max-h-[75vh]` (hoogtebegrenzing van de
   vergrote foto), `m-auto` (foto centreren), `self-center`,
   `object-center` en de hele maatvoering van de miniaturenrij.
   Zonder die regels werd de foto niet begrensd en niet gecentreerd:
   hij liep buiten beeld.

   Wij definiëren die klassen hier, exact zoals Tailwind ze zou maken en
   afgebakend tot `#gallery`. Zo blijft het sjabloon van Hyvä ongewijzigd
   (vendor!) en is er op melknl geen nieuwe Tailwind-bouw nodig.
   ================================================================== */

.nr-pdp-media:has(.fixed.z-50) {
    position: static;
}

#gallery .max-h-\[75vh\] { max-height: 75vh; }
#gallery .m-auto { margin: auto; }
#gallery .self-center { align-self: center; }
#gallery .object-center { object-position: center; }
#gallery .h-auto { height: auto; }

/* Miniaturenrij onderin het venster */
#gallery .flex-none { flex: none; }
#gallery .flex-nowrap { flex-wrap: nowrap; }
#gallery .place-items-center { place-items: center; }
#gallery .mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; }
#gallery .mr-2 { margin-right: .5rem; }
#gallery .last\:mr-0:last-child { margin-right: 0; }
#gallery .p-2\.5 { padding: .625rem; }
#gallery .opacity-25 { opacity: .25; }
#gallery .text-black { color: #000; }

/* Sluitknop rechtsboven */
#gallery .pr-4 { padding-right: 1rem; }
#gallery .outline-none, #gallery .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
#gallery .outline-offset-2 { outline-offset: 2px; }

@media (min-width: 1024px) {
    #gallery .lg\:mr-4 { margin-right: 1rem; }
}