/** Shopify CDN: Minification failed

Line 65:85 Unexpected "/"

**/
/* ==========================================================================
   AYUM — Collection-page overrides.
   Loaded only on the default collection template (see layout/theme.liquid).
   Every rule must be scoped to an instance class (ayum-*).
   ========================================================================== */

/* --------------------------------------------------------------------------
   C6 — Collection SEO text banner
   custom-section instance "ayum_collection_seo" in templates/collection.json,
   scoped by its custom-class setting: ayum-collection-seo.
   Figma: desktop 1:1027 / mobile 1:1225.
   -------------------------------------------------------------------------- */

/* Full-bleed band: brand yellow #EFD678 at 30% over the page ground. */
.ayum-collection-seo {
  background-color: rgb(239 214 120 / 0.3);
}

/* The heading + description group. Content is authored in Arabic while the
   page direction is locale-driven (LTR on en.default), so direction is
   declared once at this text boundary; the accent border then resolves
   inline-start = physical right in every locale, matching Figma. Alignment
   comes from the block's own alignment setting, not from this rule. */
.ayum-collection-seo .hdt-section-heading_block {
  direction: rtl;
  unicode-bidi: isolate;
  border-inline-start: 4px solid #e78333;
  padding-inline-start: 24px;
  /* The design edge-aligns the text to the reading start (physical right in
     RTL). The block's native alignment classes are logical in this theme
     (.hdt-text-right = text-align: end), which resolves to the LEFT under
     the direction declared above — so pin the intended start alignment here. */
  text-align: start;
}

.ayum-collection-seo .hdt-heading-block {
  color: #26383a;
  font-weight: var(--font-extrabold, 800);
}

.ayum-collection-seo .hdt-subheading-block {
  color: #4e6e70;
  line-height: 1.9;
}

@media (max-width: 767px) {
  .ayum-collection-seo .hdt-section-heading_block {
    border-inline-start-width: 3px;
    padding-inline-start: 16px;
  }
}
   /* AYUM — collection-page overrides (loaded only on the default collection
   template, layout/theme.liquid).

   C1 — Collection strips
   Section: sections/top-list-collections.liquid, instance-gated by the
   custom class `ayum-collection-strips` (collection.json, order[0]).
   Figma: desktop 1:812 (1440), mobile 1:1095 (375).
   Every rule below is scoped under .ayum-collection-strips. */
   /* ========================================================================== */ */

/* --- Section surface ------------------------------------------------------
   Full-bleed light wash + hairline UNDER the strip (Figma). The vendor rule
   `.hdt-top-list-collections > *` draws a top hairline instead — override it.
   AYUM design constants: Light #E4EDF0 @16%, Neutral/Border #D3E3E8. */
.hdt-top-list-collections > .ayum-collection-strips {
  border-top: 0;
  border-block-end: 1px solid #d3e3e8;
  background-color: rgba(228, 237, 240, 0.16);
}

/* --- Strip geometry -------------------------------------------------------
   Figma gap: 10px mobile / 8px desktop. The vendor slider spaces slides via
   padding-inline-start: var(--slide-spacing) on each slide. */
.ayum-collection-strips .hdt-slider {
  --slide-spacing: 10px;
}
@media (min-width: 768px) {
  .ayum-collection-strips .hdt-slider {
    --slide-spacing: 8px;
  }
  /* Figma 1:812 (node metadata): the five 258px cards sit at a 266px pitch
     (258 + 8 gap) spanning x 59-1381 on the 1440 frame — i.e. real side
     gutters of 59px, and the strip ends on a whole card, never a partial.
     A viewport that is not a multiple of the slide unit clips the far-end
     card mid-card (and anything above the 1322px five-card row lets slide 6
     peek), so the width is rounded DOWN to whole 266px slide units minus
     the trailing 8px gap, capped at the exact five-card row. n slides need
     n*266 - 8, hence round(down, avail + 8) - 8 with avail = 100vw - 118.
     The first line is the fallback for browsers without CSS round(): still
     capped at five cards, mid-size widths may show a partial tail there. */
  .ayum-collection-strips .hdt-content {
    width: min(1322px, calc(100vw - 118px - var(--scrollbar-w, 0px)));
    width: min(
      1322px,
      calc(
        round(down, calc(100vw - 110px - var(--scrollbar-w, 0px)), 266px) - 8px
      )
    );
  }
}
/* Mobile: the vendor caps .hdt-content at 100vw - 80px, which double-insets
   the strip. Let it fill; the slider's own native mobile padding (0 1rem)
   provides the single intentional 16px side inset from Figma. Slides get a
   fixed 46% flex-basis (native --slide-size mechanism) so ~375px shows two
   full cards plus a ~27px peek of the real third slide; the percentage keeps
   that density stable at 320/390/430 too. */
@media (max-width: 767px) {
  .ayum-collection-strips .hdt-content {
    width: 100%;
  }
  .ayum-collection-strips .hdt-slider .hdt-slider__slide {
    --slide-size: 42%;
  }
}

/* --- Card -----------------------------------------------------------------
   Physical geometry is pinned (direction: ltr): chevron + title on the
   physical LEFT, collection image on the physical RIGHT in every locale,
   exactly as drawn in Figma. The Arabic title re-declares rtl at its own
   text boundary below (geometry-vs-text split, categories-routine
   precedent). --strip-bg / --strip-accent come from the block settings via
   an inline style; the values here are neutral fallbacks for blocks whose
   color settings are empty. Ink #26383A is the AYUM title color. */
