/*!
 * koala-core.css — consolidated sitewide CSS for the 2026 redesign.
 *
 * Until 2026-07-28 these seven blocks were printed inline in wp_head by their
 * mu-plugins, i.e. ~19.4KB re-sent in the HTML of every single page view,
 * uncacheable and unminifiable, in the critical path. They are byte-identical
 * here; only their delivery changed. Each plugin still owns its PHP/JS logic --
 * look there for behaviour, here for appearance.
 *
 * Print order below is the exact wp_head order it replaced, so the cascade
 * between the blocks is unchanged. Enqueued from the child theme functions.php
 * with a dependency on hello-elementor-child-style, which places the file after
 * every Elementor stylesheet -- the position the inline blocks used to hold.
 *
 * Comments are kept: WP Rocket minifies this file on serve (minify_css = 1).
 */

/* ==========================================================================
   koala-design-system
   Design system: brand tokens, button/card polish, scroll-reveal states
   Was inline in mu-plugins/koala-design-system.php (wp_head) until 2026-07-28.
   ========================================================================== */

:root{
	--koala-green:#519C3D;
	--koala-green-dark:#3e7a2f;
	--koala-green-tint:#eef6ea;
	--koala-ink:#1c2b21;
	--koala-radius:16px;
	--koala-radius-sm:10px;
	--koala-ease:cubic-bezier(.22,.61,.36,1);
	--koala-card-border:1px solid rgba(28,43,33,.08);
	--koala-card-shadow:0 12px 32px -12px rgba(28,43,33,.22);
}

/* --- Buttons: rounded, smooth, gentle lift (checkout excluded from motion) --- */
.woocommerce .button,
.woocommerce button.button,
.single_add_to_cart_button,
.elementor-button{
	border-radius:var(--koala-radius-sm);
	transition:transform .25s var(--koala-ease),box-shadow .25s var(--koala-ease),background-color .25s;
}
@media (prefers-reduced-motion:no-preference){
	body:not(.woocommerce-checkout) .woocommerce .button:hover,
	body:not(.woocommerce-checkout) .single_add_to_cart_button:hover,
	body:not(.woocommerce-checkout) .elementor-button:hover{
		transform:translateY(-2px);
		box-shadow:0 8px 18px -8px rgba(81,156,61,.55);
	}
}

/* --- Product cards: soft card, hover lift, image zoom --- */
.woocommerce ul.products li.product{
	background:#fff;
	border:var(--koala-card-border);
	border-radius:var(--koala-radius);
	overflow:hidden;
	position:relative;
	transition:transform .3s var(--koala-ease);
}
.woocommerce ul.products li.product::after{
	content:"";
	position:absolute;
	inset:0;
	border-radius:inherit;
	box-shadow:var(--koala-card-shadow);
	opacity:0;
	transition:opacity .3s var(--koala-ease);
	pointer-events:none;
}
.woocommerce ul.products li.product img{
	transition:transform .45s var(--koala-ease);
}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
	.woocommerce ul.products li.product:hover{transform:translateY(-4px);}
	.woocommerce ul.products li.product:hover::after{opacity:1;}
	.woocommerce ul.products li.product:hover img{transform:scale(1.04);}
}

/* --- Scroll reveal: hidden state exists ONLY while the observer is armed --- */
@media (prefers-reduced-motion:no-preference){
	.koala-will-reveal{
		opacity:0;
		transform:translateY(20px);
	}
	.koala-in-view{
		opacity:1;
		transform:none;
		transition:opacity .6s var(--koala-ease),transform .6s var(--koala-ease);
		transition-delay:var(--koala-stagger,0s);
	}
}

/* ==========================================================================
   koala-breadcrumb-checkout-fontsize
   Breadcrumb + checkout delivery-box font sizes
   Was inline in mu-plugins/koala-breadcrumb-checkout-fontsize.php (wp_head) until 2026-07-28.
   ========================================================================== */

/* --- WooCommerce breadcrumb: a bit larger (was 0.875rem via global typography) --- */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a{
	font-size:1rem !important;
}

/* --- Add-on lines in the cart drawer ---

   WAPF's linked-product line prints "נלווה ל: <parent product name>" as a <dl class="variation">
   inside .koala-mini-cart__name. Untouched it inherits 16px — the same size as the product
   name above it — and dt/dd are block, so the label sits on one line and a long parent name
   stacks under it across three or four more. In a drawer that narrow it read as a broken
   title rather than a footnote.

   Same treatment the cart and checkout give their add-on lines: small, muted, and inline so
   it flows as one sentence. */
.koala-mini-cart__name dl.variation{
	margin:4px 0 0;
	padding:0;
	font-size:12px;
	line-height:1.45;
	color:rgba(28,43,33,.6);
}

.koala-mini-cart__name dl.variation dt,
.koala-mini-cart__name dl.variation dd,
.koala-mini-cart__name dl.variation dd p{
	display:inline;
	margin:0;
	padding:0;
	font-size:12px;
	font-weight:400;
	line-height:1.45;
}

.koala-mini-cart__name dl.variation dt{
	font-weight:600;
}

/* Each pair on its own line when there is more than one. */
.koala-mini-cart__name dl.variation dd::after{
	content:"";
	display:block;
}

/* --- Add-ons with no field name: hide the "N/a" that WAPF invents ---

   A single checkbox add-on ("הוספת דיסקיות בטיחות", "שדרוג לגלגלים גדולים 300 מ"מ") is
   configured with the text on the CHOICE and no label on the field itself — correctly, since
   a heading above one checkbox is a heading that repeats it. WAPF has nothing to use as the
   meta key, so `Field::get_label()` returns the literal string `__('N/a','sw-wapf')`
   (class-field.php:160) and every surface prints "N/a:" in front of the option.

   The class comes from `sanitize_html_class('N/a')` => `Na`, which is why this selector
   works and why it is stable: it is derived from the untranslated fallback string.

   Site-wide rather than in koala-cart.css because the cart drawer renders on every page.
   This hides the LABEL only; the option text in the <dd> is untouched.
   The same "N/a" is also the meta key stored on the order, which is a data problem, not a
   display one — that is handled for Linet in the "לינט - תוספות המוצר" snippet. */
.woocommerce dl.variation dt.variation-Na,
.woocommerce-page dl.variation dt.variation-Na,
dl.variation dt.variation-Na{
	display:none;
}

