/** Shopify CDN: Minification failed Line 17:4 Expected ":" Line 18:4 Expected ":" Line 46:46 Expected ":" Line 50:46 Expected ":" Line 59:62 Expected ":" Line 60:62 Expected ":" Line 61:62 Expected ":" Line 64:62 Expected ":" Line 65:62 Expected ":" Line 75:78 Expected ":" ... and 66 more hidden warnings **/ .collage-wrapper-title {   margin-top: 0;   margin-bottom: 3rem; /* Reverting to a smaller size */ max-width: 120rem; margin-left: auto; margin-right: auto; } .collage { /* Reverting max width to a smaller size */ max-width: 120rem; margin-left: auto; margin-right: auto; /* Retaining center for alignment */ justify-content: center !important; /* 🛑 CRITICAL: Ensure display is Flex, which handles wrapping better than a broken Grid */ display: flex !important; /* 🛑 CRITICAL: Allow items to wrap onto the next line */ flex-wrap: wrap !important; /* 🛑 NEW: Remove the redundant grid rule */ display: unset; /* 💡 NEW FIX: Add slight horizontal padding to prevent sticking to browser edges */ padding-left: 1.5rem; padding-right: 1.5rem; } .collage__item > * {   width: 100%; } .collage__item .card__content {   flex-grow: initial; } @media screen and (max-width: 749px) { /* 🛑 MOBILE FIX: Reverting to CSS Grid to avoid Flex conflict */ .collage { display: grid !important; /* Use Grid */ align-items: unset !important; /* Remove align-items to let Grid manage */ flex-wrap: unset !important; /* Remove flex-wrap */     grid-column-gap: var(--grid-mobile-horizontal-spacing);     grid-row-gap: var(--grid-mobile-vertical-spacing);   }   .collage--mobile {     grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* Ensure 2 columns */   } /* 🛑 CRITICAL ALIGNMENT FIX: Target the card content wrapper */ .collage__item .card__content { align-self: flex-start !important; /* Ensure content is aligned to the top */ display: block !important; /* Force it back to a block element */ } /* All mobile-specific rules remain for consistency */   .collage--mobile .collage__item--left:nth-child(3n - 2) {     grid-column: span 2;   }   .collage--mobile .collage__item--left:nth-child(3n - 2):nth-last-child(2) {     grid-column: span 1;   }   .collage--mobile .collage__item--left:nth-child(3n) {     grid-column-start: 2;   }   .collage--mobile .collage__item--right:nth-child(3n - 2) {     grid-column-start: 1;   }   .collage--mobile .collage__item--right:nth-child(3n - 2):last-child {     grid-column: span 2;   }   .collage--mobile .collage__item--right:nth-child(3n - 1) {     grid-column-start: 2;   }   .collage--mobile .collage__item--right:nth-child(3n) {     grid-column: 1 / span 2;   } } @media screen and (min-width: 750px) { /* 💡 FIX: We need to set the gap on the Flex container */ .collage { /* 🛑 CRITICAL: Align all items to the start (top) of the row */ align-items: flex-start !important; /* 🛑 CRITICAL: We rely on the Flexbox rules set above (display: flex, flex-wrap: wrap) */ grid-auto-flow: unset !important; grid-template-columns: unset !important; display: flex !important; /* Reinforce Flex on desktop */ /* 🛑 CRITICAL: This is the fix for padding! */ gap: var(--grid-desktop-horizontal-spacing) var(--grid-desktop-vertical-spacing) !important; } /* 🛑 CRITICAL: Force every item to take up exactly 50% width */ .collage__item { /* CHANGED CALCULATION: Now we subtract the gap width entirely */ /* If the container has a gap, the item width should be 50% of the remaining space */ flex-basis: calc(50% - var(--grid-desktop-horizontal-spacing) / 2) !important; max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2) !important; width: unset !important; /* Remove old grid span rules */ grid-column: unset !important; grid-row: unset !important; grid-column-start: unset !important; } /* Remove all the old spanning rules completely to clean up the code */ .collage__item--left:nth-child(3n - 2), .collage__item--left:nth-child(3n - 2):last-child, .collage__item--left:nth-child(3n - 1), .collage__item--left:nth-child(3n), .collage__item--right:nth-child(3n - 2), .collage__item--right:nth-child(3n - 2):last-child, .collage__item--right:nth-child(3n - 1), .collage__item--right:nth-child(3n) { grid-column: unset !important; grid-row: unset !important; grid-column-start: unset !important; } /* Target the product card wrapper (if it exists) to stop it from expanding */ .collage__item .product-card-wrapper { max-width: 100%; width: 100% !important; min-width: unset !important; } /* Only keep the single-child centering rule, as it might be useful */   .collage__item--collection:only-child,   .collage__item--product:only-child {     justify-self: center;     max-width: 73rem;     width: 100%;   } } .collage-card {   height: 100%;   position: relative;   /* Reverting border-radius change */   border: var(--border-width) solid rgba(var(--color-foreground), var(--border-opacity));   padding: var(--image-padding); } /* Needed for gradient continuity with or without animation, background-attachment: local scopes the gradient to its container which happens automatically when a transform is applied (animation on scroll) */ .collage-card.gradient {   transform: perspective(0); } .collage-card:after {   content: '';   position: absolute;   z-index: -1;   border-radius: var(--border-radius);   box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)     rgba(var(--color-shadow), var(--shadow-opacity));   width: calc(var(--border-width) * 2 + 100%);   height: calc(var(--border-width) * 2 + 100%);   top: calc(var(--border-width) * -1);   left: calc(var(--border-width) * -1); } .collage-card.product-card-wrapper {   --border-radius: var(--product-card-corner-radius);   --border-width: var(--product-card-border-width);   --border-opacity: var(--product-card-border-opacity);   --shadow-horizontal-offset: var(--product-card-shadow-horizontal-offset);   --shadow-vertical-offset: var(--product-card-shadow-vertical-offset);   --shadow-blur-radius: var(--product-card-shadow-blur-radius);   --shadow-opacity: var(--product-card-shadow-opacity);   --shadow-visible: var(--product-card-shadow-visible);   --image-padding: var(--product-card-image-padding); } .collage-card .media {   height: 100%;   overflow: hidden;   /* Reverting border-radius change */ } .collage-card .deferred-media {   height: 100%;   overflow: visible; } .collage-card__link {   display: block;   height: 100%; } .collage-card .deferred-media__poster {   background-color: transparent;   border: 0; } .collage-card .deferred-media__poster:after {   content: '';   position: absolute;   z-index: 1;   outline-offset: 0.3rem;   bottom: calc(var(--border-width) * -1);   left: calc(var(--border-width) * -1);   right: calc(var(--border-width) * -1);   top: calc(var(--border-width) * -1); } .collage-card .deferred-media__poster:focus:after {   box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);   outline: 0.2rem solid rgba(var(--color-foreground), 0.5); } .collage-card .deferred-media__poster:focus-visible:after {   box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);   outline: 0.2rem solid rgba(var(--color-foreground), 0.5); } .collage-card .deferred-media__poster:focus:not(:focus-visible), .collage-card .deferred-media__poster:focus:not(:focus-visible):after {   outline: none;   box-shadow: none; } .collage-card .deferred-media__poster:focus {   outline: none;   box-shadow: none; } }