/*!
Theme Name: DTH BYD
Theme URI: https://dthmedia.com.au/
Author: DTH Media
Author URI: https://dthmedia.com.au/
Description: DTH-owned block theme (FSE) for the BYD dealer asset portal. Replaces the Kadence Pro stack with core WordPress block templates and core WooCommerce blocks. Faithful reproduction of the live storefront, owned outright by DTH Media with no third-party theme licences.
Version: 0.7.1
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dth-byd
Tags: full-site-editing, block-templates, woocommerce
*/

/* -------------------------------------------------------------------------
 * Header — utility (account) menu, top-right.
 * ---------------------------------------------------------------------- */
.dth-header__utility {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

.dth-account-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 1.5rem;
}

.dth-account-menu__item a {
	color: var(--wp--preset--color--dark);
	text-transform: uppercase;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.dth-account-menu__item a:hover {
	color: var(--wp--preset--color--primary);
}

/* -------------------------------------------------------------------------
 * Account nav — inline utility text on desktop (>1024); collapses into the
 * single off-canvas drawer on mobile/tablet (≤1024) to match live's one
 * top-left hamburger. The account links move into the .dth-mainnav drawer
 * (rendered by the same block); here we just hide the inline list and float the
 * utility row's contents to the left so the shared trigger sits top-left.
 * ---------------------------------------------------------------------- */
.dth-account-nav {
	margin: 0;
}

/* wpautop drops an empty <p> into the shortcode output; keep it from adding gaps. */
.dth-account-nav p:empty {
	display: none;
}

@media (min-width: 1025px) {
	.dth-account-nav .dth-account-menu {
		display: flex;
	}
}

@media (max-width: 1024px) {
	/* Left-align the trigger within the same constrained content width the logo
	 * row uses, so the burger sits directly above the logo at every width
	 * (both follow the theme's ~750px contentSize, not the container edge). */
	.dth-header__utility .wp-block-group {
		justify-content: flex-start;
	}

	.dth-account-menu {
		display: none;
	}
}

/* Middle row CTA reads as a solid dark pill link. */
.dth-header__cta a {
	line-height: 1.2;
}

/* -------------------------------------------------------------------------
 * Footer — centered italic copyright on the dark spacer.
 * ---------------------------------------------------------------------- */
.dth-footer__copyright,
.dth-footer__copyright p {
	text-align: center;
	margin: 0;
}

.dth-footer__copyright p {
	font-size: 14px;
	font-style: italic;
	color: var(--wp--preset--color--white);
}

/* -------------------------------------------------------------------------
 * Product archive (M3) — reproduce the Shop Kit loop card faithfully:
 * white card box with a soft drop shadow + 4px radius, dark centered title,
 * price hidden in the loop (Shop Kit hid it via CSS on the live site).
 * ---------------------------------------------------------------------- */
.dth-archive-hero {
	margin-top: 0;
}

/* SOURCE: live byd.dthmedia.com.au /product-category/1-charge-into-spring/ |
     measured @vw~1580 logged in as dealer: ul.products grid width=1242px, 4 cols,
     gap 40px, product img 281x385. Local was 750px (squished img ~172). 2026-09-13.
   Grid width parity: the archive <main> is a constrained group, so its
   contentSize (750px, theme.json) caps the un-aligned Product Collection at
   750px and squishes the 4-up images. Live Kadence runs the grid at its 1242px
   content width (1290px wrapper - 24px padding each side). Lift the collection
   to 1242px and centre it, matching live's width AND horizontal position.
   Scoped to the collection block (only rendered on the archive), so contentSize
   stays 750px for every other page. Same fix pattern as the header override
   below — the WP :where()-based constrained max-width has zero specificity, so
   this single-class rule wins without !important. */
.wp-block-woocommerce-product-collection {
	max-width: 1242px;
	margin-left: auto;
	margin-right: auto;
}

/* Each product renders as a white card with the live soft shadow. */
.wp-block-woocommerce-product-collection .wc-block-product {
	background: var(--wp--preset--color--white);
	border-radius: 4px;
	box-shadow: rgba(0, 0, 0, 0.05) 0 15px 15px -10px;
	overflow: hidden;
	padding-bottom: 1rem;
}

/* Title reads dark (not the site link blue), 17px, medium weight, centered. */
.wp-block-woocommerce-product-collection .wp-block-post-title,
.wp-block-woocommerce-product-collection .wp-block-post-title a {
	color: var(--wp--preset--color--dark);
	font-size: 17px;
	font-weight: 500;
	text-align: center;
}

/* SOURCE: live byd.dthmedia.com.au /product-category/1-charge-into-spring/ | dealer archive column cascade: 4 cols >1024 (item 281 @1440, grid 1242), 3 cols 606–1024 (item 299 @1024, 213 @768, 159 @606), live's mobile floor is 606; 2026-09-13. WooCommerce's inline block <style> sizes the columns-4 flex items at ~calc(25% - 16px) with flex-grow:0 — too wide for the 40px gap, so even at desktop the 4th item overflows and wraps to 3, leaving dead space on the right (and it never reflows to fewer columns below 1024). Re-drive live's counts by pinning the flex-item width per tier: the width each item gives up to the gap is (cols-1)/cols * 40px, so 4-col = 25% - 30px, 3-col = 33.333% - 26.667px, 2-col = 50% - 20px. These land item widths on live's 281/299/213/159 exactly. The columns-4 class stays on the grid at every width, so the selector carries it (plus product-collection) to out-specify WooCommerce's later-loading inline rule; flex-grow:1 + max-width:none absorb sub-pixel rounding so each row fills flush. 2-col below 600 is a mobile default (no live reference under the 606 floor). */
.wp-block-woocommerce-product-collection .wc-block-product-template.is-flex-container.columns-4 > li {
	width: calc(25% - 30px);
	max-width: none;
	flex-grow: 1;
}
@media (max-width: 1024px) {
	.wp-block-woocommerce-product-collection .wc-block-product-template.is-flex-container.columns-4 > li {
		width: calc(33.333% - 26.667px);
	}
}
@media (max-width: 600px) {
	.wp-block-woocommerce-product-collection .wc-block-product-template.is-flex-container.columns-4 > li {
		width: calc(50% - 20px);
	}
}

/* Continue Shopping sits centered with breathing room above the footer. */
.dth-continue-shopping {
	margin-top: 2.5rem;
	margin-bottom: 3rem;
}

/* Campaign-only in-store notice (element 666). */
.dth-instore-banner {
	text-align: center;
	margin: 1.5rem 0;
}

/* -------------------------------------------------------------------------
 * Front page (M5) — page hero band + the login/intro hero row.
 * ---------------------------------------------------------------------- */
.dth-page-hero {
	margin-top: 0;
}

/* The intro hero is a 2-column row (copy left, vehicle image right) that
 * collapses to a single column on narrower screens. Injected as a raw block
 * string from a shortcode, so it can't lean on WP's generated block-gap;
 * drive the columns + gap + responsive stack from here instead. */
.dth-front-hero.wp-block-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	align-items: center;
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
}

