@font-face {font-family: Poppins; src: url(https://www.alternate.nl/download/b2c_nl/pic/fonts/Poppins-Regular.ttf); }
    #PortalPagina { background: #0c0323; border: 1px solid #ededed; width: 100%; position: relative; z-index: 0; font-family: Poppins; overflow: hidden;
        img { width: 100%; }
        h1 { font-size: 30px; } 
        h2 { font-size: 25px; line-height: 40px; color: #ffffff; padding: 30px 0 0; text-transform: uppercase; }
        h2 span { display: block; color: white; font-weight: 100; margin-bottom: -15px; }
        p { font-size: 16px; line-height: 24px; }
        .container { padding: 0 70px; }

        /* Verdeling */
        .row { background: url(https://www.alternate.nl/download/b2c_nl/pic/merken/sharkoon/Takeover/BG.jpg?v=3) no-repeat top right;  background-size: cover;  align-items: center; padding: 20px; margin: 50px 0; border: solid #1d96ad; border-radius: 20px;  box-shadow: 0 0 30px #1d96ad; }
        .row { align-items: center; }
        .row .row:has(.col-lg-3) { width: 97%; border: 2px solid #767676; border-radius: 20px; margin: 20px; box-shadow: inset 0 0 30px #020202; }
        .col-lg-6:has(.ItemAfbeelding) { margin: 0 0 0 -110px; }
        .ItemAfbeelding h2 {  text-align: center; color: #11cae4 !important; line-height: 30px; text-transform: uppercase; font-weight: 900;}
        
        #Productlijst1 .jacsListing { margin: 0; }
        #Productlijst1 .productCard img { display: block; width: 70% !important; margin: 0 auto 10px; }
        #Productlijst1 .productTitle { font-size: 16px; line-height: 20px; height: 40px; overflow: hidden; }
        #Productlijst1 .productCard ul { height: 50px; padding: 0 17px; overflow: hidden; }
        #Productlijst1 .productCard .badge { position: absolute; width: 120px; left: -20px; top: 0px; }
        #Productlijst1 .ratingsfalse { display: none; }
        #Productlijst1 .ratingstrue { display: flex; width: 50%; margin: 0 -7px -3px; }
        #Productlijst1 .productInfo { display: flex; gap: 10px; align-items: flex-end; justify-content: right; }
        #Productlijst1 .productPrices { width: 60%; text-align: right; }
        #Productlijst1 .productPrice { font-size: 25px !important; font-weight: 900; color: #9f0707; margin: 0; }
        #Productlijst1 .historyPrice { height: 30px; margin: 0; text-decoration-line: line-through; font-size: 20px; }

        #Productlijst1 .jacsListing div { width: 19%; margin: 5px; }
        #Productlijst1 .jacsListing div div { width: 100%; }
        #Productlijst1 .product img { display: block; width: 70% !important; margin: 0 auto 20px; }


        .filters { display: flex; flex-flow: wrap; margin: 20px 0; }
        .filter-option { padding: 5px 20px; background: #f0f0f0; border: 1px solid #ccc; border-radius: 5px; transition: background-color .3s; font-size: 10px !important; cursor: pointer; margin: 7px 3px 0 0; }
        .filter-option.active { background: #005aa0; color: white; }
        .filter-option.active, .filter-option:hover { background: #ff9c00; color: white; }
        .filter-option:first-child { background: #ff9c00; color: white; }
        .hidden { display: none; }
        div:has(.hidden) { display: none; }

        .swiper-slide { padding: 10px; background: #ffffff; border-radius: 10px; }
        .swiper-slide .btn { background: white; font-size: 10px; }
        .productCard img { display: block; width: 70% !important; margin: 0 auto 10px; }
        .productCard .productTitle { font-size: 16px; line-height: 20px; height: 40px; overflow: hidden; }
        .productCard ul { height: 80px; padding-left: 17px; overflow: hidden; font-size: 9px; }
        .productCard .ratingsfalse { display: none; }
        .productCard .ratingstrue { display: flex; width: 40%; margin: 0; }
        .productCard .ratingstrue img { width: 18% !important; margin: 0; }
        .productCard .productInfo { display: flex; gap: 10px; align-items: flex-end; justify-content: right; }
        .productCard .productPrices { width: 60%; text-align: right; }
        .productCard .productPrice { font-size: 18px !important; font-weight: 900; color: #9f0707; margin: 0; }
        .productCard .historyPrice { height: 20px; margin: 0; text-decoration-line: line-through; font-size: 12px; }
        .btn { background: white; font-size: 10px; font-weight: 900; margin: 0 -10px; }
    }
    
   @media screen and (max-width: 667px) { /* Mobile */
       
        #PortalPagina { 
            .container { padding: 10px; }
            h1 { font-size: 25px; }
            p { font-size: 14px; line-height: 23px;}
            .ProductSlider { padding: 0; }
            .ItemAfbeelding h2 { font-size: 14px; line-height: 20px; }
            .row { margin: 10px 0; }
            .col-lg-6 .ItemAfbeelding { display: none; }
            .row .row:has(.col-lg-3) { width: 100%; margin: 0; padding: 0; }
            .filter-option { font-size: 11px; }
            .accordion-collapse.collapse { max-height: 970px; mask-image: linear-gradient(to bottom, #000000 70%, #00000000 100%); -webkit-mask-image: linear-gradient(to bottom, #000000 70%, #00000000 100%); }
            #Productlijst1 .jacsListing div { width: 100% !important; place-self: center; }
            .productTitle { height: auto; }
            .ProductSlider .productCard .ratingstrue { display: none; }
            .productCard .productPrices { width: 100%; }
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1032px) { /* Tablet */
        #PortalPagina { 
            .container { padding: 10px; }
            #Productlijst1 .jacsListing div { width: 23%; }
            .ItemAfbeelding img { display:block;  width: 50% !important;  margin: 0 auto; }
            .col-lg-6 .ItemAfbeelding { display: none; }
            button img { width: 70% !important; margin: 0 26% -60px; display: block; }
            .productTitle { height: auto; }
        }
    }