/* ============================================================================
   Core theme — Best sellers.

   Deliberately identical to sections/featured-products/style.css: same scale,
   same controls, same breakpoints, only the namespace differs. The two are the
   same component with a different default product source, so any change here
   belongs there too.

   One product list, three layouts. The same <ul> is a CSS grid on desktop and
   a scroll-snapping flex row on mobile, so there is never duplicate markup or
   a second hidden copy of the products.

   The card itself is styled by assets/product-card.css; this file only owns
   layout, the section header and the slider controls.
   ============================================================================ */

.bsel {
  --bsel-visible: 5;
  --bsel-visible-tablet: 3;
  --bsel-peek: 20%;
  --bsel-gap: 24px;
  --bsel-radius: 12px;
  --bsel-ratio: 4 / 5;
  --bsel-fit: cover;

  padding-block: var(--bsel-pad-top, var(--core-rhythm, 64px)) var(--bsel-pad-bottom, var(--core-rhythm, 64px));
  background: var(--bsel-section-bg, transparent);
  border-radius: var(--bsel-section-radius, 0);
}

/* Map this section's design variables onto the shared product card. The card
   reads --pcard-*; the section owns --bsel-*. Nothing is written to :root, so
   these settings cannot reach any other section using the same card. */
.bsel .pcard {
  --pcard-ratio: var(--bsel-ratio);
  --pcard-fit: var(--bsel-fit);
  --pcard-radius: var(--bsel-radius);
  --pcard-gap: var(--bsel-info-gap, 5px);
  --pcard-surface: var(--bsel-image-bg, var(--bg-s));
  --pcard-title: var(--bsel-title-color, var(--text));
  --pcard-category: var(--bsel-category-color, var(--text-m));
  --pcard-muted: var(--bsel-muted-color, var(--text-s));
  --pcard-price: var(--bsel-price-color, var(--text));
  --pcard-sale: var(--bsel-sale-color, var(--sale));
  --pcard-compare: var(--bsel-compare-color, var(--text-m));
  --pcard-btn-bg: var(--bsel-btn-bg, var(--btn-bg, var(--text)));
  --pcard-btn-color: var(--bsel-btn-color, var(--btn-color, var(--bg)));
  --pcard-btn-border: var(--bsel-btn-border, transparent);
  --pcard-btn-hover-bg: var(--bsel-btn-hover-bg, var(--brand-d, var(--text)));
  --pcard-btn-hover-color: var(--bsel-btn-hover-color, var(--pcard-btn-color));
  --pcard-btn-radius: var(--bsel-btn-radius, var(--r-sm, 9px));
  --pcard-badge-sale-bg: var(--bsel-badge-sale-bg, var(--sale));
  --pcard-badge-sale-color: var(--bsel-badge-sale-color, var(--on-brand));
  --pcard-badge-neutral-bg: var(--bsel-badge-neutral-bg, var(--text));
  --pcard-badge-neutral-color: var(--bsel-badge-neutral-color, var(--bg));
  --pcard-badge-muted-bg: var(--bsel-badge-soldout-bg, color-mix(in srgb, var(--text) 55%, transparent));
  --pcard-badge-muted-color: var(--bsel-badge-soldout-color, var(--on-brand));
  --pcard-badge-radius: var(--bsel-badge-radius, 999px);
  --pcard-badge-size: var(--bsel-badge-size, 12px);
  --pcard-badge-inset: var(--bsel-badge-gap, 10px);
  --pcard-title-size: var(--bsel-title-size, 14.5px);
  --pcard-price-size: var(--bsel-price-size, 14px);
  --pcard-btn-height: var(--bsel-btn-height, 40px);
  --pcard-btn-size: var(--bsel-btn-size, 12.5px);
  --pcard-actions-gap: var(--bsel-actions-gap, 2px);
  --pcard-discount: var(--bsel-discount-color, var(--bsel-sale-color, var(--sale)));

  background: var(--bsel-card-bg, transparent);
  border: var(--bsel-card-border-width, 0) solid var(--bsel-card-border, transparent);
  border-radius: calc(var(--bsel-radius) + var(--bsel-card-padding, 0px));
  padding: var(--bsel-card-padding, 0);
  box-shadow: var(--bsel-card-shadow, none);
  transition: box-shadow var(--dur, .25s) var(--ease, ease), transform var(--dur, .25s) var(--ease, ease);
}

.bsel[data-hover="lift"] .pcard:hover { transform: translateY(-4px); }
.bsel[data-hover="none"] .pcard:hover .pcard__img { transform: none; }
.bsel[data-btn-width="auto"] .pcard__actions { justify-content: flex-start; }
.bsel[data-btn-width="auto"] .pcard__quick-add { flex: 0 0 auto; }

