/* ==========================================================================
   Chowanki — WooCommerce product loop (category/tag/on-sale archives, shop
   page, search results). Loaded on every page since these archives aren't
   limited to the front page.
   ========================================================================== */

/* Image hover-swap to the product's second gallery image — matches the
   "Nowości" cards on the homepage.

   These archives render via the block-based Product Collection block, whose
   native "Product Image" block already outputs the primary image as part of
   its own markup — we can't inject into or replace that from PHP. Instead
   PHP (see chowanki_loop_secondary_thumbnail() in functions.php) appends
   just the second image as a sibling right after the image block, and this
   CSS lays it on top of the native image, absolutely positioned against the
   <li>, hidden until hover. The native image itself is left completely
   untouched, so its sizing, srcset, and the sale badge keep working exactly
   as WooCommerce renders them. */
li.product{
  position:relative;
}

/* The Product Collection block force-crops the native image to a 1:1 square
   (inline style + .wc-block-components-product-image--aspect-ratio-1-1) —
   override both to a 3:4 portrait crop instead. */
.wc-block-components-product-image{
  aspect-ratio:3/4 !important;
}
.wc-block-components-product-image img{
  aspect-ratio:3/4 !important;
  object-fit:cover !important;
  width:100% !important;
  height:100% !important;
}

.chowanki-shop-thumb-secondary{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:3/4 !important;
  object-fit:cover !important;
  opacity:0 !important;
  margin:0 !important;
  z-index:2;
  pointer-events:none !important;
  transition:opacity .35s ease;
}
/* Only swap on true hover (mouse/trackpad). Touch devices report a "hover"
   state on tap with no way to un-hover, which left the swapped image and
   the basket button (below) stuck after a single tap on mobile — gating
   both on (hover:hover) keeps the swap desktop-only and leaves the mobile
   thumbnail showing just the plain primary image. */
@media (hover:hover) and (pointer:fine){
  li.product:hover .chowanki-shop-thumb-secondary{
    opacity:1 !important;
  }
}

/* ---- sale badge ("Okazja") ----
   WooCommerce renders this differently depending on template (classic
   ".onsale" vs. the block-based sale-badge block) — cover both plus common
   variants rather than depending on one exact class name. The badge's own
   text ("Sale!"/whatever the store's translation is) is controlled by
   WooCommerce, not markup we own, so it's hidden (font-size:0) and replaced
   with "Okazja" via a pseudo-element instead of trying to edit it directly. */
body.chowanki-shop-archive .onsale,
body.chowanki-shop-archive .wc-block-components-product-sale-badge,
body.chowanki-shop-archive .wc-block-grid__product-onsale{
  position:absolute !important;
  top:12px !important;
  left:12px !important;
  right:auto !important;
  bottom:auto !important;
  inset-inline-start:12px !important;
  inset-inline-end:auto !important;
  margin:0 !important;
  z-index:4;
  display:flex !important;
  align-items:center;
  justify-content:center;
  min-width:0 !important;
  min-height:0 !important;
  width:auto !important;
  height:auto !important;
  padding:5px 16px !important;
  border-radius:4px !important;
  background:#f47b34 !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  font-size:0 !important;
  line-height:1 !important;
  text-transform:none !important;
  text-align:center;
}
body.chowanki-shop-archive .onsale::before,
body.chowanki-shop-archive .wc-block-components-product-sale-badge::before,
body.chowanki-shop-archive .wc-block-grid__product-onsale::before{
  content:"OKAZJA";
  display:block;
  font-family:'Manrope', sans-serif;
  font-size:12px;
  font-weight:700;
  color:#fef2b8;
  white-space:nowrap;
}
/* On a product that's ALSO tagged "nowosc" (so the NOWOŚĆ badge below is
   showing in the same top-left spot), push the sale badge down so it sits
   underneath NOWOŚĆ instead of the two overlapping. */
body.chowanki-shop-archive li.product:has(.chowanki-shop-badge-new) .onsale,
body.chowanki-shop-archive li.product:has(.chowanki-shop-badge-new) .wc-block-components-product-sale-badge,
body.chowanki-shop-archive li.product:has(.chowanki-shop-badge-new) .wc-block-grid__product-onsale{
  top:50px !important;
}

