/*
 * WooCommerce Blocks - Cart, Checkout, Single Product, Shop
 * ---------------------------------------------------------------------------
 * Moved verbatim out of the Customizer's "Additional CSS" so it lives in the
 * theme: under version control, visible in diffs, and safe from a theme
 * rebuild or a Customizer mishap.
 *
 * It is printed at wp_head priority 101 (see kinderkutak_blocks_css() in
 * functions.php) - exactly where wp-custom-css used to print - so the cascade
 * order is unchanged: css/main.css, then this, then css/tailwind.css.
 *
 * The Cart and Checkout pages are Gutenberg blocks rendered by React, so the
 * classic PHP templates never load for them. This stylesheet is the only thing
 * styling those two pages.
 *
 * IMPORTANT: once this is confirmed working, clear the Customizer's Additional
 * CSS. Leaving both in place means every rule is parsed twice.
 */

/* Removed: ".woocommerce form .form-row label { display: inline }".
   Every label here already carries Tailwind's `block`, from the templates
   directly or from the woocommerce_form_field_args filter. The rule beat those
   on specificity, and labels only appeared stacked because the inputs are
   w-full and pushed themselves onto the next line. */

.container {
	width: 100% !important;
	max-width: 100% !important;
}

.wp-block-woocommerce-empty-cart-block {
	margin-top: 15vh
}

.wc-block-cart-item__image {
	margin-right: 1rem !important;
}


/* CART */

/* --- WooCommerce Gutenberg Cart Block - Glass Theme Redesign --- */

.wc-block-components-sidebar-layout.wc-block-cart.wp-block-woocommerce-filled-cart-block {
	margin-top: 10vh;
}
/* 1. Global Cart Wrapper (Fixes Skeleton Loading stretching) */
.wp-block-woocommerce-cart {
    max-width: 1280px !important;
    margin: 0 auto !important;
    width: 100% !important;
    /* Matches your theme's px-margin-mobile */
    padding-left: 20px !important;
    padding-right: 20px !important;
}

@media (min-width: 768px) {
    .wp-block-woocommerce-cart {
        /* Matches your theme's px-margin-desktop */
        padding-left: 64px !important;
        padding-right: 64px !important;
    }
}

/* Apply layout to ANY state inside the cart (catches the skeleton too) */
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
}

/* Force side-by-side layout strictly on desktop */
@media (min-width: 1024px) {
    .wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }

    .wp-block-woocommerce-cart .wc-block-components-main {
        flex: 1 1 65% !important;
        max-width: 65% !important;
        width: 100% !important;
    }

    .wp-block-woocommerce-cart .wc-block-components-sidebar {
        flex: 1 1 35% !important;
        max-width: 35% !important;
        width: 100% !important;
        position: sticky !important;
        top: 8rem !important;
    }
}

/* 2. Glass Panel Styling (with box-sizing fix) */
.wp-block-woocommerce-cart .wc-block-components-main,
.wp-block-woocommerce-cart .wc-block-components-sidebar {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 1rem !important;
    box-shadow: 0 8px 32px 0 rgba(255, 218, 185, 0.2) !important;
    padding: 2rem !important;
    box-sizing: border-box !important; /* CRUCIAL: Keeps padding from breaking the width */
}

/* 3. Table Headers */
.wc-block-cart-items__header th {
    color: #8a6544 !important; /* primary text */
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 600 !important;
    border-bottom: 2px solid rgba(228, 226, 225, 0.5) !important;
    padding-bottom: 1rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
}

/* 4. Product Rows */
.wc-block-cart-items__row td {
    border-bottom: 1px solid rgba(228, 226, 225, 0.5) !important;
    padding: 1.5rem .5rem !important;
}
.wc-block-cart-items__row:last-child td {
    border-bottom: none !important;
}

/* Product Name */
.wc-block-components-product-name {
    color: #1b1c1c !important;
    font-weight: 600 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    text-decoration: none !important;
    font-size: 1.125rem !important;
}

/* Product Image */
.wc-block-cart-item__image img {
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 12px rgba(255,218,185,0.3) !important;
}

/* 5. Order Summary Headings */
.wc-block-cart__totals-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #8a6544 !important;
    font-size: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    font-weight: 700 !important;
}

/* 6. Checkout Button */
.wc-block-cart__submit-button {
    background-color: #ffdab9 !important; /* primary-container */
    color: #795e44 !important; /* on-primary-container */
    border-radius: 9999px !important;
    padding: 1rem 2rem !important;
    font-weight: 600 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    transition: all 0.3s ease !important;
    border: none !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin-top: 1.5rem !important;
}
.wc-block-cart__submit-button:hover {
    box-shadow: 0 8px 24px rgba(255,218,185,0.4) !important;
    transform: translateY(-2px) !important;
    background-color: #ffdab9 !important;
    color: #795e44 !important;
}

