:root{
  --pcard-gap     : 16px;
  --pimg-max      : 200px;      /* tylko dla nie–full-bleed */
  --btn-icon-size : 22px;

  /* ARROWS – sterowane z widgetu */
  --arrow-size    : 32px;
  --arrow-inset   : 8px;        /* od krawędzi, gdy inside */
  --arrow-outset  : 56px;       /* jak daleko na zewnątrz, gdy outside */
  --arrow-x       : 0px;        /* dodatkowy offset poziomy */
  --arrow-radius  : 16px;
  --arrow-brw     : 0px;        /* obramowanie */
  --arrow-brc     : transparent;
  --arrow-bg      : transparent;

  --arrow-color        : currentColor;
  --arrow-hover-color  : currentColor;
  --arrow-brc-hover    : var(--arrow-brc);
  --arrow-bg-hover     : var(--arrow-bg);
}

/* Slick – kompatybilnie */
.storemap-carousel{ position: relative; overflow: visible; }
.storemap-carousel .slick-track{ display:block; }
.storemap-carousel .slick-slide{ float:left; height:auto; }
.storemap-carousel .slick-slide > div{ height:100%; }

/* Karta */
.storemap-carousel .product{
  position:relative; margin:10px; padding:0 !important;
  background:#fff; border-radius:inherit; overflow:hidden;
  display:flex !important; flex-direction:column;
}
.storemap-carousel .product .product-inner{
  display:flex; flex-direction:column; flex-grow:1;
  justify-content:space-between; padding:15px;
}

/* Obraz */
.storemap-carousel .product-image img{
  display:block; width:100%; max-width:100%; height:auto;
  max-height:var(--pimg-max); object-fit:contain; margin:0;
}
.storemap-carousel .product.full-bleed .product-image img{
  max-height:none; width:100%; height:auto; object-fit:cover;
}

