/**
 * Buldog UI — site-wide mobile/app-feel and consistency fixes (design QA, Oct 2026).
 *
 * Loaded on every front-end page after style.css (includes/buldog-ui.php, filemtime version).
 * Sections:
 *   1. Touch behaviour (no double-tap zoom on controls, no tap flash)
 *   2. Tap targets that were under 40px
 *   3. Lazy-loaded images: fade in + neutral placeholder box (WP Rocket lazyload classes)
 *   4. Mini cart controls
 *   5. Account / login forms
 *   6. Product page: zoom trigger vs. discount labels, mobile alignment
 *   7. Floating accessibility button while an overlay is open
 *   8. Checkout / cart notices
 */

/* ---------- 0. Buttons: one system (owner, 2026-10-13) ----------
 * Primary = green #85C854 → #71C733 on hover, white 16px/600, 10px radius. Secondary = same
 * box, white with a green border and dark-green text. Add to cart (cards, product page,
 * sticky bar) = the same box in yellow #FFA41C → #FF9900 (owner, 2026-10-16).
 * Each area keeps its own height (cards 44-46, forms 48, buy rows 52). Areas styled by
 * widget variables get the variables; the rest get the properties, !important where an
 * Elementor per-widget rule (0,4,x) would otherwise win. */
:root {
	--bd-btn-bg: #85c854;
	--bd-btn-bg-hover: #71c733;
	--bd-btn-fg: #fff;
	--bd-btn-radius: 10px;
	--bd-btn-fs: 16px;
	--bd-btn-fw: 600;
	--bd-btn2-bg: #fff;
	--bd-btn2-bg-hover: #f1f9ea;
	--bd-btn2-border: #85c854;
	--bd-btn2-fg: #3d7a22;
	--bd-atc-bg: #ffa41c;
	--bd-atc-bg-hover: #ff9900;
	--bd-atc-fg: #fff;
}

/* Primary: product cards (loop add-to-cart), read more, account and Woo forms, Elementor
 * form submits, empty-cart "return to shop", reviews submit. */
