/* Bigger Logo in Header **/

.wp-block-template-part {
    height: 80px;
}

.wp-block-site-logo {
    box-sizing: border-box;
    line-height: 0;
    width: 200px;
}

.custom-logo {
    width: 200px;
}

/* Padding left for social media on header **/
.wp-block-social-links.has-icon-color.is-style-logos-only.is-horizontal.is-content-justification-right.is-nowrap.is-layout-flex.wp-container-4 {
    padding-left: 134px;
}

/* Cart adjustments */
body.woocommerce-cart form.woocommerce-cart-form {
    background: white;
    width: 60%;
}

/* General button styles */
.wp-block-button__link.wp-element-button {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    transition: background-color 0.3s, color 0.3s;
}

/* Hover effect for all buttons */
.wp-block-button__link.wp-element-button:hover {
    background-color: white;
    color: black;
}

/* Hide product listing grid & sorting dropdown from main shop page */
body.post-type-archive-product .woocommerce-ordering,
body.post-type-archive-product ul.products,
body.post-type-archive-product p.woocommerce-result-count,
body.post-type-archive-product nav.woocommerce-pagination,
body.post-type-archive-product div.custom-sorting-bar{
    display: none;
}

.woocommerce-product-gallery__trigger,
.custom-sorting-bar,
.woocommerce-result-count,
.orderby{
    display: none !important;
}


/* Add margin or padding to the entire mobile view */
@media (max-width: 768px) {
    /* Apply padding to the product area */
    /*.product {
        padding-left: 20px;
        padding-right: 20px;
    }*/
	/* Add padding to the entire website */
	.wf-karla-n4-active {
        padding-left: 20px;
        padding-right: 20px;
    }
}


@media (max-width: 768px) {
    /* Ensure no hover effect for images on mobile */
    .woocommerce-product-gallery__image img {
        pointer-events: none; /* Disable pointer events to prevent accidental interaction */
    }
}


/* Style WooCommerce Products Header */
.woocommerce-products-header {
    text-align: center; /* Align header to center */
    font-family: var(--wp--preset--font-family--poppins); /* Apply Poppins font */
    font-weight: bold; /* Make it bold */
    margin-bottom: 30px; /* Add some spacing if needed */
}

/* Ensure the h1 or h2 inside the header uses the correct styling */
.woocommerce-products-header h1, 
.woocommerce-products-header h2 {
    font-family: var(--wp--preset--font-family--poppins); /* Ensure header text uses Poppins */
    font-weight: bold; /* Bold text */
    text-align: center; /* Center text */
    line-height: 2.03; /* Apply custom line height */
}


/* Make product titles bold in WooCommerce */
.woocommerce-loop-product__title {
    font-weight: bold !important; /* Make product titles bold */
}


/* Show "Out of Stock" text on product listings */
.woocommerce ul.products li.product.outofstock .price:after {
  content: "Out of Stock";
  display: block;
  color: #ff0000;
  font-weight: bold;
}