/* Tytuł + clamp */
.storemap-carousel .woocommerce-loop-product__title{ margin:12px 0 8px; }
[class*="line-clamp-"]{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-1{ -webkit-line-clamp:1; } .line-clamp-2{ -webkit-line-clamp:2; }
.line-clamp-3{ -webkit-line-clamp:3; } .line-clamp-4{ -webkit-line-clamp:4; }
.line-clamp-5{ -webkit-line-clamp:5; }

/* Ceny */
.price-container.variant-stacked .regular-price{ display:block; }
.price-container.variant-inline  .regular-price{ margin-right:.5rem; }
.price-container .regular-price.strike,
.price-container .regular-price.strike del{ text-decoration:line-through; opacity:.6; }
.price-container .regular-price.muted{ opacity:.6; }

/* Omnibus */
.lowest-price.omnibus{ font-size:.875rem; opacity:.85; margin:6px 0 8px; }
.price-container .price {margin-bottom:0px!important;line-height: 20px;}
/* Buttony */
.price-and-btn{ display:flex; align-items: flex-end; gap:12px; }
.price-and-btn.align-left{   justify-content:flex-start; }
.price-and-btn.align-center{ justify-content:center; }
.price-and-btn.align-right{  justify-content:flex-end; }
.price-and-btn.align-full{   justify-content:space-between; }

.btn-row{ display:flex; gap:.5rem; align-items:center; }
.btn-row.align-left{   justify-content:flex-start; }
.btn-row.align-center{ justify-content:center; }
.btn-row.align-right{  justify-content:flex-end; }
.btn-row.align-full{   justify-content:stretch; }
.btn-row.align-full .add_to_cart_button{ flex:1; text-align:center; }

/* Layouty */
.storemap-carousel.layout-minimal .product .product-inner{ padding:10px; }
.storemap-carousel.layout-minimal .product .product-inner > *:not(.price-container){ display:none; }

.storemap-carousel.layout-overlay .product{ height:300px; }
.storemap-carousel.layout-overlay .product .product-image img{ height:100%; object-fit:cover; }
.storemap-carousel.layout-overlay .product .product-inner{
  position:absolute; inset:auto 0 0 0;
  background:rgba(0,0,0,.65); color:#fff; padding:15px;
}

.storemap-carousel.layout-side .product{ display:flex; }
.storemap-carousel.layout-side.img-right .product{ flex-direction:row-reverse; }
.storemap-carousel.layout-side .product .product-image{ flex:0 0 35%; }
.storemap-carousel.layout-side .product .product-image img{ height:100%; object-fit:contain; }
.storemap-carousel.layout-side .product .product-inner{
  flex:1 1 auto; padding:15px 20px; display:flex; flex-direction:column; justify-content:center;
}

/* ===================== ARROWS ===================== */

/* wyłącz pseudo-content slicka */
.storemap-carousel .slick-prev:before,
.storemap-carousel .slick-next:before{
  content:none !important; display:none !important;
}

/* overlay host dla strzałek dodawany w JS: <div class="pcw-arrows"> */
.storemap-carousel .pcw-arrows{
  position:absolute; inset:0; z-index:5; pointer-events:none;
}

/* przyciski */
.storemap-carousel .pcw-arrows .storemap-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  pointer-events:auto; cursor:pointer; line-height:0; font-size:0;
  display:flex; align-items:center; justify-content:center;
  border:var(--arrow-brw) solid var(--arrow-brc);
  border-radius:var(--arrow-radius);
  background:var(--arrow-bg);
  color:var(--arrow-color);
  transition: color .2s ease, fill .2s ease, stroke .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease;
    width: var(--arrow-size) !important;
  height: var(--arrow-size) !important;
}
.storemap-carousel .pcw-arrows .storemap-arrow > svg{
  display: block !important;
  /* explicitly size the SVG (beats global theme resets) */
  width: var(--arrow-size) !important;
  height: var(--arrow-size) !important;
  min-width: var(--arrow-size) !important;
  min-height: var(--arrow-size) !important;
  /* stop flex from shrinking it */
  flex: 0 0 var(--arrow-size) !important;
}
.storemap-carousel .pcw-arrows .storemap-arrow > svg,
.storemap-carousel .pcw-arrows .storemap-arrow > svg *{
  fill: currentColor !important;
  stroke: currentColor !important;
}
/* pozycje “inside” (domyślne) */
.storemap-carousel .pcw-arrows .slick-prev{ left:  calc(var(--arrow-inset) + var(--arrow-x)); }
.storemap-carousel .pcw-arrows .slick-next{ right: calc(var(--arrow-inset) - var(--arrow-x)); }

/* wsparcie dla klas outside/inside (z wrappera PHP) */
.storemap-carousel.prev-pos-left-outside  .pcw-arrows .slick-prev{  left:  calc(-1 * var(--arrow-outset) + var(--arrow-x)); }
.storemap-carousel.prev-pos-right-inside  .pcw-arrows .slick-prev{  left:auto; right: calc(var(--arrow-inset) - var(--arrow-x)); }
.storemap-carousel.prev-pos-right-outside .pcw-arrows .slick-prev{  left:auto; right: calc(-1 * var(--arrow-outset) - var(--arrow-x)); }

.storemap-carousel.next-pos-right-outside .pcw-arrows .slick-next{ right: calc(-1 * var(--arrow-outset) - var(--arrow-x)); }
.storemap-carousel.next-pos-left-inside   .pcw-arrows .slick-next{ right:auto; left:  calc(var(--arrow-inset) + var(--arrow-x)); }
.storemap-carousel.next-pos-left-outside  .pcw-arrows .slick-next{ left:  calc(-1 * var(--arrow-outset) + var(--arrow-x)); right:auto; }