.buldog-loop-atc-wrap .price-add-to-cart a.add_to_cart_button,
.buldog-loop-atc-wrap .price-add-to-cart button.add_to_cart_button,
.single-product form.cart button.single_add_to_cart_button.button,
.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-form-register .woocommerce-form-register__submit,
.woocommerce-ResetPassword .woocommerce-Button,
.woocommerce-EditAccountForm .woocommerce-Button,
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content a.button,
.woocommerce .return-to-shop a.button,
.woocommerce a.button.wc-backward,
.woocommerce #respond input#submit,
.elementor-widget-form .elementor-button[type='submit'],
.woocommerce button.button.alt,
.woocommerce a.button.alt {
	background: var(--bd-btn-bg) !important;
	border: 0 !important;
	border-radius: var(--bd-btn-radius) !important;
	color: var(--bd-btn-fg) !important;
	font-size: var(--bd-btn-fs) !important;
	font-weight: var(--bd-btn-fw) !important;
	box-shadow: none !important;
	text-transform: none !important;
	transition: background-color 0.15s ease;
}
.buldog-loop-atc-wrap .price-add-to-cart .add_to_cart_button svg {
	fill: var(--bd-btn-fg) !important;
}
/* Add to cart: yellow. Same box as the primary button, only the colours differ. */
.buldog-loop-atc-wrap .price-add-to-cart a.add_to_cart_button,
.buldog-loop-atc-wrap .price-add-to-cart button.add_to_cart_button,
.single-product form.cart button.single_add_to_cart_button.button {
	background: var(--bd-atc-bg) !important;
	color: var(--bd-atc-fg) !important;
}
.buldog-loop-atc-wrap .price-add-to-cart .add_to_cart_button svg {
	fill: var(--bd-atc-fg) !important;
}
.buldog-loop-atc-wrap .price-add-to-cart a.add_to_cart_button:is(:hover, :focus-visible),
.buldog-loop-atc-wrap .price-add-to-cart button.add_to_cart_button:is(:hover, :focus-visible),
.single-product form.cart button.single_add_to_cart_button.button:is(:hover, :focus-visible) {
	background: var(--bd-atc-bg-hover) !important;
	color: var(--bd-atc-fg) !important;
}
.buldog-sticky-atc {
	--bsa-btn-bg: var(--bd-atc-bg) !important;
	--bsa-btn-bg-hover: var(--bd-atc-bg-hover) !important;
	--bsa-btn-color: var(--bd-atc-fg) !important;
}
.buldog-loop-atc-wrap .price-add-to-cart a.add_to_cart_button:is(:hover, :focus-visible),
.buldog-loop-atc-wrap .price-add-to-cart button.add_to_cart_button:is(:hover, :focus-visible),
.woocommerce-form-login .woocommerce-form-login__submit:is(:hover, :focus-visible),
.woocommerce-form-register .woocommerce-form-register__submit:is(:hover, :focus-visible),
.woocommerce-ResetPassword .woocommerce-Button:is(:hover, :focus-visible),
.woocommerce-EditAccountForm .woocommerce-Button:is(:hover, :focus-visible),
.woocommerce-MyAccount-content .woocommerce-Button:is(:hover, :focus-visible),
.woocommerce-MyAccount-content a.button:is(:hover, :focus-visible),
.woocommerce .return-to-shop a.button:is(:hover, :focus-visible),
.woocommerce a.button.wc-backward:is(:hover, :focus-visible),
.woocommerce #respond input#submit:is(:hover, :focus-visible),
.elementor-widget-form .elementor-button[type='submit']:is(:hover, :focus-visible),
.woocommerce button.button.alt:is(:hover, :focus-visible),
.woocommerce a.button.alt:is(:hover, :focus-visible) {
	background: var(--bd-btn-bg-hover) !important;
	color: var(--bd-btn-fg) !important;
}
.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-form-register .woocommerce-form-register__submit,
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce .return-to-shop a.button,
.woocommerce a.button.wc-backward,
.elementor-widget-form .elementor-button[type='submit'] {
	min-height: 48px;
	padding: 0 24px !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Secondary: card "view cart" after adding, sticky bar checkout, checkout/cart back. */
.buldog-loop-atc-wrap a.added_to_cart,
.buldog-sticky-atc .buldog-sticky-atc__checkout {
	background: var(--bd-btn2-bg) !important;
	border: 1.5px solid var(--bd-btn2-border) !important;
	border-radius: var(--bd-btn-radius) !important;
	color: var(--bd-btn2-fg) !important;
	font-weight: var(--bd-btn-fw) !important;
	box-shadow: none !important;
}
.buldog-loop-atc-wrap a.added_to_cart:is(:hover, :focus-visible),
.buldog-sticky-atc .buldog-sticky-atc__checkout:is(:hover, :focus-visible) {
	background: var(--bd-btn2-bg-hover) !important;
	color: var(--bd-btn2-fg) !important;
}

/* Cart page + checkout (widget variables). */
.buldog-ms-checkout,
.buldog-ms-cart,
.elementor-widget-buldog_cart,
.elementor-widget-buldog_multi_step_checkout {
	--buldog-ms-btn-radius: 10px !important;
	--buldog-ms-btn2-radius: 10px !important;
	--buldog-ms-po-radius: 10px !important;
	--buldog-ms-po-bg: #85c854 !important;
	--buldog-ms-po-bg-hover: #71c733 !important;
	--buldog-ms-po-color: #fff !important;
	--buldog-ms-po-color-hover: #fff !important;
	--buldog-ms-green: #85c854 !important;
}
.buldog-ms-checkout .buldog-ms-checkout__btn--primary:is(:hover, :focus-visible) {
	background: #71c733 !important;
	filter: none !important;
}
.buldog-ms-checkout .buldog-ms-checkout__btn--secondary {
	border: 1.5px solid var(--bd-btn2-border) !important;
	color: var(--bd-btn2-fg) !important;
	background: var(--bd-btn2-bg) !important;
}
.buldog-ms-checkout .buldog-ms-checkout__btn--secondary:is(:hover, :focus-visible) {
	background: var(--bd-btn2-bg-hover) !important;
}

/* Mini cart (widget variables). */
.buldog-mini-cart {
	--bmc-btn-checkout-bg: #85c854 !important;
	--bmc-btn-checkout-bg-hover: #71c733 !important;
	--bmc-btn-checkout-bg-active: #71c733 !important;
	--bmc-btn-checkout-color: #fff !important;
	--bmc-btn-checkout-color-hover: #fff !important;
	--bmc-btn-checkout-radius: 10px !important;
	--bmc-btn-apply_coupon-bg: #85c854 !important;
	--bmc-btn-apply_coupon-bg-hover: #71c733 !important;
	--bmc-btn-apply_coupon-color: #fff !important;
	--bmc-btn-apply_coupon-radius: 10px !important;
	--bmc-btn-shipping_calc-bg: #85c854 !important;
	--bmc-btn-shipping_calc-bg-hover: #71c733 !important;
	--bmc-btn-shipping_calc-color: #fff !important;
	--bmc-btn-shipping_calc-radius: 10px !important;
	--bmc-btn-note_save-bg: #85c854 !important;
	--bmc-btn-note_save-bg-hover: #71c733 !important;
	--bmc-btn-note_save-color: #fff !important;
	--bmc-btn-note_save-radius: 10px !important;
}
/* Mini-cart checkout button: radius and size come from the header widget's own settings
 * (checkout_radius 10, checkout typography 17px/600); buldog-mini-cart.css sets 800. */
.buldog-mini-cart__panel a.buldog-mini-cart__checkout-btn.elementor-button {
	font-weight: 600 !important;
}
/* Same text weight/size on every buy button. */
.buldog-sticky-atc button.buldog-sticky-atc__btn {
	font-weight: 600;
}
.buldog-ms-checkout .buldog-ms-checkout__btn,
.buldog-ms-cart .buldog-ms-checkout__btn {
	font-size: 16px !important;
	font-weight: 600 !important;
}
.buldog-ms-checkout .buldog-ms-checkout__btn--secondary,
.buldog-ms-cart .buldog-ms-checkout__btn--secondary {
	border-width: 1.5px !important;
}

/* ---------- 1. Touch ---------- */
a,
button,
[role='button'],
input,
select,
textarea,
label,
summary {
	touch-action: manipulation;
}
@media (pointer: coarse) {
	body {
		-webkit-tap-highlight-color: transparent;
	}
	/* A tap leaves a black focus ring on the hamburger / icon buttons ("the design changes
	 * when I touch it"). Keep the ring for keyboard users (:focus-visible), drop it for touch. */
	a:focus:not(:focus-visible),
	button:focus:not(:focus-visible),
	[role='button']:focus:not(:focus-visible),
	.e-n-menu-toggle:focus:not(:focus-visible),
	.elementor-button:focus:not(:focus-visible) {
		outline: none;
		box-shadow: none;
	}
}

/* ---------- 2. Tap targets ---------- */
/* "(3)" review-count links on cards were 19×29px. */
.woocommerce-review-link {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 4px;
}
/* WooCommerce checkboxes (remember me, newsletter, create account…) rendered at 13px. */
.woocommerce-form__input-checkbox,
.woocommerce form .form-row .input-checkbox {
	width: 20px;
	height: 20px;
	vertical-align: middle;
	accent-color: #85c854;
}
@media (max-width: 767px) {
	/* Breadcrumb crumbs: plain inline links (a min-height made every wrapped row 30px+). */
	.buldog-electro-breadcrumb a {
		min-height: 0;
		padding-block: 3px;
	}
	/* Footer links (menus + social icons) */
	.elementor-location-footer .elementor-nav-menu a,
	.elementor-location-footer .elementor-icon-list-item > a {
		min-height: 40px;
		display: inline-flex;
		align-items: center;
	}
	.elementor-location-footer .elementor-social-icon {
		width: 40px;
		height: 40px;
	}
}

/* ---------- 3. Lazy-loaded images ---------- */
/* WP Rocket swaps `src` for a transparent SVG with the right box and adds `lazyloaded` when
 * the real file is in. Fade it in instead of popping, and show a soft placeholder box on
 * product-card images in the meantime, so a fast scroll reads as "loading", not "broken". */
img[data-lazy-src] {
	opacity: 0;
	transition: opacity 0.3s ease;
}
img[data-lazy-src].lazyloaded,
img[data-lazy-src].error,
.elementor-editor-active img[data-lazy-src] {
	opacity: 1;
}
.elementor-widget-theme-post-featured-image:has(img[data-lazy-src]:not(.lazyloaded)) a,
.elementor-widget-theme-post-featured-image:has(img[data-lazy-src]:not(.lazyloaded)) > .elementor-widget-container,
.buldog-wc-loop-item--elementor .elementor-widget-theme-post-featured-image:has(img[data-lazy-src]:not(.lazyloaded)) {
	background: #f3f3f3;
	border-radius: 10px;
}
.elementor-widget-theme-post-featured-image img {
	border-radius: 10px;
}

/* ---------- 4. Mini cart ---------- */
/* Control sizes live in assets/css/buldog-mini-cart.css (close 44px, remove 28px + 44px hit
 * area). Only the drawer close button is widened here. */
.buldog-mini-cart__drawer-close {
	width: 44px;
	height: 44px;
	color: #1f2937;
}
/* Empty cart: no "pay ₪0.00" button, no promo switch, no subtotal — just the message. */
.buldog-mini-cart__panel:has(.buldog-mini-cart__empty) .buldog-mini-cart__checkout-btn,
.buldog-mini-cart__panel:has(.buldog-mini-cart__empty) [class*='buldog-mini-cart__wdr'],
.buldog-mini-cart__panel:has(.buldog-mini-cart__empty) .buldog-mini-cart__subtotal,
.buldog-mini-cart__panel:has(.buldog-mini-cart__empty) .buldog-mini-cart__totals,
.buldog-mini-cart__panel:has(.buldog-mini-cart__empty) .buldog-mini-cart__actions {
	display: none !important;
}
.buldog-mini-cart__empty {
	padding: 32px 16px;
	text-align: center;
	color: #4b5563;
	font-size: 15px;
}

/* ---------- 4b. Mobile header menu ---------- */
/* Sub-category lists inserted into the mobile mega-menu dropdowns (header 122205). */
.buldog-mobile-submenu .elementor-icon-list-item {
	border-bottom: 1px solid #ededed;
}
.buldog-mobile-submenu .elementor-icon-list-item:last-child {
	border-bottom: 0;
}
.buldog-mobile-submenu .elementor-icon-list-item > a {
	display: flex;
	align-items: center;
	min-height: 48px;
	width: 100%;
}
.buldog-mobile-submenu .elementor-icon-list-item:last-child > a {
	font-weight: 700;
}
@media (max-width: 1024px) {
	/* One row per item: title link grows, the chevron is a 44px tap box at the end. The
	 * header's own custom CSS forces the title container to 100% width, which pushed the
	 * chevron under the title. */
	.elementor-widget-n-menu .e-n-menu-title {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 0 !important;
	}
	.elementor-widget-n-menu .e-n-menu-title-container {
		width: auto !important;
		flex: 1 1 auto !important;
		min-width: 0;
	}
	.elementor-widget-n-menu .e-n-menu-dropdown-icon {
		flex: 0 0 44px;
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-inline-start: auto;
	}
}
/* Touch screens keep :hover after a tap, so the tapped menu row stayed tinted. Only the
 * phone/tablet menu (white rows): the desktop header (≥1025px, e.g. an iPad in landscape)
 * has white text on red, which a white tab would erase. */
@media (hover: none) and (max-width: 1024px) {
	.elementor-widget-n-menu .e-n-menu-title:hover,
	.elementor-widget-n-menu .e-n-menu-title.e-focus {
		background: #fff !important;
	}
}
/* The menu panel is `position:fixed; top:94px` in the header's custom CSS, but the sticky
 * header is 124px tall (40px offer bar + 84px row), so the panel covered its bottom 30px.
 * buldog-ui.js writes the header's real bottom edge into --buldog-header-bottom. */
@media (max-width: 1024px) {
	.elementor-location-header.elementor .elementor-element.elementor-widget-n-menu .e-n-menu .e-n-menu-wrapper {
		top: var(--buldog-header-bottom, 124px) !important;
		max-height: calc(100dvh - var(--buldog-header-bottom, 124px)) !important;
	}
}
/* The header's custom CSS paints both the row (.e-n-menu-title) and the inner title block
 * white, then tints only the row on hover/open, so an open parent showed a white block
 * with tinted sides. Paint the row only; the open parent gets a soft full-width tint. */
@media (max-width: 1024px) {
	.elementor-location-header .elementor-widget-n-menu .e-n-menu .e-n-menu-item .e-n-menu-title .e-n-menu-title-container,
	.elementor-location-header .elementor-widget-n-menu .e-n-menu .e-n-menu-item .e-n-menu-title .e-n-menu-dropdown-icon {
		background: transparent !important;
	}
	.elementor-location-header .elementor-widget-n-menu .e-n-menu .e-n-menu-item .e-n-menu-title:has(.e-n-menu-dropdown-icon[aria-expanded='true']) {
		background: #fff4f1 !important;
	}
}

/* ---------- 4d. Desktop header menu, laptop widths ---------- */
/* The 8 top-level items add up to 1125px inside a 1080px row at 1280–1366px, so "מותגים"
 * wrapped onto a second line. Tighter item padding and 14px type keep them on one row. */
@media (min-width: 1025px) and (max-width: 1366px) {
	.elementor-location-header .elementor-widget-n-menu .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title {
		padding-inline: 8px !important;
	}
	.elementor-location-header .elementor-widget-n-menu .e-n-menu-heading > .e-n-menu-item .e-n-menu-title-container {
		font-size: 14px !important;
	}
	.elementor-location-header .elementor-widget-n-menu .e-n-menu-heading > .e-n-menu-item .e-n-menu-icon {
		margin-inline: 0 6px !important;
	}
}

/* ---------- 4e. 404 page ---------- */
@media (max-width: 767px) {
	body.error404 .site-main {
		padding: 32px 16px 40px;
	}
	body.error404 .page-header .entry-title {
		font-size: 24px;
	}
}

/* ---------- 4f. Cart page ---------- */
.buldog-ms-cart a.remove,
.buldog-ms-cart .buldog-ms-cart__remove,
.woocommerce-cart .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 4px;
}

