/*
Theme Name: Metwood (Flatsome Child)
Theme URI: https://www.metwood.com.au/
Description: Metwood Australia's trade-supply skin over Flatsome. Keeps the printed price-book character of the previous theme — condensed uppercase headings, square corners, the red diagonal contact band and the navy footer — while handing layout and WooCommerce to Flatsome and the UX Builder.
Author: COADS
Author URI: https://www.rusware.com/
Template: flatsome
Version: 1.0.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: metwood
*/

/* ==========================================================================
   1. Brand tokens
   ========================================================================== */

:root {
	--mw-red: #e5322c;
	--mw-red-deep: #bb211c;
	--mw-purple: #492f79;
	--mw-blue: #3664a8;
	--mw-navy: #0c2983;

	--mw-ink: #1a1c22;
	--mw-grey: #5a6172;
	--mw-tint: #f6f7fa;
	--mw-rule: #e3e6ec;
	--mw-rule-dark: #c9ceda;

	--mw-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
	--mw-label: "Barlow Semi Condensed", Arial, sans-serif;
}

/* ==========================================================================
   2. Type — hierarchy carried by width, as in the catalogue
   ========================================================================== */

h1,
h2,
h3,
h4 {
	letter-spacing: 0.005em;
	line-height: 1.12;
}

h1 {
	font-size: clamp(2rem, 1.5rem + 2.2vw, 3.2rem);
}

h2 {
	font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.4rem);
}

h3 {
	font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.65rem);
}

/* Section titles get the rule-and-label treatment from the price book. */
.mw-eyebrow {
	font-family: var(--mw-label);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mw-red);
	margin-bottom: 0.35rem;
	display: block;
}

.mw-rule-title {
	border-top: 3px solid var(--mw-ink);
	padding-top: 0.75rem;
}

/* ==========================================================================
   3. Squared-off furniture
   ========================================================================== */

.button,
button,
input[type="submit"],
input[type="button"],
.woocommerce input.button,
select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="password"],
textarea {
	border-radius: 0 !important;
}

.button {
	font-family: var(--mw-label);
	font-weight: 600;
	letter-spacing: 0.05em;
}

.button.primary:not(.is-outline) {
	background-color: var(--mw-red);
}

.button.primary:not(.is-outline):hover {
	background-color: var(--mw-red-deep);
}

.button.secondary:not(.is-outline) {
	background-color: var(--mw-navy);
}

/* ==========================================================================
   4. Header
   ========================================================================== */

/* Top bar: quiet, informational. */
#top-bar {
	font-family: var(--mw-label);
	font-size: 0.83rem;
	letter-spacing: 0.03em;
}

#top-bar .mw-topbar-note {
	opacity: 0.75;
}

#top-bar a:hover {
	color: #fff;
}

/* Catalogue navigation bar in brand red. */
.header-bottom {
	border-top: none;
}

.header-bottom .nav > li > a {
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.header-bottom .nav > li > a:hover,
.header-bottom .nav > li.active > a {
	color: #fff;
	opacity: 0.82;
}

.header-bottom .nav > li.active > a {
	box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.9);
}

/*
 * Trade-account call to action, sitting on the red nav bar.
 *
 * A translucent panel muddied the red; a solid white block punched a hole in
 * it. A ghost button borrows the nav's own type and weight, so it reads as
 * part of the bar while still being clearly clickable.
 */
