/* Productkaarten — losse stylesheet zodat shop en admin live-voorbeeld
   exact dezelfde kaartvormen tonen. */

/* ─── Product Cards ─────────────────────────────────────────────────────── */
.product-card {
    position: relative;
    overflow: hidden;                    /* hoeken knippen afbeelding/footer uniform */
    border: none;
    /* --card-surface is het oppervlak van de kaart. De overlay-stijl zet daar
       een foto-gradient in (via --card-surface) zodat de randlaag hieronder
       niet overschreven wordt. */
    --card-surface: var(--card-bg);
    /* Randkleur: eigen admin-keuze (--card-border-color) of anders een mix van
       merk- en kaartkleur, zodat de rand ook op een lichte kaart zichtbaar is. */
    --card-border-mix: color-mix(in srgb, var(--brand) 85%, var(--card-bg));
    --card-border-color: var(--card-border-mix);
    /* Randdikte in px, gekozen in Instellingen; 0 = geen rand. */
    --card-border-width: 3px;
    outline: var(--card-border-width, 3px) solid var(--card-border-color);
    outline-offset: calc(-1 * var(--card-border-width, 3px));
    background: var(--card-surface);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    border-radius: var(--card-radius, var(--shape-sm));  /* 'default': radius via --card-radius (0-40px) */
    transition: transform var(--duration-medium) var(--motion-standard),
                box-shadow var(--duration-medium) var(--motion-standard);
}
/* Binnenlaag: houdt de inhoud bij elkaar. Bij het parallellogram vult ze het
   gat tussen buiten- en binnenpolygoon, zodat afbeelding en footer de rand
   nooit overschrijven. */
.product-card > .product-card-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* ── Afbeelding & placeholder: echte beeldverhouding ── */
.product-card .card-img-top {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform var(--duration-medium) var(--motion-standard);
}
.product-card .img-placeholder {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--brand-rgb),0.16) 0%, rgba(var(--brand-rgb),0.06) 100%);
}
.product-card.img-square .card-img-top,
.product-card.img-square .img-placeholder {
    aspect-ratio: 1 / 1;                 /* Vierkant (1:1) */
}
.product-card.img-portrait .card-img-top,
.product-card.img-portrait .img-placeholder {
    aspect-ratio: 3 / 4;                 /* Portret (3:4) */
}
.product-card.img-landscape .card-img-top,
.product-card.img-landscape .img-placeholder {
    aspect-ratio: 4 / 3;                 /* Landschap (4:3) */
}

.product-card .card-body {
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}
.product-card .card-footer {
    padding: 0 var(--sp-4) var(--sp-4);
    display: flex;
    gap: var(--sp-2);
    border-top: none;
    background: transparent;
}

/* ── Kaartvormen ── */
.product-card.shape-pill    { border-radius: var(--shape-full); }

/* 'Rand tonen' uit: geen outline, en bij het parallellogram ook geen ring-laag */
.product-card.no-border { outline: none; }

/* ── Compact: kleiner, beeld op vaste hoogte ── */
.product-card.style-compact .card-img-top,
.product-card.style-compact .img-placeholder {
    aspect-ratio: auto;
    height: 150px;
}
.product-card.style-compact .card-body  { padding: var(--sp-3); }
.product-card.style-compact .card-title { font-size: 0.875rem; }
.product-card.style-compact .card-footer { padding: 0 var(--sp-3) var(--sp-3); }

