/*
Theme Name:   Bespora Studio (Storefront Child)
Theme URI:    https://besporastudio.com/
Description:  Bespora Studio brand layer on top of Storefront. Applies the palette and
              typography captured from the owner's Shopify theme settings (编辑方案 1):
              background #FAF8F5 / text #1F1E1D / solid button #C4A554 / solid button
              label #1A1A1A / outline button #C4A554 / shadow #7A7571, headings in
              Playfair Display at 105% and body in Montserrat at 100%. All values come
              from the owner's screenshots - nothing is invented.
Author:       Bespora Studio
Template:     storefront
Version:      1.0.53
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  storefront-bespora
*/

/* ============================================================
   1. Brand tokens (from the Shopify colour scheme screenshot)
   ============================================================ */
:root {
	--bs-bg:            #FAF8F5;   /* 背景            */
	--bs-text:          #1F1E1D;   /* 文本            */
	--bs-accent:        #C4A554;   /* 实心按钮背景 / 轮廓按钮 */
	--bs-label:         #1A1A1A;   /* 实心按钮标签    */
	--bs-shadow:        #7A7571;   /* 阴影            */

	--bs-accent-dark:   #B0904A;   /* 按钮 hover（同色系加深，非新色） */
	--bs-line:          rgba(122, 117, 113, .22);   /* 由阴影色调出的分隔线 */
	--bs-line-soft:     rgba(122, 117, 113, .14);
	--bs-muted:         rgba(31, 30, 29, .62);

	--bs-font-heading:  "Playfair Display", Georgia, "Times New Roman", serif;
	--bs-font-body:     "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ============================================================
   2. Base - background, text, typeface
   ============================================================ */
html,
body {
	background-color: var(--bs-bg) !important;
	color: var(--bs-text);
}

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

body {
	font-weight: 400;
}

/* Storefront paints several wrappers white - let the brand background through */
.site,
.site-content,
.content-area,
.storefront-breadcrumb,
.widget-area,
.hentry,
.woocommerce-breadcrumb {
	background-color: transparent;
}

/* ============================================================
   3. Headings - Playfair Display @ 105% of Storefront's scale
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.alpha, .beta, .gamma, .delta,
.entry-title,
.site-title,
.woocommerce-loop-product__title,
.woocommerce div.product .product_title,
.woocommerce-tabs .panel > h2,
.related.products > h2,
.upsells.products > h2,
.cross-sells > h2 {
	font-family: var(--bs-font-heading) !important;
	font-weight: 400;
	letter-spacing: 0 !important;      /* Storefront 默认 h1 有 -1px，衬线体不需要 */
	color: var(--bs-text);
}

/* Storefront 基准字号 × 1.05（对应 Shopify 的「缩放 105%」） */
h1, .alpha            { font-size: 2.7488em !important; }
h2, .beta             { font-size: 2.1em    !important; }
h3, .gamma            { font-size: 1.6989em !important; }
h4, .delta            { font-size: 1.4865em !important; }
h5                    { font-size: 1.05em   !important; }
h6                    { font-size: .9188em  !important; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	font-weight: 400;
	color: inherit;
}

/* 站点标题是 h1，单独收小，避免页头被撑爆 */
.site-branding .site-title,
.site-branding .site-title a {
	font-size: 1.75em !important;
	line-height: 1.214 !important;
}

/* 商品标题用标题字体，但尺寸贴近正文，保证网格整齐 */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.15em !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
}

/* ============================================================
   4. Links
   ============================================================ */
a {
	color: var(--bs-text);
	text-decoration: none;
}

