:root{
    --af-blue:#3b63ff;
    --af-blue-100:#eef3ff;
    --af-green:#19c23e;
    --af-text:#0f172a;
    --af-muted:rgba(15,23,42,.62);
    --af-border:rgba(20,30,60,.10);
    --af-shadow:0 10px 24px rgba(0,0,0,.06);
}


.woocommerce-variation.single_variation {
    display: none !important;
}


.af-single__slider .af-card__price {
    display: flex;
    gap: 14px;
    font-size: 16px;
    align-items: center;
}


.af-single__slider .af-card__price span {
    font-size: 21px;
    color: #000;
    font-weight: 700;
}

/* Breadcrumb styling zoals screenshot */
.af-single__breadcrumbs .af-breadcrumb{
    font-style: italic;
    font-size: 14px;
    line-height: 1.2;
    color: #b8b8b8;
}

.af-single__breadcrumbs .af-breadcrumb a{
    color: #b8b8b8;
    text-decoration: none;
}

.af-single__breadcrumbs .af-breadcrumb a:hover{
    text-decoration: underline;
}

/* “ - ” separator */
.af-single__breadcrumbs .af-breadcrumb .delimiter{
    color: #b8b8b8;
}

/* Laatste item (current) blauw */
.af-single__breadcrumbs .af-breadcrumb__current,
.af-single__breadcrumbs .af-breadcrumb span:last-child{
    color: #0b45b5; /* pas aan naar jouw blauw */
    font-weight: 600;
}


/* =========================================
   BASE WRAPPER
   ========================================= */
.af-single{
    width: 1486px;
    margin: 18px auto 70px;
    color: var(--af-text);
    padding-left: 24px;
    padding-right: 24px;
    /* header is bij jou groot: maak dit responsive i.p.v. vaste 292px */
    padding-top: clamp(140px, 12vw, 200px);
}



/* Qty: verberg theme/plugin +/- controls (wij gebruiken .af-qtybtn) */
.af-single .quantity button:not(.af-qtybtn),
.af-single .quantity a.plus,
.af-single .quantity a.minus,
.af-single .quantity span.plus,
.af-single .quantity span.minus,
.af-single .quantity .plus:not(.af-qtybtn),
.af-single .quantity .minus:not(.af-qtybtn){
    display:none !important;
}


/* Breadcrumbs */
.af-single__breadcrumbs{
    margin:6px 0 18px;
    font-size:13px;
    color:rgba(15,23,42,.55);
}
.af-single__breadcrumbs .af-bc-sep{opacity:.6;padding:0 6px;}

/* =========================================
   TOP GRID + CARDS
   ========================================= */
.af-single__top{
    display:grid !important;
    grid-template-columns: 1.15fr .85fr !important;
    gap:48px !important;
    align-items:start !important;
}

/* Critical overflow guard */
.af-single__galleryCard,
.af-single__summaryCard{min-width:0;}

.af-single__galleryCard,
.af-single__summaryCard,
.af-single__tabsWrap{
    background:#fff;
    border-radius:18px;
}

.af-single__tabsWrap{margin-top:48px;}

/* =========================================
   TITLE + PRICE + STOCK
   ========================================= */
.af-single__title{
    margin:0 0 12px;
    font-size:34px;
    line-height:1.25;
    font-weight:900;
}

.af-single__priceRow{
    display:grid;
    gap:10px;

    margin-bottom:14px;
}

.af-single__price{
    display:flex;
    align-items:center;
    gap:14px;
}

.af-single__priceAmount{
    font-size:28px;
    font-weight:950;
    letter-spacing:-.03em;
}
.af-single__priceTax{
    font-size:11px;
    color: #757575;
    text-decoration:underline;
    text-underline-offset:3px;
}

