/*
Theme Name:   HEMVANG Child
Theme URI:    https://hemvang.example/
Description:  HEMVANG — 家具整屋 / Nordic slow-living furniture. Custom visual system for the
              Storefront parent theme: oat-and-terracotta palette, Playfair Display + Karla
              self-hosted, wide slow-rhythm masthead, 20px soft-shadow product cards.
Author:       HEMVANG
Author URI:   https://hemvang.example/
Template:     storefront
Version:      1.0.1
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  hemvang-child
Tags:         e-commerce, woocommerce, two-columns, custom-colors, custom-logo, custom-menu
*/

/* ==========================================================================
   HEMVANG CHILD — FULL VISUAL SYSTEM
   Sibling of Storefront. Every rule below is HEMVANG-owned; the parent's
   own stylesheet is loaded first so nothing here needs to fight the cascade
   except where explicitly marked.

   00 · Self-hosted fonts
   01 · Design tokens
   02 · Base typography & slow rhythm
   03 · Layout shell (wide)
   04 · Masthead — wide, big wordmark, generous whitespace
   05 · Navigation & cart
   06 · Buttons & forms
   07 · Product cards (20px / soft shadow / lift)
   08 · Shop toolbar, notices, pagination
   09 · Single product
   10 · Tabs & attribute tables (Specifications)
   11 · Cart, checkout, account
   12 · Widgets & sidebar
   13 · Footer
   14 · Homepage scenes (hero / bands / featured)
   15 · Responsive
   16 · Accessibility & motion
   ========================================================================== */

/* ==========================================================================
   00 · SELF-HOSTED FONTS
   Files live in assets/fonts/ and are referenced by RELATIVE path so the
   theme is portable across domains.
   Both families ship as VARIABLE fonts (Google served one binary per subset):
     Playfair Display  wght axis 400..900  → covers 400 / 600 / 700
     Karla             wght axis 400..800  → covers 400 / 600
   The range descriptor is what makes those exact weights resolve to real
   interpolated instances instead of synthetic bolding.
   ========================================================================== */

