/* Catalogusindeling overeenkomstig de bestaande Odoo-webshop. */
#content.winkel_overzicht{padding:28px 0 70px;background:#fff}
.winkel_overzicht>.maxw1{max-width:1140px;width:calc(100% - 40px)}
@media(min-width:1400px){.winkel_overzicht>.maxw1{max-width:1320px}}
.winkel_overzicht .page_content_block,.winkel_overzicht .page_content_left{padding:0;margin:0;width:100%}
.winkel_catalogus{clear:both;color:#212529;font-family:Arial,Helvetica,sans-serif}
.winkel_titel{text-align:center;font:400 24px/1.3 Arial,Helvetica,sans-serif;margin:0 0 24px}
.winkel_titel button{font:inherit;background:none;border:0;color:inherit;cursor:pointer;padding:0 12px 5px}
.winkel_categorieen{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin-bottom:34px}
.winkel_categorie{display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 5px 12px;border:0;border-bottom:2px solid transparent;background:#fff;color:#343a40;font:400 15px/1.25 Arial,Helvetica,sans-serif;cursor:pointer;min-width:0}
.winkel_categorie img{display:block;width:80px;height:80px;object-fit:contain}
.winkel_categorie span{max-width:150px;min-height:38px}
.winkel_categorie:hover,.winkel_categorie[aria-pressed=true]{border-bottom-color:#f37120;color:#d45512}
.winkel_catalogus button:focus-visible,.winkel_catalogus a:focus-visible{outline:3px solid #cc4e08;outline-offset:4px}
.winkel_raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;clear:both}
.winkel_raster .winkel_tegel{float:none;width:auto;padding:0;min-width:0}
.winkel_raster .winkel_tegel[hidden]{display:none}
.winkel_kaart{height:100%;display:flex;flex-direction:column;border:1px solid #f6f6f6;border-radius:10px;background:#fff;box-shadow:0 1px 9px #00000009;overflow:hidden}
.winkel_kaart_beeld{position:relative;display:block;aspect-ratio:1;overflow:hidden}
.winkel_kaart_beeld img{width:100%;height:100%;object-fit:cover;display:block}
.winkel_kaart_beeld .winkel_kaart_hover{position:absolute;inset:0;opacity:0}
/* Transparante productfoto's moeten wisselen, niet over elkaar heen vervagen. */
@media(hover:hover){.winkel_kaart_beeld:hover .winkel_kaart_hover{opacity:1}.winkel_kaart_beeld:has(.winkel_kaart_hover):hover>img:first-child{visibility:hidden}}
.winkel_lint{position:absolute;right:-38px;top:23px;width:160px;text-align:center;transform:rotate(45deg);background:#e53935;color:#fff;font:400 14px/32px Arial,Helvetica,sans-serif}
.winkel_kaart_info{padding:16px;display:flex;flex-direction:column;flex:1;gap:18px}
.winkel_kaart_info h2{font:500 18px/1.35 Arial,Helvetica,sans-serif;margin:0}
.winkel_kaart_info h2 a{color:#212529}
.winkel_kaart_voet{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.winkel_kaart_voet strong{font:bold 16px/1.3 Arial,Helvetica,sans-serif;white-space:nowrap}
.winkel_toevoegen{background:#f37120;color:#fff;border:0;border-radius:5px;padding:10px;cursor:pointer;font:14px/1.3 Arial,Helvetica,sans-serif}
.winkel_toevoegen span{display:none}
@media(min-width:1500px){.winkel_toevoegen span{display:inline;margin-left:7px}}
@media(max-width:991px){.winkel_raster{grid-template-columns:repeat(2,minmax(0,1fr))}.winkel_categorieen{display:flex;overflow-x:auto;gap:12px;padding-bottom:8px}.winkel_categorie{flex:0 0 130px}}
@media(max-width:575px){.winkel_overzicht>.maxw1{width:calc(100% - 24px)}.winkel_raster{gap:10px}.winkel_kaart_info{padding:10px;gap:12px}.winkel_kaart_info h2{font-size:14px}.winkel_kaart_voet strong{font-size:14px}.winkel_toevoegen{padding:8px}.winkel_lint{font-size:11px;line-height:24px;right:-44px;top:17px}.winkel_titel{font-size:22px}.winkel_categorieen{margin-bottom:20px}}