/* Core theme — Collections slider
   Uses the same compact, full-bleed rail rhythm as Featured Products while
   retaining collection-specific cards and data. */

.storly-collections {
  --colg-columns: 5;
  --colg-columns-tablet: 3;
  --colg-gap: 24px;
  --colg-radius: var(--card-radius, var(--r, 14px));
  --colg-padding-top: var(--core-rhythm, 64px);
  --colg-padding-bottom: var(--core-rhythm, 64px);
  --colg-inset: 0px;
  --colg-heading-size: var(--core-heading-section, 30px);
  --colg-title-size: 15px;
  --colg-overlay-opacity: .54;
  --colg-ratio: 4 / 5;
  --colg-shadow: var(--shadow, 0 1px 3px rgba(20, 20, 22, .07));
  --colg-mobile-peek: 20%;
  --colg-section-bg: var(--bg);
  --colg-section-image: none;
  --colg-section-image-position: center;
  --colg-section-image-size: cover;
  --colg-eyebrow: var(--brand);
  --colg-heading: var(--text);
  --colg-description: var(--text-s);
  --colg-title: #fff;
  --colg-meta: rgba(255, 255, 255, .8);
  --colg-cta: #fff;
  --colg-card-bg: var(--surface);
  --colg-card-border: rgba(255, 255, 255, .2);
  --colg-overlay: #111827;
  --colg-view-all: var(--text);

  display: block;
  overflow: clip;
  padding-block: var(--colg-padding-top) var(--colg-padding-bottom);
  background-color: var(--colg-section-bg);
  background-image: var(--colg-section-image);
  background-position: var(--colg-section-image-position);
  background-repeat: no-repeat;
  background-size: var(--colg-section-image-size);
  color: var(--colg-heading);
}

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

/* The section owns its own track geometry — it does not borrow the shared
   `.container` class, so nothing here has to fight that rule's specificity.
   `full` is the default: a full-bleed rail with safe edge gutters. An
   Inspector inset can widen the gutter but cannot collapse the edge rhythm. */
.storly-collections__container {
  --colg-track: none;
  width: 100%;
  max-width: var(--colg-track);
  margin-inline: 0;
  padding-inline: max(var(--colg-inset, 0px), var(--core-track-inset, clamp(16px, 3vw, 32px)));
}
.storly-collections[data-container="narrow"] .storly-collections__container { --colg-track: var(--core-track-narrow, 1040px); margin-inline: auto; }
.storly-collections[data-container="default"] .storly-collections__container { --colg-track: var(--core-track-default, 1360px); margin-inline: auto; }
.storly-collections[data-container="wide"] .storly-collections__container { --colg-track: var(--core-track-wide, 1520px); margin-inline: auto; }

.storly-collections__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px 32px;
  margin-bottom: var(--colg-header-gap, var(--core-intro-space, 28px));
}
.storly-collections__header[data-align="center"] {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.storly-collections__intro { min-width: 0; max-width: 640px; }
.storly-collections__eyebrow {
  margin: 0 0 var(--core-intro-stack, 8px);
  color: var(--colg-eyebrow);
  font-family: var(--font, inherit);
  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);
}
.storly-collections__heading {
  max-width: 15ch;
  margin: 0;
  color: var(--colg-heading);
  font-family: var(--font-display, var(--font, inherit));
  font-size: var(--colg-heading-size);
  font-weight: 400;
  letter-spacing: var(--tracking-tight, 0);
  line-height: 1.04;
}
.storly-collections__header[data-align="center"] .storly-collections__heading,
.storly-collections__header[data-align="center"] .storly-collections__description { margin-inline: auto; }
.storly-collections__description {
  max-width: 54ch;
  margin: 8px 0 0;
  color: var(--colg-description);
  font-family: var(--font, inherit);
  font-size: 15px;
  line-height: 1.6;
}

/* Native slider: no cloned cards, no dependency, and every break point keeps
   the same interaction model. Four cards are visible on desktop. */