/* SVG w przyciskach – dziedziczenie koloru */
.storemap-carousel .pcw-arrows .storemap-arrow svg{
  width:100%; height:100%; display:block;
}
.storemap-carousel .pcw-arrows .storemap-arrow svg,
.storemap-carousel .pcw-arrows .storemap-arrow svg *{
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* hover/disabled */
.storemap-carousel .pcw-arrows .storemap-arrow:hover{
  color: var(--arrow-hover-color);
  background: var(--arrow-bg-hover);
  border-color: var(--arrow-brc-hover);
}
.storemap-carousel .pcw-arrows .storemap-arrow.slick-disabled{
  opacity:.45; pointer-events:none;
}

/* CSS chevrons – fallback (gdy brak custom SVG) */
.storemap-carousel .storemap-arrow .arrow-inner{
  width: calc(var(--arrow-size) * 0.7);
  height: calc(var(--arrow-size) * 0.7);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.arrow-shape-chevron .storemap-arrow .arrow-inner{
  width:12px; height:12px; border:2px solid currentColor; border-top:0; border-right:0;
}
.arrow-shape-chevron .slick-prev .arrow-inner{ transform:rotate(45deg); }
.arrow-shape-chevron .slick-next .arrow-inner{ transform:rotate(-135deg); }

.arrow-shape-caret .storemap-arrow .arrow-inner{
  width:12px; height:12px; border-left:2px solid currentColor; border-bottom:2px solid currentColor;
}
.arrow-shape-caret .slick-prev .arrow-inner{ transform:rotate(45deg); }
.arrow-shape-caret .slick-next .arrow-inner{ transform:rotate(-135deg); }

.arrow-shape-line .storemap-arrow .arrow-inner{ position:relative; display:block; width:100%; height:2px; }
.arrow-shape-line .storemap-arrow .arrow-inner:before,
.arrow-shape-line .storemap-arrow .arrow-inner:after{ content:''; position:absolute; background:currentColor; }
.arrow-shape-line .storemap-arrow .arrow-inner:before{
  width:16px; height:2px; top:50%; transform:translateY(-50%);
}
.arrow-shape-line .slick-prev .arrow-inner:before{ left:8px; }
.arrow-shape-line .slick-next .arrow-inner:before{ right:8px; }
.arrow-shape-line .storemap-arrow .arrow-inner:after{
  width:8px; height:8px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; background:none; top:50%;
}
.arrow-shape-line .slick-prev .arrow-inner:after{ left:6px;  transform:translateY(-50%) rotate(45deg); }
.arrow-shape-line .slick-next .arrow-inner:after{ right:6px; transform:translateY(-50%) rotate(-135deg); }

/* BUTTON ICON (custom SVG też) */
.add_to_cart_button.as-icon{ color:inherit; line-height:1; }
.add_to_cart_button.as-icon .btn-icon{ font-size:var(--btn-icon-size); display:inline-block; }
.add_to_cart_button.as-icon svg{
  width:var(--btn-icon-size) !important;
  height:var(--btn-icon-size) !important;
  display:inline-block;
}
.add_to_cart_button.as-icon svg,
.add_to_cart_button.as-icon svg *{
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Hover z Elementor – zostawiamy dziedziczenie koloru */
.add_to_cart_button:hover{ color:inherit; }

/* Dots */
/* Dots container — remove native list bullets and spacing */
.storemap-carousel .slick-dots{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  list-style: none;   /* ← kill bullet points */
  padding: 0;         /* ← remove UL padding */
  margin: 0;
}

/* Dot visuals (color via CSS vars or data-attrs set in JS) */
.storemap-carousel .slick-dots li{
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dots-color, #ccc);
}

/* Active */
.storemap-carousel .slick-dots li.slick-active{
  background: var(--dots-active-color, #666);
}

/* Keep dots clickable while hiding the button text */
.storemap-carousel .slick-dots li button{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;            /* invisible but clickable */
  border: 0;
  background: transparent;
  text-indent: -9999px;  /* hide label, keep a11y text there if needed */
  cursor: pointer;
}

/* Optional: make dots non-clickable via data-dots-clickable="false" */
.storemap-carousel.dots-noclick .slick-dots li button{
  pointer-events: none;
  cursor: default;
}

/* Mobile: ukryj tylko overlay strzałek */
@media (max-width:600px){
  .storemap-carousel .pcw-arrows{ display:none; }
}

/* Utility (jeśli chcesz większy padding na ikonowe przyciski) */
.as-icon{ padding:10px !important; }


.storemap-arrow {
    background: none;
    border: none;
}

.storemap-arrow:hover {
    background: none;
    border: none;
}

.storemap-carousel .slick-list { touch-action: pan-y; }