@charset "UTF-8";
/* ==========================================================================
   ALL CAPS — WooCommerce
   Archive, product, cart, checkout and account, in the same visual language
   as the rest of the site. Loaded after style.css and pages.css.
   ========================================================================== */

/* ---------------------------------------------------------- shop archive -- */
.shop-hero__count{font-size:var(--step--1);color:var(--ink-3)}
.shop{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:clamp(1.4rem,3vw,3rem);align-items:start}
@media (max-width:900px){.shop{grid-template-columns:1fr}}

.shop__side{position:sticky;top:calc(var(--navh) + 1.2rem)}
.shop__side-body{display:grid;gap:1.5rem}
.shop__side-toggle{display:none}
/* Below 900px the filters live behind a floating button and open as a sheet —
   an inline accordion pushed the whole grid down every time it was used. */
@media (max-width:900px){
  .shop__side{position:static}

  .shop__side-toggle{
    position:fixed;z-index:90;
    /* physical left, not inset-inline-start: in RTL the logical property and a
       negative translate push the button the same way and it lands off-centre */
    left:50%;translate:-50% 0;
    bottom:calc(76px + 1rem + env(safe-area-inset-bottom));
    display:inline-flex;align-items:center;gap:.5rem;width:auto;
    padding:.8rem 1.5rem;border-radius:var(--r-pill);border:0;
    background:var(--espresso);color:var(--cream);
    font-size:var(--step--1);font-weight:600;
    box-shadow:0 14px 34px -14px rgba(0,0,0,.75);
    transition:transform .3s var(--ease),opacity .3s var(--ease);
  }
  .shop__side-toggle svg{width:17px;height:17px}
  .shop__side-toggle:active{scale:.96}
  /* out of the way while the sheet is up */
  .shop__side.is-open .shop__side-toggle{opacity:0;pointer-events:none;translate:-50% 120%}

  .shop__side-body{
    position:fixed;inset-inline:0;bottom:0;z-index:110;
    display:grid;gap:1.3rem;max-height:82svh;overflow-y:auto;overscroll-behavior:contain;
    margin:0;padding:1.1rem var(--gutter) calc(1.4rem + env(safe-area-inset-bottom));
    background:var(--paper);border-radius:var(--r-xl) var(--r-xl) 0 0;
    box-shadow:0 -20px 50px -24px rgba(0,0,0,.55);
    transform:translateY(101%);transition:transform .36s var(--ease);
  }
  .shop__side.is-open .shop__side-body{transform:none}

  /* a grab handle and a way out */
  .shop__side-body::before{
    content:"";display:block;width:44px;height:4px;border-radius:99px;
    background:var(--line);margin:0 auto .4rem;
  }
  .shop__side-scrim{
    position:fixed;inset:0;z-index:105;background:rgba(20,13,6,.5);
    opacity:0;pointer-events:none;transition:opacity .32s var(--ease);
  }
  .shop__side.is-open ~ .shop__side-scrim,
  .shop__side.is-open .shop__side-scrim{opacity:1;pointer-events:auto}
  .shop__side-done{
    position:sticky;bottom:0;margin-top:.3rem;padding-top:.6rem;
    background:linear-gradient(to top,var(--paper) 70%,transparent);
  }
}
@media (min-width:901px){
  .shop__side-scrim,.shop__side-done{display:none}
}
body.filters-open{overflow:hidden}

.filt{display:grid;gap:.75rem}
.filt__label{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--crema);font-weight:600}
.filt__machines{display:grid;gap:.25rem}
.mfilt{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;
  padding:.5rem .6rem;border-radius:var(--r-m);border:1px solid transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.mfilt:hover{background:var(--surface-2)}
.mfilt.is-on{background:var(--white);border-color:var(--line);box-shadow:0 6px 16px -12px rgba(41,28,14,.6)}
.mfilt__disc{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:radial-gradient(circle at 50% 30%,#2A1D0F,#0B0704 72%);
}
.mfilt__disc img{width:100%;height:100%;object-fit:contain}
.mfilt__name{font-size:var(--step--1);font-weight:500;line-height:1.25}
.mfilt__n{font-size:.7rem;color:var(--ink-3)}

.filt__list{display:grid;gap:.1rem}
.filt__list a{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.45rem .6rem;border-radius:var(--r-s);
  font-size:var(--step--1);color:var(--ink-2);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.filt__list a span{font-size:.7rem;color:var(--ink-3)}
.filt__list a:hover{background:var(--surface-2);color:var(--ink)}
.filt__list a.is-on{background:var(--espresso);color:var(--cream);font-weight:600}
.filt__list a.is-on span{color:var(--oat)}
.filt__sub{margin:.15rem .8rem 0 0;padding-inline-start:.7rem;border-inline-start:1px solid var(--line-2);display:grid;gap:.05rem}
.filt__sub a{font-size:.78rem;padding:.35rem .5rem}
.filt__help{
  display:flex;align-items:center;gap:.5rem;font-size:var(--step--1);color:var(--ink-3);
  padding-top:1rem;border-top:1px solid var(--line-2);
  transition:color .25s var(--ease);
}
.filt__help:hover{color:var(--crema)}

.shop__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-bottom:1rem;margin-bottom:1.2rem;border-bottom:1px solid var(--line-2);
}
.woocommerce-result-count{margin:0;font-size:var(--step--1);color:var(--ink-3)}
.woocommerce-ordering select{
  padding:.6em 2.2em .6em 1em;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--white);font:inherit;
  font-size:var(--step--1);color:var(--ink);cursor:pointer;appearance:none;
}
.woocommerce-ordering{position:relative}
.woocommerce-ordering::after{
  content:"";position:absolute;inset-inline-start:.9rem;top:50%;translate:0 -50%;
  width:8px;height:8px;border:solid var(--ink-3);border-width:0 0 1.5px 1.5px;
  rotate:-45deg;pointer-events:none;
}
.shop__empty{padding:3rem 0;display:grid;gap:1.2rem;justify-items:center;text-align:center;color:var(--ink-3)}

/* pagination */
.woocommerce-pagination{margin-top:clamp(2rem,4vw,3rem)}
.woocommerce-pagination ul{display:flex;gap:.35rem;justify-content:center;flex-wrap:wrap}
.woocommerce-pagination a,.woocommerce-pagination span{
  display:grid;place-items:center;min-width:42px;height:42px;padding:0 .7em;
  border-radius:var(--r-pill);border:1px solid var(--line);
  font-size:var(--step--1);color:var(--ink-2);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.woocommerce-pagination a:hover{background:var(--surface-2);color:var(--ink)}
.woocommerce-pagination .current{background:var(--espresso);border-color:var(--espresso);color:var(--cream);font-weight:600}

.prod__badge--out{background:#5B4230;color:var(--cream)}
.prod__link{display:block;width:100%;height:100%}
.prod__name a{color:inherit}
.prod__add--view{background:var(--surface-2);color:var(--ink)}
.prod__add.loading{opacity:.6;pointer-events:none}
.prod__add.added::after{content:"";position:absolute}
/* Woo's script injects a "view cart" link straight into the card after an
   ajax add. Scoped to .woocommerce-loop it still landed in the home-page
   rails and the related grid, where it grew the card and shunted the row. */
.prod .added_to_cart,
.woocommerce-loop .added_to_cart{display:none!important}

/* ==========================================================================
   Single product
   The buy half sits on the dark ground; details and related run light below.
   ========================================================================== */
.product-page{padding-top:0}

.pdp{
  position:relative;overflow:hidden;
  /* Reach up behind the sticky header the way .hero and .page-hero do — the
     nav is transparent with cream ink, so the dark ground has to run under it
     or the menu sits on the page's paper background and all but vanishes. */
  margin-top:calc(-1 * var(--navh));
  padding-top:calc(var(--navh) + clamp(1.1rem,3vw,2.2rem));
  padding-bottom:clamp(2.2rem,5vw,4rem);
}
/* the same warm glow the hero uses, so the packshot sits in light not a void */
.pdp::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(62% 50% at 68% 42%,rgba(214,167,86,.16),transparent 70%);
}
.pdp > .wrap{position:relative;z-index:1}
.pdp .crumb{margin-bottom:clamp(1rem,2.4vw,1.7rem);color:#A08C74}
.pdp .crumb a:hover{color:var(--crema-lite)}

.pdp__grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.4rem,3.4vw,3.4rem);align-items:start;
}
@media (max-width:900px){.pdp__grid{grid-template-columns:1fr;gap:1.4rem}}

/* ---------- gallery ---------- */
.pdp__media{position:relative}
.pdp__flag{
  position:absolute;top:.9rem;inset-inline-start:.9rem;z-index:4;
  padding:.32em .85em;border-radius:var(--r-pill);
  background:#8E3B22;color:#FFE6D6;font-size:var(--step--1);font-weight:700;
}
.pdp__flag--out{background:var(--espresso);color:var(--oat)}

.woocommerce-product-gallery{
  position:relative;border-radius:var(--r-xl);overflow:hidden;background:#fff;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.75);
}
.woocommerce-product-gallery__wrapper{display:grid;margin:0}
.woocommerce-product-gallery__image{grid-area:1/1;margin:0}
/* Never paint a photo larger than it is.
   `width:100%` stretched every packshot to the frame, and a good part of this
   catalogue arrived as small images — the worst is 101px wide, painted at 573.
   That is a 5.7x blow-up, which is the pixelation. The originals on the old
   site are the same size, so there is nothing sharper to fetch: the honest
   answer is to stop enlarging. A small photo now sits centred at its true
   size, sharp, and a large one still fills the frame. */
.woocommerce-product-gallery__image{display:grid;place-items:center;aspect-ratio:1}
/* WooCommerce wraps the photo in a link to the full-size file; that anchor is
   the grid item, so it has to do the centring or the photo sits top-left. */
.woocommerce-product-gallery__image > a{display:grid;place-items:center;width:100%;height:100%}
.woocommerce-product-gallery__image img{
  /* --nat is the file's own width in px, set from JS.
     `width` rather than `max-width`, so a small photo actually grows to fill
     more of the frame instead of sitting at its natural size looking lost.
     2.2x is the ceiling: enough presence for the 101px packshots, well short
     of the 5.7x that turned them to mush. Anything from ~225px up is limited
     by the 86% instead and fills the frame as before.
     max-height keeps a tall bag inside the square — for a replaced element the
     browser honours the intrinsic ratio while applying it. */
  width:min(86%, calc(var(--nat, 9999) * 2.2px));
  height:auto;max-height:86%;
  object-fit:contain;padding:0;margin:0 auto;
}
.woocommerce-product-gallery .flex-control-thumbs{
  display:flex;gap:.5rem;list-style:none;margin:.6rem 0 0;padding:0;flex-wrap:wrap;
}
.woocommerce-product-gallery .flex-control-thumbs li{width:68px}
.woocommerce-product-gallery .flex-control-thumbs img{
  width:100%;aspect-ratio:1;object-fit:contain;padding:8%;cursor:pointer;
  background:#fff;border:1px solid transparent;border-radius:var(--r-m);
  transition:border-color .25s var(--ease),opacity .25s var(--ease);opacity:.75;
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover{border-color:var(--crema);opacity:1}
.woocommerce-product-gallery__trigger{
  position:absolute;top:.9rem;inset-inline-end:.9rem;z-index:3;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--espresso);font-size:0;
  box-shadow:0 6px 16px -8px rgba(41,28,14,.5);
}
.woocommerce-product-gallery__trigger::after{
  content:"";width:14px;height:14px;border:2px solid currentColor;border-radius:50%;
  box-shadow:6px 6px 0 -4px currentColor;
}

/* ---------- the buy column ---------- */
/* Spacing is set per element rather than one uniform gap — the title should
   hug its price, the fit chip should not. */
.pdp__info{display:grid;gap:0;align-content:start}
.pdp__brand{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--crema-lite);font-weight:600}
.pdp__title{
  font-size:clamp(1.35rem,3.2vw,2.1rem);font-weight:600;line-height:1.18;
  letter-spacing:-.01em;margin:.45rem 0 .6rem;text-wrap:balance;
}
/* Woo emits <del><ins> with .amount inside, and no .price wrapper on a single
   product — target what is actually there. */
