/*
Theme Name:   Ollie Child
Description:  Child theme van het Ollie theme
Template:     ollie
Version:      1.0.0
Text Domain:  ollie-child
*/

.has-italianno-font-family {font-weight: normal !important;}
.has-italianno-font-family.has-x-small-font-size { font-size: calc(var(--wp--preset--font-size--x-small) + 1.7rem) !important; }
.has-italianno-font-family.has-small-font-size { font-size: calc(var(--wp--preset--font-size--small) + 1.7rem) !important; }
.has-italianno-font-family.has-base-font-size { font-size: calc(var(--wp--preset--font-size--base) + 1.7rem) !important; }
.has-italianno-font-family.has-medium-font-size { font-size: calc(var(--wp--preset--font-size--medium) + 1.7rem) !important; }
.has-italianno-font-family.has-large-font-size { font-size: calc(var(--wp--preset--font-size--large) + 1.7rem) !important; }
.has-italianno-font-family.has-x-large-font-size { font-size: calc(var(--wp--preset--font-size--x-large) + 1.7rem) !important; }
.has-italianno-font-family.has-xx-large-font-size { font-size: calc(var(--wp--preset--font-size--xx-large) + 1.7rem) !important; }

.wp-block-group.tw-stretched-link img{
    transition: transform 0.4s ease;
}
.wp-block-group.tw-stretched-link .wc-block-components-product-image{
    overflow: hidden;
}

.wp-block-group.tw-stretched-link:hover img {
    transform: scale(1.1);
}


@media (max-width: 781px) {
    .wp-block-cover.min-height-unset:not(.has-aspect-ratio) {
        min-height: unset !important;
    }
}


:where(.wc-block-product-gallery-large-image) .wc-block-components-product-image.wc-block-components-product-image.wc-block-components-product-image--aspect-ratio-auto img {
    object-fit: cover !important;
}


/* Maak de header ALLEEN op de homepage zwevend en transparant */
.archive header.wp-block-template-part,
.home header.wp-block-template-part,
.page-template-archief header.wp-block-template-part { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  background-color: transparent !important;
}




.raster-patroon{
    align-items: center;
}

.raster-patroon > li:nth-of-type(3n + 4) .wc-block-components-product-image{
border-radius: 1000px
}
.raster-patroon > li:nth-of-type(3n + 4) .wc-block-components-product-image img {
    aspect-ratio: 3 / 5 !important; 
}


/* .wc-block-product-template > li:nth-of-type(3n + 4) .wc-block-components-product-image{
border-radius: 1000px
}
.wc-block-product-template > li:nth-of-type(3n + 4) .wc-block-components-product-image img {
    aspect-ratio: 3 / 5 !important; 
} */


/* Geef de hero ALLEEN op de homepage extra ruimte aan de bovenkant */
/* .home .hero-patroon-overlay {
  padding-top: 140px !important; /* Pas aan op basis van de hoogte van je menu 
} */

.main-slider .wc-block-featured-category,
.main-slider .wp-block-cover
{
min-height: 50px !important;
max-height: 30vh !important;
}

/* 
.wp-site-blocks {
  display: grid !important;
  grid-template-columns: 1fr !important;
}

.wp-site-blocks > header.wp-block-template-part {
  grid-row: 1 !important;
  grid-column: 1 !important;
  align-self: start !important;
  z-index: 2 !important;
  position: relative !important;
}

.wp-site-blocks > main.site-content {
  grid-row: 1 !important;
  grid-column: 1 !important;
  z-index: 1 !important;
} */

/* ==========================================================================
   Custom Button Styles (Gutenberg)
   ========================================================================== */

/* 1. Basis Variant (Wit) */
.wp-block-button.is-style-basis .wp-block-button__link {
    background-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--main);
    border: 1px solid var(--wp--preset--color--border-light);
}
.wp-block-button.is-style-basis .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--main);
}

/* 2. Merknaam Variant (Oranje) */
.wp-block-button.is-style-merknaam .wp-block-button__link {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--main);
}
.wp-block-button.is-style-merknaam .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--main);
    color: var(--wp--preset--color--base);
}

/* 3. Contrast Variant (Bruin) */
.wp-block-button.is-style-contrast .wp-block-button__link {
    background-color: var(--wp--preset--color--main);
    color: var(--wp--preset--color--base);
}
.wp-block-button.is-style-contrast .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--main);
}

/* 4. Merk Alt Variant (Goud/Brons) */
.wp-block-button.is-style-merk-alt .wp-block-button__link {
    background-color: var(--wp--preset--color--primary-alt);
    color: var(--wp--preset--color--base);
}
.wp-block-button.is-style-merk-alt .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--primary-alt-accent);
    color: var(--wp--preset--color--base);
}

/* 5. Outline Contrast Variant */
.wp-block-button.is-style-outline-contrast .wp-block-button__link {
    background-color: transparent;
    border: 2px solid var(--wp--preset--color--border-dark);
    color: var(--wp--preset--color--main);
}
.wp-block-button.is-style-outline-contrast .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--main);
    color: var(--wp--preset--color--base);
}