/* ==================================================================
   NR Agri — de hulpklassen die nooit gebouwd zijn

   HET PROBLEEM, GEMETEN
   =====================
   Tailwind maakt alleen de 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 ook niet de
   sjablonen van modules zoals Stripe.

   Grote delen van de winkel komen daar wél vandaan. Gemeten over negen
   pagina's op melknl (met de opmaak die de pagina zelf meestuurt meegeteld):

     productpagina    743 klassen — 135 zonder enkele regel
     zoekresultaten   678 klassen — 122 zonder regel
     categoriepagina  688 klassen — 119 zonder regel
     afrekenen        571 klassen —  98 zonder regel
     winkelwagen      620 klassen —  78 zonder regel
     homepage         616 klassen —  70 zonder regel
     inhoudspagina    539 klassen —  61 zonder regel
     inloggen         536 klassen —  59 zonder regel

   Daarvan zijn er 85 échte hulpklassen — kolommen, marges, volgorde,
   breekpunten. De rest zijn naamhaken (`field-wrapper`, `page-header`,
   `product-title`) die ook bij Hyvä geen opmaak hebben; die horen zo.

   Dit verklaart wat er gemeld was: een categoriepagina die "raar" oogt, een
   winkelwagen waar alles over elkaar valt, en een productpagina die op een
   telefoon uit elkaar loopt. Er ontbraken simpelweg de regels voor
   `grid-cols-4`, `col-span-2`, `md:order-3`, `sm:col-span-6` enzovoort.

   WAT HIERONDER STAAT
   ===================
   Precies die 85 klassen, met exact de waarden die Tailwind zelf zou hebben
   gemaakt. Geen eigen ontwerp, geen afwijkingen. Maten volgen de tokens van
   het thema (`--spacing` = .25rem, dus `p-8` = 2rem) en de breekpunten van
   Tailwind: sm 40rem, md 48rem, lg 64rem, xl 80rem, 2xl 96rem.

   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 er niets van wegneemt en er
   geen bouwstap nodig is om de winkel heel te houden.

   ONDERHOUD
   =========
   Komt er een nieuw sjabloon uit het hoofdthema bij, dan kunnen er opnieuw
   klassen ontbreken. De meetmethode staat in het logboek van 20-08-2026:
   alle klassen van een pagina afzetten tegen `styles.css` plus de eigen
   stijlbestanden van onze modules.
   ================================================================== */


/* ------------------------------------------------------------------
   1. Zonder breekpunt
   ------------------------------------------------------------------ */

