/* ==========================================================================
   Bottle Gases visual polish pass, 2026-05-27.

   Purpose: improve button visibility, touch targets, stock-page titles and
   sticky-toolbar spacing without replacing Woodmart/WooCommerce behaviour.
   ========================================================================== */

:root {
	--bg-vp-navy: #0e2a4d;
	--bg-vp-navy-deep: #081f3a;
	--bg-vp-amber: #fa9f03;
	--bg-vp-amber-deep: #e08a00;
	--bg-vp-cream: #fff7e9;
	--bg-vp-line: #e3d6bf;
	--bg-vp-ink: #101828;
}

/* Stock/utility pages where Woodmart's page-title block is currently absent. */
.bg-stock-page-title {
	background: linear-gradient(180deg, #fffaf0 0%, #f7f8fb 100%);
	border-bottom: 1px solid rgba(227, 214, 191, 0.72);
}

.bg-stock-page-title__inner {
	width: min(1320px, calc(100% - 48px));
	margin-inline: auto;
	padding: clamp(28px, 5vw, 58px) 0 clamp(22px, 4vw, 42px);
}

.bg-stock-page-title h1 {
	margin: 0;
	color: var(--bg-vp-ink);
	font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: clamp(34px, 5vw, 58px);
	font-weight: 900;
	line-height: 1.04;
	letter-spacing: 0;
}

/* Editorial variant (blog index) — kicker + lede above/below the H1.
 * Borrows the editorial-hero rhythm without dragging the full .bgp-template
 * chrome into the Woodmart archive page. */
.bg-stock-page-title--editorial {
	background:
		radial-gradient(circle at 92% 12%, rgba(250, 159, 3, 0.08), transparent 36rem),
		linear-gradient(180deg, #fffaf0 0%, #fbf7ec 32%, #ffffff 100%);
	border-bottom: 1px solid rgba(227, 214, 191, 0.72);
}

.bg-stock-page-title__kicker {
	display: block;
	margin-bottom: 14px;
	color: var(--bg-vp-amber-deep);
	font-family: Manrope, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.bg-stock-page-title--editorial h1 {
	font-family: Anton, "Bebas Neue", Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(48px, 6.5vw, 88px);
	line-height: 1;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: #08203C;
}

.bg-stock-page-title__lede {
	max-width: 720px;
	margin: 18px 0 0;
	color: #475569;
	font-family: Manrope, system-ui, sans-serif;
	font-size: clamp(15px, 1.1vw, 17px);
	font-weight: 500;
	line-height: 1.5;
}

body.page-id-5311 .wpb-content-wrapper > .vc_row:first-child {
	display: none !important;
}

body.page-id-5311 main.content-layout-wrapper {
	padding-top: 28px;
}

/* Mobile/header controls: keep Woodmart layout, enlarge only the hit area. */
@media (max-width: 767px) {
	.whb-header .wd-tools-element > a,
	.whb-header .wd-header-mobile-nav > a,
	.whb-header .wd-header-search > a,
	.whb-header .wd-search-form .searchsubmit {
		min-width: 44px;
		min-height: 44px;
	}
}

/* ----- Header ajax search dropdown — sit above the sticky orange nav -----
 *
 * Stacking-context root: Woodmart's .whb-main-header has z-index: 390 with
 * backface-visibility: hidden, creating an isolated stacking context. Inside
 * it, the white top row (.whb-general-header) and the sticky orange bottom
 * row (.whb-header-bottom.whb-sticky-row) are siblings — both at default
 * z-index: auto. With identical z-index they paint in DOM order, so the
 * orange row renders ON TOP of any dropdown emerging from the white row
 * above it. Setting z-index on the search dropdown itself (10082) makes it
 * high WITHIN the general-header context, but useless against the
 * sibling orange row which is in a different context.
 *
 * Fix: assign explicit z-indexes to both rows so the white row's stacking
 * context wins. Search dropdown then beats the orange row outright. The
 * mega-menu dropdowns inside the orange row still beat page content (they
 * extend BELOW the header, where there's nothing else to stack against),
 * so this doesn't break those.
 */

.whb-header .whb-row.whb-general-header {
	position: relative;
	z-index: 11;
}

.whb-header .whb-row.whb-header-bottom {
	position: relative;
	z-index: 10;
}

.whb-header .wd-search-form,
.whb-header .wd-header-search-form,
.whb-header .wd-header-search-form-mobile {
	position: relative;
	z-index: 10080;
}

.whb-header .wd-search-results,
.whb-header .wd-dropdown-results,
.whb-header .wd-search-results-wrapper {
	z-index: 10081 !important;
}

.whb-header .wd-search-results.wd-opened,
.whb-header .wd-dropdown-results.wd-opened {
	z-index: 10082 !important;
}

/* Shared bgp focus and pill treatment. */
.bgp-template a:focus-visible,
.bgp-template button:focus-visible,
.bgp-template summary:focus-visible,
.bgp-template input:focus-visible,
.bgp-template select:focus-visible {
	outline: 3px solid rgba(250, 159, 3, 0.48);
	outline-offset: 3px;
}

.bgp-template .bgp-pill {
	min-height: 42px;
	padding: 9px 14px;
	background: #ffffff;
	border-color: rgba(14, 42, 77, 0.24);
	color: var(--bg-vp-navy-deep) !important;
	box-shadow: 0 12px 24px -22px rgba(8, 31, 58, 0.72);
	transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.bgp-template .bgp-pill:hover,
.bgp-template .bgp-pill:focus-visible {
	background: var(--bg-vp-amber);
	border-color: var(--bg-vp-amber);
	color: var(--bg-vp-navy-deep) !important;
	transform: translateY(-1px);
}

#bg-home .bg-home-btn--ghost {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--bg-vp-navy-deep);
	box-shadow: 0 16px 30px rgba(8, 31, 58, 0.16);
}

#bg-home .bg-home-btn--ghost:hover,
#bg-home .bg-home-btn--ghost:focus-visible {
	background: var(--bg-vp-amber);
	border-color: var(--bg-vp-amber);
	color: var(--bg-vp-navy-deep);
}

/* Product-card action normalization. Selectors preserve Woodmart/plugin classes. */
.bgp-template .wd-product .button,
.bgp-template .wd-product .add_to_cart_button,
.bgp-template .wd-product .product_type_variable,
.bgp-template .wd-product .pisol-shipping-calculator-button,
.bgp-template .pisol-shipping-calculator-button,
.woocommerce.tax-product_cat .wd-product .button,
.woocommerce.tax-product_cat .wd-product .add_to_cart_button,
.woocommerce.tax-product_cat .wd-product .product_type_variable,
.woocommerce.tax-product_cat .wd-product .pisol-shipping-calculator-button,
.woocommerce.tax-product_cat .wd-product.wd-hover-buttons-on-hover .product-element-bottom .pisol-woocommerce-shipping-calculator .pisol-shipping-calculator-button,
#bg-home .bg-home-product__cart.button,
#bg-home .wd-product .button,
#bg-home .wd-product .add_to_cart_button,
#bg-home .wd-product .product_type_variable,
#bg-home .wd-product .pisol-shipping-calculator-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 44px !important;
	padding: 0 18px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--bg-vp-amber) !important;
	background-color: var(--bg-vp-amber) !important;
	color: var(--bg-vp-navy-deep) !important;
	font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: 14px !important;
	font-weight: 900 !important;
	line-height: 1.15 !important;
	text-align: center;
	text-decoration: none !important;
	text-transform: none !important;
	box-shadow: 0 14px 26px -22px rgba(224, 138, 0, 0.9);
}

