/*
Theme Name:   Stairs & More
Theme URI:    https://stairsmore.com/
Description:  WooCommerce theme for Stairs & More, implementing the Stairs & More Storefront design as a Storefront child theme.
Author:       Stairs & More
Template:     storefront
Version:      1.1.2
Requires PHP: 7.4
Text Domain:  stairsmore
Tags:         e-commerce, two-columns, custom-colors, custom-menu, featured-images
*/

/* ===========================================================================
   1. Design tokens — from Stairs-and-More-Storefront.dc.html
   ======================================================================== */
:root {
	--sm-teal:        #123B47;   /* primary   */
	--sm-teal-hover:  #1E5567;
	--sm-teal-deep:   #0C2A33;   /* marquee   */
	--sm-cream:       #FAF7F2;   /* page bg   */
	--sm-cream-2:     #F1ECE3;   /* alt bg    */
	--sm-cream-3:     #EFE7D8;
	--sm-sand:        #E4DACB;
	--sm-line:        #E0D8CB;   /* borders   */
	--sm-ink:         #1A1714;
	--sm-muted:       #6E655C;
	--sm-slate:       #5B7C88;
	--sm-brass:       #C08A4E;   /* accent    */
	--sm-brass-dark:  #966834;
	--sm-rust:        #B4472C;
	--sm-white:       #FFFFFF;

	--sm-head: Archivo, "Helvetica Neue", Arial, sans-serif;
	--sm-body: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	--sm-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--sm-maxw: 1320px;
	--sm-pad:  16px;
	--sm-r:    6px;
	--sm-r-lg: 14px;
}

/* ===========================================================================
   2. Base
   ======================================================================== */
body,
button, input, select, textarea,
.widget, .site-footer {
	font-family: var(--sm-body);
	color: var(--sm-ink);
}

body {
	background: var(--sm-cream);
	font-size: 15px;
	line-height: 1.55;
}

h1, h2, h3, h4, h5, h6,
.site-title, .page-title, .entry-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--sm-head);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--sm-teal);
}

a            { color: var(--sm-teal); text-decoration: none; }
a:hover      { color: var(--sm-brass-dark); }
::selection  { background: var(--sm-brass); color: #fff; }
:focus-visible { outline: 2px solid var(--sm-teal); outline-offset: 2px; }

.sm-wrap {
	max-width: var(--sm-maxw);
	margin: 0 auto;
	padding: 0 var(--sm-pad);
}

.sm-eyebrow {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--sm-brass-dark);
	font-weight: 600;
}

.sm-mono { font-family: var(--sm-mono); }

/* Storefront wraps everything in .col-full; widen it to the design's grid. */
.col-full {
	max-width: var(--sm-maxw);
	padding: 0 var(--sm-pad);
}

/* ===========================================================================
   3. Buttons
   ======================================================================== */
.sm-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
button, input[type="submit"] {
	font-family: var(--sm-body);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	border: 0;
	border-radius: var(--sm-r);
	padding: 15px 26px;
	background: var(--sm-teal);
	color: var(--sm-cream);
	text-shadow: none;
	transition: background .15s ease, color .15s ease;
}

.sm-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
button:hover, input[type="submit"]:hover {
	background: var(--sm-teal-hover);
	color: var(--sm-cream);
}

.sm-btn--ghost {
	background: transparent;
	color: var(--sm-teal);
	border: 1.5px solid var(--sm-teal);
	padding: 14px 24px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.sm-btn--ghost:hover { background: var(--sm-sand); color: var(--sm-teal); }

.sm-btn--brass { background: var(--sm-brass); color: #fff; }
.sm-btn--brass:hover { background: var(--sm-brass-dark); color: #fff; }

/* ===========================================================================
   4. Header
   ======================================================================== */
.sm-announce {
	background: var(--sm-teal-deep);
	color: rgba(250,247,242,.85);
	font-size: 12px;
	letter-spacing: .04em;
	text-align: center;
	padding: 9px 16px;
}
.sm-announce a { color: var(--sm-brass); }

.sm-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--sm-cream);
	border-bottom: 1px solid var(--sm-line);
}
.sm-header__inner {
	max-width: var(--sm-maxw);
	margin: 0 auto;
	padding: 0 var(--sm-pad);
	display: flex;
	align-items: center;
	gap: 20px;
	height: 76px;
}
.sm-logo { display: flex; align-items: center; flex-shrink: 0; }
.sm-logo img, .sm-logo svg { display: block; height: 33px; width: auto; }
.sm-logo__text {
	font-family: var(--sm-head);
	font-weight: 800;
	font-size: 21px;
	letter-spacing: -.02em;
	color: var(--sm-teal);
}
.sm-logo__text span { color: var(--sm-brass); }

.sm-nav { display: none; gap: 2px; flex: 1; }
.sm-nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.sm-nav a {
	display: block;
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--sm-ink);
	border-radius: var(--sm-r);
	white-space: nowrap;
}
.sm-nav a:hover,
.sm-nav .current-menu-item > a {
	background: var(--sm-cream-2);
	color: var(--sm-teal);
}

