/*
Theme Name:  Red Roo
Description: Storefront child theme for redroovodka.store. Shared layout CSS lives here; the site style switch (Customize → Site style) and its colours/fonts live in functions.php, inc/ and css/. Content (banner image, pages, menus) stays in wp-admin.
Template:    storefront
Version:     1.1.0
Text Domain: redroo
*/

/*
 * Layout shared by every site style. No colours here: colours and fonts belong to the
 * style files in css/ (Classic uses Storefront's own). Keep Appearance → Customize →
 * Additional CSS empty so there is only one place to look.
 *
 * Everything below is CSS on Storefront's default markup. Selectors use #masthead
 * where they must out-rank Storefront's header widths.
 *
 * Sections:
 *   1. Header
 *   2. Shop page banner
 *   3. Out of stock badge
 *   4. Header layout
 *   5. Product cards
 *   6. Announcement bar
 */


/* ==========================================================================
   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
   Badge markup + label come from mu-plugins/out-of-stock-label.php (labels are
   editable in Customizer); WooCommerce adds .outofstock to the grid item.
   ========================================================================== */

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

ul.products li.product .redroo-stock-badge {
	position: absolute;
	top: 0.75em;
	left: 0.75em;
	z-index: 2;
	padding: 0.3em 0.7em;
	background: var(--rr-badge-bg, rgba(0, 0, 0, 0.75));
	color: var(--rr-badge-fg, #fff);
	font-size: 0.8em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

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


/* ==========================================================================
   4. Header layout
   768px and up: logo on the left over two thin rows; secondary menu, search and
   cart on top; main menu below. Storefront's header markup is untouched:
   its two .col-full wrappers become display: contents so their children join
   one grid. Below 768px Storefront's handheld header is unchanged.
   ========================================================================== */

/* Storefront's overflow-x: hidden on .site stops position: sticky working; clip doesn't */
.site {
	overflow-x: clip;
}

@media (min-width: 768px) {
	#masthead {
		position: sticky;
		top: 0;
		z-index: 100;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto auto;
		grid-template-areas:
			"logo secondary search cart"
			"logo nav       nav    nav";
		align-items: center;
		column-gap: 1.618em;
		padding-top: 0.75em;
		padding-bottom: 0.25em;
		padding-inline: max(2.617924em, calc((100% - 66.4989em) / 2));
	}

	/* Sit below the WordPress admin bar when logged in */
	.admin-bar #masthead {
		top: 46px;
	}

	#masthead > .col-full,
	#masthead .storefront-primary-navigation,
	#masthead .storefront-primary-navigation > .col-full {
		display: contents;
	}

	#masthead::before,
	#masthead::after,
	#masthead .col-full::before,
	#masthead .col-full::after {
		content: none;
	}

	#masthead .site-branding,
	#masthead .secondary-navigation,
	#masthead .site-search,
	#masthead .main-navigation,
	#masthead .site-header-cart {
		float: none;
		width: auto;
		margin: 0;
		clear: none;
	}

	#masthead .site-branding {
		grid-area: logo;
		margin-right: 1em;
	}

	#masthead .secondary-navigation {
		grid-area: secondary;
		justify-self: end;
	}

	#masthead .site-search {
		grid-area: search;
		width: 14em;
	}

	#masthead .main-navigation {
		grid-area: nav;
	}

	#masthead .site-header-cart {
		grid-area: cart;
		min-width: 9em;
		text-align: right;
	}

	#masthead .site-header-cart .cart-contents {
		padding: 0.5em 0;
	}

	#masthead .site-header-cart .cart-contents::after {
		margin-left: 0.6em;
	}
}

@media (min-width: 783px) {
	.admin-bar #masthead {
		top: 32px;
	}
}


/* ==========================================================================
   5. Product cards
   Square photo area so rows line up whatever the photo's shape; titles
   clamped to two lines so prices and buttons line up too.
   ========================================================================== */

ul.products li.product img {
	aspect-ratio: 1;
	object-fit: contain;
	background: var(--rr-tile, transparent);
	border-radius: var(--rr-radius, 0);
}

/* Two per row on phones (Storefront stacks them one per row) */
@media (max-width: 767px) {
	.site-main ul.products li.product {
		float: left;
		width: 47.8%;
		margin-right: 4.4%;
	}

	.site-main ul.products li.product:nth-child(2n) {
		margin-right: 0;
	}

	.site-main ul.products li.product:nth-child(2n + 1) {
		clear: both;
	}
}

ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	line-height: 1.35;
	min-height: 2.7em;
}


/* Product tabs on phones: tabs stack above the panel, so Storefront's active-tab
   chevron reads as an accordion toggle that does nothing. Drop it there; the active
   tab already stands out by colour. */
@media (max-width: 767px) {
	.woocommerce-tabs ul.tabs li.active::after {
		display: none;
	}
}

/* Storefront outlines any focused link (a:focus), so a tapped tab keeps a purple
   bar. Keep the outline for keyboard focus only. */
.woocommerce-tabs ul.tabs li a:focus:not(:focus-visible) {
	outline: none;
}


/* Reviews: no en dash between the (bold) author and the date */
.woocommerce-review__dash {
	display: none;
}

/* ==========================================================================
   6. Announcement bar
   Markup from inc/layout.php; text from Customize → Site style.
   ========================================================================== */

.redroo-announcement {
	padding: 0.5em 0;
	font-size: 0.8em;
	text-align: center;
	background: var(--rr-announce-bg, #333);
	color: var(--rr-announce-fg, #fff);
}


/* ==========================================================================
   7. Brand site product grid
   [brand_products] (mu-plugins/brand-sites.php). Brand sites don't run
   WooCommerce, so none of its grid CSS is loaded there.
   ========================================================================== */

.redroo-brand-products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2em 4.4%;
	margin: 0 0 2em;
	list-style: none;
}

@media (min-width: 768px) {
	.redroo-brand-products {
		grid-template-columns: repeat(3, 1fr);
	}
}

.redroo-brand-product {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.redroo-brand-product__link {
	display: block;
	width: 100%;
	text-decoration: none;
}

.redroo-brand-product img {
	display: block;
	width: 100%;
	margin: 0 0 1em;
	aspect-ratio: 1;
	object-fit: contain;
	background: var(--rr-tile, transparent);
	border-radius: var(--rr-radius, 0);
}

.redroo-brand-product.outofstock img {
	opacity: 0.5;
}

.redroo-brand-product__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: 2.7em;
	margin: 0 0 0.5em;
	font-size: 1rem;
	line-height: 1.35;
}

.redroo-brand-product .price {
	display: block;
	margin: 0 0 1em;
}

.redroo-brand-product .button,
.redroo-brand-product__stock {
	margin-top: auto;
}

.redroo-brand-products-note {
	text-align: center;
	font-size: 0.875em;
}