/* ---------- 4g. Footer (77730, one responsive footer since 2026-10-13) ---------- */
/* Footer menus 1 + 4 share a row on phones. Elementor only writes a phone width for
 * full-width containers, and switching these boxed ones broke the desktop row. */
@media (max-width: 767px) {
	.elementor-77730 .elementor-element-417afa2,
	.elementor-77730 .elementor-element-040bac6 {
		--width: 50%;
	}
	.elementor-77730 .elementor-widget-nav-menu .elementor-nav-menu--main a {
		min-height: 40px;
		display: flex;
		align-items: center;
	}
}

/* ---------- 4c. Login / register forms ---------- */
/* The submit button is floated by WooCommerce and escaped the bordered form box. */
.woocommerce-form-login > .form-row:has(.woocommerce-form-login__submit),
.woocommerce-form-register > .form-row:has(.woocommerce-form-register__submit) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
}
.woocommerce-form-login__submit,
.woocommerce-form-register__submit {
	float: none !important;
}
/* Something pins the login form box to its initial height, so a notice added later pushed
 * the submit row out of the border. */
form.woocommerce-form-login,
form.woocommerce-form-register {
	height: auto !important;
	min-height: 0 !important;
}
.wfls-login-message.buldog-login-message {
	margin: 0 0 16px;
}
.wfls-login-message.buldog-login-message .woocommerce-error {
	margin: 0;
	border-radius: 10px;
}