.sm-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.sm-icon-btn {
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	background: none; border: 0; padding: 0;
	color: var(--sm-teal);
	cursor: pointer;
	border-radius: var(--sm-r);
}
.sm-icon-btn:hover { background: var(--sm-cream-2); color: var(--sm-teal); }

/* Mega menu */
.sm-mega {
	display: none;
	border-top: 1px solid var(--sm-line);
	background: var(--sm-cream);
	box-shadow: 0 18px 44px rgba(18,59,71,.12);
}
.sm-has-mega:hover .sm-mega,
.sm-mega:hover,
.sm-mega.is-open { display: block; }
.sm-mega__inner {
	max-width: var(--sm-maxw);
	margin: 0 auto;
	padding: 28px var(--sm-pad) 32px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 320px;
	gap: 32px;
}
.sm-mega__title {
	font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
	color: var(--sm-muted); margin-bottom: 14px;
}
.sm-mega__links { display: flex; flex-direction: column; gap: 2px; }
.sm-mega__links a {
	display: flex; justify-content: space-between; align-items: center;
	padding: 7px 8px; margin: 0 -8px;
	border-radius: var(--sm-r); font-size: 14px; color: var(--sm-ink);
}
.sm-mega__links a:hover { background: var(--sm-cream-2); color: var(--sm-teal); }
.sm-mega__meta { font-family: var(--sm-mono); font-size: 11px; color: var(--sm-muted); }
.sm-mega__promo {
	background: var(--sm-teal); border-radius: var(--sm-r-lg); padding: 24px;
	display: flex; flex-direction: column; justify-content: flex-end;
	color: var(--sm-cream); min-height: 220px;
}
.sm-mega__promo h3 {
	font-family: var(--sm-head); font-weight: 700; font-size: 22px;
	line-height: 1.15; margin: 0 0 8px; color: var(--sm-cream);
}
.sm-mega__promo p { font-size: 13px; color: rgba(250,247,242,.75); margin: 0; }

/* Mobile drawer */
.sm-drawer { display: none; position: fixed; inset: 0; z-index: 80; background: rgba(12,42,51,.45); }
.sm-drawer.is-open { display: block; }
.sm-drawer__panel {
	position: absolute; inset: 0 0 0 auto; width: min(400px, 88vw);
	background: var(--sm-cream); box-shadow: -8px 0 40px rgba(18,59,71,.2);
	display: flex; flex-direction: column;
}
.sm-drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px; border-bottom: 1px solid var(--sm-line);
}
.sm-drawer__body { overflow: auto; padding: 8px 0; flex: 1; }
.sm-drawer__body ul { list-style: none; margin: 0; padding: 0; }
.sm-drawer__body li { border-bottom: 1px solid var(--sm-line); }
.sm-drawer__body a {
	display: block; padding: 15px 16px;
	font-size: 15px; font-weight: 600; color: var(--sm-teal);
}
.sm-drawer__body .sub-menu a { font-weight: 400; font-size: 14px; color: var(--sm-ink); padding-left: 32px; }
.sm-drawer__body .sub-menu li { border: 0; }

@media (min-width: 1024px) {
	.sm-nav { display: flex; }
	.sm-burger { display: none; }
}

/* ===========================================================================
   5. Marquee
   ======================================================================== */
.sm-marquee {
	background: var(--sm-teal-deep);
	height: 44px;
	overflow: hidden;
	display: flex;
	align-items: center;
}
.sm-marquee__track {
	display: flex; flex-shrink: 0; white-space: nowrap;
	animation: sm-marquee 26s linear infinite;
}
.sm-marquee:hover .sm-marquee__track { animation-play-state: paused; }
.sm-marquee span {
	display: flex; align-items: center; gap: 22px; padding-right: 22px;
	color: rgba(250,247,242,.75); font-size: 11px; letter-spacing: .14em;
	text-transform: uppercase; font-weight: 500;
}
.sm-marquee span::after {
	content: ""; width: 5px; height: 5px; border-radius: 3px;
	background: var(--sm-brass); display: block;
}
@keyframes sm-marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce) {
	.sm-marquee__track { animation: none; }
}

/* ===========================================================================
   6. Homepage
   ======================================================================== */
