/*
Theme Name:  Red Roo
Description: Storefront child theme for redroovodka.store. Styling only: Storefront loads this file automatically, no PHP needed. Content (banner image, pages, menus) stays in wp-admin.
Template:    storefront
Version:     1.0.0
Text Domain: redroo
*/

/*
 * All site-specific CSS lives here, in git. Keep Appearance → Customize →
 * Additional CSS empty so there is only one place to look.
 *
 * Sections:
 *   1. Header
 *   2. Shop page banner
 *   3. Out of stock badge
 */


/* ==========================================================================
   1. Header
   ========================================================================== */

/* Logo 90px wide, matching the old Shopify site */
.site-header .site-branding img,
.site-header .custom-logo-link img {
	width: 90px;
	max-width: 90px;
	height: auto;
}


/* ==========================================================================
   2. Shop page banner
   The banner is a full-width Image block in the Shop page's content
   (Pages → Shop); WooCommerce shows that content above the product grid.
   ========================================================================== */

/* Banner replaces the "Shop" heading */
.woocommerce-products-header__title {
	display: none;
}

/* Stretch edge to edge (Storefront only does this on full-width page templates).
   Negative top margin cancels Storefront's .site-header margin-bottom so the
   banner sits flush under the header; re-check if Storefront changes it. */
.woocommerce-products-header .wp-block-image.alignfull {
	margin: -4.235801032em calc(50% - 50vw) 0;
	max-width: none;
}

.woocommerce-products-header .wp-block-image.alignfull img {
	width: 100%;
	border-radius: 0;
}


/* ==========================================================================
   3. Out of stock badge
   WooCommerce adds .outofstock to products in the grid; follows stock status.
   ========================================================================== */

ul.products li.product.outofstock .woocommerce-LoopProduct-link {
	position: relative;
	display: block;
}

ul.products li.product.outofstock .woocommerce-LoopProduct-link::before {
	content: "Out of stock";
	position: absolute;
	top: 0.75em;
	left: 0.75em;
	z-index: 2;
	padding: 0.3em 0.7em;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-size: 0.8em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

ul.products li.product.outofstock img {
	opacity: 0.5;
}