.bgp-template .wd-product .button:hover,
.bgp-template .wd-product .add_to_cart_button:hover,
.bgp-template .wd-product .product_type_variable:hover,
.bgp-template .wd-product .pisol-shipping-calculator-button:hover,
.bgp-template .pisol-shipping-calculator-button:hover,
.woocommerce.tax-product_cat .wd-product .button:hover,
.woocommerce.tax-product_cat .wd-product .add_to_cart_button:hover,
.woocommerce.tax-product_cat .wd-product .product_type_variable:hover,
.woocommerce.tax-product_cat .wd-product .pisol-shipping-calculator-button:hover,
.woocommerce.tax-product_cat .wd-product.wd-hover-buttons-on-hover .product-element-bottom .pisol-woocommerce-shipping-calculator .pisol-shipping-calculator-button:hover,
#bg-home .bg-home-product__cart.button:hover,
#bg-home .wd-product .button:hover,
#bg-home .wd-product .add_to_cart_button:hover,
#bg-home .wd-product .product_type_variable:hover,
#bg-home .wd-product .pisol-shipping-calculator-button:hover {
	background: var(--bg-vp-amber-deep) !important;
	background-color: var(--bg-vp-amber-deep) !important;
	color: var(--bg-vp-navy-deep) !important;
}