/* ---------- 5. Account / login ---------- */
.woocommerce-form-login .woocommerce-Input,
.woocommerce-form-register .woocommerce-Input,
.woocommerce-ResetPassword .woocommerce-Input,
.woocommerce-EditAccountForm .woocommerce-Input {
	min-height: 48px;
	padding: 10px 14px;
	border-radius: 10px;
}
/* iOS zooms the page when a focused field is under 16px. Elementor Pro's my-account widget
 * sets 14px with a long selector, hence !important, touch layouts only. */
@media (max-width: 1024px), (pointer: coarse) {
	.woocommerce-account .woocommerce-form .woocommerce-Input,
	.woocommerce-account .woocommerce-form select,
	.woocommerce-account .woocommerce-form textarea {
		font-size: 16px !important;
	}
}

/* ---------- 5b. Archive product grids ---------- */
/* Grid tracks are `repeat(n, 1fr)` = minmax(auto, 1fr): a card whose category line does not
 * wrap makes its track wider than the screen, and the brand pages scrolled sideways by 143px.
 * `min-width: 0` lets the tracks shrink to the container. */
.elementor-wc-products ul.products > li.product,
.woocommerce ul.products > li.product,
.e-loop-item {
	min-width: 0;
}
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.woocommerce-ResetPassword .woocommerce-Button,
.woocommerce-EditAccountForm .woocommerce-Button {
	min-height: 48px;
	padding: 0 24px;
	border-radius: 10px;
	font-size: 16px;
}
.woocommerce-form-login .show-password-input,
.woocommerce-form-register .show-password-input {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
@media (max-width: 767px) {
	.woocommerce-form-login__submit,
	.woocommerce-form-register__submit {
		width: 100%;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 0 14px;
		border-radius: 10px;
	}
}

/* ---------- 6. Product page ---------- */
/* WooCommerce puts the zoom trigger in the gallery's top start corner, exactly where the
 * discount-rule labels sit. Park it at the bottom corner. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	top: auto;
	bottom: 0.5em;
	width: 40px;
	height: 40px;
	line-height: 40px;
}
@media (max-width: 767px) {
	.single-product .product_title,
	.single-product .elementor-widget-woocommerce-product-title .elementor-heading-title {
		text-align: start;
	}
	/* Tab strip / long text blocks: never let a wide child widen the page. */
	.single-product .elementor-location-single {
		overflow-x: clip;
	}
}

