/*
 * TileMode design system for Woodmart.
 *
 * Direction: a showroom, not a template. Cool porcelain neutrals, charcoal
 * ink, and the brand red used only where it means something (the active
 * underline, hover, sale, the primary button). Square corners throughout,
 * because tile is square. One typeface, Jost, whose geometry matches the
 * wide, even letterforms of the TileMode logotype.
 *
 * Load order: Woodmart first, then this file, then mega-menu.css.
 */

/* ---- 1. Tokens --------------------------------------------------------- */

:root {
	--tm-ink: #1f2326;
	--tm-text: #394045;
	--tm-slate: #474747;
	--tm-muted: #626a6f;
	--tm-porcelain: #f4f5f5;
	--tm-grout: #dcdfe0;
	--tm-red: #c62127;
	--tm-red-deep: #a81b21;
	--tm-font: "Jost", "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--tm-shadow-panel: 0 26px 38px -26px rgba(31, 35, 38, 0.4);
}

/* Woodmart prints its variables in an inline style block. `html:root` is
   one element more specific, so these win without !important. */
html:root {
	--wd-text-font: var(--tm-font);
	--wd-title-font: var(--tm-font);
	--wd-entities-title-font: var(--tm-font);
	--wd-alternative-font: var(--tm-font);
	--wd-widget-title-font: var(--tm-font);
	--wd-header-el-font: var(--tm-font);

	--wd-text-font-weight: 400;
	--wd-title-font-weight: 500;
	--wd-entities-title-font-weight: 500;
	--wd-widget-title-font-weight: 600;
	--wd-header-el-font-weight: 500;

	--wd-title-transform: none;
	--wd-widget-title-transform: none;
	--wd-header-el-transform: none;
	--wd-header-el-font-size: 15px;
	--wd-widget-title-font-size: 15px;
	--wd-text-font-size: 16px;

	--wd-text-color: var(--tm-text);
	--wd-title-color: var(--tm-ink);
	--wd-widget-title-color: var(--tm-ink);
	--wd-entities-title-color: var(--tm-ink);
	--wd-entities-title-color-hover: var(--tm-red);
	--wd-link-color: var(--tm-ink);
	--wd-link-color-hover: var(--tm-red);
	--wd-primary-color: var(--tm-red);
	--wd-alternative-color: var(--tm-porcelain);

	--btn-accented-bgcolor: var(--tm-red);
	--btn-accented-bgcolor-hover: var(--tm-red-deep);
	--btn-accented-color: #fff;
	--btn-accented-color-hover: #fff;
	--btn-accented-box-shadow: none;
	--btn-accented-box-shadow-hover: none;
	--btn-accented-transform: none;
	--btn-accented-font-weight: 500;
	--btn-accented-font-size: 15px;
	--btn-accented-height: 48px;
	--btn-accented-padding: 8px 28px;
	--btn-default-bgcolor: var(--tm-porcelain);
	--btn-default-bgcolor-hover: var(--tm-grout);
	--btn-default-color: var(--tm-ink);
	--btn-default-color-hover: var(--tm-ink);
	--btn-default-transform: none;
	--btn-default-font-weight: 500;
	--btn-default-font-size: 15px;
	--btn-default-height: 48px;
	--btn-default-padding: 8px 28px;
	--btn-transform: none;
	--btn-font-weight: 500;

	--wd-form-height: 46px;
	--wd-form-brd-width: 1px;
	--wd-form-brd-color: rgba(31, 35, 38, 0.22);
	--wd-form-brd-color-focus: var(--tm-ink);

	--notices-success-bg: var(--tm-ink);
	--notices-success-color: #fff;

	--wd-top-bar-h: 38px;
	--wd-header-general-h: 92px;
}

/* ---- 2. Base typography ------------------------------------------------ */

body.tm-theme {
	font-family: var(--tm-font);
	letter-spacing: 0.005em;
	font-feature-settings: "kern", "liga";
}

.tm-theme :is(h1, h2, h3, h4, h5, h6) {
	font-weight: 500;
	letter-spacing: -0.012em;
	line-height: 1.18;
}