/* Container width — see the same block in Featured products. The base rule
   must stay ahead of the modifiers; behind them it pinned every option to
   full-bleed at equal specificity and killed the Container width control. */
.bsel[data-container] .container {
  width: 100%;
  margin-inline: auto;
  /* Identical page gutter to Featured products. */
  padding-inline: max(var(--bsel-container-pad, 0px), var(--core-track-inset, clamp(16px, 3vw, 32px)));
}
.bsel[data-container="narrow"]  .container { max-width: var(--core-track-narrow, 1040px); }
.bsel[data-container="default"] .container { max-width: var(--core-track-default, 1360px); }
.bsel[data-container="wide"]    .container { max-width: var(--core-track-wide, 1520px); }
.bsel[data-container="full"]    .container { max-width: var(--core-track-full, none); margin-inline: 0; }

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

/* ------------------------------------------------------------------ header */

.bsel__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 32px;
  margin-bottom: var(--bsel-header-gap, var(--core-intro-space, 28px));
}
.bsel__header[data-align="center"] {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.bsel__intro { min-width: 0; }

.bsel__eyebrow {
  margin: 0 0 var(--core-intro-stack, 8px);
  color: var(--bsel-eyebrow-color, var(--brand, var(--text)));
  font-family: var(--font);
  font-size: var(--core-eyebrow-size, 11.5px);
  font-weight: var(--core-eyebrow-weight, 600);
  letter-spacing: var(--core-eyebrow-tracking, .14em);
  line-height: 1.2;
  text-transform: var(--core-eyebrow-transform, uppercase);
}

.bsel__heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  color: var(--bsel-heading-color, var(--text));
  font-family: var(--font-display);
  /* Deliberately restrained: this is a section header, not a hero. */
  font-size: var(--bsel-heading-size, var(--core-heading-section, 30px));
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.bsel__header[data-align="center"] .bsel__heading { justify-content: center; }

.bsel__count {
  color: var(--bsel-count-color, var(--text-m));
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
}

.bsel__description {
  max-width: 56ch;
  margin: 8px 0 0;
  color: var(--bsel-description-color, var(--text-s));
  font-size: var(--bsel-description-size, 15px);
  line-height: 1.6;
}

.bsel__view-all {
  flex: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: var(--core-eyebrow-weight, 600);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent);
  transition: text-decoration-color var(--dur-fast, .16s) var(--ease, ease);
}
.bsel__view-all:hover { text-decoration-color: currentColor; }
.bsel__view-all:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ------------------------------------------------------- list: desktop grid */

.bsel__viewport { position: relative; }

