/* ==========================================================================
   Chowanki — front page (hero carousel, Nowości carousel, about banner, footer)
   ========================================================================== */

.chowanki-hero,
.chowanki-nowosci,
.chowanki-about-banner{
  font-family:'Manrope', sans-serif;
}

/* Twenty Twenty-Five applies a root blockGap margin above every top-level
   block (:where(.wp-site-blocks) > * { margin-block-start: 1.2rem }) —
   that's the gap that was showing between the header and the hero.
   Overriding the same selector removes it everywhere under .wp-site-blocks. */
:where(.wp-site-blocks) > *{
  margin-block-start:0 !important;
}


/* ---- hero carousel ---- */
.chowanki-hero{
  position:relative;
  width:100%;
  height:480px;
  overflow:hidden;
  background:none;
  margin:0;
  padding:0;
}
.chowanki-hero__track{
  position:relative;
  width:100%;
  height:100%;
}
.chowanki-hero__slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .7s ease;
}
.chowanki-hero__slide.is-active{
  opacity:1;
}
.chowanki-hero__slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Optional per-slide text + button overlay (see the 'heading' /
   'button_text' / 'button_link' keys on a $hero_files entry in
   functions.php) — a slide with none of those stays a plain image, same
   as before. Styled to match .chowanki-about-banner__text/__btn further
   down this file, for the same "text over a photo" situation there. */
.chowanki-hero__overlay{
  position:absolute;
  top:0;
  bottom:0;
  /* Right half of the slide only (rather than inset:0's full width) —
     align-items/justify-content below then center the text+button
     within that right-side box, instead of dead-center on the whole
     image. Default/no position set = right side; add the
     chowanki-hero__overlay--left modifier (see below) to flip it. */
  left:50%;
  right:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  text-align:center;
  padding:0 24px;
}
/* Darkening scrim behind the text/button — a photo isn't reliably dark
   enough on its own for white text to stay readable everywhere, so this
   dims the area right behind the content (strongest at the center,
   fading out toward the box's edges) regardless of what's underneath.
   Sits behind the text/button (z-index:0 vs. their z-index:1 below) and
   ignores clicks so the button stays clickable through it. */
.chowanki-hero__overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.5) 0%, rgba(0,0,0,.22) 55%, rgba(0,0,0,0) 85%);
  pointer-events:none;
  z-index:0;
}
.chowanki-hero__overlay-text,
.chowanki-hero__overlay-btn{
  position:relative;
  z-index:1;
}
/* Left half of the slide instead — same centered text+button treatment,
   just mirrored to the other side (see gozdziki.png below). */
.chowanki-hero__overlay--left{
  left:0;
  right:50%;
}
/* Extra padding on whichever side sits next to the prev/next arrows
   (16px offset + 44px diameter = 60px from the edge, see
   .chowanki-hero__arrow above), so the centered text/button shift away
   from that side instead of the flex-centering placing them right on
   top of the arrow at narrower desktop widths. Only applies where the
   arrows actually show (600px+ — see the max-width:600px block below,
   which hides them and doesn't need this). */
@media (min-width:601px){
  .chowanki-hero__overlay:not(.chowanki-hero__overlay--left){
    padding-right:80px;
  }
  .chowanki-hero__overlay--left{
    padding-left:80px;
  }
}
.chowanki-hero__overlay-text{
  color:#fff;
  font-size:clamp(22px,3.5vw,34px);
  font-weight:800;
  margin:0;
  max-width:640px;
  /* Two stacked shadows — a tight, dark one to pin down the letterforms'
     edges, plus a softer wider glow — so the text stays legible even on
     the lighter/busier parts of a photo, on top of the scrim above. */
  text-shadow:0 1px 3px rgba(0,0,0,.85), 0 4px 18px rgba(0,0,0,.6);
}
.chowanki-hero__overlay-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--chowanki-teal,#09ab9c);
  color:#fef2b8;
  text-decoration:none;
  font-weight:700;
  font-size:15px;
  padding:14px 32px;
  border-radius:999px;
  white-space:nowrap;
  transition:background .2s ease;
}
.chowanki-hero__overlay-btn:hover{
  background:var(--chowanki-teal-dark,#078a7d);
}
.chowanki-hero__overlay-btn svg{width:18px; height:18px;}

.chowanki-hero__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.85);
  color:var(--chowanki-teal-dark,#078a7d);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:2;
  transition:background .2s ease;
}
.chowanki-hero__arrow:hover{
  background:#fff;
}
.chowanki-hero__arrow svg{width:20px; height:20px;}
.chowanki-hero__arrow--prev{left:16px;}
.chowanki-hero__arrow--next{right:16px;}

.chowanki-hero__dots{
  position:absolute;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:2;
}
.chowanki-hero__dot{
  width:9px;
  height:9px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.6);
  cursor:pointer;
  padding:0;
}
.chowanki-hero__dot.is-active{
  background:#fff;
}

