/* ==========================================================================
   Signijkerk — WooCommerce styling
   Kleuren via theme CSS-vars (zie inc/customizer.php) met hex-fallbacks.
   ========================================================================== */

:root {
    --sk-primary: var(--wp--preset--color--primary, #1A3C5E);
    --sk-secondary: var(--wp--preset--color--secondary, #E8F4F8);
    --sk-accent: var(--wp--preset--color--accent, #F07D00);
    --sk-light: var(--wp--preset--color--light, #F4F6F8);
    --sk-dark: var(--wp--preset--color--dark, #10283F);
    --sk-ink: #22303C;
    --sk-muted: #6b7785;
    --sk-border: #e6e9ee;
    --sk-radius: 12px;
    --sk-shadow: 0 1px 2px rgba(16, 40, 63, .04), 0 8px 24px rgba(16, 40, 63, .06);
    --sk-shadow-hover: 0 4px 10px rgba(16, 40, 63, .08), 0 16px 40px rgba(16, 40, 63, .12);
}

/* De site-header is position:absolute en overlapt content; geef shop-pagina's
   genoeg bovenruimte zodat de titel niet onder de header valt. */
.site-main>.alignwide.woocommerce-page-wrap {
    max-width: var(--wp--style--global--wide-size, 1200px);
    padding-top: 2rem;
    padding-bottom: 4rem;
}

body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main,
body.woocommerce-account .site-main {
    padding-top: clamp(6.5rem, 11vh, 9.5rem);
    padding-bottom: 4rem;
}

/* --------------------------------------------------------------------------
   Shop-kop
   -------------------------------------------------------------------------- */
.woocommerce-shop-header {
    margin-bottom: 2.5rem;
}

.woocommerce-shop-header__title {
    margin: 0 0 .5rem;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--sk-primary);
}

.woocommerce-shop-header .term-description,
.woocommerce-shop-header p {
    margin: 0;
    max-width: 60ch;
    color: var(--sk-muted);
}

/* --------------------------------------------------------------------------
   Categorie-secties met scheidingslijn
   -------------------------------------------------------------------------- */
.shop-category-section {
    margin: 0 0 3.5rem;
}

.shop-category-section+.shop-category-section {
    padding-top: 3rem;
    border-top: 1px solid var(--sk-border);
}

.shop-category-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.shop-category-section__title {
    position: relative;
    margin: 0;
    padding-bottom: .6rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sk-primary);
}

.shop-category-section__title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 3px;
    background: var(--sk-accent);
    border-radius: 2px;
}

.shop-category-section__link {
    flex: none;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--sk-accent);
}

.shop-category-section__link:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Productraster
   -------------------------------------------------------------------------- */
ul.products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* WooCommerce-clearfix / float-grid uitschakelen */
ul.products::before,
ul.products::after {
    content: none !important;
}

ul.products li.product {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 1024px) {
    ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 460px) {
    ul.products {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   Productkaart
   -------------------------------------------------------------------------- */
.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    overflow: hidden;
    box-shadow: var(--sk-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sk-shadow-hover);
    border-color: color-mix(in srgb, var(--sk-primary) 25%, var(--sk-border));
}

.product-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--sk-light);
    overflow: hidden;

    /* Eigen afronding op de bovenhoeken (1px binnen de kaartrand). Alleen de
       overflow:hidden van .product-card is niet genoeg: Safari laat lagen die
       apart worden samengesteld — de geschaalde foto bij hover, het tag-icoon
       met drop-shadow — ontsnappen aan de afgeronde hoek van een voorouder.
       Met een eigen radius plus een eigen compositielaag (translateZ) klopt de
       afronding in alle browsers, ook tijdens de hover-animatie. */
    border-top-left-radius: calc(var(--sk-radius) - 1px);
    border-top-right-radius: calc(var(--sk-radius) - 1px);
    transform: translateZ(0);

    /* Referentie voor de cqw-maten van de badges en tag-iconen hieronder:
       die schalen mee met de kaartbreedte in plaats van met het scherm. */
    container-type: inline-size;
}

.product-card__image {
    display: block;
    width: 100%;
    height: 100%;
}

.product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.product-card:hover .product-card__image img {
    transform: scale(1.04);
}

