/*
 * Look shared by every non-classic site style (body.redroo-styled).
 * Rules here read --rr-* tokens; css/<style>.css sets their values and fonts.
 * Loaded by inc/style-switch.php, after Storefront's stylesheets and its inline
 * Customizer CSS, so equal-specificity rules here win.
 *
 * Kept upgrade-safe: shallow selectors on long-standing Storefront/WooCommerce
 * classes. Cart and checkout blocks only get page colours/fonts and the primary
 * button; their layout is WooCommerce's. Inputs stay light in every style so
 * block checkout and Stripe fields always read clearly.
 *
 * Sections:
 *   1. Page and type
 *   2. Links, focus, buttons, inputs
 *   3. Header and menus
 *   4. Products
 *   5. Footer
 *   6. Announcement bar and age gate
 */


/* ==========================================================================
   1. Page and type
   ========================================================================== */

.redroo-styled,
.redroo-styled .site {
	background-color: var(--rr-bg);
}

.redroo-styled {
	color: var(--rr-text);
	font-family: var(--rr-font-body);
}

.redroo-styled :is(button, input, select, textarea) {
	font-family: var(--rr-font-body);
}

.redroo-styled :is(h1, h2, h3):not(.woocommerce-loop-product__title),
.redroo-styled .product_title {
	color: var(--rr-heading);
	font-family: var(--rr-font-display);
	font-weight: var(--rr-display-weight);
	letter-spacing: var(--rr-display-tracking);
	text-transform: var(--rr-display-transform);
}

.redroo-styled :is(h4, h5, h6, strong, th, label) {
	color: var(--rr-heading);
}

.redroo-styled :is(.woocommerce-breadcrumb, .woocommerce-result-count, .product_meta) {
	color: var(--rr-muted);
}


/* ==========================================================================
   2. Links, focus, buttons, inputs
   ========================================================================== */

.redroo-styled a {
	color: var(--rr-link);
}

.redroo-styled a:hover {
	color: var(--rr-heading);
}

.redroo-styled :focus-visible {
	outline: 2px solid var(--rr-accent);
	outline-offset: 2px;
}

/* Primary buttons, including the block cart/checkout ones (.contained).
   ".widget a.button" lifts the whole list's specificity above Storefront's
   inline ".widget a.button.checkout" (mini-cart) rule. */
body.redroo-styled :is(.button, .single_add_to_cart_button, .added_to_cart, input[type="submit"], .wc-block-components-button.contained, .wp-block-button__link, .widget a.button) {
	background-color: var(--rr-btn-bg);
	border: var(--rr-btn-border);
	border-radius: var(--rr-radius);
	box-shadow: var(--rr-btn-shadow);
	color: var(--rr-btn-fg);
	font-family: var(--rr-font-label);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.redroo-styled :is(.button, .single_add_to_cart_button, .added_to_cart, input[type="submit"], .wc-block-components-button.contained, .wp-block-button__link, .widget a.button):hover {
	background-color: var(--rr-btn-hover);
	color: var(--rr-btn-fg);
}

/* Cart block "Proceed to checkout" is an <a>; keep it from taking the link underline */
body.redroo-styled .wc-block-components-button.contained {
	text-decoration: none;
}

.redroo-styled :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], input[type="url"], textarea, select) {
	background-color: var(--rr-input-bg);
	border: 1px solid var(--rr-rule);
	border-radius: var(--rr-radius);
	box-shadow: none;
	color: var(--rr-input-fg);
}

/* Cart and checkout blocks (checkout fields, cart coupon field): Woo's floating
   labels use "color: inherit", so the field wrappers carry the input text colour or
   a light page text colour lands on a light input. Text inputs also take the token
   input background (Woo paints them #fff with a higher-specificity rule) so they match
   the selects (.wc-blocks-components-select, Country/Region and State) in one form. */
.redroo-styled :is(.wc-block-components-text-input, .wc-blocks-components-select) {
	color: var(--rr-input-fg);
}

/* Outside .wc-block-components-form (the cart coupon) Woo's label rule only ties with
   our "label" heading colour above, so inherit explicitly. */
.redroo-styled :is(.wc-block-components-text-input, .wc-blocks-components-select) label {
	color: inherit;
}

body.redroo-styled .wc-block-components-text-input :is(input[type], input[type]:focus) {
	background-color: var(--rr-input-bg);
	color: var(--rr-input-fg);
}

/* Woo's inline field errors sit on the page, not the input: its #cc1818 is too dark on Premium */
.redroo-styled .wc-block-components-validation-error {
	color: var(--rr-error);
}


/* ==========================================================================
   3. Header and menus
   ========================================================================== */

.redroo-styled :is(.site-header, .main-navigation ul.menu ul.sub-menu, .main-navigation ul.nav-menu ul.children, .secondary-navigation ul.menu ul, .site-header-cart .widget_shopping_cart, .storefront-handheld-footer-bar, .storefront-handheld-footer-bar ul li > a, .storefront-handheld-footer-bar ul li.search .site-search, button.menu-toggle) {
	background-color: var(--rr-header-bg);
}

.redroo-styled .site-header {
	border-bottom: var(--rr-header-border);
}

.redroo-styled :is(.site-header, .site-header ul.menu li a, .site-header .site-header-cart a, .secondary-navigation a, button.menu-toggle, .handheld-navigation .dropdown-toggle) {
	color: var(--rr-header-fg);
}

.redroo-styled button.menu-toggle {
	border-color: var(--rr-header-fg);
}