.storly-collections__grid {
  --colg-slots: var(--colg-columns);

  display: flex;
  gap: var(--colg-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-block: 2px 4px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.storly-collections__grid::-webkit-scrollbar { display: none; }
.storly-collections__item {
  min-width: 0;
  flex: 0 0 calc((100% - var(--colg-gap) * (var(--colg-slots) - 1)) / var(--colg-slots));
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Four cards keep the imagery and overlay copy comfortably legible on a normal
   desktop window (including the Builder canvas); a fifth is only added on a
   genuinely wide screen. Merchant choices below four are preserved by min();
   tablets retain their dedicated setting. */
@media (min-width: 1025px) {
  .storly-collections { --colg-slots: min(4, var(--colg-columns)); }
}
@media (min-width: 1600px) {
  .storly-collections { --colg-slots: var(--colg-columns); }
}

.storly-collections__card {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--colg-card-border);
  border-radius: var(--colg-radius);
  background: var(--colg-card-bg);
  box-shadow: var(--colg-shadow);
  color: inherit;
  isolation: isolate;
  text-decoration: none;
  transition: transform var(--dur, 260ms) var(--ease, ease), box-shadow var(--dur, 260ms) var(--ease, ease);
}
.storly-collections__card:focus-visible,
.storly-collections__slider-arrow:focus-visible,
.storly-collections__dot:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.storly-collections__media {
  position: relative;
  display: block;
  aspect-ratio: var(--colg-ratio);
  overflow: hidden;
  background: var(--colg-card-bg);
}
.storly-collections__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 440ms var(--ease, ease);
}
.storly-collections[data-image-fit="contain"] .storly-collections__media img { object-fit: contain; }
.storly-collections[data-focal="top"] .storly-collections__media img { object-position: center top; }
.storly-collections[data-focal="bottom"] .storly-collections__media img { object-position: center bottom; }
.storly-collections[data-focal="left"] .storly-collections__media img { object-position: left center; }
.storly-collections[data-focal="right"] .storly-collections__media img { object-position: right center; }
.storly-collections__icon,
.storly-collections__placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: color-mix(in srgb, var(--colg-heading) 50%, transparent);
  font-family: var(--font-display, serif);
  font-size: 42px;
}
/* The label sits on the merchant's own photography, which may be a pale linen
   flat-lay or a dark studio shot. The scrim is therefore weighted at the
   bottom, where the text is, so white type keeps its contrast either way. */
.storly-collections__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--colg-overlay) 0%,
    color-mix(in srgb, var(--colg-overlay) 64%, transparent) 15%,
    transparent 48%
  );
  opacity: var(--colg-overlay-opacity);
}
.storly-collections[data-overlay="none"] .storly-collections__scrim { display: none; }
.storly-collections[data-overlay="solid"] .storly-collections__scrim { background: var(--colg-overlay); }
.storly-collections__content {
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  /* Last line of defence over a blown-out highlight in the photo. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 16px;
  color: var(--colg-title);
}
.storly-collections[data-text-position="below"] .storly-collections__scrim { display: none; }
.storly-collections[data-text-position="below"] .storly-collections__content {
  position: static;
  padding: 13px 14px 15px;
  color: var(--colg-heading);
}
.storly-collections[data-text-position="below"] {
  --colg-title: var(--text);
  --colg-meta: var(--text-s);
  --colg-cta: var(--text);
  --colg-card-border: color-mix(in srgb, var(--text) 12%, transparent);
}
.storly-collections__topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.storly-collections__title {
  overflow: hidden;
  color: currentColor;
  font-family: var(--font-display, var(--font, inherit));
  font-size: var(--colg-title-size);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.storly-collections__arrow { flex: none; font-size: 18px; line-height: 1; }
.storly-collections__count,
.storly-collections__card-description,
.storly-collections__cta { color: var(--colg-meta); font-family: var(--font, inherit); font-size: 12px; line-height: 1.4; }
.storly-collections__card-description { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.storly-collections__cta { display: inline-flex; gap: 6px; width: fit-content; margin-top: 2px; color: var(--colg-cta); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.storly-collections[data-show-count="0"] .storly-collections__count,
.storly-collections[data-show-desc="0"] .storly-collections__card-description,
.storly-collections[data-show-cta="0"] .storly-collections__cta,
.storly-collections[data-show-arrow="0"] .storly-collections__arrow { display: none; }

.storly-collections__slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}
.storly-collections__slider-controls[hidden] { display: none; }
.storly-collections__slider-arrow {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--colg-heading) 20%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--colg-heading);
  cursor: pointer;
  font: 400 18px/1 var(--font, sans-serif);
  place-items: center;
}
.storly-collections__slider-arrow:hover { background: color-mix(in srgb, var(--colg-heading) 6%, transparent); }
.storly-collections__slider-arrow:disabled { cursor: default; opacity: .28; }
.storly-collections__dots { display: flex; align-items: center; justify-content: center; gap: 0; }
/* The dot a visitor sees is 6px; the button around it is 24px, because a 6px
   target cannot be hit on a phone. The disc is drawn by ::before. */
.storly-collections__dot {
  position: relative;
  width: 28px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.storly-collections__dot::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--colg-heading) 22%, transparent);
  transform: translate(-50%, -50%);
  transition: width var(--dur, 260ms) var(--ease, ease), background-color var(--dur-fast, 160ms) var(--ease, ease);
}
[dir="rtl"] .storly-collections__dot::before { transform: translate(50%, -50%); }
.storly-collections__dot.is-active::before { width: 20px; background: var(--colg-heading); }

