
/* K87 Store Blocks Dynamic - clean + light */
.k87sbd-section{ padding: 12px 0; }
.k87sbd-head{ margin: 0 0 10px; }
.k87sbd-title{ margin:0; font-size: 18px; font-weight: 800; }

.k87sbd-note{
  padding: 12px;
  border: 1px dashed rgba(0,0,0,.18);
  border-radius: 12px;
  opacity: .8;
}

.k87sbd-grid{
  --k87-cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--k87-cols), minmax(0, 1fr));
  gap: 14px;
}

.k87sbd-card{
  display: block;
  text-decoration: none !important;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.k87sbd-card:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(15,23,42,.10); }

.k87sbd-thumb{ width: 100%; aspect-ratio: 2/3; background:#f1f5f9; }
.k87sbd-thumb img{ width:100%; height:100%; object-fit: cover; display:block; }
.k87sbd-ph{ width:100%; height:100%; background: linear-gradient(135deg,#f1f5f9,#e2e8f0); }

.k87sbd-name{ padding: 10px 10px 12px; font-weight: 800; color:#0f172a; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.k87sbd-count{ opacity:.7; font-weight:600; font-size: 12px; }

.k87sbd-price{ padding: 0 10px 10px; text-align:center; }
.k87sbd-btn{
  margin: 0 10px 12px;
  border: 1px solid rgba(15,23,42,.15);
  border-radius: 999px;
  padding: 8px 10px;
  text-align:center;
  font-weight: 800;
}

.k87sbd-quote{ padding: 14px; }
.k87sbd-quoteText{ opacity:.95; }
.k87sbd-quoteBy{ margin-top: 10px; font-weight: 800; opacity:.85; }

.k87sbd-banner{
  position: relative;
  display:block;
  min-height: 260px;
  border-radius: 16px;
  overflow:hidden;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
}
.k87sbd-overlay{ position:absolute; inset:0; background:#000; }
.k87sbd-bannerText{ position:absolute; left:14px; right:14px; bottom:14px; color:#fff; }
.k87sbd-bannerTitle{ font-size: 18px; font-weight: 900; }
.k87sbd-bannerSub{ opacity:.9; margin-top: 4px; }

@media (max-width: 900px){
  .k87sbd-grid{ --k87-cols: 2; }
}
@media (max-width: 520px){
  .k87sbd-grid{ --k87-cols: 1; }
}


/* Woo catalog wrapper (keeps theme catalog styles) */
.k87sbd-woo .products{ margin:0; }
.k87sbd-woo{ width:100%; }

.k87sbd-editorPreview{ padding: 10px; border: 1px dashed rgba(0,0,0,.18); border-radius: 12px; }
.k87sbd-editorHint{ margin-top: 8px; opacity: .7; font-size: 12px; }

/* Products by subcategories (advanced block) */
.k87sbd-subcat-block{
  --k87-subcat-nav-gap: 12px;
  --k87-subcat-card-w: 116px;
  --k87-subcat-card-w-m: 92px;
  --k87-subcat-img-fit: contain;
  --k87-slide-gap: 12px;
  --k87-slide-mobile: 2.5;
  --k87-slide-tablet: 4.5;
  --k87-slide-desktop: 8;
  --k87-grid-cols-m: 2;
  --k87-grid-cols-d: 4;
}

.k87sbd-subcat-nav{
  margin: 6px 0 18px;
  display: flex;
  align-items: flex-start;
  gap: var(--k87-subcat-nav-gap);
  flex-wrap: wrap;
}

.k87sbd-subcat-nav-card{
  width: var(--k87-subcat-card-w);
  text-decoration: none !important;
  color: #0f172a;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.k87sbd-subcat-nav-thumb{
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  overflow: hidden;
}

.k87sbd-subcat-nav-thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: var(--k87-subcat-img-fit);
  object-position: center;
}

.k87sbd-subcat-nav-name{
  width: 100%;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.7em;
}

.k87sbd-subcat-sections{
  display: grid;
  gap: 16px;
}

.k87sbd-subcat-section-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.k87sbd-subcat-section-title{
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 900;
  color: #0f172a;
}

.k87sbd-subcat-viewall{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #dbe5ef;
  background: #fff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none !important;
  white-space: nowrap;
}

.k87sbd-subcat-products-grid{
  display: grid;
  grid-template-columns: repeat(var(--k87-grid-cols-m), minmax(0, 1fr));
  gap: var(--k87-slide-gap);
}

.k87sbd-subcat-products-slider-shell{
  position: relative;
}

.k87sbd-subcat-products-track{
  display: flex;
  gap: var(--k87-slide-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  direction: ltr;
}

.k87sbd-subcat-products-track::-webkit-scrollbar{
  display: none;
}

.k87sbd-subcat-products-track:focus{
  outline: none;
}

.k87sbd-subcat-products-track.is-dragging{
  cursor: grabbing;
  user-select: none;
}

.k87sbd-subcat-products-item{
  flex: 0 0 calc((100% - ((var(--k87-slide-mobile) - 1) * var(--k87-slide-gap))) / var(--k87-slide-mobile));
  max-width: calc((100% - ((var(--k87-slide-mobile) - 1) * var(--k87-slide-gap))) / var(--k87-slide-mobile));
  scroll-snap-align: start;
  height: auto;
  direction: rtl;
}

.k87sbd-subcat-products-item > *{
  width: 100%;
}

.k87sbd-subcat-products-item .s-product-card-entry{
  margin-bottom: 0 !important;
}

.k87sbd-subcat-arrow{
  position: absolute;
  top: calc(50% - 18px);
  z-index: 5;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(148,163,184,.45);
  border-radius: 999px;
  background: rgba(15,23,42,.45);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.k87sbd-subcat-arrow-prev{ right: 6px; }
.k87sbd-subcat-arrow-next{ left: 6px; }

.k87sbd-subcat-arrow:hover{
  background: rgba(15,23,42,.65);
}

@media (min-width: 768px){
  .k87sbd-subcat-products-item{
    flex: 0 0 calc((100% - ((var(--k87-slide-tablet) - 1) * var(--k87-slide-gap))) / var(--k87-slide-tablet));
    max-width: calc((100% - ((var(--k87-slide-tablet) - 1) * var(--k87-slide-gap))) / var(--k87-slide-tablet));
  }
}

@media (min-width: 992px){
  .k87sbd-subcat-products-item{
    flex: 0 0 calc((100% - ((var(--k87-slide-desktop) - 1) * var(--k87-slide-gap))) / var(--k87-slide-desktop));
    max-width: calc((100% - ((var(--k87-slide-desktop) - 1) * var(--k87-slide-gap))) / var(--k87-slide-desktop));
  }
  .k87sbd-subcat-products-grid{
    grid-template-columns: repeat(var(--k87-grid-cols-d), minmax(0, 1fr));
  }
}

@media (max-width: 991px){
  .k87sbd-subcat-nav{
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .k87sbd-subcat-nav::-webkit-scrollbar{
    display: none;
  }
  .k87sbd-subcat-nav-card{
    width: var(--k87-subcat-card-w-m);
    min-width: var(--k87-subcat-card-w-m);
    gap: 6px;
  }
  .k87sbd-subcat-nav-name{
    font-size: 12px;
    min-height: 2.6em;
  }
  .k87sbd-subcat-section-title{
    font-size: 26px;
  }
}

/* Taxonomy slider block (merged) */
.k87-tsb{
  --k87-gap: 14px;
  --k87-row-gap: 14px;
  --k87-item-w: 160px;
  --k87-cols-d: 6;
  --k87-cols-m: 2;
  --k87-ratio: 2 / 3;
  --k87-thumb-bg: #f1f5f9;
  --k87-img-fit: cover;
  --k87-card-r: 16px;
  --k87-card-sh: 0 8px 24px rgba(15,23,42,.06);
  --k87-card-bw: 1px;
  --k87-card-bs: solid;
  --k87-card-bc: rgba(15,23,42,.08);
  --k87-name-s: 14px;
  --k87-name-w: 800;
  --k87-name-c: #0f172a;
  font-family: inherit;
}

.k87-tsb__head{ margin: 0 0 10px; }
.k87-tsb__title{ margin:0; font-size: 18px; font-weight: 800; }

.k87-tsb__viewport{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
}
.k87-tsb__viewport::-webkit-scrollbar{ width: 0; height: 0; display: none; }
.k87-tsb.is-layout-slider .k87-tsb__viewport{
  cursor: grab;
  touch-action: auto;
}
.k87-tsb.is-layout-slider .k87-tsb__viewport.is-dragging{
  cursor: grabbing;
  user-select: none;
}

.k87-tsb__track{
  display:flex;
  gap: var(--k87-gap);
  padding: 4px 2px 4px;
  align-items: stretch;
  width: max-content;
  min-width: 100%;
  outline: none;
}

.k87-tsb.is-layout-grid .k87-tsb__viewport{
  overflow: visible;
  scroll-snap-type: none;
  border-radius: 0;
}

.k87-tsb.is-layout-grid .k87-tsb__track{
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(var(--k87-cols-m), minmax(0, 1fr));
  column-gap: var(--k87-gap);
  row-gap: var(--k87-row-gap);
  padding: 4px 0 0;
}

@media (min-width: 782px){
  .k87-tsb.is-layout-grid .k87-tsb__track{
    grid-template-columns: repeat(var(--k87-cols-d), minmax(0, 1fr));
  }
}

.k87-tsb__card{
  flex: 0 0 var(--k87-item-w);
  display:flex;
  flex-direction: column;
  text-decoration:none !important;
  background: #fff;
  border-width: var(--k87-card-bw);
  border-style: var(--k87-card-bs);
  border-color: var(--k87-card-bc);
  border-radius: var(--k87-card-r);
  box-shadow: var(--k87-card-sh);
  overflow:hidden;
  scroll-snap-align: start;
  transition: transform .18s ease, box-shadow .18s ease;
}
.k87-tsb__card:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(15,23,42,.10); }
.k87-tsb.is-layout-grid .k87-tsb__card{ flex: initial; min-width: 0; }

.k87-tsb__thumb{ width:100%; aspect-ratio: var(--k87-ratio); background: var(--k87-thumb-bg); }
.k87-tsb__thumb img{ width:100%; height:100%; display:block; object-fit: var(--k87-img-fit); }

.k87-tsb__name{
  padding: 10px 10px 12px;
  color: var(--k87-name-c);
  font-size: var(--k87-name-s);
  font-weight: var(--k87-name-w);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.k87-tsb__arrows{
  position: absolute;
  top: 42%;
  left: 10px;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  z-index: 4;
  pointer-events: none;
}
.k87-tsb__btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.62);
  background: rgba(15,23,42,.36);
  color: #f8fafc;
  border-radius: 999px;
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  cursor:pointer;
  text-shadow: 0 1px 2px rgba(2,6,23,.45);
  box-shadow: 0 8px 16px rgba(2,6,23,.28);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  pointer-events: auto;
}
.k87-tsb__btn:hover{
  background: rgba(15,23,42,.52);
  box-shadow: 0 10px 20px rgba(2,6,23,.32);
}
.k87-tsb__btn:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
.k87-tsb__btn:active{ transform: scale(.96); }

.k87-tsb__dots{ display:flex; justify-content: center; gap: 8px; margin-top: 10px; }
.k87-tsb__dot{
  width: 8px; height: 8px; border-radius: 999px;
  border: none; background: rgba(15,23,42,.20); cursor: pointer;
}
.k87-tsb__dot.is-active{ background: rgba(15,23,42,.55); }
.k87-tsb.is-layout-grid .k87-tsb__arrows,
.k87-tsb.is-layout-grid .k87-tsb__dots{ display: none !important; }