.dth-front-hero .wp-block-column {
	min-width: 0;
}

.dth-front-hero .wp-block-buttons {
	margin-top: 1.5rem;
}

@media (max-width: 781px) {
	.dth-front-hero.wp-block-columns {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* --- Responsive parity pass (local -> live), combed 390 + 1440 against
       byd.dthmedia.com.au. Values are live's computed styles. --- */

/* Home hero heading: live is 28/42 with a tight bottom margin; local rendered
   25.5/30.6 with symmetric margins, so it wrapped wrong and broke the rhythm.
   Same at both viewports (no media query). */
.page-id-88 .entry-content .wp-block-heading {
	font-size: 28px;
	line-height: 42px;
	font-weight: 700;
	margin: 0 0 14px;
}

/* Home body copy: live is the darker #2D3748 with a 32px bottom gap. */
.page-id-88 .entry-content p {
	color: #2D3748;
	margin: 0 0 32px;
}

/* SOURCE: live byd.dthmedia.com.au / (home) | dealer, real Chrome (Tyler Test), measured @vw 1440/1200/1100/1024/768/606: the home product-category grid (live Kadence ul.products.grid-cols grid-ss-col-2/sm-col-3/md-col-4/lg-col-5) runs a 5→4→3→2 column cascade capped at a 1242px content wrap, gap 40px — 5 cols ≥1025 (216px @1440 grid capped 1242 centred; 198px @1200), 4 cols 768–1024 (214px @1024 / 150px @768, grid = viewport−48), 3 cols 544–767 (159px @606), 2 cols <544 (mobile default, no live ref under the 606 floor). 2026-09-13. Local renders the same category grid as a CLASSIC WooCommerce loop (ul.products.columns-5, floated li) so it showed 5 columns at 1024 (item 165) and never matched live's cascade. Convert the home grid to a CSS grid with live's per-tier column counts + the 1242 cap, and zero WooCommerce's floated-li width/margin so the grid tracks. Scoped to .home so the archive (a separate .wp-block-woocommerce-product-collection grid, already matched) is untouched. */
.home .woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 40px;
	max-width: 1242px;
	margin-left: auto;
	margin-right: auto;
}
.home .woocommerce ul.products > li.product {
	width: auto;
	max-width: none;
	margin: 0;
	float: none;
}
/* WooCommerce clearfixes ul.products with ::before/::after (content:" ";
   display:table). In a grid container those pseudo-elements become grid
   ITEMS — the ::before eats cell 1 and shoves every product right by one
   (empty first column). Kill them so only the real products flow. */
.home .woocommerce ul.products::before,
.home .woocommerce ul.products::after {
	content: none;
	display: none;
}
@media (max-width: 1024px) {
	.home .woocommerce ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}
@media (max-width: 767px) {
	.home .woocommerce ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 543px) {
	.home .woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Desktop header: local's inner group was capped at 750px and centered, pushing
   the logo to mid-canvas; live runs it to the content width (logo hard-left). */
@media (min-width: 1024px) {
	header .wp-block-group.is-content-justification-space-between {
		max-width: 1290px;
	}
}

/* Cart/checkout: live hides the WC page title (shows a hero banner template block
   instead, which the block theme doesn't have). Hide the bare title to match. */
.woocommerce-cart .wp-block-post-title,
.woocommerce-checkout .wp-block-post-title {
	display: none;
}

/* -------------------------------------------------------------------------
 * Single product (M4) — reproduce the live Kadence product layout: a ~1242
 * two-column split (gallery left, summary right, ~50/50) with live's title,
 * price and add-to-cart typography. Scoped to .single-product so nothing
 * leaks onto archive/cart/checkout.
 * ---------------------------------------------------------------------- */

/* SOURCE: live byd.dthmedia.com.au /product/on-roads-on-us-shark-6-cab-chassis-pull-up-banner/ | @vw~1582 dealer: product wrapper container width=~1242px, gallery=~589px, summary=~589px (~50/50 with a gap); 2026-09-13. Local's alignwide columns take wideSize (1290px) and the gallery column is pinned to flex-basis:512px in the template, so it renders 1290 wide and NOT 50/50. Cap the wrapper to live's 1242 content width (mirrors the archive collection fix — the WP :where() alignwide max-width is zero-specificity so this class rule wins), and switch to a grid so the two columns split evenly; grid ignores the inline flex-basis. 1242 - 64px gap = 589 per column, matching live. */
.single-product .dth-single-product.wp-block-columns {
	max-width: 1242px;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 64px;
}

/* SOURCE: live byd.dthmedia.com.au /product/... | dealer: product is 2-col at vw768 (gallery left, summary right) and stacks to a single full-width column (gallery on top, summary below) at vw606; live floor 606, so its stacking breakpoint is <768; 2026-09-13. The 2-col grid above has no breakpoint, so local held 2-col down to mobile (gallery squished to 247, summary crammed beside it). Collapse to one column at <=767 to stack like live. */
@media (max-width: 767px) {
	.single-product .dth-single-product.wp-block-columns {
		grid-template-columns: 1fr;
	}
}

/* SOURCE: live byd.dthmedia.com.au /product/on-roads-on-us-shark-6-cab-chassis-pull-up-banner/ | @vw~1582 dealer: h1.product_title font-size=32px line-height=48px margin=16px top/0 else (weight 700 + color #1A202C already match via the theme heading element); 2026-09-13. Local's post-title inherits the heading element's line-height:1.2 and an unset h1 size, so only size, line-height and top margin deviate. */
.single-product .dth-single-product .wp-block-post-title {
	font-size: 32px;
	line-height: 48px;
	margin: 16px 0 0;
}

/* SOURCE: live byd.dthmedia.com.au /product/on-roads-on-us-shark-6-cab-chassis-pull-up-banner/ | @vw~1582 dealer: summary .price font-size=16px line-height=25.6px color=#2D3748 margin=16px 0 (weight 400 already the Montserrat default); 2026-09-13. Local price inherits the base 17px/muted #4A5568; set 16px (line-height 1.6 = 25.6px falls out of the base) and the darker dark-2 colour, cascading to the amount span. */
.single-product .dth-single-product .wp-block-woocommerce-product-price {
	font-size: 16px;
	color: var(--wp--preset--color--dark-2);
	margin: 16px 0;
}

/* SOURCE: live byd.dthmedia.com.au /product/on-roads-on-us-shark-6-cab-chassis-pull-up-banner/ | @vw~1582 dealer: button.single_add_to_cart_button font-size=18px font-weight=400 line-height=40px padding=0 18px (color white already via the theme button element); 2026-09-13. Local button carries the theme button element weight 700 and an unset size/line-height/padding; pin them to live's. */
.single-product .single_add_to_cart_button {
	font-size: 18px;
	font-weight: 400;
	line-height: 40px;
	padding: 0 18px;
}

/* SOURCE: live byd.dthmedia.com.au /product/on-roads-on-us-shark-6-cab-chassis-pull-up-banner/ | @vw~1582 dealer: quantity input width=~62px; 2026-09-13. Local's WooCommerce qty box renders wider than live; box it to 62px. */
.single-product .quantity .qty {
	width: 62px;
}

/* -------------------------------------------------------------------------
 * Cart (M-cart) — reproduce the live Kadence cart: a ~1178px two-column wrap
 * (items table left ~712px, totals box right ~386px, ~80px gap), with live's
 * header-cell / totals-label typography and the blue Proceed-to-checkout
 * button. Core WooCommerce Blocks cart (.wp-block-woocommerce-cart), scoped so
 * nothing leaks onto other pages.
 * ---------------------------------------------------------------------- */

/* SOURCE: live byd.dthmedia.com.au /cart/ | @vw1440 dealer: cart content wrap width=~1178px (items ~712px + totals ~386px + gap ~80px); 2026-09-13. Local's cart page renders through page.html post-content (layout:constrained), so the whole cart block is capped at theme.json contentSize (750px) and squished. Lift the cart block to live's ~1178px content width and centre it — same mechanism/pattern as the archive collection + single-product wrapper fixes: the WP :where() constrained max-width is zero-specificity, so this single-class rule wins without !important. Scoped to the cart block, so contentSize stays 750px everywhere else. The 712/386 (~65/35) split falls out of WooCommerce's own .wc-block-components-sidebar-layout once there is room; parent to verify the split on smoke and add a flex-proportion rule on .wc-block-cart children only if local differs. */
/* SOURCE: live byd.dthmedia.com.au /cart/ | @vw1024 + @vw768 + @vw1440 dealer (real Chrome, Tyler Test): live cart block width = min(1178px, viewport − 112px), i.e. 56px side inset at tablet — 912@1024 (is-large, 2-col) / 656@768 (< the WC sidebar-layout is-large ~700px threshold, so it STACKS items-on-top / totals-below) / 1178@1440 (max-width caps, inset grows). 2026-09-13. Local's cart page inset is only 24px, so its block was 64px too wide at tablet (976@1024 / 720@768) and the sidebar-layout never dropped under 700 → held 2-col to mobile, unlike live. The 56px is CART-SPECIFIC not sitewide (live archive grid still uses 24px @1024), so this stays scoped to the cart block. Add 32px inset each side (width: 100% − 64px) so the block tracks live's min(1178, viewport−112): the sidebar-layout stacks natively at live's own breakpoint (~viewport 812) via WC's ResizeObserver rather than a blind media query, and the max-width 1178 keeps desktop pixel-identical. */
.wp-block-woocommerce-cart {
	max-width: 1178px;
	width: calc(100% - 64px);
	margin-left: auto;
	margin-right: auto;
}

/* SOURCE: live byd.dthmedia.com.au /cart/ | @vw1440 dealer: cart table column-header row font-size=14.4px line-height=20.16px color=#2D3748; 2026-09-13. Set the header row typography to live's; #2D3748 is the theme's dark-2 preset. Inherits to the th cells. */
.wp-block-woocommerce-cart .wc-block-cart-items__header {
	font-size: 14.4px;
	line-height: 20.16px;
	color: var(--wp--preset--color--dark-2);
}

/* SOURCE: live byd.dthmedia.com.au /cart/ | @vw1440 dealer: totals label text font-size=14.4px font-weight=500 color=#2D3748; 2026-09-13. Pin the totals-item labels (Subtotal, Total, ...) to live; #2D3748 is the theme dark-2 preset. */
.wp-block-woocommerce-cart .wc-block-components-totals-item__label {
	font-size: 14.4px;
	font-weight: 500;
	color: var(--wp--preset--color--dark-2);
}

/* SOURCE: live byd.dthmedia.com.au /cart/ | @vw1440 dealer: "Proceed to checkout" button font-size=18px font-weight=400 padding=7px 18px text-align=center (background #2B6CB0 + white text already match via the theme primary/button element, and the block is full-width by default); 2026-09-13. The submit button carries the theme button element's weight 700 and an unset size/padding; pin them to live's. Blue bg (#2B6CB0 = theme primary) and white text come from the wp-element-button/contained styling, same as the single add-to-cart button. */
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
	font-size: 18px;
	font-weight: 400;
	padding: 7px 18px;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Checkout (M-checkout) — reproduce the live Kadence checkout: a ~1178px
 * two-column wrap (customer form left ~766px, order-summary sidebar right
 * ~412px, ~65/35, ~80px gap), with live's blue Place-order button. Same core
 * WooCommerce Blocks checkout as live (.wp-block-woocommerce-checkout >
 * .wc-block-checkout sidebar-layout), scoped so nothing leaks onto other pages.
 * ---------------------------------------------------------------------- */

/* SOURCE: live byd.dthmedia.com.au /checkout/ | @vw1534 dealer: .wp-block-woocommerce-checkout width=1178px (main ~766px pad-right ~53px + sidebar ~412px pad-left ~27px, ~65/35, ~80px gap); 2026-09-13. Local's checkout page renders through page.html post-content (layout:constrained), so the whole checkout block is capped at theme.json contentSize (750px) and squished — identical to the cart block. Lift the checkout block to live's 1178px content width and centre it — same mechanism/pattern as the archive collection + single-product + cart wrapper fixes: the WP :where() constrained max-width is zero-specificity, so this single-class rule wins without !important. Scoped to the checkout block, so contentSize stays 750px everywhere else. The main/sidebar split falls out of WooCommerce's own .wc-block-checkout sidebar-layout once there is room; parent to verify the split on smoke and add a flex-proportion rule only if local differs. */
/* SOURCE: live byd.dthmedia.com.au /checkout/ | @vw1024 + @vw768 dealer (real Chrome, Tyler Test): live checkout block = min(1178px, viewport − 112px), 56px side inset — 912@1024 (2-col: fields 593 / summary 319) / 656@768 (STACKS: summary-on-top / fields-below, both 656). 2026-09-13. Identical mechanism to the cart block (same WC sidebar-layout is-large/is-medium block-width toggle); local's checkout used a 24px inset so it held 2-col to mobile. Reuse the cart's route B: add 32px inset each side (width: 100% − 64px) so the block tracks live's min(1178, viewport−112) and stacks natively at live's own breakpoint; max-width 1178 keeps desktop pixel-identical. */
.wp-block-woocommerce-checkout {
	max-width: 1178px;
	width: calc(100% - 64px);
	margin-left: auto;
	margin-right: auto;
}

/* SOURCE: live byd.dthmedia.com.au /checkout/ | @vw1534 dealer: .wc-block-components-checkout-place-order-button font-size=18px font-weight=400 padding=7px 18px (background #2B6CB0 + white text already match via the theme primary/button element); 2026-09-13. Same as the cart Proceed-to-checkout button: the submit button carries the theme button element's weight 700 and an unset size/padding, so pin them to live's. Blue bg (#2B6CB0 = theme primary) and white text come from the wp-element-button/contained styling, so only size/weight/padding deviate. */
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
	font-size: 18px;
	font-weight: 400;
	padding: 7px 18px;
}

/* ----------------------------------------------------------------------
 * MY ACCOUNT — widen the account panel to live's 1242 wrapper and restore
 * the block-level padded account-nav links. The my-account page renders the
 * classic [woocommerce_my_account] shortcode markup (.woocommerce +
 * .woocommerce-MyAccount-navigation/-content), not blocks.
 * ---------------------------------------------------------------------- */

/* SOURCE: live byd.dthmedia.com.au /my-account/ | @vw1534 dealer: .woocommerce width=1242 max-width=none (fills the Kadence 1242 content wrapper), centred; nav width=372 (~30%), content width=869 (~70%); 2026-09-13. WooCommerce's own woocommerce-blocktheme.css caps ".woocommerce-account main .woocommerce" at max-width:1000px (specificity 0,2,1) and auto-centres it, so the account panel renders 1000px narrow vs live's 1242. Re-declare the SAME selector at 1242 — theme style.css loads AFTER woocommerce-blocktheme.css so equal specificity wins on source order (no !important needed); the existing auto margins keep it centred, and the 30%/70% nav/content split falls out of the wider wrapper. */
.woocommerce-account main .woocommerce {
	max-width: 1242px;
}

/* SOURCE: live byd.dthmedia.com.au /my-account/ | @vw1534 dealer: content float=left width=869 (~70%) padding-right=42.5px (the gutter); nav width=372 (~30%) sits on the RIGHT; @vw700 stacked single-column, @vw768 2-col → live's stacking breakpoint is <768 (700 stacks, 768 is 2-col); 2026-09-13. WooCommerce's default my-account layout floats the nav LEFT / content RIGHT — the mirror of live. Flip it (content left 70% with a 42.5px right-pad gutter, nav right 30%) but ONLY at >=768; below 768 leave it stacked full-width like live. */
@media (min-width: 768px) {
	.woocommerce-account .woocommerce-MyAccount-content {
		float: left;
		width: 70%;
		padding-right: 42.5px;
		box-sizing: border-box;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: right;
		width: 30%;
	}
}

/* SOURCE: live byd.dthmedia.com.au /my-account/ | @vw1534 dealer: nav li padding=0 margin=0 (tight rows); link a display=block padding=8.5/25.5/8.5/17px (0.5em 1.5em 0.5em 1em @17px) color=#2D3748 font-weight=400; active row (.is-active a) font-weight=700 border-left=5px solid #2B6CB0; 2026-09-13. Live stacks the account-nav links as tight block rows with a blue left-bar on the active row; local renders bare inline links with a 17px li padding-bottom (big gaps) and no active bar. Restore block display + padding + dark-2 colour, zero the ul/li spacing, and add the blue active bar (#2B6CB0 = theme primary). */
.woocommerce-account .woocommerce-MyAccount-navigation ul,
.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.5em 1.5em 0.5em 1em;
	color: #2D3748;
	font-weight: 400;
	text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	font-weight: 700;
	text-decoration: none;
	border-left: 5px solid #2B6CB0;
}

