/* Fontti ja tyylit otsikoille */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
}

/* Päivittää sivun otsikon kohdistuksen */
.entry-title,
.post-type-archive-product .page-title {
    text-align: center;
}

/* Muuttaa ostoskorin widgetin väriä otsikossa */
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
    background-color: white;
    color: #242329;
}

/* Muuttaa WooCommerce-painikkeiden taustavärin */
body[class*="woocommerce"] #page .woocommerce button.button,
body[class*="woocommerce"] #page .woocommerce input.button,
body[class*="woocommerce"] #page .woocommerce a.button,
body[class*="woocommerce"] #page .woocommerce .widget_shopping_cart .buttons a,
body[class*="woocommerce"] #page .woocommerce #respond input#submit,
body[class*="woocommerce"] #page .woocommerce a.added_to_cart {
    background: #242329;
    color: #ffffff;
}

/* Muuttaa WooCommerce-painikkeiden hover-taustavärin */
body[class*="woocommerce"] #page .woocommerce button.button:hover,
body[class*="woocommerce"] #page .woocommerce input.button:hover,
body[class*="woocommerce"] #page .woocommerce a.button:hover,
body[class*="woocommerce"] #page .woocommerce .widget_shopping_cart .buttons a:hover,
body[class*="woocommerce"] #page .woocommerce #respond input#submit:hover,
body[class*="woocommerce"] #page .woocommerce a.added_to_cart:hover,
body[class*="woocommerce"] #page .woocommerce button.button:focus,
body[class*="woocommerce"] #page .woocommerce input.button:focus,
body[class*="woocommerce"] #page .woocommerce a.button:focus,
body[class*="woocommerce"] #page .woocommerce .widget_shopping_cart .buttons a:focus,
body[class*="woocommerce"] #page .woocommerce #respond input#submit:focus,
body[class*="woocommerce"] #page .woocommerce a.added_to_cart:focus,
body[class*="woocommerce"] #page .woocommerce button.has-focus.button,
body[class*="woocommerce"] #page .woocommerce input.has-focus.button,
body[class*="woocommerce"] #page .woocommerce a.has-focus.button,
body[class*="woocommerce"] #page .woocommerce .widget_shopping_cart .buttons a.has-focus,
body[class*="woocommerce"] #page .woocommerce #respond input.has-focus#submit,
body[class*="woocommerce"] #page .woocommerce a.has-focus.added_to_cart {
    background: #172f18;
    color: #ffffff;
}

/* Muuttaa kaikkien linkkien värin vaaleanharmaaksi hover-tilassa */
a:hover {
    color: #D3D3D3 !important;
}

/* Estää painikkeiden linkkien värin muuttumisen, säilyttää valkoisen värin */
a.button:hover,
a.btn:hover,
button a:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
a.wp-block-button__link:hover {
    color: #FFFFFF !important;
}

/* WooCommerce tuotenimien fonttikoko */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 20px !important;
}

/* Rajaa tuotenimien korkeutta */
.woocommerce ul.products li.product h2 {
    line-height: 3ex;
    height: 6ex; 
    overflow: hidden;
}

/* Responsiiviset säädöt tuotteiden asettelulle */
@media (max-width: 767px) {
    body.et-db #et-boc .et-l .et_pb_shop ul.products.columns-1 li.product, 
    body.et-db #et-boc .et-l .et_pb_shop ul.products.columns-2 li.product, 
    body.et-db #et-boc .et-l .et_pb_shop ul.products.columns-3 li.product, 
    body.et-db #et-boc .et_pb_shop ul.products.columns-4 li.product, 
    body.et-db #et-boc .et_pb_shop ul.products.columns-5 li.product, 
    body.et-db #et-boc .et_pb_shop ul.products.columns-6 li.product, 
    body.et-db #et-boc .et_pb_wc_related_products ul.products.columns-1 li.product,  
    body.et-db #et-boc .et_pb_wc_related_products ul.products.columns-2 li.product,  
    body.et-db #et-boc .et_pb_wc_related_products ul.products.columns-3 li.product, 
    body.et-db #et-boc .et_pb_wc_related_products ul.products.columns-4 li.product, 
    body.et-db #et-boc .et_pb_wc_related_products ul.products.columns-5 li.product, 
    body.et-db #et-boc .et_pb_wc_related_products ul.products.columns-6 li.product, 
    body.et-db #et-boc .et_pb_wc_upsells ul.products.columns-1 li.product, 
    body.et-db #et-boc .et_pb_wc_upsells ul.products.columns-2 li.product, 
    body.et-db #et-boc .et_pb_wc_upsells ul.products.columns-3 li.product, 
    body.et-db #et-boc .et_pb_wc_upsells ul.products.columns-4 li.product, 
    body.et-db #et-boc .et_pb_wc_upsells ul.products.columns-5 li.product, 
    body.et-db #et-boc .et_pb_wc_upsells ul.products.columns-6 li.product {
        width: 100% !important;
        margin-right: 0 !important;
    }
    
    .woocommerce-page ul.products li.product:nth-child(n) {
        margin: 0 0 11.5% !important;
        width: 100% !important;
    }

    .home .wp-block-cover .wp-block-cover__inner-container, 
    .home .wp-block-cover-image .wp-block-cover__inner-container {
        width: 100%;
    }

    .home .wp-block-cover .wp-block-cover__inner-container h2, 
    .home .wp-block-cover-image .wp-block-cover__inner-container h2 {
        font-size: 34px !important;
    }

    .custom-heading-homepage-class {
        font-size: 20px;
    }
}