.sm-hero { background: var(--sm-cream-2); }
.sm-hero__inner {
	max-width: var(--sm-maxw); margin: 0 auto;
	padding: 32px var(--sm-pad) 34px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 36px; align-items: center;
}
.sm-hero h1 {
	font-family: var(--sm-head); font-weight: 800; letter-spacing: -.02em;
	line-height: .95; color: var(--sm-teal);
	font-size: clamp(38px, 5vw, 60px); margin: 0 0 16px;
}
.sm-hero p.sm-hero__lede {
	font-size: 16px; line-height: 1.55; color: var(--sm-muted);
	max-width: 52ch; margin: 0 0 22px; text-wrap: pretty;
}
.sm-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.sm-hero__stats {
	display: flex; flex-wrap: wrap; gap: 0 32px;
	border-top: 1px solid var(--sm-line); padding-top: 14px;
}
.sm-hero__stat { padding: 6px 0; }
.sm-hero__stat b {
	display: block; font-family: var(--sm-mono); font-size: 17px;
	color: var(--sm-teal); font-weight: 500;
}
.sm-hero__stat span {
	display: block; font-size: 11px; text-transform: uppercase;
	letter-spacing: .12em; color: var(--sm-muted); margin-top: 3px;
}
.sm-hero__media {
	position: relative; background: var(--sm-sand); border-radius: var(--sm-r-lg);
	overflow: hidden; aspect-ratio: 16/11; max-height: 420px;
}
.sm-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sm-trust { background: var(--sm-cream); border-bottom: 1px solid var(--sm-line); }
.sm-trust__inner {
	max-width: var(--sm-maxw); margin: 0 auto; padding: 36px var(--sm-pad);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px;
}
.sm-trust__item { display: flex; gap: 14px; align-items: flex-start; }
.sm-trust__icon {
	width: 42px; height: 42px; border-radius: 22px; background: var(--sm-brass);
	color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sm-trust__item b { display: block; font-weight: 600; font-size: 15px; color: var(--sm-teal); margin-bottom: 3px; }
.sm-trust__item p { font-size: 13px; color: var(--sm-muted); line-height: 1.5; margin: 0; }

.sm-section { padding: 56px 0; }
.sm-section--alt { background: var(--sm-cream-2); }
.sm-section__head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 24px; margin-bottom: 28px; flex-wrap: wrap;
}
.sm-section__head h2 {
	font-family: var(--sm-head); font-weight: 700; font-size: clamp(24px, 3vw, 34px);
	letter-spacing: -.02em; color: var(--sm-teal); margin: 0;
}
.sm-section__head p { color: var(--sm-muted); margin: 6px 0 0; font-size: 15px; }
.sm-section__more { font-weight: 600; font-size: 14px; white-space: nowrap; }

/* Category tiles */
.sm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.sm-tile {
	position: relative; display: block; border-radius: var(--sm-r-lg);
	overflow: hidden; background: var(--sm-sand); min-height: 190px;
	border: 1px solid var(--sm-line);
}
.sm-tile img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.sm-tile__body {
	position: relative; z-index: 2; padding: 18px;
	display: flex; flex-direction: column; justify-content: flex-end; min-height: 190px;
	background: linear-gradient(to top, rgba(12,42,51,.78) 0%, rgba(12,42,51,.15) 55%, rgba(12,42,51,0) 100%);
	color: var(--sm-cream);
}
.sm-tile__body b { font-family: var(--sm-head); font-weight: 700; font-size: 18px; display: block; }
.sm-tile__body span { font-family: var(--sm-mono); font-size: 11px; color: rgba(250,247,242,.8); }

/* Timber swatches */
.sm-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }
.sm-swatch {
	border: 1px solid var(--sm-line); border-radius: var(--sm-r-lg);
	background: var(--sm-white); padding: 14px; display: block;
}
.sm-swatch:hover { border-color: var(--sm-brass); }
.sm-swatch__chip { height: 54px; border-radius: 8px; margin-bottom: 10px; border: 1px solid rgba(0,0,0,.07); }
.sm-swatch b { display: block; font-size: 14px; font-weight: 600; color: var(--sm-teal); }
.sm-swatch span { font-family: var(--sm-mono); font-size: 11px; color: var(--sm-muted); }

/* Split promo (trade / samples) */
.sm-promo {
	background: var(--sm-teal); color: var(--sm-cream);
	border-radius: var(--sm-r-lg); padding: 40px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 28px; align-items: center;
}
.sm-promo h2 { color: var(--sm-cream); margin: 0 0 10px; font-size: clamp(22px, 3vw, 30px); }
.sm-promo p { color: rgba(250,247,242,.78); margin: 0 0 18px; font-size: 15px; }
.sm-promo .sm-eyebrow { color: var(--sm-brass); }

/* Guides */
.sm-guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.sm-guide {
	background: var(--sm-white); border: 1px solid var(--sm-line);
	border-radius: var(--sm-r-lg); padding: 22px; display: block;
}
.sm-guide:hover { border-color: var(--sm-brass); }
.sm-guide h3 { font-size: 17px; margin: 8px 0 6px; color: var(--sm-teal); }
.sm-guide p { font-size: 13.5px; color: var(--sm-muted); margin: 0; line-height: 1.5; }

/* ===========================================================================
   7. WooCommerce — product cards, shop, single product
   ======================================================================== */