.mw-nav-cta {
	margin: 0;
	background: transparent !important;
	color: #fff !important;
	border: 2px solid rgba(255, 255, 255, 0.85) !important;
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	line-height: 1;
	/* Generous inside the border — at 1.1em the text sat almost on the rule. */
	padding: 0.85em 1.8em;
	min-height: 0;
	box-shadow: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.mw-nav-cta span {
	color: inherit;
}

.mw-nav-cta:hover {
	background: #fff !important;
	color: var(--mw-red-deep) !important;
	border-color: #fff !important;
}

/*
 * The bar's .container already insets 15px so the button lines up with the
 * logo above it; this just centres it and keeps a little air on the left of
 * the nav items.
 */
.header-bottom .html_nav_position_text {
	display: flex;
	align-items: center;
	padding-left: 1.5rem;
}

/*
 * Search form sized for product codes.
 *
 * The percentage width Flatsome applies still lets the field collapse once the
 * category select, account and cart claim their space — it was rendering at
 * roughly 80px, too narrow to show a full code. A floor keeps it usable.
 */
.header-main .search-form {
	min-width: 360px;
}

.header-main .searchform .search-field {
	min-width: 0;
	border-color: var(--mw-rule);
}

.header-main .searchform .flex-col.flex-grow {
	flex: 1 1 auto;
	min-width: 0;
}

/* The category select should take only what its label needs. */
.header-main .search-form-categories select {
	max-width: 130px;
}

@media only screen and (max-width: 1100px) {

	.header-main .search-form {
		min-width: 260px;
	}
}

/* ==========================================================================
   4b. Hero banners
   ========================================================================== */

/*
 * A flat navy wash over the whole photo turned it to mud. Instead: a light
 * overall tint (set on the banner itself) plus a directional scrim that is
 * dense behind the headline on the left and clears to nothing on the right,
 * so the product photography still reads.
 */
.mw-hero .overlay {
	background-image: linear-gradient(
		100deg,
		rgba(8, 22, 64, 0.9) 0%,
		rgba(8, 22, 64, 0.78) 30%,
		rgba(8, 22, 64, 0.4) 58%,
		rgba(8, 22, 64, 0.06) 82%,
		rgba(8, 22, 64, 0) 100%
	);
}

.mw-hero h1,
.mw-hero h2 {
	color: #fff;
	text-shadow: 0 1px 18px rgba(0, 0, 0, 0.28);
	margin-bottom: 0.5em;
}

.mw-hero .lead {
	color: rgba(255, 255, 255, 0.94);
	max-width: 34em;
}

/* The text box spans most of the width on phones, so the scrim has to cover
   the full frame rather than fading out to the right. */
@media only screen and (max-width: 48em) {

	.mw-hero .overlay {
		background-image: linear-gradient(
			180deg,
			rgba(8, 22, 64, 0.7) 0%,
			rgba(8, 22, 64, 0.86) 100%
		);
	}
}

/* ==========================================================================
   5. The red diagonal contact band — the catalogue cover device
   ========================================================================== */

.mw-band {
	position: relative;
	background: var(--mw-red-deep);
	color: #fff;
	clip-path: polygon(0 clamp(14px, 3vw, 38px), 100% 0, 100% 100%, 0 100%);
	padding: clamp(3rem, 2.5rem + 3vw, 5rem) 1.5rem clamp(2rem, 1.75rem + 2vw, 3.25rem);
	text-align: center;
	overflow: hidden;
}

.mw-band::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: clamp(120px, 18vw, 260px);
	height: 100%;
	background: var(--mw-navy);
	clip-path: polygon(55% 0, 100% 0, 100% 100%);
}

.mw-band__inner {
	position: relative;
	z-index: 1;
	max-width: 1080px;
	margin-inline: auto;
}

.mw-band a {
	color: #fff;
	text-decoration: none;
}

.mw-band a:hover {
	color: #fff;
	text-decoration: underline;
}

.mw-band__site {
	font-family: var(--mw-label);
	font-weight: 600;
	font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	display: block;
	margin-bottom: 0.4rem;
}

.mw-band__line {
	font-family: var(--mw-label);
	font-weight: 500;
	font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.15rem);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0.2rem 0;
}

/* ==========================================================================
   6. Footer
   ========================================================================== */

.mw-footer-block {
	background: var(--mw-navy);
	color: rgba(255, 255, 255, 0.78);
}

.mw-footer-block a {
	color: rgba(255, 255, 255, 0.78);
}

.mw-footer-block a:hover {
	color: #fff;
	text-decoration: underline;
}

.mw-footer-block h2,
.mw-footer-block h3,
.mw-footer-block h4 {
	font-family: var(--mw-label);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 0.85rem;
}

.mw-footer-block ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mw-footer-block li {
	margin: 0 0 0.5rem;
}