/* --- Playfair Display — 400 / 600 / 700 (variable 400–900) --- */
@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('assets/fonts/playfair-display.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+2074, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('assets/fonts/playfair-display-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Karla — 400 / 600 (variable 400–800) --- */
@font-face {
	font-family: 'Karla';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('assets/fonts/karla.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+2074, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Karla';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('assets/fonts/karla-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   01 · DESIGN TOKENS
   ========================================================================== */
:root {
	/* --- required brand palette --- */
	--brand-bg: #EDE6DA;          /* 主色 · 燕麦 oat */
	--brand-accent: #B9694A;      /* 强调色 · 陶土 terracotta */
	--brand-walnut: #6B4A2F;      /* 辅助色 · 胡桃 walnut */

	/* --- fonts --- */
	--font-head: "Playfair Display", serif;
	--font-body: "Karla", sans-serif;

	/* --- derived surfaces (same hue family as walnut) --- */
	--hv-surface: #FFFCF7;                       /* card / panel face */
	--hv-surface-warm: #F6F1E8;                  /* recessed oat */
	--hv-ink: #5A3E29;                           /* body copy, walnut darkened */
	--hv-line: rgba(107, 74, 47, .14);
	--hv-line-strong: rgba(107, 74, 47, .26);
	--hv-accent-soft: rgba(185, 105, 74, .12);

	/* --- shape --- */
	--hv-radius: 20px;                           /* card radius (spec) */
	--hv-radius-sm: 12px;                        /* inputs / small panels */
	--hv-radius-pill: 999px;                     /* buttons */

	/* --- elevation --- */
	--hv-shadow: 0 2px 12px rgba(107, 74, 47, .10);      /* spec, verbatim */
	--hv-shadow-lift: 0 16px 38px rgba(107, 74, 47, .17);
	--hv-shadow-deep: 0 24px 60px rgba(107, 74, 47, .20);

	/* --- metrics --- */
	--hv-shell: 1400px;                          /* wide */
	--hv-gutter: clamp(1.25rem, 4vw, 3.25rem);
	--hv-masthead-pad: clamp(2.5rem, 6vw, 5rem);
	--hv-section: clamp(3.5rem, 7vw, 6.5rem);
	--hv-ease: cubic-bezier(.22, .68, .28, 1);
}

/* ==========================================================================
   02 · BASE TYPOGRAPHY & SLOW RHYTHM
   ========================================================================== */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body,
button,
input,
select,
textarea {
	font-family: var(--font-body);
	font-weight: 400;
	color: var(--hv-ink);
}

body {
	background-color: var(--brand-bg);
	font-size: 17px;
	line-height: 1.75;                            /* slow rhythm (spec) */
	letter-spacing: .002em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	/* Lets the full-bleed hero span the viewport without a scrollbar.
	   clip (not hidden) keeps position: sticky usable. */
	overflow-x: hidden;
	overflow-x: clip;
}

/* Paragraph rhythm — generous, unhurried */
p,
.woocommerce-product-details__short-description p,
.woocommerce-tabs .panel > p,
.entry-content p {
	line-height: 1.75;
	margin-bottom: 1.5em;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.woocommerce-loop-product__title,
.related > h2,
.upsells > h2,
.cross-sells > h2 {
	font-family: var(--font-head);
	font-weight: 600;
	color: var(--brand-walnut);
	letter-spacing: .005em;
	line-height: 1.24;
	text-transform: none;
}

h1, .alpha { font-size: clamp(2.1rem, 4.2vw, 3.1rem); }
h2, .beta  { font-size: clamp(1.65rem, 3vw, 2.35rem); }
h3, .gamma { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
h4, .delta { font-size: 1.15rem; }
h5         { font-size: 1.02rem; }

h1, h2, h3 { margin: 0 0 .75em; }
h4, h5, h6 { margin: 0 0 .6em; }

a {
	color: var(--brand-accent);
	text-decoration: none;
	transition: color .25s var(--hv-ease), opacity .25s var(--hv-ease);
}
a:hover,
a:focus { color: var(--brand-walnut); }

blockquote {
	border-left: 3px solid var(--brand-accent);
	margin: 2.5rem 0;
	padding: .25rem 0 .25rem 1.75rem;
	font-family: var(--font-head);
	font-size: 1.3rem;
	font-style: italic;
	color: var(--brand-walnut);
}

hr,
.woocommerce hr {
	border: 0;
	border-top: 1px solid var(--hv-line);
	margin: 2.75rem 0;
}

img { max-width: 100%; height: auto; }

::selection {
	background: var(--brand-accent);
	color: #fff;
}

/* ==========================================================================
   03 · LAYOUT SHELL — wide, roomy
   ========================================================================== */
.col-full {
	max-width: var(--hv-shell);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--hv-gutter);
	padding-right: var(--hv-gutter);
	box-sizing: border-box;
}

.site-content {
	padding-top: clamp(2.5rem, 5vw, 4.75rem);
	padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
}

#content .col-full > *:first-child { margin-top: 0; }

/* Storefront adds a 4.23em header gap; HEMVANG owns every vertical gap. */
.site-header,
.home.page:not(.page-template-template-homepage) .site-header,
.home.post-type-archive-product .site-header { margin-bottom: 0; }

/* Storefront lays the site out as 73.91% content + 21.74% widget column.
   On the front page and across WooCommerce views HEMVANG runs the content
   full width instead: the shop grid needs the room for three large cards, and
   a furniture store reads better with the whitespace than with a blog widget
   rail. Those views are identified by the .hemvang-wide body class. */
.hemvang-wide .content-area {
	width: 100%;
	float: none;
	margin-left: 0;
	margin-right: 0;
}
.hemvang-wide .widget-area { display: none; }

/* ==========================================================================
   04 · MASTHEAD — wide, big wordmark, unhurried
   ========================================================================== */

/* Slim service strip that opens the page (hooked on storefront_before_header). */
.hemvang-topbar {
	background: var(--brand-walnut);
	color: rgba(255, 252, 247, .9);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .17em;
	text-transform: uppercase;
}
.hemvang-topbar .col-full {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .35rem .85rem;
	padding-top: .85rem;
	padding-bottom: .85rem;
	text-align: center;
}
.hemvang-topbar__item { white-space: nowrap; }
.hemvang-topbar__sep { opacity: .45; }
.hemvang-topbar__link {
	color: rgba(255, 252, 247, .92);
	border-bottom: 1px solid rgba(255, 252, 247, .35);
	padding-bottom: 1px;
	transition: color .3s var(--hv-ease), border-color .3s var(--hv-ease);
}
.hemvang-topbar__link:hover {
	color: #FFFCF7;
	border-bottom-color: var(--brand-accent);
}

.site-header {
	background-color: var(--brand-bg) !important;
	background-image: none !important;
	color: var(--brand-walnut);
	padding-top: var(--hv-masthead-pad);
	padding-bottom: 0;
	border-bottom: 0;
	z-index: 99;
}

.site-header > .col-full { padding-bottom: clamp(1.5rem, 3.5vw, 2.5rem); }

/* Text wordmark scaled up to logo size (no uploaded logo on this install).
   Storefront floats .site-branding into a 73.91% column on WooCommerce
   installs and sets .site-title to 2em, so these selectors deliberately match
   the parent's specificity and load after it. */
.site-header .site-branding,
.woocommerce-active .site-header .site-branding {
	float: none;
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	clear: both;
	text-align: center;
}

.site-header .site-branding .site-title,
.hemvang .site-branding .site-title {
	margin: 0;
	font-family: var(--font-head);
	font-size: clamp(2.9rem, 8.2vw, 5.4rem);         /* 大 Logo */
	font-weight: 700;
	line-height: 1;
	letter-spacing: .26em;
	text-indent: .26em;                              /* optical centring */
	text-transform: uppercase;
	color: var(--brand-walnut);
}

.site-header .site-branding .site-title a,
.hemvang .site-branding .site-title a {
	color: var(--brand-walnut);
	font-weight: 700;
	display: inline-block;
	transition: color .35s var(--hv-ease), letter-spacing .5s var(--hv-ease);
}
.site-header .site-branding .site-title a:hover,
.site-header .site-branding .site-title a:focus {
	color: var(--brand-accent);
	letter-spacing: .30em;
}

.site-description {
	margin: 1.15rem auto 0;
	max-width: 46ch;
	font-family: var(--font-body);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--brand-walnut);
	opacity: .72;
}

/* Second masthead line (hooked on storefront_header @21) — the install has no
   site description, so the tagline is provided by the child theme. */
.hemvang-brand-tagline {
	margin: 1.3rem auto 0;
	max-width: 72ch;
	font-family: var(--font-body);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .28em;
	text-transform: uppercase;
	text-indent: .28em;
	color: var(--brand-walnut);
	opacity: .7;
}

/* Custom logo (if one is ever uploaded) gets the same generous sizing. */
.site-header .custom-logo-link img,
.site-header .site-logo-link img { max-width: 340px; width: 100%; }

/* Search sits as a calm centred field under the wordmark. Storefront floats it
   into a 21.74% column, so the selector matches its own specificity. */
.site-header .site-search,
.woocommerce-active .site-header .site-search {
	float: none;
	clear: both;
	display: block;
	width: 100%;
	max-width: 430px;
	margin: clamp(1.5rem, 3.5vw, 2.4rem) auto 1.15rem;
}

/* The header search widget must not inherit the sidebar card treatment. */
.site-search .widget,
.site-search .widget_product_search {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
}

.site-search .widget_product_search form { margin: 0; }
.site-search input[type="search"].search-field,
.site-search .search-field {
	background: var(--hv-surface);
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius-pill);
	padding: .85rem 1.6rem;
	color: var(--hv-ink);
	font-size: .95rem;
	text-align: center;
	transition: border-color .3s var(--hv-ease), box-shadow .3s var(--hv-ease);
}
.site-search .search-field::placeholder { color: rgba(107, 74, 47, .55); }
.site-search .search-field:focus {
	outline: none;
	border-color: var(--brand-accent);
	box-shadow: 0 0 0 3px var(--hv-accent-soft);
}
.site-search button[type="submit"] {
	border-radius: 0 var(--hv-radius-pill) var(--hv-radius-pill) 0;
	background-color: var(--brand-accent);
	color: #fff;
	padding: 0 1.4rem;
	font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* ==========================================================================
   05 · NAVIGATION & CART — relaxed tracking
   ========================================================================== */
.storefront-primary-navigation {
	background: transparent;
	border-top: 1px solid var(--hv-line);
	border-bottom: 1px solid var(--hv-line);
	clear: both;
}

.storefront-primary-navigation > .col-full {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem clamp(1.25rem, 3vw, 3rem);
	padding-top: .35rem;
	padding-bottom: .35rem;
}

.main-navigation,
.site-header-cart,
.secondary-navigation {
	float: none;
	display: inline-block;
}

/* Storefront gives .main-navigation width:100% and floats the cart into a
   21.74% column, which pushes the cart onto its own line. Both are reset at
   the parent's own specificity so the nav bar reads as one centred row. */
.site-header .main-navigation,
.woocommerce-active .site-header .main-navigation {
	float: none;
	clear: none;
	display: inline-block;
	width: auto;
	max-width: 100%;
	flex: 0 1 auto;
}

.site-header .site-header-cart,
.woocommerce-active .site-header .site-header-cart {
	float: none;
	display: inline-block;
	width: auto;
	margin: 0 0 0 1.5rem;
	position: relative;
	flex: 0 0 auto;
}

.main-navigation ul.menu,
.main-navigation ul.nav-menu,
.main-navigation div.menu > ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.main-navigation ul.menu > li,
.main-navigation ul.nav-menu > li,
.main-navigation div.menu > ul > li {
	float: none;
	display: block;
	position: relative;
}

/* Storefront prints the fallback menu twice (a desktop copy and a handheld
   copy) and relies on .main-navigation div.menu:last-child{display:block} to
   show only one — but the first copy ends up visible on this install, so the
   nav renders twice. Pin it explicitly at every width. */
.main-navigation div.menu:not(:last-child) { display: none; }

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a,
.main-navigation div.menu > ul > li > a {
	display: block;
	padding: 1.35rem .95rem;                      /* 上下留白充足 */
	font-family: var(--font-body);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .19em;                        /* 字距放松 */
	text-transform: uppercase;
	color: var(--brand-walnut);
	position: relative;
	transition: color .3s var(--hv-ease);
}

/* Terracotta hairline that grows on hover — the one piece of motion here. */
.main-navigation ul.menu > li > a::after,
.main-navigation ul.nav-menu > li > a::after,
.main-navigation div.menu > ul > li > a::after {
	content: "";
	position: absolute;
	left: .95rem;
	right: .95rem;
	bottom: .95rem;
	height: 1px;
	background: var(--brand-accent);
	transform: scaleX(0);
	transform-origin: 50% 50%;
	transition: transform .38s var(--hv-ease);
}
.main-navigation ul.menu > li > a:hover::after,
.main-navigation ul.menu > li.current-menu-item > a::after,
.main-navigation ul.menu > li.current_page_item > a::after,
.main-navigation ul.nav-menu > li > a:hover::after,
.main-navigation div.menu > ul > li > a:hover::after,
.main-navigation div.menu > ul > li.current_page_item > a::after { transform: scaleX(1); }

.main-navigation ul.menu > li > a:hover,
.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.menu > li.current_page_item > a,
.main-navigation div.menu > ul > li > a:hover,
.main-navigation div.menu > ul > li.current_page_item > a { color: var(--brand-accent); }

/* Sub-menus */
.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.sub-menu {
	background: var(--hv-surface);
	border-radius: var(--hv-radius-sm);
	box-shadow: var(--hv-shadow-lift);
	padding: .5rem 0;
	min-width: 232px;
	border: 1px solid var(--hv-line);
}
.main-navigation ul.menu ul.sub-menu li a {
	font-size: .82rem;
	letter-spacing: .06em;
	text-transform: none;
	color: var(--hv-ink);
	padding: .7rem 1.35rem;
}
.main-navigation ul.menu ul.sub-menu li a:hover {
	background: var(--hv-surface-warm);
	color: var(--brand-accent);
}

/* Menu toggle (mobile) */
.menu-toggle {
	background-color: transparent;
	border: 1px solid var(--hv-line-strong);
	border-radius: var(--hv-radius-pill);
	color: var(--brand-walnut);
	padding: .7rem 1.6rem;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
}
.menu-toggle:hover { background-color: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }

/* Header cart */
.site-header-cart { margin-left: .25rem; }
.site-header-cart .cart-contents {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--brand-walnut) !important;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 1.35rem 0;
	transition: color .3s var(--hv-ease);
}
.site-header-cart .cart-contents:hover { color: var(--brand-accent) !important; }
.site-header-cart .cart-contents::after { color: currentColor !important; }
.site-header-cart .count { color: var(--brand-accent); }
.site-header-cart .widget_shopping_cart_content {
	background: var(--hv-surface);
	border-radius: var(--hv-radius);
	box-shadow: var(--hv-shadow-lift);
	border: 1px solid var(--hv-line);
	overflow: hidden;
}

/* Secondary navigation */
.secondary-navigation { font-size: .82rem; letter-spacing: .1em; }
.secondary-navigation a { color: var(--brand-walnut); }

/* Breadcrumb — quiet, wide-tracked */
.storefront-breadcrumb { background: transparent; margin: 0; padding: 1.4rem 0 0; }
.woocommerce-breadcrumb {
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(107, 74, 47, .68);
	margin: 0;
}
.woocommerce-breadcrumb a { color: rgba(107, 74, 47, .68); }
.woocommerce-breadcrumb a:hover { color: var(--brand-accent); }
.storefront-breadcrumb .woocommerce-breadcrumb { margin: 0; }

/* ==========================================================================
   06 · BUTTONS & FORMS — terracotta pills
   ========================================================================== */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart,
.wc-block-components-button,
.wc-block-grid__product .wp-block-button__link,
.wp-block-button__link,
.woocommerce-Button,
.woocommerce-message .button {
	font-family: var(--font-body);
	background-color: var(--brand-accent);
	background-image: none;
	border: 1px solid var(--brand-accent);
	border-radius: var(--hv-radius-pill);          /* 胶囊 */
	color: #fff;
	padding: .95em 2.1em;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	line-height: 1.2;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .3s var(--hv-ease), border-color .3s var(--hv-ease),
		color .3s var(--hv-ease), transform .3s var(--hv-ease), box-shadow .3s var(--hv-ease);
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.added_to_cart:hover,
.wp-block-button__link:hover,
.woocommerce-Button:hover {
	background-color: var(--brand-walnut);
	border-color: var(--brand-walnut);
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(107, 74, 47, .22);
}

button:focus-visible,
input[type="submit"]:focus-visible,
.button:focus-visible,
a:focus-visible {
	outline: 2px solid var(--brand-accent);
	outline-offset: 3px;
}

/* Ghost / secondary button */
.button.alt,
button.alt,
input[type="submit"].alt,
.button--ghost,
.hemvang-btn-ghost {
	background-color: transparent;
	border-color: var(--hv-line-strong);
	color: var(--brand-walnut);
}
.button.alt:hover,
button.alt:hover,
.button--ghost:hover,
.hemvang-btn-ghost:hover {
	background-color: var(--brand-walnut);
	border-color: var(--brand-walnut);
	color: #fff !important;
}

/* Disabled / loading */
.button.loading,
.button.disabled,
button:disabled { opacity: .55; transform: none; box-shadow: none; }

/* Inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
textarea,
select,
.select2-container .select2-selection--single {
	background-color: var(--hv-surface);
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius-sm);
	color: var(--hv-ink);
	font-family: var(--font-body);
	font-size: .95rem;
	padding: .85em 1.15em;
	box-shadow: none;
	transition: border-color .3s var(--hv-ease), box-shadow .3s var(--hv-ease);
}
input:focus,
textarea:focus,
select:focus,
.select2-container--focus .select2-selection--single {
	outline: none;
	border-color: var(--brand-accent);
	box-shadow: 0 0 0 3px var(--hv-accent-soft);
}
label {
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--brand-walnut);
	margin-bottom: .5rem;
	display: inline-block;
}
::placeholder { color: rgba(107, 74, 47, .5); }

/* Quantity stepper */
.quantity .qty {
	border-radius: var(--hv-radius-pill);
	text-align: center;
	padding: .8em .5em;
	width: 5.2em;
	min-width: 0;
}
.woocommerce div.product form.cart .quantity { margin-right: 1rem; }

/* ==========================================================================
   07 · PRODUCT CARDS — 20px radius, soft shadow, gentle lift
   Storefront/WooCommerce lay the loop out with floats + percentage widths.
   HEMVANG replaces that with a CSS grid so cards sit on one rhythm and are
   guaranteed single-column on phones.
   ========================================================================== */
ul.products,
.wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.75rem);
	margin: 0 0 var(--hv-section);
	padding: 0;
	list-style: none;
}
ul.products.columns-1, .wc-block-grid__products.columns-1 { grid-template-columns: minmax(0, 1fr); }
ul.products.columns-2, .wc-block-grid__products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
ul.products.columns-3, .wc-block-grid__products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

ul.products li.product,
.wc-block-grid__products li.wc-block-grid__product {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--hv-surface);
	border: 1px solid rgba(107, 74, 47, .07);
	border-radius: var(--hv-radius);              /* 大圆角 20px */
	box-shadow: var(--hv-shadow);                 /* 0 2px 12px rgba(107,74,47,.10) */
	overflow: hidden;
	padding: 0 0 1.65rem;
	text-align: left;
	transition: transform .42s var(--hv-ease), box-shadow .42s var(--hv-ease),
		border-color .42s var(--hv-ease);
	will-change: transform;
}

/* hover 微微上浮 */
ul.products li.product:hover,
ul.products li.product:focus-within,
.wc-block-grid__products li.wc-block-grid__product:hover {
	transform: translateY(-6px);
	box-shadow: var(--hv-shadow-lift);
	border-color: var(--hv-line);
}

/* Image large in the card: native 1:1 sources, so 1:1 crops nothing away. */
ul.products li.product .woocommerce-LoopProduct-link,
ul.products li.product > a.woocommerce-loop-product__link {
	display: block;
	margin: 0;
	padding: 0;
	line-height: 0;
}

ul.products li.product img,
ul.products li.product .attachment-woocommerce_thumbnail,
.wc-block-grid__product-image img {
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;                          /* 商品图占大比例 */
	object-fit: cover;
	object-position: center;
	border-radius: 0;                             /* clipped by the card */
	margin: 0;
	display: block;
	transition: transform .7s var(--hv-ease), filter .5s var(--hv-ease);
}
ul.products li.product:hover img { transform: scale(1.028); }

/* Card copy */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .wc-block-grid__product-title {
	font-family: var(--font-head);
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: .005em;
	color: var(--brand-walnut);
	margin: 1.35rem 1.6rem .4rem;
	padding: 0;
	text-transform: none;
}

ul.products li.product .price,
.wc-block-grid__product-price {
	display: block;
	margin: 0 1.6rem .25rem;
	padding: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--brand-accent);
}
ul.products li.product .price del {
	color: rgba(107, 74, 47, .5);
	font-weight: 400;
	opacity: 1;
	margin-right: .55rem;
	font-size: .9rem;
}
ul.products li.product .price ins {
	background: none;
	color: var(--brand-accent);
	font-weight: 600;
	text-decoration: none;
}
ul.products li.product .price .woocommerce-Price-currencySymbol { font-size: .86em; }

