/*
Theme Name:   SARTHALL Child
Theme URI:    http://186.244.215.52:8086/
Description:  Custom visual system for SARTHALL — English tailoring, made to measure.
              Midnight navy / antique gold / ivory, Bodoni Moda + Lato, traditional
              three-column centred header, hairline-gold squared product cards.
Author:       SARTHALL
Template:     storefront
Version:      1.0.3
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  sarthall-child
Tags:         e-commerce, custom-colors, custom-menu, translation-ready
*/

/* ==========================================================================
   1. SELF-HOSTED FONTS  (woff2, relative paths from this file)
   ========================================================================== */

/* Bodoni Moda — high-contrast didone serif. Static instances cut from the
   upstream variable font (wght 400..900) by fontTools, latin subset. */
@font-face {
	font-family: "Bodoni Moda";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(assets/fonts/bodoni-moda-400.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Bodoni Moda";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(assets/fonts/bodoni-moda-700.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lato — humanist sans for body copy and UI. */
@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(assets/fonts/lato-400.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(assets/fonts/lato-700.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. DESIGN TOKENS
   ========================================================================== */

:root {
	--brand-navy: #101B33;
	--brand-gold: #B08D4F;
	--brand-ivory: #F4F1EA;
	--font-head: "Bodoni Moda", serif;
	--font-body: "Lato", sans-serif;

	/* Derived tones */
	--navy-deep: #0A1224;
	--navy-soft: #1B2947;
	--ivory-deep: #EDE8DC;
	--ivory-panel: #FBF9F4;
	--ink: #101B33;
	--ink-mute: #55607A;
	--ink-faint: #8A93A6;

	/* Gold, at the three weights the system uses */
	--gold: #B08D4F;
	--gold-line: rgba(176, 141, 79, 0.55);
	--gold-hair: rgba(176, 141, 79, 0.28);

	--hairline: rgba(16, 27, 51, 0.14);

	--wrap: 1280px;
	--gap: 1.75rem;

	--ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   3. BASE
   ========================================================================== */

html {
	background-color: var(--brand-ivory);
}

body,
.site {
	background-color: var(--brand-ivory);
	color: var(--ink);
	font-family: var(--font-body);
	font-weight: 400;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
select,
textarea,
.woocommerce-input-wrapper,
.quantity {
	font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.widget-title {
	font-family: var(--font-head);
	font-weight: 700;
	color: var(--brand-navy);
	letter-spacing: -0.015em; /* classical tailoring: large Bodoni set tight */
	line-height: 1.15;
}

h1, .entry-title { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.1vw, 2.4rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); }
h4 { font-size: 1.2rem; }

p, li, td, th, label, .woocommerce-result-count {
	color: var(--ink);
}

a {
	color: var(--brand-navy);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color 0.2s var(--ease);
}
a:hover { color: var(--brand-gold); }

/* Storefront layout wrapper — widen to the brand grid. */
.col-full {
	max-width: var(--wrap);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	box-sizing: border-box;
}

.site-content {
	background-color: var(--brand-ivory);
	padding-top: 2.5rem;
}

.screen-reader-text {
	color: var(--ink);
}

/* Small uppercase gold label — the signature "spec label" treatment. */
.s8-eyebrow,
.woocommerce-breadcrumb,
.widget-title,
.woocommerce-result-count,
.wc-block-components-title {
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brand-gold);
}

.woocommerce-breadcrumb a { color: var(--ink-mute); }
.woocommerce-breadcrumb a:hover { color: var(--gold); }

/* ==========================================================================
   4. HEADER — traditional three-column centred masthead
   ========================================================================== */

.site-header {
	background-color: var(--brand-navy);
	background-image: none;
	color: var(--brand-ivory);
	border-bottom: 1px solid var(--gold-line);
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
	position: relative;
	z-index: 999;
}

/* Kill Storefront's float/percentage header grid. */
.site-header .s8-header-grid .site-branding,
.site-header .s8-header-grid .site-search,
.site-header .s8-header-grid .main-navigation,
.site-header .s8-header-grid .site-header-cart,
.woocommerce-active .site-header .s8-header-grid .site-branding,
.woocommerce-active .site-header .s8-header-grid .site-search,
.woocommerce-active .site-header .s8-header-grid .main-navigation,
.woocommerce-active .site-header .s8-header-grid .site-header-cart {
	width: auto !important;
	max-width: none !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	display: block;
}

/* The three-column grid: nav | wordmark | tools */
.s8-header-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: var(--gap);
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	min-height: 108px;
}

.s8-header-col--nav { grid-column: 1; grid-row: 1; justify-self: start; }
.s8-header-col--brand { grid-column: 2; grid-row: 1; justify-self: center; text-align: center; }
.s8-header-col--tools {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

/* Wordmark */
.site-header .site-branding { margin-bottom: 0; }

.site-header .site-title,
.site-header .site-title a {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(1.5rem, 3.2vw, 2.35rem);
	line-height: 1;
	letter-spacing: 0.2em;
	margin: 0;
	color: var(--brand-ivory);
	text-decoration: none;
	text-transform: uppercase;
	text-indent: 0.2em; /* balance the trailing letter-space */
}

.site-header .site-title a:hover { color: var(--gold); }

.site-header .site-description {
	display: none;
}

.site-header .custom-logo-link img { max-width: 210px; }

/* ==========================================================================
   5. HEADER NAVIGATION
   ========================================================================== */

.site-header .main-navigation {
	margin: 0;
	position: static;
}

.site-header .main-navigation .primary-navigation > ul,
.site-header .main-navigation ul.menu {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.site-header .main-navigation ul.menu > li,
.site-header .main-navigation .primary-navigation > ul > li {
	position: relative;
	float: none;
	margin: 0;
	list-style: none;
}

.site-header .main-navigation ul.menu > li > a,
.site-header .main-navigation .primary-navigation > ul > li > a {
	display: block;
	font-family: var(--font-body);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand-ivory);
	text-decoration: none;
	padding: 0.5rem 0;
	border-bottom: 1px solid transparent;
	transition: color 0.22s var(--ease), border-color 0.22s var(--ease);
}

.site-header .main-navigation ul.menu > li > a:hover,
.site-header .main-navigation .primary-navigation > ul > li > a:hover,
.site-header .main-navigation ul.menu > li.current_page_item > a,
.site-header .main-navigation ul.menu > li.current-menu-item > a {
	color: var(--gold);
	border-bottom-color: var(--gold);
}

/* Sub-menus */
.site-header .main-navigation ul.menu ul.sub-menu,
.site-header .main-navigation .primary-navigation ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	margin: 0;
	padding: 0.35rem 0;
	list-style: none;
	background-color: var(--navy-deep);
	border: 1px solid var(--gold-line);
	box-shadow: none;
	border-radius: 0;
	display: none;
	z-index: 1000;
}

.site-header .main-navigation ul.menu > li:hover > ul.sub-menu,
.site-header .main-navigation .primary-navigation > ul > li:hover > ul {
	display: block;
}

.site-header .main-navigation ul.menu ul.sub-menu a,
.site-header .main-navigation .primary-navigation ul ul a {
	display: block;
	padding: 0.6rem 1.1rem;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brand-ivory);
	text-decoration: none;
	border: 0;
}

.site-header .main-navigation ul.menu ul.sub-menu a:hover,
.site-header .main-navigation .primary-navigation ul ul a:hover {
	background-color: rgba(176, 141, 79, 0.12);
	color: var(--gold);
}

/* Mobile toggle button — hidden on desktop */
.site-header .main-navigation .menu-toggle {
	display: none;
	background-color: transparent;
	border: 1px solid var(--gold-line);
	color: var(--brand-ivory);
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.6rem 1rem;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.22s var(--ease), color 0.22s var(--ease);
}

.site-header .main-navigation .menu-toggle:hover {
	background-color: var(--gold);
	color: var(--brand-navy);
}

.site-header .main-navigation .menu-toggle:focus,
.site-header .main-navigation .menu-toggle:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

/* Neutralise Storefront's desktop rule that hides the handheld list */
.site-header .main-navigation .handheld-navigation { display: none !important; }

/* ==========================================================================
   6. HEADER SEARCH + CART
   ========================================================================== */

.site-header .site-search { margin: 0; }
.site-header .site-search .widget { margin-bottom: 0; }

.site-header .site-search form,
.site-header .site-search form.woocommerce-product-search {
	position: relative;
	display: flex;
	align-items: stretch;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.site-header .site-search form::before {
	content: "";
	display: none;
}

.site-header .site-search input.search-field,
.site-header .site-search input[type="search"] {
	width: 190px;
	max-width: 100%;
	background-color: rgba(244, 241, 234, 0.05);
	border: 0;
	border-bottom: 1px solid var(--gold-line);
	border-radius: 0;
	box-shadow: none;
	color: var(--brand-ivory);
	font-family: var(--font-body);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	padding: 0.6rem 0.25rem;
	transition: border-color 0.22s var(--ease), background-color 0.22s var(--ease);
}

.site-header .site-search input.search-field::placeholder {
	color: var(--ink-faint);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.site-header .site-search input.search-field:focus {
	outline: none;
	border-bottom-color: var(--gold);
	background-color: rgba(244, 241, 234, 0.09);
	color: var(--brand-ivory);
}

.site-header .site-search button,
.site-header .site-search input[type="submit"] {
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--gold-line);
	border-radius: 0;
	color: var(--gold);
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.6rem 0.75rem;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.22s var(--ease), border-color 0.22s var(--ease);
}

.site-header .site-search button:hover {
	color: var(--brand-ivory);
	border-bottom-color: var(--gold);
}

/* Cart */
.site-header .site-header-cart { margin: 0; position: relative; }

.site-header .site-header-cart .cart-contents {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-ivory);
	text-decoration: none;
	padding: 0.6rem 0;
	border-bottom: 1px solid transparent;
	transition: color 0.22s var(--ease), border-color 0.22s var(--ease);
}

.site-header .site-header-cart .cart-contents:hover {
	color: var(--gold);
	border-bottom-color: var(--gold);
}

.site-header .site-header-cart .cart-contents .count {
	color: var(--gold);
	font-weight: 700;
}

.site-header .site-header-cart .woocommerce-Price-amount { color: inherit; }

/* Cart dropdown */
.site-header .site-header-cart li > .widget_shopping_cart {
	position: absolute;
	right: 0;
	top: 100%;
	width: 320px;
	background-color: var(--navy-deep);
	border: 1px solid var(--gold-line);
	border-radius: 0;
	padding: 1.1rem;
	display: none;
	z-index: 1000;
}

.site-header .site-header-cart li:hover > .widget_shopping_cart { display: block; }

.site-header .widget_shopping_cart .cart_list li a,
.site-header .widget_shopping_cart .product_list_widget a {
	color: var(--brand-ivory);
}

.site-header .widget_shopping_cart .total,
.site-header .widget_shopping_cart .buttons a {
	color: var(--brand-ivory);
}

/* ==========================================================================
   7. BUTTONS — midnight ground, gold ink, square
   ========================================================================== */

.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wc-block-components-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.single_add_to_cart_button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: inline-block;
	background-color: var(--brand-navy);
	background-image: none;
	border: 1px solid var(--brand-navy);
	border-radius: 0;
	box-shadow: none;
	color: var(--brand-gold);
	font-family: var(--font-body);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.2;
	padding: 1rem 2rem;
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.button:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.single_add_to_cart_button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background-color: var(--brand-gold);
	border-color: var(--brand-gold);
	color: var(--brand-navy);
	box-shadow: none;
}

.button:focus,
.woocommerce a.button:focus,
.single_add_to_cart_button:focus {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

/* Secondary — gold outline on ivory */
.button.s8-ghost,
.woocommerce .button.s8-ghost {
	background-color: transparent;
	border-color: var(--brand-gold);
	color: var(--brand-navy);
}
.button.s8-ghost:hover {
	background-color: var(--brand-gold);
	color: var(--brand-navy);
}

/* Disabled / awaiting-selection state — a quiet ivory rule rather than the
   default washed-out (opacity) navy. */
.button.disabled,
.button:disabled,
.button[disabled],
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button[disabled],
.single_add_to_cart_button.disabled,
.single_add_to_cart_button:disabled,
.single_add_to_cart_button[disabled],
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.disabled,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:disabled,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button[disabled] {
	background-color: var(--ivory-deep);
	border-color: var(--gold-line);
	color: var(--ink-faint);
	opacity: 1;
	cursor: not-allowed;
}

.woocommerce a.button.disabled:hover,
.woocommerce button.button.disabled:hover,
.woocommerce button.button:disabled:hover,
.single_add_to_cart_button.disabled:hover,
.single_add_to_cart_button:disabled:hover {
	background-color: var(--ivory-deep);
	border-color: var(--gold-line);
	color: var(--ink-faint);
}

/* ==========================================================================
   8. PRODUCT CARDS — hairline gold frame, no radius, no shadow
   ========================================================================== */

ul.products li.product,
ul.products li.product-category,
.wc-block-grid__product {
	background-color: var(--ivory-panel);
	border: 1px solid var(--gold-line);
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	padding: 0 0 1.35rem;
	overflow: hidden;
	position: relative; /* anchor for the sale flash */
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

/* Hover: the hairline becomes solid gold and thickens to a 2px ring
   (inset ring, so there is no elevation shadow and no layout shift). */
ul.products li.product:hover,
ul.products li.product:focus-within,
.wc-block-grid__product:hover {
	border-color: var(--brand-gold);
	box-shadow: inset 0 0 0 1px var(--brand-gold);
}

ul.products li.product a img,
ul.products li.product img {
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 0;
	display: block;
	width: 100%;
}

ul.products li.product .woocommerce-loop-product__link { display: block; }

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-category__title {
	font-family: var(--font-head);
	font-weight: 400;
	font-size: 1.18rem;
	letter-spacing: -0.005em;
	line-height: 1.3;
	color: var(--brand-navy);
	margin: 1.15rem 1.25rem 0.4rem;
	padding: 0;
}

ul.products li.product .woocommerce-loop-product__title a { color: inherit; text-decoration: none; }
ul.products li.product:hover .woocommerce-loop-product__title { color: var(--brand-navy); }

ul.products li.product .price,
ul.products li.product .woocommerce-Price-amount {
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--brand-navy);
	margin: 0 1.25rem 0.9rem;
	display: block;
}

ul.products li.product .price del,
ul.products li.product .price del .woocommerce-Price-amount {
	color: var(--ink-faint);
	font-weight: 400;
}
ul.products li.product .price ins { text-decoration: none; }

ul.products li.product .button,
ul.products li.product .added_to_cart {
	margin: 0 1.25rem;
}

/* Sale flash — square gold tag.
   Storefront declares `.onsale{position:relative}`, which would shift the tag
   down the card from its flow position; in the loop we pin it to the corner
   of the image instead. */
ul.products li.product .onsale {
	position: absolute;
	top: 0;
	left: 0;
	right: auto;
	z-index: 3;
	background-color: var(--brand-gold);
	background-image: none;
	color: var(--brand-navy);
	font-family: var(--font-body);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border-radius: 0;
	box-shadow: none;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	margin: 0;
	padding: 0.5rem 0.75rem;
}

/* On the product page the tag sits as a rule above the title. */
.single-product span.onsale {
	position: static;
	display: inline-block;
	background-color: var(--brand-gold);
	background-image: none;
	color: var(--brand-navy);
	font-family: var(--font-body);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border-radius: 0;
	box-shadow: none;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	margin: 0 0 0.85rem;
	padding: 0.45rem 0.7rem;
}

/* Star ratings inherit gold */
ul.products li.product .star-rating span::before,
.star-rating span::before { color: var(--gold); }
.star-rating::before { color: var(--gold-hair); }

/* Category / result count row */
.woocommerce-products-header__title { margin-bottom: 0.5rem; }
.woocommerce-result-count { margin-bottom: 1.5rem; }

.woocommerce-ordering select {
	background-color: transparent;
	border: 1px solid var(--gold-line);
	border-radius: 0;
	color: var(--ink);
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.6rem 0.9rem;
}

/* ==========================================================================
   8b. WOOCOMMERCE LAYOUT — full width, no widget rail
   Storefront floats a 21.7% widget column beside the shop archive and the
   product page, which squeezes the gallery grid and pushes the tabs into a
   narrow column. A made-to-measure catalogue reads better full width.
   ========================================================================== */

.woocommerce-page .content-area,
.post-type-archive-product .content-area,
.woocommerce-page .site-main,
.post-type-archive-product .site-main {
	width: 100% !important;
	float: none !important;
	margin-right: 0 !important;
}

.woocommerce-page .widget-area,
.post-type-archive-product .widget-area,
.woocommerce-page #secondary,
.post-type-archive-product #secondary {
	display: none !important;
	width: 0 !important;
	float: none !important;
}

/* ==========================================================================
   9. SINGLE PRODUCT
   ========================================================================== */

.single-product div.product {
	background: transparent;
}

.single-product div.product .woocommerce-product-gallery,
.single-product div.product .images {
	border: 1px solid var(--gold-hair);
	border-radius: 0;
	background-color: var(--ivory-panel);
}

.single-product div.product .woocommerce-product-gallery__wrapper { margin: 0; }

.single-product div.product .summary { color: var(--ink); }

.single-product div.product .product_title {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(1.9rem, 3.6vw, 2.9rem);
	letter-spacing: -0.015em;
	line-height: 1.12;
	color: var(--brand-navy);
	margin-bottom: 0.75rem;
}

.single-product div.product p.price,
.single-product div.product span.price {
	font-family: var(--font-body);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--brand-navy);
	margin-bottom: 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--gold-hair);
}