.bsel__list {
  display: grid;
  grid-template-columns: repeat(var(--bsel-visible), minmax(0, 1fr));
  gap: calc(var(--bsel-gap) + 8px) var(--bsel-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bsel__item { min-width: 0; }

.bsel[data-count="1"] { --bsel-fill: 1; }
.bsel[data-count="2"] { --bsel-fill: 2; }
.bsel[data-count="3"] { --bsel-fill: 3; }

/* Fewer products than columns would otherwise stretch each card across the
   viewport; cap the track so the row keeps its rhythm. This is a wide-grid
   concern only — tablet caps 1-2 in its own block, mobile is always 2-up — so
   it stays inside the desktop query and never has to out-shout the mobile rule. */
@media (min-width: 1025px) {
  .bsel:not(.bsel--rail)[data-count="1"] .bsel__list,
  .bsel:not(.bsel--rail)[data-count="2"] .bsel__list,
  .bsel:not(.bsel--rail)[data-count="3"] .bsel__list {
    grid-template-columns: repeat(var(--bsel-fill, 4), minmax(0, calc((100% - var(--bsel-gap) * 3) / 4)));
    justify-content: start;
  }
}

/* ------------------------------------------------------------ list: slider

   Native scroll snapping, no library. Card width is derived from the number of
   visible products so widths and gaps stay exactly equal, and the row can never
   wrap into a second line. Padding on the scroller (rather than margins on the
   cards) keeps the first and last card aligned with the container. */

.bsel--rail .bsel__list {
  display: flex;
  grid-template-columns: none;
  gap: var(--bsel-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--bsel-rail-pad, 0px);
  padding-inline: var(--bsel-rail-pad, 0px);
  margin-inline: calc(var(--bsel-rail-pad, 0px) * -1);
  padding-block-end: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bsel--rail .bsel__list::-webkit-scrollbar { display: none; }

.bsel--rail .bsel__item {
  flex: 0 0 calc(
    (100% - var(--bsel-gap) * (var(--bsel-slots) - 1) - var(--bsel-slot-peek, 0%))
    / var(--bsel-slots)
  );
  scroll-snap-align: start;
}

/* How many cards fill the viewport at each breakpoint. */
.bsel--rail { --bsel-slots: var(--bsel-visible); }

/* ---------------------------------------------------------------- controls */

.bsel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: var(--bsel-controls-gap, 20px);
}
.bsel__controls[hidden] { display: none; }

.bsel__arrow {
  display: grid;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: 1px solid var(--bsel-arrow-border, color-mix(in srgb, var(--text) 16%, transparent));
  border-radius: var(--bsel-arrow-radius, 999px);
  background: var(--bsel-arrow-bg, transparent);
  color: var(--bsel-arrow-color, var(--text));
  cursor: pointer;
  place-items: center;
  transition: border-color var(--dur-fast, .16s) var(--ease, ease),
              opacity var(--dur-fast, .16s) var(--ease, ease);
}
.bsel__arrow svg { width: 17px; height: 17px; }
.bsel__arrow:hover { border-color: var(--bsel-arrow-color, var(--text)); background: var(--bsel-arrow-hover-bg, transparent); }
.bsel__arrow:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.bsel__arrow[disabled] { cursor: default; opacity: .3; }
[dir="rtl"] .bsel__arrow svg { transform: scaleX(-1); }

/* Dots map to real slider pages, not to products: with five visible of eight
   there are two pages, so there are two dots. */
.bsel__dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* One dot per page is accurate; wrapping keeps a long list from overflowing
     rather than inventing a grouped paging model the slider does not use. */
  max-width: 100%;
}

.bsel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--bsel-dot-color, color-mix(in srgb, var(--text) 22%, transparent));
  cursor: pointer;
  transition: width var(--dur, .25s) var(--ease, ease),
              background-color var(--dur-fast, .16s) var(--ease, ease);
}
.bsel__dot.is-active {
  width: 22px;
  background: var(--bsel-dot-active, var(--text));
}
.bsel__dot:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.bsel__progress {
  position: relative;
  overflow: hidden;
  height: 2px;
  width: min(220px, 40%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
}
.bsel__progress-bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: block;
  width: 30%;
  border-radius: inherit;
  background: var(--bsel-progress-color, var(--text));
  transition: transform var(--dur, .25s) var(--ease, ease),
              width var(--dur, .25s) var(--ease, ease);
}

/* ---------------------------------------------------------------- view all */

.bsel__footer {
  display: flex;
  justify-content: center;
  margin-top: var(--bsel-viewall-gap, 26px);
}
.bsel[data-viewall-align="start"] .bsel__footer { justify-content: flex-start; }
.bsel[data-viewall-align="end"] .bsel__footer { justify-content: flex-end; }
.bsel[data-viewall-width="fill"] .bsel__view-all--button { width: 100%; }

.bsel__view-all--button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  border: 1px solid var(--bsel-viewall-border, color-mix(in srgb, var(--text) 20%, transparent));
  border-radius: var(--bsel-viewall-radius, var(--r-sm, 9px));
  background: var(--bsel-viewall-bg, transparent);
  color: var(--bsel-viewall-color, var(--text));
  font-family: var(--font);
  font-size: 13px;
  font-weight: var(--core-eyebrow-weight, 600);
  text-decoration: none;
  transition: border-color var(--dur-fast, .16s) var(--ease, ease),
              background-color var(--dur-fast, .16s) var(--ease, ease);
}
.bsel__view-all--button:hover {
  border-color: var(--bsel-viewall-color, var(--text));
  background: var(--bsel-viewall-hover-bg, color-mix(in srgb, var(--text) 5%, transparent));
  color: var(--bsel-viewall-hover-color, var(--bsel-viewall-color, var(--text)));
}

/* ------------------------------------------------------------- empty state */

.bsel--empty { padding-block: 56px; text-align: center; }
.bsel__empty-title {
  margin: 0 0 6px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.25rem;
}
.bsel__empty-text { margin: 0; color: var(--text-s); font-size: 14px; }

/* ================================================================== tablet */

@media (max-width: 1024px) {
  .bsel { --bsel-gap: 20px; }

  .bsel:not(.bsel--rail) .bsel__list {
    grid-template-columns: repeat(var(--bsel-visible-tablet), minmax(0, 1fr));
  }
  .bsel--rail { --bsel-slots: var(--bsel-visible-tablet); }
  .bsel:not(.bsel--rail)[data-count="1"] .bsel__list,
  .bsel:not(.bsel--rail)[data-count="2"] .bsel__list {
    grid-template-columns: repeat(var(--bsel-fill, 2), minmax(0, calc((100% - var(--bsel-gap)) / 2)));
    justify-content: start;
  }
}

/* ================================================================== mobile */

