/*
 * "Senin İçin Seçtiklerimiz" (hediyesahibi/product-picks, D-127). The head and the carousel
 * are the shelf's (product-shelf.css, layout v2, a dependency); this adds the
 * "Who are you buying for?" tabs and the panels. Four tiles fill the row from 1200 px,
 * three below, phones swipe.
 *
 * Tabs: the calendar's recipient chips (46 px white pills, the person's icon in their
 * colour). The chosen one is filled with a light wash of that colour and ringed with it;
 * the text stays ink (≥ 4.5:1 on the wash).
 */
.hs-picks.hs-shelf--v2 {
  --hs-shelf-visible: 4;
  --hs-picks-ink: var(--hs-ink, #1f2547);
  --hs-picks-line: var(--hs-line, #e6e9f0);
}

@media (max-width: 1199px) {
  .hs-picks.hs-shelf--v2 {
    --hs-shelf-visible: 3;
  }
}

/* ─── Tabs ───────────────────────────────────────────────────────────────── */

.hs-picks__tabs {
  position: relative;
  display: flex;
  gap: 10px;
  margin: -6px -4px -16px;

  /* Room for the focus ring, the lift and the selected tab's glow (about 20 px below: a
     row that scrolls sideways clips what overflows it); the margins give it back. */
  padding: 6px 4px 22px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.hs-picks__tabs::-webkit-scrollbar {
  display: none;
}

.hs-picks .hs-picks__tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 8px 18px 8px 14px;
  color: var(--hs-picks-ink);
  font-size: 14.5px;
  font-weight: 700;
  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-picks-line),
    0 6px 16px -10px rgb(31 37 71 / 30%);
  scroll-snap-align: start;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.hs-picks__tab svg {
  flex: none;
  color: var(--hs-who, var(--hs-orange-700, #c2410c));
}

@media (hover: hover) {
  .hs-picks .hs-picks__tab:hover {
    color: var(--hs-who, var(--hs-orange-700, #c2410c));
    box-shadow:
      inset 0 0 0 1.5px currentColor,
      0 8px 18px -10px rgb(31 37 71 / 35%);
    transform: translateY(-1px);
  }
}

.hs-picks .hs-picks__tab[aria-selected='true'] {
  color: var(--hs-picks-ink);
  background: color-mix(in srgb, var(--hs-who, #c2410c) 9%, #fff);
  box-shadow:
    inset 0 0 0 2px var(--hs-who, #c2410c),
    0 10px 22px -12px color-mix(in srgb, var(--hs-who, #c2410c) 70%, transparent);
}

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

/* ─── Panels ─────────────────────────────────────────────────────────────── */

.hs-picks__panel {
  min-width: 0;
  border-radius: calc(16px * var(--hs-corner-scale, 1));
  animation: hs-picks-in 0.28s ease both;
}

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

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

@keyframes hs-picks-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Phones: the tabs run from edge to edge of the screen. */
@media (max-width: 767px) {
  .hs-picks__tabs {
    margin-inline: calc(-1 * var(--hs-gutter, 16px));
    padding-inline: var(--hs-gutter, 16px);
    scroll-padding-inline: var(--hs-gutter, 16px);
  }

  .hs-picks .hs-picks__tab {
    min-height: 44px;
    padding: 8px 16px 8px 12px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-picks .hs-picks__tab {
    transition: none;
  }

  .hs-picks .hs-picks__tab:hover {
    transform: none;
  }

  .hs-picks__panel {
    animation: none;
  }
}