/* DTH BYD — theme-owned WooCommerce block styling (BY-14).
   Aligns the cart / checkout / single-product block surfaces to the live storefront's
   Kadence + ShopKit look — type, weight and colour only (totals, shipping, GST and
   payment already match live). Enqueued globally like fluentform.css; every rule is
   scoped to a WooCommerce block/class so non-WC pages stay untouched.
   Live reference values combed at 1440 against byd.dthmedia.com.au. */

/* --- Shared WC block text colour: live uses rgb(45,55,72); the theme default is the
       lighter rgb(74,85,104). Colour inherits, so setting it on the block wrappers
       fixes labels, totals and summary text in one place. --- */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	color: rgb(45, 55, 72);
}

/* Order summary / totals body text: live renders 14.4px, the theme default is 14px. */
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__total-price {
	font-size: 14.4px;
	color: rgb(45, 55, 72);
}

/* --- Primary filled buttons (cart "Proceed to checkout", checkout "Place order"):
       live is Montserrat 400 / 18px; the theme renders them 700 / 14–17px. --- */
.wc-block-components-button.wp-element-button {
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	font-size: 18px;
	/* Live rounds these submit buttons 3px; the block default renders them square. */
	border-radius: 3px;
}

/* --- Cart item title: live is dark and un-underlined; the theme renders it as a
       blue underlined link. (Font-size stays WC's 14px — 0.4px under live's 14.4px,
       sub-pixel and not worth an escalating-specificity override.) --- */
.wc-block-components-product-name {
	color: rgb(45, 55, 72);
	text-decoration: none;
}

/* --- Checkout step + order-summary headings: live 20px, theme 17px. Scoped through the
       block wrapper so it beats WooCommerce's own single-class step-title rule. --- */
.wp-block-woocommerce-checkout .wc-block-components-title,
.wp-block-woocommerce-cart .wc-block-components-title {
	font-size: 20px;
}

/* --- Cart line-item + totals-heading text. SOURCE: live byd.dthmedia.com.au /cart/
       | dealer @1440 2026-10-01: live (Kadence) renders cart block text at 14.4px /
       20.16px; dev's dth-byd small preset is 14px / 19.6px, so the line-item names,
       prices and the "Cart totals" heading read a touch small. Match live, scoped to
       the cart block (the totals-item rows already sit at 14.4px above). --- */
.wp-block-woocommerce-cart .wc-block-components-product-name,
.wp-block-woocommerce-cart .wc-block-cart-item__prices,
.wp-block-woocommerce-cart .wc-block-cart-item__total,
.wp-block-woocommerce-cart .wc-block-cart__totals-title {
	/* !important: WooCommerce's cart.css scopes the line-item name/price through the
	   row (.wc-block-cart-items__row ...), out-specifying a plain block-scoped rule. */
	font-size: 14.4px !important;
	line-height: 20.16px !important;
}

/* --- Single product ------------------------------------------------------- */
/* Product title (H1): live 32px / line-height 1.5; theme x-large preset is 34px / 1.2. */
.dth-single-product .wp-block-post-title {
	font-size: 32px;
	line-height: 1.5;
}

/* Price: live 16px / rgb(45,55,72); theme 17px / rgb(74,85,104). */
.dth-single-product .wc-block-components-product-price {
	font-size: 16px;
	color: rgb(45, 55, 72);
}

/* Short description: rendered via the [dth_byd_short_description] shortcode so the
   stored HTML list (ul/li + bold-italic) survives — the core/post-excerpt block
   flattened it to a run-on plain paragraph. SOURCE: live byd.dthmedia.com.au
   /product/byd-attoverse-atto-2-poster/ | dealer @1440 2026-10-01: wrapper
   17px/27.2px/#2D3748 margin 17px 0 34px; p margin 0 0 17px; ul disc margin
   0 0 25.5px 25.5px. Match live. */
.dth-single-product .woocommerce-product-details__short-description {
	font-size: 17px;
	line-height: 27.2px;
	color: rgb(45, 55, 72);
	margin: 17px 0 34px;
}
.dth-single-product .woocommerce-product-details__short-description p {
	margin: 0 0 17px;
}
.dth-single-product .woocommerce-product-details__short-description ul {
	list-style: disc outside;
	margin: 0 0 25.5px 25.5px;
	padding-left: 0;
}

/* Add-to-cart button: live Montserrat 400 / 18px; theme 700 / 17px. */
.single_add_to_cart_button {
	font-weight: 400;
	font-size: 18px;
	border-radius: 3px;
}

/* Variation (pa_style) dropdown. SOURCE: live byd.dthmedia.com.au
   /product/byd-attoverse-atto-2-poster/ | dealer @1440 2026-10-01: select
   17px Montserrat #2D3748, 1px solid #CBD5E0, square, padding 3.4px 35px 3.4px 8.5px,
   appearance:none with a grey chevron SVG at 98% 50%, min-width 75% of a full-width
   variations table (renders ~362px). Dev rendered a raw 14px black browser select
   (193px) inside a shrink-wrapped table. Widen the table to 100% and restyle the
   select to live. */
/* WooCommerce core (woocommerce.css) + blocktheme (woocommerce-blocktheme.css) style
   the variation select at a higher specificity (font-size small/14px, min-width 70%,
   a black feather chevron), so live's values need !important to win. */
