/*
  Allegory bridge — scoped collection-page CSS (Track 4).

  Owns only the small deltas needed on top of the linked theme CSS
  (component-collection-hero.css, component-facets.css). Two concerns:

    A) COLLECTION BANNER (collection-hero) — band height + text alignment so
       it matches the reference store at both breakpoints.
    B) BRANDED SORT (facet-sort-select) — minor positioning fixes for the
       branded dropdown panel inside the collection-top bar.

  The product grid below is intentionally untouched.
*/

/* ============================================================
   A) COLLECTION BANNER
   ============================================================ */

/*
  The theme sizes the banner band purely via the `--padding-bottom` percentage
  (a ratio of the band width). The reference uses ~28% which, on a full-width
  desktop container, yields the tall hero seen in the desktop screenshot. On
  mobile that same ratio collapses to a too-short band, so we raise the ratio
  at small viewports for a comfortable height matching the mobile screenshot.
*/
.collection-hero__wrapper--with-image {
  /* Mobile: taller band so the title + description sit comfortably. */
  --padding-bottom: 42% !important;
  border-radius: 0;
  align-items: stretch;
}

@media screen and (min-width: 750px) {
  .collection-hero__wrapper--with-image {
    /* Tablet/desktop: fall back toward the reference ratio. */
    --padding-bottom: 30% !important;
  }
}

@media screen and (min-width: 990px) {
  .collection-hero__wrapper--with-image {
    --padding-bottom: 28.13% !important;
  }
}

/*
  Text overlay: top-left aligned per the reference markup. Give the content a
  comfortable inset and cap the height so the title/description sit toward the
  top of the band rather than stretching the band taller than the image ratio.
*/
.collection-hero__wrapper--with-image .collection-hero__content {
  position: absolute;
  inset: 0;
  padding: 1.6rem 2rem;
  row-gap: 0;
  justify-content: flex-start;
}

@media screen and (min-width: 750px) {
  .collection-hero__wrapper--with-image .collection-hero__content {
    padding: 2.4rem 2.8rem;
  }
}

@media screen and (min-width: 990px) {
  .collection-hero__wrapper--with-image .collection-hero__content {
    padding: 3.2rem 3.6rem;
  }
}

/*
  The reference relies on a dark colour scheme (color-background-3) being
  applied to make the overlaid text legible. That scheme isn't defined on this
  static build, and the overlay is only ~15% opacity, so force white text +
  a soft shadow to keep the title/description readable over the cover image —
  exactly as the live store renders (white over the dark photo).
*/
.collection-hero__wrapper--with-image .collection-hero__title,
.collection-hero__wrapper--with-image .collection-hero__title .visually-hidden,
.collection-hero__wrapper--with-image .collection-hero__description,
.collection-hero__wrapper--with-image .collection-hero__description * {
  color: #fff !important;
}

.collection-hero__wrapper--with-image .collection-hero__title {
  margin: 0 0 0.4rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.collection-hero__wrapper--with-image .collection-hero__description {
  margin-top: 0.2rem;
  max-width: 47.4rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.collection-hero__wrapper--with-image .collection-hero__description p {
  margin: 0;
}

/* Ensure the cover image truly fills the band at every size. */
.collection-hero__wrapper--with-image .collection-hero__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ============================================================
   B) BRANDED SORT (facet-sort-select)
   ============================================================ */

/*
  The branded sort widget is fully styled by component-facets.css. The only
  scoped tweaks needed here keep the dropdown panel anchored to the control's
  right edge inside the collection-top bar (the theme default centres it, which
  on desktop can push the panel off the right gutter), and keep the SORT BY
  label / control vertically aligned in the row.
*/
.collection-top__container-left .facets-sorting {
  gap: 0.6rem;
}

.collection-top__container-left .facets-sorting__label {
  white-space: nowrap;
}

/* Uppercase the trigger text to match the row's SORT BY: label styling. */
.collection-top__container-left .facet-sort-select__current {
  text-transform: uppercase;
  letter-spacing: var(--font-subtitle-letter-spacing, 0.04em);
}

/*
  Anchor the options panel to the right edge of the trigger so it stays within
  the page gutter on desktop (the control lives near the right side of the bar
  once the product count pushes it across). The theme centres it via a
  translateX(-50%); we override to right-align without breaking the open
  animation's vertical motion.
*/
@media screen and (min-width: 750px) {
  .collection-top__container-left .facet-sort-select__options {
    left: auto;
    right: 0;
    transform: none;
    top: calc(100% + 0.8rem);
  }
  @keyframes animateSortOpenAllegory {
    0% {
      opacity: 0;
      transform: translateY(-1rem);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .collection-top__container-left .facet-sort-select.open .facet-sort-select__options {
    animation: animateSortOpenAllegory var(--duration-default) ease;
  }
}