/** Shopify CDN: Minification failed

Line 149:0 Unexpected "@media"
Line 171:0 Unexpected "`"
Line 195:0 Unexpected "`"
Line 217:16 Expected identifier but found "!"
Line 218:22 Expected identifier but found "!"
Line 369:1 Expected "}" to go with "{"

**/
page-manager {padding-top: calc(var(--section-padding-top) / 2); padding-bottom: var(--section-padding-bottom);}
.collection-main {padding-top: calc(var(--section-padding-top) / 2); padding-bottom: 0; --items-margin: 3em;}

.collection-wrapper {margin: 0 auto;}
.collection-loading {position: relative; height: 200px;}
.collection-loading.fixed {position: fixed; z-index: 90; top: 0; left: 0; width: 100%; height: 100%;}
.collection-loading.fixed:before {content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--scheme-background-color); opacity: 0.8;}
.pagination-loading .loader {--loader-color: var(--scheme-text-color);}

.sort-select label {white-space: nowrap; margin: 0 1em 0 0;}
.sort-select select,
.open-filters {height: 3.8rem; padding: 0 2.5em 0 var(--fields-padding-horizontal); display: flex; align-items: center;}

[data-grid-layout="list"], [data-grid-layout="1"] {--items-per-row: 1;}
[data-grid-layout="2"] {--items-per-row: 2;}
[data-grid-layout="3"] {--items-per-row: 3;}
[data-grid-layout="4"] {--items-per-row: 4;}
[data-grid-layout="5"] {--items-per-row: 5;}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(var(--items-per-row, 3), minmax(0, 1fr));
  gap: var(--grid-gap, 2rem);
}

/* Default for desktop */
.collection-grid {
  --items-per-row: 3;
}

/* Tablet: below 66rem (1056px) */
@media (max-width: 66rem) {
  .collection-grid {
    --items-per-row: 2;
  }
}

/* Mobile: below 38rem (608px) */
@media (max-width: 38rem) {
  .collection-grid {
    --items-per-row: 1;
  }
}

.collection-grid .grid-item {
  grid-column: span 1;
}

.grid-item.product-item {
  padding-top: 10px;
  padding-bottom: 20px;
  /* other styles */
}

.flex.row-reverse.justify-content-between.align-items-end {
  max-width: 300px; /* Or the final value that worked for you */
  /* Also remove any temporary padding-left or margin-left you might have added */
  padding-left: 0;
}

/* If you previously set a max-width on the add-to-cart-form and want to keep it: */
.add-to-cart-form {
  max-width: 200px; /* Or the value you used */
}