.bgp-template .wd-product .pisol-shipping-calculator-button,
.woocommerce.tax-product_cat .wd-product .pisol-shipping-calculator-button,
#bg-home .wd-product .pisol-shipping-calculator-button {
	width: 100%;
	margin-top: 8px;
}

/* Mobile rhythm: compact trust rows and leave room for Woodmart toolbar. */
@media (max-width: 760px) {
	body.sticky-toolbar-on {
		padding-bottom: calc(74px + env(safe-area-inset-bottom));
	}

	.bgp-template {
		padding-bottom: calc(74px + env(safe-area-inset-bottom));
	}

	.bgp-template .bgp-trustline {
		display: none;
	}

	.bgp-template .bgp-category-hero__copy,
	.bgp-template .bgp-usecase-copy {
		padding-bottom: 10px;
	}

	.bgp-template .bgp-pill {
		min-height: 44px;
	}

	#bg-home {
		padding-bottom: calc(74px + env(safe-area-inset-bottom));
	}

	#bg-home .bg-home-hero__copy {
		min-height: auto;
		padding-bottom: 18px;
	}

	#bg-home .bg-home-hero__trust {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		margin-top: 18px;
	}

	#bg-home .bg-home-hero__trust span {
		min-height: 46px;
		padding: 9px 10px;
		font-size: 12px;
	}
}

/* ============================ POLICY PAGES ===============================
 * Typography pass for the long-form legal pages — Terms & Conditions
 * (page 6438) and Privacy Policy (page 3). Default Woodmart styling renders
 * them as edge-to-edge walls of Manrope at body weight, which is hard to
 * scan and inconsistent with the editorial chrome on the rest of the site.
 *
 * Targets the standard WP/WC body classes so it works for any future
 * /returns/ or /cookie-policy/ page that gets the same `.page-template-default`
 * + a `policy-` body class — see helper rule below.
 * ======================================================================== */

body.page-id-6438 .wd-entry-content,
body.privacy-policy .wd-entry-content,
body.bg-policy-page .wd-entry-content {
	/* Constrain the reading column so 60-75 chars fits a line at body size. */
	max-width: 760px;
	margin-inline: auto;
}

body.page-id-6438 .wd-entry-content h1,
body.privacy-policy .wd-entry-content h1,
body.bg-policy-page .wd-entry-content h1 {
	margin-top: 0;
	margin-bottom: 18px;
	font-family: Anton, "Bebas Neue", Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(40px, 5vw, 64px);
	line-height: 1.02;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: #08203C;
}