.product-card__body {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1rem 1.1rem 1.1rem;
    flex: 1 1 auto;
}

.product-card__title-link {
    text-decoration: none;
}

.product-card__title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--sk-primary);
}

.product-card__subtitle {
    margin: 0;
    font-size: .85rem;
    line-height: 1.4;
    color: var(--sk-muted);
}

.product-card__footer {
    margin-top: auto;
    padding-top: .75rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.product-card__price {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--sk-ink);
}

.product-card__price del {
    margin-right: .35rem;
    font-size: .9rem;
    font-weight: 500;
    color: var(--sk-muted);
}

.product-card__price ins {
    text-decoration: none;
    color: var(--sk-accent);
}

.product-card__price .woocommerce-Price-amount {
    white-space: nowrap;
}

/* Toevoegen-knop op de kaart */
.product-card .button,
.product-card a.added_to_cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    padding: .7rem 1rem;
    border: none;
    border-radius: 8px;
    background: var(--sk-primary);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease;
}

.product-card .button:hover {
    background: var(--sk-accent);
}

.product-card .button.loading {
    opacity: .7;
}

.product-card a.added_to_cart {
    margin-top: .4rem;
    background: var(--sk-dark);
}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.product-badges {
    position: absolute;
    top: .6rem;
    left: .6rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    pointer-events: none;
}

.product-badge {
    display: inline-block;
    padding: .28rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #fff;
    background: var(--sk-primary);
    box-shadow: 0 1px 3px rgba(16, 40, 63, .18);
}

.product-badge--sale {
    background: var(--sk-accent);
}

.product-badge--new {
    background: var(--sk-primary);
}

.product-badge--custom {
    background: #fff;
    color: var(--sk-primary);
    border: 1px solid var(--sk-border);
}

/* Semantische kleuren voor veelvoorkomende labels */
.product-badge--bio,
.product-badge--grasgevoerd {
    background: #4f8a3d;
    color: #fff;
    border-color: transparent;
}

.product-badge--bbq {
    background: #9a3b1b;
    color: #fff;
    border-color: transparent;
}

/* Loop-badges naar de rechterbovenhoek, zodat de tag-iconen linksboven passen */
.product-card__media .product-badges {
    left: auto;
    right: .6rem;
    align-items: flex-end;
}

/* Op de kaart schaalt het label mee met de kaartbreedte. Een vast formaat gaf
   op mobiel een piepklein label: daar is de kaart juist het breedst (één
   kolom), terwijl een schermbreedte-media-query hem nog kleiner maakte. */
.product-card__media .product-badge {
    font-size: .8rem;
    /* stylelint-disable-next-line -- cqw: zonder container queries geldt de regel hierboven */
    font-size: clamp(.72rem, 4.2cqw, .95rem);
    padding: .32em .8em;
}

/* Tag-iconen (PNG/SVG uit term-meta) linksboven over de productafbeelding */
.product-card__media .product-list__tag-icons {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    pointer-events: none;
}

/* Idem voor het tag-icoon: 100px zolang de kaart breed genoeg is, en pas
   kleiner bij een smalle kaart (2 kolommen op een klein scherm). */
.product-card__media .product-list__tag-icon {
    display: block;
    width: 100px;
    height: 100px;
    /* stylelint-disable-next-line -- cqw: zonder container queries geldt 100px */
    width: clamp(48px, 36cqw, 100px);
    height: clamp(48px, 36cqw, 100px);
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
}

/* Badges in de single-product samenvatting: op een rij, niet over de foto */
.product-badges--single {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: .85rem;
}

.product-badges--single .product-badge {
    font-size: .78rem;
    padding: .35rem .7rem;
}

/* ==========================================================================
   Single product
   ========================================================================== */

/* Kruimelpad boven de productinformatie */
.single-product .woocommerce-breadcrumb {
    margin: 0 0 2rem;
    font-size: .875rem;
    color: var(--sk-muted);
}

.single-product .woocommerce-breadcrumb a {
    color: var(--sk-muted);
    text-decoration: none;
}

.single-product .woocommerce-breadcrumb a:hover {
    color: var(--sk-accent);
}