@media (max-width:600px){
  .chowanki-hero__arrow{display:none;}

  /* The overlay is normally confined to a left/right HALF of the slide
     (see .chowanki-hero__overlay / --left above) so it can sit "on the
     left" or "on the right" of the photo. On narrow phones that half is
     only ~150-190px wide, and the button in particular — set to
     white-space:nowrap so its text never wraps on desktop — would then
     render at its full text width regardless of that box, sticking out
     past the box and the screen edge. Fixed here by giving the overlay
     the full slide width on mobile (still centered, just no longer
     pinned to one side — there isn't room to dedicate half the screen
     to it anyway) and letting the button wrap instead of forcing a
     single line. */
  .chowanki-hero__overlay,
  .chowanki-hero__overlay--left{
    left:0;
    right:0;
    padding:0 20px;
  }
  .chowanki-hero__overlay-text{
    font-size:clamp(18px,5.5vw,24px);
    max-width:100%;
  }
  .chowanki-hero__overlay-btn{
    max-width:100%;
    box-sizing:border-box;
    white-space:normal;
    text-align:center;
    padding:12px 20px;
    font-size:14px;
  }
}

/* ---- Nowości / product carousel ---- */
.chowanki-nowosci{
  max-width:1400px;
  padding:clamp(32px,6vw,56px) clamp(16px,4vw,28px);
}
/* Bestsellery reuses .chowanki-nowosci wholesale (see functions.php), which
   doubles up the vertical gap between it and the Nowości section above
   (Nowości's own padding-bottom + Bestsellery's padding-top). Per request,
   drop just Bestsellery's padding-top; left/right/bottom stay the same as
   Nowości. The #bestseller id is unique to this section so this doesn't
   touch Nowości itself. */