/* ---------- 6b. Listings on phones ---------- */
@media (max-width: 767px) {
	/* Loop carousels: swipe is the gesture; the 25px grey chevrons over the product photos
	 * go, the dots get a usable size. */
	.elementor-widget-loop-carousel .elementor-swiper-button {
		display: none !important; /* e-swiper.min.css sets inline-flex at (0,3,0) */
	}
	.elementor-widget-loop-carousel .swiper-pagination-bullet {
		width: 8px;
		height: 8px;
		margin: 0 4px !important;
	}
	/* WooCommerce archive toolbar (brand pages): drop the "showing all N results" line,
	 * make the sort select a proper 44px control. */
	.woocommerce-result-count {
		display: none;
	}
	.woocommerce-ordering {
		float: none;
		width: 100%;
		margin: 0 0 12px;
	}
	.woocommerce-ordering select {
		width: 100%;
		min-height: 44px;
		padding: 0 14px;
		border: 1px solid #e2e2e2;
		border-radius: 10px;
		background-color: #fff;
		font-size: 16px;
	}
	/* SKU line on the full card (text widget 0193c3c with the product-SKU tag): owner keeps
	 * it, so make it quiet on phones. */
	.elementor-107201 .elementor-element-0193c3c {
		font-size: 11px;
		color: #9ca3af;
		line-height: 1.3;
		overflow-wrap: anywhere;
	}
	/* Brand pages (wc-archive-products widget): 20px column gap left 151px cards and the
	 * add-to-cart label wrapped to three lines. */
	.elementor-wc-products ul.products {
		grid-column-gap: 12px !important;
		grid-row-gap: 16px !important;
	}
	/* Card add-to-cart: one line, compact padding, in any 2-column card width. */
	.buldog-loop-atc-wrap .price-add-to-cart .add_to_cart_button,
	.buldog-loop-atc-wrap .price-add-to-cart a.added_to_cart {
		white-space: nowrap;
		padding-inline: 8px;
		font-size: 15px;
		gap: 6px;
	}
	/* Card title: 3 lines max in the 2-column grid, no mid-word cuts. */
	.buldog-wc-loop-item--elementor .woocommerce-loop-product__title,
	.e-loop-item .elementor-widget-woocommerce-product-title .elementor-heading-title {
		font-size: 15px;
		line-height: 1.35;
		overflow-wrap: anywhere;
	}
}
/* Homepage section titles sit in bordered, rounded v4 flexboxes (styles live in generated
 * classes, not in the template data). Side by side on desktop they read as cards; stacked
 * on a phone they are just frames around a heading. Flatten them on phones. */