/* 7. Quantity Selector & Inputs */
.wc-block-components-quantity-selector {
    background: #FAF7F2 !important;
    border: 1px solid rgba(128, 117, 108, 0.3) !important;
    border-radius: 0.5rem !important;
    overflow: hidden;
}
.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector__button {
    background: transparent !important;
    border: none !important;
    color: #1b1c1c !important;
}




/* --- WooCommerce Empty Cart Block - Glass Theme Redesign --- */

/* NOTE: .woocommerce-message was removed from this selector. It was hiding
   every "added to cart" / "coupon applied" notice site-wide. */
.wp-block-separator.has-alpha-channel-opacity.is-style-dots {
	display: none !important;
}


/* 1. Main Empty Cart Container */
.wp-block-woocommerce-empty-cart-block {
    padding: 4rem 2rem !important;
    margin: 10vh auto 4rem auto !important;
    max-width: 1280px !important; /* Expanded to match the rest of the site */
    text-align: center;
    box-sizing: border-box !important;
}

/* 2. Empty Cart Title & Icon */
.wc-block-cart__empty-cart__image {
    margin-bottom: 1.5rem !important;
}

.wc-block-cart__empty-cart__image svg {
    fill: #ffdab9 !important; /* Soft primary-container peach instead of harsh brown */
    width: 100px !important;
    height: 100px !important;
}

.wc-block-cart__empty-cart__title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #8a6544 !important; /* primary */
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 2rem !important;
    letter-spacing: -0.02em;
}

/* 3. Separator & Subheading */
.wp-block-woocommerce-empty-cart-block .wp-block-separator {
    border-top: 2px dashed rgba(228, 226, 225, 0.8) !important; /* surface-variant */
    border-bottom: none !important;
    margin: 2.5rem auto !important;
    max-width: 200px !important;
    opacity: 1 !important;
}

.wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title) {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #795e44 !important; /* on-primary-container */
    font-size: 1.75rem !important;
    font-weight: 600 !important;
    margin-bottom: 2.5rem !important;
}

/* 4. Fix Product Grid Layout */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 2rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.wc-block-grid__product {
    background: #FAF7F2 !important; /* surface-container-low */
    border-radius: 1.25rem !important;
    padding: 1.25rem !important;
    border: 1px solid rgba(128, 117, 108, 0.1) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.wc-block-grid__product:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(255,218,185,0.4) !important;
}

/* Product Image */
.wc-block-grid__product-image {
    margin-bottom: 1.5rem !important;
}

.wc-block-grid__product-image img {
    border-radius: 0.75rem !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

/* Product Title & Price */
.wc-block-grid__product-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #1b1c1c !important;
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    text-decoration: none !important;
    margin-bottom: 0.5rem !important;
    text-align: left !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* Prevents long titles from making cards unequal */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.wc-block-grid__product-price {
    color: #8a6544 !important;
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    margin-bottom: 1.5rem !important;
    text-align: left !important;
}

/* 5. Add to Cart Button */
.wc-block-grid__product-add-to-cart {
    margin-top: auto !important; /* Pushes button to the bottom */
}

.wc-block-grid__product-add-to-cart .wp-block-button__link {
    background-color: #ffdab9 !important; /* primary-container */
    color: #795e44 !important; /* on-primary-container */
    border-radius: 9999px !important;
    padding: 0.85rem 1.5rem !important;
    font-weight: 600 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    transition: all 0.3s ease !important;
    border: none !important;
    display: block !important;
    text-decoration: none !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
    box-shadow: 0 4px 16px rgba(255,218,185,0.6) !important;
    transform: translateY(-2px);
    background-color: #ffdab9 !important;
    color: #795e44 !important;
}

/* --- WooCommerce Single Product - Theme Redesign --- */

/* 1. Product Title */
h1.product_title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 2.5rem !important; /* headline-xl */
    font-weight: 700 !important;
    color: #1b1c1c !important; /* on-surface */
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
    letter-spacing: -0.02em !important;
}

/* 2. Product Price */
p.price {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #8a6544 !important; /* primary */
    font-size: 1.5rem !important; /* headline-md */
    font-weight: 600 !important;
    margin-bottom: 2rem !important;
}
p.price span.amount {
    color: inherit !important;
    font-weight: inherit !important;
}

/* 3. Add to Cart Row */
form.cart {
    display: flex !important;
    gap: 1rem !important;
    align-items: center !important;
    margin-bottom: 2.5rem !important;
    flex-wrap: wrap;
}

