/*!
 * koala-product.css -- page-type CSS for single product pages (is_product()).
 *
 * REWRITTEN 2026-07-29 for the native, Elementor-free product template
 * (woocommerce/single-product.php + content-single-product.php) — Elementor
 * Removal Plan Phase 2. It used to be a stack of polish on top of Elementor's
 * generated post-34940.css; it is now the only source of product-page layout, so
 * the rules Elementor generated from widget settings live here in full.
 *
 * Every number in sections 1-11 came from one of two places: the geometry of the
 * Elementor build measured over the loopback tunnel at 375 / 768 / 1440
 * (getBoundingClientRect + getComputedStyle), or the declarations Elementor
 * generated into post-34940.css. Where the two disagreed the rendering wins —
 * e.g. the breadcrumb widget asked for 0.875rem but rendered at 1rem, because
 * koala-core.css overrides it sitewide.
 *
 * Sections 12+ are the pre-existing blocks (swatches, sticky bar, gallery
 * framing, WAPF option cards), unchanged apart from the two selectors that named
 * Elementor widgets.
 *
 * Companion to koala-core.css, which supplies the shared card treatment, the
 * button tokens and the breadcrumb sizing. Enqueued conditionally from the child
 * theme functions.php at priority 9999 with wapf-frontend and
 * woo-variation-swatches as dependencies, i.e. after WooCommerce's own
 * stylesheets — that ordering is what lets the equal-specificity rules below beat
 * woocommerce.css and woocommerce-smallscreen.css.
 *
 * NOT here: koala-hide-generic-delivery stays inline in
 * koala-shipping-class-rules.php (decided per product, 52 bytes).
 */

/* ==========================================================================
   1. Page shell + top row  (was containers 69057b13 / 416b361b / 752957ca)

   The Elementor build was a full-bleed flex row with 20px side padding whose
   boxed inner capped at 1200px; the two columns were 50% each with 10px of their
   own padding and no gap, so the visual gutter between them is 20px.
   ========================================================================== */

.kp-top{
	padding:0 20px;
}
.kp-top-inner{
	display:flex;
	flex-direction:row;
	gap:0;
	width:100%;
	max-width:1200px;
	margin-inline:auto;
}
.kp-summary,
.kp-gallery{
	display:flex;
	flex-direction:column;
	gap:20px;
	width:50%;
	min-width:0;
	padding:10px;
}

@media (max-width:767px){
	.kp-top-inner{
		flex-direction:column;
	}
	.kp-summary,
	.kp-gallery{
		width:100%;
	}
	.kp-summary{
		padding:10px 0 0;
	}
	.kp-gallery{
		padding:0;
		/* Gallery above the summary on phones (was _flex_order_mobile on the
		   gallery container). */
		order:-1;
		align-self:center;
	}
}

/* ==========================================================================
   2. Breadcrumb  (was widget 61345602)

   Sizing comes from koala-core.css sitewide (1rem, 0.9rem on phones). What was
   Elementor-scoped there — and therefore stopped matching when the widget went —
   is the link colour and the mobile "one scrollable line" treatment; both are
   reproduced here against our own markup. Order on phones puts the breadcrumb
   BELOW the title, which is what the Elementor build did via _flex_order_mobile
   on the title widget.
   ========================================================================== */

.kp-breadcrumb > a{
	color:#000000;
}
@media (max-width:767px){
	.kp-summary > .kp-breadcrumb{
		width:auto;
		max-width:100%;
		white-space:nowrap;
		overflow-x:auto;
		-webkit-overflow-scrolling:touch;
	}
	/* !important because koala-core.css pins the breadcrumb to 1rem !important
	   sitewide; the phone size lived in the Elementor-widget-scoped half of that
	   block, which no longer matches anything here. */
	.kp-summary > .kp-breadcrumb,
	.kp-summary > .kp-breadcrumb a{
		font-size:0.9rem !important;
	}
}

/* ==========================================================================
   3. Title  (was widget 6a78a3ad)

   `.kp-page` is in the selector only to out-rank `.elementor-kit-798 h1`, which
   still carries the site's h1 colour/weight from the Elementor kit and would
   otherwise win the font-size. Width is auto + align-self start so the heading
   shrink-wraps to its text at the inline start (= right, in RTL) exactly as the
   widget did.
   ========================================================================== */

.kp-page .kp-title{
	width:auto;
	max-width:100%;
	align-self:flex-start;
	margin:0;
	font-family:"Assistant",sans-serif;
	font-size:clamp(1.6rem, 1.5308rem + 0.3077vw, 1.75rem);
	/* Elementor's .elementor-heading-title sets line-height:1; without it the
	   heading is 5-10px taller and everything below shifts down. */
	line-height:1;
}
@media (max-width:767px){
	/* Only the TEXT centres on phones (align_mobile:center). The box stays
	   width:auto and align-self:flex-start, i.e. shrink-wrapped against the right
	   edge in RTL — forcing width:100% here moves a short title 8.5px left. */
	.kp-page .kp-title{
		text-align:center;
		order:-1;
	}
}

/* ==========================================================================
   4. Dots divider  (was the two `divider` widgets, style dots_tribal)

   Elementor masked a solid colour with a data-URI SVG and inlined that URI into
   the HTML twice per page. Same technique, but the URI lives here so it is
   fetched and cached once.
   ========================================================================== */