/* --- Checkout delivery-options box (#shipping_method chooser) ---
   REMOVED 2026-08-13. This was `font-size:1.05rem !important` on #shipping_method and its
   li/label, written to enlarge the delivery options while the checkout was an Elementor
   widget sizing them too small.

   #shipping_method only ever renders on the cart and the checkout, and since both came off
   Elementor (2026-08-13) each owns its own type scale — koala-cart.css section 7 and
   koala-checkout.css section 7 both set these labels to 15px. The !important here silently
   outranked both, so the option labels were rendering at 16.8px on either page: bigger than
   the product names beside them, and the one size on the checkout that never matched the
   scale that file declares. Deleting it lets the page stylesheets win normally. */

/* --- Show the breadcrumb on mobile too (widgets were flagged hide_mobile) --- */
/* Targets the breadcrumb WIDGET TYPE, so it covers every template that has one
   (category archive = elem aaa8d8e, other template = elem 61345602, etc.). */
@media (max-width:767px){
	.elementor-widget-woocommerce-breadcrumb.elementor-hidden-mobile{
		display:block !important;
	}
	/* Drop any fixed mobile width so it never overflows a small phone */
	.elementor-widget-woocommerce-breadcrumb{
		width:auto !important;
		max-width:100% !important;
	}
	/* Keep a long trail on one scrollable line instead of wrapping tall */
	.elementor-widget-woocommerce-breadcrumb .woocommerce-breadcrumb,
	.elementor-widget-woocommerce-breadcrumb .woocommerce-breadcrumb a{
		font-size:0.9rem !important;
	}
	.elementor-widget-woocommerce-breadcrumb .woocommerce-breadcrumb{
		white-space:nowrap;
		overflow-x:auto;
		-webkit-overflow-scrolling:touch;
	}
}

/* ==========================================================================
   koala-home-cosmetic-fixes
   Homepage cosmetic fixes (all selectors scoped to .elementor-35335)
   Was inline in mu-plugins/koala-home-cosmetic-fixes.php (wp_head) until 2026-07-28.
   ========================================================================== */

/* --- "פתרונות לעסקים וקבלנים" tiles: uniform image height => equal caption backgrounds --- */
.elementor-35335 .elementor-element-2ccfbe90 figure.wp-caption img{
	width:100% !important;
	height:230px !important;
	object-fit:cover !important;
	display:block;
}
@media (max-width:767px){
	.elementor-35335 .elementor-element-2ccfbe90 figure.wp-caption img{height:200px !important;}
}
/* Unify the lone green tile (טמונים ופחים עיליים) to the lavender used by the other two */
.elementor-35335 .elementor-element-caa0577:not(.elementor-motion-effects-element-type-background){
	background-color:var(--e-global-color-953317a) !important;
}

/* --- Contact section: centre the phone icon (legacy .mobile-number rule set width:10% on the icon anchor) --- */
.elementor-35335 .mobile-number .elementor-icon-box-wrapper > a{
	width:auto !important;
	margin-inline:auto !important;
}

/* ==========================================================================
   koala-hide-recaptcha
   Hide the floating reCAPTCHA badge
   Was inline in mu-plugins/koala-hide-recaptcha-badge.php (wp_head) until 2026-07-28.
   ========================================================================== */

.grecaptcha-badge{visibility:hidden!important;}

/* ==========================================================================
   koala-header
   Native site header — replaces Elementor Theme Builder template 34824
   ("הדר", include/general). See template-parts/koala-header.php.

   Every value here was read off the Elementor header via CDP at 375 / 768 /
   1440 before the swap — resting, scrolled, drawer-open, cart-open and
   dropdown-open — so this is a reproduction rather than a restyle. The sheets
   it replaces are uploads/elementor/css/post-34824.css and post-798.css (the
   kit), frontend.min.css, header-footer.css and the per-widget stylesheets for
   nav-menu, off-canvas, menu-cart, icon-list, icon and theme-site-logo — plus
   the 205 KB of blocking Elementor JS that the header was the last thing on the
   site to require.

   THREE BREAKPOINTS, and they are Elementor's own, not new ones:
     >=1025px  horizontal nav bar   (widget was hidden-tablet + hidden-mobile)
     <=1024px  burger + drawer      (widget was hidden-desktop/laptop/tablet_extra)
      <768px   logo-only top row, search moves down into the bar

   The page is RTL, so on the BAR (`flex-direction:row`) the first child sits on
   the right: nav/burger right, cart left. The TOP row is `row-reverse`, exactly
   as the Elementor container was, which is what puts the logo on the right and
   the search on the left while keeping the logo late in source order.
   ========================================================================== */

/* --- Self-hosted Assistant --------------------------------------------------
   Assistant reached the browser via Elementor's `elementor-gf-assistant`
   enqueue, which WP Rocket rewrote to a self-hosted copy under
   wp-content/cache/fonts/. Both ends of that are Elementor-dependent: the
   enqueue disappears with the plugin, and the cache directory is regenerated
   (and purgeable) rather than deployed. The woff2 files are copied into the
   theme so the site keeps its typeface through Phase 6 regardless.

   Assistant is a VARIABLE font — one file per subset covers 200–800 — so this
   is three requests totalling 40 KB, not fifteen. The weight range is declared
   so the browser synthesises nothing.
   The unicode-ranges are Google's own; the hebrew one is what actually renders
   this site, and keeping the split means the 22 KB latin file is never
   downloaded for a page with no latin text on it. --- */