.single-product div.product p.price del { color: var(--ink-faint); font-weight: 400; }
.single-product div.product p.price ins { text-decoration: none; }

.woocommerce-product-details__short-description,
.pdp-lede {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.8;
	color: var(--ink-mute);
}

/* Lede stands slightly larger, like a caption under a plate */
.pdp-lede {
	font-size: 1.02rem;
	color: var(--ink);
	border-left: 1px solid var(--gold-line);
	padding-left: 1.15rem;
	margin-bottom: 1.75rem;
}

/* Variations */
.single-product div.product .variations,
.variations_form .variations {
	width: 100%;
	border: 0;
	margin-bottom: 1.15rem;
}

.single-product div.product .variations tr { border: 0; }

.single-product div.product .variations th.label,
.variations_form .variations th.label,
.variations_form .variations td.label {
	background: transparent;
	border: 0;
	padding: 0.55rem 1rem 0.55rem 0;
	vertical-align: middle;
	width: 32%;
}

.single-product div.product .variations th.label label,
.variations_form .variations label {
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0;
}

.variations_form .variations td.value { border: 0; padding: 0.55rem 0; }

.variations_form select,
.single-product div.product .variations select {
	width: 100%;
	background-color: var(--ivory-panel);
	border: 1px solid var(--gold-line);
	border-radius: 0;
	box-shadow: none;
	color: var(--ink);
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	padding: 0.65rem 0.85rem;
}