.pdp__price{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:1.1rem;
  font-size:clamp(1.8rem,4.2vw,2.7rem);line-height:1.05}
.pdp__price ins,
.pdp__price > .amount,
.pdp__price > .woocommerce-Price-amount{
  text-decoration:none;font-weight:700;color:var(--ink);font-size:1em;
}
.pdp__price del{
  font-size:.42em;font-weight:400;color:var(--ink-3);
  margin-inline-end:.2rem;align-self:center;
}
.pdp__price .amount{font-size:inherit}

.pdp__fit{
  display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem;
  padding:.7rem .85rem;border-radius:var(--r-l);
  background:var(--surface-2);border:1px solid var(--line-2);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.pdp__fit:hover{border-color:var(--line);background:var(--surface)}
.pdp__fit-disc{
  width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 30%,#2A1D0F,#0B0704 72%);
  box-shadow:inset 0 0 0 1px rgba(225,212,194,.14);
}
.pdp__fit-disc img{width:100%;height:100%;object-fit:contain;padding:14%}
.pdp__fit-disc--ico{background:var(--surface);color:var(--crema-lite)}
.pdp__fit-disc--ico svg{width:22px;height:22px}
.pdp__fit-txt{display:grid;gap:.1rem;flex:1;min-width:0}
.pdp__fit-kicker{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.pdp__fit-txt strong{font-size:var(--step-0);font-weight:600;line-height:1.25}
.pdp__fit-go{width:16px;height:16px;flex:none;color:var(--ink-3)}
@media (max-width:520px){
  .pdp__fit{gap:.65rem;padding:.6rem .7rem}
  .pdp__fit-disc{width:40px;height:40px}
  .pdp__fit-txt strong{font-size:var(--step--1)}
}



.pdp__perks{
  display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;list-style:none;margin:1rem 0 0;padding:1rem 0 0;
  border-top:1px solid var(--line-2);
}
.pdp__perks li{display:flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--ink-2)}
.pdp__perks svg{width:16px;height:16px;color:var(--crema-lite);flex:none}
.pdp__sku{font-size:.74rem;color:var(--ink-3);margin:.7rem 0 0}
.pdp__sku span{color:var(--ink-2)}

/* ---------- description + specs ---------- */
/* The site-wide --sect rhythm is built for full-width storytelling sections;
   a short spec block under a product does not need 130px of air each side. */
.pdp-desc{padding-block:clamp(2rem,4.5vw,3.4rem)}
.pdp-desc__grid{
  display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);
  gap:clamp(.9rem,3vw,2.6rem);align-items:start;
}
@media (max-width:760px){.pdp-desc__grid{grid-template-columns:1fr;gap:.7rem}}
.pdp-desc__title{font-size:var(--step-1);font-weight:600;margin:0}
.pdp-desc__body{display:grid;gap:1.4rem;color:var(--ink-2);line-height:1.85;max-width:74ch}
.pdp-desc__body p{margin:0 0 .9em}
.pdp-desc__body p:last-child{margin-bottom:0}

.specs{display:grid;gap:0;margin:0}
.specs__row{
  display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:1rem;
  padding:.6rem 0;border-bottom:1px solid var(--line-2);
}
.specs__row:last-child{border-bottom:0}
.specs dt{color:var(--ink-3);font-size:var(--step--1);margin:0}
.specs dd{color:var(--ink);font-size:var(--step--1);font-weight:500;margin:0}
@media (max-width:520px){
  .specs__row{grid-template-columns:minmax(0,110px) minmax(0,1fr);gap:.7rem;padding:.5rem 0}
}

/* related and upsells sit closer to the product than a storytelling band would */
.product-page .sect.on-cream{padding-block:clamp(2.2rem,5vw,4rem)}

/* ---------- add to cart: stepper and button share one row ---------- */
/* Woo emits .quantity then the button as siblings; the grid puts them on the
   same line and lets anything hooked in above (the tier picker, the mix
   builder) span the full width. */
form.cart{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.55rem;margin:0;align-items:stretch;
}
form.cart > *{grid-column:1 / -1}
form.cart .quantity{grid-column:1;align-self:stretch}
form.cart .single_add_to_cart_button{grid-column:2}

form.cart .quantity{
  display:inline-flex;align-items:center;gap:.1rem;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.15rem;
  background:var(--surface);
}
form.cart .quantity input[type=number]{
  width:38px;border:0;background:none;text-align:center;font:inherit;
  font-size:var(--step--1);font-weight:700;color:var(--ink);appearance:textfield;
}
form.cart .quantity input::-webkit-outer-spin-button,
form.cart .quantity input::-webkit-inner-spin-button{appearance:none;margin:0}
.qty-btn{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:1rem;line-height:1;color:var(--ink-2);
  transition:background .25s var(--ease),color .25s var(--ease)}
.qty-btn:hover{background:var(--surface-2);color:var(--ink)}