.woocommerce-loop-product__link:hover .woocommerce-loop-product__title { color: var(--brand-accent); }

/* Add-to-cart sits flush inside the padded card */
ul.products li.product .button,
ul.products li.product .add_to_cart_button,
ul.products li.product .product_type_variable,
ul.products li.product .product_type_simple,
ul.products li.product .product_type_grouped,
.wc-block-grid__product-add-to-cart .wp-block-button__link {
	display: block;
	margin: 1.25rem 1.6rem 0;
	padding: .92em 1.2em;
	text-align: center;
	width: auto;
}
ul.products li.product .button::after { display: none; }

/* Sale badge → terracotta pill, top-left inside the radius */
ul.products li.product .onsale,
.wc-block-grid__product-onsale,
span.onsale {
	position: absolute;
	top: 1.1rem;
	left: 1.1rem;
	right: auto;
	margin: 0;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	background-color: var(--brand-accent);
	color: #fff;
	border: 0;
	border-radius: var(--hv-radius-pill);
	padding: .58em 1.05em;
	font-family: var(--font-body);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	box-shadow: 0 4px 14px rgba(107, 74, 47, .22);
	z-index: 5;
}
li.product .onsale::before,
span.onsale::before { display: none; }

/* Star rating */
ul.products li.product .star-rating,
.woocommerce-product-rating .star-rating {
	float: none;
	margin: .1rem 1.6rem .5rem;
	font-size: .78em;
	color: var(--brand-accent);
}
.star-rating span::before,
.star-rating::before { color: var(--brand-accent); }