.\!mb-0 { margin-bottom:0 !important; }
.\!mr-0 { margin-right:0 !important; }
.-right-1\.5 { right:-0.375rem; }
.-top-1\.5 { top:-0.375rem; }
.bg-surface { background-color:var(--color-surface,#fff); }
.border-1 { border-width:1px; }
.border-blue-500 { border-color:var(--color-blue-500,#3b82f6); }
.border-slate-200 { border-color:var(--color-slate-200,#e2e8f0); }
.col-span-2 { grid-column:span 2/span 2; }
.col-span-3 { grid-column:span 3/span 3; }
.col-span-4 { grid-column:span 4/span 4; }
.fill-black\/20 { fill:color-mix(in srgb,#000 20%,transparent); }
.flex-nowrap { flex-wrap:nowrap; }
.grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid-flow-row { grid-auto-flow:row; }
.h-auto { height:auto; }
.leading-5 { line-height:1.25rem; }
.leading-6 { line-height:1.5rem; }
.list-disc { list-style-type:disc; }
.list-reset { list-style:none;padding:0;margin:0; }
.m-0 { margin:0; }
.max-w-\[25\%\] { max-width:25%; }
.max-w-prose { max-width:65ch; }
.me-0 { margin-inline-end:0; }
.min-w-16 { min-width:4rem; }
.min-w-9\.5 { min-width:2.375rem; }
.ml-4 { margin-left:1rem; }
.mr-2 { margin-right:0.5rem; }
.mr-4 { margin-right:1rem; }
.object-center { object-position:center; }
.object-fit { object-fit:cover; }
.p-8 { padding:2rem; }
.pb-12 { padding-bottom:3rem; }
.pe-2 { padding-inline-end:0.5rem; }
.pr-4 { padding-right:1rem; }
.pt-8 { padding-top:2rem; }
.px-0 { padding-left:0;padding-right:0; }
.px-8 { padding-left:2rem;padding-right:2rem; }
.py-8 { padding-top:2rem;padding-bottom:2rem; }
.rounded-3xl { border-radius:1.5rem; }
.rounded-e-none { border-start-end-radius:0;border-end-end-radius:0; }
.rounded-none { border-radius:0; }
.self-center { align-self:center; }
.shadow-none { box-shadow:none; }
.stroke-current { stroke:currentColor; }
.stroke-white\/75 { stroke:color-mix(in srgb,#fff 75%,transparent); }
.table-cell { display:table-cell; }
.table-row { display:table-row; }
.text-black { color:#000; }
.text-fg\/30 { color:color-mix(in srgb,var(--color-fg) 30%,transparent); }
.text-grey { color:var(--color-slate-500,#64748b); }
.text-inherit { color:inherit; }
.text-on-primary { color:var(--color-on-primary,#fff); }
.text-slate-400 { color:var(--color-slate-400,#94a3b8); }
.w-1\/2 { width:50%; }
.w-\[480px\] { width:480px; }

/* ------------------------------------------------------------------
   2. Per breekpunt — hier zit het meeste van de mobiele ellende
   ------------------------------------------------------------------ */
@media (min-width: 40rem) {
    .sm\:col-span-2 { grid-column:span 2/span 2; }
    .sm\:col-span-6 { grid-column:span 6/span 6; }
    .sm\:gap-8 { gap:2rem; }
    .sm\:grid-cols-8 { grid-template-columns:repeat(8,minmax(0,1fr)); }
    .sm\:ml-2 { margin-left:0.5rem; }
    .sm\:mt-0 { margin-top:0; }
    .sm\:order-2 { order:2; }
    .sm\:px-6 { padding-left:1.5rem;padding-right:1.5rem; }
    .sm\:w-1\/2 { width:50%; }
}
@media (min-width: 48rem) {
    .md\:grid-cols-1 { grid-template-columns:repeat(1,minmax(0,1fr)); }
    .md\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .md\:h-24 { height:6rem; }
    .md\:mt-5 { margin-top:1.25rem; }
    .md\:order-3 { order:3; }
    .md\:visible { visibility:visible; }
    .md\:w-24 { width:6rem; }
    .md\:w-\[640px\] { width:640px; }
}
@media (min-width: 64rem) {
    .lg\:text-4xl { font-size:2.25rem;line-height:2.5rem; }
    .lg\:col-span-2 { grid-column:span 2/span 2; }
    .lg\:col-span-6 { grid-column:span 6/span 6; }
    .lg\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .lg\:grid-cols-8 { grid-template-columns:repeat(8,minmax(0,1fr)); }
    .lg\:mr-4 { margin-right:1rem; }
}
@media (min-width: 80rem) {
    .xl\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width: 96rem) {
    .2xl\:w-96 { width:24rem; }
}


/* ------------------------------------------------------------------
   3. Toestandsvarianten en losse gevallen

   Deze schrijf ik met de hand: ze hangen aan een toestand (zweven, focus,
   ongeldig, geopend) en die kan een generator niet uit de naam afleiden.
   ------------------------------------------------------------------ */

/* Zweven */
.hover\:text-black:hover { color: #000; }
.hover\:text-gray-600:hover { color: var(--color-gray-600, #4b5563); }
.hover\:text-slate-800:hover { color: var(--color-slate-800, #1e293b); }
.hover\:opacity-100:hover { opacity: 1; }
.hover\:border-primary:hover { border-color: var(--color-primary); }

/* Toetsenbordfocus — dit is de "sla over naar de inhoud"-link. Zonder deze
   regels blijft die link onzichtbaar voor wie met Tab navigeert. */
.focus\:absolute:focus { position: absolute; }
.focus\:z-30:focus { z-index: 30; }
.focus\:z-40:focus { z-index: 40; }
.focus\:text-gray-600:focus { color: var(--color-gray-600, #4b5563); }
.focus\:not-sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Ongeldig ingevuld veld */
.invalid\:ring-2:invalid { box-shadow: 0 0 0 2px var(--tw-ring-color, currentColor); }
.invalid\:ring-red-500:invalid { --tw-ring-color: var(--color-red-500, #ef4444); }

/* Uitklappers (<details>) */
.open\:flex[open] { display: flex; }

/* Stipjes vóór een voorraadmelding: groen = op voorraad, rood = niet. */
.before\:bg-green-500::before { background-color: var(--color-green-500, #22c55e); }
.before\:bg-red-500::before { background-color: var(--color-red-500, #ef4444); }
.before\:rounded-full::before { border-radius: 9999px; }
.before\:shrink-0::before { flex-shrink: 0; }
.before\:h-3::before { height: .75rem; }
.before\:w-3::before { width: .75rem; }

/* Laatste in een rij */
.last\:mb-6:last-child { margin-bottom: 1.5rem; }
.last\:mr-0:last-child { margin-right: 0; }

/* Wie beweging heeft uitgezet, krijgt geen overgangen. Dat is een
   toegankelijkheidseis, geen smaakkwestie. */
@media (prefers-reduced-motion: reduce) {
    .motion-reduce\:duration-0 { transition-duration: 0s; animation-duration: 0s; }
}

/* Rechts-naar-links schrift */
[dir="rtl"] .rtl\:-rotate-180 { transform: rotate(-180deg); }

/* Alleen-voor-schermlezers vanaf tablet */
@media (min-width: 48rem) {
    .md\:sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }
    .md\:visible { visibility: visible; }
}

/* Kleinere lopende tekst binnen een prose-blok */
.prose-sm { font-size: .875rem; line-height: 1.6; }