@media (max-width: 767px) {
	.elementor-94750 .e-flexbox-base:has(> .elementor-widget-icon-box:only-child) {
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
		padding: 4px 0 0 !important;
	}
	.elementor-94750 .e-flexbox-base:has(> .elementor-widget-icon-box:only-child) .elementor-icon-box-title {
		font-size: 22px;
	}
}
/* Homepage hero: the benefits strip (icon list 85581da) is hidden below 1200px, but its
 * white rounded wrapper (atomic flexbox 7672af3, styled through a v4 class) stayed as an
 * empty pill under the hero. Hide the wrapper with it. */
@media (max-width: 1200px) {
	.elementor-94750 .elementor-element-7672af3 {
		display: none;
	}
}

/* ---------- 6b2. Sticky bar line price ---------- */
.buldog-sticky-atc__price-qty {
	font-size: 0.78em;
	font-weight: 400;
	color: #6b7280;
	margin-inline-start: 4px;
}

/* ---------- 6b3. Product tabs, desktop: active tab in the site green ---------- */
@media (min-width: 768px) {
	body.single-product .elementor .woocommerce-tabs > ul.tabs > li.active > a {
		background: #f6fbf1 !important;
		box-shadow: inset 0 -3px 0 #85c854 !important;
		color: #252525 !important;
	}
	body.single-product .elementor .woocommerce-tabs > ul.tabs > li > a:is(:hover, :focus) {
		background: #f6fbf1 !important;
		color: #252525 !important;
	}
}

/* ---------- 6c. Product tabs as an accordion on phones ---------- */
/* Built by buldog-ui.js (buildTabsAccordion). The template's custom CSS boxes the tabs at
 * max-height 50dvh with an inner scroll; on phones that box resized with the browser bar. */