.kp-divider{
	display:flex;
	padding-block:2px;
	--kp-divider-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet' overflow='visible' height='100%25' viewBox='0 0 126 26' fill='black' stroke='none'%3E%3Cpath d='M3,10.2c2.6,0,2.6,2,2.6,3.2S4.4,16.5,3,16.5s-3-1.4-3-3.2S0.4,10.2,3,10.2z M18.8,10.2c1.7,0,3.2,1.4,3.2,3.2s-1.4,3.2-3.2,3.2c-1.7,0-3.2-1.4-3.2-3.2S17,10.2,18.8,10.2z M34.6,10.2c1.5,0,2.6,1.4,2.6,3.2s-0.5,3.2-1.9,3.2c-1.5,0-3.4-1.4-3.4-3.2S33.1,10.2,34.6,10.2z M50.5,10.2c1.7,0,3.2,1.4,3.2,3.2s-1.4,3.2-3.2,3.2c-1.7,0-3.3-0.9-3.3-2.6S48.7,10.2,50.5,10.2z M66.2,10.2c1.5,0,3.4,1.4,3.4,3.2s-1.9,3.2-3.4,3.2c-1.5,0-2.6-0.4-2.6-2.1S64.8,10.2,66.2,10.2z M82.2,10.2c1.7,0.8,2.6,1.4,2.6,3.2s-0.1,3.2-1.6,3.2c-1.5,0-3.7-1.4-3.7-3.2S80.5,9.4,82.2,10.2zM98.6,10.2c1.5,0,2.6,0.4,2.6,2.1s-1.2,4.2-2.6,4.2c-1.5,0-3.7-0.4-3.7-2.1S97.1,10.2,98.6,10.2z M113.4,10.2c1.2,0,2.2,0.9,2.2,3.2s-0.1,3.2-1.3,3.2s-3.1-1.4-3.1-3.2S112.2,10.2,113.4,10.2z'/%3E%3C/svg%3E");
}
.kp-divider__line{
	display:block;
	direction:ltr;
	width:var(--kp-divider-width,80%);
	min-height:15px;
	background-color:var(--koala-green,#519C3D);
	-webkit-mask-image:var(--kp-divider-url);
	mask-image:var(--kp-divider-url);
	-webkit-mask-repeat:repeat-x;
	mask-repeat:repeat-x;
	-webkit-mask-size:auto 100%;
	mask-size:auto 100%;
}
.kp-divider--center .kp-divider__line{
	margin-inline:auto;
}
@media (max-width:767px){
	/* align_mobile:center on the summary divider */
	.kp-summary .kp-divider__line{
		margin-inline:auto;
	}
}

/* ==========================================================================
   5. Short description  (was widget 7d299ed7)

   The negative block margins on phones are the widget's own
   `margin:-29px 0 -31px` — they pull the excerpt tight against the title block
   and the add-to-cart. Reproduced rather than "fixed": removing them shifts
   everything below by 60px.
   ========================================================================== */

/* The margins go on .kp-shortdesc (the widget div's stand-in), never on
   .woocommerce-product-details__short-description itself — that inner div keeps
   WooCommerce's defaults so its last paragraph's bottom margin collapses out of
   it exactly as it did under Elementor.
   Scoping matters twice over: this file is enqueued on every is_product() view,
   so an unscoped rule on the bare WooCommerce class also restyles product pages
   still rendered by Elementor — which silently corrupted the parity baseline this
   CSS was being measured against. */
.kp-shortdesc{
	margin:0;
}
@media (max-width:767px){
	.kp-shortdesc{
		margin:-29px 0 -31px;
		padding:0;
	}
}

/* ==========================================================================
   6. Add to cart  (was widget fb937a9)

   WooCommerce floats the summary and images at 48% by default; the widget reset
   that and so must we, or the gallery collapses inside its 50% column.
   ========================================================================== */

.woocommerce div.product .kp-atc{
	padding:1vw 0 0 1vw;
}
@media (max-width:767px){
	.woocommerce div.product .kp-atc{
		margin-top:20px;
		padding:1vw 0 0 1vw;
	}
}

/* --- Form layout ---
   The widget laid the quantity box and the button out as a nowrap flex row and
   stretched the input to the row height, which is what made the two exactly the
   same height (44px). WooCommerce's stock markup is inline-block, so the input
   ends up 4px taller than the button without this. */
.woocommerce div.product .kp-atc form.cart{
	margin:0;
}
.woocommerce div.product .kp-atc form.cart.variations_form .woocommerce-variation-add-to-cart,
.woocommerce div.product .kp-atc form.cart:not(.grouped_form):not(.variations_form){
	display:flex;
	flex-wrap:nowrap;
}
/* The #content twin again: WooCommerce puts a 4px side margin on .quantity via
   an ID-carrying selector, which the Elementor build never triggered — computed
   margin there is 0. Without this the gap between the quantity box and the
   button is 24px instead of the 20px --button-spacing asked for. */
.woocommerce div.product .kp-atc form.cart .quantity,
.woocommerce #content div.product .kp-atc form.cart .quantity{
	margin:0;
	vertical-align:middle;
}
.woocommerce div.product .kp-atc .quantity .qty{
	margin-inline-end:0;
	vertical-align:top;
}
.woocommerce div.product .kp-atc .quantity input{
	height:100%;
}
/* Gap between the quantity box and the button (was --button-spacing:20px). */
.woocommerce div.product .kp-atc form.cart .button:not(:first-child),
.woocommerce div.product .kp-atc form.cart button:not(:first-child){
	margin-block-start:0;
	margin-inline-start:20px;
}

