/* ===============================
   FONT
================================= */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap');

body,
.woocommerce,
.woocommerce-page {
    font-family: 'Quicksand', sans-serif;
}

/* Global box sizing + overflow fix */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
}

/* ===============================
   HEADER SPACING (CORRECTLY SCOPED)
   Only pages that NEED offset get it
================================= */

===============================
   HEADINGS (ALL WOOCOMMERCE)
================================= */
.woocommerce-shop .page-title,
.woocommerce-page .page-title,
h1.page-title,
.woocommerce-cart h1,
.woocommerce-checkout h1,
.woocommerce-checkout .page-title,
.single-product .product_title {
    font-weight: 700;
    text-align: center;

    background: linear-gradient(90deg, #c02cc0, #fec21d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    font-size: clamp(28px, 5vw, 60px);

    width: 100%;
    margin: 0 auto;
    padding: 0 10px;

    overflow-wrap: anywhere;
}

/* Product title override colour tweak */
.single-product .product_title {
    background: linear-gradient(90deg, #c02cc0, #fec21d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ===============================
   BUTTONS
================================= */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.single_add_to_cart_button {
    background-color: #1f43c5 !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700;
}

/* Hover */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single_add_to_cart_button:hover {
    background-color: #c02cc0 !important;
    color: #ffffff !important;
}

/* WooCommerce Blocks buttons */
body:not(.woocommerce-block-theme-has-button-styles)
.wc-block-components-button:not(.is-link) {
    background-color: #c02cc0 !important;
    color: #ffffff !important;
    font-weight: 700;
    border: none !important;
}

body:not(.woocommerce-block-theme-has-button-styles)
.wc-block-components-button:not(.is-link):hover {
    background-color: #1f43c5 !important;
}

/* ===============================
   PRICES
================================= */
.woocommerce .price,
.woocommerce .price .amount {
    color: #56c821 !important;
    font-weight: 700 !important;
}



@media (max-width: 768px) {

    /* Centre the cart layout container */
    body.woocommerce-cart .woocommerce {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Keep cart table usable (don’t fully centre text inside it) */
    body.woocommerce-cart .woocommerce-cart-form {
        width: 100%;
        max-width: 600px;
    }

    /* Centre totals box */
    body.woocommerce-cart .cart-collaterals {
        width: 100%;
        max-width: 500px;
    }
}

.wp-block-woocommerce-cart {display: grid;
	place-items: center;}

.alignwide {margin-inline: 0px !important}

.woocommerce-shop .page-title, .woocommerce-page .page-title, h1.page-title, .woocommerce-cart h1, .woocommerce-checkout h1, .woocommerce-checkout .page-title, .single-product .product_title {padding-top: 300px; padding-bottom: 30px}

body.single-product .product {
    margin-top: 300px;
}

.woocommerce-product-search {
    margin-bottom: 20px;
    text-align: center;
}
.woocommerce-product-search {
    display: flex;
    justify-content: flex-start;
}

.woocommerce-product-search input[type="search"] {
    width: 300px; /* adjust if needed */
}

.product-filters {
    margin: 20px 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.product-filters a {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    text-decoration: none;
}

.product-filters {
    display: flex;
    justify-content: flex-end;
}

.filter-button {
    display: none;
}

@media (max-width: 768px) {

    .filter-button {
        display: block;
        width: 100%;
        padding: 12px;
        background: #1f43c5;
        color: #fff;
        font-weight: 700;
        text-align: center;
        cursor: pointer;
        margin-bottom: 10px;
    }

    /* hide checkbox but keep it functional */
    #filter-toggle {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
    }

    /* HIDE filters by default */
    .product-filters {
        display: none;
        flex-direction: column;
        gap: 10px;
    }

    /* SHOW when checked */
    #filter-toggle:checked ~ .product-filters {
        display: flex;
    }
}