/**
 * WooCommerce page fixes for the bambino theme.
 * Scoped to WooCommerce body classes only — other pages are unaffected.
 */

/* The theme header is position:absolute and overlays content; WC pages hide the
   headline, so push content below the header. */
body.woocommerce .btContentHolder,
body.woocommerce-page .btContentHolder,
body.woocommerce-cart .btContentHolder,
body.woocommerce-checkout .btContentHolder,
body.woocommerce-account .btContentHolder {
	padding-top: 150px;
	padding-bottom: 60px;
}

/* Give the plain WC pages (cart, checkout, my-account, order-received/thank-you)
   the theme's container width + side padding — matching .gutter .port (1260/30). */
body.woocommerce-cart .btContent,
body.woocommerce-checkout .btContent,
body.woocommerce-account .btContent {
	width: 100%;
	max-width: 1260px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 30px;
	padding-right: 30px;
	box-sizing: border-box;
}

/* WooCommerce block cart/checkout use `alignwide`; keep them within the container. */
body.woocommerce-cart .btContent .wp-block-woocommerce-cart.alignwide,
body.woocommerce-checkout .btContent .wp-block-woocommerce-checkout.alignwide {
	max-width: 100%;
}

@media (max-width: 1260px) {
	body.woocommerce .btContentHolder,
	body.woocommerce-page .btContentHolder,
	body.woocommerce-cart .btContentHolder,
	body.woocommerce-checkout .btContentHolder,
	body.woocommerce-account .btContentHolder {
		padding-top: 120px;
	}
}

@media (max-width: 768px) {
	body.woocommerce .btContentHolder,
	body.woocommerce-page .btContentHolder,
	body.woocommerce-cart .btContentHolder,
	body.woocommerce-checkout .btContentHolder,
	body.woocommerce-account .btContentHolder {
		padding-top: 100px;
	}
}

/* ---------------------------------------------------------------------------
   Logo swap on WooCommerce pages.
   The theme shows the WHITE logo (.btMainLogo) by default and the BLACK logo
   (.btAltLogo) when sticky — which is invisible on WC pages (transparent header
   over a white background by default, dark bar when sticky). Invert it here:
   BLACK by default, WHITE when sticky. Scoped to WC pages only.
   --------------------------------------------------------------------------- */

/* Default (non-sticky): show BLACK (alt), hide WHITE (main). */
body.woocommerce .btLogoArea .logo img.btMainLogo,
body.woocommerce-page .btLogoArea .logo img.btMainLogo,
body.woocommerce-cart .btLogoArea .logo img.btMainLogo,
body.woocommerce-checkout .btLogoArea .logo img.btMainLogo,
body.woocommerce-account .btLogoArea .logo img.btMainLogo {
	display: none !important;
}
body.woocommerce .btLogoArea .logo img.btAltLogo,
body.woocommerce-page .btLogoArea .logo img.btAltLogo,
body.woocommerce-cart .btLogoArea .logo img.btAltLogo,
body.woocommerce-checkout .btLogoArea .logo img.btAltLogo,
body.woocommerce-account .btLogoArea .logo img.btAltLogo {
	display: inline-block !important;
}

/* Sticky: show WHITE (main), hide BLACK (alt). Extra .btStickyHeaderActive
   class raises specificity above the default rules above. */
body.woocommerce.btStickyHeaderActive .btLogoArea .logo img.btMainLogo,
body.woocommerce-page.btStickyHeaderActive .btLogoArea .logo img.btMainLogo,
body.woocommerce-cart.btStickyHeaderActive .btLogoArea .logo img.btMainLogo,
body.woocommerce-checkout.btStickyHeaderActive .btLogoArea .logo img.btMainLogo,
body.woocommerce-account.btStickyHeaderActive .btLogoArea .logo img.btMainLogo {
	display: inline-block !important;
}
body.woocommerce.btStickyHeaderActive .btLogoArea .logo img.btAltLogo,
body.woocommerce-page.btStickyHeaderActive .btLogoArea .logo img.btAltLogo,
body.woocommerce-cart.btStickyHeaderActive .btLogoArea .logo img.btAltLogo,
body.woocommerce-checkout.btStickyHeaderActive .btLogoArea .logo img.btAltLogo,
body.woocommerce-account.btStickyHeaderActive .btLogoArea .logo img.btAltLogo {
	display: none !important;
}

/* ===========================================================================
   Consistent, professional form fields (cart/checkout/my-account).
   The checkout uses WooCommerce Blocks; the theme removed all focus outlines
   (*:focus{outline:none}) and doesn't unify the block field styles. This file
   loads only on WC pages, so targeting the component classes directly is safe.
   Tunable values are grouped as custom properties.
   =========================================================================== */
:root {
	--bjgc-field-border: #d5d7db;
	--bjgc-field-border-hover: #b5b8bd;
	--bjgc-field-radius: 8px;
	--bjgc-field-focus: #e58f7c;               /* deepened brand pink */
	--bjgc-field-ring: rgba(255, 150, 130, 0.28);
}

/* Resting style — all field types (guard error state so validation red shows). */
.wc-block-components-text-input:not(.has-error) input,
.wc-block-components-textarea,
.wc-block-components-textarea textarea,
.wc-block-components-select .wc-block-components-select__select,
.wc-block-components-combobox:not(.has-error) input,
.wc-block-components-totals-coupon__input input,
.woocommerce form .input-text,
.woocommerce form select,
.woocommerce .quantity input.qty {
	border: 1px solid var(--bjgc-field-border) !important;
	border-radius: var(--bjgc-field-radius) !important;
	background-color: #fff !important;
	color: #23282d;
	box-shadow: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Comfortable, uniform height on the controls without floating labels. */
.wc-block-components-select .wc-block-components-select__select,
.wc-block-components-combobox:not(.has-error) input,
.wc-block-components-totals-coupon__input input,
.woocommerce form .input-text,
.woocommerce form select {
	min-height: 50px;
	font-size: 15px;
}

/* Hover. */
.wc-block-components-text-input:not(.has-error) input:hover,
.wc-block-components-select .wc-block-components-select__select:hover,
.wc-block-components-combobox:not(.has-error) input:hover,
.woocommerce form .input-text:hover,
.woocommerce form select:hover {
	border-color: var(--bjgc-field-border-hover) !important;
}

/* Focus — restore a clear, consistent ring (overrides the theme's outline:none). */
.wc-block-components-text-input:not(.has-error) input:focus,
.wc-block-components-textarea textarea:focus,
.wc-block-components-select .wc-block-components-select__select:focus,
.wc-block-components-combobox:not(.has-error) input:focus,
.wc-block-components-totals-coupon__input input:focus,
.woocommerce form .input-text:focus,
.woocommerce form select:focus,
.woocommerce .quantity input.qty:focus {
	border-color: var(--bjgc-field-focus) !important;
	box-shadow: 0 0 0 3px var(--bjgc-field-ring) !important;
	outline: none !important;
}

/* Consistent dropdown caret so selects match the text inputs. */
.wc-block-components-select .wc-block-components-select__select,
.woocommerce form select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 38px !important;
}

/* Readable placeholders. */
.wc-block-components-text-input input::placeholder,
.woocommerce form .input-text::placeholder {
	color: #8a8f98;
	opacity: 1;
}