/* ---- "NOWOŚĆ" badge for products tagged "nowosc" ----
   Same rectangle look as the sale badge, but this one is markup we control
   directly (injected in chowanki_inject_secondary_thumbnail() in
   functions.php as a plain <span>), so no text-replacement trick is needed.
   Same top-left spot as the sale badge — on a product that's both new and
   on sale, NOWOŚĆ takes that top spot and the rule above pushes the sale
   badge down to sit underneath it. Hidden by default since the same markup
   can render outside the archives (Related products etc.) where this
   badge isn't wanted. */
.chowanki-shop-badge-new{
  display:none;
}
body.chowanki-shop-archive .chowanki-shop-badge-new{
  display:flex !important;
  position:absolute !important;
  top:12px !important;
  left:12px !important;
  right:auto !important;
  bottom:auto !important;
  margin:0 !important;
  z-index:5;
  align-items:center;
  justify-content:center;
  padding:5px 16px !important;
  border-radius:4px !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  background:#09ab9c;
  font-family:'Manrope', sans-serif;
  font-size:12px;
  font-weight:700;
  color:#fef2b8;
  line-height:1;
  white-space:nowrap;
  text-align:center;
}

/* ---- "BRAK W MAGAZYNIE" badge for out-of-stock products ----
   Same rectangle look and injection point as NOWOŚĆ (chowanki_inject_
   secondary_thumbnail() in functions.php), a neutral grey rather than the
   teal/orange promo colors since this isn't a promotion — it's the
   opposite, a reason NOT to buy right now. Stacks underneath whichever of
   NOWOŚĆ/OKAZJA are also showing on the same product, same top-left spot,
   same fixed order (NOWOŚĆ, then OKAZJA, then this one) as the two rules
   above already establish for each other. Hidden by default for the same
   reason as NOWOŚĆ — the same markup can render outside the archives. */
.chowanki-shop-badge-outofstock{
  display:none;
}
body.chowanki-shop-archive .chowanki-shop-badge-outofstock{
  display:flex !important;
  position:absolute !important;
  top:12px !important;
  left:12px !important;
  right:auto !important;
  bottom:auto !important;
  margin:0 !important;
  z-index:5;
  align-items:center;
  justify-content:center;
  padding:5px 16px !important;
  border-radius:4px !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  background:#6b6b6b;
  font-family:'Manrope', sans-serif;
  font-size:12px;
  font-weight:700;
  color:#fff;
  line-height:1;
  white-space:nowrap;
  text-align:center;
}
/* One of NOWOŚĆ/OKAZJA also present -> push down to the second slot;
   both present -> third slot underneath both. */
body.chowanki-shop-archive li.product:has(.chowanki-shop-badge-new):not(:has(.onsale)):not(:has(.wc-block-components-product-sale-badge)):not(:has(.wc-block-grid__product-onsale)) .chowanki-shop-badge-outofstock,
body.chowanki-shop-archive li.product:has(.onsale):not(:has(.chowanki-shop-badge-new)) .chowanki-shop-badge-outofstock,
body.chowanki-shop-archive li.product:has(.wc-block-components-product-sale-badge):not(:has(.chowanki-shop-badge-new)) .chowanki-shop-badge-outofstock,
body.chowanki-shop-archive li.product:has(.wc-block-grid__product-onsale):not(:has(.chowanki-shop-badge-new)) .chowanki-shop-badge-outofstock{
  top:50px !important;
}
body.chowanki-shop-archive li.product:has(.chowanki-shop-badge-new):has(.onsale) .chowanki-shop-badge-outofstock,
body.chowanki-shop-archive li.product:has(.chowanki-shop-badge-new):has(.wc-block-components-product-sale-badge) .chowanki-shop-badge-outofstock,
body.chowanki-shop-archive li.product:has(.chowanki-shop-badge-new):has(.wc-block-grid__product-onsale) .chowanki-shop-badge-outofstock{
  top:88px !important;
}

/* Out-of-stock thumbnails: grey out the product image (nothing to buy)
   and hide the basket quick-add icon — scoped to the archive grids only,
   the /product/ page's own gallery never renders this badge markup so
   it's untouched here regardless. */
body.chowanki-shop-archive li.product:has(.chowanki-shop-badge-outofstock) .wc-block-components-product-image img,
body.chowanki-shop-archive li.product:has(.chowanki-shop-badge-outofstock) .chowanki-shop-thumb-secondary{
  filter:grayscale(100%);
}
body.chowanki-shop-archive li.product:has(.chowanki-shop-badge-outofstock) .chowanki-shop-basket{
  display:none !important;
}

