/*
 * Estate site style: a distillery-shop look. Warm cream page, one deep roo red
 * ink for headings, menus and buttons, light serif headings, lots of space.
 * Centred logo header from 1024px, three products per row (inc/style-switch.php),
 * square buttons, dark footer. Tokens and fonts first; the layout rules below are
 * Estate-only so the other styles keep the shared layout in style.css.
 * Shared rules: css/styled.css. Fonts: fonts/README.md.
 *
 * Sections:
 *   1. Fonts and tokens
 *   2. Type
 *   3. Header
 *   4. Shop toolbar
 *   5. Product cards
 *   6. Product page
 *   7. Footer
 */


/* ==========================================================================
   1. Fonts and tokens
   ========================================================================== */

@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Hanken Grotesk";
	src: url("../fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Hanken Grotesk";
	src: url("../fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Hanken Grotesk";
	src: url("../fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

.redroo-style-estate {
	--rr-ink: #6b1419;
	--rr-bg: #fbf8f3;
	--rr-surface: #ffffff;
	--rr-text: #3d3133;
	--rr-heading: var(--rr-ink);
	--rr-muted: #7a6a66;
	--rr-link: var(--rr-ink);
	--rr-accent: #b3202a;
	--rr-price: #3d3133;
	--rr-rule: #e2d8cc;
	--rr-radius: 0;
	--rr-tile: transparent;
	--rr-btn-bg: var(--rr-ink);
	--rr-btn-hover: #4a0d11;
	--rr-error: #a3121a;
	--rr-btn-fg: #fbf8f3;
	--rr-btn-border: 1px solid var(--rr-ink);
	--rr-btn-shadow: none;
	--rr-input-bg: #ffffff;
	--rr-input-fg: #3d3133;
	--rr-header-bg: #fbf8f3;
	--rr-header-fg: var(--rr-ink);
	--rr-header-border: 1px solid #e2d8cc;
	--rr-footer-bg: #2b0e11;
	--rr-footer-fg: #e9dccf;
	--rr-announce-bg: var(--rr-ink);
	--rr-announce-fg: #fbf8f3;
	--rr-badge-bg: #fbf8f3;
	--rr-badge-fg: var(--rr-ink);
	--rr-card-border: 1px solid #e2d8cc;
	--rr-font-display: "Cormorant Garamond", Garamond, Georgia, serif;
	--rr-font-body: "Hanken Grotesk", system-ui, sans-serif;
	--rr-font-label: "Hanken Grotesk", system-ui, sans-serif;
	--rr-display-weight: 400;
	--rr-display-tracking: -0.005em;
	--rr-display-transform: none;
	--rr-nav-tracking: 0.16em;
}


/* ==========================================================================
   2. Type
   ========================================================================== */

.redroo-style-estate {
	line-height: 1.7;
}

.redroo-style-estate :is(h1, h2, h3):not(.woocommerce-loop-product__title) {
	line-height: 1.1;
}

.redroo-style-estate :is(.woocommerce-breadcrumb, .woocommerce-result-count) {
	font-size: 0.72em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.redroo-style-estate .woocommerce-breadcrumb a {
	text-decoration: none;
}

/* Buttons: square, small tracked capitals, a little more air */
body.redroo-style-estate :is(.button, .single_add_to_cart_button, .added_to_cart, input[type="submit"], .wp-block-button__link) {
	padding: 1em 2.2em;
	font-size: 0.75em;
	font-weight: 500;
	letter-spacing: 0.2em;
}

.redroo-style-estate .redroo-announcement {
	padding: 0.7em 0;
	font-size: 0.7em;
	letter-spacing: 0.18em;
}


/* ==========================================================================
   3. Header
   1024px and up: main menu left, logo centred, search and cart right, one row.
   Builds on the grid in style.css section 4 (768px and up). The two outer
   columns are the same width (a fixed cart column on the right balances 10em
   on the left), so the logo sits in the true centre. The secondary menu (Search,
   Contact, About Us) repeats the main menu and the footer, so it is hidden here.
   ========================================================================== */

@media (min-width: 1024px) {
	.redroo-style-estate #masthead {
		grid-template-columns: 10em minmax(0, 1fr) auto minmax(0, 1fr) 10em;
		grid-template-areas: "nav nav logo search cart";
		padding-top: 1.1em;
		padding-bottom: 1.1em;
		padding-inline: 2.5em;
	}

	.redroo-style-estate #masthead .secondary-navigation {
		display: none;
	}

	.redroo-style-estate #masthead .site-branding {
		justify-self: center;
		margin: 0;
	}

	.redroo-style-estate #masthead .main-navigation {
		justify-self: start;
	}

	.redroo-style-estate #masthead .main-navigation ul.menu > li:first-child > a {
		padding-left: 0;
	}

	.redroo-style-estate #masthead .site-search {
		justify-self: end;
		width: 12em;
	}

	.redroo-style-estate #masthead .site-header-cart {
		min-width: 0;
	}
}