.redroo-styled :is(.main-navigation, .secondary-navigation) a,
.redroo-styled .site-header-cart .cart-contents {
	font-family: var(--rr-font-label);
	letter-spacing: var(--rr-nav-tracking);
	text-transform: uppercase;
}

.redroo-styled .main-navigation ul.menu > li:is(.current-menu-item, .current-menu-ancestor) > a {
	box-shadow: inset 0 -2px 0 var(--rr-accent);
}


/* ==========================================================================
   4. Products
   ========================================================================== */

.redroo-styled ul.products li.product .woocommerce-loop-product__title {
	color: var(--rr-heading);
	font-family: var(--rr-font-body);
	font-weight: 600;
}

.redroo-styled :is(.price, .woocommerce-Price-amount) {
	color: var(--rr-price);
}

.redroo-styled .woocommerce-product-gallery__image {
	background-color: var(--rr-tile);
	border-radius: var(--rr-radius);
}

.redroo-styled .woocommerce-tabs ul.tabs li a {
	color: var(--rr-muted);
	font-family: var(--rr-font-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.redroo-styled .woocommerce-tabs ul.tabs li.active a {
	color: var(--rr-heading);
}

.redroo-styled :is(.woocommerce-tabs ul.tabs, .woocommerce-tabs ul.tabs li) {
	border-color: var(--rr-rule);
}

.redroo-styled .onsale {
	background-color: var(--rr-badge-bg);
	border: 0;
	border-radius: var(--rr-radius);
	color: var(--rr-badge-fg);
}

/* Coming-soon photos: Classic dims them with opacity, which on a dark page lets
   the page show through the light tile and looks like a muddy hole. Keep the
   tile light and mute the photo instead (the badge already says why). */
.redroo-styled ul.products li.product.outofstock img {
	opacity: 1;
	filter: saturate(0.35) brightness(1.05);
}

.redroo-styled ul.products li.product .redroo-stock-badge {
	font-family: var(--rr-font-label);
	border-radius: var(--rr-radius);
}


/* Rating stars: Storefront paints them with its accent via inline CSS
   (".star-rating span:before"); the extra class here out-ranks it. */
.redroo-styled .star-rating::before {
	color: var(--rr-rule);
	opacity: 0.3;
}

.redroo-styled .star-rating span::before {
	color: var(--rr-accent);
}

/* Pagination: Storefront uses its accent for the current page and the links */
.redroo-styled .woocommerce-pagination .page-numbers li .page-numbers:not(.current) {
	color: var(--rr-link);
}

.redroo-styled .woocommerce-pagination .page-numbers li .page-numbers.current {
	background-color: var(--rr-btn-bg);
	color: var(--rr-btn-fg);
}

/* Notices keep Storefront's coloured backgrounds and white text; their links and
   <strong> must not take the page link/heading colour (unreadable on green/blue/red). */
.redroo-styled :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) :is(a:not(.button), strong) {
	color: inherit;
	text-decoration: underline;
}

/* Product rows as flex so cards stretch to equal height (floats leave them
   ragged once a style outlines the cards). Widths and margins stay Storefront's
   and style.css's. */
.redroo-styled ul.products {
	display: flex;
	flex-wrap: wrap;
}

.redroo-styled ul.products::before,
.redroo-styled ul.products::after {
	display: none;
}


/* ==========================================================================
   5. Footer
   :not(.components-button) matches Storefront's inline rule so this one wins.
   ========================================================================== */

.redroo-styled .site-footer {
	background-color: var(--rr-footer-bg);
	color: var(--rr-footer-fg);
}

.redroo-styled .site-footer :is(a:not(.button):not(.components-button), h1, h2, h3, h4, h5, h6, strong, label, .widget-title, .widgettitle) {
	color: var(--rr-footer-fg);
}

.redroo-styled .site-footer :is(.widget-title, .widgettitle) {
	font-family: var(--rr-font-label);
	font-size: 0.85em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Phone bottom bar lives inside .site-footer but should match the header */
.redroo-styled .site-footer .storefront-handheld-footer-bar a:not(.button):not(.components-button) {
	color: var(--rr-header-fg);
}


/* ==========================================================================
   6. Announcement bar and age gate
   The age gate (mu-plugins/age-gate.php) prints its own styles in the footer;
   the extra class here out-ranks them.
   ========================================================================== */

.redroo-styled .redroo-announcement :is(strong, label) {
	color: inherit;
}

.redroo-styled .redroo-announcement {
	font-family: var(--rr-font-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.redroo-styled #age-gate {
	font-family: var(--rr-font-body);
	color: var(--rr-text);
}

.redroo-styled #age-gate :is(strong, label) {
	color: inherit;
}

.redroo-styled #age-gate .agp-row {
	background: var(--rr-bg);
	border: var(--rr-card-border);
	border-radius: var(--rr-radius);
}

.redroo-styled #age-gate .agp-heading {
	color: var(--rr-heading);
	font-family: var(--rr-font-display);
	font-size: 26px;
	font-style: normal;
	font-weight: var(--rr-display-weight);
	letter-spacing: var(--rr-display-tracking);
	text-transform: var(--rr-display-transform);
}

.redroo-styled #age-gate .agp-feedback {
	color: var(--rr-accent);
}

.redroo-styled #age-gate .agp-btns button {
	background: transparent;
	border: 1px solid currentColor;
	border-radius: var(--rr-radius);
	color: var(--rr-text);
	font-family: var(--rr-font-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.redroo-styled #age-gate .agp-btns .agp-yes {
	background: var(--rr-btn-bg);
	border: var(--rr-btn-border);
	box-shadow: var(--rr-btn-shadow);
	color: var(--rr-btn-fg);
}