/* ---- 4 products per row on the category/tag/brand/on-sale/search archives ----
   The Product Collection block sets its own column count per template
   (a "columns-N" class + flex-basis), which differs archive to archive —
   rather than guess the exact wrapper class, :has() targets whatever
   element actually wraps the product <li>s. Scoped to .chowanki-shop-archive
   (added via body_class() in functions.php for product-category, product-tag,
   product-brand, /wyprzedaz/ and product search results), so only the plain
   Shop page and the Related products block on single product pages keep
   their own layout. */
body.chowanki-shop-archive ul:has(> li.product){
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
}
body.chowanki-shop-archive ul:has(> li.product) > li.product{
  flex:0 0 calc((100% - 2 * 6px) / 3) !important;
  width:calc((100% - 2 * 6px) / 3) !important;
  max-width:calc((100% - 2 * 6px) / 3) !important;
}
@media (max-width:900px){
  body.chowanki-shop-archive ul:has(> li.product) > li.product{
    flex:0 0 calc((100% - 6px) / 2) !important;
    width:calc((100% - 6px) / 2) !important;
    max-width:calc((100% - 6px) / 2) !important;
  }
}
@media (max-width:520px){
  body.chowanki-shop-archive ul:has(> li.product) > li.product{
    flex:0 0 100% !important;
    width:100% !important;
    max-width:100% !important;
  }
}

/* ---- remove breadcrumb / archive title / result count ----
   Covers both the classic WooCommerce classes and the block-based
   equivalents, since it's not certain which one this template renders.
   NOTE: .wp-block-post-title is intentionally NOT in this list — that class
   is also used by each individual product card's title inside the loop
   (confirmed from the archive markup), so hiding it hid every product name
   along with the archive heading. Only .wp-block-query-title (the actual
   per-archive H1) is targeted for that.
   NOTE 2: the title selectors (.wp-block-query-title / .page-title /
   .woocommerce-products-header__title) are scoped with :not(.search) —
   on the product search results page that same H1 is the "Wyniki
   wyszukiwania dla" heading, which was deliberately kept and styled
   (see .search .wp-block-query-title rule in chowanki-menu.css). The
   breadcrumb/count/sorting classes stay hidden everywhere, search included. */
body.chowanki-shop-archive .wp-block-woocommerce-breadcrumbs,
body.chowanki-shop-archive .woocommerce-breadcrumb,
body.chowanki-shop-archive .wc-block-breadcrumbs,
body.chowanki-shop-archive .wp-block-woocommerce-product-results-count,
body.chowanki-shop-archive .woocommerce-result-count,
body.chowanki-shop-archive .wp-block-woocommerce-catalog-sorting,
body.chowanki-shop-archive .woocommerce-ordering{
  display:none !important;
}
body.chowanki-shop-archive:not(.search) .wp-block-query-title,
body.chowanki-shop-archive:not(.search) .page-title,
body.chowanki-shop-archive:not(.search) .woocommerce-products-header__title{
  display:none !important;
}

/* ---- hide WooCommerce's own "added to cart" notice ----
   The block-based archive template includes a Store Notices block, which
   pops up "X has been added to your cart. View cart" whenever our
   classic-AJAX basket icon succeeds. The homepage never shows this because
   its custom template doesn't include that block at all — here we hide it
   so only our own .chowanki-toast (see below) is visible, matching the
   homepage. Several candidate selectors since the exact markup isn't
   confirmed. */
body.chowanki-shop-archive .wp-block-woocommerce-store-notices,
body.chowanki-shop-archive .wc-block-store-notices,
body.chowanki-shop-archive .wc-block-components-notice-banner,
body.chowanki-shop-archive .woocommerce-notices-wrapper,
body.chowanki-shop-archive .woocommerce-message{
  display:none !important;
}

/* ---- product card: title+category (left) / price (right, stacked) row ----
   chowanki-shop.js wraps the title <h2> + category label together in
   .chowanki-shop-card-left, and that plus the price block together in
   .chowanki-shop-card-info (they're plain siblings with no shared wrapper
   in the block markup). */