.redroo-style-estate .site-header .site-branding img,
.redroo-style-estate .site-header .custom-logo-link img {
	width: 76px;
	max-width: 76px;
}

.redroo-style-estate :is(.main-navigation, .secondary-navigation) a,
.redroo-style-estate .site-header-cart .cart-contents {
	font-size: 0.78rem;
}

.redroo-style-estate .main-navigation ul.menu > li:is(.current-menu-item, .current-menu-ancestor) > a {
	box-shadow: none;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.5em;
}

/* Search as a quiet underlined field rather than a filled box */
.redroo-style-estate .site-header .site-search input[type="search"] {
	padding: 0.5em 0 0.5em 1.8em;
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--rr-rule);
	color: var(--rr-header-fg);
	font-size: 0.8rem;
}

.redroo-style-estate .site-header .site-search input[type="search"]::placeholder {
	color: var(--rr-muted);
}

.redroo-style-estate .site-header .site-search form::before {
	left: 0;
	color: var(--rr-header-fg);
}

.redroo-style-estate .site-header-cart .cart-contents .amount {
	color: var(--rr-header-fg);
}


/* ==========================================================================
   4. Shop toolbar
   Sorting and result count once, above the grid; the copy below the grid keeps
   only the page numbers.
   ========================================================================== */

/* Storefront leaves ~6em under the shop banner; the toolbar's own padding is enough */
.redroo-style-estate .woocommerce-products-header {
	padding-bottom: 0;
}

.redroo-style-estate .storefront-sorting {
	margin: 0 0 2.5em;
	padding: 2.5em 0 1em;
	border-bottom: 1px solid var(--rr-rule);
	font-size: 1rem;
}

.redroo-style-estate .site-main ul.products ~ .storefront-sorting {
	border-bottom: 0;
}

.redroo-style-estate .site-main ul.products ~ .storefront-sorting :is(.woocommerce-ordering, .woocommerce-result-count) {
	display: none;
}

.redroo-style-estate .woocommerce-ordering select {
	padding: 0.5em 0.8em;
	background-color: transparent;
	border: 1px solid var(--rr-rule);
	color: var(--rr-text);
	font-size: 0.72em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}


/* ==========================================================================
   5. Product cards
   Photos sit straight on the page. They have white or pale grey backgrounds:
   multiply turns white into the page colour, and a small brighten + contrast
   lifts pale greys (down to about #e2e2e2) to white first, so there is no
   visible box behind the bottle. Cards are flex columns so buttons line up.
   ========================================================================== */

.redroo-style-estate ul.products li.product {
	display: flex;
	flex-direction: column;
	margin-bottom: 4.5em;
	text-align: center;
}

.redroo-style-estate ul.products li.product img {
	margin-bottom: 1.4em;
	padding: 4%;
	background: transparent;
	mix-blend-mode: multiply;
	filter: brightness(1.1) contrast(1.05);
	transition: transform 0.4s ease;
}