.storly-collections__footer { display: flex; justify-content: center; margin-top: 26px; }
.storly-collections__view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  color: var(--colg-view-all);
  font-family: var(--font, inherit);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}
.storly-collections__view-all--header { border-bottom: 1px solid currentColor; }
.storly-collections__view-all--button { padding-inline: 18px; border: 1px solid color-mix(in srgb, var(--colg-view-all) 25%, transparent); border-radius: var(--btn-radius, 9px); }
.storly-collections__empty { margin: 0; padding: 26px; border: 1px dashed color-mix(in srgb, var(--colg-heading) 24%, transparent); border-radius: var(--colg-radius); color: var(--colg-description); font: 14px/1.5 var(--font, sans-serif); text-align: center; }

@media (hover: hover) {
  .storly-collections[data-hover="zoom"] .storly-collections__card:hover img,
  .storly-collections[data-hover="zoom-lift"] .storly-collections__card:hover img { transform: scale(1.045); }
  .storly-collections[data-hover="lift"] .storly-collections__card:hover,
  .storly-collections[data-hover="zoom-lift"] .storly-collections__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md, 0 10px 28px rgba(20, 20, 22, .14)); }
}

@media (max-width: 1024px) {
  .storly-collections { --colg-gap: 20px; }
  .storly-collections__grid { --colg-slots: var(--colg-columns-tablet); }
  .storly-collections__container { --colg-track: 100%; }
}

@media (max-width: 767px) {
  .storly-collections {
    --colg-gap: 14px;
    padding-block: clamp(36px, 9vw, 52px);
  }
  .storly-collections__container { --colg-track: none; }
  /* Stack the header so a header-positioned "view all" link sits under the
     heading instead of being squeezed into a two-word column beside it. */
  .storly-collections__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
  }
  .storly-collections__view-all--header { align-self: flex-start; }
  .storly-collections__eyebrow { margin-bottom: 6px; }
  .storly-collections__heading { line-height: 1.12; }
  .storly-collections__description { margin-top: 8px; font-size: 13.5px; line-height: 1.55; }
  .storly-collections__grid { --colg-slots: 1; gap: 12px; padding-block-end: 4px; }
  .storly-collections__item { flex-basis: calc(100% - var(--colg-mobile-peek)); }
  .storly-collections__content { gap: 2px; padding: 12px; }
  .storly-collections__title { font-size: 15px; }
  .storly-collections__count,
  .storly-collections__card-description { font-size: 12px; }
  .storly-collections__slider-controls { gap: 10px; margin-top: 14px; }
  .storly-collections__slider-arrow { display: none; }
  .storly-collections__footer { margin-top: 20px; }
  .storly-collections__view-all--button { width: 100%; }
}

/* Reduced motion is handled once, universally, in core-dna.css. */

/* RTL: the directional glyphs in the markup (↗ on cards, → on CTAs, ← / → on
   the slider controls) do not mirror on their own, so flip them for Arabic. */
[dir="rtl"] :is(
  .storly-collections__arrow,
  .storly-collections__cta span[aria-hidden],
  .storly-collections__view-all span[aria-hidden],
  .storly-collections__slider-arrow span[aria-hidden]
) {
  display: inline-block;
  transform: scaleX(-1);
}

/* ============================================================================
   COMPOSITION CONTROLS
   ----------------------------------------------------------------------------
   Merchant-set spacing from the Inspector. Each variable is only emitted by
   section.php when the merchant picks a non-zero value, so an unset control
   falls through to the theme's own rhythm via the var() fallback — a fresh
   store renders exactly as it did before these controls existed.

   These are what make the same section able to be either a compact block or a
   spacious editorial one, instead of the spacing being pinned in CSS.
   ========================================================================== */

