/*
 Theme Name:  Rife Free Child
 Template:    rife-free
 Text Domain: rife-free-child
*/

/* === Custom WooCommerce layout tweaks === */
/* === Force Add to Basket to be always visible under product text === */

/* 1. Make product text block behave like "text under photo" even if theme is set to overlay */
.woocommerce ul.products.products_variant_overlay .overlay {
    display: none !important; /* kill the dark overlay layer */
}

.woocommerce ul.products.products_variant_overlay .product-details {
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    padding: 30px 0;
    background-color: #fff;
}

/* Optional: revert text color if overlay variant was using white text */
.woocommerce ul.products.products_variant_overlay .product-details h2,
.woocommerce ul.products.products_variant_overlay .product-details h2 mark {
    color: #000;
}

/* 2. Disable Rife's "button_over" hover behaviour – make button static */
.woocommerce ul.products.button_over li.product .button,
.woocommerce ul.products.products_variant_under.button_over li.product .button {
    position: static;
    bottom: auto;
    left: auto;
    opacity: 1;
    transform: none;
    height: auto;
    line-height: normal;
    white-space: normal;
    margin-top: 12px;
}

/* Don't move the button on hover anymore */
.woocommerce ul.products.button_over li.product:hover .button,
.woocommerce ul.products.products_variant_under.button_over li.product:hover .button {
    transform: none;
}

/* 3. General safety net: buttons in product lists should just sit under the text */
.woocommerce ul.products li.product .product-details {
    /* If you're not using overlay at all, this alone is enough to keep text under image */
    position: relative;
}

.woocommerce ul.products li.product .button {
    display: inline-block;
}

/* Add to Basket button padding in product listings */
.woocommerce ul.products li.product .button {
    padding: 10px 30px !important; /* top/bottom 10px, left/right 30px */
}
/* Normal state – keep whatever you already have for background, but ensure text is white */
.woocommerce ul.products li.product .button {
    padding: 10px 30px !important;  /* from your last change */
    color: #fff !important;
}

/* Hover / focus state – orange background, white text */
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus,
.woocommerce ul.products li.product .button:active {
    background-color: #FF9F00 !important;
    color: #fff !important;
}

/* If theme uses the .added_to_cart link, keep it consistent */
.woocommerce ul.products li.product .added_to_cart:hover,
.woocommerce ul.products li.product .added_to_cart:focus,
.woocommerce ul.products li.product .added_to_cart:active {
    background-color: #FF9F00 !important;
    color: #fff !important;
}