.af-single__stock{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    font-weight:800;
    color:rgba(15,23,42,.70);
}
.af-dot{
    width:20px;height:20px;border-radius:999px;
    border:2px solid rgba(25,194,62,.35);
    display:inline-flex;align-items:center;justify-content:center;
    position:relative;
}
.af-dot::after{
    content:"";
    width:8px;height:8px;border-radius:999px;
    background:var(--af-green);
    display:block;
}
.af-single__stock.is-out .af-dot{border-color:rgba(214,54,56,.35);}
.af-single__stock.is-out .af-dot::after{background:#d63638;}

/* =========================================
   WOO GALLERY (DESIGN) + Flexslider veilig
   ========================================= */
.af-single .woocommerce-product-gallery{
    width:100% !important;
    max-width:100% !important;
    float:none !important;
    margin:0 !important;
    display:block !important;
}

/* Viewport = kaart + masker (border/radius/overflow/hoogte hier) */
.af-single .woocommerce-product-gallery .flex-viewport{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    border:2px solid #ddd;
    border-radius:18px;
    background:#fff;
    height: 600px;

}

/* Wrapper is de Flexslider TRACK -> NIET forceren met width/max-width/overflow */
.af-single .woocommerce-product-gallery__wrapper{
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 24px;
    background: transparent !important;
    height: inherit;
}

/* Slides centreren */
.af-single .woocommerce-product-gallery__image{
    height: 500px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /*border: 2px solid #eee;*/
    border-radius: 24px;
}

.af-single .woocommerce-product-gallery__image a{
    width:100% !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.af-single .woocommerce-product-gallery__image img{
    display:block !important;
    max-width:100% !important;
    max-height:100% !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
}

/* Extra safety: box sizing (NIET max-width limiteren, want dat kan track slopen) */
.af-single__galleryCard,
.af-single__galleryCard *{
    box-sizing: border-box;
}

/* Thumbnails */
.af-single .flex-control-nav.flex-control-thumbs{
    margin-top:18px !important;
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:18px !important;
}
.af-single .flex-control-nav.flex-control-thumbs img{
    width: 100% !important;
    height: 100% !important;
    object-fit: scale-down !important;
    border-radius: 18px !important;
    border: 2px solid #ddd !important;
    opacity: 1 !important;
    padding: 24px;
}

.af-single .splide__slide.is-visible.is-active img{
    border-color:rgba(59,99,255,.65) !important;
}

/* =========================================
   ADD TO CART + VARIATIONS
   ========================================= */
.af-single form.cart{margin:10px 0 0 !important;}

/* Forceer layout: quantity boven de knop (voorkomt flex-shrink issues bij variable products) */
.af-single form.cart,
.af-single .variations_button,
.af-single .woocommerce-variation-add-to-cart{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:4px !important;
}

/* Variations table */
.af-single table.variations{
    margin: 6px 0 8px !important;
}
.af-single table.variations td,
.af-single table.variations th{
    border:0 !important;
    padding:8px 0 !important;
}
.af-single table.variations label{
    font-size:14px;
    font-weight:900;
    color:rgba(15,23,42,.85);
}

/* Hide selects (JS builds pills) */


/* Fallback: laat Woo variaties altijd zien als JS faalt */
.af-single table.variations{display: table !important;}
.af-single table.variations select{display:block !important;}

/* Alleen als pills succesvol gebouwd zijn: verberg de originele Woo tabel */
.af-single form.variations_form[data-af-pills="1"] table.variations{
    display:none !important;
}



/* reset_variations weg */
.af-single .reset_variations{display:none !important;}

/* woocommerce-variation-price weg (jij toont prijs bovenaan) */
.af-single .single_variation .woocommerce-variation-price{display:none !important;}

/* Pills created by JS */
.af-attr{margin:6px 0 14px;}
.af-attr__label{
    font-size:14px;
    font-weight:900;
    color:rgba(15,23,42,.85);
    margin-bottom:10px;
}
.af-attr__row{display:flex;flex-wrap:wrap;gap:14px;}
.af-pill{
    position:relative;
    min-width: 120px;
    padding: 14px 28px;
    border-radius:10px;
    color: #556FE8;
    border:2px solid rgba(59,99,255,.75);
    background:#fff;
    font-weight:900;
    font-size:14px;
    cursor:pointer;
    transition:.15s ease;
    text-align: center;
}
.af-pill:hover{border-color:rgba(59,99,255,1);}
.af-pill.is-active{
    background:var(--af-blue-100);
    border-color:rgba(59,99,255,1);
}
.af-pill.is-disabled{opacity:.35;cursor:not-allowed;}


/* Blauwe cirkel */
.af-pill.is-active::after{
    content: "";
    position: absolute;
    top: -16px;
    right: -12px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(59,99,255,1);
    z-index: 2;
}

/* Witte check */
.af-pill.is-active::before{
    content: "";
    position: absolute;
    top: -6px;
    right: -2px;
    width: 14px;
    height: 14px;
    z-index: 3;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    /* SVG icon (fill=white) als data-uri */
    background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20511.985%20511.985%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M500.088%2C83.681c-15.841-15.862-41.564-15.852-57.426%2C0L184.205%2C342.148L69.332%2C227.276c-15.862-15.862-41.574-15.862-57.436%2C0s-15.862%2C41.574%2C0%2C57.436l143.585%2C143.585c7.926%2C7.926%2C18.319%2C11.899%2C28.713%2C11.899s20.797-3.963%2C28.723-11.899l287.171-287.181C515.95%2C125.265%2C515.95%2C99.542%2C500.088%2C83.681z%22/%3E%3C/svg%3E");
}

/* =========================================
   QTY ( - | 1 | + )
   ========================================= */
.af-single .quantity{
    display: grid !important;
    grid-template-columns: 54px 1fr 54px !important;
    grid-template-areas: "minus input plus";
    height: 54px !important;
    width: 200px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    margin: 8px 0 16px;
}

/* Input midden (wit vlak) */
.af-single .quantity input.qty{
    width: 100% !important;
    height: 100% !important;

    outline: 0 !important;

    background: #ffffff !important;
    text-align: center !important;

    font-weight: 950 !important;
    font-size: 16px !important;

    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* minus/plus zijkanten */
.af-single .quantity .af-qtybtn{
    width: 100% !important;
    height: 100% !important;

    border: 0 !important;
    cursor: pointer !important;

    font-size: 18px !important;
    line-height: 1 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    user-select: none;
}

/* Forceer plaatsing van AF knoppen (ongeacht DOM volgorde) */
.af-single .quantity .af-qtybtn--minus{ grid-area: minus; grid-column: 1 !important; background: #ededed; }

.af-single .quantity input.qty {
    grid-area: input;
    grid-column: 2 !important;
    border-top: 2px solid #eeeeee;
    border-bottom: 2px solid #eee;
}


.af-single .quantity .af-qtybtn--plus{  grid-area: plus;  grid-column: 3 !important; background: #ededed; }

/* Hover/active subtiel */
.af-single .quantity .af-qtybtn:hover{
    background: #546fe8 !important;
    color: #fff;
}
.af-single .quantity .af-qtybtn:active{
    transform: scale(.98);
}

/* Verwijder browser spinners */
.af-single input.qty::-webkit-outer-spin-button,
.af-single input.qty::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}
.af-single input.qty{
    -moz-appearance: textfield;
}

/* =========================================
   BUTTONS
   ========================================= */
.af-single button.single_add_to_cart_button{
    width:100%;
    height:64px;
    border-radius:12px;
    border:0;
    background:var(--af-green);
    color:#fff;
    font-size:16px;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:14px !important;

    padding:0 18px !important;
    line-height:1 !important;
}
.af-single button.single_add_to_cart_button::before{
    content:"";
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    width: 22px;
    height: 22px;
    margin-right: 8px; /* of 0 als je geen spacing wilt */

    background-color: #fff; /* dit is de kleur van het icoon */

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2239%22%20height%3D%2239%22%20viewBox%3D%220%200%2039%2039%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M37.1562%2028.1875H12.8125C12.1065%2028.1875%2011.5312%2027.6122%2011.5312%2026.9062V25.625H30.75C32.7487%2025.625%2034.6924%2024.1067%2035.1767%2022.1682L38.3991%209.27881C38.4952%208.89572%2038.408%208.49084%2038.1659%208.1795C37.9237%207.86816%2037.5509%207.6875%2037.1562%207.6875H7.86175L6.93156%203.50422C6.49466%201.53878%204.85722%200%203.20312%200H1.28125C0.574%200%200%200.574%200%201.28125C0%201.9885%200.574%202.5625%201.28125%202.5625H3.20312C3.51831%202.5625%204.22428%203.13138%204.43056%204.06028L8.96875%2024.4834V26.9062C8.96875%2029.0254%2010.6933%2030.75%2012.8125%2030.75H15.375H32.0312H37.1562C37.8635%2030.75%2038.4375%2030.176%2038.4375%2029.4688C38.4375%2028.7615%2037.8635%2028.1875%2037.1562%2028.1875ZM17.9375%2015.375H20.5V12.8125C20.5%2012.1053%2021.074%2011.5312%2021.7812%2011.5312C22.4885%2011.5312%2023.0625%2012.1053%2023.0625%2012.8125V15.375H25.625C26.3323%2015.375%2026.9062%2015.949%2026.9062%2016.6562C26.9062%2017.3635%2026.3323%2017.9375%2025.625%2017.9375H23.0625V20.5C23.0625%2021.2073%2022.4885%2021.7812%2021.7812%2021.7812C21.074%2021.7812%2020.5%2021.2073%2020.5%2020.5V17.9375H17.9375C17.2302%2017.9375%2016.6562%2017.3635%2016.6562%2016.6562C16.6562%2015.949%2017.2302%2015.375%2017.9375%2015.375Z%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M11.5312%2034.5938C11.5312%2036.7129%2013.2558%2038.4375%2015.375%2038.4375C17.4942%2038.4375%2019.2188%2036.7129%2019.2188%2034.5938C19.2188%2032.4746%2017.4942%2030.75%2015.375%2030.75C13.2558%2030.75%2011.5312%2032.4746%2011.5312%2034.5938Z%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M28.1875%2034.5938C28.1875%2036.7129%2029.9121%2038.4375%2032.0312%2038.4375C34.1504%2038.4375%2035.875%2036.7129%2035.875%2034.5938C35.875%2032.4746%2034.1504%2030.75%2032.0312%2030.75C29.9121%2030.75%2028.1875%2032.4746%2028.1875%2034.5938Z%22%20fill%3D%22white%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2239%22%20height%3D%2239%22%20viewBox%3D%220%200%2039%2039%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M37.1562%2028.1875H12.8125C12.1065%2028.1875%2011.5312%2027.6122%2011.5312%2026.9062V25.625H30.75C32.7487%2025.625%2034.6924%2024.1067%2035.1767%2022.1682L38.3991%209.27881C38.4952%208.89572%2038.408%208.49084%2038.1659%208.1795C37.9237%207.86816%2037.5509%207.6875%2037.1562%207.6875H7.86175L6.93156%203.50422C6.49466%201.53878%204.85722%200%203.20312%200H1.28125C0.574%200%200%200.574%200%201.28125C0%201.9885%200.574%202.5625%201.28125%202.5625H3.20312C3.51831%202.5625%204.22428%203.13138%204.43056%204.06028L8.96875%2024.4834V26.9062C8.96875%2029.0254%2010.6933%2030.75%2012.8125%2030.75H15.375H32.0312H37.1562C37.8635%2030.75%2038.4375%2030.176%2038.4375%2029.4688C38.4375%2028.7615%2037.8635%2028.1875%2037.1562%2028.1875ZM17.9375%2015.375H20.5V12.8125C20.5%2012.1053%2021.074%2011.5312%2021.7812%2011.5312C22.4885%2011.5312%2023.0625%2012.1053%2023.0625%2012.8125V15.375H25.625C26.3323%2015.375%2026.9062%2015.949%2026.9062%2016.6562C26.9062%2017.3635%2026.3323%2017.9375%2025.625%2017.9375H23.0625V20.5C23.0625%2021.2073%2022.4885%2021.7812%2021.7812%2021.7812C21.074%2021.7812%2020.5%2021.2073%2020.5%2020.5V17.9375H17.9375C17.2302%2017.9375%2016.6562%2017.3635%2016.6562%2016.6562C16.6562%2015.949%2017.2302%2015.375%2017.9375%2015.375Z%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M11.5312%2034.5938C11.5312%2036.7129%2013.2558%2038.4375%2015.375%2038.4375C17.4942%2038.4375%2019.2188%2036.7129%2019.2188%2034.5938C19.2188%2032.4746%2017.4942%2030.75%2015.375%2030.75C13.2558%2030.75%2011.5312%2032.4746%2011.5312%2034.5938Z%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M28.1875%2034.5938C28.1875%2036.7129%2029.9121%2038.4375%2032.0312%2038.4375C34.1504%2038.4375%2035.875%2036.7129%2035.875%2034.5938C35.875%2032.4746%2034.1504%2030.75%2032.0312%2030.75C29.9121%2030.75%2028.1875%2032.4746%2028.1875%2034.5938Z%22%20fill%3D%22white%22/%3E%3C/svg%3E");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.af-single button.single_add_to_cart_button *{line-height:1 !important;}
.af-single button.single_add_to_cart_button:hover{filter:brightness(.98);}


.af-single button.single_add_to_cart_button:hover{
    background:#001989;
}

.af-single__offerBtn{
    width:100%;
    height:60px;
    margin-top:14px;

    border-radius:14px !important;
    border:2px solid rgba(59,99,255,.85) !important;
    background:#fff !important;
    color:#0f172a !important;

    font-weight:950 !important;
    font-size:16px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:0 18px !important;
    cursor:pointer;
}
.af-single__offerBtn:hover{border-color:rgba(59,99,255,1) !important;}

/* =========================================
   TRUST BOX
   ========================================= */
.af-single__trust{
    margin-top:16px;
    background:#f2f2f2;
    border-radius:12px;
    padding:14px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.af-single__trustLabel{
    font-size:13px;
    font-weight:900;
    color:rgba(15,23,42,.70);
    white-space:nowrap;
}
.af-single__trustIcons{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    justify-content:flex-end;
}
span.af-pay {
    align-items: center;
    display: flex;
}

.af-pay svg {
    width: 45px;
    height: 34px;
}


/* =========================================
   USP BAR (above breadcrumb)
   ========================================= */
.af-single__uspBar{
    margin:0 0 12px;
    padding:12px 0;
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px 24px;
}
.af-single__uspBar li{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    color:#0f172a;
    line-height:1.4;
    white-space:nowrap;
}
.af-single__uspBar li b{font-weight:700;}
.af-check{
    width:18px;height:18px;
    flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
}
.af-check::after{
    content:"";
    width:18px;height:18px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2316a34a'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-size:contain;
    background-repeat:no-repeat;
    display:block;
}

/* =========================================
   TABS
   ========================================= */
.woocommerce-tabs ul.tabs{
    display:flex;
    gap:24px;
    margin:0 0 12px !important;
    padding:0 !important;
    border:0 !important;
}
.woocommerce-tabs ul.tabs li{
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
}
.woocommerce-tabs ul.tabs li a{
    display:inline-block;
    padding:10px 0 !important;
    font-weight:500;
    color:#000;
    border-bottom:3px solid transparent;
    margin-bottom: -3px;
}
.woocommerce-tabs ul.tabs li.active a{
    color:#5470e8;
    border-bottom-color:#5470e8;
}
.woocommerce-tabs .panel{
    margin:0 !important;
    padding:48px 0 0 !important;
}

/* =========================================
   RELATED SLIDER (4/3/1)
   ========================================= */
.af-single__related{margin-top:34px;}
.af-single__relatedHead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:14px;
}
.af-single__relatedTitle{
    margin:0;
    font-size:40px;
    font-weight:700;
    letter-spacing:-.02em;
}
.af-single__relatedTitle span{color:#556fe8;}

.af-single__relatedNav{display:none;}
.af-navBtn{
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 2px solid #001989;
    background: #fff;
    cursor: pointer;
    font-size: 20px;
    color: #001989;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
}

.af-navBtn:hover {
    border-color:#546fe8;
}


.af-navBtn svg {
    width: 12px;
    height: 12px;
    zoom: 0.7;
    fill: #001989;
}


.af-single__slider{
    --gap:16px;
    display:grid;
    grid-auto-flow:column;
    gap:var(--gap);
    grid-auto-columns: calc((100% - (var(--gap) * 3)) / 4);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-left:2px;
    padding:6px 2px 12px;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
}
.af-single__slider::-webkit-scrollbar{height:10px;}
.af-single__slider::-webkit-scrollbar-thumb{background:rgba(20,30,60,.14);border-radius:999px;}

.af-card{
    position:relative;
    background:#fff;
    border-radius:18px;
    border:1px solid rgba(20,30,60,.08);
    overflow:hidden;
    scroll-snap-align:start;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.af-card__badge{
    position:absolute;
    top:12px;left:12px;
    font-size:10px;
    font-weight:950;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(245,158,11,.14);
    color:rgba(15,23,42,.70);
    z-index:2;
}
.af-card__media{
    display:block;
    padding:16px;
}
.af-card__img{width:100%;height:250px; object-fit: contain;}
.af-card__body{padding:12px 14px 14px;display:grid;gap:24px;}
.af-card__cats{font-size:12px;color: #546fe8;}
.af-card__title{font-weight:950;line-height:1.25;color:var(--af-text);text-decoration:none;}
.af-card__bottom{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    margin-top:6px;
}


.af-card__price span.woocommerce-Price-amount.amount {
    color: #000;
    font-size: 24px;
    font-weight: 700;
}


.af-card__price span{
    display: flex;
    font-size: 11px;
    color: rgba(15, 23, 42, .55);
    align-items: center;
    gap: 8px;
}

small.af-price-tax {
    text-decoration: underline;
    font-size: 11px;
}


.af-card__cart{
    width:56px;
    height:56px;
    border-radius:12px;
    background:var(--af-green);
    display:flex;align-items:center;justify-content:center;
    text-decoration:none;
}

.af-card__cart:hover {
    background:#081989;
}

.af-card__cart svg {
    width:24px;
    height: 24px;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1024px){
    .af-single__top{grid-template-columns:1fr !important;}

    .af-single .woocommerce-product-gallery .flex-viewport{
        min-height:320px;
        max-height:360px;
    }
    .af-single .woocommerce-product-gallery__image{height:360px;}
    .af-single .flex-control-nav.flex-control-thumbs{
        grid-template-columns:repeat(3,1fr) !important;
    }

    .af-single__slider{
        grid-auto-columns: calc((100% - (var(--gap) * 2)) / 3);
    }
    .af-single__relatedTitle{font-size:34px;}
}

@media (max-width: 640px){




    .af-single__title{
        font-size: 18px;
        margin-bottom: 10px;
    }

    .af-single__priceAmount{font-size:38px;}
    .af-single__priceTax{font-size:12px;}


    .af-single .woocommerce-product-gallery__image{height:320px;}

    .af-single .flex-control-nav.flex-control-thumbs{
        grid-template-columns:repeat(4,1fr) !important;
        gap:12px !important;
    }


    /* Pills compacter */
    .af-attr__label{font-size:13px;margin-bottom:8px;}
    .af-attr__row{gap:10px;}
    .af-pill{
        min-width: 31%;
        padding: 12px 18px;
        font-size: 13px;
        text-align: center;
        border-radius: 10px;
    }

    /* Qty compacter (zelfde pill-style, alleen iets lager) */


    .af-single .quantity input.qty{
        font-size: 20px !important;
    }
    .af-single .quantity .af-qtybtn{
        font-size: 22px !important;
    }

    /* Buttons compacter + mooi */
    .af-single button.single_add_to_cart_button{
        height:56px !important;
        border-radius:14px !important;
        font-size:14px !important;
    }
    .af-single__offerBtn{
        height:54px !important;
        border-radius:14px !important;
        font-size:15px !important;
    }

    .af-single__trust{padding:12px;}
    .af-single__uspBar{gap:4px 16px;font-size:12px;padding:10px 14px;}

    .af-single__slider{grid-auto-columns:100%;}
}


@media (max-width: 1024px) {

    .af-single {
        padding-top: 248px;
    }
}


















/* Productgegevens (Woo attributes) – stijl zoals voorbeeld */
.woocommerce table.shop_attributes.woocommerce-product-attributes{
    width: 100%;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    background: transparent;
}

/* Elke row als een nette "lijstregel" */
.woocommerce table.shop_attributes.woocommerce-product-attributes tr{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 24px;
    border-top: 1px solid #e9e9e9;
    transition: background-color .18s ease;
}

/* Onderste lijn ook zichtbaar */
.woocommerce table.shop_attributes.woocommerce-product-attributes tr:last-child{
    border-bottom: 1px solid #e9e9e9;
}

/* Zebra: even rows grijs */
.woocommerce table.shop_attributes.woocommerce-product-attributes tr:nth-child(even){
    background: #EEEEEE;
}

/* Hover (subtiel) */
.woocommerce table.shop_attributes.woocommerce-product-attributes tr:hover{
    background: #e8e8e8;
}

/* Reset Woo default cell styling */
.woocommerce table.shop_attributes.woocommerce-product-attributes th,
.woocommerce table.shop_attributes.woocommerce-product-attributes td{
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;

    line-height: 1.2;
}

/* Label links */
.woocommerce table.shop_attributes.woocommerce-product-attributes th{
    flex: 0 0 34%;
    font-weight: 500;
    color: #777;
    font-size: 14px;
}

/* Waarde rechts – groter zoals in je voorbeeld */
.woocommerce table.shop_attributes.woocommerce-product-attributes td{
    flex: 1 1 auto;
    text-align: left;
    font-weight: 400;
    color: #6f6f6f;
    font-size: 14px; /* pas aan als je het groter/kleiner wilt */
}

/* P tags wegwerken */
.woocommerce table.shop_attributes.woocommerce-product-attributes td p{
    margin: 0;
}

/* Responsive: label + value onder elkaar */
@media (max-width: 768px){


    .woocommerce table.shop_attributes.woocommerce-product-attributes th{
        display: block;
        width: 100%;
        font-size: 14px;
        margin-bottom: 8px;
    }

    .woocommerce table.shop_attributes.woocommerce-product-attributes td{
        display: block;
        width: 100%;
        text-align: left;
    }
}


.woocommerce-tabs.wc-tabs-wrapper {
    border: 0;
}

.af-single .af-single__tabsWrap ul.tabs.wc-tabs {
    border-bottom: 3px solid #eee !important;
}

/* =========================================
   OFFERTE INFO ICON + MODAL
   ========================================= */
.af-quote-info-anchor{
    margin-top: 8px;
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    margin-top:0;
    margin-bottom: 12px;
    align-items: center;
}

.af-quote-info-anchor > .af-off-addbtn,
.af-quote-info-anchor > .af-quote-request-btn,
.af-quote-info-anchor > a,
.af-quote-info-anchor > button{
    flex:1 1 auto;
}

.af-quote-info-toggle{
    margin-top: 6px;
    position: relative;
    flex: 0 0 46px;
    width: 46px;
    min-width: 46px;
    height: 46px;
    border: none;
    border-radius: 44px;
    background: #5470e8;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.af-quote-info-toggle:hover,
.af-quote-info-toggle:focus-visible{
    background:#274fe6;
    transform:translateY(-1px);
    box-shadow:0 14px 28px rgba(59,99,255,.22);
    outline:none;
}

.af-quote-info-toggle svg{
    width:18px;
    height:18px;
    display:block;
}

.af-quote-info-overlay{
    position:fixed;
    inset:0;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(5, 10, 25, .56);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease, visibility .2s ease;
}

.af-quote-info-overlay.is-open{
    opacity:1;
    visibility:visible;
}

.af-quote-info-popover{
    position:relative;
    width:min(640px, calc(100vw - 48px));
    max-height:min(85vh, 760px);
    overflow:auto;
    padding:30px 30px 26px;
    border:1px solid rgba(59,99,255,.12);
    border-radius:24px;
    background:#fff;
    box-shadow:0 30px 80px rgba(15,23,42,.22);
    opacity:0;
    transform:translateY(16px) scale(.98);
    transition:opacity .2s ease, transform .2s ease;
}

.af-quote-info-popover.is-open{
    opacity:1;
    transform:translateY(0) scale(1);
}

.af-quote-info-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
}

.af-quote-info-title{
    margin:0;
    font-size:28px;
    line-height:1.2;
    font-weight:900;
    color:var(--af-text);
}

.af-quote-info-close{
    width:42px;
    height:42px;
    border:1px solid rgba(15,23,42,.12);
    border-radius:12px;
    background:#fff;
    color:var(--af-text);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .18s ease, border-color .18s ease, transform .18s ease;
}

.af-quote-info-close:hover,
.af-quote-info-close:focus-visible{
    background:#f8faff;
    border-color:rgba(59,99,255,.25);
    transform:translateY(-1px);
    outline:none;
}

.af-quote-info-copy{
    font-size:15px;
    line-height:1.7;
    color:rgba(15,23,42,.78);
}

.af-quote-info-copy p{
    margin:0 0 14px;
}

.af-quote-info-copy strong{
    color:var(--af-text);
}

.af-quote-info-copy ul,
.af-quote-info-list{
    margin:0 0 18px;
    padding:0;
    list-style:none;
    display:grid;
    gap:11px;
}

.af-quote-info-copy ul li,
.af-quote-info-list li{
    position:relative;
    padding-left:28px;
}

.af-quote-info-copy ul li::before,
.af-quote-info-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:9px;
    width:8px;
    height:8px;
    border-radius:999px;
    background:var(--af-green);
    box-shadow:0 0 0 5px rgba(25,194,62,.12);
}

.af-quote-info-note,
.af-quote-info-copy .af-quote-info-note{
    margin:8px 0 0;
    padding:14px 16px;
    border-radius:14px;
    background:#f3f6ff;
    border:1px solid #dfe7ff;
    font-size:13px;
    line-height:1.6;
    color:#546fe8;
    font-weight:700;
}

.af-quote-info-note strong,
.af-quote-info-copy .af-quote-info-note strong{
    color:#546fe8;
}

@media (max-width: 767px){
    .af-quote-info-anchor{
        gap:10px;
    }

    .af-quote-info-toggle{
        flex-basis:44px;
        min-width:44px;
        border-radius:12px;
    }

    .af-quote-info-overlay{
        padding:16px;
        align-items:flex-end;
    }

    .af-quote-info-popover{
        width:100%;
        max-height:85vh;
        padding:22px 18px 18px;
        border-radius:22px;
    }

    .af-quote-info-title{
        font-size:22px;
    }
}



.af-product-usp-bar {
    font-weight: 300;
}

.af-product-usp-bar strong{
    font-weight: 900;
}