.single-product div.product {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.single-product div.product>.woocommerce-product-gallery.images {
    grid-column: 1;
    margin: 0;
    position: sticky;
}

.single-product div.product>.summary.entry-summary {
    grid-column: 2;
    margin: 0;
}

.single-product div.product>.woocommerce-tabs,
.single-product div.product>.upsells,
.single-product div.product>.related {
    grid-column: 1 / -1;
}

/* WooCommerce float reset */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary {
    float: none !important;
    width: auto !important;
}

@media (max-width: 900px) {
    .single-product div.product {
        grid-template-columns: 1fr;
    }

    .single-product div.product>.woocommerce-product-gallery.images,
    .single-product div.product>.summary.entry-summary {
        grid-column: 1;
        /* WooCommerce zet zelf position:relative op de galerij; die wint van de
           static hierboven en nam de top: 7.5rem van de sticky-regel mee. De
           galerij schoof daardoor 120px omlaag over de titel heen. Expliciet op
           auto zetten, zodat de foto's boven en de titel eronder staan. */
        position: relative;
        top: auto;
    }

    /* De zoom-overlay is een absoluut geplaatste kopie van de foto op ware
       grootte (800px). Op een telefoon valt die buiten de galerij en ligt hij
       onzichtbaar over de titel en de bestelknop heen — en zoomen op hover
       heeft op touch toch geen functie. */
    .single-product div.product .woocommerce-product-gallery img.zoomImg {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   Samenvatting (rechterkolom)
   -------------------------------------------------------------------------- */
.single-product div.product .product_title {
    margin: 0 0 .85rem;
    font-size: clamp(1.9rem, 3.6vw, 2.7rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--sk-primary);
}

.single-product div.product .summary .woocommerce-product-details__short-description {
    margin: 0 0 1.75rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--sk-muted);
}

.single-product .summary .woocommerce-product-details__short-description p:last-child {
    margin-bottom: 0;
}

/* Let op: de selectors hieronder zijn bewust wat langer (div.product erbij).
   WooCommerce' eigen stylesheet mikt met .woocommerce div.product p.price op
   dezelfde elementen; zonder die extra class wint de plugin. */
.single-product div.product .summary>.price,
.single-product div.product .summary .woocommerce-variation-price .price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .1rem .5rem;
    margin: 0 0 1.75rem;
    font-size: clamp(1.6rem, 3vw, 2.05rem);
    line-height: 1.15;
    font-weight: 800;
    color: var(--sk-primary);
}

.single-product div.product .summary .price del {
    font-size: .55em;
    font-weight: 500;
    color: var(--sk-muted);
}

.single-product div.product .summary .price ins {
    text-decoration: none;
    color: var(--sk-accent);
}

.single-product div.product .summary .signijkerk-price-per-kg {
    font-size: .95rem;
    font-weight: 600;
    color: var(--sk-muted);
}

/* WooCommerce zet de prijs van het gekozen gewicht in het variatieblok, onder
   de keuzelijst. assets/js/product.js zet diezelfde prijs bovenaan (waar de
   range stond); dan is het blok eronder dubbelop. */
.single-product div.product.sk-js .woocommerce-variation-price {
    display: none;
}

/* De variatieprijs komt als <span class="price"> binnen in de <p class="price">
   hierboven — die mag geen eigen (WooCommerce-)opmaak meenemen. */
.single-product div.product .summary>.price .price,
.single-product div.product .summary>.price span.amount {
    font: inherit;
    color: inherit;
}

/* --------------------------------------------------------------------------
   Keuzelijst (gewicht) — variaties
   -------------------------------------------------------------------------- */
.single-product div.product .summary form.cart {
    display: block;
    margin: 0 0 1.5rem;
}

.single-product div.product form.cart .sk-variations {
    margin: 0 0 1.25rem;
}

.sk-variation+.sk-variation {
    margin-top: 1rem;
}

.sk-variation__label {
    display: block;
    margin-bottom: .5rem;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--sk-primary);
}

/* Zonder JS blijft de gewone <select> zichtbaar — dan wel netjes gestyled. */
.single-product div.product form.cart .sk-variation__control select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 60px;
    padding: .85rem 3rem .85rem 1.1rem;
    border: 1.5px solid var(--sk-border);
    border-radius: 14px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7785' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.1rem center;
    background-size: 20px 20px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sk-primary);
    cursor: pointer;
}

.sk-select {
    position: relative;
}