.variations_form select:focus { outline: 1px solid var(--gold); }

.woocommerce-variation-price .price,
.woocommerce-variation-price span.price {
	color: var(--brand-navy);
	font-weight: 700;
	letter-spacing: 0.08em;
}

.reset_variations {
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold);
}

/* Quantity */
.quantity input.qty {
	background-color: var(--ivory-panel);
	border: 1px solid var(--gold-line);
	border-radius: 0;
	color: var(--ink);
	box-shadow: none;
	font-family: var(--font-body);
	font-weight: 700;
	padding: 0.85rem 0.5rem;
}

/* Tabs */
.woocommerce-tabs ul.tabs {
	padding-left: 0;
	margin-bottom: 0;
	border-bottom: 1px solid var(--gold-line);
}

.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { display: none; border: 0; }

.woocommerce-tabs ul.tabs li {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	margin: 0 2rem 0 0;
	padding: 0;
	box-shadow: none;
}

.woocommerce-tabs ul.tabs li a {
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-mute);
	padding: 0.9rem 0;
	border-bottom: 1px solid transparent;
	text-shadow: none;
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
	color: var(--brand-navy);
	border-bottom-color: var(--gold);
}

.woocommerce-tabs .panel {
	border: 0;
	box-shadow: none;
	padding-top: 2rem;
}