form.cart .single_add_to_cart_button{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85em 1.6em;border-radius:var(--r-pill);
  background:var(--accent);color:var(--on-accent);
  font-weight:600;font-size:var(--step--1);line-height:1;border:0;cursor:pointer;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.8);
  transition:transform .3s var(--ease),filter .3s var(--ease);
}
form.cart .single_add_to_cart_button:hover{transform:translateY(-2px);filter:brightness(1.06)}
form.cart .single_add_to_cart_button.loading{opacity:.7}
.stock.out-of-stock{color:#B3261E;font-size:var(--step--1)}
.stock.in-stock{color:#1E5B2A;font-size:var(--step--1)}

/* tabs */
.woocommerce-tabs .wc-tabs{
  display:flex;gap:.4rem;list-style:none;margin:0 0 1.5rem;padding:0 0 .8rem;
  border-bottom:1px solid var(--line-2);flex-wrap:wrap;
}
.woocommerce-tabs .wc-tabs li a{
  display:block;padding:.6em 1.2em;border-radius:var(--r-pill);
  font-size:var(--step--1);color:var(--ink-2);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.woocommerce-tabs .wc-tabs li a:hover{background:var(--surface-2)}
.woocommerce-tabs .wc-tabs li.active a{background:var(--espresso);color:var(--cream);font-weight:600}
.woocommerce-Tabs-panel{max-width:74ch;color:var(--ink-2);line-height:1.85}
.woocommerce-Tabs-panel h2{font-size:var(--step-1);font-weight:600;color:var(--ink);margin-bottom:.7rem}
.shop_attributes{width:100%;border-collapse:collapse}
.shop_attributes th,.shop_attributes td{
  padding:.7rem .9rem;border-bottom:1px solid var(--line-2);text-align:start;font-size:var(--step--1)}
.shop_attributes th{color:var(--ink-3);font-weight:500;width:36%}

/* related */
.related>h2,.upsells>h2,.cross-sells>h2{
  font-size:var(--step-2);font-weight:400;margin-bottom:clamp(1.2rem,2.5vw,2rem)}
.related .prod-grid,.upsells .prod-grid{margin-top:0}

/* ---------------------------------------------------------------- cart ---- */
.woocommerce-cart .shop-page,.woocommerce-checkout .shop-page,.woocommerce-account .shop-page{
  padding-block:clamp(2rem,5vw,4rem) clamp(4rem,8vw,7rem)}

.ship-bar{
  display:grid;gap:.6rem;padding:1rem 1.2rem;border-radius:var(--r-l);
  background:var(--cream);margin-bottom:1.4rem;
}
.ship-bar__txt{font-size:var(--step--1);color:var(--ink-2);margin:0}
.ship-bar__txt strong{color:var(--ink)}
.ship-bar__track{height:6px;border-radius:3px;background:rgba(41,28,14,.12);overflow:hidden}
.ship-bar__track i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(to left,var(--crema-lite),var(--crema));
  transition:width .5s var(--ease)}
.ship-bar.is-done{background:#EAF6EC}
.ship-bar.is-done .ship-bar__track i{background:#2E7D3A}

.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(1.4rem,3vw,2.6rem);align-items:start}
@media (max-width:900px){.cart-layout{grid-template-columns:1fr}}

.shop_table{width:100%;border-collapse:collapse;background:var(--white);
  border:1px solid var(--line-2);border-radius:var(--r-l);overflow:hidden}
.shop_table th{
  /* No fill behind headings. The checkout review table carries .shop_table too,
     so a tinted th put a cream band behind "מוצר", "סכום ביניים", "משלוח" and
     "סה״כ" alike; the rule below already separates them. */
  padding:1rem;text-align:start;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;
  border-bottom:1px solid var(--line-2);background:transparent;
}
.shop_table td{padding:1rem;border-bottom:1px solid var(--line-2);vertical-align:middle;font-size:var(--step--1)}
.shop_table tr:last-child td{border-bottom:0}
.cart_item .product-thumbnail img{
  width:74px;height:74px;object-fit:contain;background:#fff;
  border:1px solid var(--line-2);border-radius:var(--r-m);padding:6%}
.cart_item .product-name a{font-size:var(--step-0);font-weight:500;color:var(--ink);line-height:1.35}
.cart_item .product-name a:hover{color:var(--crema)}
.product-remove a{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-2);color:var(--ink-2);font-size:1.1rem;line-height:1;
  transition:background .25s var(--ease),color .25s var(--ease)}
.product-remove a:hover{background:#8E3B22;color:#fff}
.cart_item .quantity{display:inline-flex;align-items:center;gap:.1rem;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.15rem}
.cart_item .quantity input{width:44px;border:0;background:none;text-align:center;font:inherit;font-weight:600}

.cart-actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:1rem}
.coupon{display:flex;gap:.5rem;flex:1 1 260px}
.coupon input{
  flex:1;min-width:0;padding:.8em 1.1em;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--white);font:inherit;font-size:var(--step--1)}
.coupon input:focus{outline:none;border-color:var(--crema)}

.cart-totals{
  position:sticky;top:calc(var(--navh) + 1.2rem);
  padding:clamp(1.2rem,2.4vw,1.7rem);border-radius:var(--r-xl);
  background:var(--white);border:1px solid var(--line-2);display:grid;gap:1rem;
}
@media (max-width:900px){.cart-totals{position:static}}
.cart-totals h2{font-size:var(--step-1);font-weight:600}
.cart-totals table{width:100%;border-collapse:collapse}
.cart-totals th,.cart-totals td{padding:.6rem 0;text-align:start;font-size:var(--step--1);border-bottom:1px solid var(--line-2)}
.cart-totals th{color:var(--ink-3);font-weight:500}
.cart-totals .order-total th,.cart-totals .order-total td{
  border-bottom:0;padding-top:.9rem;font-size:var(--step-0);font-weight:700;color:var(--ink)}
.cart-totals .order-total .amount{font-size:var(--step-1)}
.wc-proceed-to-checkout{display:grid}
.woocommerce a.checkout-button,.woocommerce .checkout-button,.checkout-button{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1em 1.9em;border-radius:var(--r-pill);
  background:var(--accent);color:var(--on-accent);font-weight:600;font-size:var(--step-0);
  box-shadow:0 10px 26px -14px rgba(41,28,14,.8);
  transition:transform .35s var(--ease),filter .35s var(--ease)}
.checkout-button:hover{transform:translateY(-2px);filter:brightness(1.06)}
.shipping-calculator-button{font-size:var(--step--1);color:var(--crema);text-decoration:underline;text-underline-offset:3px}
ul#shipping_method{display:grid;gap:.4rem;list-style:none;margin:0;padding:0}
ul#shipping_method li{display:flex;align-items:center;gap:.5rem;font-size:var(--step--1)}

.cart-empty{display:grid;gap:1.2rem;justify-items:center;text-align:center;padding:clamp(2.5rem,6vw,5rem) 0}
.cart-empty__ico{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:var(--cream);color:var(--clay)}
.cart-empty__ico svg{width:32px;height:32px}

/* ------------------------------------------------------------ checkout ---- */
/* the form is the grid: fields on one side, the order panel on the other */
form.checkout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:clamp(1.4rem,3vw,3rem);align-items:start;
}
.checkout__main{min-width:0}
.checkout__side{min-width:0;position:sticky;top:calc(var(--navh) + 1.2rem);display:grid;gap:.9rem}
.checkout__side h3{font-size:var(--step-1);font-weight:600;margin:0}
@media (max-width:980px){
  form.checkout{grid-template-columns:1fr;gap:1.4rem}
  .checkout__side{position:static}
}
.checkout-card{
  padding:clamp(1.2rem,2.6vw,2rem);border-radius:var(--r-xl);
  background:var(--white);border:1px solid var(--line-2);display:grid;gap:1rem}
.checkout-card+.checkout-card{margin-top:1rem}
.checkout-card h3,.checkout-card h2{font-size:var(--step-1);font-weight:600;margin:0}
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper{display:grid;gap:.9rem}
.form-row{display:grid;gap:.35rem;margin:0}
.form-row label{font-size:var(--step--1);color:var(--ink-2);font-weight:500}
.form-row .required{color:#B3261E;text-decoration:none}
.form-row input.input-text,.form-row textarea,.form-row .select2-selection,.form-row select{
  width:100%;padding:.85em 1.05em;border-radius:var(--r-m);
  border:1px solid var(--line);background:var(--paper);font:inherit;font-size:var(--step-0);color:var(--ink);
  transition:border-color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease)}
.form-row input.input-text:focus,.form-row textarea:focus,.form-row select:focus{
  outline:none;border-color:var(--crema);background:var(--white);box-shadow:0 0 0 3px rgba(176,122,46,.14)}
.form-row textarea{min-height:110px;resize:vertical}
.form-row.woocommerce-invalid input.input-text{border-color:#B3261E;background:#FDF3F2}
@media (min-width:620px){
  .form-row-first,.form-row-last{display:inline-grid;width:calc(50% - .45rem)}
  .form-row-first{margin-inline-end:.9rem}
}
.woocommerce-checkout-review-order{
  padding:clamp(1.2rem,2.4vw,1.7rem);border-radius:var(--r-xl);
  background:var(--white);border:1px solid var(--line-2);display:grid;gap:1rem}
.woocommerce-checkout-review-order-table{width:100%;border-collapse:collapse}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td{
  padding:.65rem 0;text-align:start;font-size:var(--step--1);border-bottom:1px solid var(--line-2)}
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td{
  border-bottom:0;font-size:var(--step-0);font-weight:700;color:var(--ink);padding-top:.9rem}
.wc_payment_methods{display:grid;gap:.5rem;list-style:none;margin:0;padding:0}
.wc_payment_method{border:1px solid var(--line);border-radius:var(--r-m);padding:.9rem 1rem;background:var(--paper)}
.wc_payment_method label{display:flex;align-items:center;gap:.55rem;font-size:var(--step-0);cursor:pointer;margin:0}
.payment_box{margin-top:.6rem;font-size:var(--step--1);color:var(--ink-3);line-height:1.6}
.woocommerce #place_order,#place_order{
  width:100%;padding:1.05em 1.9em;border-radius:var(--r-pill);border:0;cursor:pointer;
  background:var(--accent);color:var(--on-accent);font:inherit;font-weight:600;font-size:var(--step-0);
  box-shadow:0 10px 26px -14px rgba(41,28,14,.8);
  transition:transform .35s var(--ease),filter .35s var(--ease)}
#place_order:hover{transform:translateY(-2px);filter:brightness(1.06)}
.woocommerce-terms-and-conditions-wrapper{font-size:var(--step--1);color:var(--ink-3)}
.woocommerce-privacy-policy-text p{font-size:var(--step--1);color:var(--ink-3);line-height:1.6}
.woocommerce-form-login-toggle,.woocommerce-form-coupon-toggle{margin-bottom:1rem}