a:hover {
	color: var(--bs-text);
	text-decoration: underline;
	text-decoration-color: var(--bs-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* 正文与页脚里的链接常驻下划线，保证可读性 */
.entry-content a,
.woocommerce-product-details__short-description a,
.woocommerce-Tabs-panel a,
.site-footer a,
.woocommerce-breadcrumb a {
	text-decoration: underline;
	text-decoration-color: rgba(196, 165, 84, .55);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.woocommerce-breadcrumb a:hover,
.site-footer a:hover {
	text-decoration-color: var(--bs-accent);
}

/* ============================================================
   5. Header, navigation, cart
   ============================================================ */
.site-header {
	background-color: var(--bs-bg) !important;
	color: var(--bs-text) !important;
	border-bottom: 1px solid var(--bs-line);
}

.site-header a,
.site-header .site-title a,
.site-header .site-description,
.site-header .widget a,
.site-header .site-header-cart a,
.site-header .secondary-navigation a {
	color: var(--bs-text) !important;
}

.site-header .site-description {
	color: var(--bs-muted) !important;
}

.menu-toggle,
.site-header .menu-toggle {
	color: var(--bs-text) !important;
	background-color: transparent !important;
}

/* Header 内部那条白色分隔线在浅底上会消失，改用阴影色 */
.storefront-primary-navigation,
.site-header .storefront-primary-navigation {
	border-top-color: var(--bs-line) !important;
}

.main-navigation {
	background-color: transparent !important;
}

.main-navigation ul li a {
	color: var(--bs-text) !important;
	font-family: var(--bs-font-body);
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a,
.main-navigation ul li.current-menu-ancestor > a {
	color: var(--bs-accent-dark) !important;
	font-weight: 700 !important;
	text-decoration: underline !important;
	text-decoration-thickness: 3px !important;
	text-underline-offset: 5px !important;
}

.main-navigation ul ul {
	background-color: var(--bs-bg) !important;
	border: 1px solid var(--bs-line);
	box-shadow: 0 3px 10px rgba(122, 117, 113, .18);
}

.main-navigation ul ul li a {
	color: var(--bs-text) !important;
}

/* 购物车 / 收藏数量气泡 */
.site-header-cart .cart-contents .count,
.storefront-handheld-footer-bar ul li.cart .count,
.storefront-handheld-footer-bar ul li.wishlist .count {
	background-color: var(--bs-accent) !important;
	color: var(--bs-label) !important;
}

/* 站点顶部搜索框 */
.site-header .widget_product_search input[type="search"],
.site-header .widget_search input[type="search"] {
	background-color: #fff !important;
	border: 1px solid var(--bs-line) !important;
	color: var(--bs-text) !important;
}

/* ============================================================
   6. Footer  (4 列卡片式：Shop / Help / Company / About)
   ============================================================ */
.site-footer {
	background-color: var(--bs-bg) !important;
	color: var(--bs-text) !important;
	border-top: 1px solid var(--bs-line);
	/* 与页头一致：内容到上/下横线的距离各 20px */
	padding-top: 20px;
	padding-bottom: 20px;
}

.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6 {
	color: var(--bs-text) !important;
}

/* --- 页脚内容与页头左右对齐：宽屏左右各 200px 留白（与 header 同一套断点） --- */
@media (min-width: 768px) {
	.site-footer > .col-full {
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 200px !important;
		padding-right: 200px !important;
	}
}
@media (min-width: 768px) and (max-width: 1599px) {
	.site-footer > .col-full {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
}
@media (min-width: 768px) and (max-width: 1279px) {
	.site-footer > .col-full {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}
}

/* --- 4 列网格：等宽（1fr×4）+ 等间距，分隔线画在间距里不占列宽 --- */
.site-footer .footer-widgets {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 40px;
	row-gap: 34px;
	margin-bottom: 0;
	/* 父主题给 .footer-widgets 加了 67.77px 的上内距（顶线到标题块因此变成 124px）+ 一条
	   浅色下边框（就是底部多出来的"第二条横线"），这里都清掉。 */
	padding: 0 !important;
	border-bottom: 0 !important;
}

/* Storefront 给 .footer-widgets 加了 clearfix 类 .fix，它的 ::before/::after
   在 CSS Grid 里会各算一个 grid item，会凭空占掉第一格 -> 必须清掉。 */
.site-footer .footer-widgets::before,
.site-footer .footer-widgets::after {
	content: none !important;
	display: none !important;
}

/* 清掉 Storefront 的 float + width:21.739% + margin-right:4.348%
   （正是"列宽不齐 / 列间多出空隙"的元凶），让 grid 精确等分 4 列。 */
.site-footer .footer-widgets .block {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	position: relative;
}

/* 列间竖向分隔线：居中画在两列间距里，不占列宽、不影响等宽 */
.site-footer .footer-widgets .block + .block::before {
	content: "" !important;
	display: block !important;
	position: absolute;
	left: -20px;
	top: 2px;
	bottom: 2px;
	width: 1px;
	background-color: var(--bs-line-soft);
}

.site-footer .widget {
	margin-bottom: 0;
}

/* --- 列标题：米色圆角条 + 金色左竖线 --- */
.site-footer .widget-title,
.site-footer .widget > h2 {
	display: block;
	background-color: #F0EDE6;
	border-left: 4px solid var(--bs-accent);
	border-radius: 6px;
	padding: 7px 14px;
	margin: 0 0 14px;
	font-family: var(--bs-font-heading) !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	line-height: 1.3;
	letter-spacing: .01em !important;
	color: var(--bs-text) !important;
	text-align: left;
}

/* --- 菜单项：白色圆角卡片 --- */
.site-footer .widget_nav_menu ul.menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.site-footer .widget_nav_menu ul.menu li {
	margin: 0;
	padding: 0;
	border: 0;
}

/* 插件（Font Awesome 5，随 YITH 一起装入）会给菜单项注入 ::before 图标，
   页脚的卡片不需要，去掉，保持干净。 */
.site-footer .widget_nav_menu ul.menu li::before,
.site-footer .widget_nav_menu ul.menu li::after {
	content: none !important;
	display: none !important;
}

.site-footer .widget_nav_menu ul.menu li a {
	display: block;
	background-color: #fff;
	border-radius: 6px;
	padding: 9px 14px;
	color: #4D4D4D !important;
	font-family: var(--bs-font-body);
	font-size: 14.5px;
	line-height: 1.4;
	text-decoration: none !important;
	box-shadow: 0 1px 2px rgba(31, 30, 29, .035);
	transition: color .18s ease, box-shadow .18s ease;
}

.site-footer .widget_nav_menu ul.menu li a:hover,
.site-footer .widget_nav_menu ul.menu li a:focus {
	color: var(--bs-accent-dark) !important;
	text-decoration: none !important;
	box-shadow: 0 2px 8px rgba(31, 30, 29, .09);
}

/* --- About 文本列 --- */
.site-footer .widget_text .textwidget {
	color: #4D4D4D;
	font-size: 14.5px;
	line-height: 1.72;
}

.site-footer .widget_text .textwidget p { margin: 0 0 1em; }
.site-footer .widget_text .textwidget p:last-child { margin-bottom: 0; }
.site-footer .widget_text .textwidget strong { color: var(--bs-text); font-weight: 600; }
.site-footer .widget_text .textwidget a { text-decoration: none !important; }
.site-footer .widget_text .textwidget a:hover { text-decoration: underline !important; }

/* --- 底部版权 + 政策链接条 --- */
.bs-footer-bar {
	/* 内容底 -> 横线 20px */
	margin-top: 20px;
	/* 横线 -> 文字 20px（下方 20px 由 .site-footer 的 padding-bottom 承担） */
	padding: 20px 0 0;
	border-top: 1px solid var(--bs-line-soft);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: var(--bs-font-body);
	font-size: 12.5px;
	color: var(--bs-muted);
}

.bs-footer-bar p { margin: 0; }

.bs-footer-copy { color: var(--bs-muted); }
.bs-footer-copy::after { content: "·"; margin: 0 8px; color: var(--bs-line); }

.bs-footer-links {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bs-footer-links li { margin: 0; }

.bs-footer-links li + li::before {
	content: "·";
	margin: 0 8px;
	color: var(--bs-line);
}

.bs-footer-links a {
	color: var(--bs-muted) !important;
	text-decoration: none !important;
}

.bs-footer-links a:hover {
	color: var(--bs-accent-dark) !important;
	text-decoration: underline !important;
}

/* --- 页脚响应式 --- */
@media (max-width: 1024px) {
	.site-footer .footer-widgets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 40px;
		row-gap: 34px;
	}
	/* 2 列时只在每行的两列之间画分隔线（偶数列 = 第 2、4 列） */
	.site-footer .footer-widgets .block + .block::before { display: none !important; }
	.site-footer .footer-widgets .block:nth-child(even)::before {
		content: "" !important;
		display: block !important;
		position: absolute;
		left: -20px;
		top: 2px;
		bottom: 2px;
		width: 1px;
		background-color: var(--bs-line-soft);
	}
}

@media (max-width: 640px) {
	.site-footer .footer-widgets {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 26px;
	}
	.site-footer .footer-widgets .block + .block::before,
	.site-footer .footer-widgets .block:nth-child(even)::before {
		display: none !important;
	}
	.bs-footer-bar {
		margin-top: 20px;
		flex-direction: column;
	}
	.bs-footer-copy::after { content: none; }
}

/* 移动端底部固定条 */
.storefront-handheld-footer-bar {
	background-color: var(--bs-bg) !important;
	border-top: 1px solid var(--bs-line);
	box-shadow: 0 -2px 8px rgba(122, 117, 113, .14);
}

.storefront-handheld-footer-bar ul li > a,
.storefront-handheld-footer-bar ul li > a::before {
	color: var(--bs-text) !important;
}

/* Show the bottom bar on tablets too — Storefront hides it from 768px up. */
@media (min-width: 768px) and (max-width: 1024px) {
	.storefront-handheld-footer-bar { display: block !important; }
}

/* Wishlist entry: heart glyph (Font Awesome 5 Free, bundled by Storefront)
   + a gold count bubble, mirroring the cart item exactly. */
.storefront-handheld-footer-bar ul li.wishlist > a::before {
	content: "\f004";
}
.storefront-handheld-footer-bar ul li.wishlist .count {
	text-indent: 0;
	display: block;
	width: 2em;
	height: 2em;
	line-height: 2;
	box-sizing: content-box;
	font-size: .75em;
	position: absolute;
	top: .875em;
	left: 50%;
	border-radius: 100%;
	border: 1px solid;
}

/* ============================================================
   7. Buttons - solid (#C4A554 / #1A1A1A) + outline
   ============================================================ */
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.added_to_cart,
.wc-forward,
.woocommerce-Button,
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background-color: var(--bs-accent) !important;
	border: 1px solid var(--bs-accent) !important;
	color: var(--bs-label) !important;
	border-radius: 0 !important;
	text-shadow: none !important;
	font-family: var(--bs-font-body);
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: none;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.added_to_cart:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--bs-accent-dark) !important;
	border-color: var(--bs-accent-dark) !important;
	color: var(--bs-label) !important;
}

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

/* 外框按钮（轮廓按钮 = #C4A554 描边，文字用文本色保证对比度） */
.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link,
.button.outline,
.woocommerce .button.outline {
	background-color: transparent !important;
	border: 1px solid var(--bs-accent) !important;
	color: var(--bs-text) !important;
}

.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.button.outline:hover {
	background-color: var(--bs-accent) !important;
	color: var(--bs-label) !important;
}

/* WooCommerce 次要按钮（如"查看购物车"） */
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button {
	border-radius: 0 !important;
}

/* ============================================================
   8. Forms
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select,
.select2-container .select2-selection--single {
	background-color: #fff;
	border: 1px solid var(--bs-line-soft);
	color: var(--bs-text);
	border-radius: 0;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
	border-color: var(--bs-accent);
	outline: 1px solid var(--bs-accent);
	outline-offset: -1px;
}

::placeholder {
	color: var(--bs-muted);
}

/* ============================================================
   9. WooCommerce - shop grid, price, sale badge, rating
   ============================================================ */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce-Price-amount {
	color: var(--bs-text);
	font-family: var(--bs-font-body);
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
	color: var(--bs-muted);
	opacity: 1;
	font-weight: 400;
}

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
	color: var(--bs-text);
	font-weight: 600;
	text-decoration: none;
}

/* Sale 角标：小方牌，配色走实心按钮色 */
.woocommerce span.onsale{
	background-color: var(--bs-accent) !important;
	color: var(--bs-label) !important;
	font-family: var(--bs-font-body);
	font-weight: 600;
	font-size: .8125em;
	line-height: 1.5;
	min-height: 0;
	min-width: 0;
	padding: .2em .7em;
	border-radius: 0;
	letter-spacing: .02em;
	text-transform: none;
}

/* 商店网格里 Storefront 把角标排在标题之后、且没有定位，会压住标题。
   这里把角标钉到商品图左上角（和单品页、Shopify 一致）。 */
.woocommerce ul.products li.product {
	position: relative;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	position: relative;
	display: block;
}

.woocommerce ul.products li.product span.onsale {
	position: absolute !important;
	top: .7em !important;
	left: .7em !important;
	z-index: 9;
}

.woocommerce .star-rating::before,
.woocommerce .star-rating span::before,
.woocommerce p.stars a {
	color: var(--bs-accent);
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin-top: .5em;
}

/* ============================================================
   10. WooCommerce - single product, tabs, quantity
   ============================================================ */
.woocommerce div.product .product_title {
	font-family: var(--bs-font-heading) !important;
}

.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link {
	color: var(--bs-muted);
}

.woocommerce div.product .summary .price {
	font-size: 1.618em;
}

.woocommerce div.product form.cart .quantity .qty {
	background-color: #fff;
	border: 1px solid var(--bs-line-soft);
	color: var(--bs-text);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--bs-line);
	padding-left: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0 1.5em 0 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--bs-muted) !important;
	font-weight: 500;
	padding: .8em 0 !important;
	font-family: var(--bs-font-body);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--bs-text) !important;
	box-shadow: inset 0 -2px 0 var(--bs-accent) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}

/* ============================================================
   11. Notices, breadcrumb, pagination
   ============================================================ */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--bs-accent) !important;
	background-color: transparent;
	color: var(--bs-text);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--bs-accent) !important;
}