/* "Added to cart" confirmation → small walnut pill, not a full button */
.added_to_cart,
a.added_to_cart.wc-forward {
	display: inline-block;
	margin: 1rem 1.6rem 0;
	padding: .62em 1.3em;
	background-color: transparent;
	border: 1px solid var(--hv-line-strong);
	color: var(--brand-walnut) !important;
	font-size: .72rem;
	letter-spacing: .14em;
	border-radius: var(--hv-radius-pill);
	transform: none;
	box-shadow: none;
}
a.added_to_cart.wc-forward:hover { background-color: var(--brand-walnut); color: #fff !important; }

/* Category / archive header */
.woocommerce-products-header,
.woocommerce-products-header__title { margin-bottom: .5rem; }
.woocommerce-products-header .page-title,
.woocommerce-products-header__title.page-title {
	font-size: clamp(2rem, 4vw, 2.9rem);
	letter-spacing: .01em;
	margin-bottom: .35rem;
}
.term-description {
	max-width: 62ch;
	color: var(--hv-ink);
	line-height: 1.75;
	margin: 0 0 2rem;
}
.storefront-sorting,
.woocommerce-result-count,
.woocommerce-ordering { font-size: .82rem; letter-spacing: .08em; color: rgba(107, 74, 47, .8); }
.woocommerce-ordering select { padding: .7em 1em; font-size: .85rem; }

/* ==========================================================================
   08 · NOTICES & PAGINATION
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	background-color: var(--hv-surface);
	border: 1px solid var(--hv-line);
	border-top: 3px solid var(--brand-accent);
	border-radius: var(--hv-radius-sm);
	color: var(--hv-ink);
	box-shadow: var(--hv-shadow);
	padding: 1.15rem 1.5rem;
	margin-bottom: 2.25rem;
	list-style: none;
}
.woocommerce-info { border-top-color: var(--brand-walnut); }
.woocommerce-error { border-top-color: #8C3B2B; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { color: var(--brand-accent); }

/* Storefront prints sorting + pagination twice per archive (once above the grid
   and once below), so this margin has to stay modest — a section-sized gap up
   top leaves the first pagination stranded in empty space. The grid's own
   bottom margin supplies the breathing room below. */
.woocommerce-pagination,
.storefront-pagination { margin-top: 2.25rem; text-align: center; }
.woocommerce-pagination ul.page-numbers,
.pagination { display: inline-flex; gap: .5rem; border: 0; justify-content: center; flex-wrap: wrap; }
.woocommerce-pagination ul.page-numbers li { border: 0; }
.woocommerce-pagination ul.page-numbers li .page-numbers,
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.85rem;
	height: 2.85rem;
	border-radius: var(--hv-radius-pill);
	border: 1px solid var(--hv-line);
	background: var(--hv-surface);
	color: var(--brand-walnut);
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .06em;
	transition: all .3s var(--hv-ease);
}
.woocommerce-pagination ul.page-numbers li .page-numbers:hover,
.pagination .page-numbers:hover { background: var(--hv-surface-warm); border-color: var(--hv-line-strong); }
.woocommerce-pagination ul.page-numbers li .page-numbers.current,
.pagination .page-numbers.current {
	background: var(--brand-accent);
	border-color: var(--brand-accent);
	color: #fff;
}