/* Bij JS-verrijking blijft de select bestaan (WooCommerce leest hem uit),
   maar buiten beeld: de knop hieronder neemt de bediening over. */
.sk-select select.sk-select__native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    pointer-events: none;
}

.sk-select__toggle {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 60px;
    padding: .8rem 1.1rem;
    border: 1.5px solid var(--sk-border);
    border-radius: 14px;
    background: #fff;
    font: inherit;
    text-align: left;
    color: var(--sk-ink);
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.sk-select__toggle:hover {
    border-color: color-mix(in srgb, var(--sk-primary) 35%, var(--sk-border));
}

.sk-select__toggle:focus-visible,
.sk-select.is-open .sk-select__toggle {
    outline: none;
    border-color: var(--sk-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--sk-accent) 18%, transparent);
}

.sk-select__value {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.sk-select__label {
    font-weight: 700;
    color: var(--sk-primary);
}

.sk-select__placeholder {
    font-weight: 500;
    color: var(--sk-muted);
}

.sk-select__meta {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    flex: none;
}

.sk-select__price {
    font-weight: 800;
    white-space: nowrap;
    color: var(--sk-ink);
}

.sk-select__note {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    color: var(--sk-accent);
}

.sk-select__chevron {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--sk-muted);
    transition: transform .2s ease;
}

.sk-select.is-open .sk-select__chevron {
    transform: rotate(180deg);
}

.sk-select__list {
    position: absolute;
    z-index: 20;
    top: calc(100% + .45rem);
    left: 0;
    right: 0;
    max-height: 340px;
    overflow-y: auto;
    margin: 0;
    padding: .4rem;
    list-style: none;
    background: #fff;
    border: 1px solid var(--sk-border);
    border-radius: 14px;
    box-shadow: var(--sk-shadow-hover);
}

.sk-select__list[hidden] {
    display: none;
}

.sk-select__list:focus-visible {
    outline: none;
}

.sk-select__option {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem .9rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s ease;
}

.sk-select__option+.sk-select__option {
    margin-top: 2px;
}

.sk-select__option:hover,
.sk-select__option.is-active {
    background: var(--sk-secondary);
}

.sk-select__option.is-selected {
    background: color-mix(in srgb, var(--sk-accent) 12%, #fff);
}

.sk-select__option.is-disabled {
    opacity: .45;
    cursor: not-allowed;
}

.sk-variations .reset_variations {
    display: inline-block;
    margin-top: .6rem;
    font-size: .85rem;
    color: var(--sk-muted);
}

/* --------------------------------------------------------------------------
   Bestelblok: aantal + knop
   -------------------------------------------------------------------------- */
.single-product div.product .summary form.cart:not(.variations_form),
.single-product div.product .summary .woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .75rem;
}

.single-product div.product .summary .quantity {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid var(--sk-border);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.single-product div.product .summary .quantity input.qty {
    width: 60px;
    height: 60px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--sk-primary);
    -moz-appearance: textfield;
}

.single-product div.product .summary .quantity input.qty::-webkit-outer-spin-button,
.single-product div.product .summary .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sk-quantity__step {
    flex: none;
    width: 44px;
    border: 0;
    background: transparent;
    color: var(--sk-primary);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}

.sk-quantity__step:hover {
    background: var(--sk-secondary);
}

.single-product div.product .summary button.single_add_to_cart_button {
    flex: 1 1 220px;
    min-height: 60px;
    padding: .9rem 2rem;
    border-radius: 14px;
    background: var(--sk-accent);
    font-size: 1rem;
    letter-spacing: .02em;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--sk-accent) 28%, transparent);
    transition: background .2s ease, box-shadow .2s ease, transform .1s ease;
}