/* 4. Quantity Input */
form.cart .quantity {
    display: flex !important;
}
form.cart .quantity input.qty {
    /* No background/border here: the last rule in this file strips both with
       !important, so declaring them was dead weight. Size and spacing below
       are what actually take effect. */
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    width: 80px !important;
    height: 52px !important; /* Matches button height */
    color: #1b1c1c !important;
    box-sizing: border-box !important;
}

/* 5. Add to Cart Button (Overrides purple .button.alt) */
form.cart button.single_add_to_cart_button {
    background-color: #ffdab9 !important; /* primary-container */
    color: #795e44 !important; /* on-primary-container */
    border-radius: 9999px !important;
    padding: 0 2rem !important;
    height: 52px !important; /* Matches input height */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    transition: all 0.3s ease !important;
    border: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
form.cart button.single_add_to_cart_button:hover {
    box-shadow: 0 8px 24px rgba(255,218,185,0.4) !important;
    transform: translateY(-2px) !important;
    background-color: #ffdab9 !important;
    color: #795e44 !important;
}

/* 6. Product Meta (Category) */
.product_meta {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #4f453d !important; /* on-surface-variant */
    font-size: 1rem !important;
    border-top: 1px solid rgba(228, 226, 225, 0.5) !important; /* subtle divider */
    padding-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}
.product_meta a {
    color: #8a6544 !important; /* primary */
    text-decoration: none !important;
    font-weight: 600 !important;
}
.product_meta a:hover {
    text-decoration: underline !important;
}

/* --- WooCommerce Single Product Tabs & Attributes Redesign --- */

/* 1. Tab Navigation (Remove list dots, make it a sleek flex row) */
.woocommerce-tabs ul.tabs {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 1.5rem 0 !important;
    display: flex !important;
    gap: 1rem !important;
    border-bottom: 2px solid rgba(228, 226, 225, 0.5) !important; /* surface-variant */
    flex-wrap: wrap;
}
.woocommerce-tabs ul.tabs li {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
.woocommerce-tabs ul.tabs li a {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 600 !important;
    color: #80756c !important; /* outline */
    text-decoration: none !important;
    padding: 0.5rem 1rem !important;
    display: block !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important; /* Overlaps the bottom border */
    transition: all 0.3s ease !important;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
    color: #8a6544 !important; /* primary */
    border-bottom-color: #8a6544 !important;
}

/* 2. Hide redundant WooCommerce Headings */
.woocommerce-Tabs-panel h2 {
    display: none !important;
}

/* 3. Product Attributes Table */
table.woocommerce-product-attributes {
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important;
}
table.woocommerce-product-attributes th,
table.woocommerce-product-attributes td {
    padding: 1.25rem 1rem !important;
    border-bottom: 1px solid rgba(228, 226, 225, 0.5) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    background: transparent !important;
}
table.woocommerce-product-attributes tr:last-child th,
table.woocommerce-product-attributes tr:last-child td {
    border-bottom: none !important; /* Clean bottom edge */
}
table.woocommerce-product-attributes th {
    color: #1b1c1c !important; /* on-surface */
    font-weight: 600 !important;
    text-align: left !important;
    width: 35% !important;
}
table.woocommerce-product-attributes td {
    color: #4f453d !important; /* on-surface-variant */
}
table.woocommerce-product-attributes td p {
    margin: 0 !important;
}

/* 4. Reviews & Review Form Styling */
#reviews .woocommerce-noreviews {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #4f453d !important;
    margin-bottom: 1.5rem !important;
}
#review_form_wrapper {
    margin-top: 2rem !important;
}
#review_form .comment-reply-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #8a6544 !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    display: block !important;
    margin-bottom: 1rem !important;
}
#review_form input[type="text"],
#review_form input[type="email"],
#review_form textarea {
    background: #FAF7F2 !important;
    border: 1px solid rgba(128, 117, 108, 0.3) !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    width: 100% !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    box-sizing: border-box !important;
    margin-top: 0.25rem !important;
    margin-bottom: 1rem !important;
}
#review_form .submit {
    background-color: #ffdab9 !important; /* primary-container */
    color: #795e44 !important; /* on-primary-container */
    border-radius: 9999px !important;
    padding: 0.75rem 2rem !important;
    font-weight: 600 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}
#review_form .submit:hover {
    box-shadow: 0 4px 16px rgba(255,218,185,0.6) !important;
    transform: translateY(-2px) !important;
}


/* --- WooCommerce Shop Grid --- */

/* Fix the WooCommerce Grid Layout.
   NOTE: the card markup in content-product.php is a div.product, NOT an
   li.product, so every rule scoped to "ul.products li.product" was dead and
   has been removed. The theme's own Tailwind classes style the cards, and
   css/main.css styles the "View cart" link. */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 2rem !important;
    margin: 0 !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important; /* Removes WP pseudo elements that break CSS grid */
}


/* --- WooCommerce Gutenberg Checkout Block - Alignment & Radio Fix --- */

