/* ==========================================================================
   Chowanki — single product page (loaded only on is_product()): gallery
   layout + the "Podobne produkty" heading.

   The gallery is WooCommerce's classic Flexslider-based markup (rendered
   inside the woocommerce/product-image-gallery block):

   .woocommerce-product-gallery
     a.woocommerce-product-gallery__trigger   (zoom button)
     .flex-viewport                            (big image, one slide visible)
       .woocommerce-product-gallery__wrapper
         .woocommerce-product-gallery__image   (one per photo)
     ol.flex-control-nav.flex-control-thumbs   (thumbnails — JS-generated)
     ol.flex-direction-nav                     (prev/next arrows — JS-generated,
                                                 only once directionNav:true,
                                                 see chowanki_enable_gallery_
                                                 direction_nav() in functions.php)

   Turning this into "thumbnails left, big photo right, arrows over the
   photo" is a flexbox rebuild — thumbnails and direction-nav are appended
   at runtime by Flexslider's own JS, not something we control the markup
   of directly.
   ========================================================================== */

/* Gallery column takes up half the page (its sibling — the product details
   column — gets the other half automatically once this is fixed at 50%
   instead of growing/shrinking with content). Targets whichever column
   contains the gallery block, without needing to know its exact width.
   The Columns block gives every column flex-grow:1 by default, which would
   let this one grow past 50% again regardless of flex-basis — flex:0 0 50%
   (grow:0, shrink:0) makes the 50% actually stick. */
.wp-block-column:has(> .wp-block-woocommerce-product-image-gallery){
  flex:0 0 50% !important;
  width:50% !important;
  max-width:50% !important;
}

.woocommerce-product-gallery{
  display:flex !important;
  flex-direction:row-reverse !important;
  align-items:flex-start !important;
  gap:14px;
  position:relative;
}

/* ---- big photo (right) ---- */
.woocommerce-product-gallery .flex-viewport{
  flex:1 1 auto;
  min-width:0;
  position:relative;
}

/* ---- thumbnail rail (left) ---- */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs{
  display:flex !important;
  flex-direction:column !important;
  flex:0 0 90px;
  width:90px;
  gap:10px;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  max-height:640px;
  overflow-y:auto;
}
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li{
  width:100%;
  margin:0;
}
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs img{
  display:block;
  width:100% !important;
  height:auto !important;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:8px;
  cursor:pointer;
  opacity:.6;
  transition:opacity .2s ease;
}
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs img:hover{
  opacity:1;
}

/* ---- prev/next arrows, overlaid on the big photo only ----
   Positioned relative to .woocommerce-product-gallery (their actual DOM
   parent — Flexslider appends them there, not inside .flex-viewport), with
   the left offset skipping past the 90px thumbnail rail + 14px gap so they
   sit over the photo rather than spanning the whole row. */