.redroo-style-estate ul.products li.product a:hover img {
	transform: scale(1.03);
}

.redroo-style-estate ul.products li.product .woocommerce-loop-product__title {
	min-height: 2.3em;
	margin-bottom: 0.4em;
	color: var(--rr-heading);
	font-family: var(--rr-font-display);
	font-size: 1.5em;
	font-weight: 500;
	line-height: 1.15;
}

.redroo-style-estate ul.products li.product .price {
	margin-bottom: 1.4em;
	font-size: 0.78em;
	letter-spacing: 0.14em;
}

.redroo-style-estate ul.products li.product .star-rating {
	margin-bottom: 0.6em;
	font-size: 0.7em;
}

.redroo-style-estate ul.products li.product .button {
	display: block;
	width: 100%;
	max-width: 19em;
	margin: auto auto 0;
}

/* Two per row on phones: smaller titles so two lines fit without clipping */
@media (max-width: 767px) {
	.redroo-style-estate ul.products li.product .woocommerce-loop-product__title {
		font-size: 1.2em;
	}

	.redroo-style-estate ul.products li.product .button {
		padding-inline: 0.5em;
	}
}

/* Coming-soon products: outlined button, so the buyable ones stand out */
body.redroo-style-estate ul.products li.product.outofstock .button {
	background-color: transparent;
	color: var(--rr-ink);
}

body.redroo-style-estate ul.products li.product.outofstock .button:hover {
	background-color: var(--rr-ink);
	color: var(--rr-btn-fg);
}

.redroo-style-estate ul.products li.product.outofstock img {
	filter: brightness(1.1) contrast(1.05) saturate(0.4);
	opacity: 0.85;
}

.redroo-style-estate ul.products li.product .redroo-stock-badge {
	top: 0;
	left: 0;
	padding: 0.45em 0.9em;
	border: 1px solid var(--rr-rule);
	font-size: 0.65em;
	font-weight: 500;
	letter-spacing: 0.18em;
}

/* Section headings: "Related products", "You may also like" */
.redroo-style-estate :is(.related, .upsells) > h2 {
	margin-bottom: 1.5em;
	font-size: 2.4em;
	text-align: center;
}


/* ==========================================================================
   6. Product page
   ========================================================================== */

.redroo-style-estate .product_title {
	font-size: 3em;
	line-height: 1.05;
}

.redroo-style-estate .summary .price {
	font-size: 1.1em;
	letter-spacing: 0.08em;
}

.redroo-style-estate .woocommerce-product-gallery__image {
	background: transparent;
}

.redroo-style-estate .woocommerce-product-gallery__image img {
	mix-blend-mode: multiply;
	filter: brightness(1.1) contrast(1.05);
}

.redroo-style-estate .single-product div.product form.cart .quantity .qty,
.redroo-style-estate.single-product div.product form.cart .quantity .qty {
	padding: 0.8em;
	text-align: center;
}

.redroo-style-estate .woocommerce-tabs h2 {
	font-size: 2em;
}


/* ==========================================================================
   7. Footer
   ========================================================================== */

.redroo-style-estate .site-footer {
	padding-top: 4.5em;
	font-size: 0.9em;
}

.redroo-style-estate .site-footer .widget_nav_menu ul li {
	padding-left: 0;
}

.redroo-style-estate .site-footer .widget_nav_menu ul li::before {
	content: none;
}

.redroo-style-estate .site-footer a:not(.button):not(.components-button) {
	text-decoration: none;
}

.redroo-style-estate .site-footer a:not(.button):not(.components-button):hover {
	text-decoration: underline;
}

.redroo-style-estate .site-footer .site-info {
	margin-top: 2em;
	padding-top: 1.5em;
	border-top: 1px solid rgba(233, 220, 207, 0.15);
	font-size: 0.8em;
	opacity: 0.75;
}