/* 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;
}

/* --- 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: live rgb(45,55,72); theme rgb(74,85,104). */
.dth-single-product .wp-block-post-excerpt {
	color: rgb(45, 55, 72);
}

/* 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;
}

/* 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) ---
   The DTH archive uses woocommerce/product-collection with imageSizing "single",
   so images stay at height:auto and mixed-ratio collateral (tall banners beside
   short landscapes) makes ragged rows. Kadence gets its uniform rows from
   WooCommerce's server-side 1:1 thumbnail CROP, not from CSS. We reproduce that:
   box every thumbnail to a 1/1 square and let the Woo/Kadence block img rule
   (object-fit:cover, higher specificity) hard-crop to fill it, matching Kadence's
   literal square crop. Verified as-dealer at 390 + 1440: rows align and nothing
   is clipped because this collateral is photographic scenes, not flat artwork.
   Scoped to the collection block, so the single-product gallery is untouched.
   If flat text-only flyers ever get added, add `object-fit:contain !important` on
   the img here so their copy isn't cropped. */
.wp-block-woocommerce-product-collection .wc-block-components-product-image {
	display: block;
	aspect-ratio: 1 / 1;
	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-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;
}