.storly-collections__header {
  margin-bottom: var(--colg-header-gap, var(--core-intro-space, 28px));
}

/* The grid layout wraps, so it has a distinct row rhythm; the slider is a
   single row and is unaffected. Falls back to the card gap when unset. */
.storly-collections__grid {
  row-gap: var(--colg-row-gap, var(--colg-gap));
}

.storly-collections__card {
  padding: var(--colg-card-padding, 0);
}

/* Spacing between the cards and the controls / view-all row beneath them. */
.storly-collections__view-all--button,
.storly-collections__view-all:not(.storly-collections__view-all--header) {
  margin-top: var(--colg-controls-gap, 0);
}

/* ---------------------------------------------------------------- layouts --
   One section, several compositions. The rail was the only layout the renderer
   could produce; a grid is a different reading task - a department list you
   take in at once rather than a run you move through - so it is a real mode
   rather than a slider with the arrows hidden.

   Everything below is driven by persisted settings, so a merchant reaches all
   of it from the Builder. There are no niche selectors anywhere in this file. */

.storly-collections[data-layout="grid"] .storly-collections__grid {
  display: grid;
  grid-template-columns: repeat(var(--colg-slots), minmax(0, 1fr));
  overflow: visible;
  scroll-snap-type: none;
}
.storly-collections[data-layout="grid"] .storly-collections__item { flex: initial; }
.storly-collections[data-layout="grid"] .storly-collections__slider-controls { display: none; }

/* A larger opening card gives a grid an editorial focal point without needing
   a second section. Only from the third column up, or it stops being a grid. */
@media (min-width: 1025px) {
  .storly-collections[data-layout="grid"][data-feature-first="1"] .storly-collections__item:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* ── mosaic — an asymmetric feature + secondary composition ───────────────
   The first category is a hero tile; the rest sit beside and below it. The
   column count comes from section.php (--colg-mosaic-cols), derived from the
   real card count so the tiles always fill a whole rectangle with no hole
   beside the feature. data-mosaic-feature says which feature shape tiles:
   2x2 (tall block), 2x1 (wide band) or none (even grid, short last row only). */
.storly-collections[data-layout="mosaic"] .storly-collections__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  overflow: visible;
  scroll-snap-type: none;
}
.storly-collections[data-layout="mosaic"] .storly-collections__item { flex: initial; }
.storly-collections[data-layout="mosaic"] .storly-collections__slider-controls { display: none; }

/* Below the mosaic width the feature becomes a full-bleed band over a two-up
   grid; a lone trailing tile stretches across so the last row is never half
   empty. Works for every feature shape and every card count. */
@media (max-width: 767px) {
  .storly-collections[data-layout="mosaic"]:not([data-mosaic-feature="none"]) .storly-collections__item:first-child {
    grid-column: 1 / -1;
  }
  .storly-collections[data-layout="mosaic"]:not([data-mosaic-feature="none"]) .storly-collections__item:first-child .storly-collections__media {
    aspect-ratio: 16 / 10;
  }
  /* feature on its own row + (n−1) tiles in two columns: a lone trailing tile
     appears when n is even, and it stretches to fill the row as a wide band. */
  .storly-collections[data-layout="mosaic"]:not([data-mosaic-feature="none"]) .storly-collections__item:last-child:nth-child(even) {
    grid-column: 1 / -1;
  }
  .storly-collections[data-layout="mosaic"]:not([data-mosaic-feature="none"]) .storly-collections__item:last-child:nth-child(even) .storly-collections__media {
    aspect-ratio: 16 / 10;
  }
}

@media (min-width: 768px) {
  .storly-collections[data-layout="mosaic"] .storly-collections__grid {
    grid-template-columns: repeat(var(--colg-mosaic-cols, 3), minmax(0, 1fr));
    grid-auto-flow: row dense;
  }
  /* Equal rows so the 2-row feature matches the height of two side tiles. */
  .storly-collections[data-layout="mosaic"][data-mosaic-feature="2x2"] .storly-collections__grid {
    grid-auto-rows: 1fr;
  }
  .storly-collections[data-layout="mosaic"][data-mosaic-feature="2x2"] .storly-collections__item:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
  .storly-collections[data-layout="mosaic"][data-mosaic-feature="2x1"] .storly-collections__item:first-child {
    grid-column: span 2;
  }
  .storly-collections[data-layout="mosaic"]:is([data-mosaic-feature="2x2"], [data-mosaic-feature="2x1"]) .storly-collections__item:first-child .storly-collections__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 320px;
  }
}