/* Sisällön leveyden säätö WooCommerce kauppasivulla */
@media (min-width: 1080px) {
    .woocommerce-shop #woocommerce-wrapper {
        max-width: 960px;
    }
}

/* Piilota kirjoittajan nimi yksittäisissä blogikirjoituksissa */
span.author.vcard {
    font-size: 0;
}

/* Estä linkin oletusvärin muuttaminen tietyissä luokissa */
.ignore-color a {
    color: white !important;
}

/* Tuoteotsikon fontti WooCommerce ruudukossa */
#content .wc-block-grid .wc-block-grid__product-title {
    font-family: "Josefin Slab";
    font-weight: 300;
    text-transform: uppercase;
}

#content .wc-block-grid .wc-block-grid__product-link {
    text-decoration: none;
}

/* Kohdista painikkeet tuoteruudukossa */
@media (min-width: 481px) {
    .wc-block-grid .wc-block-grid__product {
        display: flex;
        flex-flow: column;
    }
    
    .wc-block-grid .wc-block-grid__product > :not(:last-child) {
        margin-bottom: 8px;
    }
    
    .wc-block-grid .wc-block-grid__product > :not(:first-child) {
        margin-top: 8px;
    }

    .wc-block-grid .wc-block-grid__product .wp-block-button {
        margin-top: auto !important;
    }
}
.instagram-embed {
    max-width: 650px; /* Set the Instagram size */
    width: 100%; /* Make it responsive */
    display: inline-block; /* Allow Instagram to sit next to Pinterest */
    vertical-align: top; /* Align it properly with Pinterest */
}
/* Hide the original optional text */
label[for="shipping_phone"] .optional {
    display: none;
}
.wc-block-product-filter-chips__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}

.wc-block-product-filter-chips__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.7rem;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.wc-block-product-filter-chips__item:hover {
  background-color: #ececec;
  border-color: #aaa;
}

.wc-block-product-filter-chips__item[aria-checked="true"] {
  background-color: #333;
  color: #fff;
  border-color: #333;
}

.wc-block-product-filter-chips__label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.wc-block-product-filter-chips__count {
  font-size: 0.9em;
  color: #777;
  margin: 0;
  padding: 0;
}

.wc-block-product-filter-chips__item br {
  display: none;
}
/* Compact product filter chips with Lora font and hover fix */
.wc-block-product-filter-chips__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}

.wc-block-product-filter-chips__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.7rem;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-family: "Lora", serif;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.wc-block-product-filter-chips__item:hover {
  background-color: #264d26; /* dark green on hover */
  border-color: #264d26;
  color: #fff;
}

.wc-block-product-filter-chips__item:hover .wc-block-product-filter-chips__count {
  color: #fff;
}

.wc-block-product-filter-chips__item[aria-checked="true"] {
  background-color: #264d26; /* dark green when selected */
  color: #fff;
  border-color: #264d26;
}

.wc-block-product-filter-chips__item[aria-checked="true"] .wc-block-product-filter-chips__count {
  color: #fff;
}

.wc-block-product-filter-chips__label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-family: "Lora", serif;
}

.wc-block-product-filter-chips__count {
  font-size: 0.9em;
  color: #333;
  margin: 0;
  padding: 0;
  font-family: "Lora", serif;
}

.wc-block-product-filter-chips__item br {
  display: none;
}
/* === Sync color transitions for category chips === */

/* Apply the same transition timing to all elements */
.wc-block-product-filter-chips__item,
.wc-block-product-filter-chips__item .wc-block-product-filter-chips__count {
  transition: background-color 0.2s ease-in-out,
              color 0.2s ease-in-out,
              border-color 0.2s ease-in-out;
}

/* Hover state — all colors change together */
.wc-block-product-filter-chips__item:hover {
  background-color: #264d26; /* dark green */
  border-color: #264d26;
  color: #fff;
}

.wc-block-product-filter-chips__item:hover .wc-block-product-filter-chips__count {
  color: #fff;
}

/* Active/selected state — same timing and color sync */
.wc-block-product-filter-chips__item[aria-checked="true"] {
  background-color: #264d26;
  border-color: #264d26;
  color: #fff;
}

.wc-block-product-filter-chips__item[aria-checked="true"] .wc-block-product-filter-chips__count {
  color: #fff;
}