.single-product div.product .summary button.single_add_to_cart_button:hover {
    background: color-mix(in srgb, var(--sk-accent) 86%, #000);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--sk-accent) 34%, transparent);
}

.single-product div.product .summary button.single_add_to_cart_button:active {
    transform: translateY(1px);
}

.single-product div.product .summary button.single_add_to_cart_button.disabled {
    background: var(--sk-muted);
    box-shadow: none;
    cursor: not-allowed;
}

/* Variatieblok (prijs, voorraad, melding) */
.single-product .single_variation_wrap {
    margin-top: 1.25rem;
}

.single-product .woocommerce-variation-description p:last-child {
    margin-bottom: .75rem;
}

.single-product .woocommerce-variation-availability {
    margin-bottom: 1rem;
}

.single-product div.product .woocommerce-variation-availability p.stock {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: color-mix(in srgb, #4f8a3d 12%, #fff);
    font-size: .85rem;
    font-weight: 700;
    color: #3d6d2f;
}

.single-product div.product .woocommerce-variation-availability p.stock::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.single-product div.product .woocommerce-variation-availability p.out-of-stock {
    background: color-mix(in srgb, #b32d2e 10%, #fff);
    color: #b32d2e;
}

.single-product .wc-no-matching-variations {
    padding: .8rem 1rem;
    border-radius: 10px;
    background: var(--sk-light);
    font-size: .9rem;
    color: var(--sk-muted);
}

/* --------------------------------------------------------------------------
   USP-bullets (beheer via WooCommerce → Productpagina)
   -------------------------------------------------------------------------- */
.single-product div.product .sk-usps {
    display: grid;
    gap: .9rem;
    margin: 1.75rem 0 0;
    padding: 1.35rem 1.4rem;
    list-style: none;
    background: color-mix(in srgb, var(--sk-secondary) 55%, #fff);
    border-radius: 16px;
}

.sk-usp {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 0;
    font-size: .95rem;
    line-height: 1.4;
    color: var(--sk-ink);
}

.sk-usp__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    color: var(--sk-accent);
    box-shadow: 0 1px 3px rgba(16, 40, 63, .08);
}

.sk-usp__icon img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.sk-usp__icon svg {
    width: 20px;
    height: 20px;
}

/* --------------------------------------------------------------------------
   Koe-schema (deel van het rund, instelbaar per product)

   Elk deel heeft een eigen tekening in assets/images/koe/<sleutel>.svg, met de
   markering al in het bestand zelf. Hier alleen de omlijsting en het formaat.
   -------------------------------------------------------------------------- */
.single-product div.product .sk-cow {
    margin: 1.5rem 0 0;
    padding: 1.25rem 1.4rem 1.1rem;
    background: color-mix(in srgb, var(--sk-secondary) 35%, #fff);
    border-radius: 16px;
}

.sk-cow__figure {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    margin: 0 auto;
}

.sk-cow__caption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: .5rem;
    margin-top: .75rem;
    font-size: .9rem;
    color: var(--sk-muted);
}

.sk-cow__part {
    font-weight: 700;
    color: var(--sk-accent);
}

/* --------------------------------------------------------------------------
   Productmeta (SKU, categorieën)
   -------------------------------------------------------------------------- */
.single-product div.product .product_meta {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--sk-border);
    font-size: .85rem;
    color: var(--sk-muted);
}

.single-product .product_meta a {
    color: var(--sk-muted);
}

.single-product .product_meta a:hover {
    color: var(--sk-accent);
}

/* --------------------------------------------------------------------------
   Foto-galerij / slider
   -------------------------------------------------------------------------- */
.woocommerce-product-gallery {
    position: relative;
}

.woocommerce-product-gallery__wrapper {
    margin: 0;
}

/* Ronde hoeken op de wrapper (met clip) i.p.v. op de afbeelding zelf, zodat
   de schuivende foto's tijdens het sliden geen losse ronde hoeken tonen. */
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery__wrapper {
    border-radius: 18px;
    overflow: hidden;
    background: var(--sk-light);
}

/* De grote afbeeldingen zelf geen eigen radius meer geven. */
.woocommerce-product-gallery .flex-viewport img,
.woocommerce-product-gallery__wrapper img {
    border-radius: 0;
}

.flex-control-thumbs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin: .9rem 0 0;
    padding: 0;
    list-style: none;
}

.flex-control-thumbs li {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
}

.flex-control-thumbs img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    opacity: .55;
    cursor: pointer;
    transition: opacity .2s ease, box-shadow .2s ease;
}

.flex-control-thumbs img.flex-active,
.flex-control-thumbs img:hover {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--sk-accent);
}

.woocommerce-product-gallery__trigger {
    z-index: 3;
}

.woocommerce div.product div.images .flex-control-thumbs {
    margin-top: .9rem;
}

