/* ============================================================
   PRODUCT CARD, GRID, ROW
   ============================================================ */

.hs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hs-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-3);
  background: var(--hs-tint);
  overflow: hidden;
}
.hs-card__img-link { display: block; width: 100%; height: 100%; }
.hs-card .hs-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 9%;
  mix-blend-mode: multiply;
  transition: opacity .25s ease, transform .4s ease;
}
.hs-card .hs-card__img--alt { opacity: 0; }
@media (hover: hover) {
  .hs-card:hover .hs-card__img { transform: scale(1.05); }
  .hs-card:hover .hs-card__img--alt { opacity: 1; }
  .hs-card:hover .hs-card__img-link:has(.hs-card__img--alt) .hs-card__img:not(.hs-card__img--alt) { opacity: 0; }
}

.hs-card__flags {
  position: absolute;
  top: 10px; left: 10px;
  display: flex; flex-wrap: wrap; gap: 4px;
  pointer-events: none;
}

.hs-card__wish {
  position: absolute;
  top: 10px; right: 10px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-btn);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--hs-ink);
  transition: color .15s, transform .15s;
}
.hs-card__wish:hover { color: var(--hs-accent); transform: scale(1.08); }
.hs-card__wish.is-on,
.p-gallery__heart.is-on,
.hs-buy__save.is-on { color: var(--hs-accent); }
.hs-card__wish.is-on svg,
.p-gallery__heart.is-on svg,
.hs-buy__save.is-on svg { fill: currentColor; }

.hs-card__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  padding: 12px 2px 0;
}
.hs-card__coll {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hs-brand);
}
.hs-card__title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--hs-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}
.hs-card__title:hover { color: var(--hs-brand); }

.hs-card__specs { display: flex; flex-wrap: wrap; gap: 4px; }
.hs-card__specs span {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--pill);
  background: var(--hs-tint);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--hs-ink-2);
}

.hs-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.hs-card__price { font-size: 19px; }
.hs-card__price .hs-price { color: var(--hs-ink); }
.hs-card__price .hs-price-html { font-size: 16px; font-weight: 800; color: var(--hs-ink); }
.hs-card__oos { font-size: 12px; color: var(--hs-red); font-weight: 700; }

.hs-add {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--hs-brand);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--hs-brand) 35%, transparent);
  transition: background-color .15s, transform .15s;
}
.hs-add:hover { background: var(--hs-brand-dark); color: #fff; transform: scale(1.07); }
.hs-add--ghost { background: var(--hs-tint); color: var(--hs-ink); box-shadow: none; }
.hs-add--ghost:hover { background: var(--hs-tint-2); color: var(--hs-ink); }
.hs-add.loading { opacity: .6; pointer-events: none; }
.hs-add.is-added { background: var(--hs-green); }
.hs-card .added_to_cart { display: none !important; }

/* Grid */
.hs-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px 20px;
}
@media (max-width: 1279px) { .hs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .hs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .hs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } }

/* Horizontal row */
.hs-shelf { position: relative; }
.hs-shelf__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 5 * 20px) / 6);
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.hs-shelf__track::-webkit-scrollbar { display: none; }
.hs-shelf__cell { scroll-snap-align: start; min-width: 0; display: flex; }
.hs-shelf__cell > .hs-card { width: 100%; }

.hs-shelf__nav {
  position: absolute;
  top: calc((100% - 130px) / 2);
  z-index: 3;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-pop);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--hs-ink);
  transition: transform .15s, color .15s;
}
.hs-shelf__nav:hover { transform: scale(1.06); color: var(--hs-brand); }
.hs-shelf__nav--prev { left: -16px; }
.hs-shelf__nav--next { right: -16px; }
.hs-shelf__nav[hidden] { display: none; }

@media (max-width: 1279px) { .hs-shelf__track { grid-auto-columns: calc((100% - 4 * 20px) / 5); } }
@media (max-width: 1023px) { .hs-shelf__track { grid-auto-columns: calc((100% - 3 * 14px) / 3.4); gap: 14px; } }
@media (max-width: 639px)  {
  .hs-shelf__track { grid-auto-columns: 44%; gap: 12px; }
  .hs-shelf__nav { display: none; }
  .hs-card__price { font-size: 17px; }
  .hs-add { width: 38px; height: 38px; }
  .hs-add svg { width: 18px; height: 18px; }
}