/* Related products heading */
.related.products > h2,
.upsells.products > h2,
.cross-sells > h2 {
	font-family: var(--font-head);
	font-weight: 700;
	letter-spacing: -0.01em;
	border-bottom: 1px solid var(--gold-hair);
	padding-bottom: 0.75rem;
	margin-bottom: 2rem;
}

/* ==========================================================================
   10. pdp-spec — the specification table
   ========================================================================== */

.pdp-spec {
	width: 100%;
	background-color: var(--ivory-deep);
	border: 1px solid var(--gold-line);
	border-collapse: collapse;
	border-radius: 0;
	margin: 0 0 2rem;
	table-layout: fixed;
}

.pdp-spec tr {
	border-bottom: 1px solid var(--gold-hair);
}

.pdp-spec tr:last-child { border-bottom: 0; }

/* Spec labels: gold, small, wide-tracked, uppercase */
.pdp-spec th {
	width: 30%;
	background-color: transparent;
	border: 0;
	border-right: 1px solid var(--gold-hair);
	padding: 0.95rem 1.15rem;
	text-align: left;
	vertical-align: top;
	font-family: var(--font-body);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold);
	line-height: 1.6;
}

.pdp-spec td {
	border: 0;
	padding: 0.95rem 1.15rem;
	vertical-align: top;
	font-family: var(--font-body);
	font-size: 0.87rem;
	line-height: 1.75;
	color: var(--ink);
}