/* ==========================================================================
   09 · SINGLE PRODUCT
   ========================================================================== */
.woocommerce div.product {
	color: var(--hv-ink);
}

.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.images {
	background: var(--hv-surface);
	border-radius: var(--hv-radius);
	box-shadow: var(--hv-shadow);
	overflow: hidden;
	padding: 0;
}
.woocommerce div.product .woocommerce-product-gallery img,
.woocommerce div.product div.images img {
	border-radius: 0;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.woocommerce div.product div.images .flex-control-thumbs { padding: .85rem .85rem 0; gap: .6rem; display: flex; flex-wrap: wrap; }
.woocommerce div.product div.images .flex-control-thumbs li { width: calc(20% - .5rem); margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs img {
	border-radius: var(--hv-radius-sm);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	opacity: .62;
	transition: opacity .3s var(--hv-ease), box-shadow .3s var(--hv-ease);
}
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--brand-accent);
}

.woocommerce div.product .summary {
	padding: 0 0 0 clamp(0rem, 2vw, 2rem);
}

.woocommerce div.product .product_title {
	font-family: var(--font-head);
	font-size: clamp(1.9rem, 3.6vw, 2.9rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .005em;
	color: var(--brand-walnut);
	margin: 0 0 .85rem;
}

.woocommerce div.product .summary .price,
.woocommerce div.product p.price {
	font-family: var(--font-body);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--brand-accent);
	margin: 0 0 1.25rem;
}
.woocommerce div.product p.price del { color: rgba(107, 74, 47, .5); font-size: .78em; font-weight: 400; }
.woocommerce div.product p.price ins { background: none; color: var(--brand-accent); text-decoration: none; }

.woocommerce-product-details__short-description {
	font-size: 1.03rem;
	line-height: 1.75;
	color: var(--hv-ink);
	margin-bottom: 1.75rem;
	max-width: 60ch;
}

.woocommerce-product-rating { margin-bottom: 1rem; }
.woocommerce-product-rating .woocommerce-review-link { font-size: .82rem; letter-spacing: .08em; }

.woocommerce div.product form.cart {
	margin: 1.9rem 0;
	padding: 1.6rem 0;
	border-top: 1px solid var(--hv-line);
	border-bottom: 1px solid var(--hv-line);
}
.woocommerce div.product form.cart .button {
	padding: 1.05em 2.6em;
	font-size: .82rem;
}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th { padding: .5rem 0; }
.woocommerce div.product form.cart .variations select {
	background: var(--hv-surface);
	border-radius: var(--hv-radius-sm);
	border: 1px solid var(--hv-line);
	padding: .7em 1em;
}

/* Meta */
.product_meta {
	font-size: .82rem;
	letter-spacing: .06em;
	color: rgba(107, 74, 47, .78);
	line-height: 2;
}
.product_meta > span { display: block; }
.product_meta a { color: var(--brand-walnut); }
.product_meta a:hover { color: var(--brand-accent); }

/* Related / upsells */
.related.products,
.upsells.products,
.cross-sells {
	border-top: 1px solid var(--hv-line);
	padding-top: var(--hv-section);
	margin-top: var(--hv-section);
}
.related.products > h2,
.upsells.products > h2,
.cross-sells > h2 {
	font-family: var(--font-head);
	font-size: clamp(1.5rem, 2.6vw, 2.05rem);
	text-align: center;
	margin: 0 0 2.25rem;
}
.related.products > h2::after,
.upsells.products > h2::after,
.cross-sells > h2::after {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	background: var(--brand-accent);
	margin: 1rem auto 0;
	opacity: .75;
}

/* ==========================================================================
   10 · TABS & ATTRIBUTE TABLES (Specifications / Reviews)
   ========================================================================== */
.woocommerce div.product .woocommerce-tabs {
	margin-top: var(--hv-section);
	border-top: 1px solid var(--hv-line);
	padding-top: clamp(2rem, 4vw, 3.25rem);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 2.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.25rem;
	border-bottom: 1px solid var(--hv-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--font-body);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(107, 74, 47, .7);
	padding: .95rem .25rem 1.15rem;
	display: block;
	position: relative;
	transition: color .3s var(--hv-ease);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--brand-accent);
	transform: scaleX(0);
	transition: transform .38s var(--hv-ease);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--brand-walnut); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--brand-walnut); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after { transform: scaleX(1); }

.woocommerce div.product .woocommerce-tabs .panel {
	margin: 0;
	padding: 0;
	max-width: 78ch;
}
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child,
.woocommerce div.product .woocommerce-tabs .panel > h2.woocommerce-Reviews-title {
	font-family: var(--font-head);
	font-size: 1.5rem;
	margin-bottom: 1.25rem;
}
.woocommerce div.product .woocommerce-tabs .panel ul {
	padding-left: 1.15rem;
}
.woocommerce div.product .woocommerce-tabs .panel li {
	line-height: 1.75;
	margin-bottom: .7rem;
}

/* Specifications table */
.woocommerce table.shop_attributes {
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius-sm);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--hv-surface);
	box-shadow: var(--hv-shadow);
	margin: 0 0 1.5rem;
}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	border: 0;
	border-bottom: 1px solid var(--hv-line);
	padding: 1rem 1.35rem;
	vertical-align: top;
	line-height: 1.7;
}
.woocommerce table.shop_attributes th {
	width: 34%;
	font-family: var(--font-body);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--brand-walnut);
	background: var(--hv-surface-warm);
}
.woocommerce table.shop_attributes td { color: var(--hv-ink); }
.woocommerce table.shop_attributes td p { margin: 0; }
.woocommerce table.shop_attributes tr:last-child th,
.woocommerce table.shop_attributes tr:last-child td { border-bottom: 0; }
.woocommerce table.shop_attributes tr:hover th,
.woocommerce table.shop_attributes tr:hover td { background: rgba(185, 105, 74, .045); }

/* Reviews */
.woocommerce #reviews #comments ol.commentlist li .comment-text {
	border-radius: var(--hv-radius-sm);
	border: 1px solid var(--hv-line);
	background: var(--hv-surface);
	box-shadow: var(--hv-shadow);
}
.woocommerce #reviews #comments ol.commentlist li img.avatar { border-radius: 50%; border: 0; padding: 0; }
.woocommerce #review_form #respond textarea,
.woocommerce #review_form #respond input { border-radius: var(--hv-radius-sm); }

/* ==========================================================================
   11 · CART, CHECKOUT, ACCOUNT
   ========================================================================== */