/* 1. Global Wrapper & Layout Split */
.wp-block-woocommerce-checkout {
    max-width: 1280px !important;
    margin: 3rem auto !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

@media (min-width: 768px) {
    .wp-block-woocommerce-checkout {
        padding-left: 64px !important;
        padding-right: 64px !important;
    }
}

.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
}

@media (min-width: 1024px) {
    .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }

    .wp-block-woocommerce-checkout .wc-block-components-main {
        flex: 1 1 65% !important;
        max-width: 65% !important;
        width: 100% !important;
    }

    .wp-block-woocommerce-checkout .wc-block-components-sidebar {
        flex: 1 1 35% !important;
        max-width: 35% !important;
        width: 100% !important;
        position: sticky !important;
        top: 8rem !important;
    }
}

/* 2. Glass Panels */
.wp-block-woocommerce-checkout .wc-block-components-main,
.wp-block-woocommerce-checkout .wc-block-components-sidebar {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 8px 32px 0 rgba(255, 218, 185, 0.2) !important;
    padding: 2rem !important;
    box-sizing: border-box !important;
}

/* 3. Section Titles */
.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-checkout h3,
.wc-block-components-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #8a6544 !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    margin-bottom: 1.25rem !important;
}

/* 4. Form Field Grid & Alignment */
.wc-block-components-address-form {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
}

.wc-block-components-address-form__country,
.wc-block-components-address-form__address_1,
.wc-block-components-address-form__address_2-toggle,
.wc-block-components-address-form__email {
    grid-column: span 2 !important;
}

.wc-block-components-text-input {
    position: relative !important;
    margin: 0 !important;
}

.wc-block-components-text-input input {
    background-color: #faf7f2 !important;
    border: 1px solid rgba(128, 117, 108, 0.32) !important;
    border-radius: 0.75rem !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #1b1c1c !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    padding: 1.5rem 1rem 0.5rem 1rem !important;
    height: 60px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 1px 2px rgba(43, 32, 22, 0.04) !important;
    outline: none !important;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.wc-block-components-text-input input:hover:not(:focus) {
    border-color: rgba(138, 101, 68, 0.4) !important;
    background-color: #fdfbf8 !important;
}

.wc-block-components-text-input input:focus {
    border-color: #8a6544 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(138, 101, 68, 0.14) !important;
}

/* Keep the warm field colour when Chrome autofills. */
.wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-text-input input:-webkit-autofill:hover,
.wc-block-components-text-input input:-webkit-autofill:focus {
    -webkit-text-fill-color: #1b1c1c !important;
    -webkit-box-shadow: 0 0 0 100px #faf7f2 inset !important;
}

/* Floating label: sits like a placeholder while the field is empty, then rises
   to a small-caps caption once the field is focused or filled. WooCommerce
   Blocks adds `is-active` to the wrapper in exactly those two cases. */
.wc-block-components-text-input label {
    position: absolute !important;
    left: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #80756c !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: top 0.18s cubic-bezier(0.4, 0, 0.2, 1), font-size 0.18s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s ease, letter-spacing 0.18s ease !important;
}

.wc-block-components-text-input.is-active label {
    top: 0.85rem !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #8a6544 !important;
}

/* Invalid field */
.wc-block-components-text-input.has-error input {
    border-color: #ba1a1a !important;
    background-color: #fffafa !important;
}

.wc-block-components-text-input.has-error input:focus {
    box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.14) !important;
}

.wc-block-components-text-input.has-error.is-active label {
    color: #ba1a1a !important;
}

.wc-block-components-validation-error {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #ba1a1a !important;
    margin-top: 0.4rem !important;
}

/* 5. Select Containers (Country & State / County) */
.wc-blocks-components-select {
    margin: 0 !important;
}

