/** Shopify CDN: Minification failed Line 42:0 All "@import" rules must come first **/ /* ============================================================ ALTairEGO — Horizon Theme Product Page CSS Override File: assets/ae-product-override.css HOW TO USE: 1. Upload this file to Online Store → Themes → Edit Code → Assets 2. Add this ONE line to the in layout/theme.liquid (paste it just before ): {{ 'ae-product-override.css' | asset_url | stylesheet_tag }} Or paste the whole file contents into: Online Store → Themes → Customize → Theme Settings → Custom CSS This file reskins Horizon's NATIVE product-information section to match the ALTairEGO design. The native section keeps all its blocks (variant picker, buy buttons, quantity, etc.) fully functional — only the visual appearance changes. ============================================================ */ /* ── DESIGN TOKENS ─────────────────────────────────────── */ :root { --ae-black: #0f0f0f; --ae-white: #ffffff; --ae-off: #f7f7f7; --ae-light: #efefef; --ae-border: #e2e2e2; --ae-mid: #999999; --ae-sub: #555555; --ae-yellow: #f2c014; --ae-yellow2:#e6a800; } /* ── FONTS ──────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Lato:ital,wght@0,300;0,400;0,700;1,300&display=swap'); /* ── PRODUCT INFORMATION SECTION WRAPPER ───────────────── */ /* Horizon's main product section class */ .product-information, .section-product-information { font-family: 'Lato', sans-serif; font-weight: 300; padding: 0 !important; max-width: 100% !important; } /* ── MAIN GRID: 50/50 sticky layout ────────────────────── */ /* Horizon uses .product-information__grid for the left/right split */ .product-information__grid, .product-information--media-left, .product-information--media-right { display: grid !important; grid-template-columns: 1fr 1fr !important; min-height: 90vh !important; gap: 0 !important; max-width: 100% !important; padding: 0 !important; align-items: start !important; } /* ── GALLERY COLUMN (left) ──────────────────────────────── */ /* Horizon wraps the gallery in .product-information__media */ .product-information__media, .product-information__media-wrapper { position: sticky !important; top: 68px !important; height: calc(100vh - 68px) !important; overflow: hidden !important; background: var(--ae-border) !important; padding: 0 !important; } /* Horizon's media gallery grid */ .media-gallery__grid, .product-media-gallery { display: grid !important; grid-template-columns: 72px 1fr !important; gap: 3px !important; height: 100% !important; background: var(--ae-border) !important; } /* Thumbnail list */ .media-gallery__thumbnails, .media-gallery__thumbnails-list, ul.media-gallery__grid { display: flex !important; flex-direction: column !important; gap: 3px !important; overflow-y: auto !important; overflow-x: hidden !important; background: var(--ae-border) !important; width: 72px !important; flex-shrink: 0 !important; } /* Individual thumbnail */ .media-gallery__thumbnail, .media-gallery__thumbnails .product-media, .media-gallery__thumbnails li { width: 72px !important; height: 72px !important; overflow: hidden !important; cursor: pointer !important; background: var(--ae-off) !important; border: 2px solid transparent !important; transition: border-color 0.2s !important; flex-shrink: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; } .media-gallery__thumbnail img, .media-gallery__thumbnails li img, img.product-media__thumbnail-image { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Active thumbnail — yellow border */ .media-gallery__thumbnail[aria-current="true"], .media-gallery__thumbnail.is-active, .media-gallery__thumbnail:focus, .media-gallery__thumbnails li.is-active { border-color: var(--ae-yellow) !important; outline: none !important; } /* Main image area */ .media-gallery__main, .media-gallery__featured-media, .product-media-gallery__main { overflow: hidden !important; background: var(--ae-off) !important; position: relative !important; flex: 1 !important; } img.product-media__image, .media-gallery__main img, .product-media--image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Remove Horizon's default rounded corners and shadows on media */ .product-media, .product-media-container, .media-gallery__item { border-radius: 0 !important; box-shadow: none !important; background: var(--ae-off) !important; } /* ── INFO COLUMN (right) ────────────────────────────────── */ /* Horizon wraps product info in .product-information__details */ .product-information__details, .product-information__content, .product__info-wrapper { padding: 52px 56px !important; border-left: 1px solid var(--ae-border) !important; overflow-y: auto !important; max-height: calc(100vh - 68px) !important; background: var(--ae-white) !important; font-family: 'Lato', sans-serif !important; font-weight: 300 !important; } /* Remove Horizon's default max-width constraints on info */ .product-information__details .container, .product-information__content .container, .product__info-container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; } /* ── PRODUCT TITLE ──────────────────────────────────────── */ .product__title, .product-information h1, .product-information__title { font-family: 'Oswald', sans-serif !important; font-size: clamp(32px, 4vw, 52px) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: -1px !important; line-height: 0.95 !important; color: var(--ae-black) !important; margin-bottom: 8px !important; } /* ── PRODUCT VENDOR / TYPE (line label) ─────────────────── */ .product__vendor, .product-information__vendor, .product-vendor { font-family: 'Oswald', sans-serif !important; font-size: 11px !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: var(--ae-yellow) !important; margin-bottom: 10px !important; display: flex !important; align-items: center !important; gap: 8px !important; } .product__vendor::before, .product-vendor::before { content: '' !important; width: 20px !important; height: 1px !important; background: var(--ae-yellow) !important; display: block !important; } /* ── PRICE ──────────────────────────────────────────────── */ .price__container, .product__price, .price-wrapper, .product-information .price { font-family: 'Oswald', sans-serif !important; margin-bottom: 28px !important; } .price .price__regular .price-item, .price__current, .price-item--regular, .product-information .price__amount { font-family: 'Oswald', sans-serif !important; font-size: 36px !important; font-weight: 600 !important; color: var(--ae-black) !important; line-height: 1 !important; } .price .price__sale .price-item--regular, .price__was, .price-item--regular.price-item--last { font-size: 14px !important; font-weight: 300 !important; color: var(--ae-mid) !important; text-decoration: line-through !important; } .price__badge-sale, .badge--sale { background: var(--ae-yellow) !important; color: var(--ae-black) !important; font-family: 'Oswald', sans-serif !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: 2px !important; text-transform: uppercase !important; border-radius: 0 !important; padding: 4px 10px !important; } /* ── VARIANT PICKER (option labels + selects/swatches) ──── */ /* Option label above each selector */ .product-form__option-label, .variant-picker__option-label, .product-form .form__label { font-family: 'Oswald', sans-serif !important; font-size: 11px !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--ae-mid) !important; margin-bottom: 8px !important; display: block !important; } /* Dropdown selects */ .product-form__input select, .variant-picker select, .select__select { font-family: 'Oswald', sans-serif !important; font-size: 13px !important; letter-spacing: 1px !important; text-transform: uppercase !important; border: 1px solid var(--ae-border) !important; border-radius: 0 !important; padding: 10px 16px !important; background: var(--ae-white) !important; color: var(--ae-black) !important; cursor: pointer !important; width: 100% !important; -webkit-appearance: none !important; appearance: none !important; } .product-form__input select:focus, .variant-picker select:focus, .select__select:focus { outline: none !important; border-color: var(--ae-black) !important; } /* Pill / swatch buttons */ .swatch-input__option, .variant-picker__option-values button, .product-form__input .button-option { border: 1px solid var(--ae-border) !important; border-radius: 0 !important; font-family: 'Oswald', sans-serif !important; font-size: 12px !important; letter-spacing: 1px !important; text-transform: uppercase !important; padding: 8px 16px !important; cursor: pointer !important; transition: border-color 0.2s, background 0.2s !important; background: var(--ae-white) !important; color: var(--ae-black) !important; } .swatch-input__option:hover, .variant-picker__option-values button:hover { border-color: var(--ae-black) !important; } .swatch-input__option[aria-checked="true"], .swatch-input__option.selected, .variant-picker__option-values button[aria-pressed="true"], .variant-picker__option-values button.selected { border-color: var(--ae-yellow) !important; border-width: 2px !important; background: var(--ae-off) !important; } /* ── QUANTITY SELECTOR ──────────────────────────────────── */ .quantity-wrapper, .product-form__quantity, .quantity { display: flex !important; align-items: center !important; border: 1px solid var(--ae-border) !important; border-radius: 0 !important; overflow: hidden !important; width: fit-content !important; } .quantity__button, .quantity-selector__button { width: 36px !important; height: 36px !important; background: none !important; border: none !important; border-radius: 0 !important; cursor: pointer !important; font-size: 16px !important; color: var(--ae-sub) !important; transition: background 0.2s !important; display: flex !important; align-items: center !important; justify-content: center !important; } .quantity__button:hover, .quantity-selector__button:hover { background: var(--ae-off) !important; } .quantity__input, .quantity-selector__input { width: 40px !important; text-align: center !important; font-family: 'Oswald', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; border: none !important; border-radius: 0 !important; background: none !important; color: var(--ae-black) !important; -moz-appearance: textfield !important; } .quantity__input::-webkit-outer-spin-button, .quantity__input::-webkit-inner-spin-button { -webkit-appearance: none !important; } /* ── ADD TO CART BUTTON ─────────────────────────────────── */ .product-form__submit, .product-form [type="submit"], .btn-add-to-cart, .product-form__cart-submit { width: 100% !important; font-family: 'Oswald', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 3px !important; text-transform: uppercase !important; background: var(--ae-black) !important; color: var(--ae-white) !important; border: none !important; border-radius: 0 !important; padding: 18px !important; cursor: pointer !important; transition: opacity 0.2s !important; margin-bottom: 10px !important; } .product-form__submit:hover, .product-form [type="submit"]:hover { opacity: 0.8 !important; background: var(--ae-black) !important; color: var(--ae-white) !important; } .product-form__submit[disabled], .product-form [type="submit"][disabled] { opacity: 0.4 !important; cursor: not-allowed !important; } /* Dynamic checkout buttons (Shop Pay, PayPal etc.) */ .shopify-payment-button__button, .dynamic-checkout__content { border-radius: 0 !important; } .shopify-payment-button__button--unbranded { background: var(--ae-off) !important; color: var(--ae-black) !important; font-family: 'Oswald', sans-serif !important; letter-spacing: 2px !important; text-transform: uppercase !important; border-radius: 0 !important; border: 1px solid var(--ae-border) !important; } /* ── PRODUCT DESCRIPTION TEXT ───────────────────────────── */ .product__description, .product-information__description, .product-description { font-size: 14px !important; color: var(--ae-sub) !important; line-height: 1.8 !important; margin-bottom: 24px !important; font-family: 'Lato', sans-serif !important; font-weight: 300 !important; } .product__description p, .product-description p { margin-bottom: 16px !important; font-size: 14px !important; color: var(--ae-sub) !important; line-height: 1.8 !important; } /* ── BREADCRUMB ─────────────────────────────────────────── */ .breadcrumbs, .breadcrumb, nav.breadcrumb { padding: 14px 52px !important; border-bottom: 1px solid var(--ae-border) !important; background: var(--ae-white) !important; font-family: 'Oswald', sans-serif !important; font-size: 11px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: var(--ae-mid) !important; } .breadcrumbs a, .breadcrumb a { color: var(--ae-mid) !important; text-decoration: none !important; transition: color 0.2s !important; } .breadcrumbs a:hover, .breadcrumb a:hover { color: var(--ae-black) !important; } .breadcrumbs__separator, .breadcrumb__separator { opacity: 0.4 !important; margin: 0 6px !important; } /* ── RATING / REVIEWS WIDGET ────────────────────────────── */ .product__rating, .star-rating, .product-reviews-summary { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 28px !important; padding-bottom: 28px !important; border-bottom: 1px solid var(--ae-border) !important; } .star-rating__stars, .rating-star { color: var(--ae-yellow) !important; font-size: 14px !important; letter-spacing: 2px !important; } .product__rating-count, .rating-count a { font-size: 13px !important; color: var(--ae-sub) !important; text-decoration: underline !important; text-underline-offset: 3px !important; } /* ── STOCK BADGE ────────────────────────────────────────── */ .product__availability, .inventory-status, .product-availability { font-size: 12px !important; font-weight: 700 !important; font-family: 'Lato', sans-serif !important; } .product__availability--in-stock, .inventory-status--in-stock { color: #27ae60 !important; } .product__availability--out-of-stock, .inventory-status--out-of-stock { color: #e74c3c !important; } /* ── PRODUCT FORM SPACING ───────────────────────────────── */ .product-form, .product-form__controls { display: flex !important; flex-direction: column !important; gap: 16px !important; } .product-form__option, .product-form__input { margin-bottom: 0 !important; } /* Remove Horizon's default rounded corners everywhere in the form */ .product-form *, .variant-picker * { border-radius: 0 !important; } /* ── COMPLEMENTARY PRODUCTS / UPSELL BLOCKS ─────────────── */ .product-complementary, .product__complementary { border-top: 1px solid var(--ae-border) !important; padding-top: 20px !important; } /* ── MOBILE RESPONSIVE ──────────────────────────────────── */ @media screen and (max-width: 768px) { .product-information__grid, .product-information--media-left { grid-template-columns: 1fr !important; min-height: auto !important; } .product-information__media, .product-information__media-wrapper { position: relative !important; top: 0 !important; height: auto !important; } .media-gallery__grid, .product-media-gallery { grid-template-columns: 1fr !important; } .media-gallery__thumbnails, .media-gallery__thumbnails-list { flex-direction: row !important; overflow-x: auto !important; overflow-y: hidden !important; width: 100% !important; height: auto !important; padding: 8px !important; gap: 6px !important; } .media-gallery__thumbnail, .media-gallery__thumbnails li { width: 64px !important; height: 60px !important; flex-shrink: 0 !important; } .media-gallery__main, .product-media-gallery__main { aspect-ratio: 4/3 !important; } .product-information__details, .product-information__content, .product__info-wrapper { padding: 32px 20px !important; max-height: none !important; overflow-y: visible !important; border-left: none !important; border-top: 1px solid var(--ae-border) !important; } nav.breadcrumb, .breadcrumbs { padding: 12px 20px !important; } } /* ── REMOVE HORIZON ANIMATIONS ON PRODUCT SECTION ──────── */ /* Horizon uses data-animate-in and scroll triggers — disable on product page */ .product-information [data-animate-in], .product-information .scroll-trigger { opacity: 1 !important; transform: none !important; transition: none !important; }