.mw-footer-block address {
	font-style: normal;
	line-height: 1.7;
}

.absolute-footer {
	background: #081d5e;
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--mw-label);
	letter-spacing: 0.03em;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.absolute-footer a {
	color: rgba(255, 255, 255, 0.75);
}

.absolute-footer a:hover {
	color: #fff;
}

/* ==========================================================================
   7. Catalogue index — numbered sections, as printed
   ========================================================================== */

.mw-index-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--mw-rule);
	background: #fff;
	height: 100%;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.mw-index-card:hover {
	border-color: var(--mw-rule-dark, #c9ceda);
	box-shadow: 0 12px 26px rgba(12, 41, 131, 0.13);
	transform: translateY(-2px);
}

.mw-index-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--mw-tint);
}

.mw-index-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.mw-index-card:hover .mw-index-card__media img {
	transform: scale(1.045);
}

.mw-index-card__body {
	display: block;
	padding: 0.95rem 1.1rem 1.15rem;
	border-top: 3px solid var(--mw-red);
	margin-top: auto;
}

.mw-index-card__name {
	font-family: var(--mw-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.15rem;
	line-height: 1.15;
	color: var(--mw-ink);
	display: block;
}

.mw-index-card__count {
	font-family: var(--mw-label);
	font-size: 0.85rem;
	color: var(--mw-grey);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	display: block;
	margin-top: 0.2rem;
}

/* ==========================================================================
   8. Steps — how buying works
   ========================================================================== */

.mw-step {
	border-top: 3px solid var(--mw-ink);
	padding-top: 1rem;
}

.mw-step__no {
	font-family: var(--mw-display);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--mw-red);
	letter-spacing: 0.08em;
	display: block;
	margin-bottom: 0.3rem;
}

/* ==========================================================================
   9. WooCommerce — trade-catalogue density
   ========================================================================== */

.product-small .product-title,
.product-small .name {
	font-family: var(--mw-label);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.3;
}

.box-text .price,
.woocommerce-Price-amount {
	font-family: var(--mw-label);
	font-weight: 600;
}

.badge-container .callout .badge-inner,
.badge.callout .badge-inner {
	background-color: var(--mw-red);
}

.shop-page-title,
.page-title-inner {
	border-bottom: 1px solid var(--mw-rule);
}

/* Product codes sit right under the title in listings. */
.mw-sku {
	font-family: var(--mw-label);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mw-grey);
	display: block;
}

/* Category sidebar reads like a contents page. */
.widget_product_categories ul li a,
.widget_nav_menu ul li a {
	font-family: var(--mw-label);
	font-weight: 500;
}

/* ==========================================================================
   10. Page furniture
   ========================================================================== */

.page-title .is-large {
	font-family: var(--mw-display);
	text-transform: uppercase;
}

blockquote {
	border-left: 3px solid var(--mw-red);
	background: var(--mw-tint);
	padding: 1.5rem;
	font-style: normal;
}

.mw-fact {
	border-top: 3px solid var(--mw-red);
	padding-top: 0.85rem;
}

.mw-fact__figure {
	font-family: var(--mw-display);
	font-weight: 700;
	font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
	line-height: 1;
	color: var(--mw-navy);
	display: block;
}

.mw-fact__label {
	font-family: var(--mw-label);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mw-grey);
}

/* Definition-style contact rows. */
.mw-contact-row {
	display: flex;
	gap: 1rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--mw-rule);
}

.mw-contact-row dt {
	font-family: var(--mw-label);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.85rem;
	color: var(--mw-grey);
	flex: 0 0 8rem;
	margin: 0;
}

.mw-contact-row dd {
	margin: 0;
}

@media only screen and (max-width: 48em) {

	/*************** MOBILE ONLY ***************/

	.mw-band {
		clip-path: polygon(0 14px, 100% 0, 100% 100%, 0 100%);
	}

	.mw-contact-row {
		flex-direction: column;
		gap: 0.15rem;
	}

	.mw-index-card__no {
		font-size: 1.7rem;
	}
}