@media (max-width: 767px) {
  .bsel {
    --bsel-gap: 14px;
    --bsel-pad-top: clamp(36px, 9vw, 52px);
    --bsel-pad-bottom: clamp(36px, 9vw, 52px);
  }

  .bsel__header {
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
  }
  /* View All drops under the heading rather than fighting it for the line. */
  .bsel__view-all { order: 3; }
  .bsel__description { font-size: 13.5px; }

  .bsel:not(.bsel--rail) .bsel__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }
  /* editorial / showcase keep their hierarchy on a phone: the feature is a
     full-width stacked card, the rest a two-up grid, and a lone trailing tile
     stretches so the block never ends half empty. Not "2-column everything". */
  .bsel:not(.bsel--rail):is([data-desktop="editorial"], [data-desktop="showcase"]) .bsel__item:first-child { grid-column: 1 / -1; }
  .bsel:not(.bsel--rail):is([data-desktop="editorial"], [data-desktop="showcase"]) .bsel__item:first-child .pcard__media { aspect-ratio: 5 / 4; }
  .bsel:not(.bsel--rail):is([data-desktop="editorial"], [data-desktop="showcase"]) .bsel__item:first-child .pcard__img { object-fit: cover; }
  .bsel:not(.bsel--rail):is([data-desktop="editorial"], [data-desktop="showcase"]) .bsel__item:last-child:nth-child(even) { grid-column: 1 / -1; }
  /* One full card plus a controlled peek of the next. */
  .bsel--rail { --bsel-slots: 1; --bsel-slot-peek: var(--bsel-peek); }
  .bsel__footer { margin-top: 20px; }
  .bsel__view-all--button { width: 100%; }

  .bsel__controls { margin-top: 14px; }
  .bsel__arrow { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .bsel--rail .bsel__list { scroll-behavior: auto; }
  .bsel__progress-bar { transition-duration: .01ms; }
}

/* ========================================================================
   Composition variants — editorial & showcase (desktop grid, no JS rail).
   Both are homepage tastes, not the catalogue: capped at a feature + 5 so the
   grid always resolves to a clean block at every width.
   ======================================================================== */
.bsel:is([data-desktop="editorial"], [data-desktop="showcase"]) .bsel__item:nth-child(n+7) { display: none; }

@media (min-width: 1025px) {
  /* Editorial is a 3-column grid opened by a 2×2 feature: feature + 5 tiles is
     a clean 3×3, so the section is capped there rather than dumping the whole
     limit. grid-auto-flow: dense keeps the tail gap-free for other counts. */
  .bsel[data-desktop="editorial"] .bsel__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    grid-auto-flow: row dense;
    overflow: visible;
  }
  .bsel[data-desktop="editorial"] .bsel__item:first-child { grid-column: span 2; grid-row: span 2; }
  .bsel[data-desktop="editorial"] .bsel__item:first-child .pcard { --pcard-title-size: 17px; --pcard-price-size: 15px; }

  .bsel[data-desktop="showcase"] .bsel__list {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
    align-items: start;
    overflow: visible;
  }
  .bsel[data-desktop="showcase"] .bsel__item:first-child { grid-column: 1; grid-row: span 2; }
  .bsel[data-desktop="showcase"] .bsel__item:nth-child(n+6) { display: none; }

  /* Grid tiles keep their natural height (align-items: start). The feature
     alone stretches to its full 2-row span, and its media grid-row fills the
     height left after the name / price / button, cropping to cover — a real
     hero crop even when the small tiles present the product uncropped via the
     section's own image_fit. */
  .bsel:is([data-desktop="editorial"], [data-desktop="showcase"]) .bsel__item:first-child {
    align-self: stretch;
  }
  .bsel:is([data-desktop="editorial"], [data-desktop="showcase"]) .bsel__item:first-child .pcard {
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
  }
  .bsel:is([data-desktop="editorial"], [data-desktop="showcase"]) .bsel__item:first-child .pcard__media {
    aspect-ratio: auto;
    height: auto;
    min-height: 340px;
  }
  .bsel:is([data-desktop="editorial"], [data-desktop="showcase"]) .bsel__item:first-child .pcard__img {
    object-fit: cover;
    object-position: 50% 22%;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .bsel[data-desktop="editorial"] .bsel__list,
  .bsel[data-desktop="showcase"] .bsel__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }
  .bsel[data-desktop="editorial"] .bsel__item:first-child,
  .bsel[data-desktop="showcase"] .bsel__item:first-child { grid-column: span 2; grid-row: auto; }
  /* feature full width + a lone trailing tile stretches so the last row fills */
  .bsel:is([data-desktop="editorial"], [data-desktop="showcase"]) .bsel__item:last-child:nth-child(even) { grid-column: span 2; }
}