.woocommerce table.shop_table,
.woocommerce-checkout-review-order table.shop_table {
	background: var(--hv-surface);
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	box-shadow: var(--hv-shadow);
}
.woocommerce table.shop_table th {
	font-family: var(--font-body);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--brand-walnut);
	background: var(--hv-surface-warm);
	padding: 1.1rem 1.25rem;
}
.woocommerce table.shop_table td {
	padding: 1.2rem 1.25rem;
	border-top: 1px solid var(--hv-line);
	color: var(--hv-ink);
	vertical-align: middle;
}
.woocommerce table.cart img { border-radius: var(--hv-radius-sm); width: 84px; }
.woocommerce-cart table.cart .product-name a { font-family: var(--font-head); font-size: 1.08rem; color: var(--brand-walnut); }
.woocommerce-cart table.cart .product-name a:hover { color: var(--brand-accent); }
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td { background: var(--hv-surface-warm); font-weight: 600; }
.woocommerce .cart_totals,
.woocommerce .cart-collaterals .cart_totals {
	background: var(--hv-surface);
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	box-shadow: var(--hv-shadow);
	padding: 1.75rem;
}
.woocommerce .cart-collaterals .cart_totals h2 { font-family: var(--font-head); font-size: 1.4rem; }

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation {
	background: var(--hv-surface);
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	box-shadow: var(--hv-shadow);
	padding: 1.9rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: .7rem 0; border-bottom: 1px solid var(--hv-line); color: var(--brand-walnut); font-size: .86rem; letter-spacing: .08em; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--brand-accent); font-weight: 600; }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child a { border-bottom: 0; }

.woocommerce-checkout #payment {
	background: var(--hv-surface-warm);
	border-radius: var(--hv-radius);
	border: 1px solid var(--hv-line);
}
.woocommerce-checkout #payment div.payment_box { background: var(--hv-surface); border-radius: var(--hv-radius-sm); }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout h3#order_review_heading,
.woocommerce-checkout h3 { font-family: var(--font-head); }

/* ==========================================================================
   12 · WIDGETS & SIDEBAR
   ========================================================================== */
.widget,
.storefront-sidebar .widget {
	background: var(--hv-surface);
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	box-shadow: var(--hv-shadow);
	padding: 1.75rem;
	margin-bottom: 2rem;
}
.widget .widget-title,
.widget > h2 {
	font-family: var(--font-head);
	font-size: 1.16rem;
	font-weight: 600;
	margin-bottom: 1rem;
	padding-bottom: .85rem;
	border-bottom: 1px solid var(--hv-line);
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget ul li {
	border-bottom: 1px solid var(--hv-line);
	padding: .7rem 0;
	font-size: .92rem;
}
.widget ul li:last-child { border-bottom: 0; }
.widget a { color: var(--brand-walnut); }
.widget a:hover { color: var(--brand-accent); }
.widget_search .search-field { border-radius: var(--hv-radius-pill); }

/* Block widgets inherit the card treatment */
.wp-block-group.has-background,
.wc-block-product-categories,
.wc-block-price-filter {
	border-radius: var(--hv-radius);
}

/* ==========================================================================
   13 · FOOTER
   ========================================================================== */
.site-footer {
	background-color: var(--hv-surface-warm);
	border-top: 1px solid var(--hv-line);
	margin-top: 0;
	color: var(--hv-ink);
	padding: 0;
}
.site-footer .col-full { padding-top: clamp(2.75rem, 5vw, 4.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.site-footer .widget { background: transparent; border: 0; box-shadow: none; padding: 0; margin-bottom: 2rem; }
.site-footer .widget .widget-title {
	font-family: var(--font-body);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--brand-walnut);
	border-bottom-color: var(--hv-line);
}
.site-footer .widget ul li { border-bottom-color: var(--hv-line); }
.site-footer a { color: var(--hv-ink); }
.site-footer a:hover { color: var(--brand-accent); }

.storefront-credit,
.site-info {
	border-top: 1px solid var(--hv-line);
	padding: 1.75rem 0;
	font-size: .8rem;
	letter-spacing: .1em;
	color: rgba(107, 74, 47, .78);
	text-align: center;
}
.storefront-credit a { color: var(--brand-walnut); }

.storefront-handheld-footer-bar {
	background: var(--hv-surface);
	border-top: 1px solid var(--hv-line);
	box-shadow: 0 -4px 20px rgba(107, 74, 47, .10);
}
.storefront-handheld-footer-bar ul li > a { color: var(--brand-walnut); }
.storefront-handheld-footer-bar ul li.cart .count {
	background-color: var(--brand-accent);
	color: #fff;
	border: 2px solid var(--hv-surface);
}

/* ==========================================================================
   14 · HOMEPAGE SCENES — full-bleed warm-light interiors
   ========================================================================== */
.hv-scene {
	position: relative;
	isolation: isolate;
}

/* The one full-height moment: warm oak living room, slow fade-in copy. */
.hv-hero {
	min-height: min(88vh, 880px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: var(--brand-walnut);
	background-image:
		linear-gradient(180deg, rgba(58, 42, 30, .42) 0%, rgba(58, 42, 30, .30) 45%, rgba(58, 42, 30, .58) 100%),
		url('assets/img/hero-living.webp');
	background-size: cover;
	background-position: center 42%;
	background-repeat: no-repeat;
	margin: 0;
	padding: clamp(4rem, 10vw, 8rem) var(--hv-gutter);
	border-radius: 0 0 var(--hv-radius) var(--hv-radius);
}

.hv-hero__inner { max-width: 900px; margin: 0 auto; }

/* Full-bleed: break the centred .col-full shell and span the viewport.
   body.hemvang carries overflow-x: clip so this never adds a scrollbar. */
.hv-hero {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.hv-hero__eyebrow,
.hv-eyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .42em;
	text-transform: uppercase;
	margin: 0 0 1.5rem;
	text-indent: .42em;
}
.hv-hero__eyebrow { color: rgba(255, 252, 247, .88); }

.hv-hero__title {
	font-family: var(--font-head);
	font-size: clamp(3rem, 9vw, 6.2rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: .2em;
	text-indent: .2em;
	text-transform: uppercase;
	color: #FFFCF7;
	margin: 0 0 1.6rem;
	text-shadow: 0 2px 30px rgba(58, 42, 30, .35);
}

.hv-hero__sub {
	max-width: 54ch;
	margin: 0 auto 2.6rem;
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	line-height: 1.8;
	color: rgba(255, 252, 247, .93);
}

.hv-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}
.hv-hero__actions .button {
	padding: 1.05em 2.5em;
}
.hv-hero__actions .hemvang-btn-ghost,
.hv-hero__actions .button--ghost {
	background-color: rgba(255, 252, 247, .1);
	border-color: rgba(255, 252, 247, .72);
	color: #FFFCF7;
	backdrop-filter: blur(2px);
}
.hv-hero__actions .hemvang-btn-ghost:hover,
.hv-hero__actions .button--ghost:hover {
	background-color: #FFFCF7;
	border-color: #FFFCF7;
	color: var(--brand-walnut) !important;
}

/* Statement band — a lot of air, one idea.
   Bands carry vertical rhythm only; the oat page field shows through and the
   white panels sit on top of it. */
.hv-band {
	padding: var(--hv-section) 0;
}
.hv-band--oat { background: transparent; }
.hv-band--surface {
	background: var(--hv-surface);
	border: 1px solid rgba(107, 74, 47, .07);
	border-radius: var(--hv-radius);
	box-shadow: var(--hv-shadow);
	padding: var(--hv-section) clamp(1.5rem, 4vw, 4rem);
}
.hv-band--warm {
	background: var(--hv-surface-warm);
	border-radius: var(--hv-radius);
	padding: var(--hv-section) clamp(1.5rem, 4vw, 4rem);
}

/* Front page owns its own vertical rhythm and the hero touches the header. */
body.hemvang-front-page .site-content { padding-top: 0; padding-bottom: 0; }
body.hemvang-front-page .hv-band:first-of-type { padding-top: clamp(3rem, 6vw, 5rem); }

.hv-statement {
	max-width: 78ch;
	margin: 0 auto;
	text-align: center;
}
.hv-statement .hv-eyebrow { color: var(--brand-accent); }
.hv-statement h2 {
	font-size: clamp(1.75rem, 3.4vw, 2.7rem);
	line-height: 1.3;
	margin-bottom: 1.35rem;
}
.hv-statement p {
	font-size: 1.06rem;
	line-height: 1.8;
	color: var(--hv-ink);
	margin-bottom: 0;
}

/* Three-up values */
.hv-pillars {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.75rem);
	margin-top: clamp(2.5rem, 5vw, 4rem);
	text-align: left;
}
.hv-pillar {
	background: var(--hv-surface);
	border: 1px solid rgba(107, 74, 47, .07);
	border-radius: var(--hv-radius);
	box-shadow: var(--hv-shadow);
	padding: 2.1rem 1.9rem 2.2rem;
	transition: transform .42s var(--hv-ease), box-shadow .42s var(--hv-ease);
}
.hv-pillar:hover { transform: translateY(-6px); box-shadow: var(--hv-shadow-lift); }
.hv-pillar__num {
	display: block;
	font-family: var(--font-head);
	font-size: .95rem;
	letter-spacing: .3em;
	color: var(--brand-accent);
	margin-bottom: .9rem;
}
.hv-pillar h3 { font-size: 1.24rem; margin-bottom: .6rem; }
.hv-pillar p { font-size: .96rem; line-height: 1.75; margin: 0; color: var(--hv-ink); }

/* Split scene band — image + copy */
.hv-split {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
}
.hv-split--flip .hv-split__media { order: 2; }
.hv-split__media {
	border-radius: var(--hv-radius);
	box-shadow: var(--hv-shadow-lift);
	overflow: hidden;
	aspect-ratio: 4 / 5;                          /* 场景图竖向裁切 */
	background: var(--hv-surface-warm);
}
.hv-split__media img,
.hv-split__media > .hv-split__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hv-split__body { max-width: 46ch; }
.hv-split__body .hv-eyebrow { color: var(--brand-accent); }
.hv-split__body h2 { font-size: clamp(1.65rem, 3vw, 2.4rem); line-height: 1.28; }
.hv-split__body p { font-size: 1.02rem; line-height: 1.8; color: var(--hv-ink); }
.hv-split__body ul { list-style: none; margin: 1.5rem 0 2rem; padding: 0; }
.hv-split__body ul li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: .7rem;
	line-height: 1.7;
	font-size: .97rem;
}
.hv-split__body ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .72em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--brand-accent);
}