@media (max-width: 767px) {
	.single-product .woocommerce-tabs.buldog-tabacc {
		display: block !important;
		max-height: none !important;
		overflow: visible !important;
		padding: 0 !important;
		border: 0 !important;
	}
	/* The widget indents itself 12-18px to match the product-data boxes; on phones the
	 * accordion takes the full content width instead. */
	/* The product column is inset ~30px (margin 19.5 + padding 10); the accordion bleeds
	 * out to the page's 16px gutter. (0,4,1) beats the widget's own width/margin rules. */
	body.single-product .elementor .elementor-widget-woocommerce-product-data-tabs:has(.buldog-tabacc) {
		padding-inline: 0 !important;
		margin-inline: -14px !important;
		width: calc(100% + 28px) !important;
		max-width: none !important;
	}
	.single-product .woocommerce-tabs.buldog-tabacc > ul.tabs {
		display: none !important;
	}
	.buldog-tabacc__btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		min-height: 52px;
		margin: 0 0 8px;
		padding: 0 14px;
		border: 1px solid #e2e2e2;
		border-radius: 10px;
		background: #fff;
		color: #252525;
		font: inherit;
		font-size: 16px;
		font-weight: 700;
		text-align: start;
		cursor: pointer;
	}
	.buldog-tabacc__btn::after {
		content: '';
		flex: 0 0 auto;
		width: 9px;
		height: 9px;
		margin-inline-end: 4px;
		border: solid #6b7280;
		border-width: 0 0 2px 2px;
		transform: rotate(-45deg) translateY(-2px);
		transition: transform 0.2s ease;
	}
	/* Hello's reset paints any button #c36 (pink-purple) on hover/focus; keep ours white,
	 * and mark the open header with the site green instead. */
	.single-product .buldog-tabacc__btn:is(:hover, :focus, :focus-visible, :active) {
		background: #fff;
		color: #252525;
		border-color: #e2e2e2;
		outline: none;
	}
	.single-product .buldog-tabacc__btn[aria-expanded='true'],
	.single-product .buldog-tabacc__btn[aria-expanded='true']:is(:hover, :focus, :active) {
		margin-bottom: 0;
		border-radius: 10px 10px 0 0;
		border-bottom-color: transparent;
		background: #f6fbf1;
		color: #252525;
		box-shadow: inset 0 3px 0 #85c854;
	}
	.single-product .buldog-tabacc__btn[aria-expanded='true']::after {
		border-color: #3d7a22;
	}
	.buldog-tabacc__btn[aria-expanded='true']::after {
		transform: rotate(135deg) translateY(-2px);
	}
	.single-product .woocommerce-tabs.buldog-tabacc .woocommerce-Tabs-panel.buldog-tabacc__panel {
		display: block !important;
		height: 0 !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
	}
	.single-product .woocommerce-tabs.buldog-tabacc .woocommerce-Tabs-panel.buldog-tabacc--open {
		height: auto !important;
		margin: 0 0 8px !important;
		padding: 12px 14px 16px !important;
		overflow: visible !important;
		border: 1px solid #e2e2e2 !important;
		border-top: 0 !important;
		border-radius: 0 0 10px 10px !important;
	}
	.single-product .woocommerce-tabs.buldog-tabacc .woocommerce-Tabs-panel.buldog-tabacc--open > h2:first-child {
		display: none;
	}
}

/* ---------- 7. Floating accessibility button ---------- */
/* buldog-ui.js adds body.buldog-overlay-open while the cookie banner, the mini cart or the
 * mobile menu is open. The Ally button lives in a shadow root with inline !important
 * offsets, so the host is hidden instead of moved. */
body.buldog-overlay-open #ea11y-root {
	display: none !important;
}

/* ---------- 7b. Checkout inline validation ---------- */
/* WooCommerce only toggles .woocommerce-invalid on the field wrapper; the v4 checkout turned
 * the border red and said nothing. Say what is wrong, in Hebrew, under the field. */
.woocommerce-checkout .form-row.woocommerce-invalid::after {
	content: 'שדה חובה';
	display: block;
	margin-top: 6px;
	color: #d92d20;
	font-size: 13px;
	line-height: 1.3;
}
.woocommerce-checkout .form-row.woocommerce-invalid-email::after {
	content: 'כתובת האימייל לא תקינה';
}
.woocommerce-checkout .form-row.woocommerce-invalid-phone::after {
	content: 'מספר הטלפון לא תקין';
}
.woocommerce-checkout .form-row.woocommerce-invalid-postcode::after {
	content: 'המיקוד לא תקין';
}
.woocommerce-checkout .form-row.woocommerce-invalid:not(.woocommerce-invalid-required-field):not(.woocommerce-invalid-email):not(.woocommerce-invalid-phone):not(.woocommerce-invalid-postcode)::after {
	content: 'יש לתקן את השדה';
}
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select,
.woocommerce-checkout .form-row.woocommerce-invalid .select2-selection {
	border-color: #d92d20 !important;
}