.woocommerce ul.products,
ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
	margin: 0 0 32px;
}
.woocommerce ul.products li.product,
ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	background: var(--sm-white);
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-r-lg);
	padding: 14px;
	display: flex;
	flex-direction: column;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.woocommerce ul.products li.product:hover {
	border-color: var(--sm-brass);
	box-shadow: 0 8px 24px rgba(18,59,71,.07);
}
.woocommerce ul.products li.product a img {
	border: 0;
	border-radius: 8px;
	background: var(--sm-cream-2);
	aspect-ratio: 1/1;
	object-fit: contain;
	margin-bottom: 12px;
	box-shadow: none;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--sm-body) !important;
	font-size: 14.5px !important;
	font-weight: 600;
	line-height: 1.35;
	color: var(--sm-ink);
	padding: 0;
	margin: 0 0 6px;
}
.woocommerce ul.products li.product .price {
	font-family: var(--sm-mono);
	font-size: 14px;
	color: var(--sm-teal);
	font-weight: 500;
	margin: 0 0 12px;
}
.woocommerce ul.products li.product .price del { color: var(--sm-muted); opacity: .7; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--sm-rust); }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .stairsmore-details {
	margin-top: auto;
	display: block;
	text-align: center;
	background: transparent;
	border: 1.5px solid var(--sm-teal);
	color: var(--sm-teal);
	padding: 10px 14px;
	font-size: 13.5px;
	border-radius: var(--sm-r);
}
.woocommerce ul.products li.product .stairsmore-details:hover {
	background: var(--sm-teal);
	color: var(--sm-cream);
}

.woocommerce span.onsale {
	background: var(--sm-rust);
	color: #fff;
	border-radius: 4px;
	font-family: var(--sm-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .04em;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	padding: 6px 9px;
	top: 20px;
	left: 20px;
	margin: 0;
}

/* Shop header + sidebar */
.woocommerce-products-header__title,
.woocommerce-products-header .page-title {
	font-family: var(--sm-head);
	font-size: clamp(28px, 4vw, 40px);
	color: var(--sm-teal);
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
	font-size: 13.5px;
	color: var(--sm-muted);
}
.widget {
	background: var(--sm-white);
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-r-lg);
	padding: 18px;
	margin-bottom: 18px;
}
.widget .widget-title,
.widget h2 {
	font-family: var(--sm-head);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--sm-teal);
	margin: 0 0 12px;
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding: 5px 0; font-size: 14px; }
.widget li a { color: var(--sm-ink); }
.widget li a:hover { color: var(--sm-brass-dark); }
.widget .count { font-family: var(--sm-mono); font-size: 11px; color: var(--sm-muted); }