/* --- Button + quantity --- */
.woocommerce div.product .kp-atc .cart button,
.woocommerce div.product .kp-atc .cart .button{
	font-family:"Assistant",sans-serif;
	font-size:1.2rem;
	border-radius:5px;
	color:#FFFFFF;
	background-color:var(--koala-green,#519C3D);
	border-color:#000;
	transition:all .2s;
}
.woocommerce div.product .kp-atc .cart button:hover,
.woocommerce div.product .kp-atc .cart .button:hover{
	color:#FFFFFF;
	background-color:#000;
	border-color:#000000;
}
.woocommerce div.product .kp-atc .added_to_cart{
	font-size:8px;
}
.woocommerce div.product .kp-atc .quantity .qty{
	font-family:"Assistant",sans-serif;
	font-size:clamp(1.2rem, 1.1769rem + 0.1026vw, 1.25rem);
	border-radius:5px;
	color:#000;
	background-color:#FFF;
	border-color:#000;
	transition:all .2s;
}
/* --- Variations --- */
.woocommerce div.product .kp-atc form.cart table.variations label{
	color:#000;
	font-family:"Assistant",sans-serif;
	font-size:0.875rem;
}
.woocommerce div.product .kp-atc form.cart table.variations td.value select,
.woocommerce div.product .kp-atc form.cart table.variations td.value:before{
	font-family:"Assistant",sans-serif;
	font-size:0.875rem;
	border-radius:5px;
}

/* ==========================================================================
   7. Price + SKU grid  (was container b265342 with widgets 3e8f40fc / 2f4e6c7)
   ========================================================================== */

.kp-meta{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	grid-auto-flow:row;
	gap:20px;
	padding:10px;
}
@media (max-width:767px){
	.kp-meta{
		grid-template-columns:repeat(1,1fr);
	}
}
.woocommerce div.product .kp-meta .price{
	color:#000000;
	font-family:"Assistant",sans-serif;
	font-size:clamp(1.8rem, 1.7077rem + 0.4103vw, 2rem);
}
.woocommerce div.product .kp-meta .price ins{
	font-family:"Assistant",sans-serif;
	font-size:clamp(2.1rem, 1.9154rem + 0.8205vw, 2.5rem);
	text-decoration:none;
}
.rtl .woocommerce div.product .kp-meta .price del{
	margin-left:0;
}

/* ==========================================================================
   8. Shipping USP list  (was the `icon-list` widget 1ccef45a)

   Elementor spaced items with half the 7px "space between" on each side of the
   boundary — padding-block-end on all but the last, margin-block-start on all
   but the first. Reproduced literally so the list height matches.
   ========================================================================== */

.kp-usps{
	margin:0;
	padding:0;
	list-style:none;
}
.kp-usps__item{
	display:flex;
	align-items:flex-start;
	margin:0;
	font-family:"Assistant",sans-serif;
	font-size:1.2rem;
	color:#000000;
}
.kp-usps__item:not(:last-child){
	padding-block-end:calc(7px / 2);
}
.kp-usps__item:not(:first-child){
	margin-block-start:calc(7px / 2);
}
.kp-usps__icon{
	flex:0 0 auto;
	display:inline-flex;
	align-items:center;
	justify-content:flex-start;
	font-size:15px;
	color:#000;
	padding-inline-end:11px;
	transition:color .3s;
}
.kp-usps__icon i{
	font-size:15px;
	line-height:inherit;
}
/* Inline SVG replacing the Font Awesome glyphs (koala_product_usps()). Sized in
   `em` off the 15px above, so it matches the webfont's optical size; `block`
   drops the inline-baseline descender gap the flex row would otherwise inherit. */
.kp-usps__svg{
	display:block;
}
.kp-usps__text{
	min-width:0;
	color:#000000;
	transition:color .3s;
}
@media (max-width:767px){
	.kp-usps__item{
		font-size:18px;
	}
}

/* ==========================================================================
   9. Gallery  (was widget 7ea00d0a)

   WooCommerce's own `div.images{width:48%;float:left}` has to go: the gallery
   already sits in a 50% column. Elementor's widget did the same reset.
   ========================================================================== */

/* `#content` is in the second selector to out-specify WooCommerce's
   `.woocommerce #content div.product div.images{width:48%;float:right}` — an
   ID-carrying rule (1,2,2) that our `main` element triggers because it has
   id="content". The Elementor build had no #content wrapper, so that rule never
   fired there and the gallery filled its column. Without this the gallery
   collapses to 48% of its 50% column at >=768px (woocommerce-smallscreen resets
   it below that, which is why only desktop broke). */
.woocommerce div.product .kp-gallery div.images,
.woocommerce #content div.product .kp-gallery div.images{
	width:100%;
	float:none;
	/* WooCommerce's own `div.images{margin-bottom:2em}` is deliberately kept — the
	   Elementor widget did not reset it either, and on phones (where the gallery
	   stacks above the summary) those 32px are real spacing between the two. */
}
/* Same #content problem as above: WooCommerce ships ID-carrying resets
   (`.woocommerce #content div.product div.images .flex-control-thumbs{margin:0}`
   and friends) that beat a plain class selector, so each of these needs the
   #content twin or the thumbnails come out 1.8px narrow and the slider loses its
   5px gap. */