.pdp-spec tbody tr:hover { background-color: rgba(176, 141, 79, 0.06); }

/* ==========================================================================
   11. pdp-sections — the eight detail blocks
   ========================================================================== */

.pdp-sections {
	margin-top: 2.5rem;
}

.pdp-sections h2,
.pdp-sections h3,
.pdp-sections h4 {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.45rem;
	letter-spacing: -0.01em;
	color: var(--brand-navy);
	margin: 2.25rem 0 1rem;
	padding-bottom: 0.55rem;
	border-bottom: 1px solid var(--gold);
}

.pdp-sections h2:first-child,
.pdp-sections h3:first-child,
.pdp-sections h4:first-child { margin-top: 0; }

.pdp-sections p {
	font-size: 0.95rem;
	line-height: 1.85;
	color: var(--ink);
	margin-bottom: 1rem;
}

.pdp-sections ul,
.pdp-sections ol,
.pdp-bullets,
.pdp-usage,
.pdp-care {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.pdp-bullets li,
.pdp-usage li,
.pdp-care li,
.pdp-sections ul li,
.pdp-sections ol li {
	position: relative;
	padding: 0.5rem 0 0.5rem 1.6rem;
	margin: 0;
	border-bottom: 1px solid var(--gold-hair);
	font-family: var(--font-body);
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--ink);
}