.tm-theme h1 {
	font-size: clamp(28px, 2.6vw, 38px);
}

.tm-theme h2 {
	font-size: clamp(24px, 2.1vw, 30px);
}

.tm-theme h3 {
	font-size: clamp(20px, 1.7vw, 24px);
}

.tm-theme strong,
.tm-theme b {
	font-weight: 600;
}

.tm-theme :focus-visible {
	outline: 2px solid var(--tm-red);
	outline-offset: 2px;
}

/* Square corners everywhere, including inputs and cards. */
.tm-theme {
	--wd-brd-radius: 0;
	--wd-form-brd-radius: 0;
}

/* ---- 3. Buttons -------------------------------------------------------- */

.tm-theme :is(.btn, .button, button[type="submit"], input[type="submit"]):not(.wd-action-btn *):not(.tm-nav__toggle):not(.tm-nav__link) {
	font-family: var(--tm-font);
	letter-spacing: 0.01em;
}

.tm-theme .single_add_to_cart_button,
.tm-theme .checkout-button,
.tm-theme #place_order {
	min-height: 52px;
	text-transform: none;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.01em;
	box-shadow: none;
}

.tm-theme .single_add_to_cart_button:active,
.tm-theme .checkout-button:active {
	bottom: 0;
}

/* ---- 4. Header --------------------------------------------------------- */

/* Top bar: quiet charcoal strip. */
.tm-theme .whb-top-bar {
	background-color: var(--tm-ink);
}

/* Top-level items only: the Resources dropdown has a white panel and keeps
   dark text (see below). */
.tm-theme .whb-top-bar :is(a, .wd-tools-text, .wd-header-text, .wd-nav > li > a, .wd-header-text *):not(.wd-dropdown *) {
	color: rgba(255, 255, 255, 0.86);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: none;
}

.tm-theme .whb-top-bar a:not(.wd-dropdown *):hover {
	color: #fff;
}

/* Dropdowns in the top bar (Resources). */
.tm-theme .whb-top-bar .wd-dropdown {
	background-color: #fff;
	box-shadow: var(--tm-shadow-panel);
}