#bestseller{
  padding-top:0;
}
.chowanki-nowosci__title{
  font-size:clamp(22px,3vw,32px);
  font-weight:800;
  text-align:center;
  margin:0 0 28px;
  color:var(--chowanki-ink,#2b2b2b);
}
.chowanki-nowosci__empty{
  text-align:center;
  color:var(--chowanki-ink-soft,#5c5c5c);
}

.chowanki-product-carousel{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
}
.chowanki-product-carousel__track{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:4px 2px 12px;
  flex:1;
  scrollbar-width:none;
}
.chowanki-product-carousel__track::-webkit-scrollbar{
  display:none;
}
.chowanki-product-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-product-carousel__arrow:hover{
  border-color:var(--chowanki-teal,#09ab9c);
  color:var(--chowanki-teal-dark,#078a7d);
}
.chowanki-product-carousel__arrow svg{width:18px; height:18px;}

.chowanki-product-card{
  position:relative;
  scroll-snap-align:start;
  flex:0 0 auto;
  /* exactly 4 cards visible at once (3 gaps of 20px between them) */
  width:calc((100% - 60px) / 4);
}
.chowanki-product-card__link{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
}
.chowanki-product-card__image-wrap{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  border-radius:14px;
  overflow:hidden;
  background:#f2f2f2;
}
.chowanki-product-card__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .35s ease;
}
.chowanki-product-card__image--primary{opacity:1;}
.chowanki-product-card__image--secondary{opacity:0;}
/* Only swap on true hover (mouse/trackpad) — on touch devices tapping the
   card registers as "hover" with no way to un-hover, leaving the swapped
   image and the basket button (below) stuck after a single tap. */
@media (hover:hover) and (pointer:fine){
  .chowanki-product-card:hover .chowanki-product-card__image--primary{opacity:0;}
  .chowanki-product-card:hover .chowanki-product-card__image--secondary{opacity:1;}
}

/* ---- NOWOŚĆ / OKAZJA badges ---- same rectangle look as the shop
   archives, stacked top-left (NOWOŚĆ above OKAZJA when a product is both
   new and on sale). Rendered directly by chowanki_render_home() in
   functions.php — only when actually needed for that product. */
.chowanki-product-card__badges{
  position:absolute;
  top:12px;
  left:12px;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.chowanki-product-card__badge{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5px 16px;
  border-radius:4px;
  font-family:'Manrope', sans-serif;
  font-size:12px;
  font-weight:700;
  color:#fef2b8;
  line-height:1;
  white-space:nowrap;
}
.chowanki-product-card__badge--new{
  background:#09ab9c;
}
.chowanki-product-card__badge--sale{
  background:#f47b34;
}
/* Out-of-stock — neutral grey rather than the teal/orange promo colors,
   since this isn't a promotion (it's the opposite). Stacking under
   NOWOŚĆ/OKAZJA needs no extra rule here, unlike the shop archives/
   related products: .chowanki-product-card__badges is already a flex
   column (above), so badges just stack in DOM order automatically. */
.chowanki-product-card__badge--outofstock{
  background:#6b6b6b;
  color:#fff;
}

/* Out-of-stock card: grey out both the primary and hover-swap images
   (nothing to buy) and hide the basket quick-add icon. */
.chowanki-product-card:has(.chowanki-product-card__badge--outofstock) .chowanki-product-card__image{
  filter:grayscale(100%);
}
.chowanki-product-card:has(.chowanki-product-card__badge--outofstock) .chowanki-product-card__basket{
  display:none !important;
}

/* Reset possible WooCommerce .add_to_cart_button/.button styling bleed
   (padding, background, border, text) before applying our own icon look. */
.chowanki-product-card__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;
  transform:scale(.85);
  width:38px;
  height:38px;
  min-width:0;
  border-radius:50%;
  background:#fff;
  color:var(--chowanki-teal-dark,#078a7d);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, background .2s ease, color .2s ease;
  z-index:2;
}
.chowanki-product-card__basket svg{
  width:18px;
  height:18px;
}
.chowanki-product-card__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 card leaves this basket button stuck visible on mobile. */
@media (hover:hover) and (pointer:fine){
  .chowanki-product-card:hover .chowanki-product-card__basket{
    opacity:1;
    pointer-events:auto;
    transform:scale(1);
  }
  .chowanki-product-card__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 so nothing but our
   icon shows and nothing invites navigating away to the cart page. */
.chowanki-product-card .added_to_cart{
  display:none !important;
}

/* Title+category (left) / price (right, stacked) row — matches the layout
   on the shop archives (/product-tag/nowosc/ etc). The whole card is one
   <a>, so "hover the title" isn't separately hoverable the way it is on
   the archives (nested links aren't valid HTML) — hovering anywhere on the
   card triggers it instead, consistent with the existing image-swap/basket
   hover behaviour here. */
.chowanki-product-card__info{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  width:100%;
  /* the card link uses align-items:center, which would otherwise shrink
     this to its content width instead of spanning the card so title/price
     can sit at opposite ends */
  align-self:stretch;
}
.chowanki-product-card__left{
  display:flex;
  flex-direction:column;
  min-width:0;
  text-align:left;
  margin-left:12px;
}
.chowanki-product-card__title{
  font-weight:600;
  font-size:14px;
  line-height:1.3;
  color:var(--chowanki-ink,#2b2b2b);
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:color .2s ease;
}
.chowanki-product-card:hover .chowanki-product-card__title{
  color:#09ab9c;
  text-decoration:none;
}
.chowanki-product-card__category{
  font-size:12px;
  color:var(--chowanki-ink-soft,#5c5c5c);
  margin-top:2px;
  cursor:pointer;
}
.chowanki-product-card__price{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  flex:0 0 auto;
  font-size:14px;
  line-height:1.3;
  color:var(--chowanki-ink-soft,#5c5c5c);
  white-space:nowrap;
  margin-right:12px;
  cursor:pointer;
}
.chowanki-product-card__price del{
  opacity:.55;
  font-weight:400;
}
.chowanki-product-card__price ins{
  text-decoration:none;
  color:var(--chowanki-teal-dark,#078a7d);
  font-weight:700;
}

@media (max-width:900px){
  .chowanki-product-card{
    /* 3 cards visible (2 gaps of 20px) */
    width:calc((100% - 40px) / 3);
  }
}

@media (max-width:600px){
  .chowanki-product-carousel__arrow{display:none;}
  .chowanki-product-card{
    /* 2 cards visible (1 gap of 20px) */
    width:calc((100% - 20px) / 2);
  }
}

/* ---- about banner ---- */
.chowanki-about-banner{
  position:relative;
  min-height:clamp(220px,30vw,360px);
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
}
.chowanki-about-banner::before{
  content:"";
  position:absolute;
  inset:0;
  /* darken the right side now, since the text sits there */
  background:linear-gradient(to left, rgba(0,0,0,.5), rgba(0,0,0,.15));
}
.chowanki-about-banner__row{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:0 clamp(16px,4vw,28px);
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.chowanki-about-banner__stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
  /* .chowanki-about-banner__row (above) right-aligns this with
     justify-content:flex-end, flush against the row's right edge —
     this margin nudges it back in from that edge, toward center,
     without changing which side it's on. */
  margin-right:clamp(24px,10vw,140px);
}
.chowanki-about-banner__text{
  color:#fff;
  font-size:clamp(20px,3vw,30px);
  font-weight:700;
  margin:0;
  text-shadow:0 2px 10px rgba(0,0,0,.3);
}
.chowanki-about-banner__btn{
  background:var(--chowanki-teal,#09ab9c);
  color:#fef2b8;
  text-decoration:none;
  font-weight:700;
  font-size:15px;
  padding:14px 32px;
  border-radius:999px;
  white-space:nowrap;
  transition:background .2s ease;
}
.chowanki-about-banner__btn:hover{
  background:var(--chowanki-teal-dark,#078a7d);
}

/* ---- "added to cart" toast ---- */
.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;
}