.pdp-bullets li:last-child,
.pdp-usage li:last-child,
.pdp-care li:last-child { border-bottom: 0; }

/* Gold hairline marker */
.pdp-bullets li::before,
.pdp-sections ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.15rem;
	width: 0.75rem;
	height: 1px;
	background-color: var(--gold);
}

.pdp-usage li { counter-increment: pdp-usage; }

.pdp-usage li::before {
	content: counter(pdp-usage, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.5rem;
	font-family: var(--font-body);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--gold);
}

.pdp-usage { counter-reset: pdp-usage; }

.pdp-sections ol:not(.pdp-usage) { counter-reset: pdp-ol; }
.pdp-sections ol:not(.pdp-usage) li { counter-increment: pdp-ol; }
.pdp-sections ol:not(.pdp-usage) li::before {
	content: counter(pdp-ol, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.5rem;
	font-size: 0.66rem;
	font-weight: 700;
	color: var(--gold);
}

/* Warnings — gold-ruled callout */
.pdp-warnings {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	background-color: var(--ivory-deep);
	border-left: 2px solid var(--brand-gold);
	font-size: 0.88rem;
}

.pdp-warnings li { border: 0; padding: 0.3rem 0; }

/* Returns sub-blocks */
.pdp-returns-window,
.pdp-returns-ok,
.pdp-returns-no,
.pdp-returns-ex {
	font-size: 0.9rem;
	line-height: 1.75;
	color: var(--ink);
	margin-bottom: 0.5rem;
}

/* ==========================================================================
   12. NOTICES, CART, CHECKOUT
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	background-color: var(--ivory-deep);
	border-top: 0;
	border-left: 2px solid var(--brand-gold);
	border-radius: 0;
	box-shadow: none;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 0.88rem;
	padding: 1rem 1.25rem;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { color: var(--gold); }

.woocommerce-message .button,
.woocommerce-info .button {
	background-color: transparent;
	border: 1px solid var(--gold);
	color: var(--brand-navy);
	padding: 0.6rem 1.1rem;
}

.woocommerce-cart table.cart,
.woocommerce-checkout-review-order-table,
table.shop_table {
	background-color: var(--ivory-panel);
	border: 1px solid var(--gold-line);
	border-collapse: collapse;
	border-radius: 0;
}

table.shop_table th {
	background-color: var(--ivory-deep);
	border-bottom: 1px solid var(--gold-line);
	color: var(--gold);
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

table.shop_table td {
	border-top: 1px solid var(--gold-hair);
	color: var(--ink);
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	background-color: var(--ivory-panel);
	border: 1px solid var(--gold-line);
	border-radius: 0;
	box-shadow: none;
	color: var(--ink);
	padding: 0.8rem 0.95rem;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	outline: none;
	border-color: var(--gold);
}

/* ==========================================================================
   13. PAGINATION + BREADCRUMB
   ========================================================================== */

.woocommerce-pagination ul.page-numbers,
nav.woocommerce-pagination ul {
	border: 0;
	margin: 2.5rem 0 0;
	display: flex;
	justify-content: center;
	gap: 0.4rem;
}

.woocommerce-pagination ul.page-numbers li,
nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
}