.info {
  height: 315px; /* Keep this if you want a fixed height */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.collection-utils .sort-filter > *:not(:first-child) {margin-left: 1em;}
.collection-utils .layout {margin-left: 0.5em;}
.collection-utils .layout .button {position: relative; margin-left: 0.5em;}
.collection-utils .layout input {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
.collection-utils .layout label {position: relative; height: 3.8rem; width: 3.8rem; display: flex; align-items: center; justify-content: center; margin-right: -1px; border: 1px solid transparent; border-radius: 0em;}
.collection-utils .layout label svg {opacity: 0.5; display: block; font-size: 1.6rem; position: relative; z-index: 1; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;}
.not-mobile .collection-utils .layout label:hover svg {opacity: 0.8;}
.collection-utils .layout input:checked + label svg {opacity: 1;}
.collection-utils .layout input:checked + label {border-color: var(--scheme-fields-border-color);}

@media (min-width: 66.001rem) {
  .collection-utils .sort-filter {min-width: 20%;}
  collection-sort,
  .filters-button-wrapper {min-width: 14em; width: 100%;}
}
@media (min-width: 38.001rem) {
  [data-grid-layout="list"] .common-card {display: flex; align-items: flex-start; flex-direction: row !important;}
  [data-grid-layout="list"] .common-card .image-container {width: 30%;}
  [data-grid-layout="list"] .common-card.scheme-border-box.image-full-width .image-container,
  [data-grid-layout="list"] .common-card.same-scheme-false.image-full-width .image-container {margin: -1em; margin-right: 0; border-radius: 0em; border-top-right-radius: 0; border-bottom-right-radius: 0;}
  [data-grid-layout="list"] .common-card.scheme-border-box.image-full-width .img-wrap,
  [data-grid-layout="list"] .common-card.same-scheme-false.image-full-width .img-wrap {border-radius: 0em; border-top-right-radius: 0; border-bottom-right-radius: 0;}
  [data-grid-layout="list"] .common-card .info {width: 70%; padding: 0.5em 0 0.5em 4%;}
  [data-grid-layout="list"] .common-card .info .title {font-size: 1.5em;}
  [data-grid-layout="list"] .common-card .info .price {font-size: 1.2em;}
  [data-grid-layout="list"] .common-card .floating-buttons.buttons button.quick-view-trigger {flex: 0; min-width: unset; padding: 1em;}
  [data-grid-layout="list"] .common-card .floating-buttons.buttons button.quick-view-trigger .circle {margin: 0;}
  [data-grid-layout="list"] .common-card .floating-buttons.buttons button.quick-view-trigger .tooltip {border: 0; clip: rect(0 0 0 0); height: 1px; width: 1px; min-height: unset; min-width: unset; margin: -1px; overflow: hidden; padding: 0; position: absolute;}
  [data-grid-layout="list"] .common-card .floating-buttons button.atc-options {display: none !important;}
  [data-grid-layout="list"] .common-card .description {display: block; max-width: 80%; margin-top: 1em;}
  [data-grid-layout="list"] .common-card.atc.colors-out .color-swatches {margin-top: 0;}
  [data-grid-layout="list"] .common-card.atc.colors-out add-to-cart-form > .color-swatches {display: none;}
  [data-grid-layout="list"] .common-card.atc .atc-options-wrapper form {position: static; transform: none; padding: 0; box-shadow: none; opacity: 1; visibility: visible;}
  [data-grid-layout="list"] .common-card.atc .close {display: none;}
  [data-grid-layout="list"] .common-card.atc add-to-cart-form {margin-top: 1em;}
  [data-grid-layout="list"] .common-card.atc product-dropdown {max-width: 30rem;}
  [data-grid-layout="list"] .common-card.atc .swatch-group {margin-bottom: 0.5em;}
  [data-grid-layout="list"] .common-card.atc .btn {padding: 0.9em 2em; width: auto; min-width: 13em;}
}@media (max-width: 66rem) {
  .open-filters {font-size: 16px !important;}

  .collection-loading.fixed {z-index: 205;}
  [data-grid-layout="list"] .common-card .info {padding: 0 0 0 4%;}

  [data-grid-layout="3"] .common-card:not(.normal) {padding-bottom: 3.5em;}
  [data-grid-layout="3"] .common-card:not(.normal) .image-container,
  [data-grid-layout="3"] .common-card:not(.normal) .info {position: static;}
  [data-grid-layout="3"] .common-card:not(.normal) add-to-cart-form {position: static !important;}
  [data-grid-layout="3"] .common-card:not(.normal) .floating-buttons.buttons {left: -0.25em; right: -0.25em; bottom: -0.25em; --floating-cta-background: var(--scheme-buttons-background); --floating-cta-label: var(--scheme-buttons-label);}
  [data-grid-layout="3"] .common-card:not(.normal) .floating-buttons:not(.buttons) {flex-direction: row; right: auto; left: 0; bottom: 0; z-index: 1;}
  [data-grid-layout="3"] .common-card:not(.normal) .floating-buttons:not(.buttons) button {margin: 0 0.75em 0 0;}
  [data-grid-layout="3"] .common-card:not(.normal) .floating-buttons:not(.buttons) button .circle {font-size: 0.9em; box-shadow: none;}
  [data-grid-layout="3"] .common-card:not(.normal) .floating-buttons:not(.buttons) button .circle:after {border-color: var(--scheme-borders-color); opacity: 1;}
  [data-grid-layout="3"] .common-card:not(.normal) .floating-buttons:not(.buttons) .tooltip {border: 0; clip: rect(0 0 0 0); height: 1px; width: 1px; min-height: unset; min-width: unset; margin: -1px; overflow: hidden; padding: 0; position: absolute;}
  [data-grid-layout="3"] .common-card:not(.normal).scheme-border-box,
  [data-grid-layout="3"] .common-card:not(.normal).same-scheme-false {padding-bottom: 4.5em;}
  [data-grid-layout="3"] .common-card:not(.normal).scheme-border-box .floating-buttons,
  [data-grid-layout="3"] .common-card:not(.normal).same-scheme-false .floating-buttons {bottom: 0.8em; left: 0.8em;}
}
@media (max-width: 780px) {
  [data-grid-layout="3"] .common-card:not(.normal) .floating-buttons.buttons .tooltip {border: 0; clip: rect(0 0 0 0); height: 1px; width: 1px; min-height: unset; min-width: unset; margin: -1px; overflow: hidden; padding: 0; position: absolute;}
}
@media (max-width: 430px) {
  [data-grid-layout="2"] .common-card:not(.normal) .floating-buttons.buttons .tooltip {border: 0; clip: rect(0 0 0 0); height: 1px; width: 1px; min-height: unset; min-width: unset; margin: -1px; overflow: hidden; padding: 0; position: absolute;}
}
scss
@media (max-width: 38rem) {
  .collection-main {
    --items-margin: 2em;
    /* Add responsive grid gap if needed */
    /* --grid-gap: 1em; */
  }

  [data-grid-layout="2"] .common-card:not(.normal) {padding-bottom: 3.5em;}
  [data-grid-layout="2"] .common-card:not(.normal) .image-container,
  [data-grid-layout="2"] .common-card:not(.normal) .info {position: static;}
  [data-grid-layout="2"] .common-card:not(.normal) add-to-cart-form {position: static !important;}
  [data-grid-layout="2"] .common-card:not(.normal) .floating-buttons.buttons {left: -0.25em; right: -0.25em; bottom: -0.25em; --floating-cta-background: var(--scheme-buttons-background); --floating-cta-label: var(--scheme-buttons-label);}
  [data-grid-layout="2"] .common-card:not(.normal) .floating-buttons:not(.buttons) {flex-direction: row; right: auto; left: 0; bottom: 0; z-index: 1;}
  [data-grid-layout="2"] .common-card:not(.normal) .floating-buttons:not(.buttons) button {margin: 0 0.75em 0 0;}
  [data-grid-layout="2"] .common-card:not(.normal) .floating-buttons:not(.buttons) button .circle {font-size: 0.9em; box-shadow: none;}
  [data-grid-layout="2"] .common-card:not(.normal) .floating-buttons:not(.buttons) button .circle:after {border-color: var(--scheme-borders-color); opacity: 1;}
  [data-grid-layout="2"] .common-card:not(.normal) .floating-buttons:not(.buttons) .tooltip {border: 0; clip: rect(0 0 0 0); height: 1px; width: 1px; min-height: unset; min-width: unset; margin: -1px; overflow: hidden; padding: 0; position: absolute;}
  [data-grid-layout="2"] .common-card:not(.normal).scheme-border-box,
  [data-grid-layout="2"] .common-card:not(.normal).same-scheme-false {padding-bottom: 4.5em;}
  [data-grid-layout="2"] .common-card:not(.normal).scheme-border-box .floating-buttons,
  [data-grid-layout="2"] .common-card:not(.normal).same-scheme-false .floating-buttons {bottom: 0.8em; left: 0.8em;}

``
scss
@media (max-width: 38rem) {
  .collection-main {
    --items-margin: 2em;
    /* Add responsive grid gap if needed */
    /* --grid-gap: 1em; */
  }

  [data-grid-layout="2"] .common-card:not(.normal) {padding-bottom: 3.5em;}
  [data-grid-layout="2"] .common-card:not(.normal) .image-container,
  [data-grid-layout="2"] .common-card:not(.normal) .info {position: static;}
  [data-grid-layout="2"] .common-card:not(.normal) add-to-cart-form {position: static !important;}
  [data-grid-layout="2"] .common-card:not(.normal) .floating-buttons.buttons {left: -0.25em; right: -0.25em; bottom: -0.25em; --floating-cta-background: var(--scheme-buttons-background); --floating-cta-label: var(--scheme-buttons-label);}
  [data-grid-layout="2"] .common-card:not(.normal) .floating-buttons:not(.buttons) {flex-direction: row; right: auto; left: 0; bottom: 0; z-index: 1;}
  [data-grid-layout="2"] .common-card:not(.normal) .floating-buttons:not(.buttons) button {margin: 0 0.75em 0 0;}
  [data-grid-layout="2"] .common-card:not(.normal) .floating-buttons:not(.buttons) button .circle {font-size: 0.9em; box-shadow: none;}
  [data-grid-layout="2"] .common-card:not(.normal) .floating-buttons:not(.buttons) button .circle:after {border-color: var(--scheme-borders-color); opacity: 1;}
  [data-grid-layout="2"] .common-card:not(.normal) .floating-buttons:not(.buttons) .tooltip {border: 0; clip: rect(0 0 0 0); height: 1px; width: 1px; min-height: unset; min-width: unset; margin: -1px; overflow: hidden; padding: 0; position: absolute;}
  [data-grid-layout="2"] .common-card:not(.normal).scheme-border-box,
  [data-grid-layout="2"] .common-card:not(.normal).same-scheme-false {padding-bottom: 4.5em;}
  [data-grid-layout="2"] .common-card:not(.normal).scheme-border-box .floating-buttons,
  [data-grid-layout="2"] .common-card:not(.normal).same-scheme-false .floating-buttons {bottom: 0.8em; left: 0.8em;}

``
scss
@media (max-width: 38rem) {
  /* --- Mobile Layout Adjustments --- */

    product-card-atc.product-card.common-card.trigger-floating-buttons.text-left.product-main-element.atc.normal.colors-out.scheme.scheme-3.same-scheme-true {
    display: flex !important; /* Add !important here */
    flex-direction: column !important; /* Add !important here */
    width: 100%;
    padding: 0;
    margin: 0;
       }
  /* Ensure the main collection grid has no top margin or gap on mobile */
  .grid.collection-grid {
    margin-top: 0;
    gap: 0; /* standard CSS gap */
    grid-gap: 0; /* for older browsers */
    row-gap: 0;
  }

  /* Remove padding from grid item on mobile and remove bottom margin for full width stacking */
  .grid-item.product-item {
    padding: 0; !important;
    margin-bottom: 0; !important;
  }

   /* Make the product card element itself a flex container and stack its direct children vertically */
   product-card-atc.product-card.common-card.trigger-floating-buttons.text-left.product-main-element.atc.normal.colors-out.scheme.scheme-3.same-scheme-true {
      display: flex;
      flex-direction: column;
      width: 100%; /* Ensure the product card takes full width of its container */
      padding: 0; /* Remove any default padding on the custom element */
      margin: 0; /* Remove any default margin on the custom element */
   }

  /* Style for the .image-container - This is the parent of the image link (a) and floating buttons. Allow its height to be determined by its children. Add space BELOW the container. */
  product-card-atc > .image-container.ease-animation { /* Target as a direct child of product-card-atc */
    /* Keep original display property (likely block) */
    /* Keep original flex-direction if any (likely row) */
    width: 100%; /* Take full width within product-card-atc */
    height: auto; /* === Let height auto based on its content (the image link + buttons) === */
    max-height: none; /* Ensure no max-height constraint on the container itself */
    margin-top: 0; /* Remove top margin */
    margin-bottom: 10px; /* === Add space BELOW the entire image container (image area + buttons) and the info block === */
    padding: 0; /* Ensure no padding on the container */
    overflow: visible; /* Ensure children's overflow is not hidden by container */
    position: relative; /* Keep relative position if it had it */
    z-index: 1; /* Keep its z-index if it had it */
  }

  /* Style for the image link (a) - This contains the .img-wrap. Let its height be determined by the .img-wrap padding hack. */
   product-card-atc > .image-container.ease-animation > a.product-card-url.no-highlight-hover.ignore-slide-tabindex { /* Target as a direct child of image-container */
      display: block; /* Ensure it's a block element to contain .img-wrap */
      width: 100%; /* Take full width of its parent container */
      height: auto; /* === Let height auto based on content (.img-wrap padding hack) === */
      max-height: none; /* === Ensure no max-height constraint here === */
      margin: 0; /* Ensure no margin */
      padding: 0; /* Ensure no padding */
      overflow: visible; /* === Ensure content is not hidden by overflow === */
   }

  /* Style for the .img-wrap (image wrapper) - KEEP the original padding hack here. Ensure it fills the width of its parent link. */
  /* The original padding-top rule for .img-wrap (e.g., padding-top: 130%;) should remain active from your theme's base CSS. */
  product-card-atc > .image-container.ease-animation > a.product-card-url > .img-wrap { /* Target as a direct child of the link */
      width: 100%; /* Fill the width of the link */
      /* === DO NOT REMOVE OR OVERRIDE THE ORIGINAL padding-top HERE === */
      /* DO NOT set height: 100% here */
      margin: 0; /* No margin */
      /* Keep original display/flex properties if any */
  }

  /* Ensure the actual image fills its wrapper using object-fit */
  product-card-atc > .image-container.ease-animation > a.product-card-url > .img-wrap img { /* Target as a direct child of img-wrap */
     object-fit: contain; /* Keep object-fit: contain to maintain aspect ratio within the tall wrapper */
     width: 100%; /* Fill the width of the wrapper */
     height: 100%; /* === Fill the HEIGHT of the wrapper (which is now determined by padding hack) === */
     padding: 0;
     margin: 0;
  }

  /* Style for the .floating-buttons block - This is a sibling of the image link inside the image container. Position it below the image link. */
   product-card-atc > .image-container.ease-animation > .floating-buttons.buttons.flex.flex-wrap { /* Target as a direct child of image-container */
    position: static; /* Ensure static positioning on mobile */
    top: auto; right: auto; bottom: auto; left: auto; /* Remove positioning offsets */
    transform: none; /* Remove any transform */
    margin-top: 10px; /* === Add space BETWEEN image link (a) and buttons === */
    width: 100%; /* Ensure buttons take full width if needed */
    justify-content: center; /* Center buttons within their container */
    margin-bottom: 0;
    padding: 0;
    z-index: 2; /* Keep its z-index if it had it */
  }


  /* Style for the .info block - This is a sibling of the .image-container directly inside product-card-atc. Add horizontal padding and control spacing for children. */
  product-card-atc > .info { /* Target as a direct child of product-card-atc */
    width: 100%;
    flex: none;
    height: auto;
    max-height: none;
    margin-top: 0; /* Space handled by image-container margin-bottom */
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 10px; /* === Add Left Padding (adjust value) === */
    padding-right: 10px; /* === Add Right Padding (adjust value) === */
    box-sizing: border-box; /* Include padding in total width */
    display: flex; /* Make .info a flex container */
    flex-direction: column; /* Stack its children vertically */
    align-items: flex-start; /* Align children to the start */
    justify-content: flex-start; /* Align content to the start vertically */
  }

  /* Control spacing for children within .info */
  .info > * { /* Apply to direct children within .info */
     margin: 0; /* Remove all default margins */
     padding: 0; /* Remove all default paddings */
     margin-bottom: 5px; /* === Add consistent space AFTER each child (adjust value) === */
  }

  /* Remove bottom margin from the LAST child inside .info */
  .info > *:last-child {
     margin-bottom: 0;
  }

  /* Specific rule for description if it's hidden */
  .info > .description.hide {
      display: none;
      margin: 0;
      padding: 0;
  }

  /* --- End Mobile Layout Adjustments --- */
}
   }
/* ========== GRID LAYOUT ========== */
/* ... rest of your CSS */

.collection-grid {
  --items-per-row: 3;
  display: grid;
  grid-template-columns: repeat(var(--items-per-row), minmax(200px, 1fr));
}

/* ========== COLLAGE ITEM BEHAVIOR ========== */

.collection-grid .collage-item.has-image .wrap {
  min-height: 32rem;
}

.collage-item.double {
  width: calc((100% / var(--items-per-row)) * 2);
  max-width: calc(100% - (100% / var(--items-per-row)));
}

.collage-item.full-width,
[data-grid-layout="list"] .collage-item,
[data-grid-layout="1"] .collage-item {
  width: 100%;
  max-width: 100%;
}

.collage-item.full-width.has-image .wrap,
[data-grid-layout="list"] .collage-item.has-image .wrap,
[data-grid-layout="1"] .collage-item.has-image .wrap {
  min-height: 32rem;
}

/* ========== RESPONSIVE ADJUSTMENTS ========== */

@media (max-width: 38rem) {
  .collection-grid .collage-item.has-image .wrap {
    min-height: 26rem;
  }
}