/* ------------------------------------------------------------- account ---- */
.account-layout{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(1.4rem,3vw,3rem);align-items:start}
@media (max-width:820px){.account-layout{grid-template-columns:1fr}}
.woocommerce-MyAccount-navigation ul{display:grid;gap:.15rem;list-style:none;margin:0;padding:0}
.woocommerce-MyAccount-navigation a{
  display:block;padding:.7rem 1rem;border-radius:var(--r-m);
  font-size:var(--step-0);color:var(--ink-2);
  transition:background .25s var(--ease),color .25s var(--ease)}
.woocommerce-MyAccount-navigation a:hover{background:var(--surface-2);color:var(--ink)}
.woocommerce-MyAccount-navigation .is-active a{background:var(--espresso);color:var(--cream);font-weight:600}
.woocommerce-MyAccount-content{
  padding:clamp(1.2rem,2.6vw,2rem);border-radius:var(--r-xl);
  background:var(--white);border:1px solid var(--line-2)}
.woocommerce-MyAccount-content p{color:var(--ink-2);line-height:1.8}
.woocommerce-MyAccount-content a:not(.button){color:var(--crema);text-decoration:underline;text-underline-offset:3px}

.login-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:start}
@media (max-width:820px){.login-grid{grid-template-columns:1fr}}
.woocommerce-form{display:grid;gap:.9rem}
.woocommerce-form__label-for-checkbox{display:flex;align-items:center;gap:.5rem;font-size:var(--step--1)}
.woocommerce-form-login__rememberme{margin:0}

/* ------------------------------------------------------------- notices ---- */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-notice{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  padding:.95rem 1.2rem;border-radius:var(--r-m);margin-bottom:1.2rem;
  font-size:var(--step--1);list-style:none;
}
.woocommerce-message{background:#EAF6EC;border:1px solid #BFE0C6;color:#1E5B2A}
.woocommerce-info{background:var(--cream);border:1px solid rgba(41,28,14,.12);color:var(--ink-2)}
.woocommerce-error{background:#FDF3F2;border:1px solid #F0C4C0;color:#8E2018;display:grid;gap:.3rem}
.woocommerce-message .button,.woocommerce-info .button{
  margin-inline-start:auto;padding:.5em 1.1em;border-radius:var(--r-pill);
  background:var(--espresso);color:var(--cream);font-size:var(--step--1);font-weight:600}

/* generic Woo buttons inherit the site button */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce-MyAccount-content .button{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8em 1.6em;border-radius:var(--r-pill);border:0;cursor:pointer;
  background:var(--espresso);color:var(--cream);font:inherit;font-size:var(--step--1);font-weight:600;
  transition:transform .3s var(--ease),filter .3s var(--ease)}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{
  transform:translateY(-2px);filter:brightness(1.1)}
.woocommerce .button.alt{background:var(--accent);color:var(--on-accent)}

/* screen-reader-only helper Woo expects */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------- cart/checkout grid -- */
/* Woo renders the form and the totals as siblings; grid them without
   overriding the templates, so Woo updates stay safe. */
@media (min-width:901px){
  .woocommerce-cart .shop-page .woocommerce{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
    gap:clamp(1.4rem,3vw,2.6rem);align-items:start;
  }
  .woocommerce-cart .woocommerce-cart-form{grid-column:1}
  .woocommerce-cart .cart-collaterals{grid-column:2;position:sticky;top:calc(var(--navh) + 1.2rem)}
  .woocommerce-cart .woocommerce-notices-wrapper,
  .woocommerce-cart .ship-bar{grid-column:1 / -1}
}
.cart-collaterals .cart_totals{
  padding:clamp(1.2rem,2.4vw,1.7rem);border-radius:var(--r-xl);
  background:var(--white);border:1px solid var(--line-2);display:grid;gap:1rem;
}
.cart-collaterals .cart_totals h2{font-size:var(--step-1);font-weight:600}
.cart-collaterals .cart_totals table{width:100%;border-collapse:collapse}
.cart-collaterals .cart_totals th,.cart-collaterals .cart_totals td{
  padding:.6rem 0;text-align:start;font-size:var(--step--1);border-bottom:1px solid var(--line-2)}
.cart-collaterals .cart_totals th{color:var(--ink-3);font-weight:500}
.cart-collaterals .order-total th,.cart-collaterals .order-total td{
  border-bottom:0;padding-top:.9rem;font-size:var(--step-0);font-weight:700;color:var(--ink)}
.cart-collaterals .cross-sells{grid-column:1 / -1;margin-top:2rem}

@media (min-width:981px){
  .woocommerce-checkout .shop-page form.checkout{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);
    gap:clamp(1.4rem,3vw,3rem);align-items:start;
  }
  .woocommerce-checkout #customer_details{grid-column:1}
  .woocommerce-checkout .checkout-order-review-wrap,
  .woocommerce-checkout #order_review,
  .woocommerce-checkout #order_review_heading{grid-column:2}
  .woocommerce-checkout #order_review_heading{margin-bottom:.8rem}
}
.woocommerce-checkout #customer_details{
  padding:clamp(1.2rem,2.6vw,2rem);border-radius:var(--r-xl);
  background:var(--white);border:1px solid var(--line-2);
}
.woocommerce-checkout #customer_details h3{font-size:var(--step-1);font-weight:600;margin-bottom:1rem}
.woocommerce-checkout #order_review{
  padding:clamp(1.2rem,2.4vw,1.7rem);border-radius:var(--r-xl);
  background:var(--white);border:1px solid var(--line-2);display:grid;gap:1rem;
}
.woocommerce-checkout #order_review_heading{font-size:var(--step-1);font-weight:600}

/* account */
.woocommerce-account .shop-page .woocommerce{
  display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:clamp(1.4rem,3vw,3rem);align-items:start;
}
@media (max-width:820px){.woocommerce-account .shop-page .woocommerce{grid-template-columns:1fr}}
.woocommerce-account .woocommerce-notices-wrapper{grid-column:1 / -1}
/* the login screen is a single centred card, not a two-column dashboard */
.woocommerce-account:not(.logged-in) .shop-page .woocommerce{grid-template-columns:1fr;max-width:960px;margin-inline:auto}
.woocommerce-account:not(.logged-in) .u-columns{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:start}
@media (max-width:820px){.woocommerce-account:not(.logged-in) .u-columns{grid-template-columns:1fr}}
.woocommerce-account:not(.logged-in) .u-column1,
.woocommerce-account:not(.logged-in) .u-column2{
  padding:clamp(1.2rem,2.6vw,2rem);border-radius:var(--r-xl);
  background:var(--white);border:1px solid var(--line-2)}
.woocommerce-account h2{font-size:var(--step-1);font-weight:600;margin-bottom:1rem}

/* ------------------------------------------------------------- toast ----- */
.toast{
  position:fixed;left:50%;bottom:clamp(1.2rem,3vw,2rem);translate:-50% 0;
  z-index:95;padding:.85rem 1.4rem;border-radius:var(--r-pill);
  background:var(--espresso);color:var(--cream);font-size:var(--step--1);font-weight:500;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .35s var(--ease);
}
.toast.is-on{opacity:1;transform:translateY(0)}
@media (max-width:1080px){.toast{bottom:calc(76px + 1rem)}}