/* Single product */
.single-product div.product .product_title {
	font-family: var(--sm-head);
	font-size: clamp(26px, 3.5vw, 38px);
	line-height: 1.05;
	color: var(--sm-teal);
	margin-bottom: 10px;
}
.single-product div.product p.price,
.single-product div.product span.price {
	font-family: var(--sm-mono);
	font-size: 24px;
	color: var(--sm-teal);
	font-weight: 500;
}
.single-product div.product .woocommerce-product-details__short-description {
	color: var(--sm-muted);
	font-size: 15px;
}
.single-product .woocommerce-product-gallery {
	background: var(--sm-white);
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-r-lg);
	padding: 14px;
}
.single-product table.variations {
	border: 0;
	margin-bottom: 12px;
}
.single-product table.variations th,
.single-product table.variations td { border: 0; padding: 6px 0; }
.single-product table.variations label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--sm-muted);
	font-weight: 600;
}
.single-product table.variations select {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-r);
	background: var(--sm-white);
	font-size: 14px;
	color: var(--sm-ink);
}
.woocommerce-tabs ul.tabs {
	padding: 0 0 0 !important;
	border-bottom: 1px solid var(--sm-line);
}
.woocommerce-tabs ul.tabs::before { border: 0 !important; }
.woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 18px 0 0 !important;
	padding: 0 !important;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce-tabs ul.tabs li a {
	font-family: var(--sm-body);
	font-weight: 600;
	font-size: 14px;
	color: var(--sm-muted) !important;
	padding: 12px 0 !important;
	display: block;
	border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a {
	color: var(--sm-teal) !important;
	border-bottom-color: var(--sm-brass);
}
.stairsmore-enquire { margin-top: 16px; }
.stairsmore-enquire .button {
	background: var(--sm-brass);
	color: #fff;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.stairsmore-enquire .button:hover { background: var(--sm-brass-dark); color: #fff; }

.stock.out-of-stock {
	font-family: var(--sm-mono);
	font-size: 12px;
	color: var(--sm-rust);
	text-transform: uppercase;
	letter-spacing: .08em;
}

/* ===========================================================================
   8. Footer
   ======================================================================== */
.sm-footer { background: var(--sm-teal-deep); color: rgba(250,247,242,.7); padding: 54px 0 0; }
.sm-footer__cols {
	max-width: var(--sm-maxw); margin: 0 auto; padding: 0 var(--sm-pad);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px;
}
.sm-footer__col b {
	display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
	color: var(--sm-brass); margin-bottom: 14px; font-weight: 600;
}
.sm-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sm-footer__col a, .sm-footer__col li { font-size: 13.5px; color: rgba(250,247,242,.7); }
.sm-footer__col a:hover { color: var(--sm-cream); }
.sm-footer__bar {
	max-width: var(--sm-maxw); margin: 40px auto 0; padding: 20px var(--sm-pad);
	border-top: 1px solid rgba(250,247,242,.14);
	display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
	font-size: 12.5px; color: rgba(250,247,242,.55);
}

/* Storefront's own footer chrome is replaced by .sm-footer */
.site-footer .col-full > .footer-widgets,
.site-footer .site-info { display: none; }
.site-footer { background: transparent; padding: 0; }

/* Catalogue mode — scoped so nothing stays hidden once the mode is off. */
.stairsmore-catalogue .single_add_to_cart_button,
.stairsmore-catalogue a.add_to_cart_button,
.stairsmore-catalogue .woocommerce-variation-add-to-cart .quantity,
.stairsmore-catalogue form.cart .quantity,
.stairsmore-catalogue .site-header-cart { display: none !important; }

/* Enquiry page */
.sm-enquiry-note {
	padding: 14px 16px;
	background: var(--sm-cream-2);
	border-left: 3px solid var(--sm-brass);
	border-radius: 0 var(--sm-r) var(--sm-r) 0;
	font-weight: 600;
	color: var(--sm-teal);
	margin-bottom: 20px;
}
.sm-enquiry-contact {
	background: var(--sm-white);
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-r-lg);
	padding: 22px;
	margin: 20px 0;
}
.sm-enquiry-contact dt {
	font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
	color: var(--sm-muted); margin-bottom: 4px;
}
.sm-enquiry-contact dd { margin: 0 0 16px; font-size: 15px; color: var(--sm-ink); }
.sm-enquiry-contact dd:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Fixes found in visual review
   ------------------------------------------------------------------------ */

/* Storefront clears its product list with ::before/::after. Once ul.products is
   a grid those pseudo-elements become grid items and push the first row along
   by one cell, so they have to go. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
	display: none !important;
	content: none !important;
}

/* The catalogue is white-background product cut-outs, not lifestyle
   photography. Cropping a tall cut-out to a landscape box shows mostly empty
   white, so contain them on the sand ground instead of cover-cropping. */
.sm-hero__media img {
	object-fit: contain;
	padding: 20px;
	background: var(--sm-sand);
}

.sm-tile img {
	object-fit: contain;
	padding: 18px 18px 54px;
	background: var(--sm-cream-2);
}

/* Keep the tile caption legible over a light product shot. */
.sm-tile__body {
	background: linear-gradient(to top, rgba(12,42,51,.92) 0%, rgba(12,42,51,.62) 34%, rgba(12,42,51,0) 72%);
}

/* A span is inline, so height had no effect on the timber chip. */
.sm-swatch__chip {
	display: block;
}

/* The homepage "Across the range" row asks the shortcode for 4 columns; pin the
   grid to match so 8 products fill two even rows instead of 5 + 3. */
@media (min-width: 900px) {
	.sm-section .woocommerce.columns-4 ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* The gallery slider lays its slides out in a wide track; without clipping, the
   neighbouring slides bleed out past the page edges. */
.woocommerce-product-gallery,
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery__wrapper {
	overflow: hidden;
}

/* Give loop titles a consistent two-line box so prices and buttons line up
   across a row regardless of how long the product name is. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	min-height: 2.7em;
}

.sm-footer__brand {
	max-width: var(--sm-maxw);
	margin: 0 auto 32px;
	padding: 0 var(--sm-pad);
}
.sm-footer__brand img { height: 30px; width: auto; display: block; }

/* ===========================================================================
   9. Announcement bar
   ======================================================================== */
.sm-announce { position: relative; }
.sm-announce__track { min-height: 1.2em; }
.sm-announce__item { display: none; }
.sm-announce__item.is-on { display: inline; animation: sm-fade .3s ease; }
.sm-announce__close {
	position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
	background: none; border: 0; padding: 6px; line-height: 0;
	color: rgba(250,247,242,.7); cursor: pointer;
}
.sm-announce__close:hover { color: var(--sm-cream); background: none; }
@keyframes sm-fade { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }

/* ===========================================================================
   10. Staircase diagram
   ======================================================================== */
.sm-diagram__intro { max-width: 56ch; margin-bottom: 36px; }
.sm-diagram__intro h2 {
	font-family: var(--sm-head); font-weight: 800; font-size: clamp(28px, 4vw, 44px);
	color: var(--sm-teal); margin: 14px 0; line-height: 1.05;
}
.sm-diagram__intro p { font-size: 16px; line-height: 1.6; color: var(--sm-muted); margin: 0; }

.sm-diagram__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 32px; align-items: start;
}
.sm-diagram__draw {
	background: var(--sm-cream-2); border: 1px solid var(--sm-line);
	border-radius: var(--sm-r-lg); padding: 12px;
}
.sm-diagram__draw svg { display: block; }
.sm-diagram__draw [data-part] { transition: opacity .18s ease; }
.sm-diagram__hits [data-hit] { cursor: pointer; }

.sm-diagram__card {
	background: var(--sm-teal); color: var(--sm-cream);
	border-radius: var(--sm-r-lg); padding: 22px; margin-bottom: 18px;
	animation: sm-fade .2s ease;
}
.sm-diagram__card .sm-eyebrow { color: var(--sm-brass); }
.sm-diagram__card h3 {
	font-family: var(--sm-head); font-weight: 700; font-size: 24px;
	color: var(--sm-cream); margin: 8px 0;
}
.sm-diagram__card p { font-size: 14.5px; line-height: 1.55; color: rgba(250,247,242,.8); margin: 0 0 16px; }
.sm-diagram__card-foot {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.sm-diagram__card-foot .sm-mono { font-size: 14px; color: var(--sm-brass); }
.sm-diagram__card-foot .sm-btn { padding: 11px 16px; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }

.sm-diagram__chips, .sm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-chip {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 11px 14px; border: 1px solid var(--sm-line); border-radius: var(--sm-r);
	background: var(--sm-cream); color: var(--sm-ink);
	font-size: 13.5px; font-weight: 500; cursor: pointer; min-height: 44px;
}
.sm-chip:hover { border-color: var(--sm-teal); background: var(--sm-cream); color: var(--sm-ink); }
.sm-chip__dot { width: 9px; height: 9px; border-radius: 5px; background: var(--sm-line); display: block; }
.sm-chip.is-active { border-color: var(--sm-teal); }
.sm-chip.is-active .sm-chip__dot { background: var(--sm-brass); }

.sm-diagram__note {
	margin-top: 18px; border-top: 1px solid var(--sm-line); padding-top: 16px;
	display: flex; gap: 10px; align-items: flex-start; color: var(--sm-slate);
}
.sm-diagram__note p { font-size: 13px; line-height: 1.55; color: var(--sm-muted); margin: 0; }

/* ===========================================================================
   11. Stair builder
   ======================================================================== */
.sm-builder__intro { max-width: 58ch; margin-bottom: 34px; }
.sm-builder__intro h2 {
	font-family: var(--sm-head); font-weight: 800; font-size: clamp(28px, 4vw, 44px);
	color: var(--sm-teal); margin: 14px 0; line-height: 1.05;
}
.sm-builder__intro p { font-size: 16px; line-height: 1.6; color: var(--sm-muted); margin: 0; }

.sm-builder__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
	gap: 24px; align-items: start;
}
.sm-builder__controls {
	background: var(--sm-cream); border: 1px solid var(--sm-line);
	border-radius: var(--sm-r-lg); padding: 22px;
	display: flex; flex-direction: column; gap: 22px;
}
.sm-builder__step {
	font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
	color: var(--sm-muted); margin-bottom: 10px;
}
.sm-builder__timbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.sm-timber {
	display: flex; align-items: center; gap: 9px; padding: 8px 10px;
	border-radius: var(--sm-r); border: 1.5px solid var(--sm-line);
	background: var(--sm-cream); cursor: pointer; min-height: 44px;
	text-align: left; font-size: 12.5px; color: var(--sm-ink); font-weight: 500;
}
.sm-timber.is-active { border-color: var(--sm-teal); }
.sm-timber:hover { background: var(--sm-cream); color: var(--sm-ink); }
.sm-timber__chip {
	width: 22px; height: 22px; border-radius: 4px; flex-shrink: 0;
	border: 1px solid rgba(26,23,20,.15); display: block;
}

.sm-seg { display: flex; border: 1px solid var(--sm-line); border-radius: var(--sm-r); overflow: hidden; width: fit-content; }
.sm-seg__btn {
	display: flex; align-items: center; gap: 8px; padding: 12px 22px;
	border: 0; background: var(--sm-cream); font-family: var(--sm-mono);
	font-size: 14px; color: var(--sm-ink); cursor: pointer; min-height: 44px;
}
.sm-seg__btn + .sm-seg__btn { border-left: 1px solid var(--sm-line); }
.sm-seg__btn:hover { background: var(--sm-cream-2); color: var(--sm-ink); }
.sm-seg__btn .sm-chip__dot { background: var(--sm-line); }
.sm-seg__btn.is-active .sm-chip__dot { background: var(--sm-brass); }

.sm-builder__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sm-builder__row .sm-builder__step { margin-bottom: 0; }
.sm-num {
	width: 110px; font-family: var(--sm-mono); font-size: 14px; padding: 9px 10px;
	border: 1px solid var(--sm-line); border-radius: var(--sm-r);
	background: var(--sm-cream); color: var(--sm-ink); text-align: right;
}
.sm-range { width: 100%; accent-color: var(--sm-teal); height: 40px; }
.sm-builder__scale { display: flex; justify-content: space-between; font-family: var(--sm-mono); font-size: 11px; color: var(--sm-muted); }
.sm-builder__row2 { display: flex; gap: 18px; flex-wrap: wrap; }
.sm-builder__landing { flex: 1; min-width: 200px; }

.sm-stepper {
	display: flex; align-items: center; border: 1px solid var(--sm-line);
	border-radius: var(--sm-r); width: fit-content; background: var(--sm-cream);
}
.sm-stepper button {
	width: 44px; height: 44px; border: 0; background: none; color: var(--sm-teal);
	cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.sm-stepper button:hover { background: var(--sm-cream-2); color: var(--sm-teal); }
.sm-stepper > span { font-family: var(--sm-mono); font-size: 15px; min-width: 34px; text-align: center; }

.sm-check {
	display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
	border: 1px solid var(--sm-line); border-radius: var(--sm-r);
	background: var(--sm-cream); padding: 11px 12px; min-height: 44px;
	cursor: pointer; font-size: 13.5px; color: var(--sm-ink); font-weight: 500;
}
.sm-check:hover { background: var(--sm-cream); color: var(--sm-ink); }
.sm-check__box {
	width: 18px; height: 18px; border-radius: 3px; border: 1.5px solid var(--sm-teal);
	display: flex; align-items: center; justify-content: center;
	color: var(--sm-teal); flex-shrink: 0;
}
.sm-check__box iconify-icon { opacity: 0; }
.sm-check.is-on .sm-check__box { background: var(--sm-teal); color: var(--sm-cream); }
.sm-check.is-on .sm-check__box iconify-icon { opacity: 1; }
.sm-check__len { margin-left: auto; font-size: 12px; color: var(--sm-muted); }

.sm-builder__out { display: flex; flex-direction: column; gap: 14px; }
.sm-builder__draw {
	background: var(--sm-cream); border: 1px solid var(--sm-line);
	border-radius: var(--sm-r-lg); padding: 12px;
}
.sm-builder__status {
	background: var(--sm-teal); color: var(--sm-cream); border-radius: 10px;
	padding: 14px 16px; display: flex; align-items: center; gap: 11px;
	font-size: 14px; font-weight: 500;
}
.sm-builder__status.is-bad { background: var(--sm-rust); }

.sm-builder__maths, .sm-builder__list {
	background: var(--sm-cream); border: 1px solid var(--sm-line);
	border-radius: var(--sm-r-lg); overflow: hidden;
}
.sm-builder__maths-toggle {
	width: 100%; display: flex; align-items: center; justify-content: space-between;
	padding: 15px 18px; background: none; border: 0; cursor: pointer;
	font-size: 14px; font-weight: 600; color: var(--sm-teal); text-align: left; min-height: 44px;
}
.sm-builder__maths-toggle:hover { background: var(--sm-cream-2); color: var(--sm-teal); }
.sm-builder__maths-toggle.is-open iconify-icon { transform: rotate(90deg); }
.sm-builder__maths-body { padding: 16px 18px 18px; border-top: 1px solid var(--sm-line); }
.sm-builder__maths-body p { font-size: 13.5px; line-height: 1.6; color: var(--sm-muted); margin: 0 0 12px; }
.sm-builder__formula {
	background: var(--sm-cream-2); border-radius: var(--sm-r); padding: 13px;
	font-family: var(--sm-mono); font-size: 12.5px; color: var(--sm-teal); line-height: 1.9;
	overflow-x: auto;
}
.sm-builder__override {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; margin-top: 14px; flex-wrap: wrap; font-size: 13px; color: var(--sm-muted);
}
.sm-builder__reset {
	border: 0; background: none; color: var(--sm-brass-dark);
	font-size: 13px; font-weight: 600; cursor: pointer; padding: 0 6px; min-height: 44px;
}
.sm-builder__reset:hover { background: none; color: var(--sm-brass-dark); }

.sm-builder__list { padding: 18px; }
.sm-builder__line {
	display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
	align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--sm-line);
	font-size: 13.5px;
}
.sm-builder__line a { color: var(--sm-ink); }
.sm-builder__line a:hover { color: var(--sm-brass-dark); }
.sm-builder__meta { font-size: 11px; color: var(--sm-muted); margin-top: 2px; }
.sm-builder__qty { font-size: 13px; color: var(--sm-slate); }
.sm-builder__sum { font-size: 13.5px; color: var(--sm-teal); min-width: 64px; text-align: right; }
.sm-builder__total {
	display: flex; justify-content: space-between; font-family: var(--sm-mono);
	font-size: 19px; color: var(--sm-teal); padding: 14px 0 16px; font-weight: 500;
}
.sm-builder__cta { display: block; width: 100%; text-align: center; }
.sm-builder__foot { font-size: 12px; color: var(--sm-muted); margin: 10px 0 0; text-align: center; }

/* ===========================================================================
   12. Ranges, trade, kits, reviews, recently viewed, samples
   ======================================================================== */
.sm-ranges { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.sm-range-tile {
	background: var(--sm-white); border: 1px solid var(--sm-line);
	border-radius: var(--sm-r-lg); padding: 18px; display: block;
}
.sm-range-tile:hover { border-color: var(--sm-brass); }
.sm-range-tile__name { display: block; font-family: var(--sm-head); font-weight: 700; font-size: 17px; color: var(--sm-teal); }
.sm-range-tile__blurb { display: block; font-size: 12.5px; color: var(--sm-muted); margin-top: 4px; line-height: 1.45; }

.sm-trade {
	background: var(--sm-teal); border-radius: var(--sm-r-lg); overflow: hidden;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.sm-trade__media { background: var(--sm-sand); min-height: 300px; position: relative; }
.sm-trade__media img { width: 100%; height: 100%; object-fit: contain; padding: 24px; display: block; }
.sm-trade__body { padding: 36px 32px; color: var(--sm-cream); }
.sm-trade__body h2 { color: var(--sm-cream); font-size: clamp(24px, 3vw, 34px); margin: 12px 0; line-height: 1.1; }
.sm-trade__body p { font-size: 14.5px; line-height: 1.6; color: rgba(250,247,242,.78); margin: 0 0 22px; max-width: 44ch; }
.sm-trade__tiers { list-style: none; margin: 0 0 22px; padding: 0; border-top: 1px solid rgba(250,247,242,.2); }
.sm-trade__tiers li {
	display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
	border-bottom: 1px solid rgba(250,247,242,.14); font-size: 13.5px; color: var(--sm-cream);
}
.sm-trade__tiers .sm-mono { color: var(--sm-brass); }

.sm-kits { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.sm-kit {
	background: var(--sm-cream); border: 1.5px solid var(--sm-line);
	border-radius: var(--sm-r-lg); overflow: hidden; position: relative;
}
.sm-kit--featured { border-color: var(--sm-brass); }
.sm-kit__badge {
	position: absolute; top: 14px; right: 14px; background: var(--sm-brass); color: #fff;
	font-family: var(--sm-mono); font-size: 10px; letter-spacing: .08em;
	padding: 5px 9px; border-radius: 20px; z-index: 2;
}
.sm-kit__art {
	background: var(--sm-cream-2); padding: 22px; display: flex;
	justify-content: center; gap: 10px; min-height: 150px; align-items: center;
}
.sm-kit__art img { height: 120px; width: auto; object-fit: contain; }
.sm-kit__body { padding: 20px; }
.sm-kit__body h3 { font-family: var(--sm-head); font-weight: 700; font-size: 19px; color: var(--sm-teal); margin: 0; }
.sm-kit__sub { font-size: 12px; color: var(--sm-muted); margin: 4px 0 14px; }
.sm-kit__incl { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.sm-kit__incl li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--sm-ink); }
.sm-kit__incl iconify-icon { color: var(--sm-brass-dark); flex-shrink: 0; margin-top: 2px; }
.sm-kit__price { font-size: 23px; color: var(--sm-teal); font-weight: 500; margin-bottom: 14px; }
.sm-kit__body .sm-btn { display: block; width: 100%; text-align: center; }
.sm-kits__note { font-size: 12.5px; color: var(--sm-muted); margin-top: 16px; }

.sm-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.sm-review {
	background: var(--sm-cream-2); border-radius: var(--sm-r-lg); padding: 24px;
	display: flex; flex-direction: column; gap: 14px;
}
.sm-review__stars { display: flex; gap: 3px; color: var(--sm-brass); }
.sm-review p { font-size: 14.5px; line-height: 1.6; color: var(--sm-ink); margin: 0; flex: 1; }
.sm-review__who { font-weight: 600; font-size: 14px; color: var(--sm-teal); }
.sm-review__what { font-size: 11.5px; color: var(--sm-muted); margin-top: 3px; }

.sm-rv__title { font-family: var(--sm-head); font-weight: 700; font-size: 22px; color: var(--sm-teal); margin: 0 0 18px; }
.sm-rv__scroll {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr);
	gap: 12px; overflow-x: auto; padding-bottom: 6px;
}
.sm-rv__scroll::-webkit-scrollbar { height: 0; }
.sm-rv__card {
	background: var(--sm-white); border: 1px solid var(--sm-line);
	border-radius: 10px; overflow: hidden; display: block;
}
.sm-rv__card:hover { border-color: var(--sm-brass); }
.sm-rv__img { display: block; background: var(--sm-cream-2); aspect-ratio: 4/3; }
.sm-rv__img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.sm-rv__name { display: block; padding: 12px 12px 0; font-size: 13.5px; font-weight: 600; color: var(--sm-ink); line-height: 1.3; }
.sm-rv__price { display: block; padding: 5px 12px 12px; font-size: 13px; color: var(--sm-teal); }

.sm-samples { background: var(--sm-brass); }
.sm-samples__inner {
	max-width: var(--sm-maxw); margin: 0 auto; padding: 48px var(--sm-pad);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 32px; align-items: center;
}
.sm-samples h2 {
	font-family: var(--sm-head); font-weight: 800; font-size: clamp(26px, 3.4vw, 36px);
	color: #fff; margin: 0 0 8px;
}
.sm-samples p { font-size: 15px; line-height: 1.55; color: #fff; margin: 0; max-width: 44ch; }
.sm-samples__form { display: flex; gap: 8px; flex-wrap: wrap; }
.sm-samples__form input {
	flex: 1; min-width: 200px; padding: 15px 14px;
	border: 1.5px solid var(--sm-teal-deep); border-radius: var(--sm-r);
	background: var(--sm-cream); color: var(--sm-ink); font-size: 15px;
}
.sm-samples__form .sm-btn { background: var(--sm-teal-deep); }
.sm-samples__form .sm-btn:hover { background: var(--sm-teal); }
.sm-samples__small { font-size: 12.5px; color: rgba(255,255,255,.85); margin-top: 10px; }
.sm-samples__ok {
	display: flex; align-items: center; gap: 10px; background: var(--sm-teal-deep);
	color: var(--sm-cream); border-radius: var(--sm-r); padding: 16px 18px; font-size: 15px;
}