/* ==========================================================================
   Brosh Pool — Menu page (תפריט בריכת ברוש) mobile-first skin.
   Pure CSS, no markup/content changes. Scoped to body.brosh-menu.
   Restyles the existing structure: nav.cat-nav (sticky category pills),
   h2.wp-block-heading (category titles), ul.products / li.product (cards),
   .add_to_cart_button (green pill). Built phone-first, graceful on desktop.
   ========================================================================== */
:root{
  --bm-navy:#06313c; --bm-ink:#0e3944; --bm-muted:#5f8390; --bm-line:#d5ecf3;
  --bm-bg:#e9f7fc; --bm-green:#11bc6d; --bm-greenDeep:#0a9d63;
  --bm-sun:#ffce33; --bm-sunSoft:#fff3cf; --bm-sky:#57b6e0;
  --bm-shadow:0 12px 26px -16px rgba(6,49,60,.45);
  --bm-shadowSoft:0 8px 18px -12px rgba(6,49,60,.4);
  --bm-blue:#1e88c4; --bm-blueGrad:linear-gradient(135deg,#2bb3d9 0,#1483c0 100%);
  --bm-header:58px; /* the site's sticky header height — the category bar sits just under it */
}

/* airy aquatic page background (matches the rest of the brosh WC skin) */
body.brosh-menu{
  background:radial-gradient(120% 34% at 85% 0,#cdeefb 0,transparent 60%),
    linear-gradient(180deg,#d7eff9 0,#e9f7fc 300px) no-repeat;
  background-color:var(--bm-bg);
}

/* jumps to a category land below BOTH the site header and the sticky category bar */
html:has(body.brosh-menu){ scroll-padding-top:calc(var(--bm-header) + 66px + 12px); }

/* ---- page title ---- */
body.brosh-menu h1.wp-block-post-title{
  text-align:center!important; color:var(--bm-navy)!important; font-weight:900!important;
  font-size:clamp(24px,6.5vw,32px)!important; margin:14px auto 4px!important; padding:0 14px; }

/* ---- intro banner — inserted by brosh-menu.js right above the category bar.
   (The page's own H1 title is hidden by the theme, so it can't host the banner via CSS.) ---- */
body.brosh-menu .brosh-intro{
  margin:10px 14px!important; padding:13px 16px; border-radius:16px;
  background:linear-gradient(180deg,#ffffff 0,#eef8ff 100%);
  border:1px solid var(--bm-line); box-shadow:var(--bm-shadowSoft);
  color:var(--bm-navy); font-weight:800; font-size:15px; line-height:1.45;
  text-align:right; direction:rtl; }

/* ==========================================================================
   1 + 2 — Category pills, sticky bar
   ========================================================================== */
body.brosh-menu nav.cat-nav{
  position:sticky!important; top:var(--bm-header)!important; z-index:40!important; /* sits just under the site's sticky header */
  display:flex!important; gap:8px!important; overflow-x:auto!important;
  -webkit-overflow-scrolling:touch;
  padding:11px 14px!important; margin:6px 0!important;
  background:#e9f7fc!important; /* solid — no backdrop blur (blur caused sticky-scroll jank on phones) */
  box-shadow:0 6px 16px -12px rgba(6,49,60,.5)!important;
  border:none!important; border-bottom:1px solid var(--bm-line)!important; }
body.brosh-menu nav.cat-nav::-webkit-scrollbar{ display:none; }
body.brosh-menu nav.cat-nav{ scrollbar-width:none; }
/* subtle shadow appears once the bar is stuck to the top */
body.brosh-menu nav.cat-nav.is-stuck{
  box-shadow:0 8px 20px -12px rgba(6,49,60,.45)!important;
  border-bottom-color:var(--bm-line)!important; }

/* the pills */
body.brosh-menu nav.cat-nav a{
  flex:0 0 auto!important;
  display:inline-flex!important; align-items:center!important; justify-content:center;
  min-height:42px; padding:9px 17px!important; border-radius:999px!important;
  background:#fff!important; color:var(--bm-ink)!important;
  border:1.5px solid var(--bm-line)!important; box-shadow:var(--bm-shadowSoft);
  font-weight:800!important; font-size:14.5px!important; line-height:1!important;
  text-decoration:none!important; white-space:nowrap!important;
  transition:transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease; }
body.brosh-menu nav.cat-nav a:hover{ border-color:var(--bm-sky)!important; }
body.brosh-menu nav.cat-nav a:active{ transform:scale(.95); }
/* active category (set by the tiny scroll-spy script) — clearly "selected" */
body.brosh-menu nav.cat-nav a.is-active{
  background:var(--bm-navy)!important; color:#fff!important; border-color:var(--bm-navy)!important;
  box-shadow:0 10px 22px -10px rgba(6,49,60,.6)!important; }

/* ==========================================================================
   6 — Category heading
   ========================================================================== */
body.brosh-menu h2.wp-block-heading{
  color:var(--bm-navy)!important; font-weight:900!important;
  font-size:clamp(21px,5.5vw,26px)!important; text-align:start!important;
  margin:26px 16px 14px!important; padding-bottom:9px!important; position:relative; }
/* sunny underline accent under every category title */
body.brosh-menu h2.wp-block-heading::after{
  content:""; position:absolute; inset-inline-start:0; bottom:0;
  width:52px; height:4px; border-radius:4px; background:var(--bm-sun); }

/* ==========================================================================
   3 + 7 — Product cards grid (grid fixes the lone-odd-item placement)
   ========================================================================== */
body.brosh-menu ul.products{
  display:grid!important; grid-template-columns:1fr 1fr!important; gap:12px!important;
  list-style:none!important; margin:0!important; padding:0 14px!important; }
@media (min-width:600px){ body.brosh-menu ul.products{ grid-template-columns:repeat(3,1fr)!important; } }
@media (min-width:900px){ body.brosh-menu ul.products{ grid-template-columns:repeat(4,1fr)!important; } }
@media (max-width:340px){ body.brosh-menu ul.products{ grid-template-columns:1fr!important; } }

/* reset WooCommerce's float/width so the grid controls layout */
body.brosh-menu ul.products li.product{
  width:auto!important; float:none!important; margin:0!important; clear:none!important;
  padding:0!important; /* no inner padding → the image fills the card edge-to-edge (no white frame) */
  background:#fff!important; border:1px solid var(--bm-line)!important;
  border-radius:20px!important; overflow:hidden!important; box-shadow:var(--bm-shadow)!important;
  display:flex!important; flex-direction:column!important;
  transition:transform .14s ease, box-shadow .14s ease; }
/* WooCommerce adds clearfix ::before/::after to ul.products AND li.product. Inside a CSS grid these
   pseudo-elements become GRID ITEMS and steal cells — that pushed the first product alone onto its own
   row and left a gap. Removing them makes products flow correctly (lone odd item lands at the very end). */
body.brosh-menu ul.products::before,
body.brosh-menu ul.products::after,
body.brosh-menu ul.products li.product::before,
body.brosh-menu ul.products li.product::after{ display:none!important; content:none!important; }
body.brosh-menu ul.products li.product:active{ transform:scale(.985); }

/* the product link wraps image + title + price */
body.brosh-menu li.product a.woocommerce-loop-product__link{
  display:flex!important; flex-direction:column!important; height:100%;
  text-decoration:none!important; color:inherit!important; }

/* image — perfect square. IMPORTANT: height:auto overrides WooCommerce's height="300"
   HTML attribute, otherwise the box becomes 1fr-wide × 300px tall (non-square → the
   image gets cropped/stretched out of proportion). With height:auto the aspect-ratio wins. */
body.brosh-menu li.product img{
  width:100%!important; height:auto!important; aspect-ratio:1/1!important; object-fit:cover!important;
  display:block!important; margin:0!important; border-radius:0!important;
  background:linear-gradient(150deg,#eef8fc,#d7eef8)!important; }

/* title */
body.brosh-menu li.product .woocommerce-loop-product__title{
  font-size:14.5px!important; font-weight:800!important; color:var(--bm-navy)!important;
  line-height:1.32!important; padding:11px 12px 2px!important; margin:0!important;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.64em; }

/* ==========================================================================
   4 — Price (bigger + bolder; the .00 is dropped globally via WC decimals=0)
   ========================================================================== */
body.brosh-menu li.product .price{
  padding:2px 12px 0!important; margin:0!important; color:var(--bm-navy)!important;
  font-size:19px!important; font-weight:900!important; font-variant-numeric:tabular-nums; }
body.brosh-menu li.product .price .woocommerce-Price-amount,
body.brosh-menu li.product .price bdi{ color:var(--bm-navy)!important; }
body.brosh-menu li.product .price del{ opacity:.5; font-weight:700; font-size:15px!important; }
body.brosh-menu li.product .price ins{ text-decoration:none; }

/* ==========================================================================
   5 — Add-to-cart button (big, easy one-hand tap)
   ========================================================================== */
/* blue site-brand button — symmetric, centered, equal size on every card.
   high class-chain specificity to beat the theme's own !important button rules. */
body.brosh-menu ul.products li.product a.add_to_cart_button.ajax_add_to_cart.button.wp-element-button,
body.brosh-menu ul.products li.product a.add_to_cart_button.button.wp-element-button{
  margin:auto 12px 12px!important; /* auto-top pins to card bottom; equal 12px sides = symmetric */
  display:block!important; width:auto!important; box-sizing:border-box!important; text-align:center!important;
  background:var(--bm-blueGrad)!important; color:#fff!important; border:none!important;
  border-radius:12px!important; padding:12px 10px!important; min-height:46px!important;
  font-weight:800!important; font-size:14px!important; line-height:1.5!important;
  text-decoration:none!important; box-shadow:0 9px 18px -8px rgba(30,136,196,.55)!important;
  transition:transform .1s ease, filter .15s ease!important; }
body.brosh-menu ul.products li.product a.add_to_cart_button.button.wp-element-button:hover{ filter:brightness(1.06)!important; }
body.brosh-menu ul.products li.product a.add_to_cart_button.button.wp-element-button:active{ transform:scale(.96)!important; }
body.brosh-menu ul.products li.product a.add_to_cart_button.button.loading{ opacity:.75!important; }
body.brosh-menu ul.products li.product a.button.added.wp-element-button{ background:var(--bm-blue)!important; background-image:none!important; }
/* the little "view cart" link WooCommerce injects after adding — keep tidy, not a big pill */
body.brosh-menu li.product a.added_to_cart{
  display:block!important; text-align:center; margin:0 12px 11px!important;
  color:var(--bm-blue)!important; font-weight:800; font-size:12.5px; text-decoration:underline; }

/* remove theme's default result-count / ordering clutter if present, keep it clean */
body.brosh-menu .woocommerce-result-count,
body.brosh-menu .woocommerce-ordering{ display:none!important; }

/* ==========================================================================
   Dynamic menu ([brosh_pool_menu]) — "חדש ומבצעים ✨" featured category + out-of-stock
   ========================================================================== */
/* featured chip stands out (warm gradient) */
body.brosh-menu nav.cat-nav a.brosh-chip-featured{
  background:linear-gradient(135deg,#ff9a3d 0,#ff5e7e 100%)!important; color:#fff!important; border-color:transparent!important;
  box-shadow:0 9px 20px -8px rgba(255,94,126,.6)!important; }
body.brosh-menu nav.cat-nav a.brosh-chip-featured.is-active{ filter:brightness(1.06); }
/* featured section — warm heading + product frames so it reads as "special" */
body.brosh-menu .brosh-cat-featured h2.wp-block-heading{ color:#e0561f!important; }
body.brosh-menu .brosh-cat-featured h2.wp-block-heading::after{ background:linear-gradient(90deg,#ff9a3d,#ff5e7e)!important; width:70px!important; }
body.brosh-menu .brosh-cat-featured ul.products li.product{
  border:1.5px solid #ffd3b8!important; background:linear-gradient(180deg,#ffffff 0,#fff5ee 100%)!important;
  box-shadow:0 14px 30px -18px rgba(255,94,126,.45)!important; }
body.brosh-menu .brosh-cat-featured ul.products li.product a.add_to_cart_button.button{
  background:linear-gradient(135deg,#ff9a3d,#ff5e7e)!important; box-shadow:0 9px 18px -8px rgba(255,94,126,.6)!important; }

/* ✨ featured products only — shimmering GOLD product name + animated glitter on the
   name+price band (the zone between the image and the "הוספה לסל" button).
   CSS-only (no JS), scoped to the 3 featured cards, so performance impact is negligible. */
body.brosh-menu .brosh-cat-featured ul.products li.product h2.woocommerce-loop-product__title{
  color:#a8791a!important; font-weight:900!important; } /* solid-gold fallback */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  body.brosh-menu .brosh-cat-featured ul.products li.product h2.woocommerce-loop-product__title{
    background:linear-gradient(100deg,#8a6a12 0,#e0a500 26%,#fff2b0 50%,#e0a500 74%,#8a6a12 100%)!important;
    background-size:220% auto!important; -webkit-background-clip:text!important; background-clip:text!important;
    -webkit-text-fill-color:transparent!important; color:transparent!important;
    animation:broshGoldName 3.2s linear infinite; }
}
@keyframes broshGoldName{ to{ background-position:220% center; } }
/* keep image, name and price ABOVE the glitter layers */
body.brosh-menu .brosh-cat-featured ul.products li.product a.woocommerce-loop-product__link{ position:relative; }
body.brosh-menu .brosh-cat-featured ul.products li.product a.woocommerce-loop-product__link > *{ position:relative; z-index:2; }
/* glitter band pinned to the bottom (name+price zone); two layers twinkle out of sync.
   Dots are gold/amber/orange (visible on the light card) — white would be invisible here. */
body.brosh-menu .brosh-cat-featured ul.products li.product a.woocommerce-loop-product__link::before,
body.brosh-menu .brosh-cat-featured ul.products li.product a.woocommerce-loop-product__link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:44%;
  pointer-events:none; z-index:1; border-radius:0 0 12px 12px; }
body.brosh-menu .brosh-cat-featured ul.products li.product a.woocommerce-loop-product__link::before{
  background-image:
    radial-gradient(circle, rgba(255,201,40,1) 0, rgba(255,201,40,0) 2.6px),
    radial-gradient(circle, rgba(255,230,120,1) 0, rgba(255,230,120,0) 2px),
    radial-gradient(circle, rgba(255,201,40,1) 0, rgba(255,201,40,0) 2.2px);
  background-size:34px 30px,34px 30px,34px 30px; background-position:5px 6px,22px 20px,30px 2px;
  animation:broshGlitterA 3.2s ease-in-out infinite; }
body.brosh-menu .brosh-cat-featured ul.products li.product a.woocommerce-loop-product__link::after{
  background-image:
    radial-gradient(circle, rgba(255,150,50,.95) 0, rgba(255,150,50,0) 2.4px),
    radial-gradient(circle, rgba(255,255,255,.98) 0, rgba(255,255,255,0) 1.8px),
    radial-gradient(circle, rgba(255,120,90,.9) 0, rgba(255,120,90,0) 2px);
  background-size:40px 34px,40px 34px,40px 34px; background-position:16px 12px,34px 26px,2px 24px;
  animation:broshGlitterB 2.2s ease-in-out infinite; }
@keyframes broshGlitterA{
  0%{ opacity:.4; background-position:5px 34px,22px 44px,30px 20px; }
  50%{ opacity:1; }
  100%{ opacity:.4; background-position:5px 0,22px 6px,30px -8px; } }
@keyframes broshGlitterB{
  0%,100%{ opacity:.35; }
  45%{ opacity:1; }
  70%{ opacity:.6; } }
@media (prefers-reduced-motion: reduce){
  body.brosh-menu .brosh-cat-featured ul.products li.product h2.woocommerce-loop-product__title,
  body.brosh-menu .brosh-cat-featured ul.products li.product a.woocommerce-loop-product__link::before,
  body.brosh-menu .brosh-cat-featured ul.products li.product a.woocommerce-loop-product__link::after{ animation:none!important; } }

/* out of stock — shown but not purchasable: greyed, badge, blocked button */
body.brosh-menu ul.products li.product.outofstock{ opacity:.7; }
body.brosh-menu ul.products li.product.outofstock img{ filter:grayscale(.55); }
body.brosh-menu ul.products li.product.outofstock > a{ position:relative; }
body.brosh-menu ul.products li.product.outofstock > a::after{
  content:"נגמר במלאי"; position:absolute; top:8px; inset-inline-end:8px; z-index:3;
  background:#334155; color:#fff; font-size:11.5px; font-weight:900; padding:4px 10px; border-radius:999px; }
/* replace the WC "read more" link with a clear disabled "אזל מהמלאי" bar */
body.brosh-menu ul.products li.product.outofstock a.button{ display:none!important; }
body.brosh-menu ul.products li.product.outofstock::after{
  content:"אזל מהמלאי"; display:block!important; margin:auto 12px 12px!important; text-align:center;
  background:#cbd5e1!important; color:#475569!important; border-radius:12px; padding:12px; font-weight:800; font-size:14px; }

/* never let the page scroll sideways on a phone */
body.brosh-menu{ overflow-x:hidden; }