.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span,
nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span {
	display: block;
	min-width: 2.6rem;
	padding: 0.65rem 0.5rem;
	background-color: transparent;
	border: 1px solid var(--gold-line);
	border-radius: 0;
	color: var(--brand-navy);
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.22s var(--ease), color 0.22s var(--ease);
}

.woocommerce-pagination ul.page-numbers li span.current,
.woocommerce-pagination ul.page-numbers li a:hover,
nav.woocommerce-pagination ul li span.current,
nav.woocommerce-pagination ul li a:hover {
	background-color: var(--brand-navy);
	border-color: var(--brand-navy);
	color: var(--gold);
}

/* ==========================================================================
   14. FOOTER — dark close
   ========================================================================== */

.site-footer {
	background-color: var(--brand-navy);
	background-image: none;
	color: var(--ink-faint);
	border-top: 1px solid var(--gold-line);
	padding-top: 3rem;
	padding-bottom: 2rem;
	margin-top: 4rem;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .widget-title {
	font-family: var(--font-head);
	font-weight: 400;
	color: var(--brand-ivory);
	letter-spacing: 0.01em;
}

.site-footer .widget-title {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold);
}

.site-footer a { color: var(--brand-ivory); }
.site-footer a:hover { color: var(--gold); }

.site-footer p,
.site-footer li,
.site-footer .widget,
.site-footer .site-info { color: var(--ink-faint); }

.site-footer .site-info {
	border-top: 1px solid rgba(176, 141, 79, 0.28);
	padding-top: 1.5rem;
	font-family: var(--font-body);
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.site-footer .site-info a { color: var(--brand-ivory); }
.site-footer .site-info a:hover { color: var(--gold); }

/* Standards row — policy links from inc/standards.php, printed above the
   copyright line on every template (front page, shop, product, cart,
   checkout, account, 404). */
.site-footer .sarthall-footer-legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.6rem 1.7rem;
	margin: 0 0 1.5rem;
	padding: 0 0 1.5rem;
	border-bottom: 1px solid rgba(176, 141, 79, 0.28);
}

.site-footer .sarthall-footer-legal a {
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-ivory);
	text-decoration: none;
	transition: color 0.22s var(--ease);
}

.site-footer .sarthall-footer-legal a:hover { color: var(--gold); }

/* Link colour, pinned. Storefront's customizer prints
   `.site-footer a:not(.button):not(.components-button){color:#333}` (0,3,1)
   inline in the head, which outranks the rules above and leaves every footer
   link at 1.4:1 against the navy. The #colophon prefix takes the row and the
   copyright's privacy-policy link back to the ivory/gold the theme declares. */
#colophon .sarthall-footer-legal a:not(.button),
#colophon .site-info a:not(.button) {
	color: var(--brand-ivory);
}

#colophon .sarthall-footer-legal a:not(.button):hover,
#colophon .site-info a:not(.button):hover {
	color: var(--gold);
}

/* Handheld sticky bar */
.storefront-handheld-footer-bar {
	background-color: var(--navy-deep);
	border-top: 1px solid var(--gold-line);
}