.wc-blocks-components-select__container {
    background-color: #faf7f2 !important;
    border: 1px solid rgba(128, 117, 108, 0.32) !important;
    border-radius: 0.75rem !important;
    position: relative !important;
    height: 60px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 0.5rem 2.5rem 0.5rem 1rem !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 1px 2px rgba(43, 32, 22, 0.04) !important;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.wc-blocks-components-select__container:hover:not(:focus-within) {
    border-color: rgba(138, 101, 68, 0.4) !important;
    background-color: #fdfbf8 !important;
}

.wc-blocks-components-select__container:focus-within {
    border-color: #8a6544 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(138, 101, 68, 0.14) !important;
}

/* A select always holds a value, so its label stays raised - matched pixel for
   pixel to the raised state of the text inputs above. */
.wc-blocks-components-select__label {
    position: absolute !important;
    top: 0.85rem !important;
    left: 1rem !important;
    transform: translateY(-50%) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #8a6544 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.wc-blocks-components-select__select {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #1b1c1c !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    width: 100% !important;
    outline: none !important;
    box-shadow: none !important;
}

.wc-blocks-components-select__expand {
    position: absolute !important;
    right: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    fill: #8a6544 !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s ease !important;
}

.wc-blocks-components-select__container:hover .wc-blocks-components-select__expand,
.wc-blocks-components-select__container:focus-within .wc-blocks-components-select__expand {
    opacity: 1 !important;
}

/* 6. Radio Options (Shipping & Payment Unified Card Styling) */
.wp-block-woocommerce-checkout .wc-block-components-radio-control {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

/* Base card styling applied identically to both options */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option,
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option {
    background: #FAF7F2 !important;
    border: 1px solid rgba(128, 117, 108, 0.25) !important;
    border-radius: 0.75rem !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Shipping Option Row */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.875rem !important;
    padding: 1.15rem 1.25rem !important;
    margin: 0 !important;
    cursor: pointer !important;
    min-height: 60px !important;
}

/* Payment Accordion Header Row */
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 1.15rem 1.25rem !important;
}

/* Strip Gutenberg stray pseudo-element dots */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option::before,
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option::after,
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option-layout::before,
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option-layout::after {
    display: none !important;
    content: none !important;
}

/* Radio Button Input */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__input {
    margin: 0 !important;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    flex-shrink: 0 !important;
    position: static !important;
    align-self: center !important;
    opacity: 1 !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    accent-color: #8a6544 !important;
    cursor: pointer !important;
}

/* Label Layout */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option-layout {
    flex-grow: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__label-group {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #1b1c1c !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}

.wp-block-woocommerce-checkout .wc-block-checkout__shipping-option--free {
    font-weight: 700 !important;
    color: #8a6544 !important;
    text-transform: uppercase;
    font-size: 0.85rem !important;
}

/* Attached payment method description */
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-content {
    background: #FAF7F2 !important;
    border-top: 1px solid rgba(128, 117, 108, 0.15) !important;
    border-radius: 0 0 0.75rem 0.75rem !important;
    padding: 1.25rem !important;
    margin: 0 !important;
    color: #4f453d !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
}

/* 7. Checkboxes
   Markup is: label > input[type=checkbox] + svg.__mark + span.__label
   The native control is replaced with a rounded, theme-coloured box and the
   SVG tick WooCommerce already ships is layered on top of it. Without
   `appearance: none` the browser kept drawing its own control underneath that
   tick, which is what made these read as unstyled. */
.wc-block-components-checkbox {
    margin: 1rem 0 !important;
}

.wc-block-components-checkbox label {
    /* Grid rather than flex, so the box and the tick can share one cell. The
       tick used to be absolutely positioned against the label, which left it
       at the mercy of the label's own padding - that is what threw it off
       centre. The grid centres it for us. */
    display: grid !important;
    grid-template-columns: 22px 1fr !important;
    align-items: center !important;
    gap: 0.75rem !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.wc-block-components-checkbox input[type="checkbox"] {
    grid-area: 1 / 1 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(128, 117, 108, 0.4) !important;
    border-radius: 0.5rem !important;
    background-color: #ffffff !important;
    box-shadow: inset 0 1px 2px rgba(43, 32, 22, 0.05) !important;
    cursor: pointer !important;
    outline: none !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

.wc-block-components-checkbox label:hover input[type="checkbox"]:not(:checked) {
    border-color: #8a6544 !important;
    background-color: #fffaf5 !important;
}

.wc-block-components-checkbox input[type="checkbox"]:checked {
    background-color: #8a6544 !important;
    border-color: #8a6544 !important;
    box-shadow: 0 2px 8px rgba(138, 101, 68, 0.28) !important;
}

.wc-block-components-checkbox input[type="checkbox"]:focus-visible {
    border-color: #8a6544 !important;
    box-shadow: 0 0 0 3px rgba(138, 101, 68, 0.18) !important;
}

/* The tick sits in the same grid cell as the box, so the grid centres it.
   The 1.9px lift is Woo's own artwork: the check is drawn low inside its
   24x20 viewBox, so even a true centre-fit lands it below the middle.
   Scale is written to the right of the translate, so it resolves first and
   the lift holds at every frame of the animation. */
.wc-block-components-checkbox__mark {
    grid-area: 1 / 1 !important;
    place-self: center !important;
    position: static !important;
    width: 20px !important;
    height: 20px !important;
    fill: #ffffff !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translate(-1.67px, -2.42px) scale(0.5) !important;
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.wc-block-components-checkbox input[type="checkbox"]:checked ~ .wc-block-components-checkbox__mark {
    opacity: 1 !important;
    transform: translate(-1.67px, -2.42px) scale(1) !important;
}

.wc-block-components-checkbox__label {
    grid-column: 2 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #4f453d !important;
    line-height: 1.4 !important;
    transition: color 0.18s ease !important;
}

.wc-block-components-checkbox label:hover .wc-block-components-checkbox__label {
    color: #1b1c1c !important;
}

/* Order-note textarea: the same field treatment as the address inputs, minus
   the floating label - Woo gives this one a placeholder instead. */
.wc-block-components-textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 0.85rem !important;
    padding: 0.9rem 1rem !important;
    min-height: 104px !important;
    resize: vertical !important;
    background-color: #faf7f2 !important;
    border: 1px solid rgba(128, 117, 108, 0.32) !important;
    border-radius: 0.75rem !important;
    box-shadow: inset 0 1px 2px rgba(43, 32, 22, 0.04) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    color: #1b1c1c !important;
    outline: none !important;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.wc-block-components-textarea::placeholder {
    color: #80756c !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

.wc-block-components-textarea:hover:not(:focus) {
    border-color: rgba(138, 101, 68, 0.4) !important;
    background-color: #fdfbf8 !important;
}

.wc-block-components-textarea:focus {
    border-color: #8a6544 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(138, 101, 68, 0.14) !important;
}

/* 8. Order Summary Sidebar */
.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper {
    border-top: 1px solid rgba(228, 226, 225, 0.6) !important;
    padding: 0.75rem 0 !important;
}

.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #8a6544 !important;
}

/* 9. Place Order Button */
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
    background-color: #ffdab9 !important;
    color: #795e44 !important;
    border-radius: 9999px !important;
    padding: 1rem 2rem !important;
    font-weight: 600 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 1.125rem !important;
    transition: all 0.3s ease !important;
    border: none !important;
    width: 100% !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(255, 218, 185, 0.3) !important;
    margin-top: 1.5rem !important;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
    box-shadow: 0 8px 24px rgba(255, 218, 185, 0.5) !important;
    transform: translateY(-2px) !important;
}

.woocommerce img, .woocommerce-page img { border-radius: 10px;}


.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
	width: 100%;
    text-align: center;
	background-color: rgb(255 218 185 / var(--tw-bg-opacity, 1));
	color: rgb(121 94 68 / var(--tw-text-opacity, 1));
	border-radius: 0.5rem;
}


/* --- WooCommerce Single Product Gallery Fix --- */

.woocommerce-product-gallery {
    position: relative !important;
    margin-bottom: 2rem !important;
}

/* 1. Main Image Frame */
.woocommerce-product-gallery .flex-viewport {
    border-radius: 1.5rem !important;
    background-color: #FAF7F2 !important;
    border: 1px solid rgba(128, 117, 108, 0.1) !important;
    box-shadow: 0 8px 32px 0 rgba(255, 218, 185, 0.15) !important;
    overflow: hidden !important;
}

.woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 1.5rem !important;
    object-fit: cover !important;
    display: block !important;
}

/* 2. The Zoom (Magnifying Glass) Button */
.woocommerce-product-gallery__trigger {
    position: absolute !important;
    top: 1.25rem !important;
    right: 1.25rem !important;
    z-index: 99 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(124, 86, 53, 0.15) !important;
    transition: transform 0.3s ease !important;
}

.woocommerce-product-gallery__trigger:hover {
    transform: scale(1.05) !important;
}

.woocommerce-product-gallery__trigger img {
    display: none !important; /* Hide WooCommerce's default search emoji */
}

/* Replace emoji with Material Icon */
.woocommerce-product-gallery__trigger::before {
    content: "\e8b6"; /* Material Symbols 'search' */
    font-family: 'Material Symbols Outlined' !important;
    font-size: 24px !important;
    color: #8a6544 !important;
}

/* 3. Thumbnail Grid */
.woocommerce-product-gallery .flex-control-thumbs {
    list-style: none !important;
    padding: 0 !important;
    margin: 1rem 0 0 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
}

.woocommerce-product-gallery .flex-control-thumbs li {
    width: calc(25% - 0.75rem) !important; /* Exactly 4 columns */
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
}

.woocommerce-product-gallery .flex-control-thumbs li img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important; /* Forces perfect squares */
    object-fit: cover !important;
    border-radius: 0.75rem !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
    opacity: 0.5 !important;
    background-color: #FAF7F2 !important;
}

/* Active & Hover States for Thumbnails */
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs li img:hover {
    opacity: 1 !important;
    border-color: #ffdab9 !important; /* primary-container */
    box-shadow: 0 4px 12px rgba(255, 218, 185, 0.4) !important;
}


/* --- WooCommerce Shop Top Bar (Result Count & Sorting) --- */

.woocommerce-result-count {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #50453c !important; /* text-on-surface-variant */
    font-size: 0.875rem !important; /* text-sm */
    font-weight: 500 !important;
    margin: 0 1rem 0 0 !important;
    float: none !important;
}

.woocommerce-ordering {
    margin: 0 !important;
    float: none !important;
}

.woocommerce-ordering select.orderby {
    background-color: #FAF7F2 !important;
    border: 1px solid rgba(128, 117, 108, 0.25) !important; /* border-outline-variant */
    border-radius: 0.75rem !important; /* rounded-xl */
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #1b1c1b !important; /* text-on-surface */
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    padding: 0.6rem 2.5rem 0.6rem 1rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    outline: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(124, 86, 53, 0.05) !important;
    transition: all 0.3s ease !important;

    /* Custom SVG Dropdown Arrow matching your outline color */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10L12 15L17 10' stroke='%2382756b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 20px !important;
}

.woocommerce-ordering select.orderby:hover {
    background-color: #ffffff !important;
}

.woocommerce-ordering select.orderby:focus {
    border-color: #8a6544 !important; /* border-primary */
    box-shadow: 0 0 0 2px rgba(138, 101, 68, 0.15) !important;
}


/* --- WooCommerce Coupon Form & Button (Cart & Checkout) --- */

/* 1. Align Input and Button Perfectly */
.wc-block-components-totals-coupon__form {
    display: flex !important;
    gap: 0.75rem !important;
    align-items: stretch !important;
}

.wc-block-components-totals-coupon__form .wc-block-components-text-input {
    margin: 0 !important;
    flex-grow: 1 !important;
}

/* 2. Style the Apply Button */
button.wc-block-components-totals-coupon__button {
    background-color: #6b4e30 !important; /* primary, darkened for white text */
    color: #ffffff !important; /* on-primary */
    border-radius: 0.75rem !important;
    border: none !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    padding: 0 1.5rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(107, 78, 48, 0.15) !important;
    min-width: 100px !important;
}

/* Fix internal span/div text alignment */
button.wc-block-components-totals-coupon__button .wc-block-components-button__text {
    display: block !important;
}

/* 3. Active Hover State (Only when NOT disabled) */
button.wc-block-components-totals-coupon__button:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: #8a6544 !important;
    box-shadow: 0 6px 16px rgba(107, 78, 48, 0.25) !important;
    transform: translateY(-1px) !important;
}

/* 4. Disabled State (Before code is typed) */
button.wc-block-components-totals-coupon__button[disabled],
button.wc-block-components-totals-coupon__button[aria-disabled="true"] {
    background-color: #e4e2e0 !important; /* surface-variant */
    color: #82756b !important; /* outline text */
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
    transform: none !important;
}


.woocommerce-breadcrumb > a {
	font-weight: bold;
	text-decoration: underline;
}

.category-card {
	text-align: center;
}

.input-text.qty.text, form.cart .quantity input.qty {
  border: none !important;
	background: transparent !important;
}


/* ==========================================================================
   Checkout polish
   Appended after the original rules so these win on order where they overlap.
   ========================================================================== */

/* --- The stray black dot on shipping / payment rows ----------------------
   WooCommerce sets appearance:none on its radio and paints its own indicator
   with :checked::before. The rules above force appearance:auto to get a real
   native radio (so accent-color works), but Woo's pseudo-dot is still drawn -
   and with the native box back it lands adrift in the middle of the row.
   One indicator is enough. */
.wc-block-components-radio-control .wc-block-components-radio-control__input::before,
.wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
    display: none !important;
    content: none !important;
}