.woocommerce div.product .kp-gallery .flex-viewport:not(:last-child),
.woocommerce #content div.product .kp-gallery .flex-viewport:not(:last-child){
	margin-bottom:5px;
}
.woocommerce div.product .kp-gallery .flex-control-thumbs,
.woocommerce #content div.product .kp-gallery .flex-control-thumbs{
	margin-inline:calc(-7px / 2);
}
.woocommerce div.product .kp-gallery .flex-control-thumbs li,
.woocommerce #content div.product .kp-gallery .flex-control-thumbs li{
	padding-inline:calc(7px / 2);
	padding-bottom:7px;
}
.woocommerce div.product .kp-gallery .flex-control-thumbs img,
.woocommerce #content div.product .kp-gallery .flex-control-thumbs img{
	border:1px solid #E0D4D4;
	border-radius:5px;
	/* flexslider builds these thumbnails in JS with no width/height attribute, so
	   until each file arrives the row is 2px tall and the whole nav collapses —
	   measured 2026-08-06 as a 36px -> 467px jump, i.e. 0.65 CLS on everything
	   below the gallery. The crop WooCommerce hands the nav is always square. */
	aspect-ratio:1;
	height:auto;
}

/* ==========================================================================
   10. Tabs / mobile accordion  (was the `nested-tabs` widget 24081355 and the
       inline jQuery `html` widget b38db80)

   Desktop: a tablist above one visible panel. Phones (<=767): the tablist is
   gone and each panel carries its own disclosure header. Both affordances are in
   the markup and CSS alone decides which is live, so the correct state paints
   before koala-product-tabs.js runs.
   ========================================================================== */

/* The block padding here is not decoration — it reproduces two things that were
   invisible in the Elementor source. The boxed container's `.e-con-inner` carried
   `padding:10px 0`, and the container had a SECOND flex child: the `html` widget
   holding the old inline jQuery tab handler. That widget rendered a zero-height
   div, but it still took the container's 20px row gap, which is why the block
   ends 30px (10 + 20) below the shadowed box rather than 10px. */
.kp-tabs-wrap{
	margin-top:70px;
	padding:10px 10px 30px;
}
.kp-tabs-inner{
	max-width:1200px;
	margin-inline:auto;
	padding:30px 20px 40px;
	box-shadow:0 0 10px 0 rgba(0,0,0,.09);
	/* No border: the widget had _border_width and _border_color set but never a
	   border STYLE, so Elementor emitted width/colour with style:none and nothing
	   was drawn. Adding a real 1px border here makes the inner content 1158px
	   instead of 1160px. */
}
@media (max-width:1024px){
	.kp-tabs-wrap{
		margin-top:50px;
	}
	.kp-tabs-inner{
		padding:30px 20px;
	}
}
@media (max-width:767px){
	.kp-tabs-inner{
		padding:20px;
	}
}