body.page-id-6438 .wd-entry-content h2,
body.privacy-policy .wd-entry-content h2,
body.bg-policy-page .wd-entry-content h2 {
	position: relative;
	margin-top: 56px;
	margin-bottom: 14px;
	padding-top: 22px;
	border-top: 1px solid rgba(8, 32, 60, 0.10);
	color: #08203C;
	font-family: Manrope, system-ui, sans-serif;
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

body.page-id-6438 .wd-entry-content h2:first-of-type,
body.privacy-policy .wd-entry-content h2:first-of-type,
body.bg-policy-page .wd-entry-content h2:first-of-type {
	margin-top: 40px;
}

body.page-id-6438 .wd-entry-content h3,
body.privacy-policy .wd-entry-content h3,
body.bg-policy-page .wd-entry-content h3 {
	margin-top: 32px;
	margin-bottom: 10px;
	color: #1F2235;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
}

body.page-id-6438 .wd-entry-content p,
body.page-id-6438 .wd-entry-content li,
body.privacy-policy .wd-entry-content p,
body.privacy-policy .wd-entry-content li,
body.bg-policy-page .wd-entry-content p,
body.bg-policy-page .wd-entry-content li {
	color: #1F2235;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.7;
}

body.page-id-6438 .wd-entry-content a:not(.btn):not(.bgp-pill),
body.privacy-policy .wd-entry-content a:not(.btn):not(.bgp-pill),
body.bg-policy-page .wd-entry-content a:not(.btn):not(.bgp-pill) {
	color: #08203C;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(8, 32, 60, 0.36);
	transition: text-decoration-color 160ms ease, color 160ms ease;
}

body.page-id-6438 .wd-entry-content a:hover,
body.privacy-policy .wd-entry-content a:hover,
body.bg-policy-page .wd-entry-content a:hover {
	color: #FA9F03;
	text-decoration-color: #FA9F03;
}

body.page-id-6438 .wd-entry-content ul,
body.privacy-policy .wd-entry-content ul,
body.bg-policy-page .wd-entry-content ul {
	padding-left: 1.2em;
}

body.page-id-6438 .wd-entry-content ul li + li,
body.privacy-policy .wd-entry-content ul li + li,
body.bg-policy-page .wd-entry-content ul li + li {
	margin-top: 6px;
}

/* Top of page — give the H1 some breathing room above without dragging
 * Woodmart's stock page-title bar into the layout. */
body.page-id-6438 main.content-layout-wrapper,
body.privacy-policy main.content-layout-wrapper,
body.bg-policy-page main.content-layout-wrapper {
	padding-top: clamp(28px, 4vw, 56px);
}

/* ============================ UTILITY PAGES ==============================
 * My Account / Wishlist / Compare. The bg-stock-page-title editorial banner
 * (Anton H1 + kicker + lede) renders above each — these rules style the
 * empty states and form chrome BELOW the banner so the surfaces feel
 * branded instead of stock-Woodmart-grey.
 * ======================================================================== */

/* Soft cream wash on all three utility pages — matches the editorial banner
 * background so the body doesn't snap back to flat white. */
body.woocommerce-account,
body.page-id-4226,
body.page-id-28 {
	background: #fafbfc;
}

/* My Account — login + register columns. Add card chrome. */
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register,
body.woocommerce-account .u-column1.col-1,
body.woocommerce-account .u-column2.col-2 {
	background: #fff;
	border: 1px solid rgba(8, 32, 60, 0.08);
	border-radius: 12px;
	padding: clamp(20px, 3vw, 32px);
	box-shadow: 0 12px 28px -22px rgba(8, 32, 60, 0.20);
}

body.woocommerce-account .wd-login-title,
body.woocommerce-account .woocommerce-form-login .form-row label,
body.woocommerce-account .woocommerce-form-register .form-row label {
	color: #08203C;
}

body.woocommerce-account .wd-login-title {
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 800;
	font-size: 20px;
	letter-spacing: 0;
	text-transform: none;
}

/* Empty-state polish — wishlist + compare share the same .wd-empty-block
 * pattern. Centre the message, give it a calm background card, and tighten
 * the CTA button so it inherits the brand orange. */
body .wd-empty-block.wd-empty-wishlist,
body .wd-empty-block.wd-empty-compare {
	max-width: 640px;
	margin: clamp(32px, 5vw, 64px) auto;
	padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 48px);
	background: #fff;
	border: 1px solid rgba(8, 32, 60, 0.08);
	border-radius: 14px;
	box-shadow: 0 18px 40px -28px rgba(8, 32, 60, 0.22);
	text-align: center;
}

body .wd-empty-block.wd-empty-wishlist .wd-empty-block-title,
body .wd-empty-block.wd-empty-compare .wd-empty-block-title,
body .wd-empty-block.wd-empty-wishlist h2,
body .wd-empty-block.wd-empty-compare h2 {
	margin: 0 0 10px;
	color: #08203C;
	font-family: Anton, "Bebas Neue", Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.04;
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

body .wd-empty-block.wd-empty-wishlist p,
body .wd-empty-block.wd-empty-compare p {
	color: #475569;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

body .wd-empty-block.wd-empty-wishlist .btn,
body .wd-empty-block.wd-empty-compare .btn,
body .wd-empty-block.wd-empty-wishlist .button,
body .wd-empty-block.wd-empty-compare .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 18px;
	padding: 13px 22px;
	background: #FA9F03;
	border: 0;
	border-radius: 8px;
	color: #08203C;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 180ms ease, transform 180ms ease;
}

body .wd-empty-block.wd-empty-wishlist .btn:hover,
body .wd-empty-block.wd-empty-compare .btn:hover,
body .wd-empty-block.wd-empty-wishlist .button:hover,
body .wd-empty-block.wd-empty-compare .button:hover {
	background: #e08a00;
	transform: translateY(-1px);
}