/* ==========================================================================
   Knitting Dreams: collection layouts
   Shared by product sections, category sections and Section Builder
   sections. Markup comes from kd_b_items_open() / kd_b_items_close().
   Layouts: grid, fixed-height grid, masonry, carousel (slider / loop).
   ========================================================================== */

/* ---- Items component: carousel and grid share this markup */
.kd-b-items { --b-per: var(--b-per-d); --b-gap: var(--b-gap-d); position: relative; }
@media (max-width: 1024px) { .kd-b-items { --b-per: var(--b-per-t); --b-gap: var(--b-gap-t); } }
@media (max-width: 720px)  { .kd-b-items { --b-per: var(--b-per-m); --b-gap: var(--b-gap-m); } }
.kd-b-track { list-style: none; margin: 0; padding: 0; }
.kd-b-item { min-width: 0; margin: 0; }
.kd-b-items--grid .kd-b-track { display: grid; gap: var(--b-gap); grid-template-columns: repeat(var(--b-per), minmax(0, 1fr)); }
.kd-b-items--stack .kd-b-track { display: grid; gap: clamp(28px, 4vw, 56px); }
.kd-b-items--carousel .kd-b-track {
  display: flex; gap: var(--b-gap); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 2px;
}
.kd-b-items--carousel .kd-b-track::-webkit-scrollbar { display: none; }
.kd-b-items--carousel .kd-b-track:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.kd-b-items--carousel .kd-b-item {
  flex: 0 0 calc((100% - (var(--b-per) - 1) * var(--b-gap)) / var(--b-per));
  scroll-snap-align: start; display: flex;
}
.kd-b-items--carousel .kd-b-item > * { width: 100%; }
/* A peek of the next card on phones shows there is more to swipe. */
@media (max-width: 720px) {
  .kd-b--cards .kd-b-items--carousel .kd-b-item,
  .kd-b--products .kd-b-items--carousel .kd-b-item { flex-basis: calc((100% - (var(--b-per) - 1) * var(--b-gap)) / var(--b-per) - 24px); }
}

/* Arrows sit on the edges, vertically centred on the cards; dots below. */
.kd-b-arrow {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: var(--ink); color: var(--cream); cursor: pointer;
  box-shadow: 0 2px 8px rgba(var(--ink-rgb), .18); transition: background .2s ease, opacity .2s ease;
}
.kd-b-arrow .i { width: 16px; height: 16px; }
.kd-b-arrow:hover { background: var(--plum); }
.kd-b-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.kd-b-arrow--prev { left: -19px; }
.kd-b-arrow--next { right: -19px; }
.kd-b-arrow[disabled] { opacity: .3; cursor: default; }
.kd-b-items.is-static .kd-b-arrow, .kd-b-items.is-static .kd-b-dots { display: none; }
.kd-b-items:has(.kd-b-dots) .kd-b-arrow { top: calc(50% - 20px); }
@media (max-width: 720px) {
  .kd-b-arrow { display: none; }
}
.kd-b-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.kd-b-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; cursor: pointer;
  background: rgba(var(--ink-rgb), .22); transition: width .25s ease, background .25s ease;
}
.kd-b-dot.is-active { width: 22px; background: var(--plum); }
.kd-b-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }


/* ---- Fixed-height grid: every tile the same height, set per section. */
.kd-b-items { --b-h: var(--b-h-d, 320px); }
@media (max-width: 1024px) { .kd-b-items { --b-h: var(--b-h-t, var(--b-h-d, 300px)); } }
@media (max-width: 720px)  { .kd-b-items { --b-h: var(--b-h-m, 240px); } }
.kd-b-items--fixed .kd-b-track { display: grid; gap: var(--b-gap); grid-template-columns: repeat(var(--b-per), minmax(0, 1fr)); }

/* ---- Masonry: columns of staggered heights. */
.kd-b-items--masonry .kd-b-track { columns: var(--b-per); column-gap: var(--b-gap); }
.kd-b-items--masonry .kd-b-item { break-inside: avoid; margin-bottom: var(--b-gap); display: block; }

/* ---- Product cards inside the component */
.kd-b-items .card { height: 100%; }
.kd-b-shape--square .card-media { aspect-ratio: 1 / 1; }
.kd-b-shape--landscape .card-media { aspect-ratio: 4 / 3; }
.kd-b-shape--portrait .card-media { aspect-ratio: 4 / 5; }
.kd-b-shape--tall .card-media { aspect-ratio: 3 / 4; }
.kd-b-items--fixed .card-media { aspect-ratio: auto; height: var(--b-h); }
/* Titles clamp to two lines so every card in a row lines up. */
.kd-b-items--fixed .card-title a, .kd-b-items--grid .card-title a {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kd-b-items--masonry .kd-b-item:nth-child(4n+1) .card-media { aspect-ratio: 4 / 5; }
.kd-b-items--masonry .kd-b-item:nth-child(4n+2) .card-media { aspect-ratio: 1 / 1; }
.kd-b-items--masonry .kd-b-item:nth-child(4n+3) .card-media { aspect-ratio: 3 / 4.4; }
.kd-b-items--masonry .kd-b-item:nth-child(4n+4) .card-media { aspect-ratio: 5 / 4.6; }

/* ---- Category tiles inside the component (every layout except Mosaic) */
.kd-b-items .cat-card { position: relative; overflow: hidden; width: 100%; aspect-ratio: 4 / 5; }
.kd-b-shape--square .cat-card { aspect-ratio: 1 / 1; }
.kd-b-shape--landscape .cat-card { aspect-ratio: 4 / 3; }
.kd-b-shape--tall .cat-card { aspect-ratio: 3 / 4; }
.kd-b-items--fixed .cat-card { aspect-ratio: auto; height: var(--b-h); }
.kd-b-items--masonry .kd-b-item:nth-child(4n+1) .cat-card { aspect-ratio: 4 / 5; }
.kd-b-items--masonry .kd-b-item:nth-child(4n+2) .cat-card { aspect-ratio: 1 / 1; }
.kd-b-items--masonry .kd-b-item:nth-child(4n+3) .cat-card { aspect-ratio: 3 / 4.4; }
.kd-b-items--masonry .kd-b-item:nth-child(4n+4) .cat-card { aspect-ratio: 5 / 4.4; }
.kd-b-items .cat-card .cat-name { font-size: clamp(1.3rem, 2vw, 2rem); }
@media (max-width: 720px) {
  .kd-b-items .cat-info { padding: 16px; }
  .kd-b-items .cat-card .cat-name { font-size: 1.2rem; }
  .kd-b-items .cat-explore { margin-top: 6px; }
}
/* Peek of the next category tile on phones. */
@media (max-width: 720px) {
  .categories .kd-b-items--carousel .kd-b-item { flex-basis: calc((100% - (var(--b-per) - 1) * var(--b-gap)) / var(--b-per) - 24px); }
}

/* Product and category sections: the view-all button sits under the items. */
.section .kd-b-items + .section-cta, .section .kd-b-items ~ .section-cta { margin-top: clamp(28px, 3.5vw, 44px); }
@media (max-width: 720px) {
  .section:not(.kd-b) .kd-b-items--carousel .kd-b-item { flex-basis: calc((100% - (var(--b-per) - 1) * var(--b-gap)) / var(--b-per) - 24px); }
}