@font-face { font-family: 'Poppins'; src: url('https://www.alternate.nl/download/b2c_nl/pic/fonts/Poppins-Regular.ttf'); }

    #PortalPagina { font-family: 'Poppins'; }
    #PortalPagina img { width: 100%; }

    #Merken, #Producten .row { padding: 10px; }
    #Merken, #Producten .row a { filter: none; border: none; }
    #Merken { background: black url('https://www.alternate.nl/download/b2c_nl/pic/themapagina/Adventskalenders/2023/kerstpatroon.png'); }
    #Merken .row { display: grid; grid-template-columns: repeat(5, 1fr); padding: 40px; }
    #Merken .row a { padding: 0; }
    .product { background: white; filter: drop-shadow(2px 4px 6px black); }

    #Producten { display: flex; justify-content: center; }
    .product a { border: 2px solid #ddd; margin: 10px; display: block; padding: 10px; position: relative; }
    .productTitle { font-size: 0.8rem; overflow: hidden; color: var(--bs-body-color); height: 2.5em; margin-top: 10px; }
    .product img { width: 90% !important; margin: 0 auto; display: block; padding: 5px; }
    .prijzen { display: flex; flex-direction: column; justify-content: flex-end; text-align: right; height: 4em; }
    .historyPrice:empty { display: none; }
    .historyPrice { color: black; text-decoration: line-through; margin: 0; }
    .actieprijs { color: #ad0109; font-size: 1.5rem !important; font-weight: 900; margin: 0; }
    
    #Categorieen { gap: 20px; }

    /* Buzz animation */
    @keyframes hvr-buzz-out {
        10%, 30%, 50%, 70%, 90% { transform: translateX(3px) rotate(2deg); }
        20%, 40%, 60%, 80%, 100% { transform: translateX(-3px) rotate(-2deg); }
    }

    .hvr-buzz-out { display: inline-block; transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
    .hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active { animation: hvr-buzz-out 0.75s linear 1; }

    /* Responsive styling */
    @media (max-width: 667px) { 
        #Merken .row { grid-template-columns: repeat(2, 1fr); padding: 20px; } 
    }
    @media (min-width: 768px) and (max-width: 1032px) { 
        #Producten .row { grid-template-columns: repeat(4, 1fr); } 
    }
