/* =====================================================================
   Hobbydeals — wat de Go-winkel nodig heeft bovenop shop.css
   shop.css is letterlijk de stylesheet van de Laravel-winkel. Hier staat
   alleen wat Laravel niet had (taalkeuze, filters, uitvoeringen, de
   kennisgeving over de wettelijke garantie) en wat Laravel met een
   style-attribuut deed: de CSP van de Go-app (default-src 'self') staat
   geen inline stijl toe, dus dat zijn hier classes.
   ===================================================================== */

/* --- Footer: de taalkeuze ---------------------------------------------------- */
/* Laravel had geen taalkeuze. Hij staat in de footer, onder de winkelgegevens,
   zodat de kop gelijk blijft aan die van Laravel. */
.footer-language {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: var(--s-3);
    font-size: var(--step--1);
}
.footer-language a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--purple);
    text-decoration: underline;
}
.footer-language [aria-current] {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--label);
    font-weight: 500;
}

/* --- Lijsten die in Laravel losse elementen waren ---------------------- */
/* Een rij kaarten of pillen is hier een lijst (een schermlezer telt de
   items); de opmaak blijft die van shop.css. */
ul.product-grid,
.pagination ul,
.address-list,
.variant-list,
.variant__options,
.line-options {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.trust-row { padding: 0; margin-bottom: 0; list-style: none; }
ul.trust-row li { display: contents; }

/* --- Paginering --------------------------------------------------------- */
.pagination ul { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination li[aria-hidden] {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    color: var(--muted);
}
/* De pijlen van Laravel; de tekst na de schuine streep is wat een
   schermlezer voorleest: niets. */
.page[rel=prev]::before { content: "← " / ""; white-space: pre; }
.page[rel=next]::after { content: " →" / ""; white-space: pre; }
.pagination-wrap { margin-top: var(--s-4); }

/* --- Pagina's die in Laravel een style-attribuut hadden ------------------ */
/* Juridische en informatiepagina's: één smalle kolom. */
.prose { max-width: 820px; }
.prose h2 { margin-top: var(--s-5); font-size: var(--step-2); }
/* Fout- en onderhoudspagina's: gecentreerd. */
main > .status-page {
    max-width: 640px;
    padding-block: 80px;
    text-align: center;
}
.status-page .lead { margin-inline: auto; }
.status-page .actions { justify-content: center; }
/* Een formulier met alleen een knop, midden in een zin. */
.inline-form { display: inline; }

/* --- Formulieren ---------------------------------------------------------- */
/* Groepen velden: in Laravel een kop, hier een fieldset met een legend. */
.form fieldset {
    display: grid;
    gap: var(--s-3);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.form legend { padding: 0; margin-bottom: var(--s-3); }
.field-error {
    margin: -6px 0 0;
    color: var(--ruby-text);
    font-size: var(--step--1);
    font-weight: 400;
}
.form [aria-invalid=true] { border-color: var(--ruby-text); }

/* --- Collectie: zoeken en filteren ----------------------------------------- */
.listing-form { margin-top: var(--s-3); }
.panel.filter-panel { max-width: 520px; }
.filter-group legend {
    color: var(--muted);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.list-head h2.list-count { font-weight: 400; letter-spacing: 0; }

/* --- Kleurstaal ------------------------------------------------------------- */
/* In Laravel een span met de kleur als style-attribuut; hier een SVG met
   fill, met hetzelfde randje binnenin. */
svg.swatch-dot {
    flex: 0 0 18px;
    margin-right: 6px;
    vertical-align: -3px;
    background: none;
}

/* --- Productpagina: de uitvoeringen ----------------------------------------- */
.variant-overview {
    margin-top: var(--s-4);
    padding-top: var(--s-3);
    border-top: 1px solid var(--border);
}
.variant-overview h2 { font-size: var(--step-1); font-weight: 500; }
.variant-list { display: grid; gap: var(--s-2); }
.variant {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1) var(--s-3);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: #fff;
    font-size: var(--step--1);
}
.variant__options { display: grid; gap: 2px; flex: 1 1 160px; color: var(--label); }
.variant__kind { color: var(--muted); }
.variant__price { margin: 0; font-weight: 600; font-feature-settings: 'tnum'; }
.variant .stock-pill { margin: 0; }

/* --- Winkelmand --------------------------------------------------------------- */
.cart-quantity { display: grid; gap: 4px; justify-items: start; }
.cart-table .field-error { margin: 0; }
.cart-line-name { margin: 0; font-size: var(--step-1); font-weight: 400; }
.line-options { color: var(--label); font-size: var(--step--1); }
.panel.cart-prices { margin-top: var(--s-4); }
.discount-form > p,
.discount-form > form:not(.form) { margin: 0 0 var(--s-2); }

/* --- Checkout ---------------------------------------------------------------- */
.checkout-main { display: grid; gap: var(--s-4); min-width: 0; }

/* De kennisgeving over de wettelijke garantie (guarantee.go): ongewijzigd en
   op volle breedte van het paneel. */
.guarantee-notice { margin: 0; }
.guarantee-notice img {
    display: block;
    width: 100%;
    max-width: 720px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}
.guarantee-notice figcaption { margin-top: var(--s-2); }
.guarantee-notice a { color: var(--purple); text-decoration: underline; overflow-wrap: anywhere; }

/* --- Klantaccount --------------------------------------------------------------- */
.address-list {
    display: grid;
    gap: var(--s-3);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.address-card { display: grid; gap: var(--s-2); padding: var(--s-4); align-content: start; }
.address-card address { font-style: normal; color: var(--label); }
.address-card p { margin: 0; }
.panel.order-panel { padding: var(--s-4); }
.panel.order-panel + .panel.order-panel { margin-top: var(--s-3); }
.order-items-heading { margin-top: var(--s-5); }
.cart-summary address { font-style: normal; }
.cart-summary .summary-block { display: block; margin-top: var(--s-4); }

/* --- Startpagina ------------------------------------------------------------------ */
/* Laravel had twee panelen naast elkaar; het maatwerkpaneel valt weg (maatwerk zit niet in de
   eerste release), dus het voorraadpaneel neemt de hele breedte. */
.split-section > :only-child { grid-column: 1 / -1; }