/** Shopify CDN: Minification failed

Line 56:10 Expected identifier but found whitespace
Line 56:12 Unexpected "{"
Line 56:21 Expected ":"
Line 56:50 Unexpected "{"
Line 56:59 Expected ":"
Line 56:85 Unexpected "{"
Line 56:94 Expected ":"
Line 56:121 Expected ":"
Line 65:13 Expected identifier but found whitespace
Line 65:15 Unexpected "{"
... and 9 more hidden warnings

**/
/* =========================================
   FULL-WIDTH IMAGE + TEXT OVERLAY (NOT SPLIT)
   Works even if component-collection-hero.css is commented out
   ========================================= */

/* Make sure the inner wrapper establishes positioning context */
.collection-hero--with-image:not(.collection-hero--split) .collection-hero__inner {
  position: relative;
  width: 100%;
}

/* Force the image container to have a real height (hero ratio) */
.collection-hero--with-image:not(.collection-hero--split) .collection-hero__image-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Make the image fill the hero area */
.collection-hero--with-image:not(.collection-hero--split) .collection-hero__image-container img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Overlay text centered over the image */
.collection-hero--with-image:not(.collection-hero--split) .collection-hero__text-wrapper {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding:3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* vertical center */
  align-items: center;      /* horizontal center */

  /* keep your content from hitting edges */
  padding: {{ section.settings.banner_above }}px {{ section.settings.banner_lr }}px {{ section.settings.banner_below }}px;
  margin: 0 auto;
  max-width: var(--page-width);
}

/* Make sure text aligns the way your setting expects */
.collection-hero--with-image:not(.collection-hero--split) .collection-hero__title,
.collection-hero--with-image:not(.collection-hero--split) .collection-hero__description {
  width: 100%;
  text-align: {{ section.settings.text_orient }};
}

/* IMPORTANT: do NOT let your mobile "position:relative" rule break overlay mode */
@media (max-width: 749px) {
  .collection-hero--with-image:not(.collection-hero--split) .collection-hero__text-wrapper {
    position: absolute;
    inset: 0;
    width: auto;
    padding: {{ section.settings.banner_above_m }}px {{ section.settings.banner_lr }}px {{ section.settings.banner_below_m }}px;
  }
}