/* --- Selected option ------------------------------------------------------
   Previously only the radio itself changed. The whole card now responds, so
   the current choice is obvious at a glance. */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option:has(input:checked),
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option:has(input:checked) {
    border-color: rgba(255, 218, 185, 0.95) !important;
    background: rgba(255, 245, 235, 0.75) !important;
    box-shadow: 0 0 0 3px rgba(255, 218, 185, 0.35);
}

/* The accordion's inner header must not repaint over the highlight */
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option:has(input:checked) .wc-block-components-radio-control__option {
    background: transparent !important;
    box-shadow: none;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__option:hover {
    border-color: rgba(128, 117, 108, 0.45) !important;
}

/* --- Payment method description ------------------------------------------
   Sits inside an overflow:hidden parent that already rounds the corners, so
   its own radius was redundant. Tone it to read as a note, not another card. */
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-content {
    background: rgba(255, 255, 255, 0.55) !important;
    border-radius: 0 !important;
    color: #4f453d !important;
}

/* --- Section headings -----------------------------------------------------
   A little more air above each block so Shipping and Payment read as separate
   steps rather than one run-on column. */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step {
    margin-bottom: 2rem !important;
}

.wp-block-woocommerce-checkout .wc-block-components-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* --- Order summary: quantity badge ---------------------------------------
   Was a black circle with black text - the count was unreadable. */
.wc-block-components-order-summary-item__quantity {
    background: #ffdab9 !important;
    border: 2px solid #ffffff !important;
    color: #795e44 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(138, 101, 68, 0.18) !important;
}

.wc-block-components-order-summary-item__image img {
    border-radius: 0.5rem !important;
}

/* --- Order note & terms ---------------------------------------------------- */
.wp-block-woocommerce-checkout .wc-block-checkout__add-note {
    padding: 1rem 1.25rem !important;
    border: 1px solid rgba(128, 117, 108, 0.2) !important;
    border-radius: 0.75rem !important;
    background: rgba(255, 255, 255, 0.5) !important;
}

.wp-block-woocommerce-checkout .wc-block-checkout__terms {
    color: #4f453d !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.wp-block-woocommerce-checkout .wc-block-checkout__terms a {
    color: #8a6544 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

/* --- Totals ---------------------------------------------------------------
   Give the grand total room to breathe above the Place Order button. */
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item {
    padding-top: 0.5rem !important;
    border-top: 2px solid rgba(255, 218, 185, 0.6) !important;
}

/* --- Mobile ---------------------------------------------------------------- */
@media (max-width: 640px) {
    .wp-block-woocommerce-checkout .wc-block-components-main,
    .wp-block-woocommerce-checkout .wc-block-components-sidebar {
        padding: 1.25rem !important;
        border-radius: 1rem !important;
    }

    .wp-block-woocommerce-checkout .wc-block-components-radio-control__option {
        padding: 1rem !important;
    }

    .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
        font-size: 1rem !important;
    }
}


/* --- Payment radio vertical alignment -------------------------------------
   checkout.css applies a translateY to the payment method radio, left over
   from WooCommerce's own absolutely-positioned layout. With the native radio
   restored (appearance:auto) that offset just drags it 9px above the centre of
   its row, so the dot sits high against "Direct bank transfer".

   Targeted by class rather than by #radio-control-wc-payment-method-options-bacs
   so it also covers any gateway added later - the id carries the gateway slug,
   so a Stripe or PayPal method would reintroduce the same offset. */
.wp-block-woocommerce-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control__input,
#radio-control-wc-payment-method-options-bacs {
    transform: translateY(0px) !important;
}