/* --- Tab strip --- */
.kp-tabs__list{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	gap:6px;
	margin-bottom:19px;
}
.kp-tabs__tab{
	flex:0 0 content;
	appearance:none;
	margin:0;
	padding:8px 22px;
	font-family:"Assistant",sans-serif;
	font-size:22px;
	font-weight:500;
	line-height:1.5;
	color:#00000070;
	background:#FFFFFF;
	border:0;
	border-bottom:2px solid #00000070;
	border-radius:0;
	cursor:pointer;
	transition:color .3s,border-color .3s,background-color .3s;
}
.kp-tabs__tab:hover,
.kp-tabs__tab.is-active,
.kp-tabs__tab[aria-selected="true"]{
	color:var(--koala-green,#519C3D);
	background:#FFF;
	border-bottom-color:var(--koala-green,#519C3D);
}

/* --- Panels --- */
.kp-tabs__panel{
	display:none;
	padding:12px 33px;
}
.kp-tabs__panel.is-active{
	display:block;
}
.kp-tabs__acc{
	display:none;
}
@media (max-width:1024px){
	.kp-tabs__panel{
		padding:12px 20px;
	}
}

/* --- Phones: accordion --- */
@media (max-width:767px){
	.kp-tabs__list{
		display:none;
	}
	.kp-tabs__panel,
	.kp-tabs__panel.is-active{
		display:block;
		padding:0;
	}
	.kp-tabs__panel + .kp-tabs__panel{
		border-top:1px solid #EEEEEE;
	}
	.kp-tabs__acc{
		display:block;
		margin:0;
		font-size:inherit;
	}
	.kp-tabs__acc-btn{
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:10px;
		width:100%;
		appearance:none;
		margin:0;
		padding:14px 0;
		font-family:"Assistant",sans-serif;
		font-size:18px;
		font-weight:500;
		line-height:1.5;
		text-align:start;
		color:#00000070;
		background:none;
		border:0;
		cursor:pointer;
	}
	.kp-tabs__panel.is-active .kp-tabs__acc-btn{
		color:var(--koala-green,#519C3D);
	}
	.kp-tabs__acc-icon{
		flex:0 0 auto;
		width:10px;
		height:10px;
		border-right:2px solid currentColor;
		border-bottom:2px solid currentColor;
		transform:rotate(45deg);
		transform-origin:center;
		transition:transform .2s var(--koala-ease,ease);
	}
	.kp-tabs__panel.is-active .kp-tabs__acc-icon{
		transform:rotate(-135deg);
	}
	.kp-tabs__body{
		display:none;
		padding-bottom:14px;
	}
	.kp-tabs__panel.is-active .kp-tabs__body{
		display:block;
	}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
	.kp-tabs__acc-icon{
		transition:none;
	}
}

/* --- Panel content --- */
.kp-tabs__body{
	font-family:"Assistant",sans-serif;
	font-size:1rem;
	color:#000000;
}
/* The מפרט table: Elementor's widget added this via its own custom CSS. */
.woocommerce .kp-tabs__body table.shop_attributes td{
	padding-right:10px;
}
.kp-tabs__body .wpcf7{
	max-width:57%;
	margin-inline:auto;
}
@media (max-width:1024px){
	.kp-tabs__body .wpcf7{
		max-width:100%;
	}
}

/* ==========================================================================
   11. CF7 product form  (was the Elementor Pro `form` widget 1f466db6)
   ========================================================================== */

.kp-form__row{
	margin-bottom:12px;
}
.kp-form__row input[type="text"],
.kp-form__row input[type="tel"],
.kp-form__row input[type="email"],
.kp-form__row textarea{
	width:100%;
	font-family:"Assistant",sans-serif;
}
.kp-form__accept{
	font-size:.9rem;
}
.kp-form__submit{
	text-align:center;
}
/* 15px, not the 22px the widget asked for: Elementor stored that size with
   unit "custom", so it emitted `font-size:22` with no unit — invalid, ignored,
   and the button has always rendered at the inherited 15px. Reproduced as-is so
   this swap stays diffable; bumping it to 22px is a one-line change. */
.kp-form__submit input[type="submit"]{
	font-family:"Assistant",sans-serif;
	font-size:15px;
	color:#FFF;
	background-color:var(--koala-green,#519C3D);
	border:none;
	border-radius:100px;
	padding:12px 44px;
	cursor:pointer;
	transition:background-color .2s;
}
.kp-form__submit input[type="submit"]:hover{
	background-color:#000000;
}

/* ==========================================================================
   12. Related products  (was widget 79a99f81)

   Same card treatment as the archive grid (see koala-archive.css §4) — the two
   widgets shared their settings — but scoped to .kp-related so the two files
   never fight. `.woocommerce` is in the grid selectors on purpose: that is
   (0,4,2), the same specificity as woocommerce-layout.css's float rule, and this
   file loads later so the tie goes to us.
   ========================================================================== */

.kp-related{
	padding:0 20px;
	margin-top:30px;
}
.kp-related-inner{
	max-width:1200px;
	margin-inline:auto;
}
.woocommerce .kp-related section.related > h2,
.woocommerce .kp-related section.up-sells > h2{
	text-align:center;
	margin-bottom:80px;
}
.kp-related ul.products{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	column-gap:2rem;
	row-gap:4rem;
	margin:0;
	padding:0;
	list-style:none;
}
.kp-related ul.products::before,
.kp-related ul.products::after{
	content:none;
	display:none;
}
.woocommerce .kp-related ul.products li.product{
	display:var(--button-align-display,flex);
	flex-direction:var(--button-align-direction,column);
	justify-content:var(--button-align-justify,space-between);
	float:none;
	width:auto;
	margin:0;
	padding:0;
	text-align:center;
}
.kp-related ul.products li.product a.woocommerce-loop-product__link{
	display:block;
	position:relative;
}
.kp-related ul.products li.product .attachment-woocommerce_thumbnail,
.kp-related ul.products li.product .woocommerce-placeholder{
	border:1px solid #C9C1C152;
	border-radius:6px;
	margin-bottom:7px;
}
.kp-related ul.products li.product .woocommerce-loop-product__title{
	color:#54595F;
	font-family:"Assistant",sans-serif;
	font-size:1.2rem;
	line-height:25px;
}
.kp-related ul.products li.product .price,
.kp-related ul.products li.product .price del,
.kp-related ul.products li.product .price ins{
	color:#000;
	font-family:"Assistant",sans-serif;
	font-size:clamp(1.2rem, 1.1769rem + 0.1026vw, 1.25rem);
}
.woocommerce .kp-related ul.products li.product .button{
	color:#FFF;
	background-color:var(--koala-green,#519C3D);
	font-family:"Assistant",sans-serif;
	font-size:0.875rem;
	margin-top:0;
}
.woocommerce .kp-related ul.products li.product .button:hover{
	color:#FFF;
	background-color:#000;
}
.kp-related ul.products li.product span.onsale{
	display:block;
	background-color:var(--koala-green,#519C3D);
	font-family:"Assistant",sans-serif;
	font-size:1rem;
	font-weight:bold;
	right:auto;
	left:0;
	margin:-20px;
	padding:0;
}
@media (max-width:1024px){
	.kp-related ul.products{
		column-gap:1rem;
		row-gap:1rem;
	}
	.kp-related ul.products li.product .woocommerce-loop-product__title{
		line-height:1.5em;
	}
	.woocommerce .kp-related section.related > h2{
		margin-bottom:80px;
	}
}
@media (max-width:767px){
	.kp-related ul.products{
		grid-template-columns:repeat(2,1fr);
		column-gap:1.5rem;
		row-gap:1.5rem;
	}
	.kp-related ul.products li.product .woocommerce-loop-product__title{
		font-size:14px;
		line-height:1.2em;
		margin-bottom:10px;
	}
	.woocommerce .kp-related section.related > h2{
		margin-bottom:26px;
	}
}

/* ==========================================================================
   13. Tail divider  (was container 6fa5ec06)

   The Elementor build ended with this divider AND an upsells widget, but the
   upsell widget has been display:none since the redesign, so the divider alone
   is what has ever been on screen. See content-single-product.php.
   ========================================================================== */

.kp-tail{
	padding:60px 20px 40px;
}
.kp-tail .kp-divider{
	max-width:1200px;
	margin-inline:auto;
}

/* ==========================================================================
   14. Variation swatches: brand-green selected state, comfortable spacing
   (was koala-product-page, redesign Phase 4 — unchanged)
   ========================================================================== */

/* Radio / label rows (this site's default): clear gaps + roomy padding so
   rows don't sit flush against each other or against their own border. */
.woo-variation-swatches .radio-variable-items-wrapper .variable-item.radio-variable-item{
	margin:0 0 10px 0!important;
	min-height:0;
	padding:9px 14px!important;
	border-radius:var(--koala-radius-sm,10px)!important;
	border:1.5px solid rgba(28,43,33,.16)!important;
	background:#fff;
	box-shadow:none!important;
	transition:border-color .2s var(--koala-ease,ease),background-color .2s;
}
.woo-variation-swatches .radio-variable-items-wrapper .variable-item.radio-variable-item:last-child{
	margin-bottom:0!important;
}
.woo-variation-swatches .radio-variable-item .variable-item-contents{
	gap:10px;
	padding-inline:2px;
}
.woo-variation-swatches .radio-variable-item .variable-item-radio-value,
.woo-variation-swatches .radio-variable-item .variable-item-radio-value-wrapper{
	font-size:.95rem;
	font-weight:600;
}
/* Square colour / image / button swatches, if a product uses them */
.woo-variation-swatches .variable-items-wrapper:not(.radio-variable-items-wrapper) .variable-item{
	min-width:46px;
	min-height:46px;
	margin:0 8px 8px 0;
	padding:8px 14px;
	border-radius:var(--koala-radius-sm,10px);
	border:1.5px solid rgba(28,43,33,.18);
	font-size:1rem;
	font-weight:600;
	line-height:1.2;
	transition:border-color .2s var(--koala-ease,ease),transform .15s;
}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
	.woo-variation-swatches .variable-items-wrapper .variable-item:hover{
		border-color:var(--koala-green,#519C3D);
	}
}
/* Selected state (both layouts) — brand green */
.woo-variation-swatches .variable-items-wrapper .variable-item.selected,
.woo-variation-swatches .variable-items-wrapper .variable-item[aria-checked="true"]{
	border-color:var(--koala-green,#519C3D)!important;
	background:var(--koala-green-tint,#eef6ea)!important;
	box-shadow:0 0 0 1px var(--koala-green,#519C3D) inset!important;
}

/* --- Product add-ons box: breathing room so the add-to-cart button doesn't
       sit flush against the add-on ("bag pack") box border --- */
.single-product .wc-pao-addons-container{
	margin-top:12px;
	margin-bottom:22px;
}
.ksa-pulse{
	animation:ksaPulse 1.2s var(--koala-ease,ease);
}
@keyframes ksaPulse{
	0%,100%{transform:none;}
	20%,60%{transform:scale(1.03);}
}
@media (prefers-reduced-motion:reduce){
	.ksa-pulse{animation:none;}
}

/* --- Gallery: softer framing (kept light so the zoom/lightbox still works) --- */
.woocommerce-product-gallery img{
	border-radius:var(--koala-radius-sm,10px);
}
.flex-control-thumbs li img{
	border-radius:8px;
}

/* ==========================================================================
   15. Mobile sticky add-to-cart bar (koala-product-page.php — unchanged)
   ========================================================================== */

#koala-sticky-atc{display:none;}
@media (max-width:768px){
	#koala-sticky-atc{
		display:flex;
		align-items:center;
		gap:12px;
		position:fixed;
		inset-inline:0;
		bottom:0;
		z-index:9990;
		background:rgba(255,255,255,.97);
		-webkit-backdrop-filter:blur(8px);
		backdrop-filter:blur(8px);
		border-top:1px solid rgba(28,43,33,.1);
		padding:10px 14px;
		padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
		transform:translateY(130%);
		transition:transform .3s var(--koala-ease,ease);
		box-shadow:0 -8px 24px -12px rgba(28,43,33,.25);
	}
	#koala-sticky-atc.ksa-show{transform:translateY(0);}
	#koala-sticky-atc .ksa-info{
		display:flex;
		align-items:center;
		gap:10px;
		flex:1 1 auto;
		min-width:0;
	}
	#koala-sticky-atc .ksa-info img{
		width:46px;
		height:46px;
		object-fit:cover;
		border-radius:8px;
		flex:0 0 auto;
	}
	#koala-sticky-atc .ksa-text{
		display:flex;
		flex-direction:column;
		min-width:0;
	}
	#koala-sticky-atc .ksa-title{
		font-size:.85rem;
		font-weight:600;
		color:var(--koala-ink,#1c2b21);
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		max-width:100%;
	}
	#koala-sticky-atc .ksa-price{
		font-size:.95rem;
		font-weight:700;
		color:var(--koala-green-dark,#3e7a2f);
	}
	#koala-sticky-atc .ksa-price del{opacity:.5;font-weight:500;font-size:.8rem;margin-inline-end:4px;}
	#koala-sticky-atc .ksa-btn{
		flex:0 0 auto;
		border:0;
		border-radius:var(--koala-radius-sm,10px);
		background:var(--koala-green,#519C3D);
		color:#fff;
		font-size:1rem;
		font-weight:700;
		padding:12px 22px;
		cursor:pointer;
		transition:background-color .2s,transform .15s;
	}
	#koala-sticky-atc .ksa-btn:active{transform:scale(.97);}
	#koala-sticky-atc .ksa-btn:hover{background:var(--koala-green-dark,#3e7a2f);}
}
@media (max-width:768px) and (prefers-reduced-motion:reduce){
	#koala-sticky-atc{transition:none;}
}

/* ==========================================================================
   16. koala-wapf-fixes
   Advanced Product Fields option cards + totals (Code Snippets #8 — unchanged)
   ========================================================================== */

/* ---------- totals ---------- */
.rtl .wapf-product-totals div span:last-child{float:left}
.wapf-product-totals .wapf--inner>div{display:flex;justify-content:space-between;gap:1rem}
.wapf-product-totals div span:last-child{float:none !important}
.wapf-product-totals .wapf--inner>div:last-child{
	font-size:1.08rem;border-top:1px solid #e5e7eb;padding-top:.7rem;margin-top:.2rem;
}

/* ---------- field label ---------- */
.wapf-field-products .wapf-field-label label{font-weight:700;font-size:1.05rem;line-height:1.35}
.wapf-field-products .wapf-field-description{margin-top:.35rem}

/* ---------- one option per row ---------- */
.wapf-field-products .wapf-card-wrap{--wapf-cols:1;--wapf-cols-t:1;--wapf-cols-m:1;gap:.6rem}

/* ---------- the card ---------- */
.wapf-field-products .wapf-card{
	border:1px solid #e3e6ea;border-radius:10px;background:#fff;
	transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.wapf-field-products .wapf-card:hover{border-color:#c9cfd6}
.wapf-field-products .wapf-card.koala-selected{
	border-color:#7cb342;background:#f7faf3;box-shadow:0 0 0 1px #7cb342 inset;
}
.wapf-field-products .wapf-card-inner{padding:.8rem;gap:.8rem;align-items:center}
.wapf-field-products .wapf-card-img img{width:56px;height:56px;max-width:56px;max-height:56px}

/* text on one side, price + stepper on the other - fills the empty space */
.wapf-field-products .wapf-card-row{display:contents}
.wapf-field-products .wapf-card-body{
	display:grid;grid-template-columns:1fr auto;
	align-items:center;column-gap:1rem;row-gap:.25rem;
}
.wapf-field-products .wapf-card-title{grid-column:1;grid-row:1;font-weight:600;font-size:1rem;line-height:1.3}
.wapf-field-products .wapf-card-price{grid-column:2;grid-row:1;justify-self:end;font-weight:700;font-size:1.05rem;white-space:nowrap}
.wapf-field-products .wapf-card-desc{grid-column:1;grid-row:2;font-size:.85rem;opacity:.9;line-height:1.3}
.wapf-field-products .wapf-card-qty{grid-column:2;grid-row:2;justify-self:end;width:auto}
.wapf-field-products .wapf-card-wrap > *:not(:first-child) .wapf-card-desc{color:#2e7d32;font-weight:600;opacity:1}

/* ---------- quantity stepper: square buttons, quiet glyphs ---------- */
.wapf-field-products .apf-plusmin{
	--apf-input-height:40px;
	height:40px;width:auto;max-width:none;
	border:1px solid #d3d8de;border-radius:8px;overflow:hidden;background:#fff;
}
.wapf-field-products .apf-plusmin button{
	flex:0 0 40px;max-width:40px;width:40px;border-radius:0;
}
.wapf-field-products .apf-plusmin button svg{width:13px;height:13px}
.wapf-field-products .apf-plusmin input{
	flex:0 0 44px;min-width:44px;width:44px;padding:0;
	text-align:center;font-size:.95rem;font-weight:600;
}

@media (max-width:420px){
	.wapf-field-products .wapf-card-inner{gap:.6rem;padding:.7rem}
	.wapf-field-products .wapf-card-img img{width:46px;height:46px;max-width:46px;max-height:46px}
	.wapf-field-products .wapf-card-title{font-size:.95rem}
	.wapf-field-products .apf-plusmin button{flex:0 0 36px;max-width:36px;width:36px}
	.wapf-field-products .apf-plusmin input{flex:0 0 40px;min-width:40px;width:40px}
	.wapf-field-products .apf-plusmin{height:36px;--apf-input-height:36px}
}







/* ==========================================================================
   15. Bag pack picker (added 2026-07-30)

   A bag product's packaging attribute is rendered as one card per pack:
   thumbnail, pack name, price, price per bag and the saving.

   The card is the inner .koala-pack div, NOT the <li>. woo-variation-swatches and
   section 14 both style .variable-item heavily (border, grey ring, centring) and
   win specificity races in ways that are tedious to chase, so snippet #14 strips
   the <li> back to a bare wrapper with inline styles - which outrank any
   stylesheet - and everything visual lives on a div neither of them targets.

   Markup and the <li> reset: snippet #14 "בחירת אריזה - עמוד מוצר שקיות".
   ========================================================================== */

.woo-variation-swatches .variable-items-wrapper.koala-pack-list,
ul.variable-items-wrapper.koala-pack-list {
	display: flex !important;
	flex-direction: column;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
	list-style: none !important;
}

.koala-pack-list .variable-item::before,
.koala-pack-list .variable-item::after {
	content: none !important;
	display: none !important;
}

/* ---- the card ----
   The plugin styles .variable-item .variable-item-contents (flex + centring) at a
   higher specificity than a short .koala-pack selector, which silently kept the
   grid from applying. Hence the long selector plus !important on the properties
   that decide the layout. */
.woo-variation-swatches .variable-items-wrapper.koala-pack-list .variable-item .variable-item-contents.koala-pack,
.koala-pack-list .variable-item .variable-item-contents.koala-pack,
.koala-pack-list .variable-item-contents.koala-pack {
	display: grid !important;
	direction: rtl !important;
	grid-template-columns: auto minmax(0, 1fr) auto !important;
	grid-template-areas:
		"thumb name  price"
		"thumb meta  price" !important;
	column-gap: 14px !important;
	row-gap: 3px !important;
	align-items: center !important;
	justify-content: initial !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 13px 15px !important;
	text-align: right !important;
	border: 1.5px solid rgba(28, 43, 33, .14) !important;
	border-radius: 14px !important;
	background: #fff !important;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
	transition: border-color .18s var(--koala-ease, ease), box-shadow .18s ease, background-color .18s ease, transform .18s ease;
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.koala-pack-list .variable-item:hover .variable-item-contents.koala-pack {
		border-color: var(--koala-green, #519C3D) !important;
		box-shadow: 0 4px 14px rgba(81, 156, 61, .14) !important;
		transform: translateY(-1px);
	}
}

.koala-pack-list .variable-item.selected .variable-item-contents.koala-pack,
.koala-pack-list .variable-item[aria-checked="true"] .variable-item-contents.koala-pack {
	border-color: var(--koala-green, #519C3D) !important;
	background: var(--koala-green-tint, #eef6ea) !important;
	box-shadow: 0 0 0 1.5px var(--koala-green, #519C3D) inset, 0 4px 14px rgba(81, 156, 61, .12) !important;
}

.koala-pack-list .variable-item.disabled .variable-item-contents.koala-pack,
.koala-pack-list .variable-item.out-of-stock .variable-item-contents.koala-pack {
	opacity: .45;
	filter: grayscale(1);
}

/* ---- card contents ---- */
.koala-pack .koala-pack-thumb {
	grid-area: thumb;
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	border-radius: 10px;
	background: #f4f5f3;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.koala-pack .koala-pack-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.koala-pack .koala-pack-name {
	grid-area: name;
	align-self: end;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	box-shadow: none !important;
	font-size: 15.5px !important;
	font-weight: 650 !important;
	line-height: 1.3 !important;
	color: var(--koala-ink, #1d2b16);
	white-space: normal !important;
	text-align: right !important;
}

.koala-pack .koala-pack-meta {
	grid-area: meta;
	align-self: start;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	line-height: 1.5;
	font-weight: 400;
	color: #6b7280;
}

.koala-pack .koala-pack-price {
	grid-area: price;
	justify-self: end;
	font-size: 19px;
	font-weight: 750;
	letter-spacing: -.01em;
	color: var(--koala-ink, #1d2b16);
	white-space: nowrap;
}

.koala-pack .koala-pack-save {
	background: var(--koala-green-tint, #eef6ea);
	color: #3d6b1e;
	border-radius: 999px;
	padding: 2px 9px;
	font-size: 12px;
	font-weight: 650;
	white-space: nowrap;
}

.koala-pack .koala-pack-best {
	background: var(--koala-green, #519C3D);
	color: #fff;
	border-radius: 999px;
	padding: 2px 9px;
	font-size: 11.5px;
	font-weight: 650;
	white-space: nowrap;
}

/* narrow screens: the price moves under the name so the thumbnail keeps its size */
@media (max-width: 560px) {
	.koala-pack-list .variable-item .variable-item-contents.koala-pack,
	.koala-pack-list .variable-item-contents.koala-pack {
		grid-template-columns: auto minmax(0, 1fr) !important;
		grid-template-areas:
			"thumb name"
			"thumb price"
			"meta  meta" !important;
		column-gap: 11px !important;
		padding: 11px 12px !important;
	}
	.koala-pack .koala-pack-thumb { width: 50px; height: 50px; }
	.koala-pack .koala-pack-name { font-size: 14.5px !important; }
	.koala-pack .koala-pack-price { justify-self: start; align-self: start; font-size: 16.5px; }
	.koala-pack .koala-pack-meta { margin-top: 4px; font-size: 13px; }
}

/* ==========================================================================
   14. In-store availability  (mu-plugins/koala-store-availability.php)

   Printed on `koala_product_summary_end` for products that are physically in
   the Kfar Qasim warehouse, and read by Google's Storebot as the evidence for
   the "product pages with in-store availability" experience — so it is plain
   server-rendered markup with no JS and nothing hidden behind a media query.
   Mirrors .koala-shipping-note's box, in green rather than grey.
   ========================================================================== */

.kp-store{
	margin:12px 0;
	padding:10px 14px;
	background:#f1f8ee;
	border-right:3px solid #519C3D;
	border-radius:4px;
	width:fit-content;
	max-width:min(100%,800px);
	box-sizing:border-box;
	font-family:"Assistant",sans-serif;
	line-height:1.7;
	color:#33502a;
	overflow-wrap:break-word;
}
.kp-store__status{
	margin:0;
	font-size:0.95rem;
}
.kp-store__status strong{
	color:#3d7a2e;
}
.kp-store__dot{
	display:inline-block;
	width:8px;
	height:8px;
	margin-inline-end:7px;
	border-radius:50%;
	background:#519C3D;
	/* The dot is decorative; keep it off the text baseline jitter. */
	vertical-align:middle;
}
.kp-store__variants{
	display:block;
	font-size:0.88rem;
	color:#55704c;
}
.kp-store__details{
	margin-block-start:6px;
	font-size:0.88rem;
}
.kp-store__details summary{
	cursor:pointer;
	color:#3d7a2e;
	width:fit-content;
}
.kp-store__address{
	margin-block-start:4px;
	font-style:normal;
	color:#55704c;
}
.kp-store__address a{
	color:inherit;
	text-decoration:underline;
}
@media (max-width:767px){
	.kp-store__status{
		font-size:1.05rem;
	}
}