.woocommerce-product-gallery .flex-direction-nav{
  position:absolute !important;
  top:50%;
  left:104px;
  right:0;
  transform:translateY(-50%);
  display:flex !important;
  justify-content:space-between;
  margin:0 !important;
  padding:0 12px;
  list-style:none !important;
  pointer-events:none;
  z-index:5;
}
.woocommerce-product-gallery .flex-direction-nav li{
  pointer-events:auto;
}
.woocommerce-product-gallery .flex-direction-nav a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  color:var(--chowanki-teal-dark,#078a7d);
  font-size:0;
  line-height:1;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  transition:background .2s ease, color .2s ease;
}
.woocommerce-product-gallery .flex-direction-nav a:hover{
  background:var(--chowanki-teal-dark,#078a7d);
  color:#fff;
}
.woocommerce-product-gallery .flex-direction-nav a::before{
  font-family:inherit;
  font-size:22px;
}
.woocommerce-product-gallery .flex-direction-nav .flex-prev a::before,
.woocommerce-product-gallery .flex-direction-nav a.flex-prev::before{
  content:"‹";
}
.woocommerce-product-gallery .flex-direction-nav .flex-next a::before,
.woocommerce-product-gallery .flex-direction-nav a.flex-next::before{
  content:"›";
}
/* Flexslider disables the nav at the first/last slide when animationLoop
   is off (it is, per the site's carousel options) — hide rather than show
   a dead-looking button. */
.woocommerce-product-gallery .flex-direction-nav .flex-disabled{
  opacity:0;
  pointer-events:none;
}

/* ---- newer block-based Product Gallery's large image ----
   woocommerce/product-gallery block (not the classic Flexslider gallery
   above). Confirmed from pasted HTML: the actual photo is
   .wc-block-product-gallery-large-image__wrapper (li) >
   .wc-block-components-product-image > img.attachment-large — NOT inside
   __inner-blocks, which only holds the prev/next button overlay. */
.wc-block-product-gallery-large-image__inner-blocks{
  width:100% !important;
  z-index:3;
  cursor:zoom-in;
}

/* Magnifier/lens zoom on the main photo — chowanki-product.js tracks the
   cursor and pans a zoomed-in background copy of the currently active
   photo to match, injecting a .chowanki-zoom-pane into this container.
   The pane sits BELOW the prev/next button overlay (z-index:3 above) so
   the arrows stay visible/usable on top of the zoomed photo instead of
   getting painted over by it. */
.wc-block-product-gallery-large-image{
  position:relative;
}
.chowanki-zoom-pane{
  position:absolute;
  z-index:1;
  background-repeat:no-repeat;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
  border-radius:inherit;
}
.chowanki-zoom-pane.is-active{
  opacity:1;
}
.wc-block-product-gallery-large-image__wrapper,
.chowanki-zoom-pane{
  cursor:zoom-in;
}
/* Keep the arrows their own cursor instead of inheriting zoom-in from the
   photo they sit on top of. */
.wc-block-next-previous-buttons__button{
  cursor:pointer;
}


@media (max-width:780px){
  .wp-block-column:has(> .wp-block-woocommerce-product-image-gallery){
    flex:1 1 100% !important;
    width:100% !important;
    max-width:100% !important;
  }
  .woocommerce-product-gallery{
    flex-direction:column !important;
  }
  .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs{
    flex-direction:row !important;
    flex:0 0 auto;
    width:100%;
    max-height:none;
    overflow-x:auto;
    overflow-y:visible;
  }
  .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li{
    flex:0 0 70px;
    width:70px;
  }
  .woocommerce-product-gallery .flex-direction-nav{
    left:0;
  }
}

/* ---- "Podobne produkty" (Related products) heading ----
   Tagged with .chowanki-related-heading by chowanki_mark_related_products_
   heading() in functions.php (it's a generic Heading block otherwise,
   shared with other headings on the page). Centered, sized/weighted to
   match .chowanki-nowosci__title on the homepage. */
.chowanki-related-heading{
  text-align:center !important;
  font-size:clamp(22px,3vw,32px) !important;
  font-weight:800 !important;
  color:var(--chowanki-ink,#2b2b2b);
}
.chowanki-related-heading strong{
  font-weight:inherit;
}

/* Center the "Podobne produkty" block and pull it in from the full
   "wide" alignment set on the block in the Single Product template, so
   the three related-product cards read as a little smaller/more compact
   instead of stretched edge-to-edge. Scoped to the product-collection
   block itself (not .alignwide generally) so no other wide block on the
   page is affected. */
.wp-block-woocommerce-product-collection.alignwide{
  max-width:900px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* ---- Description / Additional information / Reviews accordion ----
   Rebuilt from WooCommerce's default tab markup by chowanki-product.js
   into <details>/<summary> pairs — the browser handles the actual
   collapse/expand, this just styles it as a "rollup" list. */
.chowanki-accordion{
  max-width:1400px;
  margin:0 auto;
  padding:8px 0 0;
  border-top:1px solid #eee;
  font-family:'Manrope', sans-serif;
}
.chowanki-accordion__item{
  border-bottom:1px solid #eee;
}
.chowanki-accordion__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 4px;
  font-size:17px;
  font-weight:700;
  color:var(--chowanki-ink,#2b2b2b);
  cursor:pointer;
  list-style:none;
  /* <summary> is a native focusable/interactive element, so clicking it
     (not just tabbing to it) triggers the browser's default focus ring —
     a solid black outline in Chrome. Replaced below with a much softer
     ring that only shows for keyboard focus, so mouse clicks stay clean
     but Tab-ing to a header is still visible for accessibility. */
  outline:none;
}
.chowanki-accordion__header::-webkit-details-marker{
  display:none;
}
.chowanki-accordion__header:focus-visible{
  outline:2px solid var(--chowanki-teal,#09ab9c);
  outline-offset:-2px;
}
.chowanki-accordion__header::after{
  content:"+";
  flex-shrink:0;
  font-size:22px;
  font-weight:400;
  line-height:1;
  color:var(--chowanki-teal-dark,#078a7d);
}
.chowanki-accordion__item[open] > .chowanki-accordion__header::after{
  content:"–";
}
/* The panel div keeps its original WooCommerce classes too (.wc-tab,
   .woocommerce-Tabs-panel, .panel...), which WooCommerce's own tab-
   switching CSS/JS may still expect to control via those classes — force
   visibility explicitly off the <details> [open] state instead, so nothing
   left over from that fights the accordion.

   Native <details> normally snaps the panel from display:none to block
   instantly with no way to transition that. Three CSS-transition-based
   attempts (max-height; content-visibility + allow-discrete +
   @starting-style; a grid row transitioning between 0fr/1fr) all visibly
   stuttered partway through the animation regardless of which one — the
   common failure point was always the CSS-transition machinery itself
   (coordinating a "before" style, a forced reflow, and a "target" style
   write across exactly the right animation frames), not any one
   technique's specific quirks. chowanki-product.js now animates this
   panel directly with the Web Animations API (element.animate()) instead,
   which hands two keyframes straight to the browser's own animation
   engine in one call — no reflow/rAF choreography left for that to go
   wrong in. This CSS only sets the collapsed resting state; JS supplies
   the actual heights and drives the animation itself. */
.chowanki-accordion__panel{
  display:block !important;
  overflow:hidden;
  height:0;
  opacity:0;
  padding:0 4px 12px;
  color:var(--chowanki-ink-soft,#5c5c5c);
  font-size:16px;
  line-height:1.6;
}
/* the panel content still starts with its own "Description"/"Additional
   information" <h2> from WooCommerce's template — redundant once that
   same label is already the accordion header above it */
.chowanki-accordion__panel > h2:first-child{
  display:none;
}
.chowanki-accordion__panel table.shop_attributes{
  width:100%;
}

/* ---- "Opis" accordion item ----
   chowanki-product.js now rebuilds "Opis" (woocommerce/product-
   description) as the same kind of .chowanki-accordion__item as every
   attribute row, instead of leaving it as a native core/accordion item —
   so it already gets identical header/panel styling from the rules above
   with no extra CSS needed here (an earlier version of this file tried to
   patch the native item's font/color to just resemble the custom ones,
   which is why "Opis" looked and behaved differently — different heading
   font, and its native <button> heading picking up the theme's own
   link/button styling). If product-description ever renders its own
   paragraph margins oddly here, that's the place to adjust — but plain
   paragraph spacing has been fine so far. */

/* ---- product category above the title ----
   Injected by chowanki_inject_product_category_label() in functions.php,
   which always outputs BOTH .chowanki-shop-card-category and
   .chowanki-product-category on every category label it renders — so this
   class alone can't tell the main product's label apart from the Related
   products cards' labels (same classes on both). What's different is
   position: the main one is immediately followed by the H1 title (it's
   prepended there), while the Related products ones follow their h3 title
   instead (appended) — :has(+ h1...) targets only the former. */
body.single-product .chowanki-product-category:has(+ h1.wp-block-post-title){
  display:block;
  font-family:'Manrope', sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--chowanki-teal-dark,#078a7d);
  margin:28px 0 2px;
}
/* the title block usually carries its own top margin from the theme's
   block spacing defaults — zero it out here so it sits right under the
   category label instead of leaving extra gap */
body.single-product .chowanki-product-category + h1.wp-block-post-title{
  margin-top:0 !important;
}

/* ---- short description (above the price) + price sizing ----
   woocommerce/product-summary has no fontSize set in the template, so it
   was inheriting the theme's base paragraph size — shrink it so it reads
   as secondary to the price. woocommerce/product-price DOES have
   fontSize:"large" in the template (-> has-large-font-size class), but
   "large" in this theme's font-size preset scale still isn't big enough
   to read as the headline price, so bump it further here. Scoped to
   .has-large-font-size specifically (not just .wp-block-woocommerce-
   product-price) so this doesn't also affect the Related products cards'
   prices below, which use fontSize:"small" (.has-small-font-size) and
   already have their own sizing further down this file. */
.wp-block-woocommerce-product-summary{
  font-size:14px;
  line-height:1.6;
  color:var(--chowanki-ink-soft,#5c5c5c);
}
.wp-block-woocommerce-product-price.has-large-font-size{
  font-size:32px !important;
  font-weight:700;
}

/* ---- add-to-cart form: quantity stepper, button beside it ----
   This site actually renders the newer block-based
   woocommerce/add-to-cart-with-options block (root class
   .wp-block-woocommerce-add-to-cart-with-options), NOT the classic
   woocommerce/add-to-cart-form block — confirmed from live markup. All
   rules below are scoped to the real class; the old
   .wp-block-woocommerce-add-to-cart-form selectors never matched
   anything on this site, which is why earlier layout/color fixes here
   had no visible effect. The quantity selector and the button live in a
   WP "Group" block with is-layout-flex (row by default) — that's the
   button-next-to-quantity layout, so this just keeps the block's own row
   direction and adds a gap + stretch so both sit at the same height,
   instead of overriding it to display:block (stacked) like an earlier
   version of this rule did. */
.wp-block-woocommerce-add-to-cart-with-options .wp-block-group.is-layout-flex{
  display:flex !important;
  align-items:stretch !important;
  flex-wrap:wrap;
  gap:12px;
}
.wp-block-woocommerce-add-to-cart-with-options .quantity{
  align-items:stretch !important;
  flex:0 0 auto !important;
  margin:0 !important;
}
.wp-block-woocommerce-add-to-cart-with-options .single_add_to_cart_button{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  /* Fills whatever width is left beside the (fixed-width) quantity
     stepper, so the button runs all the way to the row's right edge
     instead of just being as wide as its own label text. */
  flex:1 1 auto !important;
  margin:0 !important;
  background-color:#156566 !important;
  color:#fef2b8 !important;
  font-weight:bold !important;
}
.chowanki-qty-btn{
  width:38px;
  flex:0 0 38px;
  border:1px solid #ddd;
  background:#fff;
  color:var(--chowanki-ink,#2b2b2b);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, color .2s ease;
}
.chowanki-qty-btn:hover{
  background:var(--chowanki-teal,#09ab9c);
  color:#fff;
  border-color:var(--chowanki-teal,#09ab9c);
}
.chowanki-qty-btn--minus{
  border-radius:8px 0 0 8px;
  border-right:none;
}
.chowanki-qty-btn--plus{
  border-radius:0 8px 8px 0;
  border-left:none;
}
.wp-block-woocommerce-add-to-cart-with-options input.qty{
  width:56px;
  margin:0 !important;
  text-align:center;
  border:1px solid #ddd;
  border-radius:0;
  font-family:'Manrope', sans-serif;
  font-size:15px;
  -moz-appearance:textfield;
}
.wp-block-woocommerce-add-to-cart-with-options input.qty::-webkit-outer-spin-button,
.wp-block-woocommerce-add-to-cart-with-options input.qty::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* ---- short description below the Add to cart button ----
   Appended by chowanki_customize_add_to_cart_form() in functions.php. */
.chowanki-product-short-desc{
  font-family:'Manrope', sans-serif;
  font-size:14px;
  line-height:1.6;
  color:var(--chowanki-ink-soft,#5c5c5c);
}
.chowanki-product-short-desc p:last-child{
  margin-bottom:0;
}

/* ---- "Zainteresowany?" out-of-stock inquiry form ----
   Appended right after the native stock text ("Brak w magazynie") by
   chowanki_inject_stock_interest_form() in functions.php, only when the
   product itself is out of stock — lets a visitor message the shop owner
   straight from the product page instead of leaving empty-handed. */
.chowanki-interest{
  margin-top:18px;
  padding:16px 0;
  border-radius:12px;
}
.chowanki-interest__title{
  margin:0 0 10px;
  font-family:'Manrope', sans-serif;
  font-size:16px;
  font-weight:700;
  color:var(--chowanki-ink,#2b2b2b);
}
.chowanki-interest-form{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.chowanki-interest-form__email{
  width:100%;
  padding:10px 14px;
  border:1px solid #ddd;
  border-radius:8px;
  background:#fff;
  font-family:'Manrope', sans-serif;
  font-size:14px;
  color:var(--chowanki-ink,#2b2b2b);
  box-sizing:border-box;
}
.chowanki-interest-form__email:focus{
  outline:2px solid var(--chowanki-teal,#09ab9c);
  outline-offset:1px;
  border-color:var(--chowanki-teal,#09ab9c);
}
.chowanki-interest-form__submit{
  align-self:flex-start;
  padding:10px 24px;
  border:none;
  border-radius:8px;
  background:var(--chowanki-teal-dark,#078a7d);
  color:#fef2b8;
  font-family:'Manrope', sans-serif;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s ease;
}
.chowanki-interest-form__submit:hover{
  background:var(--chowanki-teal,#09ab9c);
}
.chowanki-interest-form__submit:disabled{
  opacity:.6;
  cursor:default;
}
.chowanki-interest-form__status{
  margin:0;
  min-height:1em;
  font-family:'Manrope', sans-serif;
  font-size:13px;
}
.chowanki-interest-form__status.is-success{
  color:var(--chowanki-teal-dark,#078a7d);
}
.chowanki-interest-form__status.is-error{
  color:#c0392b;
}

/* ---- Additional information accordion panel — open/close slowly ----
   This is WordPress's native core/accordion block, which toggles via a
   hidden="until-found" attribute rather than a plain class, so it can't
   be animated with a simple display/max-height transition. Fading +
   sliding it in/out (with content-visibility transitioned via
   allow-discrete so the browser keeps rendering it for the duration of
   the transition instead of snapping to hidden immediately) is the
   supported way to animate this. */
.wp-block-accordion-panel{
  transition:opacity .4s ease, transform .4s ease, content-visibility .4s allow-discrete;
  opacity:1;
  transform:translateY(0);
}
.wp-block-accordion-panel[hidden]{
  opacity:0;
  transform:translateY(-6px);
}
@starting-style{
  .wp-block-accordion-panel:not([hidden]){
    opacity:0;
    transform:translateY(-6px);
  }
}

/* ==========================================================================
   "Podobne produkty" (Related products) cards — same look/behaviour as the
   shop archive cards (see chowanki-shop.css for the original): title+
   category on the left, price on the right, a basket icon with AJAX
   add-to-cart instead of the native button, and OKAZJA/NOWOŚĆ badges.

   The category label, NOWOŚĆ badge and basket icon markup are already
   injected server-side for every product-loop card everywhere on the site
   (see chowanki_inject_product_category_label() /
   chowanki_inject_secondary_thumbnail() in functions.php) — they're just
   hidden by default outside the shop archives (chowanki-shop.css), so this
   section is what turns them on here, scoped to .wc-block-product-template
   (the Related products block's own product loop) so nothing else on the
   single product page is affected.
   ========================================================================== */

/* ---- one-row carousel ----
   WooCommerce's Product Collection block renders these 3 cards as a plain
   flex-wrap grid, which drops onto extra stacked rows once they don't all
   fit side by side (e.g. on mobile) — flex-wrap:nowrap + overflow-x:auto
   keeps them on a single scrollable row instead, with prev/next arrow
   buttons (injected by chowanki-product.js, wrapped around the grid as
   .chowanki-related-carousel) to scroll it. Same visual language as the
   "Nowości" carousel arrows on the homepage, rebuilt here since that
   stylesheet isn't loaded on single product pages. */
.chowanki-related-carousel{
  display:flex;
  align-items:center;
  gap:10px;
}
.chowanki-related-carousel__arrow{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid #e8e8e8;
  background:#fff;
  color:var(--chowanki-ink,#2b2b2b);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.chowanki-related-carousel__arrow:hover{
  border-color:var(--chowanki-teal,#09ab9c);
  color:var(--chowanki-teal-dark,#078a7d);
}
.chowanki-related-carousel__arrow svg{width:18px; height:18px;}

/* Desktop: all 3 related-product cards already fit in one row (see the
   width calc below), so there's nothing to scroll and the arrows have
   nothing to do — hide them here, matching the same 780px breakpoint the
   card-width rule below switches on. They stay visible below 780px,
   where the row no longer fits and the arrows are how it scrolls. */
@media (min-width:781px){
  .chowanki-related-carousel__arrow{
    display:none;
  }
}

/* Mobile: hide the arrows here too (same breakpoint the "Nowości" carousel
   on the homepage uses) — the track underneath still scrolls by touch
   (overflow-x:auto + scroll-snap-type below), so nothing is lost, they're
   just not needed as tap targets on a phone. Still shown in the 601-780px
   tablet range, where there's more room for them as an alternative to a
   swipe. */
@media (max-width:600px){
  .chowanki-related-carousel__arrow{
    display:none;
  }
}

.wc-block-product-template.chowanki-related-carousel__track{
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  gap:20px;
  flex:1;
  min-width:0;
  padding:4px 2px 8px;
  margin:0;
  list-style:none;
  scrollbar-width:none;
}
.wc-block-product-template.chowanki-related-carousel__track::-webkit-scrollbar{
  display:none;
}
.wc-block-product-template.chowanki-related-carousel__track > li.product{
  flex:0 0 auto;
  scroll-snap-align:start;
  /* exactly 3 cards fit in one row with no scrolling needed at this
     container's own max-width (900px, set below) */
  width:calc((100% - 40px) / 3);
}
@media (max-width:780px){
  .wc-block-product-template.chowanki-related-carousel__track > li.product{
    /* fixed, readable card width once 3-across no longer fits — the next
       card peeks in at the edge as a hint that it scrolls, and the arrow
       buttons (always visible) swap the row along */
    width:240px;
  }
}

/* Remove the native "Add to cart" button + "View cart" link. */
.wc-block-product-template .wp-block-woocommerce-product-button{
  display:none !important;
}

/* Image hover-swap to the secondary photo + basket icon positioning need
   the card to be the positioning context. */
.wc-block-product-template li.product{
  position:relative;
}
.wc-block-product-template .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) — see chowanki-shop.css for why:
   touch devices register a tap as "hover" with no way to un-hover, leaving
   the swapped image and basket button (below) stuck after one tap. */
@media (hover:hover) and (pointer:fine){
  .wc-block-product-template li.product:hover .chowanki-shop-thumb-secondary{
    opacity:1 !important;
  }
}

/* ---- basket icon (replaces the native "Add to cart" button) ---- */
.wc-block-product-template .chowanki-shop-basket{
  display:flex !important;
  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;
  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;
}
.wc-block-product-template .chowanki-shop-basket svg{
  width:18px;
  height:18px;
}
.wc-block-product-template .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){
  .wc-block-product-template li.product:hover .chowanki-shop-basket{
    opacity:1;
    pointer-events:auto;
    transform:scale(1);
  }
  .wc-block-product-template .chowanki-shop-basket:hover{
    background:var(--chowanki-teal-dark,#078a7d);
    color:#fff;
  }
}
.wc-block-product-template li.product .added_to_cart{
  display:none !important;
}

/* ---- sale badge -> "OKAZJA" ----
   This block renders a different sale-badge structure than the classic
   archives (.wc-block-components-product-sale-badge with a nested
   __text span saying "Sale") — same text-replacement trick: hide the
   native text, show "OKAZJA" via a pseudo-element instead. */
.wc-block-product-template .wc-block-components-product-sale-badge{
  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;
}
.wc-block-product-template .wc-block-components-product-sale-badge::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", push the sale badge down so it
   sits underneath the NOWOŚĆ badge instead of the two overlapping. */
.wc-block-product-template li.product:has(.chowanki-shop-badge-new) .wc-block-components-product-sale-badge{
  top:50px !important;
}

/* ---- "NOWOŚĆ" badge ---- */
.wc-block-product-template .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 look/injection/stacking logic as chowanki-shop.css's version —
   see that file for the full explanation. Base display:none for this
   class already comes from chowanki-shop.css (loaded on every page, see
   chowanki_enqueue_menu_assets() in functions.php), so this only needs
   to un-hide and position it within the Related products block. */
.wc-block-product-template .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;
}
.wc-block-product-template li.product:has(.chowanki-shop-badge-new):not(:has(.wc-block-components-product-sale-badge)) .chowanki-shop-badge-outofstock,
.wc-block-product-template li.product:has(.wc-block-components-product-sale-badge):not(:has(.chowanki-shop-badge-new)) .chowanki-shop-badge-outofstock{
  top:50px !important;
}
.wc-block-product-template li.product:has(.chowanki-shop-badge-new):has(.wc-block-components-product-sale-badge) .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 — same treatment as the shop archive
   grids in chowanki-shop.css, scoped here to the related-products carousel
   only. Does not touch the /product/ page's own gallery, which never
   renders this badge markup. */
.wc-block-product-template li.product:has(.chowanki-shop-badge-outofstock) .wc-block-components-product-image img,
.wc-block-product-template li.product:has(.chowanki-shop-badge-outofstock) .chowanki-shop-thumb-secondary{
  filter:grayscale(100%);
}
.wc-block-product-template li.product:has(.chowanki-shop-badge-outofstock) .chowanki-shop-basket{
  display:none !important;
}

/* ---- title+category (left) / price (right) row ----
   chowanki-product.js wraps the title <h3> + category label together in
   .chowanki-shop-card-left, and that plus the price block together in
   .chowanki-shop-card-info — same technique as chowanki-shop.js on the
   archives (they're plain siblings with no shared wrapper in the block
   markup). */
.wc-block-product-template .chowanki-shop-card-info{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:10px;
  width:100%;
}
.wc-block-product-template .chowanki-shop-card-left{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-width:0;
}
.wc-block-product-template .chowanki-shop-card-left .wp-block-post-title{
  text-align:left !important;
  margin:0 !important;
}
.wc-block-product-template .chowanki-shop-card-left .wp-block-post-title a{
  text-align:left !important;
  transition:color .2s ease;
}
.wc-block-product-template .chowanki-shop-card-left .wp-block-post-title a:hover{
  color:#09ab9c !important;
  text-decoration:none !important;
}
.wc-block-product-template .chowanki-shop-card-category{
  display:block !important;
  text-align:left !important;
  font-family:'Manrope', sans-serif;
  font-size:11px !important;
  font-weight:400 !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  color:var(--chowanki-ink-soft,#5c5c5c) !important;
  margin:0 !important;
  cursor:pointer;
}
.wc-block-product-template .chowanki-shop-card-info .wp-block-woocommerce-product-price{
  text-align:right !important;
  margin:0 !important;
  flex:0 0 auto;
  cursor:pointer;
}
.wc-block-product-template .chowanki-shop-card-info .wc-block-components-product-price{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  gap:2px;
}

/* ---- "added to cart" toast ----
   chowanki-product.css doesn't load chowanki-shop.css/home.css, so the
   toast styles are duplicated here rather than shared. */
.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);
  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;
}