.woocommerce-breadcrumb {
	color: var(--bs-muted);
	font-size: .875em;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	color: var(--bs-text);
}

.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background-color: var(--bs-accent);
	color: var(--bs-label);
}

/* ============================================================
   12. Misc
   ============================================================ */
::selection {
	background-color: rgba(196, 165, 84, .45);
	color: var(--bs-text);
}

.woocommerce-store-notice,
p.demo_store {
	background-color: var(--bs-accent);
	color: var(--bs-label);
}

.woocommerce-store-notice a,
p.demo_store a {
	color: var(--bs-label);
	text-decoration: underline;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link img,
.woocommerce div.product div.images img {
	border: 1px solid var(--bs-line-soft);
}

/* ============================================================
   13. Header logo size (constrain oversized logo)
   ============================================================ */
.site-header .custom-logo-link img,
.site-header .custom-logo {
	width: 100px;
	height: auto;
	max-width: 100px;
}
.site-header .custom-logo-link {
	display: block;
	width: 100px;
}
.site-header .site-branding {
	width: 100px;
}

/* ============================================================
   14. Header layout — logo left, primary nav inline on the SAME row (Shopify-like)
   ============================================================ */
@media (min-width: 768px) {
	/* Header = 3-column grid: [logo] [nav hugging logo] [icons].
	   200px gutters on both sides via padding. The middle column uses
	   minmax(0,1fr) so the nav can shrink instead of pushing the icons
	   past the right gutter (the previous flex layout overflowed). */
	.site-header {
		display: grid;
		grid-template-columns: auto minmax( 0, 1fr ) auto;
		align-items: center;
		position: relative;
		/* 20px breathing room above (to the announcement bar) and below;
		   left/right gutters stay 200px on wide screens. */
		padding: 20px 200px;
	}
	/* logo column - flush to the 200px left gutter */
	.site-header > .col-full {
		grid-column: 1;
		display: flex;
		align-items: center;
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
	}
	.site-header .site-branding {
		flex: 0 0 auto;
		width: 100px;
		/* Storefront keeps a 1.41575em (≈22.65px) margin-bottom on the branding
		   block. Inside the grid it silently inflated the row height, so the
		   logo sat 44px above the header's bottom edge instead of 20px. */
		margin-bottom: 0 !important;
	}
	/* on desktop we draw our own icon group, so hide Storefront's own
	   big search box and text cart link */
	.site-header .site-search,
	.site-header .site-header-cart {
		display: none;
	}
	/* nav column - hugs the logo (left-aligned) and lives in the 1fr middle.
	   min-width:0 lets it shrink so the icon column stays on the gutter. */
	.site-header > .storefront-primary-navigation {
		grid-column: 2;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: auto;
		max-width: none;
		margin: 0;
		background: transparent;
		border: 0;
		min-width: 0;
	}
	.site-header > .storefront-primary-navigation > .col-full {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0 0 0 45px;
	}
	.site-header .storefront-primary-navigation .main-navigation {
		clear: none;
		float: none;
		margin: 0;
		min-width: 0;
	}
	/* keep menu items on ONE line, hugging the logo (left).
	   Scope to the desktop menu (ul.menu) only - do NOT touch the
	   handheld (mobile) fallback menu, which Storefront hides on desktop. */
	.site-header .storefront-primary-navigation .main-navigation ul.menu {
		float: none;
		white-space: nowrap;
		text-align: left;
		margin-left: 0;
	}
	/* tighten top-level menu items so an 8-item menu fits on one line */
	.site-header .storefront-primary-navigation .main-navigation ul.menu > li > a {
		padding-left: .72em;
		padding-right: .72em;
	}
	/* icon group column - pinned to the far right (200px gutter) */
	.site-header .bs-header-icons {
		grid-column: 3;
		display: flex;
		align-items: center;
		gap: 20px;
	}
}

/* 中宽屏（768–1599px）收窄左右留白，避免 8 项导航被压折行 / 压到右侧图标。
   200px 大留白只留给 ≥1600px 的宽屏（与 Shopify 桌面体验一致）。 */
@media (min-width: 768px) and (max-width: 1599px) {
	.site-header {
		padding-left: 40px;
		padding-right: 40px;
	}
}

/* 窄桌面 / 平板横屏（768–1279px）：8 项内联菜单放不下，回退成汉堡菜单抽屉，
   彻底杜绝菜单与右侧图标重叠。 */
@media (min-width: 768px) and (max-width: 1279px) {
	.site-header {
		padding-left: 32px;
		padding-right: 32px;
	}
	/* hide the inline one-line menu */
	.site-header .storefront-primary-navigation .main-navigation ul.menu {
		display: none !important;
	}
	/* show Storefront's native hamburger toggle (it ships in the markup) */
	.site-header .storefront-primary-navigation .main-navigation .menu-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		margin: 0;
		padding: 0;
		background: transparent !important;
		border: 0 !important;
		color: var(--bs-text, #1F1E1D) !important;
		box-shadow: none !important;
		cursor: pointer;
	}
	.site-header .storefront-primary-navigation .main-navigation .menu-toggle::before {
		color: var(--bs-text, #1F1E1D) !important;
		display: block;
	}
	.site-header > .storefront-primary-navigation > .col-full {
		padding-left: 20px;
	}
}

/* on mobile, keep Storefront's native cart + search; hide our desktop icon group */
@media (max-width: 767px) {
	.bs-header-icons {
		display: none;
	}
	.bs-search-panel[hidden] {
		display: none;
	}
}

/* ============================================================
   15. Top announcement bar (40px black strip) + Shopify-style rotator
   ============================================================ */
.bs-announcement-bar {
	position: relative;
	background-color: #1A1A1A;
	color: #FAF8F5;
	height: 40px;
	overflow: hidden;
	font-family: var(--bs-font-body, "Montserrat", sans-serif);
	font-size: 13px;
	letter-spacing: .02em;
}
.bs-announcement-track {
	position: relative;
	height: 40px;
}
.bs-announcement-item {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 40px;
	line-height: 40px;
	text-align: center;
	padding: 0 1em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transform: translateY( 100% );
	transition: opacity .6s ease, transform .6s ease;
}
.bs-announcement-item.is-active {
	opacity: 1;
	transform: translateY( 0 );
}
.bs-announcement-item.is-leaving {
	opacity: 0;
	transform: translateY( -100% );
}

/* ============================================================
   16. Search panel + Shopify-style header icons (search / account / cart)
   ============================================================ */
.bs-search-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 60;
	background-color: var(--bs-bg, #FAF8F5);
	border-bottom: 1px solid var(--bs-line-soft, #E7E2DA);
	padding: 16px 0;
	box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
}
.bs-search-panel .col-full {
	max-width: 1168px;
	margin: 0 auto;
	padding: 0 1em;
}
.bs-search-panel form {
	display: flex;
	gap: 10px;
	max-width: 640px;
	margin: 0 auto;
}
.bs-search-panel input[type="search"] {
	flex: 1 1 auto;
	border: 1px solid var(--bs-line-soft, #E7E2DA);
	background: #fff;
	padding: .6em .9em;
	font-family: var(--bs-font-body, "Montserrat", sans-serif);
	font-size: 15px;
	color: var(--bs-text, #1F1E1D);
}
.bs-search-panel button[type="submit"] {
	background-color: var(--bs-accent, #C4A554);
	color: var(--bs-label, #1A1A1A);
	border: 0;
	padding: .6em 1.4em;
	font-family: var(--bs-font-body, "Montserrat", sans-serif);
	font-size: 15px;
	cursor: pointer;
}

/* icon group (desktop) */
.site-header .bs-header-icons .bs-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0 !important;
	background: none !important;
	color: var(--bs-text, #1F1E1D) !important;
	cursor: pointer;
	position: relative;
	line-height: 0;
}
.site-header .bs-header-icons .bs-icon svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	stroke-width: 1.6;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.site-header .bs-header-icons .bs-icon:hover {
	color: var(--bs-accent, #C4A554);
}
.site-header .bs-header-icons .bs-cart-count,
.site-header .bs-header-icons .bs-count {
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background-color: var(--bs-accent, #C4A554);
	color: var(--bs-label, #1A1A1A);
	font-family: var(--bs-font-body, "Montserrat", sans-serif);
	font-size: 10px;
	line-height: 16px;
	text-align: center;
	font-weight: 600;
}

/* an empty badge must never render (count 0 -> server adds the [hidden] attr) */
.site-header .bs-header-icons .bs-count[hidden] {
	display: none !important;
}

/* Shopify reference: the wishlist badge is black, the cart badge is gold */
.site-header .bs-header-icons .bs-wishlist-count {
	background-color: #1A1A1A;
	color: #FAF8F5;
}

/* ============================================================
   17. YITH WooCommerce Wishlist — heart buttons (Shopify-like)
   ============================================================ */
/* The global "button { background: gold !important }" rule (section 7)
   also catches YITH's wishlist <button>, painting it a solid gold square.
   Neutralise that and render a clean line-icon heart instead. */
.yith-wcwl-add-to-wishlist-button,
button.yith-wcwl-add-to-wishlist-button,
a.yith-wcwl-add-to-wishlist-button,
.yith-wcwl-add-to-wishlist .yith-wcwl-add-to-wishlist-button,
.yith-wcwl-add-to-wishlist-button--icon-button {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	color: var(--bs-text, #1F1E1D) !important;
	border-radius: 0 !important;
	min-width: 0 !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	line-height: 0;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}
.yith-wcwl-add-to-wishlist-button svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
}
.yith-wcwl-add-to-wishlist-button:hover {
	background: transparent !important;
	color: var(--bs-accent, #C4A554) !important;
}
/* "already in wishlist" state -> filled brand-gold heart */
.yith-wcwl-add-to-wishlist-button--added,
.yith-wcwl-add-to-wishlist-button--added:hover {
	color: var(--bs-accent, #C4A554) !important;
}
.yith-wcwl-add-to-wishlist-button--added svg {
	fill: var(--bs-accent, #C4A554) !important;
}
/* Shopify-style placement: move the floating heart to the TOP-RIGHT so it
   never collides with WooCommerce's "Sale!" badge (which sits top-left). */
.yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button-over-image--top-left {
	left: auto !important;
	/* The product image sits 12px inside the link's right border-box edge,
	   and YITH's default negative margin-right throws the box off. With
	   margin/border zeroed above, right:22 places the heart exactly 10px
	   inside the image frame's right edge (matching the 10px top gap). */
	right: 22px !important;
	top: 10px !important;
}
/* over-image icon variant: a small floating white heart on the photo corner.
   Keep YITH's own positioning; only repaint it. We also zero YITH's default
   button margin/border so top:10/right:10 (set in the --top-left rule) place
   the heart exactly 10px inside the image frame on BOTH sides. */
.yith-wcwl-add-to-wishlist-button-over-image {
	background: rgba(255, 255, 255, .9) !important;
	background-color: rgba(255, 255, 255, .9) !important;
	border: 0 !important;
	border-radius: 999px !important;
	margin: 0 !important;
	padding: 6px !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .15) !important;
}
.yith-wcwl-add-to-wishlist-button-over-image:hover {
	background: #fff !important;
	background-color: #fff !important;
}
/* text-button variant (e.g. on the single product page) keeps the brand look */
.yith-wcwl-add-to-wishlist-button--button:not(.yith-wcwl-add-to-wishlist-button-over-image) {
	background: transparent !important;
	border: 1px solid var(--bs-accent, #C4A554) !important;
	color: var(--bs-text, #1F1E1D) !important;
	padding: .6em 1.1em !important;
	line-height: 1.4;
	border-radius: 0 !important;
}

/* ============================================================
   18. Product-loop "View cart" link (shown after an AJAX add to cart)
   ============================================================ */
/* WooCommerce appends <a class="added_to_cart wc-forward">View cart</a> right
   next to the "Add to cart" button after an AJAX add to cart. Owner asked for
   it to go away entirely (2026-10-04) - the header cart badge already
   confirms the add, so the extra link only added noise to the card.
   Kept as display:none rather than removed from the markup, because the link
   is injected by WooCommerce's own JS and cannot be filtered out. */
.woocommerce ul.products li.product .added_to_cart,
.added_to_cart.wc-forward {
	display: none !important;
}

/* ============================================================
   19. Newsletter — welcome pop-up + footer subscribe row
   ============================================================ */

/* ---------- pop-up shell ---------- */
.bs-nl-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background-color: rgba(31, 30, 29, .55);
	opacity: 0;
	transition: opacity .25s ease;
}

.bs-nl-overlay[hidden] { display: none !important; }
.bs-nl-overlay.is-open { opacity: 1; }

.bs-nl-modal {
	position: relative;
	width: 100%;
	max-width: 460px;
	background-color: #fff;
	border: 1px solid var(--bs-line);
	box-shadow: 0 24px 60px rgba(31, 30, 29, .28);
	padding: 38px 34px 30px;
	transform: translateY(12px);
	transition: transform .25s ease;
}

.bs-nl-overlay.is-open .bs-nl-modal { transform: translateY(0); }

/* the global button rule paints every <button> gold - the close cross must not be */
.bs-nl-close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 34px;
	height: 34px;
	padding: 0 !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--bs-muted) !important;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.bs-nl-close:hover {
	background-color: transparent !important;
	color: var(--bs-text) !important;
}

/* ---------- pop-up typography ---------- */
.bs-nl-kicker {
	margin: 0 0 8px;
	font-family: var(--bs-font-body);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--bs-muted);
}

.bs-nl-title {
	margin: 0 0 10px;
	font-family: var(--bs-font-heading) !important;
	font-size: 26px !important;
	line-height: 1.25;
	font-weight: 600 !important;
	color: var(--bs-text) !important;
}

.bs-nl-text {
	margin: 0 0 20px;
	font-size: 14.5px;
	line-height: 1.6;
	color: #4D4D4D;
}

/* ---------- forms (pop-up + footer share everything below) ---------- */
.bs-nl-field {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bs-nl-email {
	width: 100%;
	padding: 12px 14px;
	font-size: 14.5px;
}

/* honeypot - kept out of sight, never focusable */
.bs-nl-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.bs-nl-submit {
	width: 100%;
	padding: 13px 18px !important;
	font-size: 13.5px;
	cursor: pointer;
}

.bs-nl-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--bs-muted);
	cursor: pointer;
}

.bs-nl-consent input {
	margin: 2px 0 0;
	flex: 0 0 auto;
}

.bs-nl-error {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: #B3261E;
}

.bs-nl-note {
	margin: 14px 0 0;
	font-size: 12px;
	color: var(--bs-muted);
	text-align: center;
}

/* ---------- success state (the coupon is revealed here) ---------- */
.bs-nl-success { text-align: center; }
.bs-nl-success[hidden] { display: none !important; }

.bs-nl-success-label {
	margin: 0 0 8px;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bs-muted);
}

.bs-nl-code {
	display: inline-block;
	margin: 0 0 10px;
	padding: 12px 22px;
	background-color: #FCFAF6;
	border: 1px dashed var(--bs-accent);
	font-family: var(--bs-font-body);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--bs-text);
	cursor: pointer;
}

.bs-nl-success-note {
	margin: 4px 0 0;
	font-size: 12.5px;
	color: var(--bs-muted);
}

/* ---------- footer subscribe row (above the policy bar) ---------- */
/* stacked + horizontally centred: copy on top, form below */
.bs-nl-footer-row {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 18px;
}

.bs-nl-footer-copy {
	text-align: center;
}

.bs-nl-footer-title {
	margin: 0 0 4px !important;
	font-family: var(--bs-font-heading) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	color: var(--bs-text) !important;
}

.bs-nl-footer-text {
	margin: 0;
	font-size: 14px;
	color: #4D4D4D;
}

.bs-nl-footer-form {
	width: 100%;
	max-width: 480px;
}

.bs-nl-form--footer { width: 100%; }

.bs-nl-form--footer .bs-nl-field {
	flex-direction: row;
	align-items: stretch;
}

.bs-nl-form--footer .bs-nl-email {
	min-width: 210px;
	flex: 1 1 auto;
}

.bs-nl-form--footer .bs-nl-submit {
	width: auto;
	white-space: nowrap;
}

.bs-nl-footer-form .bs-nl-success { text-align: center; }

/* ---------- re-open tab (shown after the visitor dismisses the pop-up) ---------- */
/* bottom-left sticky chip so a dismissed pop-up can always be re-opened */
.bs-nl-chip {
	position: fixed;
	left: 22px;
	/* Lifted to 175px so the chip (and its × close button) clears the Google
	   Customer Reviews floating badge, which is a 150px-tall panel pinned to
	   the bottom-left corner (Google's wrapper uses z-index 2147483647, so we
	   cannot out-stack it — we must physically clear it). Tawk is bottom-right
	   and follows this height via bespora_tawk_offset(). */
	bottom: 175px;
	z-index: 999998; /* sits just under the modal overlay (999999) */
	display: inline-block;
	line-height: 0;
}

.bs-nl-chip[hidden] { display: none !important; }

.bs-nl-launcher {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 18px 11px 12px;
	border: 0 !important;
	border-radius: 999px !important; /* beat the global button rule (section 7) */
	background-color: var(--bs-accent) !important;
	color: #1A1A1A !important;
	font-family: var(--bs-font-body);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1;
	box-shadow: 0 12px 30px rgba(31, 30, 29, .30);
	cursor: pointer;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .22s ease, transform .22s ease, box-shadow .22s ease, background-color .18s ease;
}

.bs-nl-launcher.is-shown { opacity: 1; transform: translateY(0); }

/* little "×" pinned to the chip's top-right corner — dismisses it for good */
.bs-nl-chip__close {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 20px;
	height: 20px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	border-radius: 50% !important;
	background-color: #1F1E1D !important;
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(31, 30, 29, .40);
	transition: background-color .18s ease, transform .18s ease;
}

.bs-nl-chip__close:hover { background-color: #000 !important; transform: scale(1.08); }
.bs-nl-chip__close:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 2px; }

.bs-nl-launcher:hover {
	background-color: var(--bs-accent-dark) !important;
	box-shadow: 0 16px 36px rgba(31, 30, 29, .38);
}

.bs-nl-launcher:focus-visible {
	outline: 2px solid #1A1A1A;
	outline-offset: 2px;
}

.bs-nl-launcher__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: #1F1E1D;
	color: var(--bs-accent);
	font-size: 13px;
	font-weight: 700;
}

.bs-nl-launcher__label { white-space: nowrap; }

/* ---------- newsletter responsive ---------- */
@media (max-width: 640px) {
	.bs-nl-modal { padding: 30px 22px 24px; }
	.bs-nl-title { font-size: 22px !important; }
	.bs-nl-form--footer .bs-nl-field { flex-direction: column; }
	.bs-nl-form--footer .bs-nl-email { min-width: 0; }
	.bs-nl-chip { left: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 175px); }
	.bs-nl-launcher { padding: 10px 15px 10px 10px; font-size: 12.5px; }
}

/* ============================================================
   Phase 2 — Homepage hero (海报) · badges · product custom note
   ============================================================ */
.bs-hero {
	background: linear-gradient(135deg, #241f14 0%, #46391f 48%, #C4A554 150%);
	color: #FAF8F5;
	padding: 76px 0 66px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--bs-hero-h, 600px);
	/* Full-bleed: break out of Storefront's centred .col-full wrapper so the
	   poster runs edge-to-edge, left to right. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	position: relative;
}
.bs-hero__inner { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.bs-hero h1 {
	color: #FAF8F5;
	font-family: "Playfair Display", Georgia, serif;
	/* The global `h1 { font-size: … !important }` type scale (top of this file)
	   would otherwise pin this headline to a fixed 43.98px at every width, so the
	   poster text could never shrink. Same !important here to win it back. */
	font-size: clamp(30px, 3.05vw, 44px) !important;
	line-height: 1.14;
	margin: 0 0 16px;
}
.bs-hero p {
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.6;
	color: rgba(250, 248, 245, 0.92);
	max-width: 620px;
	margin: 0 auto 28px;
}
.bs-hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.bs-hero .button {
	background: #C4A554;
	color: #1A1A1A;
	border: 0;
	padding: 14px 28px;
	font-weight: 600;
	border-radius: 2px;
	text-decoration: none;
}
.bs-hero .button:hover { background: #d8bd6f; }
.bs-hero .button--ghost {
	background: transparent;
	color: #FAF8F5;
	border: 1px solid rgba(250, 248, 245, 0.6);
}
.bs-hero .button--ghost:hover { background: rgba(250, 248, 245, 0.12); }

/* Tablet: shrink the poster so it does not overpower the shorter viewport.
   The headline / sub-copy / buttons shrink with it, so the poster scales as one
   piece instead of leaving full-size text on a smaller image. */
@media (max-width: 1024px) {
	.bs-hero {
		min-height: calc(var(--bs-hero-h, 600px) * 0.72);
		padding: 50px 0 44px;
	}
	.bs-hero__inner { max-width: 620px; }
	.bs-hero h1 { font-size: 32px !important; margin-bottom: 12px; }
	.bs-hero p { font-size: 14.5px; max-width: 520px; margin-bottom: 22px; }
	.bs-hero .button { padding: 12px 22px; font-size: 14px; }
}
/* Phone: shrink further. */
@media (max-width: 768px) {
	.bs-hero {
		min-height: calc(var(--bs-hero-h, 600px) * 0.52);
		padding: 34px 0 30px;
	}
	.bs-hero__inner { max-width: 100%; padding: 0 18px; }
	.bs-hero h1 { font-size: 23px !important; line-height: 1.2; margin-bottom: 9px; }
	.bs-hero p { font-size: 13.5px; line-height: 1.55; max-width: 340px; margin-bottom: 18px; }
	.bs-hero__cta { gap: 10px; }
	.bs-hero .button { padding: 10px 16px; font-size: 12.5px; }
}

/* Image variant: a poster image is used as a full-bleed background. */
.bs-hero--image {
	background-position: left center;
}

/* When our own headline/CTA sit on the photo (i.e. text is NOT hidden), centre
   the artwork behind the centred text. The "hide text" poster mode keeps the
   left anchor so a baked-in logo survives the cover-crop on narrow screens. */
.bs-hero--image:not(.bs-hero--notext) {
	background-position: center center;
}

/* "No text" layout: used when the poster already carries its own logo/tagline
   (Customizer → Hide the headline text). The duplicated overlay headline is
   hidden from view (kept in the DOM for SEO) and the CTAs are parked in the
   artwork's dark lower-left panel. Anchor the artwork LEFT so the baked-in
   brand text survives the cover-crop on narrow screens. */
.bs-hero--notext {
	padding: 0;
	align-items: flex-end;
	justify-content: flex-start;
}
.bs-hero--notext .bs-hero__inner {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0 4vw 40px;
	text-align: left;
}
.bs-hero--notext .bs-hero__inner > h1,
.bs-hero--notext .bs-hero__inner > p {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.bs-hero--notext .bs-hero__cta { justify-content: flex-start; }
@media (max-width: 768px) {
	.bs-hero--notext .bs-hero__inner { padding: 0 6vw 28px; }
	.bs-hero--notext .bs-hero__cta { justify-content: flex-start; flex-wrap: nowrap; gap: 10px; }
	.bs-hero--notext .bs-hero__cta .button { padding: 11px 14px; font-size: 12.5px; white-space: nowrap; }
}

/* On the Bespora home template the hero poster is meant to sit flush under the
   menu bar. Storefront's homepage rule (.home.page:not(.page-template-template-homepage))
   does not match our `template-home` slug, so its fallback adds a ~68px
   margin-bottom to the header — that empty strip is the gap above the poster.
   Kill it on this template only. */
.page-template-template-home .site-header { margin-bottom: 0 !important; }

/* Badge row -> responsive pager: 4-up on desktop, 2-per-page on tablets,
   1-per-page on phones (horizontal swipe with dots + arrows). */
.bs-badges-wrap {
	max-width: 1080px;
	margin: 20px auto 0;
	padding: 0 20px;
}
.bs-badges {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}
.bs-badge {
	background: #fff;
	border: 1px solid #ECE6DB;
	border-radius: 3px;
	padding: 22px 18px;
	text-align: center;
	box-shadow: 0 2px 10px rgba(122, 117, 113, 0.08);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Pager controls — a plain bordered ‹ 1/2 › counter pill, only rendered when
   the row is actually paginated (tablet 2-up / phone 1-up). */
.bs-badges-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
}
.bs-badges-nav[hidden] { display: none; }
.bs-badges-pager {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	padding: 7px 18px;
	background: #fff;
	border: 1px solid #E4D9C2;
	border-radius: 3px;
}
/* The arrows are plain chevrons inside the pill: neutralise the theme-wide
   `button { background-color / border / color … !important }` rule (section 7)
   that would otherwise paint each arrow as a solid gold square. */
.bs-badges-arrow {
	width: auto;
	height: auto;
	padding: 2px 6px;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	color: #1F1E1D !important;
	font-size: 17px;
	line-height: 1;
	box-shadow: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.bs-badges-arrow:hover { color: #C4A554 !important; background: none !important; }
.bs-badges-arrow[disabled] { opacity: .3; cursor: default; }
.bs-badges-arrow[disabled]:hover { color: #1F1E1D !important; }
.bs-badges-counter {
	min-width: 34px;
	text-align: center;
	font-size: 13px;
	letter-spacing: .04em;
	color: #1F1E1D;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 1024px) {
	.bs-badges {
		display: flex;
		flex-wrap: nowrap;
		gap: 18px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
	}
	.bs-badges::-webkit-scrollbar { display: none; }
}
/* Tablet: exactly 2 badges per page. Only the first item of each page carries a
   snap point, so a swipe can never come to rest half-way between two pages
   (with per-item snapping there was an extra stop at badge 2). */
@media (min-width: 768px) and (max-width: 1024px) {
	.bs-badge { flex: 0 0 calc((100% - 18px) / 2); scroll-snap-align: none; }
	.bs-badge:nth-child(odd) { scroll-snap-align: start; }
}
/* Phone: 1 badge per page — every badge is its own snap point. */
@media (max-width: 767px) {
	.bs-badge { flex: 0 0 100%; scroll-snap-align: start; }
}
.bs-badge strong {
	display: block;
	color: #1F1E1D;
	font-size: 17px;
	margin-bottom: 6px;
	font-family: "Playfair Display", Georgia, serif;
}
.bs-badge span { color: #7A7571; font-size: 13px; }

/* Brand statement — framed as its own card, in the same visual language as the
   badge cards above it (white, 1px warm border, soft shadow). Outer box model
   matches .bs-badges-wrap exactly (max-width 1080 / padding 0 20px) so the two
   rows' edges line up. It is a SEPARATE section — NOT merged into the badges.
   NB: the theme pins `h2 { font-size: 2.1em !important }` near the top of this
   file, so the heading size needs !important here or it is silently ignored. */
.bs-home-intro { max-width: 1080px; margin: 20px auto; padding: 0 20px; }
.bs-home-intro__card {
	background: #fff;
	border: 1px solid #ECE6DB;
	border-radius: 3px;
	box-shadow: 0 2px 10px rgba(122, 117, 113, 0.08);
	padding: 32px 40px;
	text-align: center;
}
.bs-home-intro h2 {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 32px !important;
	color: #1F1E1D;
	margin: 0 0 12px;
}
.bs-home-intro p { color: #5B5752; font-size: 16px; line-height: 1.7; max-width: 780px; margin: 0 auto; }
@media (max-width: 1024px) {
	.bs-home-intro__card { padding: 26px 30px; }
	.bs-home-intro h2 { font-size: 26px !important; }
}
@media (max-width: 768px) {
	.bs-home-intro__card { padding: 22px 18px; }
	.bs-home-intro h2 { font-size: 20px !important; }
	.bs-home-intro p { font-size: 14.5px; }
}

/* product-page custom-sizes callout (reusable on every product) */
.bs-custom-note {
	margin: 14px 0 0;
	padding: 16px 18px;
	border: 1px solid #E4D9C2;
	background: #FBF7EF;
	border-radius: 4px;
}
.bs-custom-note h3 {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 20px;
	margin: 0 0 8px;
	color: #1F1E1D;
}
.bs-custom-note p { color: #5B5752; font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
.bs-custom-note .button {
	background: #C4A554;
	color: #1A1A1A;
	padding: 11px 20px;
	border-radius: 2px;
	text-decoration: none;
	font-weight: 600;
	display: inline-block;
}
.bs-custom-note .button:hover { background: #d8bd6f; }

/* ============================================================
   20. Homepage product grid (template-home.php)
   ============================================================ */
/* The custom home template prints [products] straight after the header, i.e.
   OUTSIDE Storefront's .site-main / .storefront-product-section wrappers.
   Storefront's own shop-grid rules are scoped to those wrappers, so every
   card fell back to its default full width => one product per row with a
   huge empty column beside it. This block restores a real 3-up grid and
   keeps the card internals (title / price / button) centred like the shop. */
.bs-products {
	max-width: 1180px;
	margin: 0 auto 70px;
	padding: 0 20px;
}
.bs-products__title {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 32px !important; /* beats the global `h2 { font-size: 2.1em !important }` */
	color: #1F1E1D;
	text-align: center;
	margin: 0 0 24px;
}
@media (max-width: 1024px) {
	.bs-products__title { font-size: 26px !important; }
}
@media (max-width: 768px) {
	.bs-products__title { font-size: 20px !important; margin-bottom: 18px; }
}
.bs-products ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 42px 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bs-products ul.products::before,
.bs-products ul.products::after { content: none; }
.bs-products ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	position: relative;
	text-align: center;
}
.bs-products ul.products li.product a.woocommerce-LoopProduct-link { display: block; }
.bs-products ul.products li.product a img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 16px;
}
.bs-products ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px;
	line-height: 1.45;
	padding: 0 0 8px;
	color: var(--bs-text);
}
.bs-products ul.products li.product .price { font-size: 14px; margin-bottom: 4px; }
.bs-products ul.products li.product .button { margin-top: .6em; }

@media (max-width: 900px) {
	.bs-products { margin-bottom: 56px; }
	.bs-products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 22px; }
}
@media (max-width: 520px) {
	.bs-products ul.products { grid-template-columns: 1fr; gap: 30px; }
}
/* 21. Contact form (Contact Us page) */
.bs-contact-form { max-width: 560px; margin: 0 auto; }
.bs-contact-form__row { margin: 0 0 16px; }
.bs-contact-form__row label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; color: #1F1E1D; }
.bs-contact-form__row input,
.bs-contact-form__row textarea { width: 100%; padding: 12px 14px; border: 1px solid #E4D9C2; border-radius: 3px; font-size: 15px; font-family: inherit; background: #fff; color: #1F1E1D; box-sizing: border-box; }
.bs-contact-form__row input:focus,
.bs-contact-form__row textarea:focus { outline: none; border-color: #C4A554; box-shadow: 0 0 0 2px rgba(196,165,84,.15); }
.bs-contact-form__submit button { background: #C4A554; color: #1F1E1D; border: none; border-radius: 3px; padding: 13px 28px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; }
.bs-contact-form__submit button:hover { background: #b6964a; }
.bs-contact-form__error { color: #b3261e; background: #fdecea; padding: 10px 14px; border-radius: 3px; margin: 0 0 16px; font-size: 14px; }
.bs-contact-form--ok { background: #eaf6ec; color: #1f6b34; padding: 16px 18px; border-radius: 3px; font-size: 15px; text-align: center; }
.bs-cf-hp { position: absolute !important; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Section 22 — FAQ page (added 1.0.46) */
.bs-faq { max-width: 760px; margin: 24px auto 0; }
.bs-faq__q { font-size: 20px; line-height: 1.35; margin: 30px 0 8px; color: #2b2723; font-weight: 600; }
.bs-faq__a { font-size: 16px; line-height: 1.75; color: #5b554e; margin: 0 0 4px; }
.bs-faq__a a { color: #9a7b4f; text-decoration: underline; }

/* ==========================================================================
   22. Custom Orders page (/custom-orders/)
   Scoped to .bs-custom-orders (wrapper lives inside the page content).
   Reuses the existing .bs-faq / .bs-contact-form blocks from sections 13 & 21.
   ========================================================================== */
.bs-custom-orders { max-width: 820px; margin: 0 auto; }
.bs-custom-orders p { font-size: 16px; line-height: 1.75; color: #5b554e; }
.bs-custom-orders .bs-co-lede { font-size: 17px; line-height: 1.75; color: #5b554e; margin: 0 0 4px; }
.bs-custom-orders h2 { font-size: 27px !important; line-height: 1.3; margin: 40px 0 14px; color: #2b2723; }
.bs-custom-orders ul,
.bs-custom-orders ol { margin: 0 0 4px; padding-left: 22px; }
.bs-custom-orders li { font-size: 16px; line-height: 1.75; color: #5b554e; margin-bottom: 9px; }
.bs-custom-orders b,
.bs-custom-orders strong { color: #2b2723; }
.bs-custom-orders a { color: #9a7b4f; text-decoration: underline; }

/* Numbered "how it works" steps */
.bs-custom-orders .bs-co-steps { list-style: none; counter-reset: bsco; margin: 0 0 4px; padding: 0; }
.bs-custom-orders .bs-co-steps > li {
	position: relative;
	counter-increment: bsco;
	padding: 15px 18px 15px 58px;
	margin: 0 0 12px;
	border: 1px solid #ECE6DB;
	border-radius: 3px;
	background: #FDFBF7;
}
.bs-custom-orders .bs-co-steps > li::before {
	content: counter(bsco);
	position: absolute;
	left: 17px;
	top: 15px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #9a7b4f;
	color: #fff;
	font-size: 14px;
	line-height: 26px;
	font-weight: 600;
	text-align: center;
}
.bs-custom-orders .bs-contact-form { margin: 18px auto 0; }
.bs-custom-orders .bs-faq { max-width: 100%; margin: 6px 0 0; }

@media (max-width: 768px) {
	.bs-custom-orders h2 { font-size: 23px !important; margin: 32px 0 12px; }
	.bs-custom-orders .bs-co-lede { font-size: 16px; }
	.bs-custom-orders .bs-co-steps > li { padding: 14px 14px 14px 52px; }
	.bs-custom-orders .bs-co-steps > li::before { left: 14px; top: 14px; }
}

/* 23. Contact Form 7 — replaces bespoke contact form (matches site tokens) */
.wpcf7-form { max-width: 560px; margin: 0 auto; }
.wpcf7-form p { margin: 0 0 16px; }
.wpcf7-form label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; color: #1F1E1D; }
.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit) {
	width: 100%; padding: 12px 14px; border: 1px solid #E4D9C2; border-radius: 3px;
	font-size: 15px; font-family: inherit; background: #fff; color: #1F1E1D; box-sizing: border-box;
}
.wpcf7-form textarea.wpcf7-form-control { min-height: 150px; resize: vertical; }
.wpcf7-form .wpcf7-form-control:focus {
	outline: none; border-color: #C4A554; box-shadow: 0 0 0 2px rgba(196,165,84,.15);
}
.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit {
	background: #C4A554; color: #1F1E1D; border: none; border-radius: 3px;
	padding: 13px 28px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form .wpcf7-submit:hover { background: #b6964a; }
.wpcf7-not-valid-tip { color: #b3261e; font-size: 13px; margin-top: 4px; display: block; }
.wpcf7 form .wpcf7-response-output {
	margin: 16px 0 0; padding: 12px 14px; border-radius: 3px; font-size: 14px; border-width: 1px;
}
.wpcf7 form.invalid .wpcf7-response-output { color: #b3261e; border-color: #b3261e; background: #fdecea; }
.wpcf7 form.sent .wpcf7-response-output { color: #1a7f37; border-color: #1a7f37; background: #eaf7ee; }
.wpcf7-form .wpcf7-file { padding: 10px 0; }
.wpcf7-form .wpcf7-file input[type="file"] { width: auto; border: none; padding: 0; background: transparent; }

/* ==========================================================================
   25. Unified page rhythm (2026-10-04)
   Reference layout, taken from the Shop / product-archive pages:
     - breadcrumb and body text sit on the container left edge (188px at 1440)
     - the page title (H1) is centred above them
   Before this section the Custom Orders body was an 820px centred column
   (indented 122px vs. the breadcrumb), and every regular page had a
   left-aligned H1. Product detail pages are excluded on purpose: their H1
   lives inside the summary column, so centring it would break the layout.
   ========================================================================== */
.page .entry-header,
.page .entry-title,
.page .page-title { text-align: center; }

/* Custom Orders: fill the container instead of the 820px centred column,
   so the body starts on the same left edge as the breadcrumb. */
.page-id-36 .bs-custom-orders { max-width: none; margin-left: 0; margin-right: 0; text-align: left; }
/* ============================================================================
   26. SPACING TIGHTENING (Oliver 2026-10-06)
   Replaces Storefront's loose vertical gaps on shop/archive + all pages.
   Values are px overrides measured at the 16px base; child theme loads after
   the parent so plain selectors win without !important.
   Net target gaps (numbered per Oliver's screenshot):
     ① header -> breadcrumb       = keep 22.65 (unchanged)
     ② breadcrumb -> H1           = 40   (was 81.9)
     ③ H1 -> sorting bar          = 40   (was 95.9)
     ④ sorting bar -> first row   = 30   (was 36.7)
     ⑤ product card row gap       = 30   (was 59.3)
     ⑥ content -> footer          = 40   (was 83.7)
   ----------------------------------------------------------------------------
   ②: .storefront-breadcrumb has padding:1.41575em 0 (top&bottom 22.65) +
      margin-bottom 59.30. ① (padding-top 22.65) is left untouched; only the
      bottom margin is trimmed so 22.65 + 17.35 = 40.
   ========================================================================== */
.storefront-breadcrumb {
	margin-bottom: 17.35px;
}

/* ③ H1 -> sorting bar on shop / archive headers.
   Parent sets this inside a @media block, so a plain override loses;
   !important is required to beat it. */
.woocommerce-products-header,
header.woocommerce-products-header {
	padding-bottom: 40px !important;
}

/* ④ sorting bar -> first product row */
.storefront-sorting {
	margin-bottom: 30px;
}

/* ⑤ product card vertical row gap (shop + archives) */
.woocommerce ul.products li.product {
	margin-bottom: 30px;
}

/* ⑥ content -> footer.
   The last element before the footer is either the bottom sorting bar
   (archives, margin 30 from ④) or .hentry (regular pages). The whitespace
   above the footer = that last margin (30) + .content-area margin. Setting
   .content-area margin-bottom to 10 makes it 30+10 = 40 on every page.
   Storefront's default .hentry margin is ~67px — capped to 30 so regular
   pages match the archives. (.site-main margin is above, not below, so it
   does not add to this gap.) */
.site-main {
	margin-bottom: 20px;
}
.content-area {
	margin-bottom: 10px;
}
.hentry {
	margin-bottom: 30px;
}

/* ⑥b (Oliver 2026-10-06) single-product: related / up-sells -> footer = 40.
   On single product pages the last flow element before .site-footer is
   .related.products (margin 0), so content -> footer collapses to just
   .content-area's 10px. Give it 30px so 30 + 10 = 40, matching archives. */
.single-product .related.products,
.single-product .up-sells.products {
	margin-bottom: 30px;
}

/* ⑥b-cont (Oliver 2026-10-06) zero .site-main bottom margin on single
   product pages. Storefront stacks container margins additively (content-area
   has padding, so child/site-main margins do not collapse). Baseline there
   = .site-main(20) + .content-area(10) = 30; with .related(30) that made 60.
   Zeroing .site-main here (higher specificity) gives related(30) + 10 = 40,
   matching shop/archive pages. */
.single-product .site-main {
	margin-bottom: 0;
}

/* ============================================================
   27. Product pages / cards (Oliver 2026-10-06)
   ============================================================ */

/* (2) Hide the "N in stock" availability line on the variable
   single-product page (Oliver: no need to display stock). */
.single-product .woocommerce-variation-availability {
	display: none;
}

/* (3) Left-align product-card titles on shop / archives / related /
   up-sells (they were centred via the card's inherited text-align). */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	text-align: left;
}

/* ============================================================
   28. Single product — discount badge + tightened gaps (Oliver 2026-10-06)
   (1) Title -> price/badge = 20px (was 37); price/badge -> short
       description = 20px (was 37).
   (2) .bs-sale-badge replaces the variable-product price range
       (rendered by bespora_sale_badge() in functions.php).
   ============================================================ */
.single-product .product_title {
	margin-bottom: 20px;
}
.single-product .summary > .price {
	margin-top: 0;
	margin-bottom: 20px;
}
/* 28c (Oliver 2026-10-07) The badge is now a flex row so the rolling
   "Sale ends in" countdown sits on the same line, right of the badge.
   The gold chip itself became .bs-sale-badge__off. */
.single-product .bs-sale-badge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
}
.single-product .bs-sale-badge__off {
	display: inline-block;
	padding: 6px 14px;
	background: #C4A554;
	color: #1A1A1A;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: 3px;
	white-space: nowrap;
}
.single-product .bs-promo-timer {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 5px 12px;
	background: #FBF8F2;
	border: 1px solid #E4D9C3;
	border-radius: 3px;
	font-size: 12px;
	line-height: 1.2;
	color: #7A6642;
	white-space: nowrap;
}
.single-product .bs-promo-timer__label {
	text-transform: none;
	letter-spacing: 0;
}
.single-product .bs-promo-timer__clock {
	font-weight: 700;
	color: #1A1A1A;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
}

/* 28b (Oliver 2026-10-06) Boost the single-product price margin override.
   Storefront ships `.single-product div.product p.price { margin: 0 0
   2.617924em }` (higher specificity than the rule in section 28), which
   kept the title->price gap at 37px on simple products. This selector
   wins so the gap becomes exactly 20px, matching the badge on variable
   products. */
.single-product div.product .summary > p.price {
	margin-top: 0 !important;
	margin-bottom: 20px !important;
}

/* ============================================================
   29. Mobile / tablet fixes (Oliver 2026-10-06)
   ============================================================ */

/* (1) Subscription re-open launcher (bottom-left chip). Storefront's
   handheld footer bar is fixed at bottom:0, 69px tall, and visible up to
   1024px (phones AND tablets). The launcher must sit ABOVE it (and clear the
   iOS home indicator) so it never covers the bottom menu. The 640px phone
   rule above already raises bottom; this covers 641-1024px tablets. */
@media (max-width: 1024px) {
	.bs-nl-chip {
		/* Clears both the 69px Storefront handheld footer bar AND the 150px-tall
	   Google Customer Reviews badge (full-width at the bottom on phones). */
	bottom: calc(env(safe-area-inset-bottom, 0px) + 175px);
	}
}

/* (2) Single-product title is forced to 43.98px by the global h1 type scale
   (section 1, line 91) at EVERY width, which overwhelms a phone screen.
   Shrink it on phones/large phones; tablet+ keeps the desktop size. */
@media (max-width: 768px) {
	.single-product .product_title {
		font-size: 25px !important;
		line-height: 1.2 !important;
	}
}

/* 29. Nameplate engraving char counter */
.bs-eng-count {
	display: block;
	font-size: 12px;
	color: #888;
	margin: 4px 0 0;
}
.bs-eng-count.bs-full {
	color: #c0392b;
	font-weight: 600;
}

/* 30. Tawk.to — hide the proactive greeting card + quick-reply buttons.
   #message-preview is a 335x273px overlay on phones (and 360x252 on desktop)
   that covers page content (carousel, headings). Keep only the launcher bubble. */
#message-preview {
	display: none !important;
}

/* 31. Quantity unit label (single product page).
   Rendered by bespora_qty_unit_label() via WC's
   woocommerce_after_quantity_input_field hook, i.e. inside the
   floated .quantity wrapper right after the number input. */
.single-product div.product form.cart .quantity .bespora-qty-unit {
	display: inline-block;
	margin-left: 7px;
	font-size: .8em;
	line-height: 1;
	color: #7A736A;
	font-weight: 400;
	letter-spacing: .01em;
	vertical-align: middle;
	white-space: nowrap;
}

/* ============================================================
   13. Mobile / tablet product summary reorder (<=1024px)
   ------------------------------------------------------------
   Why: on narrow screens the gallery sits above the summary, so if the
   variation selector is below the title + short description, the shopper
   has scrolled past the image by the time they pick a variant and never
   sees the image swap. Reordering with flex `order` keeps the DOM and
   the WooCommerce variation form untouched (no JS risk) while putting
   the selector right under the title.

   Desktop (>1024px) is intentionally untouched.
   ============================================================ */
@media (max-width: 1024px) {

	.single-product div.product .summary {
		display: flex;
		flex-direction: column;
	}

	/* everything not listed below drops to the end, keeping DOM order */
	.single-product div.product .summary > * {
		order: 9;
	}

	.single-product div.product .summary > .product_title { order: 1; }
	.single-product div.product .summary > .bs-sale-badge { order: 2; }
	.single-product div.product .summary > .price { order: 3; }
	.single-product div.product .summary > form.cart { order: 4; }
	.single-product div.product .summary > .woocommerce-product-details__short-description { order: 5; }

	/* keep the folded excerpt from touching the selector above it */
	.single-product div.product .summary > form.cart { margin-bottom: .6em; }
	.single-product div.product .summary > .woocommerce-product-details__short-description { margin-top: .2em; }
}

/* ============================================================
   14. Mobile gallery thumbnails -> dot indicators (<=1024px)
   ------------------------------------------------------------
   The 5-column thumbnail grid eats a big chunk of the first screen on
   phones. On narrow screens we turn the FlexSlider thumbnail strip into
   a compact row of dots: the <img> is kept in place (only made
   transparent) so the slider click handlers keep working untouched.
   Desktop keeps the real thumbnails.
   ============================================================ */
@media (max-width: 1024px) {

	.single-product .woocommerce-product-gallery .flex-control-thumbs {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 7px;
		margin: 10px 0 0 !important;
		padding: 0 !important;
		list-style: none !important;
		overflow: visible !important;
	}

	.single-product .woocommerce-product-gallery .flex-control-thumbs li {
		width: 7px !important;
		min-width: 7px !important;
		max-width: 7px !important;
		height: 7px !important;
		min-height: 7px !important;
		float: none !important;
		flex: 0 0 7px !important;
		margin: 0 !important;
		padding: 0 !important;
		border-radius: 50%;
		overflow: hidden;
		background: #D6D0C4;
		cursor: pointer;
		transition: background .15s ease, transform .15s ease;
	}

	.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		opacity: 0 !important;   /* keep clickable, hide the picture */
	}

	.single-product .woocommerce-product-gallery .flex-control-thumbs li.flex-active {
		background: #1F1E1D;
		transform: scale(1.25);
	}

	.single-product .woocommerce-product-gallery .flex-control-thumbs li:hover {
		background: #8C8578;
	}
}

/* ============================================================
   15. Tighten summary spacing on narrow screens (<=1024px)
   ------------------------------------------------------------
   The reorder in section 13 turned .summary into a flex column, so
   vertical margins no longer collapse - the 20px blocks (title, badge,
   price) now add up instead of overlapping. Tighten them here.
   Desktop keeps its original rhythm.
   ============================================================ */
@media (max-width: 1024px) {

	.single-product .product_title {
		margin-bottom: 10px !important;
	}

	.single-product .bs-sale-badge {
		margin: 0 0 12px !important;
		gap: 8px !important;
	}

	.single-product .summary > .price {
		margin-top: 0 !important;
		margin-bottom: 10px !important;
	}

	.single-product div.product form.cart {
		margin-top: 0 !important;
		margin-bottom: 10px !important;
	}

	.single-product div.product form.cart .variations {
		margin-bottom: 8px !important;
	}

	.single-product div.product form.cart .woocommerce-variation-add-to-cart {
		margin-top: 10px !important;
	}

	/* gallery bottom gap + dot strip */
	.single-product .woocommerce-product-gallery {
		margin-bottom: 6px !important;
	}

	.single-product .woocommerce-product-gallery .flex-control-thumbs {
		margin-top: 6px !important;
	}
}

/* ============================================================
   16. Kill residual inner margins in the variation form (<=1024px)
   ------------------------------------------------------------
   Storefront ships 2em / 1em margins on .variations, .single_variation_wrap
   and .woocommerce-variation. Inside a flex column those never collapse, so
   every wrapper contributes its own gap and the form looks airy on phones.
   Reset them all, then add back only the rhythm we actually want.
   ============================================================ */
@media (max-width: 1024px) {

	.single-product div.product form.cart {
		margin-top: 0 !important;
		margin-bottom: 8px !important;
	}

	.single-product div.product form.cart .variations,
	.single-product div.product form.cart .variations tbody,
	.single-product div.product form.cart .variations tr,
	.single-product div.product form.cart .variations td,
	.single-product div.product form.cart .single_variation_wrap,
	.single-product div.product form.cart .woocommerce-variation,
	.single-product div.product form.cart .woocommerce-variation-price,
	.single-product div.product form.cart .woocommerce-variation-availability,
	.single-product div.product form.cart .woocommerce-variation-description {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.single-product div.product form.cart .variations {
		margin-bottom: 6px !important;
	}

	.single-product div.product form.cart .woocommerce-variation-price {
		margin-bottom: 6px !important;
	}

	.single-product div.product form.cart .woocommerce-variation-add-to-cart {
		margin-top: 6px !important;
		padding-top: 0 !important;
	}

	/* badge -> form gap */
	.single-product .bs-sale-badge {
		margin-bottom: 10px !important;
	}

	/* excerpt below the form */
	.single-product .summary > .woocommerce-product-details__short-description {
		margin-top: 4px !important;
	}
}

/* ============================================================
   17. Close the gaps around the custom-quote callout (<=1024px)
   ------------------------------------------------------------
   .summary still carries Storefront padding-bottom, and the callout sits
   right after the PayPal wrapper. Reset both, then set a single rhythm
   between: PayPal -> callout -> Quick Answers.
   ============================================================ */
@media (max-width: 1024px) {

	.single-product div.product .summary {
		padding-bottom: 0 !important;
		margin-bottom: 10px !important;
	}

	.single-product .summary > .ppc-button-wrapper {
		margin-bottom: 10px !important;
	}

	.single-product .bs-custom-note {
		margin: 10px 0 0 !important;
	}

	.single-product .bespora-related-guides {
		margin: 10px 0 !important;
	}

	.single-product .bespora-answer-first {
		margin: 10px 0 !important;
	}

	.single-product .woocommerce-tabs {
		margin-top: 10px !important;
	}
}

/* ============================================================
   18. Pin the sale badge onto the gallery (<=1024px)
   ------------------------------------------------------------
   The WooCommerce .onsale span is the first child of div.product, so in
   the single-column mobile layout it takes a whole row above the image.
   Pin it to the top-left corner of the gallery instead - no extra height.
   ============================================================ */
@media (max-width: 1024px) {

	.single-product div.product {
		position: relative;
	}

	.single-product div.product > span.onsale {
		position: absolute !important;
		top: 8px !important;
		left: 8px !important;
		z-index: 9;
		margin: 0 !important;
		text-transform: uppercase;
		letter-spacing: .04em;
		box-shadow: 0 1px 5px rgba(0, 0, 0, .14);
		background-color: var(--bs-accent) !important;
		color: var(--bs-label) !important;
	}
}

/* ============================================================
   19. Last padding pass after ?box=1 measurement (<=1024px)
   ------------------------------------------------------------
   Measured on a real phone:
     form.cart              padding 16 / 16   <- biggest remaining gap
     .bespora-answer-first  padding 18 / 18
     .woocommerce-tabs      padding 16 / 16
   All margins were already 6-10px, so the leftover air is padding.
   ============================================================ */
@media (max-width: 1024px) {

	/* only touch vertical padding - horizontal stays as designed */
	.single-product div.product form.cart {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}

	.single-product .bespora-answer-first {
		padding-top: 14px !important;
		padding-bottom: 14px !important;
	}

	.single-product .woocommerce-tabs {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}
}

/* ============================================================
   20. Hide the empty PayPal reCAPTCHA placeholder
   ------------------------------------------------------------
   PPCP prints <div id="ppcp-recaptcha-v2-container" style="margin:20px 0">
   right after the PayPal button. When reCAPTCHA v2 is not in use the div
   stays empty but its inline 20px top+bottom margin still reserves 40px -
   that was the gap between "Pay with PayPal" and the custom-quote callout.
   `:empty` keeps it safe: if the container ever gets content we leave it alone.
   ============================================================ */
#ppcp-recaptcha-v2-container:empty {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

@media (max-width: 1024px) {

	.single-product .summary > .ppc-button-wrapper {
		margin-bottom: 8px !important;
	}

	.single-product .bs-custom-note {
		margin-top: 8px !important;
	}
}

/* never render an empty unit label */
.single-product div.product form.cart .quantity .bespora-qty-unit:empty {
	display: none !important;
}