.item-social li a i.wp-icon { color: var(--primary) !important; }
@media (max-width: 767px) {
#accordion .accordion-body {
        padding: 30px 0 !important;
    }
}
#accordion {  
    .accordion-title{
        position: relative;
        display: block;
        padding:8px 0 8px 50px;
        background: var(--primary) !important;
        border-radius: 8px;
        overflow: hidden;
        text-decoration: none;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        width: 100%;
        text-align: left;
        transition: all .4s ease-in-out; 
        i{
            position: absolute;
            width: 40px;
            height: 100%;
            left: 0;
            top: 0;
            color: #fff;
            background: radial-gradient(rgba(#213744, .8), #213744);
            text-align: center;
            border-right: 1px solid transparent;
        }
        &:hover{
            padding-left: 60px;
            background: #213744;
            color: #fff;
            
            i {
                border-right: 1px solid #fff;
            }
        }
    }
    [aria-expanded="true"]{
        background: #28a745;
        color: #fff;
        i {
            color: #fff;
            background: #28a745;
          &:before{
                content: "\f068" ;
            }
        }
    }
    .accordion-body{
        padding: 40px 55px;
    }
}

/* Desktop */
.product-slider-details {
    width: 400px;
    height: 320px;
}

/* Mobiel 16:9 */
@media (max-width:776px) {
    .product-slider-details {
        width: 100%;
        height: auto;
    }

    .screenshot-wrapper {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
        overflow: hidden;
        margin-bottom: 15px;
    }

    .screenshot-wrapper img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        margin: 0;
        padding: 0;
        display: block;
    }
}
/* General button appearance */
.row > a.btn {
    padding: 16px;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s ease;
}

/* Hover effect */
.row > a.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}


.row.button-row{
  margin:0;                 /* neutraliseert -15 px */
  padding:0 15px;           /* gewenste ruimte aan randen */
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}

.row.button-row > a {
    flex: 1 1 calc(50% - 10px); /* 2 per row */
    min-width: 200px; /* Optional: prevents too small buttons on very small screens */
}

@media (max-width: 767px) {
    .row.button-row > a {
        flex: 1 1 100%; /* Stack on mobile */
    }
}

/* basis */
.sticky-bottom-cta{
  position:fixed; left:0; right:0; bottom:60px;
  margin:0 auto; width:calc(100% - 30px); max-width:500px;
  padding:14px;text-align:center; z-index:999;

  /* verborgen bij paginalaad */
  opacity:0; transform:translateY(80px); pointer-events:none;
  transition:opacity .25s,transform .25s;
}
.sticky-bottom-cta.is-visible{          /* wordt aangezet door JS */
  opacity:1; transform:translateY(0); pointer-events:auto;
}

@media (min-width:768px){ .sticky-bottom-cta{display:none!important;} }

:root { --cta-h: 64px; }           /* hoogte CTA */
@media (max-width: 768px) {
  #myBtn {
    bottom: calc(var(--cta-h) + env(safe-area-inset-bottom) + 12px);
    right: 1rem;
    z-index: 1060;
  }
}

:root{
  --nav-h: 56px;                        /* basisnav-hoogte */
}

@media (min-width:400px){ :root{ --nav-h: 60px; } }     /* grotere toestellen */

.sticky-bottom-cta{
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 4px);
}