body.chowanki-shop-archive .chowanki-shop-card-info{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:10px;
  width:100%;
}
body.chowanki-shop-archive .chowanki-shop-card-left{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-width:0;
  /* the requested left margin on the title lives here so the category
     label underneath stays aligned with it */
  margin-left:12px;
}
body.chowanki-shop-archive .chowanki-shop-card-left .wp-block-post-title{
  text-align:left !important;
  margin:0 !important;
}
body.chowanki-shop-archive .chowanki-shop-card-left .wp-block-post-title a{
  text-align:left !important;
  transition:color .2s ease;
}
body.chowanki-shop-archive .chowanki-shop-card-left .wp-block-post-title a:hover{
  color:#09ab9c !important;
  text-decoration:none !important;
}
/* Hidden by default since the category label renders wherever the product
   title block does (Related products, Shop page, single product...) — only
   actually shown/styled on the category/tag/on-sale archives. */
.chowanki-shop-card-category{
  display:none;
}
body.chowanki-shop-archive .chowanki-shop-card-category{
  display:block;
  text-align:left;
  font-size:12px;
  color:var(--chowanki-ink-soft,#5c5c5c);
  margin-top:2px;
  cursor:pointer;
}
body.chowanki-shop-archive .chowanki-shop-card-info .wp-block-woocommerce-product-price{
  text-align:right !important;
  margin:0 12px 0 0 !important;
  flex:0 0 auto;
  cursor:pointer;
}
/* Stack the old (del) price above the new (ins) price, right-aligned,
   instead of the default side-by-side layout. */
body.chowanki-shop-archive .chowanki-shop-card-info .wc-block-components-product-price{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  gap:2px;
}

/* ---- layout: product grid + sticky filter sidebar on the right ----
   chowanki-shop.js wraps the grid in .chowanki-shop-layout__products and
   appends the toolbar as a sibling after it, so normal flex row order puts
   the toolbar on the right without needing any DOM-order tricks. */
.chowanki-shop-layout{
  display:flex;
  align-items:flex-start;
  gap:32px;
  max-width:1400px;
  margin:0 auto;
  padding:16px clamp(16px,4vw,28px) 0;
}
.chowanki-shop-layout__products{
  flex:1 1 auto;
  min-width:0;
  transition:opacity .15s ease;
}
.chowanki-shop-layout__products.is-loading{
  opacity:.4;
  pointer-events:none;
}
.chowanki-shop-no-results{
  font-family:'Manrope', sans-serif;
  padding:32px 0;
  color:var(--chowanki-ink-soft,#5c5c5c);
  text-align:center;
  width:100%;
}
.chowanki-shop-layout__products ul:has(> li.product){
  /* the grid itself no longer needs its own outer max-width/centering —
     .chowanki-shop-layout now owns that */
  margin:0 !important;
  padding:0 !important;
  max-width:none !important;
}

.chowanki-shop-toolbar{
  flex:0 0 170px;
  width:170px;
  display:flex;
  flex-direction:column;
  gap:14px;
  font-family:'Manrope', sans-serif;
  position:sticky;
  /* below the fixed header — see --chowanki-header-height in chowanki-menu.css */
  top:150px;
  padding:14px;
  border-radius:10px;
  border:1px solid #eee;
  background:#fafafa;
}
.chowanki-shop-toolbar__field{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.chowanki-shop-toolbar__label,
.chowanki-shop-toolbar__field .chowanki-shop-toolbar__label{
  font-size:12px;
  font-weight:700;
  color:var(--chowanki-ink,#2b2b2b);
  padding:0;
}
.chowanki-shop-toolbar__field select{
  font-family:inherit;
  font-size:13px;
  padding:6px 8px;
  border-radius:7px;
  border:1px solid #ddd;
  background:#fff;
  color:var(--chowanki-ink,#2b2b2b);
  width:100%;
}
.chowanki-shop-toolbar__group{
  border:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.chowanki-shop-toolbar__group legend{
  margin-bottom:2px;
  padding:0;
}
.chowanki-shop-toolbar__price-row{
  display:flex;
  align-items:center;
  gap:6px;
}
.chowanki-shop-toolbar__price-row input{
  width:0;
  flex:1 1 0;
  min-width:0;
  font-family:inherit;
  font-size:13px;
  padding:6px 7px;
  border-radius:7px;
  border:1px solid #ddd;
  background:#fff;
  color:var(--chowanki-ink,#2b2b2b);
}
.chowanki-shop-toolbar__price-sep{
  color:var(--chowanki-ink-soft,#5c5c5c);
  flex-shrink:0;
  font-size:13px;
}
.chowanki-shop-toolbar__checkbox{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--chowanki-ink-soft,#5c5c5c);
  cursor:pointer;
}
.chowanki-shop-toolbar__checkbox input{
  width:14px;
  height:14px;
  flex-shrink:0;
  accent-color:var(--chowanki-teal,#09ab9c);
}
.chowanki-shop-toolbar__submit{
  background:var(--chowanki-teal,#09ab9c);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:10px 24px;
  font-family:inherit;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:background .2s ease;
}
.chowanki-shop-toolbar__submit:hover{
  background:var(--chowanki-teal-dark,#078a7d);
}

/* Mobile-only "Filtruj" tab (chowanki-shop.js inserts it as the first
   child of .chowanki-shop-layout) that opens the toolbar as a left-hand
   drawer instead of it always taking up space above the grid. Hidden on
   desktop, where the toolbar is the always-visible sticky sidebar — same
   for its close button and backdrop, both mobile-drawer-only. */
.chowanki-shop-filter-toggle,
.chowanki-shop-toolbar__close,
.chowanki-shop-toolbar-backdrop{
  display:none;
}

@media (max-width:900px){
  .chowanki-shop-layout{
    flex-direction:column;
  }

  /* Round, icon-only button stuck near the left edge of the screen —
     same circular-floating-icon look as .chowanki-shop-basket's quick-add
     button elsewhere on these archives, just fixed in place instead of
     sitting on a product card. Fixed so it stays put while scrolling.
     `top` is set from JS (syncFilterTogglePosition in chowanki-shop.js),
     measured to land just under the price filter rather than guessed —
     the value here is only the pre-JS fallback. transform:translateY(-50%)
     centers the button ON that measured point rather than starting from
     it, so it stays paired with `top` however that value changes. Icon-
     only, so aria-label carries the accessible name (set in
     chowanki-shop.js) in place of visible text. */
  .chowanki-shop-filter-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    position:fixed;
    top:50%;
    left:12px;
    transform:translateY(-50%);
    z-index:1011;
    width:48px;
    height:48px;
    padding:0;
    border:none;
    border-radius:50%;
    background:#fff;
    cursor:pointer;
    box-shadow:0 4px 14px rgba(0,0,0,.18);
    transition:left .3s ease, background .2s ease;
  }
  .chowanki-shop-filter-toggle svg{
    width:20px;
    height:20px;
    stroke:var(--chowanki-teal-dark,#078a7d);
    flex-shrink:0;
  }
  /* While the drawer is open, move the button to sit right on the
     drawer's own right edge instead of leaving it at the screen's left
     edge (where it would otherwise land on top of whichever filter field
     is at its vertical position) — so it slides along with the drawer's
     own open/close transform instead of needing to hide. min(82vw,320px)
     matches .chowanki-shop-toolbar's own width below; half the button's
     own width (24px) is subtracted so its center — not its edge — lines
     up with the drawer's edge. */
  body.chowanki-shop-toolbar-open .chowanki-shop-filter-toggle{
    left:calc(min(82vw, 320px) - 24px);
    background:var(--chowanki-teal,#09ab9c);
  }
  body.chowanki-shop-toolbar-open .chowanki-shop-filter-toggle svg{
    stroke:#fff;
  }

  /* Hide the floating filter button while the mobile hamburger nav drawer
     is open (body.chowanki-nav-open — see chowanki-menu.js) — otherwise it
     sits fixed at the left edge on top of that drawer instead of being
     covered by it. */
  body.chowanki-nav-open .chowanki-shop-filter-toggle{
    display:none;
  }

  /* Off-canvas drawer sliding in from the left, over a dimmed backdrop
     (.chowanki-shop-toolbar-backdrop below) — same idea as the mobile
     nav drawer/backdrop in chowanki-menu.css. Always present in the
     layout (not display:none) so the transform below can actually
     transition/animate; sitting fully off-screen at translateX(-100%)
     already makes it non-interactive without needing visibility/
     pointer-events toggling too. */
  .chowanki-shop-toolbar{
    position:fixed;
    top:0;
    left:0;
    z-index:1010;
    width:82vw;
    max-width:320px;
    height:100vh;
    height:100dvh;
    flex:none;
    margin:0;
    border-radius:0 14px 14px 0;
    border:none;
    box-shadow:8px 0 24px rgba(0,0,0,.18);
    overflow-y:auto;
    padding:56px 16px 24px;
    transform:translateX(-100%);
    transition:transform .3s ease;
  }
  .chowanki-shop-toolbar.chowanki-shop-toolbar--open{
    transform:translateX(0);
  }
  .chowanki-shop-toolbar__close{
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:12px;
    right:12px;
    width:32px;
    height:32px;
    padding:0;
    border:none;
    border-radius:50%;
    background:#fff;
    color:var(--chowanki-ink,#2b2b2b);
    cursor:pointer;
  }
  .chowanki-shop-toolbar__close svg{
    width:16px;
    height:16px;
  }

  /* Dims the rest of the page while the drawer is open; clicking it
     closes the drawer (see chowanki-shop.js). */
  .chowanki-shop-toolbar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(20,20,20,.55);
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
    z-index:1005;
  }
  .chowanki-shop-toolbar-backdrop.open{
    opacity:1;
    visibility:visible;
  }

  /* Prevents the dimmed page from scrolling behind the open drawer. */
  body.chowanki-shop-toolbar-open{
    overflow:hidden;
  }
}

/* ---- basket icon (replaces the native "Add to cart" button) ----
   Same look/behaviour as the "Nowości" cards on the homepage: a circular
   icon in the image's top-right corner, hidden until hover. Injected by
   chowanki_inject_secondary_thumbnail() in functions.php for every product,
   but only actually shown on the .chowanki-shop-archive pages (category, tag,
   brand, on-sale, search) — elsewhere (Related products, plain Shop page) it
   stays hidden and WooCommerce's own button block is left alone. */
.chowanki-shop-basket{
  display:none;
}
body.chowanki-shop-archive .wp-block-woocommerce-product-button{
  display:none !important;
}
body.chowanki-shop-archive .chowanki-shop-basket{
  position:absolute !important;
  top:12px !important;
  right:12px !important;
  left:auto !important;
  bottom:auto !important;
  margin:0 !important;
  border:none !important;
  font-size:0 !important;
  line-height:1 !important;
  text-decoration:none !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  min-width:0;
  border-radius:50%;
  background:#fff;
  color:var(--chowanki-teal-dark,#078a7d);
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  opacity:0;
  pointer-events:none;
  transform:scale(.85);
  transition:opacity .25s ease, transform .25s ease, background .2s ease, color .2s ease;
  z-index:3;
}
body.chowanki-shop-archive .chowanki-shop-basket svg{
  width:18px;
  height:18px;
}
body.chowanki-shop-archive .chowanki-shop-basket:focus-visible{
  opacity:1;
  pointer-events:auto;
  transform:scale(1);
}
/* Same (hover:hover) gating as the image swap above — otherwise a tap on
   the thumbnail leaves this basket button stuck visible on mobile. */
@media (hover:hover) and (pointer:fine){
  body.chowanki-shop-archive li.product:hover .chowanki-shop-basket{
    opacity:1;
    pointer-events:auto;
    transform:scale(1);
  }
  body.chowanki-shop-archive .chowanki-shop-basket:hover{
    background:var(--chowanki-teal-dark,#078a7d);
    color:#fff;
  }
}
/* After a successful AJAX add-to-cart, WooCommerce's own script inserts a
   "View cart" text link next to the button — hide it here too. */
body.chowanki-shop-archive li.product .added_to_cart{
  display:none !important;
}

/* ---- "added to cart" toast ----
   Same feedback as the homepage "Nowości" cards: instead of WooCommerce's
   default inline "View cart" message (hidden above), show a small floating
   toast at the bottom of the screen. Styles copied from chowanki-home.css
   since that stylesheet isn't loaded on these archive pages. */
.chowanki-toast{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translate(-50%, 16px);
  background:var(--chowanki-teal-dark,#078a7d);
  color:#fff;
  font-family:'Manrope', sans-serif;
  font-weight:600;
  font-size:14px;
  padding:14px 22px;
  border-radius:999px;
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  opacity:0;
  pointer-events:none;
  z-index:2000;
  transition:opacity .25s ease, transform .25s ease;
  max-width:calc(100vw - 32px);
  text-align:center;
}
.chowanki-toast.is-visible{
  opacity:1;
  transform:translate(-50%, 0);
  /* needs pointer-events re-enabled here (the base rule turns them off so
     the invisible/fading-out toast never blocks clicks) so the "Zobacz
     koszyk" link inside is actually clickable while shown. */
  pointer-events:auto;
}
.chowanki-toast__link{
  color:#fff;
  text-decoration:underline;
  font-weight:700;
  margin-left:8px;
  white-space:nowrap;
}
.chowanki-toast__link:hover{
  text-decoration:none;
}