/** Shopify CDN: Minification failed Line 375:0 Unexpected "/" **/ /* ========================================================== πŸ–€ MJR – ATC + Shop Pay Styling (Product Page Only) Scope: #ProductInfo-template--25294183924001__main Purpose: Customize Add to Cart & Shop Pay buttons Notes: β€’ Desktop: 400 px fixed width, left-aligned stack β€’ Mobile: full-width responsive alignment β€’ Safe for theme updates – additive CSS override only β€’ Custom CSS – We Do Not Update Theme Code Date: 10.13.25 (Added mobile alignment fix) ========================================================== */ /* ========================================================== PRODUCT FORM – Layout + Buttons ========================================================== */ /* Stack ATC + Shop Pay vertically */ #ProductInfo-template--25294183924001__main .product-form__buttons { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; margin-top: 12px !important; } /* ATC default style */ #ProductInfo-template--25294183924001__main .product-form__submit { width: 400px !important; height: 48px !important; background: #000 !important; color: #fff !important; border: none !important; text-transform: uppercase !important; font-weight: 500 !important; font-size: 17px !important; letter-spacing: 0.5px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; position: relative !important; transition: all 0.35s ease-in-out !important; /* smooth fade */ } /* ========================================================== MJR – ATC Fade-Wipe Animation (leftβ†’right) ========================================================== */ #ProductInfo-template--25294183924001__main .product-form__submit::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #000 95%, rgba(0, 0, 0, 0)); transform-origin: left; transform: scaleX(1); transition: transform 0.5s ease-in-out; z-index: 0; } /* Hover – transparent wipe reveal */ #ProductInfo-template--25294183924001__main .product-form__submit:hover::before { transform: scaleX(0); } /* Hover – text and border styling */ #ProductInfo-template--25294183924001__main .product-form__submit:hover { background: transparent !important; color: #000 !important; border: 1px solid #000 !important; } /* Keep text above the wipe */ #ProductInfo-template--25294183924001__main .product-form__submit span, #ProductInfo-template--25294183924001__main .product-form__submit { position: relative; z-index: 1; } /* ========================================================== Interaction States ========================================================== */ /* Active / Press – tactile gray press, no zoom */ #ProductInfo-template--25294183924001__main .product-form__submit:active { background-color: #e5e5e5 !important; color: #000 !important; border: 1px solid #000 !important; opacity: 1 !important; transform: none !important; /* no zoom */ } /* Focus – accessibility without double outline */ #ProductInfo-template--25294183924001__main .product-form__submit:focus { outline: none !important; box-shadow: inset 0 0 0 2px #000 !important; /* inner focus ring */ } /* ========================================================== Neutralize Sleek's animation + inline background injections ========================================================== */ #ProductInfo-template--25294183924001__main .product-form__submit[style*="background"] { background: transparent !important; color: #000 !important; border: 1px solid #000 !important; } /* Kill any residual Sleek pseudo animations */ #ProductInfo-template--25294183924001__main .product-form__submit::after { content: none !important; display: none !important; } /* ========================================================== SHOP PAY Alignment + Consistency ========================================================== */ #ProductInfo-template--25294183924001__main .shopify-payment-button { align-self: flex-start !important; width: 400px !important; max-width: 400px !important; } #ProductInfo-template--25294183924001__main .shopify-payment-button__button { overflow: hidden !important; transition: all 0.25s ease-in-out !important; } /* ========================================================== πŸ“± Mobile Adjustments – Full-Width Alignment ========================================================== */ @media (max-width: 749px) { #ProductInfo-template--25294183924001__main .product-form__submit, #ProductInfo-template--25294183924001__main .shopify-payment-button, #ProductInfo-template--25294183924001__main .shopify-payment-button__button { width: 100% !important; /* fills container */ max-width: 100% !important; /* prevents overflow */ align-self: stretch !important;/* centers in flex column */ } } /* ========================================================== πŸ–€ MJR – Mobile Gallery Cleanup (Safe Mode + Fully Annotated) Theme: Sleek Affects: PRODUCT PAGE ONLY – MOBILE VIEW (≀749px) Purpose: β€’ Hide <1/4> swiper pagination + arrow buttons β€’ Remove gallery wrapper’s default bottom spacing β€’ Pull product info (title/price/etc.) closer under the image β€’ Apply only when gallery pagination or arrows exist (Safe Mode) Performance: β€’ Pure CSS – no JavaScript, no layout thrashing, no measurable impact Date: 10.10.25 ========================================================== */ @media (max-width: 749px) { /* ---------------------------------------------------------- SAFE MODE WRAPPER Only trigger these rules on the PRODUCT PAGE if the DOM actually contains swiper pagination or arrow controls. Prevents accidental hiding on other pages or future themes. ---------------------------------------------------------- */ body:has(.swiper-pagination), body:has(.media-gallery__pagination), body:has(.swiper-button-next), body:has(.media-gallery__button--next) { /* -------------------------------------------------------- HIDE PAGINATION INDICATORS -------------------------------------------------------- */ .media-gallery__pagination, .swiper-pagination, .swiper-pagination-fraction, .swiper-pagination-bullets { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* -------------------------------------------------------- HIDE ARROW CONTROLS (< >) -------------------------------------------------------- */ .swiper-button-next, .swiper-button-prev, .media-gallery__button--next, .media-gallery__button--prev { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; width: 0 !important; margin: 0 !important; padding: 0 !important; } /* -------------------------------------------------------- COLLAPSE GALLERY CONTAINER SPACING -------------------------------------------------------- */ .media-gallery, .media-gallery__wrapper, .product__media-wrapper { padding-bottom: 0 !important; margin-bottom: 0 !important; gap: 0 !important; } } /* ← closes the Safe-Mode body:has(...) wrapper */ } /* ========================================================== πŸ–€ MJR – Verified Product Page Spacing Fix (Sleek Motion) Theme: Sleek Affects: PRODUCT PAGE ONLY – MOBILE VIEW (≀749px) Purpose: β€’ Neutralize motion-element spacing between image & info β€’ Use --mjr-mobile-gap variable for fine tuning β€’ Works even when Sleek adds inline motion styles On mobile product pages, this CSS removes the big blank gap that appears between the product images and the title/info section (because of Sleek’s motion animations). After applying it, the product info moves up closer to the gallery, creating a tighter, cleaner layout. Date: 10.10.25 ========================================================== */ :root { --mjr-mobile-gap: -46px; /* adjust this to move info up/down */ } @media (max-width: 749px) { /* Remove vertical spacing added by motion-element */ body.product-template motion-element.product__media-wrapper { margin-bottom: 0 !important; padding-bottom: 0 !important; transform: none !important; /* neutralize animation offset */ } /* Pull info section upward by variable gap */ body.product-template motion-element.product__info-wrapper { margin-top: var(--mjr-mobile-gap, -12px) !important; } /* Remove any flex gap between product children */ body.product-template .product { gap: 0 !important; } } /* ========================================================== πŸ–€ MJR – Sleek Title + Description Fine Control (v15.2) Updated: 10-16-25 Scope: Product page only Purpose: β€’ Control font size, weight, line-height, and spacing β€’ Separate settings for desktop and mobile ========================================================== */ /* ---------- Desktop (β‰₯750px) ---------- */ @media (min-width: 750px) { body.product-template .product__block--title .product__title { /* πŸ–€ Desktop Title */ font-size: 34px !important; /* 🎚 Title size on desktop */ font-weight: 600 !important; /* πŸ’ͺ Title boldness (400=normal, 600=semi-bold, 700=bold) */ line-height: 1.1 !important; /* πŸ“ Tight vertical spacing between lines of title text */ margin-bottom: -15px !important; /* 🧱 Gap below title (negative pulls description closer) */ } /* Optional nested

