.totemo-content{max-width:1200px}
.woocommerce ul.products{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;list-style:none;padding:0;margin:0}
@media(min-width:768px){.woocommerce ul.products{grid-template-columns:repeat(4,1fr)}}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;background:hsl(var(--card));border:1px solid hsl(var(--border));padding:1rem;text-align:left}
.woocommerce ul.products li.product img{aspect-ratio:1;object-fit:contain;background:#fff;width:100%}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:Nunito,sans-serif;font-weight:800;font-size:.95rem;color:hsl(var(--foreground))}
.woocommerce .price{color:hsl(var(--primary))!important;font-weight:800;font-size:1.1rem}
.woocommerce a.button,.woocommerce button.button,.woocommerce .button.alt{background:hsl(var(--primary))!important;color:hsl(var(--primary-foreground))!important;border-radius:0;font-weight:700;padding:.75rem 1.25rem}
.woocommerce div.product .product_title{font-family:Nunito,sans-serif;font-weight:900;font-size:2rem}
.totemo-specs{font-size:.9rem;margin:1rem 0}.totemo-specs div{display:flex;gap:.5rem}.totemo-specs dt{font-weight:600}
.totemo-vat{font-size:.8rem;color:hsl(var(--muted-foreground))}
.totemo-info{background:hsl(var(--card));border:1px solid hsl(var(--border));padding:1rem 1rem 1rem 2rem;font-size:.9rem;margin:1rem 0}
.totemo-info li{margin:.4rem 0}.totemo-info a{color:hsl(var(--primary));text-decoration:underline}

/* Fix: WooCommerce zet op winkelpagina's alle afbeeldingen op height:auto,
   wat het logo gigantisch maakt. Deze regel wint altijd. */
img.totemo-logo{height:3.5rem!important;width:auto!important}
@media(min-width:768px){img.totemo-logo{height:4rem!important}}