/* ── Overlay: beeld vult de hele kaart, tekst op scrim ── */
.product-card.style-overlay {
    min-height: 340px;
}
.product-card.style-overlay.img-portrait  { min-height: 430px; }
.product-card.style-overlay.img-landscape { min-height: 300px; }
.product-card.style-overlay .card-img-top,
.product-card.style-overlay .img-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    z-index: 1;
}
.product-card.style-overlay:hover .card-img-top {
    transform: scale(1.05);
}
.product-card.style-overlay > .product-card-inner::after {   /* scrim voor leesbaarheid */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to top,
        rgba(0,0,0,0.62) 0%,
        rgba(0,0,0,0.34) 42%,
        rgba(0,0,0,0.04) 74%);
}
.product-card.style-overlay .card-body {
    position: relative;
    z-index: 3;
    margin-top: auto;
    padding: var(--sp-8) var(--sp-4) var(--sp-3);
    color: #fff;
}
.product-card.style-overlay .card-title { color: #fff; margin-bottom: var(--sp-1); }
.product-card.style-overlay .card-text {
    color: rgba(255,255,255,0.82);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card.style-overlay .badge { background: rgba(255,255,255,0.92) !important; color: #1D1B20 !important; }
.product-card.style-overlay .fw-bold     { color: #fff; }
.product-card.style-overlay .text-muted  { color: rgba(255,255,255,0.72) !important; }
.product-card.style-overlay .text-danger { color: #ff8a8a !important; }
.product-card.style-overlay .card-footer {
    position: relative;
    z-index: 3;
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.product-card.style-overlay .btn {
    background: rgba(255,255,255,0.92);
    color: #1D1B20;
    border: none;
}
.product-card.style-overlay .btn:hover { background: #fff; }

/* ── Minimal: zwevend beeld zonder kaart-bg ── */
.product-card.style-minimal {
    background: transparent;
    box-shadow: none;
    overflow: visible;                   /* beeld heeft eigen radius */
    border-radius: 0;
    outline: none;
}
.product-card.style-minimal:hover { transform: none; box-shadow: none; }
.product-card.style-minimal .card-img-top,
.product-card.style-minimal .img-placeholder {
    border-radius: var(--shape-md);
}
.product-card.style-minimal.shape-pill .card-img-top,
.product-card.style-minimal.shape-pill .img-placeholder {
    border-radius: var(--shape-full);
}
.product-card.style-minimal .card-body  { padding: var(--sp-2) 0; }
.product-card.style-minimal .card-footer { padding: var(--sp-3) 0 0; }

/* ── Pill: capsule-frames; inhoud blijft uit de bogen zodat niets wordt afgesneden ── */
.product-card.shape-pill .card-body  { padding: var(--sp-4) var(--sp-10) 0; }
.product-card.shape-pill .card-footer { padding: var(--sp-3) var(--sp-10) var(--sp-10); }
.product-card.shape-pill.style-overlay.img-portrait  .card-body { padding: 96px var(--sp-10) var(--sp-2); }
.product-card.shape-pill.style-overlay.img-square    .card-body { padding: 80px var(--sp-10) var(--sp-2); }
.product-card.shape-pill.style-overlay.img-landscape .card-body { padding: 64px var(--sp-10) var(--sp-2); }
.product-card.shape-pill.style-overlay .card-footer  { padding: var(--sp-2) var(--sp-10) calc(var(--sp-10) + var(--sp-8)); }
.product-card.style-standard.shape-pill .card-img-top,
.product-card.style-standard.shape-pill .img-placeholder {
    border-radius: var(--shape-full) var(--shape-full) 0 0;
}
.product-card.style-compact.shape-pill .card-img-top,
.product-card.style-compact.shape-pill .img-placeholder {
    border-radius: 0;
}
.product-card.style-minimal.shape-pill .card-body  { padding: var(--sp-2) 0; }
.product-card.style-minimal.shape-pill .card-footer { padding: var(--sp-3) 0 0; }

/* ── Parallelogram ───────────────────────────────────────────────────────────
   clip-path knipt een border-radius én een outline weg, dus de vorm en de rand
   worden allebei als polygoon getekend:
     • --pg-shape        de kaartvorm in --card-border-color
     • --pg-shape-inner  het oppervlak (--card-surface) voor de binnenlaag. De
       kaart heeft padding --pg-w, dus het gat tussen beide polygonen is de
       rand. De binnenlaag zit in de padding, dus geen enkel kind raakt de rand.

   Elke hoek is een kwartcirkel met middelpunt op (X+r, Y+r) ten opzichte van
   de scherpe hoek (X, Y). Op die cirkel liggen 30° en 60°. Omdat sin(30°)
   gelijk is aan 1 - cos(30°) wisselen de twee tussenpunten hun coëfficiënten:
       (0, r), (A*r, B*r), (B*r, D*r), (r, 0)
   met A = 1 - cos(30°) = 0.134 en B = sin(30°) = 0.5. D staat in de y-positie
   en is normaal gelijk aan A; de scary-vormen zetten D op 0.866, waardoor het
   tussenpunt naar buiten klapt en de hoek naar binnen wordt geschept. Bij
   r = 0 vallen de tussenpunten samen en krijg je een volledig scherpe vierhoek.

   De vier vormen delen één polygoon; alleen --pg-d (en de richting) verschilt. */
.product-card.shape-parallelogram,
.product-card.shape-parallelogram-left,
.product-card.shape-parallelogram-scary,
.product-card.shape-parallelogram-scary-left {
    --pg-cut: 24px;                       /* schuine snede blijft op elke kaartbreedte gelijk */
    --pg-r: var(--card-radius, 12px);     /* hoekradius volgt de afronding-slider */
    --pg-a: 0.134;                        /* 1 - cos(30°), x-positie */
    --pg-b: 0.5;                          /* sin(30°) */
    --pg-d: var(--pg-a);                  /* y-positie; scary zet dit op 0.866 */
    --pg-w: var(--card-border-width, 3px); /* randdikte uit Instellingen; op de
                                             45°-snede blijft zo ongeveer
                                             0.7x over, dus zichtbaar blijven */
    --pg-ri: max(0px, calc(var(--pg-r) - var(--pg-w)));
    /* Ruimte om de schuine hoek heen, aan de kant waar de ONDERSTE snede 'm
       ook echt raakt (zie --pg-pad-left/-right hieronder): exact zo diep als
       de snede zelf reikt (--pg-cut + --pg-r, zie --pg-shape), geen extra
       buffer — anders duwt het de knop/prijs zichtbaar te ver naar de
       andere kant. Schaalt mee met de afrondingsslider. */
    --pg-clear: calc(var(--pg-cut) + var(--pg-r));
    padding: var(--pg-w);                 /* dit gat is de rand */
    border-radius: 0;
    outline: none;
    background: var(--card-border-color);
    clip-path: var(--pg-shape);
    filter: drop-shadow(0 6px 16px rgba(29,27,32,0.10));
}
/* Scary: de tussenpunten in de y-richting klappen naar buiten, waardoor de hoek
   naar binnen schept. Bewust, dus een eigen vorm en geen aparte hoekberekening. */
.product-card.shape-parallelogram-scary,
.product-card.shape-parallelogram-scary-left {
    --pg-d: 0.866;
}
/* Binnenlaag: het oppervlak van de kaart, exact de buitenvorm zonder de rand */
.product-card.shape-parallelogram > .product-card-inner,
.product-card.shape-parallelogram-left > .product-card-inner,
.product-card.shape-parallelogram-scary > .product-card-inner,
.product-card.shape-parallelogram-scary-left > .product-card-inner {
    background: var(--card-surface);
    clip-path: var(--pg-shape-inner);
}
/* Snede linksboven en rechtsonder: onderaan zit de snede RECHTS, dus daar
   komt de ruimte; links kan tegen de rand aanleunen zoals een gewone kaart. */
.product-card.shape-parallelogram,
.product-card.shape-parallelogram-scary {
    --pg-pad-left: var(--sp-4);
    --pg-pad-right: var(--pg-clear);
    --pg-shape: polygon(
        var(--pg-cut) var(--pg-r),
        calc(var(--pg-cut) + var(--pg-r) * var(--pg-a)) calc(var(--pg-r) * var(--pg-b)),
        calc(var(--pg-cut) + var(--pg-r) * var(--pg-b)) calc(var(--pg-r) * var(--pg-d)),
        calc(var(--pg-cut) + var(--pg-r)) 0,
        calc(100% - var(--pg-r) * var(--pg-b)) calc(var(--pg-r) * var(--pg-d)),
        calc(100% - var(--pg-r) * var(--pg-a)) calc(var(--pg-r) * var(--pg-b)),
        100% var(--pg-r),
        calc(100% - var(--pg-cut) - var(--pg-r) * var(--pg-a)) calc(100% - var(--pg-r) * var(--pg-b)),
        calc(100% - var(--pg-cut) - var(--pg-r) * var(--pg-b)) calc(100% - var(--pg-r) * var(--pg-d)),
        calc(100% - var(--pg-cut) - var(--pg-r)) 100%,
        calc(var(--pg-r) * var(--pg-b)) calc(100% - var(--pg-r) * var(--pg-d)),
        calc(var(--pg-r) * var(--pg-a)) calc(100% - var(--pg-r) * var(--pg-b)),
        0 calc(100% - var(--pg-r))
    );
    --pg-shape-inner: polygon(
        var(--pg-cut) var(--pg-ri),
        calc(var(--pg-cut) + var(--pg-ri) * var(--pg-a)) calc(var(--pg-ri) * var(--pg-b)),
        calc(var(--pg-cut) + var(--pg-ri) * var(--pg-b)) calc(var(--pg-ri) * var(--pg-d)),
        calc(var(--pg-cut) + var(--pg-ri)) 0,
        calc(100% - var(--pg-ri) * var(--pg-b)) calc(var(--pg-ri) * var(--pg-d)),
        calc(100% - var(--pg-ri) * var(--pg-a)) calc(var(--pg-ri) * var(--pg-b)),
        100% var(--pg-ri),
        calc(100% - var(--pg-cut) - var(--pg-ri) * var(--pg-a)) calc(100% - var(--pg-ri) * var(--pg-b)),
        calc(100% - var(--pg-cut) - var(--pg-ri) * var(--pg-b)) calc(100% - var(--pg-ri) * var(--pg-d)),
        calc(100% - var(--pg-cut) - var(--pg-ri)) 100%,
        calc(var(--pg-ri) * var(--pg-b)) calc(100% - var(--pg-ri) * var(--pg-d)),
        calc(var(--pg-ri) * var(--pg-a)) calc(100% - var(--pg-ri) * var(--pg-b)),
        0 calc(100% - var(--pg-ri))
    );
}
/* Snede rechtsboven en linksonder: hier zit de ONDERSTE snede LINKS, dus de
   ruimte komt links — rechts leunt tegen de rand aan. Spiegelbeeld van hierboven. */
.product-card.shape-parallelogram-left,
.product-card.shape-parallelogram-scary-left {
    --pg-pad-left: var(--pg-clear);
    --pg-pad-right: var(--sp-4);
    --pg-shape: polygon(
        calc(100% - var(--pg-cut)) var(--pg-r),
        calc(100% - var(--pg-cut) - var(--pg-r) * var(--pg-a)) calc(var(--pg-r) * var(--pg-b)),
        calc(100% - var(--pg-cut) - var(--pg-r) * var(--pg-b)) calc(var(--pg-r) * var(--pg-d)),
        calc(100% - var(--pg-cut) - var(--pg-r)) 0,
        calc(var(--pg-r) * var(--pg-b)) calc(var(--pg-r) * var(--pg-d)),
        calc(var(--pg-r) * var(--pg-a)) calc(var(--pg-r) * var(--pg-b)),
        0 var(--pg-r),
        calc(var(--pg-cut) + var(--pg-r) * var(--pg-a)) calc(100% - var(--pg-r) * var(--pg-b)),
        calc(var(--pg-cut) + var(--pg-r) * var(--pg-b)) calc(100% - var(--pg-r) * var(--pg-d)),
        calc(var(--pg-cut) + var(--pg-r)) 100%,
        calc(100% - var(--pg-r) * var(--pg-b)) calc(100% - var(--pg-r) * var(--pg-d)),
        calc(100% - var(--pg-r) * var(--pg-a)) calc(100% - var(--pg-r) * var(--pg-b)),
        100% calc(100% - var(--pg-r))
    );
    --pg-shape-inner: polygon(
        calc(100% - var(--pg-cut)) var(--pg-ri),
        calc(100% - var(--pg-cut) - var(--pg-ri) * var(--pg-a)) calc(var(--pg-ri) * var(--pg-b)),
        calc(100% - var(--pg-cut) - var(--pg-ri) * var(--pg-b)) calc(var(--pg-ri) * var(--pg-d)),
        calc(100% - var(--pg-cut) - var(--pg-ri)) 0,
        calc(var(--pg-ri) * var(--pg-b)) calc(var(--pg-ri) * var(--pg-d)),
        calc(var(--pg-ri) * var(--pg-a)) calc(var(--pg-ri) * var(--pg-b)),
        0 var(--pg-ri),
        calc(var(--pg-cut) + var(--pg-ri) * var(--pg-a)) calc(100% - var(--pg-ri) * var(--pg-b)),
        calc(var(--pg-cut) + var(--pg-ri) * var(--pg-b)) calc(100% - var(--pg-ri) * var(--pg-d)),
        calc(var(--pg-cut) + var(--pg-ri)) 100%,
        calc(100% - var(--pg-ri) * var(--pg-b)) calc(100% - var(--pg-ri) * var(--pg-d)),
        calc(100% - var(--pg-ri) * var(--pg-a)) calc(100% - var(--pg-ri) * var(--pg-b)),
        100% calc(100% - var(--pg-ri))
    );
}
/* Zonder rand: de binnenlaag vult de hele kaart, dus geen gat en geen ring */
.product-card.shape-parallelogram.no-border,
.product-card.shape-parallelogram-left.no-border,
.product-card.shape-parallelogram-scary.no-border,
.product-card.shape-parallelogram-scary-left.no-border {
    padding: 0;
    background: var(--card-surface);
}
.product-card.shape-parallelogram.no-border > .product-card-inner,
.product-card.shape-parallelogram-left.no-border > .product-card-inner,
.product-card.shape-parallelogram-scary.no-border > .product-card-inner,
.product-card.shape-parallelogram-scary-left.no-border > .product-card-inner {
    clip-path: none;
}
/* Basis: tegen beide kanten aanleunen zoals een normale kaart. Het 'volgen
   van de snede' zelf komt hieronder via shape-outside op .product-card-text —
   een vlakke marge alleen zou altijd verticaal blijven ogen. */
.product-card.shape-parallelogram .card-body,
.product-card.shape-parallelogram-left .card-body,
.product-card.shape-parallelogram-scary .card-body,
.product-card.shape-parallelogram-scary-left .card-body {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
}
/* Titel/omschrijving volgen de snede: een onzichtbare gefloate driehoek
   (shape-outside) duwt de regels schuin opzij, zodat de inspringing meeloopt
   met de helling van de rand i.p.v. een platte marge te zijn. Dit werkt
   alleen in een normale (niet-flex) context, vandaar de aparte
   .product-card-text om titel+omschrijving heen; de footer hieronder is wél
   flex (voor de knoppen naast elkaar), dus die houdt de berekende vaste
   marge.

   Allebei de varianten floaten LINKS: bij links-uitgelijnde tekst (titel,
   omschrijving) is de LINKERkant van elke regel strak uitgelijnd en de
   RECHTERkant toch al rafelig door het natuurlijke regelafbreken — een vorm
   die de RECHTERkant zou bijsturen (float:right) gaat dus volledig schuil in
   die bestaande rafeligheid en is onzichtbaar. Vandaar dat de 'rechtse' snede
   (shape-parallelogram-left/-scary-left) hier als SPIEGELING IN DE TIJD wordt
   getoond: niet smal-naar-breed maar breed-naar-smal in omgekeerde volgorde
   (breed ONDERaan i.p.v. bovenaan) — zichtbaar op dezelfde uitgelijnde kant.

   De hoogte van de gefloate driehoek bepaalt dus ook hoe ver de inspringing
   reikt: voor 'links' (smal boven, breed onder) kort gehouden tot ongeveer
   de titelregel, zodat de breedste inspringing niet doorloopt tot in de
   omschrijving eronder. */
.product-card-text { overflow: hidden; }
.product-card.shape-parallelogram .product-card-text::before,
.product-card.shape-parallelogram-scary .product-card-text::before {
    content: "";
    float: left;
    width: var(--pg-cut);
    height: 2.2em;
    shape-margin: 4px;
    shape-outside: polygon(0 0, 100% 0, 0 100%);
}
.product-card.shape-parallelogram-left .product-card-text::before,
.product-card.shape-parallelogram-scary-left .product-card-text::before {
    content: "";
    float: left;
    width: var(--pg-cut);
    height: 1.4em;
    shape-margin: 4px;
    shape-outside: polygon(0 100%, 100% 100%, 0 0);
}
/* Overlay (body ligt op de foto, onderaan) en minimal (geen kaartvorm, dus
   geen rand om te volgen) hebben geen bovenste snede bij de tekst — die
   gebruiken verderop hun eigen regeling, dus hier uitgeschakeld. */
.product-card.style-overlay .product-card-text::before,
.product-card.style-minimal .product-card-text::before {
    content: none;
}
/* De footer zit wél in de hoek van de ONDERSTE snede: die kant krijgt ruimte
   (--pg-pad-left/-right, zie hierboven — spiegelt mee met de vorm en schaalt
   mee met de afrondingsslider), de andere kant leunt gewoon tegenaan. Geen
   overbodige symmetrische marge meer die de knop in het midden laat zweven. */
.product-card.shape-parallelogram .card-footer,
.product-card.shape-parallelogram-left .card-footer,
.product-card.shape-parallelogram-scary .card-footer,
.product-card.shape-parallelogram-scary-left .card-footer {
    padding-left: var(--pg-pad-left);
    padding-right: var(--pg-pad-right);
    padding-bottom: calc(var(--sp-4) + var(--pg-cut));
}
/* De prijsregel (.mt-auto) wordt door de flex-kolom onderin .card-body
   geduwd, dus zit in de praktijk net zo dicht bij de ONDERSTE hoek als de
   footer erna — die moet dus dezelfde kant-afhankelijke ruimte krijgen,
   niet de platte sp-4 hierboven (die was alleen bedoeld voor titel/tekst
   bovenin, vlak onder de afbeelding). Via margin (niet padding): .card-body
   heeft zelf al sp-4 padding, dus dit telt het VERSCHIL daar bovenop op —
   0 als --pg-pad-* toch al sp-4 is. */
.product-card.shape-parallelogram .card-body > .mt-auto,
.product-card.shape-parallelogram-left .card-body > .mt-auto,
.product-card.shape-parallelogram-scary .card-body > .mt-auto,
.product-card.shape-parallelogram-scary-left .card-body > .mt-auto {
    margin-left: calc(var(--pg-pad-left) - var(--sp-4));
    margin-right: calc(var(--pg-pad-right) - var(--sp-4));
}
/* Overlay: body én footer liggen allebei onderaan, op de foto — dus de body
   volgt hier dezelfde kant als de footer hierboven, niet de 'hug both sides'
   regel van een gewone kaart. */
.product-card.style-overlay.shape-parallelogram .card-body,
.product-card.style-overlay.shape-parallelogram-left .card-body,
.product-card.style-overlay.shape-parallelogram-scary .card-body,
.product-card.style-overlay.shape-parallelogram-scary-left .card-body {
    padding-top: calc(var(--sp-8) + var(--pg-cut));
    padding-left: var(--pg-pad-left);
    padding-right: var(--pg-pad-right);
}
/* Minimal zweeft: geen kaart, dus ook geen schuine snede of zij-inset */
.product-card.style-minimal > .product-card-inner { background: transparent; }
.product-card.style-minimal.shape-parallelogram,
.product-card.style-minimal.shape-parallelogram-left,
.product-card.style-minimal.shape-parallelogram-scary,
.product-card.style-minimal.shape-parallelogram-scary-left {
    clip-path: none;
    filter: none;
    padding: 0;
    background: transparent;
}
.product-card.style-minimal.shape-parallelogram > .product-card-inner,
.product-card.style-minimal.shape-parallelogram-left > .product-card-inner,
.product-card.style-minimal.shape-parallelogram-scary > .product-card-inner,
.product-card.style-minimal.shape-parallelogram-scary-left > .product-card-inner {
    clip-path: none;
}
.product-card.style-minimal.shape-parallelogram .card-body,
.product-card.style-minimal.shape-parallelogram-left .card-body,
.product-card.style-minimal.shape-parallelogram-scary .card-body,
.product-card.style-minimal.shape-parallelogram-scary-left .card-body {
    padding-left: 0;
    padding-right: 0;
}

.product-card .card-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #666;
}

/* Shop grid — intrinsic */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--sp-6);
}