/* De kant-en-klare ontwerpen: het overzicht en de productpagina.
   Los van app.css, want alleen deze twee pagina's gebruiken het. */

.productraster{display:grid;gap:var(--s2);grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.productraster{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.productraster{grid-template-columns:repeat(4,1fr)}}

.productkaart{display:block;color:var(--text);overflow:hidden;transition:border-color var(--t),transform var(--t)}
.productkaart:hover{text-decoration:none;border-color:var(--line);transform:translateY(-2px)}
.productkaart img{display:block;width:100%;height:auto;aspect-ratio:1;background:#FFFFFF}
/* Het vak om de foto. Tik je bovenaan een naam in, dan maken de foto plaats
   voor twee getekende beschermers met die naam, op hetzelfde wit. */
.productkaart__beeld{display:flex;align-items:center;justify-content:center;gap:2%;aspect-ratio:1;background:#FFFFFF}
.productkaart__beeld canvas{display:block}
.productkaart__tekst{display:flex;flex-direction:column;gap:2px;padding:var(--s1) var(--s2) var(--s2);font-size:15px}

/* De productfoto staat op wit, dus het vak ook. Het donkere vlak van de
   bestelpagina om een witte foto heen zou eruitzien als een gat. */
.bestel__doek--wit{background:#FFFFFF;border:1px solid var(--line-soft);align-items:center}
.bestel__doek--wit img{background:#FFFFFF}

.productprijs{font-size:20px;font-weight:700;margin:6px 0 10px}
.productprijs .muted{font-size:14px;font-weight:400}

/* Sfeerfoto's als rij onder de productfoto, vier naast elkaar. */
.sfeer__raster{display:grid;gap:8px;grid-template-columns:repeat(4,1fr)}
.sfeer__foto{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line-soft)}
.sfeer__foto img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;transition:transform var(--t)}
.sfeer__foto:hover img{transform:scale(1.03)}