/* ==================================================================
   NR Agri — de ontbrekende opmaak van de winkelwagenpagina

   WAAROM DIT BESTAAT
   ==================
   Tailwind genereert alleen klassen die het tegenkomt in de mappen die
   het scant. Ons thema scant zijn eigen map, plus `magento2-theme-module`
   en `magewire` — maar NIET het bovenliggende Hyvä-thema. En de
   winkelwagenpagina komt daar volledig vandaan:
   `magento2-default-theme/Magento_Checkout/templates/php-cart/*`.

   Gevolg: 48 klassen op die pagina hadden geen enkele regel. De belangrijkste
   was `lg:flex-row-reverse`, en juist die maakt van de winkelwagen twee
   kolommen met de samenvatting rechts. Zonder die regel valt alles op één
   stapel en schuift de samenvatting over de artikelen heen.

   Wat hieronder staat is precies dat: de handvol Tailwind-hulpklassen die
   ontbraken, met dezelfde waarden die Tailwind zelf zou hebben gemaakt.
   Geen eigen ontwerp, geen afwijkingen — alleen wat er hoorde te staan.

   WAAROM HIER EN NIET IN HET THEMA
   ================================
   Op verzoek van de opdrachtgever: alles binnen onze eigen module, zodat een
   update van Magento of van het Hyvä-hoofdthema hier niets van wegneemt en er
   nooit opnieuw een themabouw nodig is om deze pagina heel te houden.

   Maten volgen de tokens van het thema: `--spacing` is .25rem, dus w-80 is
   80 × .25 = 20rem en gap-6 is 1,5rem. Breekpunten zijn die van Tailwind:
   sm 40rem, md 48rem, lg 64rem, 2xl 96rem.
   ================================================================== */


/* ------------------------------------------------------------------
   1. De twee kolommen — dit is de kern van het probleem

   De omhulling is `flex flex-col lg:flex-row-reverse lg:items-start gap-8`.
   `flex-col` en `gap-8` bestonden al; de omkering en de breedte van de
   samenvatting niet. Omgekeerd, omdat de samenvatting in de HTML vóór de
   artikelen staat maar rechts hoort te verschijnen.
   ------------------------------------------------------------------ */

@media (min-width: 64rem) {
    .lg\:flex-row-reverse { flex-direction: row-reverse; }
    .lg\:w-80 { width: 20rem; }
}

@media (min-width: 96rem) {
    .\000032xl\:w-96 { width: 24rem; }
}


/* ------------------------------------------------------------------
   2. De regels in de artikelenlijst

   Elke regel is `py-6 border-b border-gray-300 first:pt-0 last:pb-0
   last:border-b-0`. Zonder de drie varianten krijgt de eerste regel ruimte
   boven zich en houdt de laatste een streep onder zich die nergens op slaat.
   ------------------------------------------------------------------ */

.first\:pt-0:first-child { padding-top: 0; }
.last\:pb-0:last-child { padding-bottom: 0; }
.last\:border-b-0:last-child { border-bottom-width: 0; }


/* ------------------------------------------------------------------
   3. De bedragen in het overzicht

   De totalen staan in een raster van twee kolommen: omschrijving links,
   bedrag rechts. `justify-self-end` doet dat rechts zetten. Zonder die regel
   plakken alle bedragen tegen hun omschrijving aan.
   ------------------------------------------------------------------ */

.justify-self-end { justify-self: end; }


/* ------------------------------------------------------------------
   4. Losse hulpklassen die op deze pagina worden gebruikt
   ------------------------------------------------------------------ */

.list-none { list-style-type: none; }
.break-all { word-break: break-all; }
.ml-10 { margin-left: 2.5rem; }
.text-fg-secondary { color: var(--color-fg-secondary); }

/* De uitklapper van de kortingscode en het verzendvoorstel. */
.group[open] .group-open\:rotate-180 { transform: rotate(180deg); }

/* Het standaard driehoekje van <summary> weghalen; Hyvä tekent een eigen pijl. */
.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker { display: none; }

@media (min-width: 40rem) {
    .sm\:gap-2 { gap: .5rem; }
    .sm\:justify-between { justify-content: space-between; }
}

@media (min-width: 48rem) {
    .md\:gap-6 { gap: 1.5rem; }
}


/* ------------------------------------------------------------------
   5. Klassen van de Stripe-module

   Die module levert eigen Tailwind mee die om dezelfde reden niet is
   meegebouwd. `min-h-a11y` is een minimale aantikhoogte; 2,75rem is de
   gangbare 44 pixels uit de toegankelijkheidsrichtlijnen. Zonder die regel
   klapt de knop van Apple Pay / Google Pay in elkaar tot een streepje.
   ------------------------------------------------------------------ */

.min-h-a11y { min-height: 2.75rem; }
.bg-white\/60 { background-color: color-mix(in srgb, #fff 60%, transparent); }
.bg-blur { backdrop-filter: blur(4px); }


/* ------------------------------------------------------------------
   6. Een beetje lucht in het overzicht

   De semantische klassen van Magento (`cart-summary`, `cart-totals`,
   `coupon`, `estimate`) hebben in Hyvä geen eigen opmaak — die pagina leunt
   volledig op de hulpklassen hierboven. Deze paar regels zijn van ons en
   maken het geheel rustiger; ze zijn zonder gevolgen weg te halen.
   ------------------------------------------------------------------ */

.cart-summary > * + * { margin-top: .75rem; }

.cart-totals .grid > div { padding-block: .15rem; }

/* De afrekenknop mag opvallen; dat is waar de klant heen moet. */
.checkout-methods-items { margin-top: 1rem; }
.checkout-methods-items .btn-checkout { width: 100%; }