@font-face{
	font-family:'Assistant';
	font-style:normal;
	font-weight:200 800;
	font-display:swap;
	src:url('fonts/assistant-hebrew.woff2') format('woff2');
	unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face{
	font-family:'Assistant';
	font-style:normal;
	font-weight:200 800;
	font-display:swap;
	src:url('fonts/assistant-latin-ext.woff2') format('woff2');
	unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
	font-family:'Assistant';
	font-style:normal;
	font-weight:200 800;
	font-display:swap;
	src:url('fonts/assistant-latin.woff2') format('woff2');
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- Shell -----------------------------------------------------------------
   `position:sticky` on the whole header, not `fixed` on each row.

   The Elementor build made the LOGO row fixed (its own sticky feature) and then
   koala-site-chrome v1.4–v1.6 had to pin the NAV row underneath it with a
   hard-coded `top`, then with a measured one (--koala-nav-top, a wp_head script
   with a ResizeObserver, a MutationObserver, a scroll listener and a timer
   burst to survive backgrounded tabs), plus an ::after spacer to replace the
   height the out-of-flow row vacated, plus a z-index bump so the cart panel was
   not buried by the row it lived in. All of that existed to reconstruct, in
   JavaScript, the layout a sticky element gets for free: sticky stays IN FLOW,
   so there is no spacer, no offset to measure, and nothing to go stale when the
   logo padding changes. The script is deleted by this change.

   z-index 99 matches what the Elementor sticky used, so the header keeps its
   existing relationship with everything else on the page (the cookie notice at
   100000, the WooCommerce lightbox, and so on). --- */
.koala-header{
	background:#fff;
	transition:box-shadow .3s var(--koala-ease,cubic-bezier(.22,.61,.36,1));
}
@media (min-width:1025px){
	.koala-header{
		position:sticky;
		top:0;
		z-index:99;
	}
}
/* 768–1024: only the top row was sticky in the Elementor build (the bar
   scrolled away with the page), so only the top row sticks here. */
@media (min-width:768px) and (max-width:1024px){
	.koala-header__top{
		position:sticky;
		top:0;
		z-index:99;
		background:#fff;
	}
}
@media (prefers-reduced-motion:reduce){
	.koala-header{transition:none;}
}

.koala-header__top,
.koala-header__bar{
	padding-inline:20px;
	background:#fff;
	/* Both Elementor containers carried a 1px #eeebeb bottom rule. It is what
	   separates the two bands and the header from the page, and it accounts for
	   the last 1px of each row's height (106 = 105 + 1, 57 = 56 + 1). */
	border-bottom:1px solid #eeebeb;
}
.koala-header__inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	max-width:1200px;
	margin-inline:auto;
}
.koala-header__top .koala-header__inner{
	/* Reproduces the Elementor container: DOM order search → contact → logo,
	   painted logo → contact → search from the right. */
	flex-direction:row-reverse;
}
.koala-header__bar .koala-header__inner{
	padding-block:5px;
	align-items:stretch;
}
/* Row heights, pinned to what the Elementor bar actually rendered: 57px at
   1440, 47px at 768, 63px at 375. In the Elementor build those came out of the
   widgets' own paddings (an icon widget on a line box, the menu-cart button
   wrapper), not out of any setting on the row — so they are stated here rather
   than reconstructed, the same way the footer's 79px logo rail was. Minus the
   The min-height is on the INNER element, so it excludes the row's own 1px
   bottom rule — hence 56 / 46 / 62 for rows that measure 57 / 47 / 63. */
.koala-header__bar .koala-header__inner{min-height:56px;}
@media (max-width:1024px){
	.koala-header__bar .koala-header__inner{min-height:46px;}
}
@media (max-width:767px){
	.koala-header__bar .koala-header__inner{min-height:62px;}
}

/* Soft elevation once scrolled past 150px (body.koala-scrolled, set in
   assets/koala-header.js). Opacity-driven, no size change, so no CLS. */
body.koala-scrolled .koala-header{
	box-shadow:0 6px 24px -14px rgba(28,43,33,.35);
}

/* --- Logo ------------------------------------------------------------------
   `flex:0 1 auto` on a 192px box: at 1440 there is room and it renders at its
   full 192×76, at 768 the search field and the contact block squeeze it to
   ~139×55. That squeeze is not a setting — it is what the Elementor flex item
   actually did, and hard-coding a tablet width would NOT reproduce it, so the
   shrink is left to flex exactly as before. --- */
.koala-header__logo{
	flex:0 1 192px;
	min-width:0;
	padding-block:12px;
	/* The theme-site-logo widget carried `margin:0 0 5px`; without it the top
	   row is 6px shorter than the Elementor one and every page shifts up. */
	margin-bottom:5px;
}
.koala-header__logo a{
	display:block;
}
.koala-header__logo img{
	display:block;
	width:100%;
	height:auto;
	max-width:192px;
	transition:max-height .3s var(--koala-ease,cubic-bezier(.22,.61,.36,1));
}
/* Tablet: pinned to the 139.2px the Elementor logo actually rendered at 768.
   Left to flex it comes out ~6px wider, because the contact strip beside it is
   ~9px narrower than Elementor's was — the (i) button the GTM virtual-phone tag
   injects renders a little tighter here than it did inside the icon-list widget
   — and the Elementor strip shrank sub-proportionally in a way a flex-basis
   alone does not reproduce. Six pixels of logo becomes three pixels of header
   height on every tablet page, so the measured value is stated instead. */
@media (min-width:768px) and (max-width:1024px){
	.koala-header__logo{flex:0 0 139.2px;}
}
@media (max-width:767px){
	.koala-header__logo{
		flex:0 1 auto;
		padding-block:8px;
		margin-inline:auto;
	}
}
/* Compact on scroll: the logo eases down so the sticky bar takes less room.
   Only ever SHRINKS (max-height), width auto, so the aspect ratio is kept and
   the change is on the sticky bar rather than on page content — no CLS. */
body.koala-scrolled .koala-header__logo img{
	max-height:52px;
	width:auto;
}
body.koala-scrolled .koala-header__logo{
	padding-block:6px;
}
@media (max-width:767px){
	body.koala-scrolled .koala-header__logo img{max-height:42px;}
}
@media (prefers-reduced-motion:reduce){
	.koala-header__logo img{transition:none;}
}

/* --- Contact strip ---------------------------------------------------------
   Measured: 16px/Arial, brand green, 24px line boxes on one row at 1440 and
   wrapping to two at 768. The phone number itself is #333 — it is the GTM
   virtual-number element and its colour comes from elsewhere; left alone. --- */
.koala-header__contact{
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-end;
	align-items:center;
	list-style:none;
	margin:0 10px 0 0;
	padding:0;
	font-family:Arial,Helvetica,sans-serif;
	font-size:16px;
	line-height:24px;
}
/* Measured spacing: the phone icon and the number sit flush against each other
   (they are one control split across two <li>), and every other pair is 17px
   apart. In RTL the gap between an item and the one to its left belongs to the
   LATER item's inline-start edge, which is why it is a margin and not a `gap`. */
.koala-header__contact li{
	display:flex;
	align-items:center;
	margin:0;
	padding:0;
}
.koala-header__contact li + li{
	margin-inline-start:17px;
}
.koala-header__contact li:nth-child(2){
	margin-inline-start:0;
}
.koala-header__contact a,
.koala-header__contact span{
	color:var(--koala-green,#519C3D);
	text-decoration:none;
}
.koala-header__contact a{
	display:flex;
	align-items:center;
	font-weight:500;
}
.koala-header__contact a.virtual_phone_number{
	color:#333;
	font-weight:400;
}
.koala-header__contact .koala-icon{
	width:16px;
	height:16px;
	margin-inline-end:9px;
	fill:var(--koala-green,#519C3D);
	flex:0 0 auto;
}
/* The (i) button the GTM virtual-phone script injects next to the number is
   hard-set to #000 by its own inline style; this is the same override
   koala-site-chrome carried. */
.koala-header .vpn-info-icon{
	color:var(--koala-green,#519C3D);
}
@media (max-width:1024px){
	.koala-header__contact{justify-content:center;}
}
@media (max-width:767px){
	.koala-header__contact{display:none;}
}

/* --- Search ----------------------------------------------------------------
   The field itself is styled by the search plugin's own CSS (#search_popup /
   .search-form); all that is set here is which of the two copies shows at which
   width. Two copies is what the Elementor header had — one in each row, shown
   at different widths — and the shortcode is unchanged, so the ids inside it
   are as duplicated as they always were. --- */
.koala-header__search--top{flex:0 1 236px;min-width:0;}
.koala-header__search--bar{display:none;}
@media (max-width:767px){
	.koala-header__search--top{display:none;}
	.koala-header__search--bar{display:block;flex:0 1 190px;min-width:0;}
}

/* --- Bar: nav / burger / cart ----------------------------------------------
   Order matters here: the burger's base `display:flex` has to come BEFORE the
   media query that hides it, because the two selectors have equal specificity
   and the later one would otherwise win at every width. */
.koala-header__nav{display:none;}
.koala-header__burger{
	display:flex;
	align-items:center;
	justify-content:center;
	background:none;
	border:0;
	padding:0;
	margin:0;
	cursor:pointer;
	color:var(--koala-green,#519C3D);
}
.koala-header__burger:hover,
.koala-header__burger:focus,
.koala-header__burger:active{
	background:none;
	color:var(--koala-green-dark,#3e7a2f);
}
.koala-header__burger .koala-icon{
	width:28px;
	height:28px;
	fill:currentColor;
}
@media (min-width:1025px){
	.koala-header__nav{display:block;flex:1 1 auto;min-width:0;}
	.koala-header__burger{display:none;}
}

/* --- Desktop menu ----------------------------------------------------------
   Measured at 1440: 20px Assistant/400, black, 15px horizontal padding, no gap
   between items, rows 46px tall, the whole ul right-aligned in the bar.
   At 1025–1200 (Elementor's "tablet_extra") it steps down to 19px/10px, which
   is what the widget's *_tablet_extra controls did. --- */
.koala-header__nav .koala-menu{
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	list-style:none;
	margin:0;
	padding:0;
}
.koala-header__nav .koala-menu > li{
	position:relative;
	display:flex;
	align-items:center;
}
.koala-header__nav .koala-menu > li.menu-item-has-children{
	padding-inline-end:15px;
}
@media (max-width:1200px){
	.koala-header__nav .koala-menu > li.menu-item-has-children{
		padding-inline-end:10px;
	}
}
.koala-header__nav .koala-menu > li > a{
	display:flex;
	align-items:center;
	font-family:'Assistant',sans-serif;
	font-size:20px;
	font-weight:400;
	line-height:20px;
	color:#000;
	text-decoration:none;
	padding:13px 15px;
}
@media (max-width:1200px){
	.koala-header__nav .koala-menu > li > a{
		font-size:19px;
		padding:13px 10px;
	}
}

/* The underline pointer: Elementor's `e--pointer-underline` at width 1px,
   growing from the centre on hover, in the widget's own hover colour #519C3D.
   Drawn on the <li>, not the <a>: Elementor rendered the caret INSIDE the link,
   so its pointer spanned label + caret together. Here they are siblings, and an
   underline on the <a> alone would stop short of the caret. */
.koala-header__nav .koala-menu > li::after{
	content:"";
	position:absolute;
	inset-inline:15px;
	bottom:0;
	height:1px;
	background:var(--koala-green,#519C3D);
	transform:scaleX(0);
	transition:transform .3s;
}
@media (max-width:1200px){
	.koala-header__nav .koala-menu > li::after{inset-inline:10px;}
}
.koala-header__nav .koala-menu > li:hover::after,
.koala-header__nav .koala-menu > li:focus-within::after,
.koala-header__nav .koala-menu > li.current-menu-item::after,
.koala-header__nav .koala-menu > li.current-menu-ancestor::after{
	transform:scaleX(1);
}
.koala-header__nav .koala-menu > li:hover > a,
.koala-header__nav .koala-menu > li:focus-within > a,
.koala-header__nav .koala-menu > li.current-menu-item > a,
.koala-header__nav .koala-menu > li.current-menu-ancestor > a{
	color:var(--koala-green,#519C3D);
}
@media (prefers-reduced-motion:reduce){
	.koala-header__nav .koala-menu > li::after{transition:none;}
}

/* Caret. Sized to swallow the row height so it is a comfortable pointer target
   without changing the 46px row. On desktop it is decorative — hover opens the
   section — but it stays a real <button> so the keyboard can open it too. */
.koala-header__nav .koala-menu__toggle{
	display:flex;
	align-items:center;
	justify-content:center;
	width:30px;
	height:40px;
	margin-inline-start:-15px;
	padding:0;
	background:none;
	border:0;
	cursor:pointer;
	color:#000;
}
@media (max-width:1200px){
	.koala-header__nav .koala-menu__toggle{margin-inline-start:-10px;}
}
.koala-header__nav .koala-menu__toggle .koala-icon{
	width:12px;
	height:12px;
	fill:currentColor;
	pointer-events:none;
}

/* Dropdown. Measured: white, no shadow, no padding, min-width 130px, items
   46px tall at 13px/400 with 13px 20px padding, opening flush with the parent
   item's inline-start edge (its RIGHT edge, RTL) directly under the 46px row.
   `visibility` rather than `display` so it can transition, and so the
   focus-within selector above can reach it. */
.koala-header__nav .koala-menu .sub-menu{
	position:absolute;
	top:100%;
	inset-inline-start:0;
	z-index:3;
	min-width:130px;
	width:max-content;
	margin:0;
	padding:0;
	list-style:none;
	background:#fff;
	visibility:hidden;
	opacity:0;
	transition:opacity .2s,visibility .2s;
}
.koala-header__nav .koala-menu > li:hover > .sub-menu,
.koala-header__nav .koala-menu > li:focus-within > .sub-menu,
.koala-header__nav .koala-menu > li.is-open > .sub-menu{
	visibility:visible;
	opacity:1;
}
.koala-header__nav .koala-menu .sub-menu a{
	display:block;
	padding:13px 20px;
	font-size:13px;
	font-weight:400;
	line-height:20px;
	color:#000;
	text-decoration:none;
	white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){
	.koala-header__nav .koala-menu .sub-menu{transition:none;}
}

/* Dropdown states, one system, all from the design tokens (carried over from
   koala-mobile-menu v1.3 — the rule it replaces was Elementor's stock
   #3f444b/#fff pair).

   The fill is --koala-green-DARK, not --koala-green: white on #519C3D measures
   3.40:1, under the 4.5:1 WCAG AA floor for text this size, while #3e7a2f
   measures 5.21:1. The brand green stays where it belongs — as the tint. */
.koala-header__nav .koala-menu .sub-menu a:hover,
.koala-header__nav .koala-menu .sub-menu a:focus,
.koala-header__nav .koala-menu .sub-menu li.current-menu-item > a{
	background-color:var(--koala-green-dark,#3e7a2f);
	color:#fff;
}

/* --- Cart toggle -----------------------------------------------------------
   Measured: 15px system stack, black, the bag 25px (19px on mobile), the count
   a bubble pinned to the bag's inline-end. --- */
.koala-cart__toggle{
	display:flex;
	align-items:center;
	align-self:center;
	gap:4px;
	/* Symmetric now (was `0 0 0 14px`, i.e. nothing on the subtotal side): the
	   price sat flush against the button box, so the hover fill clipped it. */
	padding:8px 12px;
	border-radius:6px;
	background:none;
	border:0;
	cursor:pointer;
	font-size:15px;
	line-height:15px;
	color:#000;
	white-space:nowrap;
	transition:background-color .18s ease,color .18s ease;
}
/* hello-elementor's reset paints EVERY bare <button> #c36 (a magenta pink) with
   white text, and it does so on `button:focus, button:hover` (0,1,1), which
   outranks our `background:none` (0,1,0) — so every native header button
   inherited it. Each one states its own states below; the cart takes the brand
   tint.

   The state list is `:hover, :focus, :active` and deliberately NOT
   `:focus-visible`: a mouse click leaves the button `:focus` but not
   `:focus-visible`, so a `:focus-visible` rule loses to the reset's `:focus`
   and the pink comes straight back once you actually press the thing. Matching
   the reset's own selector is the only way to fully displace it. */
.koala-cart__toggle:hover,
.koala-cart__toggle:focus,
.koala-cart__toggle:active{
	background-color:var(--koala-green-tint,#eef6ea);
	color:var(--koala-green-dark,#3e7a2f);
}
.koala-cart__icon{
	position:relative;
	display:flex;
	align-items:center;
}
.koala-cart__icon .koala-icon{
	width:25px;
	height:25px;
	fill:var(--koala-green,#519C3D);
}
.koala-cart__count{
	position:absolute;
	top:-6px;
	inset-inline-start:-6px;
	min-width:16px;
	height:16px;
	padding:0 4px;
	border-radius:8px;
	background:var(--koala-green,#519C3D);
	color:#fff;
	font-size:10px;
	line-height:16px;
	text-align:center;
}
/* Elementor's `--empty-indicator-hide`: no bubble on an empty cart. */
.koala-cart__count[data-counter="0"]{display:none;}
@media (max-width:767px){
	.koala-cart__toggle{padding:6px 8px;margin-inline-end:7px;font-size:15px;}
	.koala-cart__icon .koala-icon{width:19px;height:19px;}
}

/* --- Panels: shared ---------------------------------------------------------
   Both live at the end of <body>, so their z-index is measured against the page
   and not against a row of the header. 2147483630 was Elementor's own value for
   the off-canvas; the cart used 9998. Both are kept so the panels keep their
   existing relationship with the cookie notice and the Woo lightbox. --- */
.koala-drawer,
.koala-cart{
	position:fixed;
	inset:0;
}
.koala-drawer{z-index:2147483630;}
.koala-cart{z-index:9998;}

.koala-drawer__overlay,
.koala-cart__overlay{
	position:absolute;
	inset:0;
	opacity:0;
	transition:opacity .3s var(--koala-ease,cubic-bezier(.22,.61,.36,1));
}
.koala-drawer__overlay{background:rgba(0,0,0,.8);}
.koala-cart__overlay{background:rgba(0,0,0,.25);}
.koala-drawer.is-open .koala-drawer__overlay,
.koala-cart.is-open .koala-cart__overlay{opacity:1;}

/* Scroll lock while a panel is open — Elementor's off-canvas did this with
   body.e-off-canvas__no-scroll, and the menu-cart with an inline widget script
   that added .no-scroll. One class now covers both. */
body.koala-panel-open{overflow:hidden;}

/* --- Drawer ----------------------------------------------------------------
   Measured at 375: 80% of the viewport (300px), white, anchored to the
   inline-start edge (the RIGHT, RTL), sliding in from that edge. Inner column
   is 10px padding with a 20px gap. --- */
.koala-drawer__panel{
	position:absolute;
	inset-block:0;
	inset-inline-start:0;
	width:80%;
	max-width:400px;
	background:#fff;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	transform:translateX(var(--koala-drawer-out,100%));
	transition:transform .3s var(--koala-ease,cubic-bezier(.22,.61,.36,1));
}
/* RTL: inline-start is the right edge, so "off-screen" is +100%; LTR would be
   -100%. Set as a custom property so the single transform rule covers both. */
[dir="ltr"] .koala-drawer__panel{--koala-drawer-out:-100%;}
.koala-drawer.is-open .koala-drawer__panel{transform:translateX(0);}
@media (prefers-reduced-motion:reduce){
	.koala-drawer__panel,
	.koala-drawer__overlay,
	.koala-cart__panel,
	.koala-cart__overlay{transition:none;}
}
.koala-drawer__inner{
	display:flex;
	flex-direction:column;
	gap:20px;
	padding:10px;
}
.koala-drawer__close{
	/* Elementor's icon widget was `align: left`, which in this RTL drawer is the
	   inline-END edge — the far side from the panel's own edge. */
	align-self:flex-end;
	width:30px;
	height:30px;
	padding:0;
	background:none;
	border:0;
	cursor:pointer;
	color:var(--koala-green,#519C3D);
}
.koala-drawer__close:hover,
.koala-drawer__close:focus,
.koala-drawer__close:active{
	background:none;
	color:var(--koala-green-dark,#3e7a2f);
}
.koala-drawer__close .koala-icon{
	width:30px;
	height:30px;
	fill:currentColor;
	display:block;
}
/* 61% is the width the drawer logo widget was set to on tablet, and what it
   measured at 375 (169.6px inside a 280px column). */
.koala-header__logo--drawer{
	flex:0 0 auto;
	width:61%;
	margin-inline:auto;
	padding-block:8px;
}
.koala-header__logo--drawer img{max-width:none;}

/* --- Drawer menu -----------------------------------------------------------
   Measured at 375: rows 48px tall, 19px/600, 13px 10px padding, labels
   start-aligned with the carets in one column at the far edge, a hairline
   between top-level sections, sub-items at 15px indented 34px.

   Carried over wholesale from koala-mobile-menu v1.1–v1.3, which is where those
   numbers were decided:
     - start-aligned rows so the two levels read as one list (v1.1)
     - 15px sub-items, because 13px is under a comfortable reading size for
       Hebrew on a phone (v1.2)
     - the hairline, once the rows ran the full drawer width (v1.2)
     - states set as PAIRS of background AND colour, because a tap leaves
       :hover stuck on a touch screen and a background-only override left white
       text on a pale tint (v1.3)
   What is NOT carried over is every `!important` those rules needed: they were
   fighting SmartMenus' inline styles and Elementor's widget CSS, and both are
   gone. --- */
.koala-menu--drawer{
	list-style:none;
	width:fit-content;
	margin-inline:auto;
	padding:0;
	font-family:'Assistant',sans-serif;
}
.koala-menu--drawer > li:not(:last-child){
	border-bottom:1px solid rgba(0,0,0,.08);
}
.koala-menu--drawer li{position:relative;}
.koala-menu--drawer > li.menu-item-has-children > a{
	min-height:48px;
}
.koala-menu--drawer > li > a{
	display:flex;
	align-items:center;
	justify-content:flex-start;
	font-size:19px;
	font-weight:600;
	line-height:20px;
	color:#000;
	text-decoration:none;
	padding:13px 10px;
	padding-inline-end:54px;
}
.koala-menu--drawer .sub-menu{
	list-style:none;
	margin:0;
	padding:0;
	display:none;
}
.koala-menu--drawer > li.is-open > .sub-menu{display:block;}
.koala-menu--drawer .sub-menu a{
	display:block;
	font-size:15px;
	font-weight:400;
	line-height:20px;
	color:#000;
	text-decoration:none;
	padding:13px 10px;
	padding-inline-start:34px;
}
/* The caret is the toggle, so it needs a real touch target: 44px square, pinned
   to the row's far edge, with the negative inset keeping the 48px row height. */
.koala-menu--drawer > li > .koala-menu__toggle{
	position:absolute;
	top:0;
	inset-inline-end:0;
	display:flex;
	align-items:center;
	justify-content:center;
	width:44px;
	height:48px;
	padding:0;
	background:none;
	border:0;
	cursor:pointer;
	color:#000;
	transition:transform .2s ease;
}
.koala-menu--drawer > li.is-open > .koala-menu__toggle{
	transform:rotate(180deg);
}
.koala-menu--drawer .koala-menu__toggle .koala-icon{
	width:12px;
	height:12px;
	fill:currentColor;
	pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
	.koala-menu--drawer > li > .koala-menu__toggle{transition:none;}
}

/* States. Ink on tint is 13.41:1; white on --koala-green-dark is 5.21:1. The
   current row is a solid block, the row you just pressed is a pale wash of the
   same green — "where I am" and "where I am going" stay tellable apart while
   both are on screen. */
.koala-menu--drawer .sub-menu a:hover,
.koala-menu--drawer .sub-menu a:focus,
.koala-menu--drawer .sub-menu li.current-menu-item > a{
	background-color:var(--koala-green-dark,#3e7a2f);
	color:#fff;
}
.koala-menu--drawer a.koala-tapped,
.koala-menu--drawer .sub-menu a.koala-tapped{
	background-color:var(--koala-green-tint,#eef6ea);
	color:var(--koala-ink,#1c2b21);
}

/* --- Side cart -------------------------------------------------------------
   Measured at 1440: 350px, white, 20px 30px padding, full height, anchored to
   the inline-end edge (the LEFT, RTL), with the close button in the corner. --- */
.koala-cart__panel{
	position:absolute;
	inset-block:0;
	inset-inline-end:0;
	width:350px;
	max-width:100%;
	padding:20px 30px;
	background:#fff;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	transform:translateX(var(--koala-cart-out,-100%));
	transition:transform .3s var(--koala-ease,cubic-bezier(.22,.61,.36,1));
}
[dir="ltr"] .koala-cart__panel{--koala-cart-out:100%;}
.koala-cart.is-open .koala-cart__panel{transform:translateX(0);}
.koala-cart__close{
	width:25px;
	height:25px;
	padding:0;
	background:none;
	border:0;
	cursor:pointer;
	color:#000;
}
.koala-cart__close:hover,
.koala-cart__close:focus,
.koala-cart__close:active{
	background:none;
	color:var(--koala-green-dark,#3e7a2f);
}
.koala-cart__close .koala-icon{
	width:25px;
	height:25px;
	fill:currentColor;
	display:block;
}
/* --- Mini-cart contents ----------------------------------------------------
   The panel is filled over AJAX from woocommerce/cart/mini-cart.php in this
   theme (see that file for why it is overridden). Elementor Pro used to supply
   both the template AND its styling from widget-woocommerce-menu-cart CSS;
   Phase 4b takes over both, so these rules are what stop the drawer degrading
   into WooCommerce's unstyled widget list. --- */
.koala-mini-cart{
	list-style:none;
	margin:20px 0 0;
	padding:0;
}
.koala-mini-cart__item{
	position:relative;
	display:flex;
	align-items:flex-start;
	gap:12px;
	padding:0 0 16px;
	margin-bottom:16px;
	border-bottom:1px solid rgba(0,0,0,.08);
}
.koala-mini-cart__thumb{
	flex:0 0 74px;
}
/* WooCommerce ships `.woocommerce ul.product_list_widget li img { width:32px;
   float:… }` at (0,3,2) — the float is what makes its own template's thumbnail
   sit inline with the link text. Both have to be beaten by specificity, not by
   source order, hence the .woocommerce prefix and the !important-free
   float:none. */
.woocommerce .koala-mini-cart .koala-mini-cart__thumb img,
.koala-mini-cart .koala-mini-cart__thumb img{
	display:block;
	float:none;
	width:74px;
	height:auto;
	margin:0;
	border-radius:var(--koala-radius-sm,10px);
}
/* min-width:0 so a long product name wraps instead of stretching the row and
   pushing the remove control off the panel. */
.koala-mini-cart__body{
	flex:1 1 auto;
	min-width:0;
	/* room for the remove control, which is pinned to the row's far corner */
	padding-inline-end:22px;
}
.koala-mini-cart__name a{
	color:var(--koala-ink,#1c2b21);
	font-size:14px;
	font-weight:600;
	line-height:1.4;
	text-decoration:none;
}
.koala-mini-cart__name a:hover{
	color:var(--koala-green-dark,#3e7a2f);
}
.koala-mini-cart__price{
	margin-top:6px;
	font-size:14px;
	color:#000;
}
.koala-mini-cart__item .remove{
	position:absolute;
	top:0;
	inset-inline-end:0;
	width:22px;
	height:22px;
	font-size:20px;
	line-height:20px;
	text-align:center;
	color:#a00;
	text-decoration:none;
}
.koala-mini-cart__total{
	display:flex;
	justify-content:space-between;
	gap:8px;
	margin:0 0 16px;
	font-size:16px;
}
.koala-cart__panel .woocommerce-mini-cart__empty-message{
	margin-top:24px;
	color:#54595f;
}
/* Two full-width buttons, checkout as the primary. WooCommerce prints both
   with a bare `.button` class, which the theme renders as the same flat grey —
   the two ends of the flow were indistinguishable. */
.koala-mini-cart__buttons{
	display:flex;
	flex-direction:column;
	gap:8px;
	margin:0;
}
.koala-mini-cart__buttons .button{
	display:block;
	width:100%;
	padding:12px 16px;
	border-radius:var(--koala-radius-sm,10px);
	font-size:15px;
	font-weight:600;
	text-align:center;
	text-decoration:none;
}
.koala-mini-cart__buttons .button:not(.checkout){
	background:#fff;
	color:var(--koala-green-dark,#3e7a2f);
	box-shadow:inset 0 0 0 1px var(--koala-green,#519C3D);
}
.koala-mini-cart__buttons .button.checkout{
	background:var(--koala-green,#519C3D);
	color:#fff;
}
.koala-mini-cart__buttons .button.checkout:hover{
	background:var(--koala-green-dark,#3e7a2f);
	color:#fff;
}

/* ==========================================================================
   koala-view-transitions
   View Transitions API opt-in
   Was inline in mu-plugins/koala-site-chrome.php (wp_head) until 2026-07-28.
   ========================================================================== */

@media (prefers-reduced-motion:no-preference){
	@view-transition{ navigation:auto; }
}

/* ==========================================================================
   koala-footer
   Native site footer — see template-parts/koala-footer.php for the markup and
   for the full account of what this redesign changed on 2026-08-16.

   The block this replaces was a reproduction of Elementor template 34889,
   measured off the builder via CDP at 375 / 768 / 1440 and kept value-for-value
   so it could be diffed against what it replaced. Every number below is a
   design decision instead; nothing here is inherited from the builder.

   Layout is a 4-column grid — brand, מידע שימושי, קטגוריות, contact. The page is
   RTL, so grid places column 1 on the right: the logo keeps the position it has
   always had, but with a real column instead of the 79px the Elementor logo
   widget happened to get squeezed to.
   ========================================================================== */

.koala-footer{
	/* Scoped tokens. The surface is deliberately deeper than brand green:
	   #519C3D carries white text at only 3.40:1 and fails AA, which is why the
	   old footer had to set every string on it to black.

	   #35692a is as light as this surface can go while every string on it still
	   passes AA. Contrast against it — the lightest point anywhere in the
	   footer, so this is the worst case:
	     #fff             6.6:1  ✓
	     --kf-text  .90   5.3:1  ✓
	     --kf-dim   .80   4.6:1  ✓  ← this is the floor, do not go dimmer
	     --kf-mint        4.3:1     accents and rules only, never body text
	   Lightening --kf-green-deep further breaks the dim tier first: at
	   --koala-green-dark (#3e7a2f) only pure #fff still passes, and at brand
	   green (#519C3D) nothing does — white is 3.40:1 there, which is why the
	   footer this replaced had to set every string on it to black.

	   There was a radial brand-green glow over the top-right corner until
	   2026-08-16. It cost ~1.3:1 everywhere it fell, which is the whole margin
	   the dim tier runs on, so lightening the base meant dropping the glow. */
	--kf-green-deep:#35692a;
	--kf-green-shade:#24451d;
	--kf-mint:#B1DCA6;            /* was the legal bar's background; now the accent */
	--kf-text:rgba(255,255,255,.90);
	--kf-dim:rgba(255,255,255,.80);
	--kf-line:rgba(255,255,255,.16);
	--kf-chip:rgba(255,255,255,.10);

	position:relative;
	background:linear-gradient(158deg, var(--kf-green-deep) 0%, var(--kf-green-shade) 52%, var(--koala-ink) 100%);
	color:var(--kf-text);
}

/* The page is white right up to this edge, so the footer needs a hard line to
   start on rather than a soft fade. Brand green → mint → brand green, 3px. */
.koala-footer::before{
	content:"";
	position:absolute;
	inset-inline:0;
	top:0;
	height:3px;
	background:linear-gradient(90deg,var(--koala-green) 0%,var(--kf-mint) 50%,var(--koala-green) 100%);
}

.koala-footer__inner{
	max-width:1200px;
	margin-inline:auto;
	padding:56px 20px 44px;
	display:grid;
	grid-template-columns:1.25fr 1fr 1fr 1.15fr;
	gap:36px 40px;
	align-items:start;
}

/* --- Brand column --------------------------------------------------------
   The logo is black Hebrew type plus a grey koala on transparent — it is
   invisible on a dark surface. The white plate is the fix, and it reads as a
   deliberate mark rather than as an image that failed to load. --- */
.koala-footer__brand,
.koala-footer__col{
	/* grid items default to min-width:auto, i.e. min-content — a long menu label
	   or the tagline would push the whole footer past the viewport rather than
	   wrap inside its column. */
	min-width:0;
}
.koala-footer__brand{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:18px;
}
.koala-footer__logo{
	display:block;
	width:100%;
	max-width:204px;
	padding:14px 18px;
	background:#fff;
	border-radius:var(--koala-radius);
	box-shadow:0 10px 26px -14px rgba(0,0,0,.55);
	transition:transform .25s var(--koala-ease),box-shadow .25s var(--koala-ease);
}
/* aspect-ratio reserves the box before the lazy image lands. The logo shifting
   the whole footer on load was a standing CLS item; this closes it. The `sizes`
   attribute is set in PHP for the same reason — WordPress appends `sizes="auto"`
   to lazy images, which resolves against the viewport, not against this box. */
.koala-footer__logo img{
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:278 / 110;
}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
	.koala-footer__logo:hover{
		transform:translateY(-2px);
		box-shadow:0 14px 30px -14px rgba(0,0,0,.6);
	}
}
/* `align-items:flex-start` on the brand column makes every child shrink-wrap,
   so this <p> sizes to MAX-CONTENT unless it is capped. `34ch` alone is not the
   cap — at 390px 34ch is wider than the column, and the paragraph took the
   whole footer past the viewport with it. The `100%` term is the real guard;
   34ch is only the measure. */
.koala-footer__tagline{
	margin:0;
	max-width:min(34ch,100%);
	color:var(--kf-dim);
	font-size:15px;
	line-height:1.65;
}

/* --- Column headings -----------------------------------------------------
   Was Elementor's divider widget in `line_text` mode: 20px/900, 2px of letter-
   spacing (which Hebrew does not want), and a 3px black rule running the full
   width of the column. Now a plain label with a short mint accent under it. --- */
.koala-footer__title{
	margin-block-end:18px;
}
.koala-footer__title > span{
	display:block;
	color:#fff;
	font-size:17px;
	font-weight:700;
	line-height:1.3;
}
.koala-footer__title::after{
	content:"";
	display:block;
	width:30px;
	height:3px;
	margin-block-start:10px;
	border-radius:2px;
	background:var(--kf-mint);
}

/* --- Footer menus --------------------------------------------------------
   No bullet. The old one was `content:"\f0d9"` in "Font Awesome 5 Free", and
   that webfont has not loaded on this site since `elementor_load_fa4_shim` was
   emptied on 2026-08-14 — so it had been rendering a missing-glyph box beside
   every footer link. A plain list with a hover shift needs no font at all. --- */
.koala-footer__menu{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:2px;
}
.koala-footer__menu li{
	margin:0;
	padding:0;
}
.koala-footer__menu a{
	display:inline-block;
	padding-block:6px;
	color:var(--kf-text);
	font-size:15px;
	line-height:1.5;
	/* underline present but transparent, so revealing it on hover costs no
	   layout and the link never changes height */
	text-decoration:underline;
	text-decoration-color:transparent;
	text-decoration-thickness:2px;
	text-underline-offset:5px;
	transition:color .2s var(--koala-ease),
	           text-decoration-color .2s var(--koala-ease),
	           transform .2s var(--koala-ease);
}

/* --- Contact column ------------------------------------------------------ */
.koala-footer__contact{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:12px;
}
.koala-footer__contact li{
	display:flex;
	align-items:center;
	gap:10px;
	margin:0;
	font-size:15px;
	line-height:1.5;
}
.koala-footer__contact a{
	color:var(--kf-text);
	text-decoration:underline;
	text-decoration-color:transparent;
	text-decoration-thickness:2px;
	text-underline-offset:5px;
	transition:color .2s var(--koala-ease),text-decoration-color .2s var(--koala-ease);
}
/* The hours row is the only one that is not an action, so it is the only one
   that reads as plain text. (The old list put `cursor:pointer` on all four.) */
.koala-footer__contact li > span:not(.koala-footer__icon){
	color:var(--kf-dim);
}
/* The phone is the primary action in this column — give it the weight. */
.koala-footer__phone a{
	font-size:19px;
	font-weight:700;
	color:#fff;
}

/* --- Social -------------------------------------------------------------
   Same three networks the contact page lists, and the same icon paths. The
   buttons echo the contact rows' icon chip so the column reads as one block
   rather than as a strip bolted onto the end. --- */
.koala-footer__social{
	margin-block-start:20px;
}
.koala-footer__social-label{
	display:block;
	margin-block-end:10px;
	color:var(--kf-dim);
	font-size:14px;
	line-height:1.4;
}
.koala-footer__social-list{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}
.koala-footer__social-list li{margin:0;}
.koala-footer__social-list a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:38px;
	height:38px;
	border-radius:11px;
	background:var(--kf-chip);
	border:1px solid var(--kf-line);
	transition:background-color .2s var(--koala-ease),border-color .2s var(--koala-ease),transform .2s var(--koala-ease);
}
.koala-footer__social-list svg{
	width:17px;
	height:17px;
	fill:var(--kf-mint);
	transition:fill .2s var(--koala-ease);
}
@media (hover:hover){
	.koala-footer__social-list a:hover{
		background:var(--kf-mint);
		border-color:var(--kf-mint);
	}
	/* --koala-ink on mint is 9.3:1 — the icon has to invert, or it disappears
	   into its own hover colour. */
	.koala-footer__social-list a:hover svg{fill:var(--koala-ink);}
}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
	.koala-footer__social-list a:hover{transform:translateY(-2px);}
}

.koala-footer__icon{
	flex:0 0 auto;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:32px;
	height:32px;
	border-radius:9px;
	background:var(--kf-chip);
	border:1px solid var(--kf-line);
}
.koala-footer__icon svg{
	width:14px;
	height:14px;
	fill:var(--kf-mint);
}

/* --- Legal row -----------------------------------------------------------
   Was a separate #B1DCA6 band with two 50%-wide centred halves. Folding it into
   the dark surface behind a hairline keeps the footer one object; that mint is
   not lost, it became --kf-mint above. --- */
.koala-footer__legal{
	border-top:1px solid var(--kf-line);
}
.koala-footer__legal-inner{
	max-width:1200px;
	margin-inline:auto;
	padding:18px 20px;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:8px 24px;
	color:var(--kf-dim);
	font-size:14px;
	line-height:1.5;
}

/* --- Interaction --------------------------------------------------------- */
@media (hover:hover){
	.koala-footer__menu a:hover,
	.koala-footer__contact a:hover{
		color:#fff;
		text-decoration-color:var(--kf-mint);
	}
}
/* RTL: the lists start at the right edge, so -4px moves a link inward. */
@media (prefers-reduced-motion:no-preference) and (hover:hover){
	.koala-footer__menu a:hover{
		transform:translateX(-4px);
	}
}
.koala-footer a:focus-visible{
	outline:2px solid var(--kf-mint);
	outline-offset:3px;
	border-radius:4px;
}

/* --- Tablet: the brand becomes a full-width masthead and the three content
   columns keep their own row.

   Three columns rather than two on purpose. Two columns puts the 9-item
   מידע שימושי list beside the 5-item קטגוריות one and leaves a block of empty
   green roughly 200px tall under the short one; three splits that difference
   across the row instead. It also survives either menu being edited, which a
   hand-tuned row/column span would not. --- */
@media (max-width:1024px){
	.koala-footer__inner{
		grid-template-columns:repeat(3,minmax(0,1fr));
		gap:34px 28px;
		padding:48px 20px 40px;
	}
	/* Stacked, the logo + tagline left half the masthead row empty. Side by
	   side they read as a masthead. */
	.koala-footer__brand{
		grid-column:1 / -1;
		flex-direction:row;
		align-items:center;
		gap:24px;
	}
	.koala-footer__logo{flex:0 0 auto;}
	.koala-footer__tagline{flex:1 1 auto;}
}

/* --- Mobile: one column, top-down (logo first), legal centred. --- */
@media (max-width:767px){
	.koala-footer__inner{
		grid-template-columns:minmax(0,1fr);
		gap:30px;
		padding:40px 18px 32px;
	}
	.koala-footer__brand{
		flex-direction:column;
		align-items:flex-start;
		gap:16px;
	}
	.koala-footer__logo{max-width:180px;}
	.koala-footer__title{margin-block-end:14px;}
	.koala-footer__legal-inner{
		flex-direction:column;
		justify-content:center;
		text-align:center;
		gap:6px;
		padding:16px 18px;
	}
}