/* ---------- 8. Notices ---------- */
@media (max-width: 767px) {
	.woocommerce-notices-wrapper .woocommerce-message,
	.woocommerce-notices-wrapper .woocommerce-info,
	.woocommerce-notices-wrapper .woocommerce-error {
		margin-inline: 16px;
		border-radius: 12px;
	}
}

/* ---------- 9. Product cards: buttons on one line across a row ----------
 * Cards (templates 107201 / 111823) end with optional parts — rating (only with reviews
 * on phones), SKU (not every product has one) — so the price and button sat at different
 * heights from card to card. Every card fills its grid/slider cell, the optional parts move
 * above the price, and the price + button pair is pushed to the bottom. */
.e-loop-item,
.buldog-wc-loop-item--elementor {
	height: 100%;
}
.e-loop-item > .elementor-section,
.buldog-wc-loop-item--elementor > .elementor > .elementor-section,
.buldog-wc-loop-item--elementor > .elementor,
.e-loop-item .elementor-container,
.buldog-wc-loop-item--elementor .elementor-container,
.e-loop-item .elementor-column,
.buldog-wc-loop-item--elementor .elementor-column {
	height: 100%;
}
.e-loop-item .elementor-widget-wrap,
.buldog-wc-loop-item--elementor .elementor-widget-wrap {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	height: 100%;
}
.e-loop-item .elementor-widget-wrap > .elementor-widget-woocommerce-product-rating,
.buldog-wc-loop-item--elementor .elementor-widget-wrap > .elementor-widget-woocommerce-product-rating {
	order: 1;
}
.e-loop-item .elementor-widget-wrap > .elementor-widget-text-editor,
.buldog-wc-loop-item--elementor .elementor-widget-wrap > .elementor-widget-text-editor {
	order: 2;
}
.e-loop-item .elementor-widget-wrap > .elementor-element.elementor-widget-woocommerce-product-price,
.buldog-wc-loop-item--elementor .elementor-widget-wrap > .elementor-element.elementor-widget-woocommerce-product-price {
	order: 3;
	margin-top: auto !important;
}
.e-loop-item .elementor-widget-wrap > .elementor-widget-buldog_loop_add_to_cart,
.buldog-wc-loop-item--elementor .elementor-widget-wrap > .elementor-widget-buldog_loop_add_to_cart {
	order: 4;
}
.e-loop-item .elementor-widget-wrap > .elementor-widget-buldog_berocket_loop_labels,
.buldog-wc-loop-item--elementor .elementor-widget-wrap > .elementor-widget-buldog_berocket_loop_labels {
	order: 5;
}
/* Swiper slides (homepage carousels) stretch to the tallest card in view. */
.elementor-loop-container.swiper-wrapper {
	align-items: stretch;
}
.elementor-loop-container.swiper-wrapper > .swiper-slide {
	height: auto;
}

/* ---------- 10. Read more: a text link (style.css). ---------- */
.buldog-read-more {
	margin-block: 4px;
}

/* ---------- 11. Cards loaded later (load more / infinite scroll) ease in ---------- */
@keyframes buldog-card-enter {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.buldog-card-enter {
	animation: buldog-card-enter 0.38s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
	.buldog-card-enter {
		animation: none;
	}
}
/* Infinite scroll fetches the next page when its anchor enters the viewport. Lift the
   (invisible) anchor 1.5 screens (phones 2.5) above the grid's end so the next cards arrive before the
   footer comes into view, instead of the footer showing and then being pushed down. */
.e-load-more-anchor {
	position: relative;
	top: -150vh;
	height: 1px;
	min-height: 0;
	pointer-events: none;
}
@media (max-width: 767px) {
	.e-load-more-anchor {
		top: -250vh;
	}
}
/* The spinner keeps one fixed slot under the grid; gone after the last page. While a page
   is loading the slot fills a screen, so a fast scroller sees the spinner rather than the
   footer arriving and then being pushed away. */
.e-load-more-spinner {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	min-height: 48px;
	padding-top: 12px;
}
.e-load-more-pagination-loading .e-load-more-spinner {
	min-height: 100vh;
}
.e-load-more-pagination-end .e-load-more-spinner {
	display: none;
}

/* ---------- 12. Text blocks: a divider line keeps a gap before the text under it ---------- */
.elementor-widget-text-editor hr {
	margin-bottom: 12px;
}