/* -------------------------------------------------------------------------
 * Main nav — inline "BYD PRODUCTS" button on desktop, off-canvas hamburger
 * ≤1024 to match the live Kadence header. Live hides the inline main-nav item
 * at ≤1024 and slides it into an off-canvas panel from the right with a dark
 * overlay; the account/utility menu stays inline. The toggle reuses the
 * account-nav aria-expanded pattern (functions.php drives it inline). The whole
 * off-canvas apparatus is display:none by default so it never shows on desktop.
 * ---------------------------------------------------------------------- */
.dth-mainnav,
.dth-mainnav__toggle,
.dth-mainnav__overlay,
.dth-mainnav__panel {
	display: none;
}

@media (max-width: 1024px) {
	/* Hide the inline BYD PRODUCTS button; the off-canvas holds it instead. */
	.dth-header__main .wp-block-buttons {
		display: none;
	}

	.dth-mainnav {
		display: inline-flex;
	}

	.dth-mainnav__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		font-size: 22px;
		line-height: 1;
		cursor: pointer;
		color: var(--wp--preset--color--dark);
		background: none;
		border: 1px solid var(--wp--preset--color--dark);
		border-radius: 4px;
		padding: 0;
	}

	.dth-mainnav__overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 90;
		background: rgba(0, 0, 0, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s ease;
	}

	.dth-mainnav__panel {
		display: block;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		width: min(320px, 80vw);
		padding: 4rem 1.5rem 1.5rem;
		background: var(--wp--preset--color--white, #fff);
		box-shadow: rgba(0, 0, 0, 0.15) -8px 0 24px -8px;
		transform: translateX(100%);
		transition: transform 0.25s ease;
	}

	.dth-mainnav__close {
		position: absolute;
		top: 0.75rem;
		right: 0.75rem;
		width: 40px;
		height: 40px;
		font-size: 28px;
		line-height: 1;
		cursor: pointer;
		color: var(--wp--preset--color--dark);
		background: none;
		border: none;
		padding: 0;
	}

	.dth-mainnav__menu {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.dth-mainnav__menu a {
		display: block;
		padding: 0.75rem 0;
		font-size: 16px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		color: var(--wp--preset--color--dark);
		text-decoration: none;
	}

	.dth-mainnav__menu a:hover {
		color: var(--wp--preset--color--primary);
	}

	body.dth-mainnav-open .dth-mainnav__overlay {
		opacity: 1;
		visibility: visible;
	}

	body.dth-mainnav-open .dth-mainnav__panel {
		transform: translateX(0);
	}
}

/* -------------------------------------------------------------------------
 * Product-filter pills (/full-range-of-products/ "All", /byd-products/
 * "Reset filters" and any sibling category pills). The block editor sets
 * their look inline (background-color:#2b6cb0, border-radius:20px/6px,
 * font-size:16px), so live's smaller fully-rounded darker pill needs
 * !important to beat the inline values. Scoped to non-dark colour block
 * buttons inside post content, so the header "BYD PRODUCTS" button
 * (has-dark-background-color, and in the header template part) and the
 * management-panel buttons (no has-background class) stay untouched.
 * Live targets combed at 1440/768/390 against byd.dthmedia.com.au. */
.wp-block-post-content .wp-block-button__link.has-background:not(.has-dark-background-color) {
	background-color: rgb(33, 83, 135) !important; /* live #215387, local #2b6cb0 */
	border-radius: 100px !important; /* live fully-rounded pill, local 20px/6px */
	font-size: 14.4px !important; /* live 14.4px, local 16px */
	padding: 4.76px 13.4px; /* live pill height ~34.5px, local ~51px */
}

/* Management-panel action buttons ("FLUENT CRM" / "WOOCOMMERCE"): live pads
 * them 7.2px/18px (height ~43px); the theme leaves them at 14px/26px
 * (height ~57px). Font-size already matches live at 18px. Scoped to the
 * full-width column block buttons in post content, which are unique to the
 * management panel, so no other block button is affected. Padding is not
 * set inline here, so no !important is needed. */
.wp-block-post-content .wp-block-button__width-100 .wp-block-button__link {
	padding: 7.2px 18px; /* live ~43px tall, local ~57px */
}

/* Contact + Dealer-Registration keep live's two-column layout (intro left,
 * form right) through the tablet band. WordPress core stacks every columns
 * block at <=781px (flex-basis:100% !important), but live only collapses at
 * mobile, so the form width balloons locally (Contact 584 vs live 294,
 * Dealer-Reg 720 vs live 344). Re-assert the desktop 50/50 split from 600px
 * up on the columns block that holds the form (:has(.fluentform) scopes to
 * these two pages, so the management-panel columns that share the same block
 * layout class are untouched). Below 600px the core rule still stacks, so
 * 390 matches live's mobile stack and 1440 is outside the band. */
@media (min-width: 600px) and (max-width: 781px) {
	.wp-block-columns:has(.fluentform):not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1;
	}

	/* Contact's two columns carry a 4em (68px) inline padding, so once they
	 * sit side-by-side the form is only ~212px wide; live trims the padding at
	 * tablet so the form reads ~294px. Trim the inline left/right padding
	 * (needs !important to beat the inline style) on the background columns,
	 * which are unique to Contact (Dealer-Registration columns have no
	 * background and keep their full ~344px form). Confirmed against live at
	 * 768: 50/50 columns, form 294. */
	.wp-block-columns:has(.fluentform) > .wp-block-column.has-background {
		padding-left: 27px !important;
		padding-right: 27px !important;
	}
}