/* ── Five cards in frames: hueylightshop.com's "Our Bestsellers"
   (.featured-collection-section), cloned from their theme (refs/huey/home.html,
   custom.css, component-card.css) and box-checked at 1905 and 390. Between the
   Huey split and the Featured Edit, as on their page, with their spacing.
     card     242:300 picture area 6 px inside a frame stretched to the card,
              masked by their bevelled outline (contain), the picture at 1.1
     number   "01." 6% down, 12% in, counted by CSS
     info     name (Herbik caps) left and an italic line right, on the bottom edge
     hover    the cut-out fades to the full photo at 1.03; the words turn cream
     phones   one card and a peek of the next, two arrows under it (js/bs.js)
   Their ink #374454 -> our navy #2a4254, their hover cream -> our cream #f7f3ee. The frame is ours (img/bs/frame.svg),
   drawn in the manner of theirs. Pictures: Sama's own, cut out, stand-ins. */
.bs { --bs-ink: #2a4254; padding: 40px 0 100px; color: var(--bs-ink); counter-reset: bs; }
.bs-title { padding: 0 38px; }
.bs-title .hs-label { margin: 14px 0 0; }

.bs-slider { margin-top: 25px; }
.bs-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 0 0 20px; padding: 0 50px; list-style: none; }

.bs-item { position: relative; counter-increment: bs; }
.bs-item::before {
  content: counter(bs, decimal-leading-zero) "."; position: absolute; top: 6%; left: 12%; z-index: 10;
  font: 400 clamp(8px, 3vw, 14px) / 1.8 var(--f-body); letter-spacing: .6px; color: var(--bs-ink); pointer-events: none;
}
.bs-card { position: relative; display: flow-root; color: inherit; text-decoration: none; }
.bs-card::after { content: ""; position: absolute; inset: 0; z-index: 2; background: url("../img/bs/frame.svg") 0 0 / 100% 100% no-repeat; pointer-events: none; }
.bs-inner {
  position: relative; overflow: hidden; width: 100%; aspect-ratio: 242 / 300; margin: 6px 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='242' height='316' viewBox='0 0 242 316' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 297.5L0.5 22L1 21.5L25.5 0L214 1L241.5 20L240.5 294.5L216.5 315.5L23.5 315L0 297.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg width='242' height='316' viewBox='0 0 242 316' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 297.5L0.5 22L1 21.5L25.5 0L214 1L241.5 20L240.5 294.5L216.5 315.5L23.5 315L0 297.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bs-inner img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1);
  transition: opacity .4s cubic-bezier(.4, 0, .2, 1), transform .4s cubic-bezier(.4, 0, .2, 1);
}
.bs-inner img + img { opacity: 0; }

.bs-content { position: absolute; left: 0; right: 0; bottom: 3px; z-index: 3; height: 100%; padding: 20px 20px 10px; box-sizing: border-box; }
.bs-info {
  display: flex; justify-content: space-between; align-items: flex-end; column-gap: 5px; box-sizing: border-box;
  width: 90%; height: 100%; margin: 0 auto; padding: 13px 0; text-wrap: balance;
}
.bs-name { margin: 0; font: 400 clamp(8px, 1vw, 12px) / 1.3 var(--f-head); letter-spacing: .1em; text-transform: uppercase; overflow-wrap: break-word; }
.bs-price { margin: 7px 0 0; text-align: right; font: italic 400 clamp(8px, 1vw, 12px) / 1.5 var(--f-body); }

@media (hover: hover) and (min-width: 990px) {
  .bs-card:hover .bs-inner img:first-child { opacity: 0; }
  .bs-card:hover .bs-inner img { transform: scale(1.03); }
  .bs-card:hover .bs-inner img + img { opacity: 1; }
}
@media (min-width: 750px) {
  .bs-card:hover .bs-name, .bs-card:hover .bs-price, .bs-item:hover::before { color: #f7f3ee; transition: color 100ms ease; }
}

/* below 990 their grid becomes a slider: one card and a peek of the next */
.bs-buttons { display: none; }
@media (max-width: 989px) {
  .bs-item::before { font-size: 12px; top: 8%; }
  .bs-info { width: 80%; padding-bottom: 6%; }
  .bs-grid {
    display: flex; gap: 10px; padding: 0 15px; margin-bottom: 15px; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-left: 15px; scrollbar-width: none;
  }
  .bs-grid::-webkit-scrollbar { display: none; }
  .bs-item { flex: 0 0 calc(100vw - 40px); max-width: 350px; scroll-snap-align: start; }
  .bs-buttons { display: flex; justify-content: space-between; height: 45px; }
  .bs-buttons button { width: 44px; height: 45px; padding: 0; border: 0; background: none; color: var(--bs-ink); cursor: pointer; }
  .bs-buttons svg { display: block; width: 10px; height: 16px; margin: auto; }
  .bs-buttons button[disabled] { opacity: .3; cursor: default; }
}
@media (max-width: 749px) {
  .bs { padding: 40px 0; }
  .bs-title { padding: 15px; }
  .bs-slider { margin-top: 0; }
  .bs-name, .bs-price { font-size: 13px; }
  .bs-item { padding: 5px 0; }
  /* their phone card text box is content-box: 20 px wider each side and 30 px taller than the card */
  .bs-content { box-sizing: content-box; left: -20px; right: auto; width: 100%; }
}