/* ========================================================= VIPERIA - LIVE FOOD SUBSCRIPTION HERO COMPLETE RESPONSIVE CSS Desktop: - Full browser width banner - Natural aspect ratio - No cropping Tablet / Mobile: - Switches to Mobile.jpg - Natural responsive height - No cropping of text/content ========================================================= */ /* ========================================================= REMOVE LOOP'S SPACE ABOVE THE HERO ========================================================= */ /* Loop adds its own background padding above the bundle. This is the thin strip visible above the banner. */ .loop-background, #loop-background { padding-top: 0 !important; } /* ========================================================= HEADER WRAPPER - DEFAULT / DESKTOP ========================================================= */ .loop-bundle-header-wrapper-new { flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; width: 100% !important; /* Your working desktop position */ margin-top: -1rem !important; margin-bottom: 12px !important; padding-top: 0 !important; height: auto !important; max-height: none !important; overflow: visible !important; display: flex !important; } /* ========================================================= HERO IMAGE WRAPPER - DEFAULT ========================================================= */ .loop-bundle-image-container-wrapper { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; /* No internal spacing around hero */ padding: 0 !important; /* Your preferred large gap between the hero/title and the product selection area. */ margin-bottom: 10rem !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= HERO IMAGE CONTAINER ========================================================= */ /* Loop uses the same class name on the DIV and IMG, so this specifically targets the container DIV. */ .loop-bundle-image-container-wrapper > .loop-bundle-image-container { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; display: block !important; background-color: #012D2C !important; box-sizing: border-box !important; } /* ========================================================= DESKTOP HERO IMAGE ========================================================= */ .loop-bundle-image-container-wrapper > .loop-bundle-image-container > img.loop-bundle-image-container[alt="Live Food Subscription"] { width: 100% !important; max-width: 100% !important; /* Natural height keeps the original aspect ratio and prevents text from being cropped. */ height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; object-fit: contain !important; object-position: center center !important; display: block !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= DESKTOP - FULL VIEWPORT WIDTH HERO 1025px AND ABOVE ========================================================= */ @media screen and (min-width: 1025px) { /* ----------------------------------------------------- BREAK HERO OUT OF LOOP'S CENTRED CONTAINER ----------------------------------------------------- */ .loop-bundle-image-container-wrapper { /* 100vw = entire browser viewport width. */ width: 100vw !important; max-width: 100vw !important; /* Pull the banner outside Loop's centred content container. This lets it reach both browser edges. */ margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; /* Keep your preferred spacing underneath. */ margin-bottom: 10rem !important; padding: 0 !important; height: auto !important; max-height: none !important; overflow: visible !important; } /* ----------------------------------------------------- FULL WIDTH DESKTOP CONTAINER ----------------------------------------------------- */ .loop-bundle-image-container-wrapper > .loop-bundle-image-container { width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; display: block !important; background-color: #012D2C !important; } /* ----------------------------------------------------- FULL WIDTH DESKTOP IMAGE ----------------------------------------------------- */ .loop-bundle-image-container-wrapper > .loop-bundle-image-container > img.loop-bundle-image-container[alt="Live Food Subscription"] { /* Fill entire browser width. */ width: 100vw !important; max-width: 100vw !important; /* Allow browser to calculate height from the artwork's real aspect ratio. */ height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; /* Do not crop text contained inside the artwork. */ object-fit: contain !important; object-position: center center !important; display: block !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= TABLET 768px - 1024px ========================================================= */ @media screen and (min-width: 768px) and (max-width: 1024px) { /* ----------------------------------------------------- TABLET HEADER POSITION ----------------------------------------------------- */ .loop-bundle-header-wrapper-new { /* Your confirmed working tablet offset. */ margin-top: -2rem !important; margin-bottom: 12px !important; padding-top: 0 !important; height: auto !important; max-height: none !important; overflow: visible !important; } /* ----------------------------------------------------- TABLET HERO WRAPPER ----------------------------------------------------- */ .loop-bundle-image-container-wrapper { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; /* Don't use the desktop breakout behaviour here. */ margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 10rem !important; padding: 0 !important; overflow: visible !important; } /* ----------------------------------------------------- TABLET IMAGE CONTAINER ----------------------------------------------------- */ .loop-bundle-image-container-wrapper > .loop-bundle-image-container { width: 100% !important; max-width: 100% !important; /* IMPORTANT: No fixed height. */ height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; display: block !important; background-color: #012D2C !important; } /* ----------------------------------------------------- TABLET IMAGE ----------------------------------------------------- */ .loop-bundle-image-container-wrapper > .loop-bundle-image-container > img.loop-bundle-image-container[alt="Live Food Subscription"] { /* Switch to dedicated tablet/mobile artwork. */ content: url("https://cdn.shopify.com/s/files/1/0963/0403/8225/files/Mobile.jpg?v=1786347599") !important; width: 100% !important; max-width: 100% !important; /* Natural height = no squashing / cropping. */ height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; object-fit: contain !important; object-position: center center !important; display: block !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= MOBILE 767px AND BELOW ========================================================= */ @media screen and (max-width: 767px) { /* ----------------------------------------------------- MOBILE HEADER POSITION ----------------------------------------------------- */ .loop-bundle-header-wrapper-new { width: 100% !important; /* Your confirmed working mobile offset. */ margin-top: -1rem !important; margin-bottom: 12px !important; padding-top: 0 !important; height: auto !important; max-height: none !important; overflow: visible !important; } /* ----------------------------------------------------- MOBILE HERO WRAPPER ----------------------------------------------------- */ .loop-bundle-image-container-wrapper { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 10rem !important; padding: 0 !important; overflow: visible !important; } /* ----------------------------------------------------- MOBILE IMAGE CONTAINER ----------------------------------------------------- */ .loop-bundle-image-container-wrapper > .loop-bundle-image-container { width: 100% !important; max-width: 100% !important; /* Do NOT define 320px / 400px etc. Let the image determine its own height. */ height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; display: block !important; background-color: #012D2C !important; } /* ----------------------------------------------------- MOBILE IMAGE ----------------------------------------------------- */ .loop-bundle-image-container-wrapper > .loop-bundle-image-container > img.loop-bundle-image-container[alt="Live Food Subscription"] { /* Mobile artwork. */ content: url("https://cdn.shopify.com/s/files/1/0963/0403/8225/files/Mobile.jpg?v=1786347599") !important; width: 100% !important; max-width: 100% !important; /* Maintain the artwork's natural aspect ratio. */ height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; object-fit: contain !important; object-position: center center !important; display: block !important; margin: 0 !important; padding: 0 !important; } /* ----------------------------------------------------- TEXT UNDER HERO ----------------------------------------------------- */ .loop-bundle-title-wrapper-new, .loop-bundle-new-description { width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; } }