.ayum-collection-strips .hdt-slider__slide a.ayum-strip-card {
  --strip-bg: #eef3f5;
  --strip-accent: #26383a;
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px;
  padding-inline-start: 14px;
  min-height: 70px;
  width: 100%;
  background-color: var(--strip-bg);
  border-radius: 14px;
  color: #26383a;
}
/* The vendor recolors strip links on hover; the AYUM title stays Ink. */
.ayum-collection-strips .hdt-slider__slide a.ayum-strip-card:hover {
  color: #26383a;
}

.ayum-collection-strips .ayum-strip-card__label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.ayum-collection-strips .ayum-strip-card__chevron {
  flex: 0 0 auto;
  width: 7px;
  height: 11px;
  color: var(--strip-accent);
  pointer-events: none;
}

.ayum-collection-strips .ayum-strip-card__title {
  direction: rtl;
  unicode-bidi: isolate;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ayum-collection-strips .ayum-strip-card__img {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 10px;
  object-fit: cover;
}
.ayum-collection-strips .ayum-strip-card__img--placeholder {
  background-color: rgba(38, 56, 58, 0.08);
}

@media (min-width: 768px) {
  .ayum-collection-strips .hdt-slider__slide a.ayum-strip-card {
    width: 258px;
    height: 84px;
    gap: 8px;
    padding: 12px;
    padding-inline-start: 20px;
    border-radius: 16px;
  }
  .ayum-collection-strips .ayum-strip-card__label {
    gap: 8px;
  }
  .ayum-collection-strips .ayum-strip-card__chevron {
    width: 10px;
    height: 16px;
  }
  .ayum-collection-strips .ayum-strip-card__title {
    font-size: 19px;
    font-weight: 700;
  }
  .ayum-collection-strips .ayum-strip-card__img {
    width: 61px;
    height: 61px;
    border-radius: 12px;
  }
}

/* --- Current collection (native .hdt-current-active marker) ---------------
   Figma active card: 1.5px accent border + a stronger tint of the SAME
   accent (22% over white — the pink reference card flattens to #FAD4E2).
   The padding compensation keeps active and idle cards the same size.
   Browsers without color-mix() keep the block's idle tint — border only. */
.ayum-collection-strips
  .hdt-slider__slide.hdt-current-active
  a.ayum-strip-card {
  border: 1.5px solid var(--strip-accent);
  background-color: var(--strip-bg);
  background-color: color-mix(in srgb, var(--strip-accent) 22%, #fff);
  padding: calc(8px - 1.5px);
  padding-inline-start: calc(14px - 1.5px);
}
@media (min-width: 768px) {
  .ayum-collection-strips
    .hdt-slider__slide.hdt-current-active
    a.ayum-strip-card {
    padding: calc(12px - 1.5px);
    padding-inline-start: calc(20px - 1.5px);
  }
}

/* --- Slider arrows --------------------------------------------------------
   Reskin only — behavior, RTL mirroring, disabled state and keyboard stay
   native. The buttons are driven by the vendor's modern --nav-* variables
   (.hdt-navigation button { width/height: var(--nav-size); border-radius:
   var(--nav-rounded); background: var(--nav-bg); ... }); this section's
   markup uses hdt-size-small (40px) + hdt-style-simple (transparent) with
   --nav-rounded: 0, hence the previous square transparent-ish look.
   Target: Figma 94:2/94:4 — 44px white circle, shadow 0 2px 8px, icon
   ~20px at Ink 75%. */
.ayum-collection-strips .hdt-navigation {
  --nav-size: 44px;
  --nav-size-icon: 20px;
  --nav-bg: #fff;
  --nav-border: transparent;
  --nav-color: rgba(38, 56, 58, 0.75);
  --nav-bg-hv: #fff;
  --nav-border-hv: transparent;
  --nav-color-hv: #26383a;
}
.ayum-collection-strips .hdt-slider__button {
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  /* The vendor's top-list dir rules replace the base translateY(-50%) with
     their own translateX, and the nav bar is a zero-height line at the
     strip's vertical center — pull the button up by half its size. */
  margin-top: calc(var(--nav-size) / -2);
}
/* The same top-list dir rules justify the icon to one edge of the button
   (flex-start / flex-end) for the original text-pill design; margin:auto
   centers it regardless of that justify-content. */
.ayum-collection-strips .hdt-slider__button svg {
  margin: auto;
}
/* Push each button 12px further out through the vendor's own physical
   anchor variables (they are dir-scoped by the theme, so prev/next swap
   sides in RTL exactly as natively): combined with the native
   translateX(±100%), the 44px arrow hugs the strip edge from outside and
   never overlaps a card (Figma 94:2/94:4 lets it kiss the row's outer 9px;
   staying fully outside was the agreed pass-2 acceptance). */
.dir--ltr .ayum-collection-strips .hdt-slider {
  --sl-btn-prev-l: -12px;
  --sl-btn-next-r: -12px;
}
.dir--rtl .ayum-collection-strips .hdt-slider {
  --sl-btn-prev-r: -12px;
  --sl-btn-next-l: -12px;
}
/* The exact mobile Figma node has no outer arrow buttons — swipe only. */
@media (max-width: 767px) {
  .ayum-collection-strips .hdt-navigation {
    display: none;
  }
}

.ayum-collection-strips {
  .hdt-slider__button {
    border-radius: 22px !important;
  }
}

@media (max-width: 767px) {
  .ayum-collection-strips {
    .hdt-slider__slide:first-child {
      margin-inline-start: 16px !important;
    }
    .hdt-container,
    .hdt-slider {
      padding: 0 !important;
    }
    .hdt-slider__viewpor {
      padding: 1px !important;
    }
  }
}