.tm-theme .whb-top-bar .wd-dropdown :is(a, a.woodmart-nav-link) {
	color: var(--tm-ink);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.tm-theme .whb-top-bar .wd-dropdown :is(a, a.woodmart-nav-link):hover {
	color: var(--tm-red);
}

/* General header: logo, wide search, account / wishlist / cart. */
.tm-theme .whb-general-header {
	background-color: #fff;
}

.tm-theme .whb-general-header .whb-col-left {
	flex: 0 0 auto;
}

.tm-theme .whb-general-header .whb-col-center:not(:has(*)) {
	flex: 0 0 0;
	min-width: 0;
}

.tm-theme .whb-general-header .whb-col-right {
	flex: 1 1 auto;
	gap: 4px;
}

/* Always-visible search field (see header-elements/search.php). */
.tm-theme :is(.whb-general-header .wd-search-form, [class*="wd-header-search-form"]) {
	--wd-search-form-width: 640px;
	flex: 1 1 auto;
	max-width: var(--wd-search-form-width);
	margin-inline: auto 22px;
	padding-inline: 0;
}

.tm-theme :is(.whb-general-header .wd-search-form, [class*="wd-header-search-form"]) input[type="text"] {
	height: 48px;
	padding-inline: 20px 56px;
	border: 1px solid var(--tm-grout);
	background-color: var(--tm-porcelain);
	color: var(--tm-ink);
	font-family: var(--tm-font);
	font-size: 15px;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.tm-theme :is(.whb-general-header .wd-search-form, [class*="wd-header-search-form"]) input[type="text"]::placeholder {
	color: var(--tm-muted);
	opacity: 1;
}

.tm-theme :is(.whb-general-header .wd-search-form, [class*="wd-header-search-form"]) input[type="text"]:focus {
	border-color: var(--tm-ink);
	background-color: #fff;
}

.tm-theme :is(.whb-general-header .wd-search-form, [class*="wd-header-search-form"]) .searchsubmit {
	color: var(--tm-ink);
}

.tm-theme :is(.whb-general-header .wd-search-form, [class*="wd-header-search-form"]) .searchsubmit:hover {
	color: var(--tm-red);
}

/* Account, wishlist and cart icons. */
.tm-theme .whb-general-header .wd-tools-element .wd-tools-icon,
.tm-theme .whb-general-header .wd-tools-element .wd-tools-text {
	color: var(--tm-ink);
}

.tm-theme .whb-general-header .wd-tools-element:hover :is(.wd-tools-icon, .wd-tools-text) {
	color: var(--tm-red);
}

.tm-theme .wd-tools-count {
	background-color: var(--tm-red);
	color: #fff;
	font-weight: 500;
}

/* Navigation row: a hairline instead of a box. */
.tm-theme .whb-header-bottom {
	background-color: #fff;
	box-shadow: inset 0 -1px 0 var(--tm-grout);
}

.tm-theme .whb-header-bottom .wd-nav > li > a {
	font-size: 15px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0.01em;
}

/* ---- 5. Mobile drawer -------------------------------------------------- */

.tm-theme .wd-side-hidden .wd-nav-mobile > li > a,
.tm-theme .wd-side-hidden .wd-nav-mobile > li > .wd-nav-opener {
	font-family: var(--tm-font);
}

.tm-theme .wd-side-hidden .wd-nav-mobile > li > a {
	padding-block: 15px;
	color: var(--tm-ink);
	font-size: 17px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

.tm-theme .wd-side-hidden .wd-nav-mobile > li {
	border-bottom: 1px solid var(--tm-grout);
}

.tm-theme .wd-side-hidden .wd-nav-mobile .wd-sub-menu li > a {
	padding-block: 11px;
	color: var(--tm-text);
	font-size: 16px;
	text-transform: none;
}

.tm-theme .wd-side-hidden .wd-nav-mobile a:hover {
	color: var(--tm-red);
}

/* ---- 6. Breadcrumbs and page titles ------------------------------------ */

.tm-theme .wd-breadcrumbs {
	font-size: 13px;
	letter-spacing: 0.01em;
}

.tm-theme .wd-breadcrumbs .wd-last {
	font-weight: 500;
}

.tm-theme .wd-page-title {
	background-color: var(--tm-porcelain);
}

.tm-theme .wd-page-title .title {
	margin-bottom: 0;
	font-size: clamp(30px, 3.2vw, 44px);
	font-weight: 500;
	letter-spacing: -0.02em;
}

/* ---- 7. Product cards -------------------------------------------------- */

.tm-theme .wd-product .product-wrapper {
	background-color: transparent;
	box-shadow: none;
}

.tm-theme .wd-product .product-element-top {
	background-color: var(--tm-porcelain);
}

.tm-theme .wd-product .wd-entities-title {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}

.tm-theme .wd-product .price {
	color: var(--tm-ink);
	font-size: 15px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.tm-theme .wd-product .price del {
	color: var(--tm-muted);
	font-weight: 400;
}

.tm-theme .wd-product .price ins {
	color: var(--tm-red);
	text-decoration: none;
}

/* Sale and new labels: flat, square, readable. */
.tm-theme .product-labels .product-label {
	min-width: 0;
	min-height: 0;
	padding: 6px 10px;
	border-radius: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0.01em;
}

.tm-theme .product-labels .onsale {
	background-color: var(--tm-red);
	color: #fff;
}

/* ---- 8. Filters and sidebar widgets ------------------------------------ */

.tm-theme .widget-title,
.tm-theme .widgettitle,
.tm-theme .wpc-filter-title,
.tm-theme .wpfFilterTitle {
	margin-bottom: 14px;
	color: var(--tm-ink);
	font-family: var(--tm-font);
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0.01em;
}

.tm-theme :is(.sidebar-container, .wd-sidebar) .widget {
	margin-bottom: 0;
	padding-block: 22px;
	border-bottom: 1px solid var(--tm-grout);
}

.tm-theme :is(.sidebar-container, .wd-sidebar) .widget:first-child {
	padding-top: 0;
}

.tm-theme :is(.sidebar-container, .wd-sidebar) .widget:last-child {
	border-bottom: 0;
}

.tm-theme :is(.sidebar-container, .wd-sidebar) .widget a {
	color: var(--tm-ink);
	text-decoration: none;
}

.tm-theme :is(.sidebar-container, .wd-sidebar) .widget a:hover {
	color: var(--tm-red);
}

/* ---- 9. Single product ------------------------------------------------- */

.tm-theme.single-product .product_title {
	font-size: clamp(26px, 2.4vw, 34px);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.15;
}

.tm-theme.single-product .summary .price {
	color: var(--tm-ink);
	font-family: var(--tm-font);
	font-size: 26px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.tm-theme.single-product .quantity input.qty {
	border-color: var(--tm-grout);
	font-family: var(--tm-font);
}

.tm-theme.single-product .woocommerce-tabs .wc-tabs > li > a {
	font-family: var(--tm-font);
	font-size: 16px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0.01em;
}

/* The specification rows added through the ACF shortcode. */
.tm-theme .acf-term-item {
	font-family: var(--tm-font);
	font-size: 15px;
}

/* ---- 10. Forms and notices --------------------------------------------- */

.tm-theme :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], textarea, select) {
	font-family: var(--tm-font);
	font-size: 15px;
}

.tm-theme label {
	color: var(--tm-ink);
	font-size: 14px;
	font-weight: 500;
}

.tm-theme .woocommerce-message,
.tm-theme .woocommerce-info,
.tm-theme .woocommerce-error {
	border-radius: 0;
	font-family: var(--tm-font);
}

/* ---- 11. Pagination ---------------------------------------------------- */

.tm-theme nav[class*="-pagination"] li .page-numbers {
	border-radius: 0;
	font-family: var(--tm-font);
	font-weight: 500;
}

.tm-theme nav[class*="-pagination"] li .current {
	background-color: var(--tm-ink);
}

/* ---- 12. Footer (Elementor footer template) ---------------------------- */

.tm-theme .elementor-location-footer {
	font-family: var(--tm-font);
}

.tm-theme .elementor-location-footer :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title) {
	font-family: var(--tm-font);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.tm-theme .elementor-location-footer a {
	text-decoration: none;
	transition: color 0.15s ease;
}

.tm-theme .elementor-location-footer a:hover {
	color: var(--tm-red);
}

/* ---- 13. Shared components (home page and footer) ---------------------- */

:root {
	--tm-gutter: clamp(16px, 3.6vw, 40px);
	--tm-wrap: 1320px;
}

.tm-wrap {
	width: 100%;
	max-width: calc(var(--tm-wrap) + 2 * var(--tm-gutter));
	margin-inline: auto;
	padding-inline: var(--tm-gutter);
}

.tm-eyebrow {
	margin: 0 0 12px;
	color: var(--tm-red);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tm-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.tm-theme .tm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 28px;
	border: 1px solid transparent;
	border-radius: 0;
	font-family: var(--tm-font);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tm-theme .tm-btn--primary {
	background-color: var(--tm-red);
	color: #fff;
}

.tm-theme .tm-btn--primary:hover {
	background-color: var(--tm-red-deep);
	color: #fff;
}

.tm-theme .tm-btn--light {
	background-color: #fff;
	color: var(--tm-ink);
}

.tm-theme .tm-btn--light:hover {
	background-color: var(--tm-porcelain);
	color: var(--tm-ink);
}

.tm-theme .tm-btn--dark {
	background-color: var(--tm-ink);
	color: #fff;
}

.tm-theme .tm-btn--dark:hover {
	background-color: #000;
	color: #fff;
}

.tm-theme .tm-btn--ghost {
	border-color: currentColor;
	background-color: transparent;
	color: var(--tm-ink);
}

.tm-theme .tm-btn--ghost:hover {
	background-color: var(--tm-ink);
	border-color: var(--tm-ink);
	color: #fff;
}

.tm-icon {
	display: block;
}

/* ---- 14. Motion preferences -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.tm-theme * {
		scroll-behavior: auto !important;
	}
}