/* Layout wrapper */
.bs-shop-builder-content{
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

/* Kategorie tlačítka */
.bs-shop-filters{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin: 0 0 1rem 0;
}
.bs-shop-filters .bs-cat-btn{
  cursor:pointer;
  background: transparent;
  border: 0;
  padding: 0;
  color: #fff;
  font-weight: 400;
}
.bs-shop-filters .bs-cat-btn:hover,
.bs-shop-filters .bs-cat-btn.is-active{
  color: #f07c00;
}

/* Řazení */
.bs-shop-ordering{
  display:flex;
  flex-wrap:wrap;
  gap: 2rem;
  margin: 0 0 1.5rem 0;
  align-items: flex-end;
}
.bs-shop-ordering a{
  text-decoration:none;
  padding: .25rem 0;
  position:relative;
  color:#fff;
  font-weight: 400;
}
.bs-shop-ordering a:hover,
.bs-shop-ordering a.is-active{
  color:#f07c00;
}
.bs-shop-ordering a.is-active::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-.5rem;
  height:1px;
  background: #f07c00;
}

/* Loop wrapper + loader overlay (jen přes produkty) */
.bs-shop-loop{ position:relative; }
.bs-shop-loading{
  display:none;
  position:absolute;
  inset:0;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.65);
  z-index: 10;
}
.bs-shop-loop.is-loading #bs-shop-loading{ display:flex; }
.bs-dots{display:inline-flex;gap:.25rem;}
.bs-dots i{
  width:.45rem;height:.45rem;border-radius:50%;
  background: currentColor;display:inline-block;
  animation: bsDots 1s infinite ease-in-out;
}
.bs-dots i:nth-child(2){ animation-delay: .15s; }
.bs-dots i:nth-child(3){ animation-delay: .3s; }
@keyframes bsDots{
  0%, 80%, 100%{ transform: scale(.65); opacity: .35; }
  40%{ transform: scale(1); opacity: 1; }
}

/* Products grid: columns computed + 10px gap */
.woocommerce ul.products{
  display:flex !important;
  flex-wrap:wrap !important;
  gap: var(--bs-gap, 10px) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{
  display:none !important;
  content:none !important;
}
.woocommerce ul.products li.product{
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display:flex !important;
  align-items: stretch !important;
  width: calc(
    (100% - ( (var(--bs-cols, 4) - 1) * var(--bs-gap, 10px) ))
    / var(--bs-cols, 4)
  ) !important;
}

/* ===== Produktová mozaika look: overlay bez absolutního pozicování ===== */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 4px !important;
  display:grid !important;
  grid-template-rows: 1fr auto auto; /* (image) + (price) + (title) */
  width:100% !important;
  height:100% !important;
  background: transparent !important;
  transition: box-shadow .3s ease, transform .3s ease;
}

/* Gradient overlay for readability (30% stop) */
.woocommerce ul.products li.product .woocommerce-loop-product__link::before,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0) 40%);
  opacity: .9;
  transition: opacity .3s ease;
  pointer-events:none;
  z-index: 1;
}

/* Image tile */
.woocommerce ul.products li.product img{
  display:block !important;
  width:100% !important;
  border-radius: 4px !important;
  transform: scale(1);
  transition: transform .3s ease;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  grid-row: 1 / -1;
  grid-column: 1;
  z-index: 0;
}

/* Price above title, both in normal flow (no absolute) */
.woocommerce ul.products li.product .price{
  grid-row: 2;
  grid-column: 1;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 0 12px 6px 12px !important;
  color: #fff !important;
  text-shadow: 1px 1px 1px black;
  align-self: end;
  justify-self: stretch;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  grid-row: 3;
  grid-column: 1;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 0 12px 12px 12px !important;
  color: #f07c00 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  align-self: end;
  justify-self: stretch;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price{
  line-height: 1.2;
}

/* Hover: shadow + image zoom */
.woocommerce ul.products li.product:hover .woocommerce-loop-product__link,
.woocommerce ul.products li.product:hover a.woocommerce-LoopProduct-link{
  box-shadow: 0 16px 35px rgba(0,0,0,.22);
  transform: translateY(-1px);
}
.woocommerce ul.products li.product:hover img{
  transform: scale(1.04);
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__link::before,
.woocommerce ul.products li.product:hover a.woocommerce-LoopProduct-link::before{
  opacity: 1;
}

/* Load more button */
.bs-load-more-wrap{ margin-top: 1rem; display:flex; justify-content:center; }
#bs-load-more{ position:relative; }
#bs-load-more .bs-load-more-spinner{ display:none; margin-left: .5rem; }
#bs-load-more.is-loading .bs-load-more-spinner{ display:inline-block; }

/* Mobile: always 1 product per row */
@media (max-width: 768px){
  .woocommerce ul.products li.product{
    width: 100% !important;
  }
}



/* Odsazení celého e‑shopu od vrchu (včetně drobečkové navigace)
   Pozn.: různé šablony mají různé wrappry – proto více selektorů. */
body.woocommerce-page #site-content,
body.woocommerce-page #primary,
body.woocommerce-page #content,
/* Margin-bottom bloku shop loop */
.wp-block-bs-shop-loop,
.bs-shop-loop{
  margin-bottom: 30px;
}
/* BS menu cart icon (mask) – works with functions.php injected SVG (.bs-cart-icon) */
.bs-menu-cart-link{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: inherit;
}
.bs-menu-cart-link:hover{
  color: #f07c00;
}
.bs-menu-cart-link .bs-cart-icon{
  width: 25px !important;
  height: 25px !important;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url("../images/bag2.png") no-repeat center / contain;
  mask: url("../images/bag2.png") no-repeat center / contain;
}
/* Hide original SVG path so only masked icon shows */
.bs-menu-cart-link .bs-cart-icon path{
  display: none !important;
}