.cart-btn.is-bump{animation:cartbump .45s var(--ease)}
@keyframes cartbump{0%,100%{transform:scale(1)}40%{transform:scale(1.18)}}
.prod__add.is-added{background:#2E7D3A;color:#fff}

/* ==========================================================================
   Phones — the tables have to stop being tables
   Woo's cart, order-review and order-history markup is a wide <table>; below
   720px it forces the whole page to scroll sideways. Re-lay each row as a
   card with grid areas, keeping the markup (and Woo's ajax) untouched.
   ========================================================================== */
@media (max-width:720px){
  /* Scoped to the line-items table — the totals table is also .shop_table
     and must keep its label/value columns. */
  .woocommerce-cart-form .shop_table,
  .woocommerce-cart-form .shop_table tbody,
  .woocommerce-cart-form .shop_table tr,
  .woocommerce-cart-form .shop_table td{display:block;width:auto}
  .woocommerce-cart-form .shop_table thead{display:none}
  .woocommerce-cart-form .shop_table{border-radius:var(--r-l)}
  .woocommerce-cart-form .shop_table td{padding:0;border:0}

  .woocommerce-cart-form .shop_table .cart_item{
    display:grid;
    grid-template-columns:64px minmax(0,1fr) auto;
    grid-template-areas:
      "thumb name  remove"
      "thumb price price"
      "thumb qty   sub";
    align-items:center;column-gap:.8rem;row-gap:.45rem;
    padding:.9rem;border-bottom:1px solid var(--line-2);
  }
  .cart_item .product-thumbnail{grid-area:thumb;align-self:start}
  .cart_item .product-thumbnail img{width:64px;height:64px}
  .cart_item .product-name{grid-area:name}
  .cart_item .product-name a{font-size:var(--step--1);line-height:1.3}
  .cart_item .product-remove{grid-area:remove;justify-self:end;align-self:start}
  .cart_item .product-price{grid-area:price;font-size:.78rem;color:var(--ink-3)}
  .cart_item .product-quantity{grid-area:qty}
  .cart_item .product-subtotal{grid-area:sub;justify-self:end;font-weight:700;font-size:var(--step-0)}
  .cart_item .quantity input{width:34px}
  .cart_item .qty-btn{width:26px;height:26px}

  /* the coupon / update row */
  .woocommerce-cart-form .shop_table td.actions{padding:.9rem;display:grid;gap:.6rem}

  /* totals: a plain two-column ledger, no card chrome */
  .cart_totals .shop_table{border:0;background:none;border-radius:0}
  .cart_totals .shop_table th{background:none;padding:.6rem 0;font-size:var(--step--1);
    letter-spacing:0;text-transform:none;color:var(--ink-3);font-weight:500;white-space:nowrap}
  .cart_totals .shop_table td{padding:.6rem 0;text-align:end}
  .cart_totals .shop_table tr{border-bottom:1px solid var(--line-2)}
  .cart_totals .shop_table .order-total th,
  .cart_totals .shop_table .order-total td{color:var(--ink);font-weight:700;font-size:var(--step-0)}
  .cart-actions{margin-top:0;display:grid;gap:.6rem}
  .coupon{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem}
  .cart-actions .button,.shop_table td.actions .button{width:100%}

  /* order review + order history read as label/value pairs */
  .woocommerce-checkout-review-order-table thead{display:none}
  .woocommerce-checkout-review-order-table .cart_item{
    display:flex;justify-content:space-between;gap:.8rem;
    grid-template-areas:none;grid-template-columns:none;padding:.65rem 0}

  .woocommerce-orders-table tr,
  .woocommerce-orders-table td{display:block;width:auto}
  .woocommerce-orders-table thead{display:none}
  .woocommerce-orders-table tbody tr{
    padding:.9rem;border-bottom:1px solid var(--line-2);display:grid;gap:.3rem}
  .woocommerce-orders-table td::before{
    content:attr(data-title) " · ";color:var(--ink-3);font-size:.75rem}
  .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before{content:none}
}

/* ==========================================================================
   Quantity tiers — "קנו 3 קבלו 2 חינם"
   Three cards the customer picks between, sitting above the add-to-cart.
   ========================================================================== */
.tiers{display:grid;gap:.7rem;margin-block:.2rem .4rem}
/* the cards are white, so they carry the light palette even on the dark
   product page — otherwise their text inherits cream and disappears */
.on-dark .tiers,.on-dark .mix{
  --ink:var(--espresso);--ink-2:#5B4230;--ink-3:#8C7660;
  --accent:var(--crema);--on-accent:#fff;
  --line:rgba(41,28,14,.13);--line-2:rgba(41,28,14,.07);
  --surface:rgba(41,28,14,.035);--surface-2:rgba(41,28,14,.07);
  color:var(--ink);
}
/* …but the heading above them belongs to the dark section */
.on-dark .tiers__title{color:var(--cream)}
.on-dark .tiers__hint{color:#8C7A69}
.tiers__head{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.tiers__title{font-size:var(--step-0);font-weight:600}
.tiers__hint{font-size:var(--step--1);color:var(--ink-3)}
.tiers__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;align-items:stretch}

.tier{
  position:relative;display:grid;align-content:start;gap:.18rem;cursor:pointer;
  padding:1.5rem .7rem .7rem;border-radius:var(--r-l);
  background:var(--white);border:1.5px solid var(--line-2);
  text-align:center;isolation:isolate;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);
}
.tier:hover{border-color:var(--line);transform:translateY(-2px)}
.tier__radio{position:absolute;opacity:0;pointer-events:none}
.tier.is-on{
  border-color:var(--espresso);background:var(--cream);
  box-shadow:0 14px 30px -20px rgba(41,28,14,.85);
}

/* the ribbon rides the top edge, so give every card room for it */
.tier__ribbon{
  position:absolute;top:0;left:50%;translate:-50% -50%;z-index:2;white-space:nowrap;
  padding:.28em .8em;border-radius:var(--r-pill);
  background:var(--accent);color:var(--on-accent);
  font-size:.62rem;font-weight:700;letter-spacing:.06em;
  box-shadow:0 6px 14px -8px rgba(41,28,14,.9);
}

.tier__tick{
  position:absolute;top:.55rem;inset-inline-end:.55rem;
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--line);color:transparent;background:var(--white);
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.tier__tick svg{width:12px;height:12px}
.tier.is-on .tier__tick{background:var(--espresso);border-color:var(--espresso);color:var(--cream)}

.tier__label{font-size:var(--step--1);font-weight:600;line-height:1.25;min-height:2.5em;
  display:flex;align-items:center;justify-content:center}
.tier__price{display:flex;align-items:baseline;justify-content:center;gap:.35rem;flex-wrap:wrap}
.tier__price strong{font-size:var(--step-1);font-weight:700}
.tier__price del{font-size:.72rem;color:var(--ink-3);font-weight:400}
.tier__per{font-size:.7rem;color:var(--ink-3)}
.tier__save{
  margin-top:.35rem;justify-self:center;
  padding:.22em .7em;border-radius:var(--r-pill);
  background:#EAF6EC;color:#1E5B2A;font-size:.68rem;font-weight:700;
}
.tier--best.is-on{border-color:var(--accent)}

/* the stepper is redundant once a tier is picked, but keep it reachable */
.tiers + .quantity{margin-top:.2rem}

@media (max-width:520px){
  .tiers__grid{gap:.4rem}
  .tier{padding:1.35rem .4rem .6rem;border-radius:var(--r-m)}
  .tier__label{font-size:.72rem;min-height:2.8em}
  .tier__price strong{font-size:var(--step-0)}
  .tier__price del{font-size:.65rem}
  .tier__per{font-size:.63rem}
  .tier__save{font-size:.62rem;padding:.2em .55em}
  .tier__ribbon{font-size:.56rem;padding:.24em .6em}
  .tier__tick{width:17px;height:17px;top:.4rem;inset-inline-end:.4rem}
}

/* cart line: what this row saved */
.tier-was{text-decoration:line-through;color:var(--ink-3);font-size:.8em}
.tier-save{display:inline-block;margin-inline-start:.35rem;padding:.15em .55em;border-radius:var(--r-pill);
  background:#EAF6EC;color:#1E5B2A;font-size:.7em;font-weight:700}

/* ==========================================================================
   Mix packs — "הרכיבו את המארז"
   ========================================================================== */
.mix{
  display:grid;gap:.85rem;margin-block:.4rem .2rem;
  padding:clamp(.9rem,2vw,1.3rem);border-radius:var(--r-l);
  background:var(--paper);border:1px solid var(--line-2);
}
.mix__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.mix__title{font-size:var(--step-0);font-weight:600;margin:0}
.mix__sub{font-size:var(--step--1);color:var(--ink-3);margin:.15rem 0 0;line-height:1.5}
.mix__counter{display:grid;justify-items:end;gap:.1rem;text-align:end}
.mix__n{font-size:var(--step-1);font-weight:700;font-variant-numeric:tabular-nums;
  /* "0 / 20" is a Latin run — isolate it or bidi reorders it to "20 / 0" */
  direction:ltr;unicode-bidi:isolate}
.mix__state{font-size:.7rem;color:var(--ink-3)}
.mix.is-full .mix__n{color:#1E5B2A}
.mix.is-over .mix__n{color:#8E2018}

.mix__bar{height:5px;border-radius:var(--r-pill);background:var(--line-2);overflow:hidden}
.mix__fill{display:block;height:100%;width:0;border-radius:inherit;background:var(--accent);
  transition:width .3s var(--ease),background .3s var(--ease)}
.mix.is-full .mix__fill{background:#2E7D3A}
.mix.is-over .mix__fill{background:#8E3B22}

.mix__list{display:grid;gap:.3rem;list-style:none;margin:0;padding:0;
  max-height:min(52vh,420px);overflow-y:auto;overscroll-behavior:contain}
.mixrow{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:.7rem;
  padding:.45rem .55rem;border-radius:var(--r-m);background:var(--white);
  border:1px solid transparent;transition:border-color .25s var(--ease)}
.mixrow.is-picked{border-color:var(--crema);background:var(--cream)}
.mixrow__pic{width:44px;height:44px;border-radius:var(--r-s);overflow:hidden;background:#fff;
  border:1px solid var(--line-2);display:grid;place-items:center;color:var(--clay)}
.mixrow__pic img{width:100%;height:100%;object-fit:contain;padding:8%}
.mixrow__pic svg{width:20px;height:20px}
.mixrow__blank{width:100%;height:100%;background:var(--surface-2)}
.mixrow__name{font-size:var(--step--1);line-height:1.3}
.mixrow--any .mixrow__name{font-weight:600}
.mixrow__qty{display:inline-flex;align-items:center;gap:.1rem;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.1rem;background:var(--white)}
.mixrow__btn{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-size:1rem;line-height:1;color:var(--ink-2);
  transition:background .2s var(--ease),color .2s var(--ease)}
.mixrow__btn:hover{background:var(--espresso);color:var(--cream)}
.mixrow__in{width:36px;border:0;background:none;text-align:center;font:inherit;font-weight:600;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.mixrow__in::-webkit-outer-spin-button,.mixrow__in::-webkit-inner-spin-button{appearance:none;margin:0}

.mix__warn{margin:0;font-size:var(--step--1);color:#8E2018;min-height:1.2em}
.mix-hide-qty{display:none}
form.cart .single_add_to_cart_button[disabled]{opacity:.45;cursor:not-allowed;transform:none}

@media (max-width:520px){
  .mixrow{grid-template-columns:36px minmax(0,1fr) auto;gap:.5rem;padding:.4rem .45rem}
  .mixrow__pic{width:36px;height:36px}
  .mixrow__name{font-size:.78rem}
  .mixrow__btn{width:26px;height:26px}
  .mixrow__in{width:30px}
}

/* the mix, echoed back in the cart and on the order */
.mix-lines{display:grid;gap:.1rem;margin-top:.3rem;font-size:.78rem;color:var(--ink-3);line-height:1.5}

/* ==========================================================================
   The account area
   ========================================================================== */

/* ---------- sidebar ---------- */
.acctnav__me{
  display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;
  padding:.9rem;border-radius:var(--r-l);
  background:var(--white);border:1px solid var(--line-2);
}
.acctnav__avatar{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--espresso);color:var(--cream);
  font-size:var(--step-0);font-weight:700;line-height:1;
}
.acctnav__who{display:grid;gap:.1rem;min-width:0}
.acctnav__who b{font-size:var(--step--1);font-weight:600}
.acctnav__who span{font-size:.7rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.woocommerce-MyAccount-navigation a{display:flex;align-items:center;gap:.65rem}
.woocommerce-MyAccount-navigation a svg{width:17px;height:17px;flex:none;color:var(--clay);
  transition:color .25s var(--ease)}
.woocommerce-MyAccount-navigation .is-active a svg{color:var(--oat)}

/* ---------- dashboard ---------- */
.dash{display:grid;gap:clamp(1.2rem,2.6vw,1.9rem)}
.dash__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}
.dash__kicker{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--crema);font-weight:600}
.dash__hi{font-size:clamp(1.4rem,3.2vw,2rem);font-weight:600;margin:.2rem 0 .3rem;line-height:1.15}
.dash__sub{font-size:var(--step--1);color:var(--ink-3);margin:0}

.dash__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:.7rem}
.dcard{
  display:grid;align-content:start;gap:.2rem;
  padding:1.1rem;border-radius:var(--r-l);
  background:var(--paper);border:1px solid var(--line-2);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.dcard:hover{transform:translateY(-3px);border-color:var(--crema);box-shadow:0 14px 30px -20px rgba(41,28,14,.7)}
.dcard__ico{
  width:36px;height:36px;border-radius:var(--r-m);display:grid;place-items:center;margin-bottom:.45rem;
  background:var(--cream);color:var(--espresso);
}
.dcard__ico svg{width:19px;height:19px}
.dcard__n{font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.dcard__t{font-size:var(--step--1);color:var(--ink-3)}
.dcard__t--lead{color:var(--ink);font-weight:600}
.dcard__val{font-size:var(--step--1);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dcard__go{margin-top:.5rem;font-size:.74rem;color:var(--crema);font-weight:600}

/* ---------- recent orders ---------- */
.dash__recent-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.7rem}
.dash__recent-head h3{font-size:var(--step-0);font-weight:600;margin:0}
.dash__recent-head a{font-size:var(--step--1);color:var(--crema);text-decoration:underline;text-underline-offset:3px}

.orders{display:grid;gap:.45rem;list-style:none;margin:0;padding:0}
.orow{
  display:grid;align-items:center;gap:.5rem 1rem;
  grid-template-columns:auto auto auto 1fr auto auto;
  padding:.8rem 1rem;border-radius:var(--r-m);
  background:var(--white);border:1px solid var(--line-2);
  font-size:var(--step--1);
}
.orow__no{font-weight:700;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.orow__date,.orow__items{color:var(--ink-3);font-size:.78rem}
.orow__total{font-weight:700}
.orow__status{
  padding:.22em .7em;border-radius:var(--r-pill);font-size:.7rem;font-weight:600;white-space:nowrap;
  background:var(--surface-2);color:var(--ink-2);
}
.orow__status.is-processing{background:#EAF1F8;color:#1E4C7B}
.orow__status.is-completed {background:#EAF6EC;color:#1E5B2A}
.orow__status.is-on-hold,
.orow__status.is-pending   {background:#FBF0E2;color:#7A4E12}
.orow__status.is-cancelled,
.orow__status.is-failed,
.orow__status.is-refunded  {background:#FDF3F2;color:#8E2018}
.orow__go{display:inline-flex;align-items:center;gap:.25rem;color:var(--crema);font-weight:600;white-space:nowrap}
.orow__go svg{width:14px;height:14px}

.dash__empty{
  display:grid;gap:.9rem;justify-items:center;text-align:center;
  padding:clamp(1.6rem,4vw,2.6rem);border-radius:var(--r-l);
  background:var(--paper);border:1px dashed var(--line);
}
.dash__empty p{margin:0;color:var(--ink-3);font-size:var(--step--1)}

@media (max-width:720px){
  /* the order row folds into a card rather than squeezing six columns */
  .orow{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "no    status status"
      "date  items  total"
      "go    go     go";
    row-gap:.35rem;
  }
  .orow__no{grid-area:no}
  .orow__status{grid-area:status;justify-self:end}
  .orow__date{grid-area:date}
  .orow__items{grid-area:items}
  .orow__total{grid-area:total;justify-self:end}
  .orow__go{grid-area:go;justify-self:start;margin-top:.2rem}
  .dash__head{align-items:flex-start}
}

/* ---------- signed-out: login beside register ---------- */
.woocommerce-account:not(.logged-in) .u-column2{
  background:var(--cream);border-color:var(--crema);
  position:relative;
}
/* the register side is the one a new visitor wants — mark it */
.woocommerce-account:not(.logged-in) .u-column2::before{
  content:"חדשים כאן?";
  position:absolute;top:0;inset-inline-start:clamp(1.2rem,2.6vw,2rem);translate:0 -50%;
  padding:.28em .85em;border-radius:var(--r-pill);
  background:var(--accent);color:var(--on-accent);
  font-size:.66rem;font-weight:700;letter-spacing:.06em;
}
.woocommerce-account .woocommerce-form__label-for-checkbox{margin-block:.2rem .4rem}
.woocommerce-account .woocommerce-privacy-policy-text p{margin-bottom:.6rem}
.woocommerce-account .woocommerce-LostPassword{margin:0;font-size:var(--step--1)}
.woocommerce-account .woocommerce-form button[type="submit"]{width:100%;margin-top:.2rem}
.woocommerce-account .woocommerce-form-register button[type="submit"]{background:var(--accent);color:var(--on-accent)}

/* ---------- the account shell on phones ---------- */
@media (max-width:820px){
  .acctnav__me{margin-bottom:.7rem}
  /* the endpoint list becomes a scrollable chip row so it costs one line,
     not a full screen of menu above the content */
  /* min-width:0 matters: without it the grid item grows to fit the row and
     the page scrolls sideways instead of the strip. */
  .woocommerce-MyAccount-navigation{min-width:0;max-width:100%}
  .woocommerce-MyAccount-navigation ul{
    display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;
    max-width:100%;padding-bottom:.2rem;
  }
  .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{display:none}
  .woocommerce-MyAccount-navigation li{flex:none}
  .woocommerce-MyAccount-navigation a{
    white-space:nowrap;padding:.55rem .9rem;border-radius:var(--r-pill);
    background:var(--white);border:1px solid var(--line-2);font-size:var(--step--1);
  }
  .woocommerce-MyAccount-navigation .is-active a{border-color:var(--espresso)}
  .woocommerce-MyAccount-content{padding:1rem}
}

/* ==========================================================================
   Product page on phones
   The gallery goes edge to edge, the buying controls stay compact, and the
   price and button follow you down the page instead of scrolling away.
   ========================================================================== */
@media (max-width:760px){
  /* keep the header offset — a plain padding-block here would reset the
     top padding and slide the breadcrumb under the nav */
  .pdp{padding-top:calc(var(--navh) + .6rem);padding-bottom:1.6rem}
  .pdp .crumb{margin-bottom:.7rem;font-size:.72rem}

  /* full-bleed packshot — the card edges add nothing at this width */
  .pdp__media{margin-inline:calc(var(--gutter) * -1)}
  .woocommerce-product-gallery{border-radius:0;box-shadow:none}
  .woocommerce-product-gallery__image img{max-width:82%;max-height:82%}
  .woocommerce-product-gallery .flex-control-thumbs{
    padding-inline:var(--gutter);margin-top:.55rem;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;
  }
  .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar{display:none}
  .woocommerce-product-gallery .flex-control-thumbs li{width:56px;flex:none}
  .pdp__flag{inset-inline-start:var(--gutter)}

  .pdp__title{font-size:1.28rem;margin:.35rem 0 .45rem}
  .pdp__price{margin-bottom:.75rem}
  .pdp__price .price{font-size:1.35rem}
  .pdp__fit{margin-bottom:.75rem;padding:.5rem .7rem;font-size:.78rem}

  /* three trust marks as a tight row, not three stacked lines */
  .pdp__perks{gap:.4rem .8rem;margin-top:.85rem;padding-top:.85rem}
  .pdp__perks li{font-size:.72rem}
  .pdp__perks svg{width:14px;height:14px}

  .pdp-desc{padding-block:1.8rem}
}

/* ---------- the sticky buy bar ---------- */
.buybar{
  position:fixed;inset-inline:0;bottom:0;z-index:60;
  display:none;align-items:center;gap:.7rem;
  padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(24,16,8,.92);backdrop-filter:blur(18px);
  border-top:1px solid rgba(225,212,194,.14);
  transform:translateY(110%);transition:transform .35s var(--ease);
}
.buybar.is-on{transform:none}
.buybar__price{display:flex;align-items:baseline;gap:.35rem;color:var(--cream);
  font-weight:700;font-size:var(--step-0);white-space:nowrap}
.buybar__price del{font-size:.72rem;font-weight:400;color:rgba(225,212,194,.55)}
.buybar__btn{
  flex:1;padding:.85em 1.2em;border-radius:var(--r-pill);border:0;cursor:pointer;
  background:var(--crema);color:#fff;font:inherit;font-weight:600;font-size:var(--step--1);
}
.buybar__btn:active{transform:scale(.985)}

/* it only exists where the real buy row can scroll out of reach */
@media (max-width:900px){
  .buybar{display:flex}
  /* lift the floating helpers and the app bar clear of it */
  body.has-buybar .appbar{transform:translateY(100%)}
}

/* ==========================================================================
   Shipping choices in the totals panel
   Woo puts the label and the options in one table row. Inside a 340–400px
   sidebar that leaves a fat label column beside a squeezed list, and the two
   pages disagree on how wide the label gets — 77px in the cart, 167px at
   checkout — so the same block looks different in each. Stack it instead:
   label on its own line, options across the full width.
   ========================================================================== */
.woocommerce-shipping-totals{display:block;padding-block:.7rem}
.woocommerce-shipping-totals > th,
.woocommerce-shipping-totals > td{display:block;width:auto;padding:0;border:0;text-align:start}
.woocommerce-shipping-totals > th{
  margin-bottom:.5rem;
  color:var(--ink-3);font-size:var(--step--1);font-weight:500;letter-spacing:0;text-transform:none;
}

ul#shipping_method{display:grid;gap:.35rem;list-style:none;margin:0;padding:0}
ul#shipping_method li{display:block;margin:0}
ul#shipping_method input[type=radio]{position:absolute;opacity:0;pointer-events:none}
ul#shipping_method label{
  display:flex;align-items:flex-start;gap:.55rem;cursor:pointer;
  padding:.6rem .75rem;border-radius:var(--r-m);
  border:1px solid var(--line-2);background:var(--paper);
  font-size:var(--step--1);line-height:1.4;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
/* the dot is drawn on the label, so the whole row is the target */
ul#shipping_method label::before{
  content:"";flex:none;width:16px;height:16px;margin-top:.15em;border-radius:50%;
  border:1.5px solid var(--line);background:var(--white);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
ul#shipping_method label:hover{border-color:var(--line)}
ul#shipping_method input:checked + label{border-color:var(--espresso);background:var(--white)}
ul#shipping_method input:checked + label::before{
  border-color:var(--espresso);box-shadow:inset 0 0 0 4px var(--espresso);
}
ul#shipping_method input:focus-visible + label{outline:2px solid var(--crema);outline-offset:2px}
ul#shipping_method label .amount{margin-inline-start:auto;font-weight:700;white-space:nowrap}

.woocommerce-shipping-totals .woocommerce-shipping-destination,
.woocommerce-shipping-totals > td > p{
  margin:.55rem 0 0;font-size:.74rem;color:var(--ink-3);line-height:1.5;
}
.woocommerce-shipping-totals .shipping-calculator-button{
  display:inline-block;margin-top:.4rem;font-size:var(--step--1);
}

/* ==========================================================================
   "יכול לעניין אותך גם" — one-click suggestions under the buy button
   ========================================================================== */
.addons{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line-2)}
.addons__title{font-size:var(--step--1);font-weight:600;margin:0 0 .55rem;color:var(--ink-2)}
.addons__list{display:grid;gap:.4rem;list-style:none;margin:0;padding:0}

.addon{position:relative}
.addon__check{position:absolute;opacity:0;width:1px;height:1px}
.addon__body{
  display:grid;grid-template-columns:auto 44px minmax(0,1fr) auto;align-items:center;gap:.7rem;
  padding:.5rem .65rem;border-radius:var(--r-m);cursor:pointer;
  background:var(--surface);border:1px solid var(--line-2);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.addon__body:hover{border-color:var(--line)}
.addon__check:checked + .addon__body{border-color:var(--crema-lite);background:var(--surface-2)}
.addon__check:focus-visible + .addon__body{outline:2px solid var(--crema-lite);outline-offset:2px}

.addon__box{
  width:19px;height:19px;border-radius:5px;display:grid;place-items:center;flex:none;
  border:1.5px solid var(--line);background:var(--white);color:transparent;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.addon__box svg{width:11px;height:11px}
.addon__check:checked + .addon__body .addon__box{
  background:var(--espresso);border-color:var(--espresso);color:var(--cream);
}
.addon__pic{width:44px;height:44px;border-radius:var(--r-s);overflow:hidden;background:#fff;display:grid;place-items:center}
.addon__pic img{width:100%;height:100%;object-fit:contain;padding:8%}
.addon__name{font-size:.8rem;line-height:1.3}
.addon__price{display:flex;align-items:baseline;gap:.3rem;font-size:var(--step--1);
  font-weight:700;white-space:nowrap}
.addon__price del{font-size:.72rem;font-weight:400;color:var(--ink-3)}

@media (max-width:520px){
  .addon__body{grid-template-columns:auto 36px minmax(0,1fr) auto;gap:.55rem;padding:.45rem .5rem}
  .addon__pic{width:36px;height:36px}
  .addon__name{font-size:.74rem}
}

/* ==========================================================================
   A flavour per box — the mix builder's smaller cousin
   ========================================================================== */
.boxpick{
  display:grid;gap:.7rem;margin-block:.2rem .5rem;
  padding:clamp(.8rem,1.8vw,1.1rem);border-radius:var(--r-l);
  background:var(--surface-2);border:1px solid var(--line-2);
}
.boxpick__head{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.boxpick__title{font-size:var(--step-0);font-weight:600}
.boxpick__hint{font-size:.74rem;color:var(--ink-3)}

.boxpick__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:.5rem}
.boxpick__field{display:grid;gap:.3rem}
.boxpick__label{font-size:.72rem;letter-spacing:.04em;color:var(--ink-3);font-weight:600}

.boxpick__select{position:relative;display:block}
.boxpick__select select{
  width:100%;appearance:none;cursor:pointer;
  padding:.62em 2.1em .62em .9em;border-radius:var(--r-m);
  border:1px solid var(--line);background:var(--white);
  font:inherit;font-size:var(--step--1);color:var(--espresso);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.boxpick__select select:focus{outline:none;border-color:var(--crema);box-shadow:0 0 0 3px rgba(176,122,46,.16)}
.boxpick__select svg{
  position:absolute;top:50%;inset-inline-start:.7rem;translate:0 -50%;
  width:15px;height:15px;color:var(--ink-3);pointer-events:none;
}
.boxpick__field.is-bad .boxpick__select select{border-color:#B3261E;background:#FDF3F2}
.boxpick__warn{margin:0;min-height:1.1em;font-size:var(--step--1);color:#8E2018}

/* it sits on the dark product hero, so it needs the light palette like the
   tier cards and the mix builder do */
.on-dark .boxpick{
  --ink:var(--espresso);--ink-2:#5B4230;--ink-3:#8C7660;
  --line:rgba(41,28,14,.13);--line-2:rgba(41,28,14,.07);
  background:var(--paper);color:var(--ink);
}

/* the overlay's way out to the full result set */
.search__all{
  display:block;margin-top:.5rem;padding:.7rem;border-radius:var(--r-m);
  background:var(--surface-2);text-align:center;
  font-size:var(--step--1);font-weight:600;color:var(--ink-2);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.search__all:hover{background:var(--espresso);color:var(--cream)}

/* the search-shaped empty state inside the shop archive */
.shop__empty h2{font-size:var(--step-1);font-weight:600;margin:0}
.shop__empty p{margin:0;color:var(--ink-3)}
.shop__empty .search-none__chips{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center}

/* ==========================================================================
   Cart drawer
   ========================================================================== */
.cdrawer{position:fixed;inset:0;z-index:120}
.cdrawer[hidden]{display:none}
.cdrawer__scrim{
  position:absolute;inset:0;background:rgba(20,13,6,.55);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .35s var(--ease);
}
.cdrawer.is-open .cdrawer__scrim{opacity:1}

.cdrawer__panel{
  position:absolute;inset-block:0;inset-inline-end:0;
  width:min(420px,100%);display:flex;flex-direction:column;
  background:var(--paper);box-shadow:-24px 0 60px -30px rgba(0,0,0,.6);
  transform:translateX(100%);transition:transform .38s var(--ease);
}
[dir="rtl"] .cdrawer__panel{transform:translateX(-100%)}
.cdrawer.is-open .cdrawer__panel{transform:none}

.cdrawer__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex:none;
  padding:1rem clamp(1rem,3vw,1.4rem);border-bottom:1px solid var(--line-2);
}
.cdrawer__title{display:flex;align-items:center;gap:.55rem;font-size:var(--step-1);font-weight:600;margin:0}
.cdrawer__count{
  min-width:24px;height:24px;padding:0 .45em;border-radius:var(--r-pill);
  display:inline-grid;place-items:center;
  background:var(--espresso);color:var(--cream);
  font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.cdrawer__close{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:var(--ink-2);transition:background .25s var(--ease)}
.cdrawer__close:hover{background:var(--surface-2)}
.cdrawer__close svg{width:18px;height:18px}

.cdrawer__inner{flex:1;display:flex;flex-direction:column;min-height:0}
.cdrawer__body{flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(.8rem,2.4vw,1.1rem) clamp(1rem,3vw,1.4rem)}
.cdrawer__body .ship-bar{margin-bottom:.9rem}

.cdrawer__list{display:grid;gap:.5rem;list-style:none;margin:0;padding:0}
.cline{
  display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:.75rem;align-items:start;
  padding:.7rem;border-radius:var(--r-m);background:var(--white);border:1px solid var(--line-2);
}
.cline__pic{width:60px;height:60px;border-radius:var(--r-s);overflow:hidden;background:#fff}
.cline__pic img{width:100%;height:100%;object-fit:contain;padding:6%}
.cline__txt{display:grid;gap:.3rem;min-width:0}
.cline__name{font-size:.82rem;line-height:1.35}
.cline__name a{color:var(--ink)}
.cline__name a:hover{color:var(--crema)}
.cline__meta{font-size:.7rem;color:var(--ink-3);line-height:1.5}
.cline__meta p{margin:0}
.cline__foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.1rem}
.cline__qty{
  display:inline-flex;align-items:center;gap:.05rem;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.1rem;background:var(--paper)}
.cline__step{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:.95rem;line-height:1;color:var(--ink-2);
  transition:background .2s var(--ease)}
.cline__step:hover{background:var(--surface-2)}
.cline__in{
  width:30px;border:0;background:none;text-align:center;font:inherit;
  font-size:.8rem;font-weight:700;color:var(--ink);appearance:textfield}
.cline__in::-webkit-outer-spin-button,.cline__in::-webkit-inner-spin-button{appearance:none;margin:0}
.cline__price{font-size:.85rem;font-weight:700;white-space:nowrap}
.cline__x{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:var(--ink-3);transition:background .2s var(--ease),color .2s var(--ease)}
.cline__x:hover{background:#FDF3F2;color:#8E2018}
.cline__x svg{width:13px;height:13px}
.cline.is-busy{opacity:.5;pointer-events:none}

.cdrawer__foot{
  flex:none;display:grid;gap:.5rem;
  padding:clamp(.9rem,2.4vw,1.2rem) clamp(1rem,3vw,1.4rem)
          calc(clamp(.9rem,2.4vw,1.2rem) + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-2);background:var(--white);
}
.cdrawer__sum{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.cdrawer__sum span{font-size:var(--step--1);color:var(--ink-3)}
.cdrawer__sum strong{font-size:var(--step-1);font-weight:700}
.cdrawer__note{margin:0 0 .2rem;font-size:.72rem;color:var(--ink-3)}

.cdrawer__empty{
  display:grid;gap:.9rem;justify-items:center;text-align:center;
  padding:clamp(2rem,7vw,3.5rem) 0;color:var(--ink-3)}
.cdrawer__empty p{margin:0}
.cdrawer__empty-ico{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:var(--cream);color:var(--clay)}
.cdrawer__empty-ico svg{width:28px;height:28px}
.cdrawer__empty .btn{width:auto;min-width:180px}

@media (max-width:520px){
  .cdrawer__panel{
    inset-inline:0;inset-block:auto 0;width:100%;max-height:90svh;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    transform:translateY(100%);
  }
  [dir="rtl"] .cdrawer__panel{transform:translateY(100%)}
  .cdrawer.is-open .cdrawer__panel{transform:none}
  .cline{grid-template-columns:52px minmax(0,1fr) auto;gap:.6rem}
  .cline__pic{width:52px;height:52px}
}

body.cdrawer-open{overflow:hidden}

/* ==========================================================================
   Wishlist
   ========================================================================== */
/* The heart is a real control now, so it stays visible on touch and reads its
   state from the fill rather than from hover. */
.prod__fav{
  position:absolute;top:.6rem;inset-inline-end:.6rem;z-index:3;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--ink-3);cursor:pointer;
  box-shadow:0 4px 12px -6px rgba(41,28,14,.5);
  opacity:0;transform:translateY(-6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),color .2s var(--ease);
}
.prod__fav svg{width:16px;height:16px;fill:none;transition:fill .2s var(--ease)}
.prod:hover .prod__fav,.prod__fav:focus-visible,.prod__fav.is-on{opacity:1;transform:none}
.prod__fav:hover{color:#8E3B22}
.prod__fav.is-on{color:#8E3B22}
.prod__fav.is-on svg{fill:currentColor}
@media (hover:none){ .prod__fav{opacity:1;transform:none} }

/* on the product page it sits on the gallery */
.pdp__fav{
  position:absolute;top:.9rem;inset-inline-end:3.6rem;z-index:4;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--ink-3);cursor:pointer;
  box-shadow:0 6px 16px -8px rgba(41,28,14,.5);
  transition:color .2s var(--ease),transform .2s var(--ease);
}
.pdp__fav svg{width:18px;height:18px;fill:none;transition:fill .2s var(--ease)}
.pdp__fav:hover{color:#8E3B22;transform:scale(1.06)}
.pdp__fav.is-on{color:#8E3B22}
.pdp__fav.is-on svg{fill:currentColor}
@media (max-width:760px){ .pdp__fav{inset-inline-end:calc(var(--gutter) + 3rem)} }

/* the account screen */
.wish{display:grid;gap:clamp(1.1rem,2.6vw,1.7rem)}
.wish__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}
.wish .prod-grid{grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr))}
@media (max-width:520px){
  .wish .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .wish__head{align-items:flex-start}
}

/* ==========================================================================
   Grouped archive — a parent shelf split by sub-brand
   ========================================================================== */
.cgroups{display:grid;gap:clamp(2.2rem,5vw,3.4rem)}
.cgroup__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-bottom:.7rem;margin-bottom:clamp(.9rem,2vw,1.3rem);
  border-bottom:1px solid var(--line-2);
}
.cgroup__title{
  display:flex;align-items:center;gap:.7rem;margin:0;
  font-size:var(--step-1);font-weight:600;line-height:1.2;
}
/* the same dark disc the brand marks are drawn for */
.cgroup__disc{
  width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 30%,#2A1D0F,#0B0704 72%);
  box-shadow:0 0 0 1px rgba(41,28,14,.1);
}
.cgroup__disc img{width:100%;height:100%;object-fit:contain;padding:17%}
.cgroup__all{
  display:inline-flex;align-items:center;gap:.4rem;flex:none;
  font-size:var(--step--1);color:var(--ink-3);
  transition:color .3s var(--ease);
}
.cgroup__all svg{transition:transform .3s var(--ease)}
.cgroup__all:hover{color:var(--espresso)}
.cgroup__all:hover svg{transform:translateX(-4px)}
@media (max-width:520px){
  .cgroup__head{gap:.5rem}
  .cgroup__title{font-size:var(--step-0)}
  .cgroup__disc{width:32px;height:32px}
}

/* the machine shelf says who made each group, and what it fits */
.cgroup__fit{
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;
  padding:.25em .7em;border:1px solid var(--line-2);border-radius:var(--r-pill);
}
@media (max-width:520px){ .cgroup__fit{display:none} }
/* a roaster with no mark shows its initial in the filter disc */
.mfilt__initial{font-size:1.05rem;font-weight:600;color:var(--crema-lite);line-height:1}
/* the collection address and hours, under the pickup radio */
.ship-note{
  display:block;margin-top:.3rem;font-size:var(--step--1);color:var(--ink-3);line-height:1.5;
}
/* the running total beside the per-unit price */
.pdp__linetotal{
  margin:-.5rem 0 1rem;font-size:var(--step-0);font-weight:600;color:var(--crema-lite);
}
.pdp__linetotal[hidden]{display:none}

/* ==========================================================================
   The brand wall
   ========================================================================== */
.brandwall{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:clamp(.7rem,1.6vw,1rem);
}
.brandwall__item{
  display:grid;justify-items:center;gap:.85rem;text-align:center;
  padding:clamp(1.3rem,2.6vw,1.9rem) 1rem;
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-l);
  transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);
}
.brandwall__item:hover{border-color:var(--latte);background:var(--paper);transform:translateY(-3px)}
.brandwall__disc{
  width:76px;height:76px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 30%,#2A1D0F,#0B0704 72%);
  box-shadow:0 8px 18px -10px rgba(11,7,4,.8);
}
.brandwall__disc img{width:100%;height:100%;object-fit:contain;padding:16%}
.brandwall__initial{font-size:1.6rem;font-weight:600;color:var(--crema-lite)}
.brandwall__name{font-size:var(--step-0);font-weight:600;line-height:1.25}

/* marketing consent — deliberately quiet, one line above the order button */
.ac-consent{margin:.2rem 0 .9rem !important;font-size:.8rem;color:var(--ink-3)}
.ac-consent label{display:flex !important;align-items:center;gap:.5rem;cursor:pointer;font-weight:400 !important}
.ac-consent input[type=checkbox]{width:15px;height:15px;margin:0;flex:none;accent-color:var(--crema)}

/* Account area: its content links are gold and underlined, and that rule also
   caught the wishlist page's buttons (gold text on a gold button) and the
   product cards inside it. Buttons and cards keep their own colours. */
.woocommerce-MyAccount-content a.btn{color:var(--on-accent);text-decoration:none}
.woocommerce-MyAccount-content .prod a{color:inherit;text-decoration:none}
.woocommerce-MyAccount-content .prod a.prod__add{color:var(--cream)}