/* ── compact — a tight tile-nav strip ────────────────────────────────────
   Small square tiles, name + count only. A "shop by department" affordance
   that doesn't dominate the page. */
.storly-collections[data-layout="compact"] .storly-collections__grid {
  display: grid;
  /* auto-fit, not auto-fill: with a handful of categories the empty tracks
     collapse and the tiles stretch to share the row instead of huddling at
     minimum width with dead space to the right. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
  overflow: visible;
  scroll-snap-type: none;
}
.storly-collections[data-layout="compact"] .storly-collections__item { flex: initial; }
.storly-collections[data-layout="compact"] .storly-collections__slider-controls { display: none; }
.storly-collections[data-layout="compact"] .storly-collections__media { aspect-ratio: 5 / 4; }
.storly-collections[data-layout="compact"] .storly-collections__content {
  padding: 10px 2px 0;
  gap: 1px;
}
.storly-collections[data-layout="compact"] .storly-collections__title { font-size: 13.5px; }
.storly-collections[data-layout="compact"] .storly-collections__count { font-size: 12px; }
.storly-collections[data-layout="compact"] .storly-collections__card-description,
.storly-collections[data-layout="compact"] .storly-collections__cta,
.storly-collections[data-layout="compact"] .storly-collections__arrow { display: none; }
@media (max-width: 767px) {
  .storly-collections[data-layout="compact"] .storly-collections__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------- card surfaces -- */
.storly-collections[data-card-surface="panel"] .storly-collections__card {
  background: var(--colg-card-bg, var(--surface));
  padding: var(--colg-card-padding, 0);
}
.storly-collections[data-card-surface="outline"] .storly-collections__card {
  background: transparent;
  border: var(--colg-card-border-width, 1px) solid var(--colg-card-border, var(--border));
  padding: var(--colg-card-padding, 0);
}
.storly-collections[data-card-surface="image"] .storly-collections__card { background: transparent; }

.storly-collections[data-text-align="center"] .storly-collections__content { text-align: center; align-items: center; }
.storly-collections[data-title-caps="1"] .storly-collections__title {
  text-transform: uppercase;
  letter-spacing: var(--colg-title-tracking, .08em);
}
.storly-collections__title { letter-spacing: var(--colg-title-tracking, 0); }

/* A little scale lets a portrait crop breathe inside a square card without
   changing the stored image or the aspect ratio the merchant chose. */
.storly-collections__image { transform: scale(var(--colg-image-scale, 1)); }

/* ---------------------------------------------------- mobile compositions --
   Mobile is a composition, not a fallback: a peeking rail, a compact two-up
   grid, or one full-width editorial card per row. */
@media (max-width: 767px) {
  .storly-collections[data-mobile-layout="grid"] .storly-collections__grid {
    display: grid;
    grid-template-columns: repeat(var(--colg-columns-mobile, 2), minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
  }
  .storly-collections[data-mobile-layout="grid"] .storly-collections__item { flex: initial; }
  .storly-collections[data-mobile-layout="grid"] .storly-collections__slider-controls { display: none; }
  /* An odd category count would otherwise leave a half-empty last row on a
     two-up phone grid; the trailing tile stretches across instead. */
  .storly-collections[data-mobile-cols="2"] .storly-collections__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .storly-collections[data-mobile-layout="editorial"] .storly-collections__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    overflow: visible;
    scroll-snap-type: none;
  }
  .storly-collections[data-mobile-layout="editorial"] .storly-collections__item { flex: initial; }
  .storly-collections[data-mobile-layout="editorial"] .storly-collections__media { aspect-ratio: 16 / 11; }
  .storly-collections[data-mobile-layout="editorial"] .storly-collections__title { font-size: 17px; }
  .storly-collections[data-mobile-layout="editorial"] .storly-collections__slider-controls { display: none; }

  /* A larger first card is a desktop device; on a phone it just makes one
     collection twice as tall as the rest. */
  .storly-collections[data-feature-first="1"] .storly-collections__item:first-child {
    grid-column: auto;
    grid-row: auto;
  }
}