.single-product table.variations {
	width: 100% !important;
}
.single-product .variations select {
	width: 362px !important;
	max-width: 100%;
	height: 36px !important;
	font-size: 17px !important;
	line-height: 27.2px;
	font-family: "Montserrat", sans-serif;
	color: rgb(45, 55, 72);
	border: 1px solid rgb(203, 213, 224);
	border-radius: 0;
	padding: 3.4px 35px 3.4px 8.5px !important;
	background-color: #fff;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNiYmIiPjxwYXRoIGQ9Ik02IDlsNiA2IDYtNiIvPjwvc3ZnPg==") !important;
	background-repeat: no-repeat;
	background-position: 98% 50% !important;
	-webkit-appearance: none;
	appearance: none;
}

/* Gallery fills the full summary column like live (589px). The block wrapper
   inherited a max-width:512px from the template column's width attribute, capping the
   image narrower than live; drop the cap so the image fills the column. */
.single-product .wp-block-woocommerce-product-image-gallery {
	max-width: 100%;
	width: 100%;
}

/* Add-to-cart quantity input: live styles it (17px, light border, 3px radius, centred,
   40x62); the theme otherwise leaves it as a raw browser number field. */
.quantity input.qty {
	font-size: 17px;
	color: rgb(74, 85, 104);
	background: #fff;
	border: 1px solid rgb(203, 213, 224);
	border-radius: 3px;
	width: 62px;
	height: 40px;
	padding: 0 8.5px;
	text-align: center;
}

/* --- Classic WooCommerce form inputs (login, register, account details, lost password,
       coupon): live styles them 17px / rgb(74,85,104) / 1px rgb(203,213,224) / 3px radius;
       the theme leaves them at WC/browser defaults (14px, dark border, 4px). The block
       checkout/cart inputs use different classes and already match live, so they are
       untouched here. --- */
.woocommerce form .input-text,
.woocommerce-Input.input-text {
	font-size: 17px !important;
	color: rgb(74, 85, 104) !important;
	border: 1px solid rgb(203, 213, 224) !important;
	border-radius: 3px !important;
}

/* Cart block quantity selector: distinct from the single-product `.quantity input.qty`
   above (different block class). Live rounds it 3px; the block default renders it square. */
.wc-block-components-quantity-selector__input {
	border-radius: 3px;
}

/* My-account nav: the classic navigation renders as a bulleted <ul> locally; live has
   no list markers. */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
}

/* --- Responsive parity pass (local -> live), combed 390 + 1440 against
       byd.dthmedia.com.au. --- */

/* Kadence "global fill" buttons (cart "Continue shopping" etc.) fall back to the
   indigo #3633E1 default locally; live uses the brand blue accent. */
.kb-button.kb-btn-global-fill,
.wc-block-cart .kb-button.kb-btn-global-fill {
	background-color: #2B6CB0;
}
.kb-button.kb-btn-global-fill:hover {
	background-color: #2c5282;
}

/* Empty-cart heading: live tightens the bottom margin (14.11px -> 8.5px). */
.wp-block-woocommerce-empty-cart-block h2,
.wc-block-cart__empty-cart__title {
	margin: 0 0 8.5px;
}

/* --- Archive/catalogue product thumbnails (Product Collection block) ---
   SOURCE: live byd.dthmedia.com.au /product-category/{02-byd-attoverse-atto-2,
   11-on-roads-on-us-sealion-7} | dealer @1440 2026-10-01: EVERY archive thumbnail
   renders a uniform 281x393 portrait box (300:420 = 5:7), object-fit cover, across
   posters, flyers, pull-up/windscreen banners and the decal. Live's collateral is all
   authored to that 5:7 portrait ratio, so cover crops nothing; the uniform box is what
   keeps rows balanced.
   The earlier build boxed these to 1:1 SQUARE, which cropped the tops off the tall
   5:7 posters. The fix is NOT to drop the box (that let mixed pixel-sizes render at
   natural size and blew up rows) but to box them to live's real 5:7 portrait ratio:
   the 5:7 artwork fills it with zero crop, and any odd-aspect image crops to fill the
   way live's server-side catalog-thumbnail crop does. Scoped to the collection block,
   so the single-product gallery is untouched. */
.wp-block-woocommerce-product-collection .wc-block-components-product-image {
	display: block;
	aspect-ratio: 300 / 420;
	overflow: hidden;
}
.wp-block-woocommerce-product-collection .wc-block-components-product-image a,
.wp-block-woocommerce-product-collection .wc-block-components-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Kadence's roomier archive grid gap (Woo block default 1.25em -> Kadence 2.5rem). */
.wp-block-woocommerce-product-collection .wc-block-product-template.is-flex-container {
	gap: 2.5rem;
}

/* 06-sales-material is merch (folders/caps/ribbons/flyers), authored square like
   live's classic-loop 300x300 thumbs, NOT the 5:7 poster campaigns. Box it square
   so cover does not crop+upscale the square art. Scoped by WP archive body class. */
body.term-06-sales-material .wp-block-woocommerce-product-collection .wc-block-components-product-image {
	aspect-ratio: 1 / 1;
}

/* Order-received (thank-you) page: on a full order its billing/shipping address
   boxes (the last block of WooCommerce's block Order Confirmation) sat flush
   against the dark site footer with no gap. The footer template part is a
   sibling of <main>, so bottom padding on <main> opens a gap before it no matter
   which confirmation block renders last. Scoped by the WooCommerce body class so
   no other page shifts. */
body.woocommerce-order-received main {
	padding-bottom: var(--wp--preset--spacing--80, 4rem);
}