/* ==========================================================================
   EMPTY CART
   The Cart block's empty state ships as a solid disc, a heading and a bare
   product grid. kinderkutak_empty_cart_hero() in functions.php prepends the
   themed hero; the rules below hide Woo's own icon and heading and give the
   "New in store" grid the same card treatment as the rest of the shop.
   ========================================================================== */

.wp-block-woocommerce-empty-cart-block {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 6vh 20px 0 !important;
    box-sizing: border-box !important;
}

@media (min-width: 768px) {
    .wp-block-woocommerce-empty-cart-block {
        padding-left: 64px !important;
        padding-right: 64px !important;
    }
}

/* Woo's disc-and-title pair, replaced by the themed hero above it */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block > .wp-block-separator {
    display: none !important;
}

/* "New in store" */
.wp-block-woocommerce-empty-cart-block .wp-block-heading {
    margin: 0 0 1.5rem !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #1b1c1c !important;
    text-align: center !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    width: 100% !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    margin: 0 0 4rem !important;
    padding: 0 !important;
    list-style: none !important;
}

@media (min-width: 1024px) {
    .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 1rem !important;
    text-align: left !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 8px 32px rgba(255, 218, 185, 0.2) !important;
    box-sizing: border-box !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 40px rgba(138, 101, 68, 0.16) !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link {
    display: block !important;
    text-decoration: none !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image {
    display: block !important;
    margin: 0 0 0.75rem !important;
    aspect-ratio: 4 / 5;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    background: #f0eded !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    transition: transform 0.5s ease !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover .wc-block-grid__product-image img {
    transform: scale(1.05) !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #1b1c1c !important;
    margin: 0 !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover .wc-block-grid__product-title {
    color: #8a6544 !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #8a6544 !important;
    margin: 0 !important;
    text-align: left !important;
}

/* Push the button to the bottom so uneven titles still line the cards up */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart {
    margin: auto 0 0 !important;
    padding-top: 0.25rem !important;
    text-align: left !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0.7rem 1rem !important;
    border-radius: 9999px !important;
    background-color: #ffdab9 !important;
    color: #795e44 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(255, 218, 185, 0.3) !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
    box-shadow: 0 8px 24px rgba(255, 218, 185, 0.5) !important;
    transform: translateY(-2px) !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link.loading {
    opacity: 0.7 !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .added_to_cart {
    display: block !important;
    margin-top: 0.5rem !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #8a6544 !important;
    text-align: center !important;
    text-decoration: none !important;
}