.storefront-handheld-footer-bar ul li > a {
	background-color: transparent;
	color: var(--brand-ivory);
	font-family: var(--font-body);
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.storefront-handheld-footer-bar ul li > a:hover { color: var(--gold); }

/* ==========================================================================
   15. RESPONSIVE — three columns fold to one
   ========================================================================== */

@media (max-width: 1024px) {
	.site-header .site-search input.search-field { width: 150px; }
	.s8-header-grid { column-gap: 1rem; }
	.site-header .main-navigation ul.menu { gap: 1.1rem; }
	.site-header .main-navigation ul.menu > li > a { font-size: 0.68rem; letter-spacing: 0.12em; }
}

@media (max-width: 900px) {
	/* Single column: wordmark, then nav, then tools. */
	.s8-header-grid {
		grid-template-columns: 1fr;
		row-gap: 1.1rem;
		padding-top: 1.35rem;
		padding-bottom: 1.35rem;
		min-height: 0;
	}

	.s8-header-col--brand { grid-column: 1; grid-row: 1; justify-self: center; order: 1; }
	.s8-header-col--nav { grid-column: 1; grid-row: 2; justify-self: center; order: 2; width: 100%; }
	.s8-header-col--tools {
		grid-column: 1;
		grid-row: 3;
		justify-self: center;
		order: 3;
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
		gap: 1rem;
	}

	.s8-header-col--nav .main-navigation { text-align: center; }

	/* Mobile menu: collapsed behind the toggle. */
	.site-header .main-navigation .menu-toggle {
		display: inline-block;
		margin: 0 auto;
	}

	.site-header .main-navigation .primary-navigation { display: none; }

	.site-header .main-navigation.toggled .primary-navigation {
		display: block;
		margin-top: 1rem;
		padding-top: 1rem;
		border-top: 1px solid var(--gold-hair);
	}

	.site-header .main-navigation ul.menu,
	.site-header .main-navigation .primary-navigation > ul,
	.site-header .main-navigation.toggled ul.menu {
		display: block;
		width: 100%;
	}

	.site-header .main-navigation ul.menu > li,
	.site-header .main-navigation .primary-navigation > ul > li {
		display: block;
		width: 100%;
		border-bottom: 1px solid var(--gold-hair);
	}

	.site-header .main-navigation ul.menu > li:last-child { border-bottom: 0; }

	.site-header .main-navigation ul.menu > li > a,
	.site-header .main-navigation .primary-navigation > ul > li > a {
		padding: 0.85rem 0;
		border-bottom: 0;
	}

	/* Sub-menus go inline on mobile */
	.site-header .main-navigation ul.menu ul.sub-menu,
	.site-header .main-navigation .primary-navigation ul ul {
		position: static;
		display: block;
		border: 0;
		border-left: 1px solid var(--gold-line);
		margin: 0 0 0.5rem 0.5rem;
		padding: 0;
		background: transparent;
	}

	.site-header .site-search { width: 100%; }
	.site-header .site-search form { justify-content: center; }
	.site-header .site-search input.search-field { width: 100%; max-width: 320px; }

	.site-header .site-header-cart li > .widget_shopping_cart {
		right: 50%;
		transform: translateX(50%);
		width: min(320px, 92vw);
	}

	/* PDP stacks */
	.pdp-spec th { width: 38%; }

	.pdp-spec,
	.pdp-spec tbody,
	.pdp-spec tr,
	.pdp-spec th,
	.pdp-spec td { display: block; width: 100%; }

	.pdp-spec th {
		border-right: 0;
		border-bottom: 1px solid var(--gold-hair);
		padding-bottom: 0.4rem;
	}

	.pdp-spec td { padding-top: 0.6rem; }
}

@media (min-width: 901px) {
	.site-header .main-navigation .primary-navigation { display: block; }
}

@media (max-width: 600px) {
	.s8-header-grid { padding-top: 1.15rem; padding-bottom: 1.15rem; }

	.site-header .site-title,
	.site-header .site-title a { font-size: 1.4rem; letter-spacing: 0.16em; }

	ul.products li.product .woocommerce-loop-product__title { font-size: 1.05rem; margin: 1rem 1rem 0.35rem; }
	ul.products li.product .price { margin: 0 1rem 0.8rem; }
	ul.products li.product .button { margin: 0 1rem; }

	.pdp-sections h2,
	.pdp-sections h3 { font-size: 1.25rem; }

	.button,
	.woocommerce a.button,
	.single_add_to_cart_button { padding: 0.9rem 1.4rem; letter-spacing: 0.14em; }
}

/* ==========================================================================
   16. PRINT
   ========================================================================== */

@media print {
	.site-header,
	.site-footer,
	.storefront-handheld-footer-bar { display: none !important; }
	body, .site, .site-content { background: #fff; color: #000; }
}