/* --------------------------------------------------------------------------
   Tabellen (pakketinhoud, specificaties)
   -------------------------------------------------------------------------- */
.woocommerce-product-details__short-description table,
.woocommerce table.shop_attributes,
.signijkerk-package__table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: .95rem;
}

.woocommerce-product-details__short-description table th,
.woocommerce-product-details__short-description table td,
.signijkerk-package__table th,
.signijkerk-package__table td {
    padding: .7rem .9rem;
    border: 1px solid var(--sk-border);
    text-align: left;
    vertical-align: top;
}

/* --------------------------------------------------------------------------
   Uitklap-secties (accordions)
   -------------------------------------------------------------------------- */
.sk-accordion {
    margin-top: 2.25rem;
    border-top: 1px solid var(--sk-border);
}

.sk-accordion__item {
    border-bottom: 1px solid var(--sk-border);
}

.sk-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 0;
    list-style: none;
    cursor: pointer;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--sk-primary);
    transition: color .15s ease;
}

.sk-accordion__summary::-webkit-details-marker,
.sk-accordion__summary::marker {
    display: none;
    content: '';
}

.sk-accordion__summary:hover {
    color: var(--sk-accent);
}

.sk-accordion__summary:focus-visible {
    outline: 2px solid var(--sk-accent);
    outline-offset: 3px;
    border-radius: 6px;
}

.sk-accordion__chevron {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--sk-muted);
    transition: transform .25s ease;
}

.sk-accordion__item[open]>.sk-accordion__summary .sk-accordion__chevron {
    transform: rotate(180deg);
}

.sk-accordion__panel {
    overflow: hidden;
    transition: height .3s ease;
}

.sk-accordion__content {
    padding: 0 0 1.5rem;
    line-height: 1.7;
    color: var(--sk-ink);
}

.sk-accordion__content>*:first-child {
    margin-top: 0;
}

.sk-accordion__content>*:last-child {
    margin-bottom: 0;
}

/* Tabellen binnen een sectie: alleen rijlijnen, dat oogt rustiger. */
.sk-accordion__content table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: .95rem;
}

.sk-accordion__content .signijkerk-package__table th[scope="row"],
.sk-accordion__content table.shop_attributes th,
.sk-accordion__content table.shop_attributes td,
.sk-accordion__content table th,
.sk-accordion__content table td {
    padding: .75rem 0;
    border: 0;
    border-bottom: 1px solid var(--sk-border);
    background: none;
    text-align: left;
    vertical-align: top;
}

.sk-accordion__content .signijkerk-package__table th[scope="row"],
.sk-accordion__content table.shop_attributes th,
.sk-accordion__content table th {
    width: 45%;
    font-weight: 600;
    color: var(--sk-primary);
}

.sk-accordion__content table tr:last-child th,
.sk-accordion__content table tr:last-child td {
    border-bottom: 0;
}

.sk-accordion__content table p {
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {

    .sk-accordion__panel,
    .sk-accordion__chevron,
    .sk-select__chevron {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Gerelateerde producten / upsells
   -------------------------------------------------------------------------- */
.related,
.upsells {
    margin-top: 4rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--sk-border);
}

.related>h2,
.upsells>h2 {
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
    color: var(--sk-primary);
}

/* ==========================================================================
   Algemene knoppen / notices (shop, cart, checkout)
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
    background: var(--sk-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .85rem 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    transition: background .2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
    background: var(--sk-accent);
    color: #fff;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-top-color: var(--sk-accent);
    border-radius: 8px;
}

.woocommerce-message a.button,
.woocommerce-info a.button {
    padding: .5rem 1rem;
    text-transform: none;
}

.woocommerce-result-count {
    color: var(--sk-muted);
}

.woocommerce-ordering select {
    padding: .5rem .75rem;
    border: 1px solid var(--sk-border);
    border-radius: 8px;
}

.woocommerce nav.woocommerce-pagination ul {
    border: 0;
    gap: .4rem;
    display: inline-flex;
}

.woocommerce nav.woocommerce-pagination ul li {
    border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    border: 1px solid var(--sk-border);
    border-radius: 8px;
    color: var(--sk-primary);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--sk-primary);
    color: #fff;
    border-color: var(--sk-primary);
}