/* Featured loop heading */
.hv-featured-head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.hv-featured-head .hv-eyebrow { color: var(--brand-accent); }
.hv-featured-head h2 { margin-bottom: .85rem; }
.hv-featured-head p { max-width: 56ch; margin: 0 auto; color: var(--hv-ink); line-height: 1.8; }

.hv-featured__more { text-align: center; margin: clamp(2rem, 4vw, 3rem) 0 0; }

/* Rooms strip — real product categories, styled as soft oat tiles */
.hv-rooms {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2.2vw, 1.75rem);
	list-style: none;
	margin: clamp(2.25rem, 4.5vw, 3.5rem) 0 0;
	padding: 0;
}
.hv-room { margin: 0; }
.hv-room__link {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	height: 100%;
	background: var(--hv-surface-warm);
	border: 1px solid rgba(107, 74, 47, .09);
	border-radius: var(--hv-radius);
	box-shadow: var(--hv-shadow);
	padding: 1.9rem 1.8rem;
	transition: transform .42s var(--hv-ease), box-shadow .42s var(--hv-ease),
		background-color .42s var(--hv-ease), border-color .42s var(--hv-ease);
}
.hv-room__link:hover {
	transform: translateY(-6px);
	box-shadow: var(--hv-shadow-lift);
	background: var(--hv-surface);
	border-color: var(--hv-line);
}
.hv-room__name {
	font-family: var(--font-head);
	font-size: 1.38rem;
	font-weight: 600;
	color: var(--brand-walnut);
	transition: color .3s var(--hv-ease);
}
.hv-room__link:hover .hv-room__name { color: var(--brand-accent); }
.hv-room__count {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .19em;
	text-transform: uppercase;
	color: rgba(107, 74, 47, .66);
}