variant */ body.product-template .product__block--title a.product__title h2 { font-size: 34px !important; font-weight: 600 !important; line-height: 1.1 !important; margin-bottom: 6px !important; } body.product-template .product__block--description { /* πŸ’¬ Desktop Description */ font-size: 20px !important; /* 🎚 Description size on desktop */ font-weight: 500 !important; /* πŸ’ͺ Description boldness (raise to 500–600 for stronger text) */ line-height: 1.45 !important; /* πŸ“ Vertical spacing between lines of paragraph text */ margin-top: 0 !important; /* 🧱 Space above description (0 pulls it closer to title) */ } } /* ---------- Mobile (≀749px) ---------- */ @media (max-width: 749px) { body.product-template .product__block--title .product__title { /* πŸ“± Mobile Title */ font-size: 22px !important; /* 🎚 Title size on mobile */ font-weight: 600 !important; /* πŸ’ͺ Title boldness for mobile */ line-height: 1.1 !important; /* πŸ“ Tight vertical spacing for compact layout */ margin-bottom: -15px !important; /* 🧱 Vertical gap below title */ } /* Optional nested

variant */ body.product-template .product__block--title a.product__title h2 { font-size: 22px !important; font-weight: 600 !important; line-height: 1.1 !important; margin-bottom: 4px !important; } body.product-template .product__block--description { /* πŸ’¬ Mobile Description */ font-size: 16px !important; /* 🎚 Description size on mobile */ font-weight: 500 !important; /* πŸ’ͺ Description boldness for mobile */ line-height: 1.35 !important; /* πŸ“ Line spacing for compact readability */ margin-top: 0 !important; /* 🧱 Space above description (adjust to widen/narrow gap) */ } } /* ========================================================== πŸ–€ MJR – Global Breadcrumb Height + Spacing Control Theme: Sleek v15.2 Confirmed structure:
Purpose: β€’ Make breadcrumb bar thinner (less vertical padding) β€’ Add optional top/bottom margins site-wide β€’ Apply globally to product, collection, blog & page templates Author: MJR Date: 10/16/25 ========================================================== */ /* ========================================================== 1️⃣ SECTION CONTAINER – controls the bar height & spacing ---------------------------------------------------------- This is the outer wrapper that defines: - Vertical thickness of the breadcrumb bar (padding) - Space above and below it (margins) ========================================================== */ .section--breadcrumb { padding-top: 6px !important; /* ↓ Lower value = thinner bar */ padding-bottom: 6px !important; margin-top: 12px !important; /* ↑ Adds gap above the bar */ margin-bottom: 12px !important; /* ↓ Adds gap below the bar */ } /* ========================================================== 2️⃣ INNER NAV AREA – controls text layout & line spacing ---------------------------------------------------------- The