/*
 * Product shelf block (hediyesahibi/product-shelf): head and the row of tiles. The tiles
 * are styled by product-tile.css (a dependency). Loaded only on pages with the block.
 *
 * Layout v1: the row is a grid of --hs-shelf-count columns, at least 112 px each: when
 * they fit the tiles share the width; when they do not the row scrolls sideways with
 * snap points. Phones get bigger tiles (40 % of the screen, at most 170 px).
 * Layout v2 (.hs-shelf--v2): big tiles in a carousel, see the end of this file.
 */
.hs-shelf {
  --hs-shelf-ink: var(--hs-ink, #1f2547);
  --hs-shelf-muted: var(--hs-muted, #5b6180);
  --hs-shelf-gap: 16px;

  /* No container-type here: it would stop a page layout from making the shelf a subgrid. */
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  color: var(--hs-shelf-ink);
  font-family: var(--hs-font, system-ui, sans-serif);
}

.hs-shelf *,
.hs-shelf *::before,
.hs-shelf *::after {
  box-sizing: border-box;
}

/* ─── Head: icon disc, title and subtitle, "See all" ─────────────────────── */

.hs-shelf__head {
  /* Narrow heads (e.g. the one-tile shelf of layout v2) turn "See all" into an arrow. */
  container: hs-shelf-head / inline-size;
  display: flex;
  align-items: center;
  gap: 12px;
}

@container hs-shelf-head (max-width: 320px) {
  .hs-shelf .hs-shelf__more {
    justify-content: center;
    width: 40px;
    padding: 0;
  }

  .hs-shelf .hs-shelf__more-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.hs-shelf__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--hs-orange-600, #e06c00);
  background: #fff1e2;
  border-radius: 50%;
  --hs-icon-accent: var(--hs-orange, #f09820);
}

.hs-shelf--blue .hs-shelf__icon {
  color: #fff;
  background: var(--hs-blue-600, #0070e0);
  box-shadow: 0 8px 18px -8px rgb(0 112 224 / 60%);
  --hs-icon-accent: #ffd089;
}

.hs-shelf__intro {
  flex: 1;
  min-width: 0;
}

.hs-shelf .hs-shelf__title {
  margin: 0;
  padding: 0;
  color: var(--hs-shelf-ink);
  font-family: inherit;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.hs-shelf .hs-shelf__subtitle {
  margin: 2px 0 0;
  color: var(--hs-shelf-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.hs-shelf .hs-shelf__more {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px 8px 16px;
  color: var(--hs-shelf-ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  background: var(--hs-surface, #fff);
  border-radius: var(--hs-r-pill, 999px);
  box-shadow:
    inset 0 0 0 1px var(--hs-line, #e6e9f0),
    0 4px 12px -8px rgb(31 37 71 / 25%);
  transition:
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.hs-shelf__more-icon {
  flex: none;
  transition: transform 0.2s ease;
}

.hs-shelf .hs-shelf__more:hover,
.hs-shelf .hs-shelf__more:focus-visible {
  color: var(--hs-orange-700, #c2410c);
  box-shadow:
    inset 0 0 0 1px currentColor,
    0 6px 16px -8px rgb(194 65 12 / 40%);
}

.hs-shelf .hs-shelf__more:hover .hs-shelf__more-icon {
  transform: translateX(3px);
}

.hs-shelf .hs-shelf__more:focus-visible {
  outline: 3px solid var(--hs-focus, #1f2547);
  outline-offset: 2px;
}

/* ─── Row of tiles ───────────────────────────────────────────────────────── */

.hs-shelf .hs-shelf__list {
  display: grid;
  grid-template-columns: repeat(var(--hs-shelf-count, 6), minmax(112px, 1fr));
  gap: var(--hs-shelf-gap);
  margin: 0;

  /* Room for the lifted tile and its shadow; the row may scroll sideways. */
  padding: 6px 2px 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  list-style: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.hs-shelf .hs-shelf__list::-webkit-scrollbar {
  display: none;
}

.hs-shelf .hs-shelf__item {
  min-width: 0;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}

/* Phones: bigger tiles in a sideways row, the next one peeking in. */
@media (max-width: 767px) {
  .hs-shelf .hs-shelf__list {
    grid-template-columns: repeat(var(--hs-shelf-count, 6), min(40vw, 170px));
  }

  .hs-shelf .hs-shelf__more {
    padding-inline: 12px;
  }
}

/* Small phones: a smaller icon and subtitle keep the head on one line with "See all". */
@media (max-width: 400px) {
  .hs-shelf__icon {
    width: 38px;
    height: 38px;
  }

  .hs-shelf .hs-shelf__subtitle {
    font-size: 13px;
  }
}

/*
 * ─── Layout v2: big tiles in a carousel ─────────────────────────────────────
 * --hs-shelf-visible tiles fill the width (3 by default; the home page shows 1 on
 * its right shelf, home.css), the rest scroll in: swipe, scroll snap or the arrows
 * (product-shelf.js; hidden when everything fits, disabled at the ends).
 */
.hs-shelf.hs-shelf--v2 {
  --hs-shelf-gap: 20px;
  --hs-shelf-visible: 3;
}

.hs-shelf__viewport {
  position: relative;

  /* The arrows find the middle of the pictures from the viewport's width. */
  container-type: inline-size;
  min-width: 0;
}

.hs-shelf.hs-shelf--v2 .hs-shelf__list {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--hs-shelf-visible) - 1) * var(--hs-shelf-gap)) / var(--hs-shelf-visible));
}

.hs-shelf .hs-shelf__arrow {
  position: absolute;

  /* Vertically on the middle of the (square) pictures: list padding + half a tile. */
  top: calc(6px + (100cqi - (var(--hs-shelf-visible) - 1) * var(--hs-shelf-gap)) / var(--hs-shelf-visible) / 2 - 22px);
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  color: var(--hs-shelf-ink);
  background: var(--hs-surface, #fff);
  border: 0;
  border-radius: 50%;
  box-shadow:
    0 10px 24px -10px rgb(31 37 71 / 40%),
    0 1px 3px rgb(31 37 71 / 10%);
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.15s ease,
    color 0.15s ease;
}

.hs-shelf .hs-shelf__arrow--prev {
  left: -18px;
}

.hs-shelf .hs-shelf__arrow--next {
  right: -18px;
}

.hs-shelf .hs-shelf__arrow[hidden] {
  display: none;
}

.hs-shelf .hs-shelf__arrow:disabled {
  visibility: hidden;
  opacity: 0;
}

.hs-shelf .hs-shelf__arrow:hover {
  color: var(--hs-orange-700, #c2410c);
  background: var(--hs-surface, #fff);
  transform: scale(1.06);
}

.hs-shelf .hs-shelf__arrow:focus-visible {
  outline: 3px solid var(--hs-focus, #1f2547);
  outline-offset: 2px;
}

/* Phones: big tiles with the next one peeking in; swipe instead of arrows. */
@media (max-width: 767px) {
  .hs-shelf.hs-shelf--v2 .hs-shelf__list {
    grid-auto-columns: min(66vw, 280px);
  }

  .hs-shelf .hs-shelf__arrow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-shelf .hs-shelf__more,
  .hs-shelf__more-icon,
  .hs-shelf .hs-shelf__arrow {
    transition: none;
  }
}