/* Closing CTA band */
.hv-cta {
	background: var(--brand-walnut);
	color: var(--hv-surface);
	border-radius: var(--hv-radius);
	padding: clamp(3rem, 6vw, 5rem) var(--hv-gutter);
	text-align: center;
}
.hv-cta h2 { color: #FFFCF7; font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.hv-cta p { color: rgba(255, 252, 247, .84); max-width: 54ch; margin: 0 auto 2.25rem; line-height: 1.8; }
.hv-cta .button {
	background-color: var(--brand-accent);
	border-color: var(--brand-accent);
	color: #fff;
}
.hv-cta .button:hover { background-color: #FFFCF7; border-color: #FFFCF7; color: var(--brand-walnut) !important; }
.hv-cta .button--ghost { background-color: transparent; border-color: rgba(255, 252, 247, .6); color: #FFFCF7; }
.hv-cta .button--ghost:hover { background-color: #FFFCF7; color: var(--brand-walnut) !important; }

/* Storefront homepage template blocks, harmonised */
.storefront-homepage-section,
.storefront-product-section { padding: var(--hv-section) 0; }
.storefront-product-section .section-title,
.storefront-product-section > h2 { text-align: center; margin-bottom: 2.25rem; }

/* ==========================================================================
   15 · RESPONSIVE
   ========================================================================== */
@media (min-width: 769px) {
	.col-full { margin-left: auto !important; margin-right: auto !important; }

	/* Storefront collapses .main-navigation div.menu > ul with
	   `max-height:0; overflow:hidden` at every width and only re-opens it for
	   ul.menu / ul.nav-menu. The page fallback menu is neither, and the
	   parent's :not(.nav-menu) selector outranks a plain descendant selector,
	   so this is an explicit !important un-collapse — scoped to desktop only,
	   which leaves the mobile hamburger (driven by .toggled + max-height)
	   working exactly as Storefront intends. */
	.main-navigation div.menu > ul,
	.main-navigation ul.menu,
	.main-navigation ul.nav-menu {
		max-height: none !important;
		overflow: visible !important;
	}
}

@media (max-width: 1024px) {
	ul.products,
	.wc-block-grid__products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	ul.products.columns-3,
	.wc-block-grid__products.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hv-split { grid-template-columns: 1fr; gap: 2.5rem; }
	.hv-split__media { aspect-ratio: 4 / 3; }
	.hv-split--flip .hv-split__media { order: 0; }
	.hv-pillars { grid-template-columns: 1fr 1fr; }
	.hv-pillars .hv-pillar:last-child { grid-column: 1 / -1; }
	.hv-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
	body { font-size: 16.5px; }

	/* Mobile: single column, radius + shadow kept exactly as on desktop. */
	ul.products,
	ul.products.columns-1,
	ul.products.columns-2,
	ul.products.columns-3,
	ul.products.columns-4,
	.wc-block-grid__products {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 1.75rem;
	}
	ul.products li.product,
	.wc-block-grid__products li.wc-block-grid__product {
		border-radius: var(--hv-radius);
		box-shadow: var(--hv-shadow);
	}
	/* Touch devices get no hover-lift jitter, but keep the shadow. */
	ul.products li.product:hover { transform: none; }

	.hv-hero { min-height: 76vh; border-radius: 0 0 var(--hv-radius) var(--hv-radius); }
	.hv-hero__title { letter-spacing: .14em; text-indent: .14em; }
	.hv-hero__actions { flex-direction: column; align-items: stretch; }
	.hv-hero__actions .button { width: 100%; }

	.hv-pillars { grid-template-columns: minmax(0, 1fr); }
	.hv-pillars .hv-pillar:last-child { grid-column: auto; }
	.hv-rooms { grid-template-columns: minmax(0, 1fr); }
	.hv-band--surface,
	.hv-band--warm { padding: clamp(2rem, 7vw, 2.75rem) 1.35rem; }
	.hv-room__link { padding: 1.5rem 1.4rem; }

	/* Service strip tightens up and drops its separators */
	.hemvang-topbar .col-full { gap: .25rem .6rem; padding-top: .7rem; padding-bottom: .7rem; }
	.hemvang-topbar { font-size: .66rem; letter-spacing: .13em; }
	.hemvang-topbar__sep { display: none; }
	.hemvang-brand-tagline { font-size: .68rem; letter-spacing: .2em; text-indent: .2em; }

	/* Header: nav + cart stack, toggle still works */
	.storefront-primary-navigation > .col-full {
		flex-direction: column;
		align-items: stretch;
		gap: .25rem;
		padding-top: .75rem;
		padding-bottom: .75rem;
	}
	.site-header .main-navigation,
	.woocommerce-active .site-header .main-navigation,
	.site-header .site-header-cart,
	.woocommerce-active .site-header .site-header-cart {
		display: block;
		width: 100%;
		margin: 0;
	}
	.main-navigation ul.menu,
	.main-navigation ul.nav-menu,
	.main-navigation div.menu > ul { display: block; }
	.main-navigation ul.menu > li > a,
	.main-navigation div.menu > ul > li > a { padding: .85rem 0; text-align: center; }
	/* Centre the terracotta hairline under each stacked link */
	.main-navigation ul.menu > li > a::after,
	.main-navigation div.menu > ul > li > a::after {
		left: 0;
		right: 0;
		width: 42px;
		margin: 0 auto;
		bottom: .45rem;
	}
	.site-title { letter-spacing: .18em; text-indent: .18em; }
	.site-header-cart .cart-contents { padding: .5rem 0; justify-content: center; }

	/* Single product: gallery above summary */
	.woocommerce div.product .summary { padding-left: 0; padding-top: 2rem; }
	.related.products,
	.upsells.products,
	.cross-sells { padding-top: 2.75rem; margin-top: 2.75rem; }
	.woocommerce div.product .woocommerce-tabs ul.tabs { gap: .25rem 1rem; }
	.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-size: .74rem; letter-spacing: .12em; }

	.woocommerce table.shop_attributes th { width: 42%; padding: .85rem 1rem; font-size: .72rem; }
	.woocommerce table.shop_attributes td { padding: .85rem 1rem; }

	.woocommerce .cart-collaterals .cart_totals,
	.woocommerce form.checkout_coupon,
	.woocommerce form.login,
	.woocommerce form.register,
	.woocommerce-account .woocommerce-MyAccount-content,
	.woocommerce-account .woocommerce-MyAccount-navigation { padding: 1.35rem; }

	.widget { padding: 1.4rem; }
	.hv-cta { padding: 2.75rem 1.5rem; }
}

@media (max-width: 480px) {
	:root { --hv-radius: 20px; }
	.hv-hero__title { font-size: clamp(2.35rem, 13vw, 3.4rem); }
	ul.products li.product .woocommerce-loop-product__title { font-size: 1.05rem; margin-left: 1.25rem; margin-right: 1.25rem; }
	ul.products li.product .price { margin-left: 1.25rem; margin-right: 1.25rem; }
	ul.products li.product .button { margin-left: 1.25rem; margin-right: 1.25rem; }
	.woocommerce table.shop_table th,
	.woocommerce table.shop_table td { padding: .85rem .75rem; }
}

/* ==========================================================================
   16 · ACCESSIBILITY & MOTION
   ========================================================================== */
.screen-reader-text { position: absolute !important; }

.skip-link:focus {
	background: var(--hv-surface);
	color: var(--brand-walnut);
	border-radius: var(--hv-radius-pill);
	padding: .85rem 1.5rem;
	box-shadow: var(--hv-shadow-lift);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	ul.products li.product:hover,
	.hv-pillar:hover { transform: none; }
}

/* WordPress core alignment classes */
.alignleft { float: left; margin: 0 2rem 1.5rem 0; }
.alignright { float: right; margin: 0 0 1.5rem 2rem; }
.aligncenter { display: block; margin: 1.5rem auto; }

/* ==========================================================================
   Fleet standards links (2026-10-10): the policy row inside the colophon.
   Printed by inc/standards.php on every template, above the copyright line.
   ========================================================================== */

.hv-footer-legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .55rem 1.9rem;
	padding: 0 0 1.5rem;
}

.hv-footer-legal a {
	font-family: var(--font-body);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--brand-walnut);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
}

.hv-footer-legal a:hover,
.hv-footer-legal a:focus-visible {
	color: var(--brand-accent);
	border-bottom-color: var(--brand-accent);
}

.hv-footer-legal a:focus-visible {
	outline: 2px solid var(--brand-accent);
	outline-offset: 4px;
}

@media (max-width: 480px) {
	.hv-footer-legal { gap: .45rem 1.15rem; padding-bottom: 1.25rem; }
	.hv-footer-legal a { font-size: .72rem; letter-spacing: .12em; }
}