/** Shopify CDN: Minification failed Line 2804:34 Expected ":" Line 2829:14 Unexpected "=" Line 2829:41 Unterminated string token **/ /* ============================================= UNDERDOGS CUSTOM STYLES - REFACTORED Version: 2.3 Last updated: January 2025 Changes in v2.3: - Removed duplicate CLICKABLE HERO SECTION block - Fixed media query syntax error (501px;) - Consolidated duplicate body styles - Removed redundant iOS backdrop-filter rules - Improved organization and comments ============================================ */ /* ---------------------------------------- TABLE OF CONTENTS ----------------------------------------- 1. Fonts & Base ud-rewards-hero 2. Announcement Banner 3. Header 4. Hero Section 5. Waitlist Card 6. Benefits Section 7. Product Page 8. Policy Pages 9. Contact Drawer 10. Footer 11. Mobile Navigation 12. Menu Badges 13. Clickable Sections 14. Header Scroll Effects DESKTOP STYLES (min-width: 750px+) MOBILE STYLES (max-width: 749px and below) ---------------------------------------- */ /* ---------------------------------------- 1. FONTS & BASE ---------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700;800;900&family=Noto+Sans+Display:wght@400;500;600;700;800;900&display=swap'); html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; min-height: 100%; } body { background: var(--page-bg) !important; margin: 0; padding: 0; min-height: 100%; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } #MainContent, .main-content, main { background: #526359 !important; } html, body, #MainContent, main, .main-content { height: auto !important; scroll-snap-type: none !important; } .hero, .hero * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* iOS backdrop-filter fix */ @supports (-webkit-touch-callout: none) { #header-group, #header-group .header, #header-group .header-wrapper, #header-group .utility-bar, #header-component, header-component, .header, .header__row, .header__row--top, .header__row--mobile { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: none !important; } } /* ---------------------------------------- 2. ANNOUNCEMENT BANNER ---------------------------------------- */ .announcement-bar { background: rgb(26, 26, 26) !important; padding: 10px 0 !important; padding-top: env(safe-area-inset-top); margin-top: calc(-1 * env(safe-area-inset-top, 0px)); color: white; } .announcement-bar__message, .announcement-bar p { margin: 0 !important; padding: 0 !important; } /* ---------------------------------------- 3. HEADER ---------------------------------------- */ /* Hide header icons for pre-launch */ .header__icon--account, header .icon-account, header [href*="/account"], .header a[aria-label*="Account"], [href$="/account"], [href$="/account/login"], .header__icon, .icon-user, header [href*="/cart"], .icon-profile, .icon-person, .header a[aria-label*="Log in"], a[href*="account/login"], button[class*="account"], .header [class*="account"], .header [class*="user"], .header [class*="profile"], .header [class*="login"], .account-popover_icon, .account-popover__icon, [class*="account-popover"] { display: none !important; } /* Disable cart icon click */ .header__icon--cart, a[href="/cart"], a[href*="/cart"] { cursor: pointer; } .header__icon--cart, .header__icon--account, header .icon-account, header .icon-cart, header [href*="/cart"], header [href*="/account"], .header__action-list, .header__secondary-actions, header-component nav + div, header-component .header__actions, .header a[aria-label*="Cart"], .header a[aria-label*="Account"], .header a[aria-label*="Log in"], .header button[aria-label*="Cart"] { cursor: pointer; } /* Menu styling */ .menu__item a { font-family: 'Noto Sans', sans-serif; font-size: 12px; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 1px !important; text-decoration: none !important; white-space: nowrap; } .menu .menu__item.paragraph a { font-family: 'Noto Sans', sans-serif; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; } .menu__heading, .menu__heading__accordion { font-family: 'Noto Sans', sans-serif; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; } #header-group { background-color: #DDE8EB; } /* ======================================== MEGA MENU CHEVRON - CSS-ONLY (NO FLASH) ======================================== */ /* Hide the JS-injected chevron to prevent duplicates */ .mega-menu-trigger .mega-menu-trigger__chevron { display: none !important; } /* Add chevron via CSS for Learn menu item */ .header-menu .menu-list__link[href*="/learn"]::after, .header-menu .menu-list__link[href*="/blogs/learn"]::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: -0.8vw; vertical-align: middle; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpolygon points='0,2 10,2 5,8' fill='%23000000'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; transition: transform 0.2s ease; margin-right: 1.1vw; } /* White triangle for light header mode (only when not scrolled and mega menu closed) */ body.header-mode-light:not(.is-scrolled):not(.mega-menu-open) .header-menu .menu-list__link[href*="/learn"]::after, body.header-mode-light:not(.is-scrolled):not(.mega-menu-open) .header-menu .menu-list__link[href*="/blogs/learn"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpolygon points='0,2 10,2 5,8' fill='%23ffffff'/%3E%3C/svg%3E"); } /* Rotate triangle when menu is open */ .mega-menu-trigger.is-active .menu-list__link[href*="/learn"]::after, .mega-menu-trigger.is-active .menu-list__link[href*="/blogs/learn"]::after { transform: rotate(180deg); } /* ======================================== MEGA MENU ACTIVE STATE PERSISTENCE ======================================== */ /* Keep header white when mega menu is open */ body.mega-menu-open .header__row--top { background-color: #ffffff !important; } /* Keep chevron rotated when mega menu is visible (not just trigger hover) */ body.mega-menu-open .header-menu .menu-list__link[href*="/learn"]::after, body.mega-menu-open .header-menu .menu-list__link[href*="/blogs/learn"]::after { transform: rotate(180deg); } /* Also keep Learn link styled as active when mega menu is open */ body.mega-menu-open .header-menu .menu-list__link[href*="/learn"], body.mega-menu-open .header-menu .menu-list__link[href*="/blogs/learn"] { opacity: 1; } /* Ensure black triangle when mega menu forces white background */ body.mega-menu-open .header-menu .menu-list__link[href*="/learn"]::after, body.mega-menu-open .header-menu .menu-list__link[href*="/blogs/learn"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpolygon points='0,2 10,2 5,8' fill='%23000000'/%3E%3C/svg%3E"); } /* Fix for iOS Safari mobile menu gap */ .menu-drawer { min-height: 100vh; min-height: 100dvh; /* Dynamic viewport height - works in iOS 15.4+ */ min-height: -webkit-fill-available; /* Fallback for older Safari */ } /* Border radius and styling for blog post content images (excludes hero) */ .article-underdogs__content.rte img { border-radius: 12px; width: 100%; max-height: 440px; object-fit: cover; object-position: center; } /* Ensure the background covers the entire area */ @supports (-webkit-touch-callout: none) { /* iOS-specific fix */ .menu-drawer { min-height: -webkit-fill-available; padding-bottom: env(safe-area-inset-bottom); } } /* ---------------------------------------- 4. HERO SECTION ---------------------------------------- */ .hero, #Hero-template--20403238437121__hero_jVaWmY { position: relative; height: 80dvh !important; max-height: 990px !important; min-height: 640px !important; overflow: visible !important; } .hero__image, .hero__media-wrapper { display: none !important; } /* Hero background */ .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('/cdn/shop/files/hero-bg-desktop.jpg?v=1765251730'); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; } /* Remove header offset */ main > .shopify-section:first-child:not(.disable-section-top-offset) .spacing-style, .hero__container.spacing-style, .hero .spacing-style, .shopify-section.hero-wrapper .spacing-style { --section-top: 0px !important; --transparent-header-offset-boolean: 0 !important; } .hero__container { position: relative; z-index: 1; height: 100% !important; overflow: visible !important; } /* Hero typography - Preheading */ .hero .text-block:has(strong), .hero .group-block-content > .text-block:first-child { letter-spacing: 3px !important; font-size: 14px !important; font-weight: 600 !important; color: #313431 !important; text-transform: uppercase !important; margin-bottom: 8px !important; } .hero .text-block:has(strong) p, .hero .group-block-content > .text-block:first-child p { letter-spacing: 3px !important; font-size: 14px !important; font-weight: 600 !important; } /* Hero headline */ .hero .h1, .hero h1, .hero .text-block.h1 h1 { font-family: 'Noto Sans', sans-serif !important; font-weight: 900 !important; font-size: 62px !important; line-height: 1.05 !important; letter-spacing: -0.03em !important; color: #1a1a1a !important; margin: 0 0 16px 0 !important; text-shadow: none !important; } .hero .trademark { font-size: 0.35em; vertical-align: top; position: relative; top: 0.15em; margin-left: 0.02em; color: #1a1a1a; } /* Hero body text */ .hero .paragraph p, .hero .text-block.paragraph p, .hero .rte p { font-family: 'Noto Sans', sans-serif !important; font-size: 17px !important; font-weight: 500 !important; line-height: 1.6 !important; color: #313431 !important; max-width: 480px !important; text-shadow: none !important; } /* Hero product image */ .hero .image-block, .hero div:has(.hero-product-image) { overflow: visible !important; } .hero .image-block img, .hero-product-image { max-width: 500px; max-height: 85dvh; width: 100%; height: auto; object-fit: contain; } /* Learn More Link */ .hero-custom__learn-more { display: inline; margin-left: 4px; color: #1a1a1a; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: opacity 0.2s ease; } .hero-custom__learn-more:hover { opacity: 0.7; } /* ---------------------------------------- 5. WAITLIST CARD ---------------------------------------- */ .waitlist-countdown { position: relative; margin-top: 8px; margin-bottom: 20px; max-width: 500px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 12px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); padding: 20px 24px; padding-right: 140px; text-align: left; overflow: visible; } .countdown-container { display: flex; flex-direction: column; gap: 16px; } .countdown-content { display: flex; flex-direction: column; gap: 16px; } .countdown-icon { position: absolute; top: -25px; right: -20px; z-index: 10; } .countdown-icon img { width: 120px; height: auto; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.18)); transform: rotate(8deg); } .countdown-text { font-family: 'Noto Sans', sans-serif; font-size: 15px; font-weight: 500; color: #1a1a1a; line-height: 1.5; margin: 0; } .countdown-text strong { font-weight: 700; } .countdown-text a { color: #1a1a1a; text-decoration: underline; } /* Hide unused countdown elements */ .countdown-text-header, .countdown-text-disclaimer, .countdown-progress-wrapper, .countdown-progress-container, .countdown-progress-bar, .countdown-remaining, .countdown-number, .countdown-subtext { display: none; } /* Waitlist form */ .waitlist-countdown .waitlist-form { display: flex !important; flex-direction: row !important; gap: 10px !important; align-items: center !important; margin-top: 4px; } .waitlist-countdown input[type="email"] { flex: 1; background: #ffffff !important; border: 1px solid #e0e0e0 !important; border-radius: 8px !important; padding: 14px 16px !important; font-size: 14px !important; font-family: 'Noto Sans', sans-serif !important; font-weight: 400 !important; color: #1a1a1a !important; height: auto !important; min-height: 48px !important; box-sizing: border-box !important; box-shadow: none !important; animation: none !important; outline: none; } .waitlist-countdown input[type="email"]::placeholder { color: rgba(100, 100, 100, 0.6) !important; } .waitlist-countdown input[type="email"]:focus { border-color: #999 !important; } .waitlist-countdown button[type="submit"] { background-color: #2d2d2d !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; padding: 14px 24px !important; font-family: 'Noto Sans', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; cursor: pointer !important; white-space: nowrap !important; height: 48px !important; box-sizing: border-box !important; transition: background-color 0.2s ease !important; } .waitlist-countdown button[type="submit"]:hover { background-color: #1a1a1a !important; } /* ---------------------------------------- 6. BENEFITS SECTION ---------------------------------------- */ #shopify-section-template--20403238437121__section_GC473T, #shopify-section-template--20403238437121__section_GC473T .section-background, #shopify-section-template--20403238437121__section_GC473T .section { background: #526359 !important; } #shopify-section-template--20403238437121__section_GC473T .section-background { background: transparent !important; } #shopify-section-template--20403238437121__section_GC473T h1, #shopify-section-template--20403238437121__section_GC473T h2, #shopify-section-template--20403238437121__section_GC473T h3, #shopify-section-template--20403238437121__section_GC473T h4, #shopify-section-template--20403238437121__section_GC473T h5, #shopify-section-template--20403238437121__section_GC473T h6, #shopify-section-template--20403238437121__section_GC473T p, #shopify-section-template--20403238437121__section_GC473T span, #shopify-section-template--20403238437121__section_GC473T .text-block, #shopify-section-template--20403238437121__section_GC473T .rte { color: #1a1a1a !important; text-shadow: none !important; } #shopify-section-template--20403238437121__section_GC473T .section-content-wrapper { padding: 60px 20px !important; } #shopify-section-template--20403238437121__section_GC473T .section-content-wrapper > .group-block > .group-block-content.layout-panel-flex--row { display: flex !important; justify-content: space-between !important; gap: 0 !important; } #shopify-section-template--20403238437121__section_GC473T .section-content-wrapper > .group-block > .group-block-content.layout-panel-flex--row > .group-block { flex: 1 1 25% !important; min-width: 0 !important; padding: 0 20px !important; border-right: 1px solid rgba(0,0,0,0.1); } #shopify-section-template--20403238437121__section_GC473T .section-content-wrapper > .group-block > .group-block-content.layout-panel-flex--row > .group-block:first-child { padding-left: 0 !important; } #shopify-section-template--20403238437121__section_GC473T .section-content-wrapper > .group-block > .group-block-content.layout-panel-flex--row > .group-block:last-child { border-right: none; padding-right: 0 !important; } #shopify-section-template--20403238437121__section_GC473T .group-block-content.layout-panel-flex--row:has(.icon-block) { gap: 10px !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; } #shopify-section-template--20403238437121__section_GC473T h5 { font-family: 'Noto Sans', sans-serif !important; font-size: 1.2rem !important; font-weight: 900 !important; letter-spacing: -0.03em !important; margin-bottom: 8px !important; white-space: normal !important; line-height: 1.2 !important; } #shopify-section-template--20403238437121__section_GC473T .rte p, #shopify-section-template--20403238437121__section_GC473T .paragraph p { font-family: 'Noto Sans', sans-serif !important; font-size: 1rem !important; font-weight: 500 !important; line-height: 1.5 !important; opacity: 0.85; } #shopify-section-template--20403238437121__section_GC473T .icon-block img { width: 70px !important; height: auto !important; } /* ---------------------------------------- 7. PRODUCT PAGE ---------------------------------------- */ .product-custom__media { aspect-ratio: 1; overflow: hidden; background-color: #f5f5f5; position: relative; } .product-custom__media::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(245, 245, 245, 0.08); pointer-events: none; } /* ---------------------------------------- 8. POLICY PAGES ---------------------------------------- */ .template-policy .shopify-section--header, .template-policy header, .policy .shopify-section--header, .policy header { background-color: #E8F4F8 !important; } .template-policy .page-width, .template-policy main, .template-policy .main-content, .policy .page-width, .policy main, .policy .main-content, .policy__container { max-width: 1000px !important; width: 100% !important; padding-left: 40px !important; padding-right: 40px !important; } .template-policy h1, .policy h1:first-of-type, .shopify-policy__title h1 { font-family: 'Noto Sans', sans-serif !important; font-size: 40px !important; font-weight: 900 !important; letter-spacing: -0.03em !important; color: #1a1a1a !important; margin-bottom: 8px !important; text-transform: capitalize; text-align: left; padding-top: 20px; } .shopify-policy__container { max-width: 900px !important; margin: 0 auto; padding: 0 40px; } .shopify-policy__body { max-width: 100%; } .policy-page { font-family: 'Noto Sans', sans-serif; color: #1a1a1a; line-height: 1.7; } .policy-updated { font-size: 0.9rem; color: #666; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid #eee; } .policy-section { margin-bottom: 32px; } .policy-heading { font-family: 'Noto Sans', sans-serif !important; font-size: 1.3rem !important; font-weight: 900 !important; letter-spacing: -0.02em !important; margin-bottom: 16px !important; color: #1a1a1a !important; } .policy-page p { margin-bottom: 12px; font-weight: 500; } .policy-page ul { margin: 12px 0 16px 0; padding-left: 24px; } .policy-page li { margin-bottom: 8px; font-weight: 500; } .policy-page a { color: #1a1a1a; text-decoration: underline; } .policy-page a:hover { color: #E8B4B8; } .policy-important { background: #FFF5F5; border-left: 4px solid #E8B4B8; padding: 16px; margin: 16px 0; font-weight: 600; } .policy-legal { font-size: 0.9rem; color: #444; margin-bottom: 12px; } .policy-contact { background: #f9f9f9; padding: 16px; border-radius: 8px; } .policy-footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; font-style: italic; color: #666; } html { background: linear-gradient(to bottom, #1a1a1a, #fff); } /* Policy page background fixes */ body:has(.shopify-policy__container), html:has(.shopify-policy__container) { background: #ffffff !important; background-color: #ffffff !important; } .shopify-policy__container, .shopify-policy__body, .shopify-policy__title { background: #ffffff !important; background-color: #ffffff !important; } body:has(.shopify-policy__container) #MainContent, body:has(.shopify-policy__container) .content-for-layout, body:has(.shopify-policy__container) main { background: #ffffff !important; background-color: #ffffff !important; } body:has(.shopify-policy__container) .header__row, body:has(.shopify-policy__container) .header__row--top, body:has(.shopify-policy__container) .header__row--main, body:has(.shopify-policy__container) .header__row--bottom { background: transparent !important; background-color: transparent !important; } /* ---------------------------------------- 9. CONTACT DRAWER ---------------------------------------- */ .contact-drawer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .contact-drawer.is-open { pointer-events: auto; opacity: 1; visibility: visible; } .contact-drawer__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.3s ease; } .contact-drawer.is-open .contact-drawer__overlay { opacity: 1; } .contact-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: 100%; max-width: 500px; background: #ffffff; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15); transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; } .contact-drawer.is-open .contact-drawer__panel { transform: translateX(0); } .contact-drawer__close { position: absolute; top: 24px; right: 24px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: #1a1a1a; transition: all 0.2s ease; border-radius: 50%; z-index: 10; } .contact-drawer__close:hover { background: rgba(147, 197, 253, 0.1); color: #3b82f6; transform: rotate(90deg); } .contact-drawer__content { padding: 60px 40px 40px 40px; } .contact-drawer__heading { font-family: 'Noto Sans', sans-serif; font-weight: 900; font-size: 2rem; letter-spacing: -0.03em; color: #1a1a1a; margin-bottom: 20px; } .contact-drawer__subheading { font-family: 'Noto Sans', sans-serif; font-size: 1rem; font-weight: 500; color: #666; margin-bottom: 32px; } .contact-drawer__field { margin-bottom: 24px; } .contact-drawer__field label { font-family: 'Noto Sans Display', sans-serif; font-size: 16px; font-weight: 600; color: #1a1a1a; letter-spacing: 0; margin-bottom: 0; padding-bottom: 8px; display: block; } .contact-drawer__field input, .contact-drawer__field textarea { font-family: 'Noto Sans', sans-serif; width: 100%; background-color: #ffffff; border: 2px solid #d1d5db; border-radius: 8px; padding: 14px 16px; font-size: 16px; font-weight: 500; color: #1a1a1a; transition: all 0.3s ease; box-sizing: border-box; } .contact-drawer__field textarea { resize: vertical; min-height: 120px; } .contact-drawer__field input::placeholder, .contact-drawer__field textarea::placeholder { color: rgba(26, 26, 26, 0.5); font-weight: 500; } .contact-drawer__field input:focus, .contact-drawer__field textarea:focus { border-color: #76b3d0; outline: none; box-shadow: 0 0 0 4px rgba(146, 252, 234, 0.3); } .contact-drawer__select { font-family: 'Noto Sans', sans-serif; width: 100%; background-color: #ffffff; border: 2px solid #d1d5db; border-radius: 8px; padding: 14px 16px; padding-right: 40px; font-size: 16px; font-weight: 500; color: #1a1a1a; transition: all 0.3s ease; box-sizing: border-box; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px; } .contact-drawer__select:focus { border-color: #93c5fd; outline: none; box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.2); } .contact-drawer__select option { padding: 12px; font-weight: 500; } .contact-drawer__select option:disabled { color: rgba(26, 26, 26, 0.5); } .contact-drawer__submit { width: 100%; background-color: #2d2d2d; color: #ffffff; border: none; font-family: 'Noto Sans', sans-serif; font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: 0.00em; padding: 16px 40px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transform: translateY(0); border-bottom: 2px solid #76b3d0; } .contact-drawer__submit:hover { background-color: #1a1a1a; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); transform: translateY(-2px); } .contact-drawer__submit:active { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); transform: translateY(1px); } .contact-drawer__message { padding: 16px 20px; border-radius: 8px; margin-bottom: 24px; font-family: 'Noto Sans', sans-serif; font-weight: 600; display: flex; align-items: center; gap: 12px; } .contact-drawer__message--success { background-color: rgba(76, 175, 80, 0.1); border: 2px solid #4CAF50; color: #2e7d32; } .contact-drawer__message--error { background-color: rgba(244, 67, 54, 0.1); border: 2px solid #f44336; color: #c62828; } .contact-drawer__field label .required, .contact-page label .required, .template-page label .required { color: #d91656; margin-left: 2px; } .contact-drawer__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; } /* ---------------------------------------- 10. FOOTER ---------------------------------------- */ .footer, .shopify-section--footer, footer, .footer-section { position: relative; background-color: #ffffff !important; padding-bottom: env(safe-area-inset-bottom, 20px) !important; } .footer *, .shopify-section--footer *, footer *, .footer-section * { font-size: 0.85rem !important; } .footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6, .shopify-section--footer h1, .shopify-section--footer h2, .shopify-section--footer h3, .shopify-section--footer h4, .shopify-section--footer h5, .shopify-section--footer h6 { font-size: 1rem !important; } .footer a, .shopify-section--footer a, footer a, .footer-section a { color: #1a1a1a !important; text-decoration: none !important; white-space: nowrap !important; } .footer .link-list, .footer nav, .footer ul, .shopify-section--footer .link-list, .shopify-section--footer nav, .shopify-section--footer ul { display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; gap: 8px !important; padding: 0 !important; list-style: none !important; width: 100% !important; max-width: 100% !important; } .footer li, .shopify-section--footer li { margin: 0 !important; padding: 0 !important; flex-shrink: 0 !important; } /* Footer safe area extension */ .shopify-section--footer::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: env(safe-area-inset-bottom, 0px); background-color: #ffffff; transform: translateY(100%); } /* Footer text blocks */ .footer .layout-panel-flex--row > .text-block, .shopify-section--footer .layout-panel-flex--row > .text-block, .footer .group-block-content > .text-block, .shopify-section--footer .group-block-content > .text-block { flex: 0 0 auto !important; width: auto !important; max-width: none !important; } .layout-panel-flex--row:not(.mobile-column) > .text-block { flex: 0 !important; } .footer .group-block-content.layout-panel-flex--row, .shopify-section--footer .group-block-content.layout-panel-flex--row { --flex-wrap-mobile: nowrap !important; flex-wrap: nowrap !important; flex: 0 !important; } .footer .group-block, .shopify-section--footer .group-block { --size-style-width-mobile: auto !important; --size-style-width-mobile-min: auto !important; } .footer rte-formatter, .shopify-section--footer rte-formatter, .footer .text-block, .shopify-section--footer .text-block { flex: 0 0 auto !important; width: auto !important; max-width: none !important; } div.group-block-content.layout-panel-flex.layout-panel-flex--column.mobile-column > a > img { max-width: 90px !important; } /* ---------------------------------------- 11. MENU BADGES (Coming Soon, New, Sale) ---------------------------------------- */ .menu-badge { display: inline-block; font-family: 'Noto Sans', sans-serif; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px; margin-left: 8px; text-transform: uppercase; letter-spacing: 0.02em; vertical-align: middle; white-space: nowrap; } .menu-badge--coming-soon { background: rgb(59, 59, 59); color: rgb(241, 241, 241); } .menu-badge--new { background: #E8B4B8; color: #1a1a1a; } .menu-badge--sale { background: #c75b5b; color: #ffffff; } /* Badge sits closer to text (not pushed to right) */ .menu-drawer__menu-item:has(.menu-badge) { justify-content: flex-start !important; gap: 10px; } /* Disable coming soon link */ a[href="#"]:has(.menu-badge--coming-soon), .menu-drawer__menu-item:has(.menu-badge--coming-soon) { pointer-events: none; cursor: default; } /* Dim coming soon items */ a:has(.menu-badge--coming-soon), .menu-drawer__menu-item:has(.menu-badge--coming-soon) { opacity: 0.6; } /* ---------------------------------------- 12. CLICKABLE SECTIONS ---------------------------------------- */ .section-click-area { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } /* Keep interactive elements clickable above the overlay */ .underdogs-hero__form, .underdogs-hero__btn, .underdogs-hero__input, .flavor-vote, .vote-card, a:not(.section-click-area), button { z-index: 2; } /* Parent needs relative positioning */ .underdogs-hero { position: relative; } /* Full-coverage link overlay */ .underdogs-hero .section-click-area { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; display: block; } /* Let clicks pass through the content wrapper */ .underdogs-hero__content, .underdogs-hero__text { pointer-events: none; } /* Re-enable clicks ONLY on interactive elements */ .underdogs-hero__form, .underdogs-hero__btn, .underdogs-hero__input, .underdogs-hero__form-row, .underdogs-hero a:not(.section-click-area), .flavor-vote__container, .vote-card { pointer-events: auto; } /* ---------------------------------------- 13. HEADER SCROLL EFFECTS ---------------------------------------- */ /* Transitions */ header-component#header-component.header.header--compact, header-component#header-component.header, header-component#header-component, #header-component { transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter 0.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-backdrop-filter 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Inner rows - only on inner pages */ body.is-inner-page .header__row, body.is-inner-page .header__row--top, body.is-inner-page .header__row--mobile, body.is-inner-page .menu-list--mobile { background: rgb(255 255 255 / 0.8) !important; background-color: rgb(255 255 255 / 0.8) !important; backdrop-filter: blur(10px) saturate(180%) !important; -webkit-backdrop-filter: blur(10px) saturate(180%) !important; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.04), 0 4px 20px -4px rgba(0, 0, 0, 0.06) !important; transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter 0.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-backdrop-filter 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Inner rows - only on inner pages, not scrolled */ body.is-inner-page:not(.is-scrolled) .header__row, body.is-inner-page:not(.is-scrolled) .header__row--top, body.is-inner-page:not(.is-scrolled) .header__row--mobile, body.is-inner-page:not(.is-scrolled) .menu-list--mobile { background: rgb(255, 255, 255) !important; background-color: rgb(255, 255, 255) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } /* Inner rows - HOMEPAGE at top only */ body.is-homepage:not(.is-scrolled) .header__row, body.is-homepage:not(.is-scrolled) .header__row--top, body.is-homepage:not(.is-scrolled) .header__row--mobile, body.is-homepage:not(.is-scrolled) .menu-list--mobile { background: transparent !important; background-color: transparent !important; } /* Inner rows - homepage when scrolled */ body.is-homepage.is-scrolled .header__row, body.is-homepage.is-scrolled .header__row--top, body.is-homepage.is-scrolled .header__row--mobile, body.is-homepage.is-scrolled .menu-list--mobile { background: rgba(255, 255, 255, 0.4) !important; background-color: rgba(255, 255, 255, 0.4) !important; } /* INNER PAGES: Solid white default */ body.is-inner-page header-component#header-component.header.header--compact, body.is-inner-page header-component#header-component.header, body.is-inner-page header-component#header-component, body.is-inner-page #header-component { background: rgb(0, 0, 0) !important; background-color: rgb(0, 0, 0) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } /* REWARDS PAGE: Transparent header at top (not scrolled) */ body.is-rewards-page:not(.is-scrolled) header-component#header-component.header.header--compact, body.is-rewards-page:not(.is-scrolled) header-component#header-component.header, body.is-rewards-page:not(.is-scrolled) header-component#header-component, body.is-rewards-page:not(.is-scrolled) #header-component { background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } body.is-rewards-page:not(.is-scrolled) .header__row, body.is-rewards-page:not(.is-scrolled) .header__row--top, body.is-rewards-page:not(.is-scrolled) .header__row--mobile, body.is-rewards-page:not(.is-scrolled) .menu-list--mobile { background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } /* ── HEADER-MODE-LIGHT: White text/icons on dark backgrounds ── */ /* Not scrolled + no mega menu → white text and white-outline icons (logo unchanged) */ body.header-mode-light:not(.is-scrolled):not(.mega-menu-open) .header a, body.header-mode-light:not(.is-scrolled):not(.mega-menu-open) .header button, body.header-mode-light:not(.is-scrolled):not(.mega-menu-open) .header__row--top a, body.header-mode-light:not(.is-scrolled):not(.mega-menu-open) .header__row--top button, body.header-mode-light:not(.is-scrolled):not(.mega-menu-open) .header__row--top .header__icon, body.header-mode-light:not(.is-scrolled):not(.mega-menu-open) .header__row--top .nav-link, body.header-mode-light:not(.is-scrolled):not(.mega-menu-open) .header__row--top .header__menu-item, body.header-mode-light:not(.is-scrolled):not(.mega-menu-open) .header-menu .menu-list__link, body.header-mode-light:not(.is-scrolled):not(.mega-menu-open) .header-menu .menu-list__link span { color: #ffffff !important; transition: color 0.3s ease; } /* SVG icons: white stroke outline, no fill */ body.header-mode-light:not(.is-scrolled):not(.mega-menu-open) .header svg:not(.header__logo svg), body.header-mode-light:not(.is-scrolled):not(.mega-menu-open) .header__row--top svg { color: #ffffff !important; stroke: #ffffff !important; fill: none !important; transition: color 0.3s ease, stroke 0.3s ease, fill 0.3s ease; } body.header-mode-light:not(.is-scrolled):not(.mega-menu-open) .header path:not(.header__logo path), body.header-mode-light:not(.is-scrolled):not(.mega-menu-open) .header__row--top path { stroke: #ffffff !important; fill: none !important; transition: stroke 0.3s ease, fill 0.3s ease; } /* Scrolled or mega menu open → revert to defaults */ body.header-mode-light.is-scrolled .header a, body.header-mode-light.is-scrolled .header button, body.header-mode-light.is-scrolled .header__row--top a, body.header-mode-light.is-scrolled .header__row--top button, body.header-mode-light.is-scrolled .header__row--top .header__icon, body.header-mode-light.is-scrolled .header__row--top .nav-link, body.header-mode-light.is-scrolled .header__row--top .header__menu-item, body.header-mode-light.is-scrolled .header-menu .menu-list__link, body.header-mode-light.is-scrolled .header-menu .menu-list__link span, body.header-mode-light.mega-menu-open .header a, body.header-mode-light.mega-menu-open .header button, body.header-mode-light.mega-menu-open .header__row--top a, body.header-mode-light.mega-menu-open .header__row--top button, body.header-mode-light.mega-menu-open .header__row--top .header__icon, body.header-mode-light.mega-menu-open .header__row--top .nav-link, body.header-mode-light.mega-menu-open .header__row--top .header__menu-item, body.header-mode-light.mega-menu-open .header-menu .menu-list__link, body.header-mode-light.mega-menu-open .header-menu .menu-list__link span { color: #1a1a1a !important; } body.header-mode-light.is-scrolled .header svg, body.header-mode-light.is-scrolled .header__row--top svg, body.header-mode-light.mega-menu-open .header svg, body.header-mode-light.mega-menu-open .header__row--top svg { color: #1a1a1a !important; stroke: currentColor !important; fill: none !important; } body.header-mode-light.is-scrolled .header path, body.header-mode-light.is-scrolled .header__row--top path, body.header-mode-light.mega-menu-open .header path, body.header-mode-light.mega-menu-open .header__row--top path { stroke: currentColor !important; fill: none !important; } /* REWARDS PAGE: Pull hero banner up behind transparent header */ body.is-rewards-page .ud-dash-wrapper { margin-top: calc(-1 * var(--header-height, 103px)) !important; } body.is-rewards-page .ud-hero-banner { padding-top: var(--header-height, 103px); } /* HOMEPAGE: Transparent default (not scrolled) */ body.is-homepage:not(.is-scrolled) header-component#header-component.header.header--compact, body.is-homepage:not(.is-scrolled) header-component#header-component.header, body.is-homepage:not(.is-scrolled) header-component#header-component, body.is-homepage:not(.is-scrolled) #header-component { background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } /* SCROLLED: Semi-transparent blur (ALL pages) */ body.is-scrolled header-component#header-component.header.header--compact, body.is-scrolled header-component#header-component.header, body.is-scrolled header-component#header-component, body.is-scrolled #header-component, body.is-inner-page.is-scrolled header-component#header-component.header.header--compact, body.is-inner-page.is-scrolled header-component#header-component.header, body.is-inner-page.is-scrolled header-component#header-component, body.is-inner-page.is-scrolled #header-component, body.is-homepage.is-scrolled header-component#header-component.header.header--compact, body.is-homepage.is-scrolled header-component#header-component.header, body.is-homepage.is-scrolled header-component#header-component, body.is-homepage.is-scrolled #header-component { background: rgba(255, 255, 255, 0.88) !important; background-color: rgba(255, 255, 255, 0.88) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.04), 0 4px 20px -4px rgba(0, 0, 0, 0.06) !important; } /* LOGO SCALE ON SCROLL */ .header-logo, .header-logo img, .header-logo__image { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; } body.is-scrolled .header-logo, body.is-scrolled .header-logo img, body.is-scrolled .header-logo__image { transform: scale(0.92); } /* REDUCED MOTION */ @media (prefers-reduced-motion: reduce) { header-component, #header-component, .header__row, .header-logo, .header-logo img { transition: none !important; } } /* ---------------------------------------- 14. OVERFLOW FIXES ---------------------------------------- */ .product-showcase { overflow-x: hidden; } .ingredients-science { overflow-x: hidden; } .ingredients-science__carousel-wrapper, .ingredients-science__fg-gummies, .ingredients-science__bg-gummies { max-width: 100%; overflow-x: hidden; } /* ======================================== DESKTOP STYLES (min-width: 750px) ======================================== */ @media screen and (min-width: 750px) { body { background: #ffffff !important; } /* Hero two-column layout */ .hero__content-wrapper { display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; align-content: center; height: 100% !important; max-height: 100% !important; padding: 40px 60px !important; gap: 12px 40px !important; box-sizing: border-box !important; } /* Text content - left column */ .hero__content-wrapper > .group-block { grid-column: 1; grid-row: 1; align-self: end; } /* Waitlist card - below text, left column */ .hero__content-wrapper > div:has(.waitlist-countdown) { grid-column: 1; grid-row: 2; align-self: start; } /* Product image - right column, spans both rows */ .hero__content-wrapper > .image-block, .hero__content-wrapper > div:has(.hero-product-image) { grid-column: 2; grid-row: 1 / 3; display: flex; justify-content: center; align-items: flex-start; padding-top: 0px; max-height: 100%; } } /* ======================================== LARGE DESKTOP (min-width: 990px) ======================================== */ @media screen and (min-width: 990px) { .header__heading-logo { max-width: 100px; } .header-logo__image { --header-logo-image-width: 90px; max-width: 90px; } .header-logo { max-width: 90px; } .header-logo__image { height: auto; } /* Desktop header alignment */ .header__row--top .header__columns, .header__row--top { display: grid !important; } .header__column--left { justify-self: end; justify-content: flex-start !important; padding-left: 1%; } .header-menu, .header-menu__inner, .menu-list { justify-content: flex-end !important; } /* Desktop menu text styling */ .menu-list__link-title { font-family: 'Noto Sans', sans-serif !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #1a1a1a !important; margin-left: 1.1vw; margin-right: 1.1vw; } .menu-list__link .menu-list__link-title { opacity: 0.7; } .menu-list__link:hover .menu-list__link-title { opacity: 1; } .menu-list__link--active .menu-list__link-title { color: rgb(0, 0, 0) !important; opacity: 1 !important; } /* Active page underline indicator */ .menu-list__link--active .menu-list__link-title::after { content: ''; display: block; width: 100%; height: 2px; background: #1a1a1a; border-radius: 1px; margin-top: 3px; } /* Light header mode - white underline */ body.header-mode-light:not(.is-scrolled):not(.mega-menu-open) .menu-list__link--active .menu-list__link-title::after { background: #ffffff; } .menu-list__link { display: flex; align-items: center; } .menu-badge { font-size: 9px; padding: 3px 8px; } } /* Desktop nav - shrink menu spacing at narrower widths to prevent "More" overflow */ @media screen and (min-width: 990px) and (max-width: 1199px) { .header-menu .overflow-menu::part(list) { column-gap: 0.2rem !important; } .menu-list__link-title { margin-left: 0.6vw !important; margin-right: 0.6vw !important; font-size: 13px !important; } } @media screen and (min-width: 1200px) and (max-width: 1399px) { .header-menu .overflow-menu::part(list) { column-gap: 0.4rem !important; } .menu-list__link-title { margin-left: 0.9vw !important; margin-right: 0.9vw !important; } } /* Fix mobile menu scrolling when Learn submenu is expanded */ .menu-drawer:has(details[open]) { overflow: auto !important; max-height: 100dvh; } /* For iOS Safari compatibility */ @supports (-webkit-touch-callout: none) { .menu-drawer:has(details[open]) { overflow-y: scroll; -webkit-overflow-scrolling: touch; } } /* ======================================== TABLET/MOBILE (max-width: 989px) ======================================== */ @media screen and (max-width: 989px) { /* Hide the inline menu text on mobile */ .header-menu, .header__column--center .menu-list, .header__row--top .header-menu, .menu-list { display: none !important; } /* Show the hamburger drawer trigger */ .header-drawer, .header__drawer, header-drawer { display: flex !important; } /* Hamburger icon styling */ .header__icon--menu, .header__icon--summary { display: flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 12px !important; background: transparent; border: none; cursor: pointer; } .header__icon--menu svg, .header-drawer-icon svg { width: 20px; height: 20px; stroke: #1a1a1a; } /* Bigger hamburger icon */ .header-drawer-icon.header-drawer-icon--open { transform: scale(1.8); transform-origin: center center; } /* Position header for mobile - logo center, hamburger left */ .header__row--top { display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center; padding: 12px 20px; } .header__column--left { justify-self: start; } .header__column--center { justify-self: center; } .header__column--right { justify-self: end; } /* Hide any nav bar below header if showing */ .header__row--bottom, .navigation-bar { display: none !important; } /* Make drawer full viewport width */ .menu-drawer { width: 100vw !important; max-width: 100vw !important; min-height: 100vh !important; min-height: 100dvh !important; min-height: -webkit-fill-available !important; height: auto !important; background: #ffffff !important; padding: 0 !important; padding-bottom: env(safe-area-inset-bottom, 20px) !important; transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1) !important; box-sizing: border-box !important; } /* When open */ .menu-drawer-container[open] .menu-drawer { transform: translateX(0); } /* Backdrop */ .menu-drawer__backdrop { background: rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.3s ease; } .menu-drawer-container[open] .menu-drawer__backdrop { opacity: 1; } /* Close button - top right */ .menu-drawer__close-button { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent !important; border: none !important; color: #1a1a1a; z-index: 10; padding: 0; } .menu-drawer__close-button svg { width: 20px; height: 20px; stroke-width: 2px; } /* Navigation container */ .menu-drawer__navigation { padding: 80px 24px 40px !important; height: 100%; overflow-y: auto; } /* Menu list */ .menu-drawer__menu { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; } /* Individual menu items */ .menu-drawer__menu-item { display: flex; align-items: center; padding: 20px 0; text-decoration: none !important; color: #1a1a1a !important; font-family: 'Noto Sans', sans-serif; font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.02em; transition: opacity 0.2s ease; gap: 10px; } .menu-drawer__menu-item:first-child { border-top: none; } .menu-drawer__menu-item:hover, .menu-drawer__menu-item:active { opacity: 0.6; } /* Active page indicator - mobile nav */ .menu-drawer__menu-item--active { opacity: 1 !important; font-weight: 800 !important; } .menu-drawer__menu-item--active .menu-drawer__menu-item-text { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } /* Menu item text */ .menu-drawer__menu-item-text { font-weight: 700 !important; text-transform: none !important; } /* Add chevron arrow to menu items (only if no badge)*/ .menu-drawer__menu-item:not(:has(.menu-badge))::after { content: ''; width: 10px; height: 10px; border-right: 2px solid #1a1a1a; border-bottom: 2px solid #1a1a1a; transform: rotate(-45deg); flex-shrink: 0; margin-left: auto; opacity: 0.4; transition: transform 0.2s ease, opacity 0.2s ease; margin-left: -1vw !important; margin-right: 1.1vw; } .menu-drawer__menu-item:not(:has(.menu-badge)):hover::after { transform: rotate(-45deg) translateX(3px) translateY(3px); opacity: 0.9; } /* Hide default icons/arrows if theme has them */ .menu-drawer__menu-item > svg:not(.menu-badge), .menu-drawer__menu-item > .icon { display: none !important; } /* Stagger animation for menu items */ .menu-drawer__list-item { opacity: 0; transform: translateX(-20px); transition: opacity 0.3s ease, transform 0.3s ease; } .menu-drawer-container[open] .menu-drawer__list-item { opacity: 1; transform: translateX(0); } /* Stagger delays */ .menu-drawer-container[open] .menu-drawer__list-item:nth-child(1) { transition-delay: 0.1s; } .menu-drawer-container[open] .menu-drawer__list-item:nth-child(2) { transition-delay: 0.15s; } .menu-drawer-container[open] .menu-drawer__list-item:nth-child(3) { transition-delay: 0.2s; } .menu-drawer-container[open] .menu-drawer__list-item:nth-child(4) { transition-delay: 0.25s; } .menu-drawer-container[open] .menu-drawer__list-item:nth-child(5) { transition-delay: 0.3s; } /* Mobile drawer badge */ .menu-drawer .menu-badge { font-size: 11px; padding: 4px 10px; } /* Utility links at bottom .menu-drawer__utility-links { margin-top: auto; padding: 24px 0; border-top: 1px solid #f0f0f0; } */ .header-drawer-icon--open { transition: opacity 0.2s ease; } .menu-drawer-container[open] .header-drawer-icon--open { opacity: 0; } /* Mobile inner pages - solid white before scroll */ body.is-inner-page:not(.is-scrolled) .header__row--mobile, body.is-inner-page:not(.is-scrolled) .menu-list--mobile, body.is-inner-page:not(.is-scrolled) header-component#header-component.header.header--compact, body.is-inner-page:not(.is-scrolled) header-component#header-component, body.is-inner-page:not(.is-scrolled) #header-component { background: rgb(255, 255, 255) !important; background-color: rgb(255, 255, 255) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Scrolled header on mobile */ body.is-scrolled header-component#header-component.header.header--compact, body.is-scrolled header-component#header-component.header, body.is-scrolled header-component#header-component, body.is-scrolled #header-component, body.is-inner-page.is-scrolled header-component#header-component.header.header--compact, body.is-inner-page.is-scrolled header-component#header-component, body.is-homepage.is-scrolled header-component#header-component.header.header--compact, body.is-homepage.is-scrolled header-component#header-component { background: rgba(255, 255, 255, 0.6) !important; background-color: rgba(255, 255, 255, 0.6) !important; backdrop-filter: blur(16px) saturate(180%) !important; -webkit-backdrop-filter: blur(16px) saturate(180%) !important; } } .citation-link::after { content: " ↗"; font-size: 0.85em; margin-left: 0.2em; opacity: 0.7; } /* iOS notch/status-bar area above the announcement bar */ @media (max-width: 749px) { .announcement-bar { position: relative; } .announcement-bar::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: #000; z-index: 999999; pointer-events: none; } } /* ======================================== MOBILE MENU - LEARN CHEVRON STYLES ======================================== */ /* Hide the plus/minus icon on Learn menu item */ .menu-drawer__menu-item[id*="learn"] .icon-plus, .menu-drawer__menu-item[id*="Learn"] .icon-plus, #HeaderDrawer-learn .icon-plus, #HeaderDrawer-learn-mega .icon-plus, #Details-menu-drawer-learn .icon-plus, #Details-menu-drawer-learn-mega .icon-plus { display: none !important; } /* Hide the right-pointing chevron on Learn (if present) */ .menu-drawer [id*="learn"] > .menu-drawer__menu-item::after, .menu-drawer details[id*="learn"] > summary::after { display: none !important; } /* Add down-pointing triangle to Learn menu item */ .menu-drawer__menu-item[id*="learn"] .menu-drawer__menu-item-text::after, .menu-drawer__menu-item[id*="Learn"] .menu-drawer__menu-item-text::after, #HeaderDrawer-learn .menu-drawer__menu-item-text::after, #HeaderDrawer-learn-mega .menu-drawer__menu-item-text::after { content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 8px; vertical-align: middle; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpolygon points='0,2 10,2 5,8' fill='%23000000'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; transition: transform 0.3s ease; } /* Rotate triangle when Learn accordion is open */ .menu-drawer details[id*="learn"][open] > summary .menu-drawer__menu-item-text::after, .menu-drawer details[id*="Learn"][open] > summary .menu-drawer__menu-item-text::after, #Details-menu-drawer-learn[open] .menu-drawer__menu-item-text::after, #Details-menu-drawer-learn-mega[open] .menu-drawer__menu-item-text::after { transform: rotate(180deg); } /* Energy Gummies arrow - show right chevron (matching The Club) */ /* ======================================== MOBILE MENU - HIDE DUPLICATE NAV ITEMS ======================================== */ /* Hide the original Articles and FAQs child links when mega menu content is present */ .menu-drawer details[id*="learn"] .menu-drawer__menu--childlist > li:not(.mobile-mega-menu-learn-wrapper), #Details-menu-drawer-learn .menu-drawer__menu--childlist > li:not(.mobile-mega-menu-learn-wrapper), #Details-menu-drawer-learn-mega .menu-drawer__menu--childlist > li:not(.mobile-mega-menu-learn-wrapper) { display: none !important; } /* But keep the mega menu wrapper visible */ .menu-drawer .mobile-mega-menu-learn-wrapper { display: block !important; } /* Remove triangles from Articles and FAQs since they're now hidden anyway */ /* (backup in case the above doesn't fully work) */ #HeaderDrawer-learn-articles .menu-drawer__menu-item-text::after, #HeaderDrawer-learn-faqs .menu-drawer__menu-item-text::after { display: none !important; } /* ======================================== MOBILE STYLES (max-width: 749px) ======================================== */ @media screen and (max-width: 749px) { /* Announcement Banner */ .announcement-bar { padding: 10px 0 !important; text-align: center !important; } .announcement-bar__message, .announcement-bar p, .announcement-bar span, .announcement-bar strong { font-size: 12px !important; white-space: normal !important; line-height: 1.3 !important; text-align: center !important; display: block !important; width: 100% !important; font-weight: 600; letter-spacing: 0.1em; } /* Header logo */ .header-logo img, .header__logo img { max-width: 60px !important; height: auto !important; } /* Hero */ .hero::before { background-image: url('/cdn/shop/files/hero-bg-mobile.jpg?v=1765251729'); background-position: top center; } .hero, #Hero-template--20403238437121__hero_jVaWmY { min-height: auto !important; } .hero__content-wrapper { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 100px 24px 40px !important; gap: 4px !important; } .hero .text-block:has(strong) p, .hero .group-block-content > .text-block:first-child p { letter-spacing: 4px !important; font-size: 13px !important; text-align: center !important; } .hero .h1, .hero h1, .hero .text-block.h1 h1 { font-size: 48px !important; text-align: center !important; } .hero .paragraph p, .hero .text-block.paragraph p, .hero .rte p { font-size: 16px !important; text-align: center !important; max-width: 100% !important; } .hero .group-block-content { align-items: center !important; } .hero .image-block, .hero div:has(.hero-product-image) { order: 1; width: 100%; display: flex; justify-content: center; } .hero .image-block img, .hero-product-image { max-width: 320px; } /* Waitlist - Mobile simple style */ .waitlist-countdown { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 24px 0 40px !important; margin-top: 16px; max-width: 100%; order: 3; } .countdown-icon { display: none; } .countdown-container { align-items: center; } .countdown-content { align-items: center; width: 100%; max-width: 400px; } .countdown-text { font-size: 16px; text-align: center; margin-bottom: 8px; } .waitlist-countdown .waitlist-form { width: 100%; flex-direction: row !important; gap: 8px !important; } .waitlist-countdown input[type="email"] { flex: 1; min-width: 0; padding: 14px 16px !important; } .waitlist-countdown button[type="submit"] { padding: 14px 20px !important; flex-shrink: 0; } /* Benefits Section */ #shopify-section-template--20403238437121__section_GC473T .section-content-wrapper { padding: 40px 24px !important; } #shopify-section-template--20403238437121__section_GC473T .section-content-wrapper > .group-block > .group-block-content.layout-panel-flex--row { flex-direction: column !important; gap: 32px !important; } #shopify-section-template--20403238437121__section_GC473T .section-content-wrapper > .group-block > .group-block-content.layout-panel-flex--row > .group-block { width: 100% !important; text-align: center; padding: 0 !important; border-right: none !important; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 24px !important; } #shopify-section-template--20403238437121__section_GC473T .section-content-wrapper > .group-block > .group-block-content.layout-panel-flex--row > .group-block:last-child { border-bottom: none; padding-bottom: 0 !important; } #shopify-section-template--20403238437121__section_GC473T h5, #shopify-section-template--20403238437121__section_GC473T p, #shopify-section-template--20403238437121__section_GC473T .text-block, #shopify-section-template--20403238437121__section_GC473T .rte, #shopify-section-template--20403238437121__section_GC473T .rte p, #shopify-section-template--20403238437121__section_GC473T .paragraph p { text-align: center !important; } #shopify-section-template--20403238437121__section_GC473T .group-block-content.layout-panel-flex--row:has(.icon-block) { justify-content: center !important; } #shopify-section-template--20403238437121__section_GC473T h5 { font-size: 1.25rem !important; } #shopify-section-template--20403238437121__section_GC473T .rte p, #shopify-section-template--20403238437121__section_GC473T .paragraph p { font-size: 0.95rem !important; } #shopify-section-template--20403238437121__section_GC473T .icon-block img { width: 56px !important; } /* Policy Pages */ .template-policy .page-width, .template-policy main, .policy .page-width, .policy main, .policy__container { padding-left: 20px !important; padding-right: 20px !important; } .template-policy h1, .policy h1:first-of-type, .shopify-policy__title h1 { font-size: 1.75rem !important; } .policy-heading { font-size: 1.1rem !important; } .policy-page p, .policy-page li { font-size: 0.95rem; } /* Contact Drawer - Bottom sheet style */ .contact-drawer__panel { top: auto; right: 0; bottom: 0; left: 0; max-width: 100%; max-height: 90dvh; border-radius: 20px 20px 0 0; transform: translateY(100%); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15); } .contact-drawer.is-open .contact-drawer__panel { transform: translateY(0); } .contact-drawer__panel::before { content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; background: #d1d5db; border-radius: 2px; } .contact-drawer__content { padding: 48px 24px 32px 24px; max-height: calc(90dvh - 48px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .contact-drawer__close { top: 16px; right: 16px; width: 36px; height: 36px; } .contact-drawer__heading { font-size: 1.5rem; margin-bottom: 6px; } .contact-drawer__subheading { font-size: 0.9rem; margin-bottom: 24px; } .contact-drawer__field { margin-bottom: 20px; } .contact-drawer__field label { font-size: 15px; padding-bottom: 6px; } .contact-drawer__field input, .contact-drawer__field textarea, .contact-drawer__select { font-size: 16px; padding: 12px 14px; } .contact-drawer__select { padding-right: 36px; } .contact-drawer__field textarea { min-height: 100px; } .contact-drawer__submit { padding: 14px 32px; margin-bottom: env(safe-area-inset-bottom, 0); } .contact-drawer__message { padding: 12px 16px; margin-bottom: 20px; font-size: 0.9rem; } /* Footer */ .footer .link-list, .footer nav, .footer ul, .shopify-section--footer .link-list, .shopify-section--footer nav, .shopify-section--footer ul { gap: 6px !important; } .footer a, .shopify-section--footer a { font-size: 0.75rem !important; } .footer p, .footer .rte, .footer .text-block, .shopify-section--footer p, .shopify-section--footer .rte, .shopify-section--footer .text-block { max-width: 100% !important; width: 100% !important; padding-left: 32px !important; padding-right: 32px !important; box-sizing: border-box !important; } } /* ======================================== SMALL MOBILE (max-width: 501px) ======================================== */ @media screen and (max-width: 501px) { div.group-block-content.layout-panel-flex.layout-panel-flex--column.mobile-column > a > img { max-width: 60px !important; } } /* ======================================== SMALL MOBILE (max-width: 480px) ======================================== */ @media screen and (max-width: 480px) { .hero .h1, .hero h1, .hero .text-block.h1 h1 { font-size: 38px !important; } } /* ======================================== EXTRA SMALL MOBILE (max-width: 400px) ======================================== */ @media screen and (max-width: 400px) { .waitlist-countdown button[type="submit"] { padding: 14px 16px !important; font-size: 12px !important; } } /* ======================================== TINY MOBILE (max-width: 380px) ======================================== */ @media screen and (max-width: 380px) { .contact-drawer__content { padding: 40px 20px 24px 20px; } .contact-drawer__heading { font-size: 1.25rem; } .contact-drawer__field label { font-size: 14px; } .footer a, .shopify-section--footer a { font-size: 0.7rem !important; } .footer .link-list, .footer nav, .footer ul, .shopify-section--footer .link-list, .shopify-section--footer nav, .shopify-section--footer ul { gap: 4px !important; } } /* JUDGE.ME REVIEWS: Full-width white background */ #judgeme_product_reviews { background-color: #ffffff; } [id*="176973709375e7a1ad"] { background-color: #ffffff !important; } [id*="176973709375e7a1ad"] .section, [id*="176973709375e7a1ad"] .custom-section-background { background-color: #ffffff !important; } .jm-text[data-v-6d928e9f] { font-family: 'Noto Sans', sans-serif; font-size: 26px !important; font-weight: 900 !important; letter-spacing: -0.02em; } #judgeme_product_reviews > div > div.jm-stack.jm-stack--space-600.jm-review-widget__header.jm-review-widget-minimal-header > div.jm-center.jm-center--center-text.jm-center--intrinsic.jm-no-reviews-state > div > p { font-size: 18px; font-weight: 500; } #judgeme_product_reviews > div > div > div.jm-loading-overlay.jm-review-widget__body > div > p { display: none; } #judgeme_product_reviews > div > div > div.jm-stack.jm-stack--space-600.jm-review-widget__header.jm-review-widget-minimal-header > div.jm-center.jm-center--center-text.jm-center--intrinsic.jm-no-reviews-state > div > p{ font-size: 16px !important; font-weight: 500 !important; letter-spacing: 0em; } #judgeme_product_reviews > div > div > div.jm-stack.jm-stack--space-600.jm-review-widget__header.jm-review-widget-minimal-header > div.jm-center.jm-center--center-text.jm-center--intrinsic.jm-no-reviews-state > div > div > div > button { padding: 18px; border-radius: 50px; text-transform: uppercase; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; background-color: #252525; border: none; } #judgeme_product_reviews > div > div > div.jm-stack.jm-stack--space-600.jm-review-widget__header.jm-review-widget-minimal-header > div.jm-center.jm-center--center-text.jm-center--intrinsic.jm-no-reviews-state { padding: 40px 30%; background: rgb(246, 246, 246); border-radius: 12px; } body > div.jdgm-review-widget-modal.jdgm-write-review-modal > div.jdgm-write-review-modal__container > div { border-radius: 20px; } body > div.jdgm-review-widget-modal.jdgm-write-review-modal > div.jdgm-write-review-modal__container > div > div > div.jdgm-write-review-modal__section.jdgm-write-review-modal__section--review-form-intro.current-section > div > div.jdgm-write-review-modal__page-header > div.jdgm-write-review-modal__title { font-weight: 900 !important; font-size: 26px !important; letter-spacing: -0.01em; } body > div.jdgm-review-widget-modal.jdgm-write-review-modal > div.jdgm-write-review-modal__container > div > div > div.jdgm-write-review-modal__section.jdgm-write-review-modal__section--review-form-intro.current-section > div > div.jdgm-write-review-modal__page-header > div.jdgm-write-review-modal__intro { font-weight: 500 !important; } body > div.jdgm-review-widget-modal.jdgm-write-review-modal > div.jdgm-write-review-modal__container > div > div > div.jdgm-write-review-modal__section.jdgm-write-review-modal__section--review-form-intro.current-section > div > div.jdgm-write-review-modal__form > div.jdgm-write-review-modal__product-image { width: 325px !important; height: auto !important; } body > div.jdgm-review-widget-modal.jdgm-write-review-modal > div.jdgm-write-review-modal__container > div > div > div.jdgm-write-review-modal__section.jdgm-write-review-modal__section--review-form-intro.current-section > div > div.jdgm-write-review-modal__form { gap: 20px !important; } body > div.jdgm-review-widget-modal.jdgm-write-review-modal > div.jdgm-write-review-modal__container > div > div > div.jdgm-write-review-modal__section.jdgm-write-review-modal__section--review-form-intro.current-section > div > div.jdgm-write-review-modal__form > div.jdgm-write-review-modal__product-title { font-weight: 900; letter-spacing: -0.02em; font-size: 20px; } @media screen and (min-width: 768px) { .jdgm-write-review-modal .jdgm-write-review-modal__content { min-height: 590px !important; max-height: 900px !important; padding: 50px !important; } } @media screen and (max-width: 767px) { body > div.jdgm-review-widget-modal.jdgm-write-review-modal > div.jdgm-write-review-modal__container > div > div > div.jdgm-write-review-modal__section.jdgm-write-review-modal__section--review-form-intro.current-section > div > div.jdgm-write-review-modal__form > div.jdgm-write-review-modal__product-title { font-weight: 900; letter-spacing: -0.02em; font-size: 18px; } #judgeme_product_reviews > div > div > div.jm-stack.jm-stack--space-600.jm-review-widget__header.jm-review-widget-minimal-header > div.jm-center.jm-center--center-text.jm-center--intrinsic.jm-no-reviews-state { padding: 40px 10%; background: rgb(246, 246, 246); border-radius: 12px; } #judgeme_product_reviews > div > div > div.jm-stack.jm-stack--space-600.jm-review-widget__header.jm-review-widget-minimal-header { margin: 15px 0 0; } #judgeme_product_reviews > div > div > div.jm-stack.jm-stack--space-600.jm-review-widget__header.jm-review-widget-minimal-header > div.jm-cluster > div.jm-stack.jm-stack--space-200 > p { font-size: 20px !important; } #judgeme_product_reviews > div { padding: 0px; } body > div.jdgm-review-widget-modal.jdgm-write-review-modal > div.jdgm-write-review-modal__container > div > div > div.jdgm-write-review-modal__section.jdgm-write-review-modal__section--review-form-intro.current-section > div > div.jdgm-write-review-modal__page-header > div.jdgm-write-review-modal__title { font-size: 20px !important; line-height: 1.2em; } body > div.jdgm-review-widget-modal.jdgm-write-review-modal > div.jdgm-write-review-modal__container > div > div > div.jdgm-write-review-modal__section.jdgm-write-review-modal__section--review-form-intro.current-section > div > div.jdgm-write-review-modal__page-header > div.jdgm-write-review-modal__intro { font-size: 14px; line-height: 1.2em; } body>div.jdgm-review-widget-modal.jdgm-write-review-modal>div.jdgm-write-review-modal__container>div>div>div.jdgm-write-review-modal__section.jdgm-write-review-modal__section--review-form-intro.current-section>div>div.jdgm-write-review-modal__form>div.jdgm-write-review-modal__product-image { width: 100% !important; } body > div.jdgm-review-widget-modal.jdgm-write-review-modal > div.jdgm-write-review-modal__container { position: fixed; bottom: 0; left: 0; right: 0; max-height: 90vh; background: white; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15); transition: transform 0.3s ease-out; overscroll-behavior: contain; } body>div.jdgm-review-widget-modal.jdgm-write-review-modal>div.jdgm-write-review-modal__container>div>div>div.jdgm-write-review-modal__section.jdgm-write-review-modal__section--review-form-intro.current-section>div>div.jdgm-write-review-modal__form { gap: 10px !important; height: auto !important; } .jdgm-write-review-modal .jdgm-write-review-modal__content { padding: 77px 50px 120px !important; height: 90vh !important; max-height: 600px; overflow: hidden; } .jdgm-write-review-modal .jdgm-write-review-modal__stars .jdgm-star { line-height: 60px !important; } } .jdgm-write-review-modal .jdgm-write-review-modal__stars .jdgm-star { color: #223223 !important; } .jdgm-write-review-modal .jdgm-write-review-modal__field-label { font-weight: 600; } .jdgm-write-review-modal .jdgm-write-review-modal__page--review-details .jdgm-write-review-modal__field-group--stars { position: relative; text-align: left; } .jdgm-write-review-modal .jdgm-write-review-modal__gdpr-statement { display: none; } .jdgm-write-review-modal .jdgm-write-review-modal__nav-btn { opacity: 0.8; background-color: #1a1a1a; } .jdgm-write-review-modal .jdgm-write-review-modal__nav-btn:hover { opacity: 1; background-color: #000; } /* iOS status bar / notch: make the promo bar background fill behind time/battery */ @media (max-width: 749px) { /* Stop double-safe-area padding */ body { padding-top: 0 !important; } /* Ensure the very top "bounce" area is also dark */ html, body { background: rgb(26, 26, 26) !important; background-color: rgb(26, 26, 26) !important; } /* Let the announcement bar own the safe-area spacing */ .announcement-bar { margin-top: 0 !important; padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important; } /* Remove the fixed notch paint hack (no longer needed) */ .announcement-bar::before { content: none !important; } } /* Fixed layer behind iOS time/battery area */ .statusbar-fill { position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: rgb(26, 26, 26); /* default: matches announcement bar */ z-index: 999999; pointer-events: none; } /* When announcement bar is NOT visible, match header background instead */ body.announcement-offscreen .statusbar-fill { background: rgba(255, 255, 255, 0.6); /* match your scrolled header style */ } /* If you want solid white on inner pages when not scrolled */ body.is-inner-page.announcement-offscreen .statusbar-fill { background: rgb(255, 255, 255); } body.template-cart main, body.template-cart #MainContent, body.template-cart .main-content { background-color: #ffffff !important; } body.template-cart .account-actions__sign-ins { display: none !important; } body.template-cart .cart-items__wrapper p { display: none !important; } body.template-cart { background-color: #ffffff !important; } html:has(body.template-cart) { background-color: #ffffff !important; } #quick-add-dialog > dialog { visibility: hidden; } #header-component > div.header__row.header__row--top.color-scheme-90bfa390-edd5-4287-9a0a-23bc240539dd.section.section--full-width-margin.section--page-width > div > div.header__column.header__column--right > header-actions > cart-drawer-component > dialog > div > cart-items-component > div.cart-drawer__content.motion-reduce > div > div > p { visibility: hidden; } #header-component > div.header__row.header__row--top.color-scheme-90bfa390-edd5-4287-9a0a-23bc240539dd.section.section--full-width-margin.section--page-width > div > div.header__column.header__column--right > header-actions > cart-drawer-component > dialog > div > cart-items-component > div.cart-drawer__content.motion-reduce > div > div > p { font-family:'Noto Sans';sans-serif; font-weight: 700; font-size: 0px; } .cart-drawer__heading h3 cart-drawer__heading--empty { font-weight:900; } .cart-drawer--empty .cart-drawer__heading { text-align: center; font-size: 20px; font-family: 'Noto Sans',sans-serif; font-weight: 500; } .spacing-style layout-panel-flex layout-panel-flex--column section-content-wrapper mobile-column { } #MainContent .content-for-layout { background-color: #fff !important; } .data-template="page.smile-landing-page { background-color: #fff !important; } [class*="smile-landing-page-earning"] [class*="image"], [class*="smile-landing-page-redeeming"] [class*="image"], [class*="slp_earning"] [class*="image"], [class*="slp_redeeming"] [class*="image"] { display: none !important; } /* ────────────────────────────────────────── 15. Account Icon — Show & Replace ────────────────────────────────────────── */ /* Show account button in header (overrides the blanket hide rule) */ /* Specificity must beat .header [class*="account"] (0,2,0) */ .header anchored-popover-component.account-popover { display: inline-flex !important; } .header .account-button.header-actions__action { display: inline-flex !important; align-items: center; justify-content: center; } .header .account-button__icon { display: inline-flex !important; align-items: center; justify-content: center; width: 24px; height: 24px; } /* Hide the default person SVG */ .header .account-button__icon svg { display: none !important; } /* Show custom Underdogs icon (heavier weight) */ .header .account-button__icon::before { content: ''; display: block; width: 24px; height: 24px; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yNDguMDc2IDMyLjEyMDFDMzc3LjYwOSAyNy43NTQ5IDQ4Ni4xNTYgMTI5LjIyNSA0OTAuNTE5IDI1OC43NThDNDk0Ljg4NCAzODguMjkzIDM5My40MTEgNDk2LjgzOCAyNjMuODc5IDUwMS4xOThDMTM0LjM0NiA1MDUuNTYxIDI1LjgwMzkgNDA0LjA5MyAyMS40NDAzIDI3NC41NjFDMTcuMDc2OCAxNDUuMDI5IDExOC41NDQgMzYuNDg1NCAyNDguMDc2IDMyLjEyMDFaTTEzMi45MzQgNDQwLjg0NkwxMzIuOTM1IDQwOC4xNzhDMTMyLjkzNCA0MDAuNzQzIDEzMi42OTEgMzkyLjM5MyAxMzMuNDY1IDM4NS4wNTNDMTM1LjY0IDM2NS43NjggMTQ0LjI5MyAzNDcuNzkzIDE1OC4wMSAzMzQuMDYzQzE3Mi4yODkgMzE5LjkxOCAxOTEuMDk3IDMxMS4yNTggMjExLjEyOSAzMDkuNjA2QzIxNy42MzkgMzA5LjA1MSAyMjYuMzk3IDMwOS4yOTggMjMzLjA3NiAzMDkuMjk4TDI2Ny42MjkgMzA5LjMxMUwyODYuNzQ2IDMwOS4zMDNDMjkxLjQ5NiAzMDkuMzA2IDI5Ni41ODQgMzA5LjIxOCAzMDEuMzAxIDMwOS42NDZDMzIxLjI1OSAzMTEuNDM4IDMzOS45NTQgMzIwLjE4MSAzNTQuMTI0IDMzNC4zNDZDMzYwLjU0OSAzNDAuNzkxIDM2NS45MDkgMzQ4LjIxNiAzNzAuMDA2IDM1Ni4zNDFDMzc4Ljc2NCAzNzMuNzE4IDM3OS4wOTEgMzg2LjE4OCAzNzkuMDg2IDQwNC45ODhMMzc5LjA3NiA0MjguNjMzQzM3OS4wNzYgNDMyLjQ1NiAzNzguOTU5IDQzNy4wMzEgMzc5LjE4NCA0NDAuNzk2QzQyNS43NzEgNDA3LjgxMyA0NTcuMjExIDM1Ny41NDggNDY2LjQ4MSAzMDEuMjIzQzQ3NS42NDQgMjQ1LjIyNyA0NjIuMTM0IDE4Ny44ODcgNDI4LjkzNiAxNDEuODcxQzM5NS45MzYgOTYuMTQ0MSAzNDYuMTU2IDY1LjM2MjYgMjkwLjUwNCA1Ni4yNzE2QzI3My43MjYgNTMuNTY1OSAyNjEuMzAxIDUzLjQwOTEgMjQ0LjM5NyA1My44NzExQzIzNS42MTIgNTQuMTYxNiAyMjQuMjc2IDU1LjcyOTEgMjE1LjcxOCA1Ny4zNTk4QzE3MS4xODUgNjUuODI5MSAxMzAuNTI1IDg4LjMxMjEgOTkuNjc0NyAxMjEuNTI2QzYxLjU3NTcgMTYyLjU4NSA0MS4xNDE0IDIxNi45NzMgNDIuNzc4NCAyNzIuOTYxQzQ0LjQ2OTcgMzMwLjU1MSA2OS4zNzg0IDM4NS4wMDggMTExLjg0IDQyMy45NTFDMTE4LjQ3NSA0MzAuMDYxIDEyNS41MjIgNDM1LjcwNiAxMzIuOTM0IDQ0MC44NDZaTTE1NC4xODkgNDUzLjkwM0MxOTIuODU4IDQ4MC41MzEgMjQ2LjA0MyA0ODQuNDc4IDI5MS40MzkgNDc3LjgyNkMyOTEuNDc2IDQ3Ny44MTggMjkxLjUxNCA0NzcuODExIDI5MS41NTEgNDc3LjgwM0MzMTIuMDcxIDQ3NC40MjMgMzMyLjE3NiA0NjguNzY4IDM1MC40MzQgNDU4LjYyMUMzNTIuMjA5IDQ1Ny42MzMgMzU2LjI1OSA0NTUuODk2IDM1Ny4zMDQgNDU0LjE4NkMzNTguMjA0IDQ1Mi43MTYgMzU3LjkwMSA0MDAuNDUxIDM1Ny43NzQgMzk0LjgzNkMzNTcuNzA0IDM5Mi4yMjMgMzU3LjUyNiAzODkuNjE2IDM1Ny4yNDYgMzg3LjAxOEMzNTYuNTUxIDM4MC45NzggMzU0Ljk2OSAzNzUuMDc2IDM1Mi41NTEgMzY5LjQ5OEMzNDUuNzY2IDM1My43MTggMzMyLjk0NiAzNDEuMzExIDMxNi45NTEgMzM1LjA0M0MzMTEuNDc0IDMzMi45MjYgMzA1LjcyNiAzMzEuNTg4IDI5OS44NzQgMzMxLjA3M0MyOTYuMDI5IDMzMC42OTggMjkxLjIxNCAzMzAuODAxIDI4Ny4zMDEgMzMwLjgwMUwyNjguNTcxIDMzMC44MTFDMjUxLjc2OSAzMzAuODIzIDIzNC4yNCAzMzAuNTUxIDIxNy41MDMgMzMwLjg2OEMxODMuOTkyIDMzMS41OTEgMTU2LjkzIDM1Ni4yMTggMTU0LjQyMSAzOTAuMTkxQzE1My44MjYgMzk4LjI1MSAxNTQuMTk4IDQwNy4wMTEgMTU0LjIwMiA0MTUuMTIxTDE1NC4xODkgNDUzLjkwM1oiIGZpbGw9ImJsYWNrIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEwIi8+CjxwYXRoIGQ9Ik0yNTUuNjQxIDEyMS42ODhDMzA0Ljk4NCAxMjEuNTAzIDM0NS4xNDEgMTYxLjM0MyAzNDUuMzQ0IDIxMC42ODdDMzQ1LjU0OSAyNjAuMDMgMzA1LjcyMSAzMDAuMjAyIDI1Ni4zNzkgMzAwLjQyMkMyMDcuMDEgMzAwLjY0NCAxNjYuODE0IDI2MC43OTMgMTY2LjYxIDIxMS40MjRDMTY2LjQwNyAxNjIuMDU1IDIwNi4yNzMgMTIxLjg3NCAyNTUuNjQxIDEyMS42ODhaTTI1Ni44NzkgMjc5LjA0OUMyOTQuMzg0IDI3OC41NTIgMzI0LjQwNCAyNDcuNzc5IDMyMy45NjkgMjEwLjI3M0MzMjMuNTM2IDE3Mi43NjcgMjkyLjgxNCAxNDIuNjk3IDI1NS4zMDYgMTQzLjA2N0MyMTcuNzExIDE0My40MzkgMTg3LjU1MyAxNzQuMjUxIDE4Ny45ODggMjExLjg0NkMxODguNDIyIDI0OS40NDEgMjE5LjI4NSAyNzkuNTQ3IDI1Ni44NzkgMjc5LjA0OVoiIGZpbGw9ImJsYWNrIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEwIi8+CjxwYXRoIGQ9Ik0yNjUuMzggMTM2LjkyMkMyNTAuMDczIDEzMS4yMTcgMjM1LjQzNCAxMjkuNDI1IDIyMy41NDQgMTI5Ljc4OUMyMTcuNzMgMTI5LjkzOSAyMDUuMDI4IDEzNy42NjYgMTk5LjUgMTM5TDE5MS4wMDEgMTQ0LjQ5OUMxODkuNjEgMTQ3Ljk2NyAxODQuMDA2IDE0My43MTggMTg1Ljk4OSAxNDcuMzEzQzE4Ni4xMzIgMTQ3LjkwNSAxODUuNDYyIDE2My42MjYgMTg1Ljk4OSAxNjMuNDk5QzIxNi43MzggMTU3LjAxNyAyNDIuODg1IDE1Ny41ODIgMjYyLjUwMSAxNjUuNDk5QzI5MC40NTMgMTc5Ljc0MiAzMjYuOTY3IDE5NC40MSAzNDEuNTAxIDIwNC45OTlDMzQxLjI3MSAxOTUuOTY4IDM0MC4yMyAxODkuNjU4IDMzNi40MTYgMTc2LjE2N0MzMzUuMDc4IDE3NS4yMzggMzM0LjA3NCAxNzQuNTQgMzMyLjY2MyAxNzMuMzE0QzI5Ni45OTMgMTQ5LjAyNyAyODEuODA5IDE0Mi42NjggMjY1LjMwOSAxMzYuNjI1TDI2NS4zOCAxMzYuOTIyWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTI1MyAxNTUuNDk1QzIzOC4yNyAxNTIuMTU0IDIyOS4zMDQgMTU0LjA1NiAyMTggMTU1LjQ5NUMyMTIuNDcyIDE1Ni4xNzYgMjAzLjAzNiAxNTguODIgMTk3LjgxMyAxNjAuNDdMMTg0LjYzNCAxNjQuNjMyQzE4My40MSAxNjcuNjgyIDE4My4wODUgMTcwLjk4MSAxODUuMDc1IDE3My44MTZDMTg1LjIyOCAxNzQuMyAxODQuOTYgMTc1LjE4NCAxODUuNDU3IDE3NS4wMjdDMjE0LjUzIDE2Ni42NDQgMjMzLjk0NCAxNjYuNjM5IDI2MC43MDQgMTc2LjAzNkMyODcuNzExIDE4NS4zNTQgMzI1LjA4NiAyMDguNDQ4IDMzOS4yMiAyMTUuOTcxQzMzOC43NDIgMjA4LjM5NiAzNDMuMjM3IDIwMi40ODYgMzM5LjIyIDE5MS41QzMzNy45MiAxOTAuODQ2IDMzNy42MDkgMTc5LjUgMzI1IDE3OS41QzI4MiAxNjAuNDcgMjY5IDE1OC41IDI2MC4yNDYgMTU3LjI2N0wyNTMgMTU1LjQ5NVoiIGZpbGw9IiNCRjIxMjciLz4KPHBhdGggZD0iTTIxOC42NjEgMTQ0LjEwNUMyMzQuNjYxIDE0MC4wNDYgMjUzLjQ5NiAxNDUuMDg4IDI2NC4yMDkgMTQ3LjAzNkMyNzAuMjY4IDE0OC4xOTkgMjkwLjg2IDE1NS4wMDUgMjk5LjIyNyAxNTguMDM5QzMxMC4yMiAxNjIuMTI0IDMxOC41MiAxNjUuODYyIDMyMy41IDE3MEMzMjQuOTA2IDE3OS42MSAzMjggMTc5LjUgMzI5LjUgMTk0LjVDMzE2LjI4MSAxODYuODA1IDMwNy44MzcgMTg0LjQxMiAyODIuNSAxNzQuMzkxQzI1Ny4xNjMgMTY0LjM2OSAyMTcuOTczIDE2NS4xNDggMTg5LjI0MSAxNzEuNjk5QzE4OC43NDkgMTcxLjgyNCAxODkuMDY2IDE3MS4wMDggMTg4Ljk0OCAxNzAuNTQ2QzE4My42NTUgMTYyLjA2OCAxOTIuNjcxIDE1Mi4xNyAyMTYuOTM4IDE0NC41NDJDMjE3LjY3NiAxNDQuMzU0IDIxOC40MTUgMTQ0LjE2NyAyMTkuMTUzIDE0My45OE0yMTUuNzM1IDEzMi45NUMyMTEuODQ3IDEzMy4zMiAyMDYuODIxIDEzNC4yMDYgMjA1LjgzOCAxMzQuNDU1QzE4NS45NDMgMTQwLjcyOSAxODEuMDU4IDE0OC43MzQgMTc3LjAxIDE1OC41OTlDMTc0Ljg2MiAxNjMuNTYyIDE3NC44NjEgMTY4LjcxOSAxNzYuODI4IDE3My4zNzVMMTc2LjU0NSAxNzYuMzk0TDE4MC45MTYgMTgwLjE5NkMxODMuODM0IDE4Mi40MDEgMTg3LjQ0NCAxODMuMjA0IDE5MS4xOTUgMTgyLjQ5OEMyMTcuNzEgMTc2LjUwNyAyNTQuODE0IDE3NS43NjggMjc3LjUyNiAxODQuNzM3QzI5Ni40NTMgMTkyLjIxMSAzMDYuMDg1IDE5NS4wNTkgMzIyLjUyNyAyMDUuMTI5QzMyNy4yMTQgMjA4LjExMiAzMzggMjE0IDM0NS41IDIxOC41QzM0NyAyMTQuNSAzNDcuNSAyMTEgMzQ4LjUgMjA1LjVDMzQ5LjUgMjAwIDM0NyAxOTQuNSAzNDcgMTk0LjVDMzQ0LjA1NyAxODMuMjMxIDM0NS44OTIgMTkxLjc2MyAzNDQgMTgxLjVDMzQzLjA5MyAxNzYuNTc5IDM0Mi4wMTUgMTczLjA2MSAzNDEuNSAxNzBDMzQxLjUgMTcwIDM0MC43NTcgMTY3LjUgMzQwLjUgMTY2LjVDMzM5LjIxNCAxNjEuNSAzNDAuMjE5IDE2NS4yNTkgMzM5LjUgMTYyLjVDMzM4Ljc4MSAxNTkuNzQxIDMxNi4xMDggMTUyLjI4NCAzMDMuNjUgMTQ3LjU4N0MyOTYuNDQyIDE0NC45OTcgMjc0LjMyOCAxMzcuMzQ5IDI2Ni42MTUgMTM1Ljg2OEwyNjEuOTA0IDEzNC44NTNDMjUwLjAzMSAxMzIuNDYzIDI0NS42ODMgMTMxLjg5NSAyMzEuMTA2IDEzMS4wMTdDMjMxLjEwNiAxMzEuMDE3IDIxOS42MjMgMTMyLjU4MSAyMTUuNzM1IDEzMi45NVoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0yMTguNjYxIDE0NC4xMDVDMjM0LjY2MSAxNDAuMDQ2IDI1My40OTYgMTQ1LjA4OCAyNjQuMjA5IDE0Ny4wMzZDMjcwLjI2OCAxNDguMTk5IDI5MC44NiAxNTUuMDA1IDI5OS4yMjcgMTU4LjAzOUMzMTAuMjIgMTYyLjEyNCAzMTguNTIgMTY1Ljg2MiAzMjMuNSAxNzBDMzI0LjkwNiAxNzkuNjEgMzI4IDE3OS41IDMyOS41IDE5NC41QzMxNi4yODEgMTg2LjgwNSAzMDcuODM3IDE4NC40MTIgMjgyLjUgMTc0LjM5MUMyNTcuMTYzIDE2NC4zNjkgMjE3Ljk3MyAxNjUuMTQ4IDE4OS4yNDEgMTcxLjY5OUMxODguNzQ5IDE3MS44MjQgMTg5LjA2NiAxNzEuMDA4IDE4OC45NDggMTcwLjU0NkMxODMuNjU1IDE2Mi4wNjggMTkyLjY3MSAxNTIuMTcgMjE2LjkzOCAxNDQuNTQyQzIxNy42NzYgMTQ0LjM1NCAyMTguNDE1IDE0NC4xNjcgMjE5LjE1MyAxNDMuOThNMjE1LjczNSAxMzIuOTVDMjExLjg0NyAxMzMuMzIgMjA2LjgyMSAxMzQuMjA2IDIwNS44MzggMTM0LjQ1NUMxODUuOTQzIDE0MC43MjkgMTgxLjA1OCAxNDguNzM0IDE3Ny4wMSAxNTguNTk5QzE3NC44NjIgMTYzLjU2MiAxNzQuODYxIDE2OC43MTkgMTc2LjgyOCAxNzMuMzc1TDE3Ni41NDUgMTc2LjM5NEwxODAuOTE2IDE4MC4xOTZDMTgzLjgzNCAxODIuNDAxIDE4Ny40NDQgMTgzLjIwNCAxOTEuMTk1IDE4Mi40OThDMjE3LjcxIDE3Ni41MDcgMjU0LjgxNCAxNzUuNzY4IDI3Ny41MjYgMTg0LjczN0MyOTYuNDUzIDE5Mi4yMTEgMzA2LjA4NSAxOTUuMDU5IDMyMi41MjcgMjA1LjEyOUMzMjcuMjE0IDIwOC4xMTIgMzM4IDIxNCAzNDUuNSAyMTguNUMzNDcgMjE0LjUgMzQ3LjUgMjExIDM0OC41IDIwNS41QzM0OS41IDIwMCAzNDcgMTk0LjUgMzQ3IDE5NC41QzM0NC4wNTcgMTgzLjIzMSAzNDUuODkyIDE5MS43NjMgMzQ0IDE4MS41QzM0My4wOTMgMTc2LjU3OSAzNDIuMDE1IDE3My4wNjEgMzQxLjUgMTcwQzM0MS41IDE3MCAzNDAuNzU3IDE2Ny41IDM0MC41IDE2Ni41QzMzOS4yMTQgMTYxLjUgMzQwLjIxOSAxNjUuMjU5IDMzOS41IDE2Mi41QzMzOC43ODEgMTU5Ljc0MSAzMTYuMTA4IDE1Mi4yODQgMzAzLjY1IDE0Ny41ODdDMjk2LjQ0MiAxNDQuOTk3IDI3NC4zMjggMTM3LjM0OSAyNjYuNjE1IDEzNS44NjhMMjYxLjkwNCAxMzQuODUzQzI1MC4wMzEgMTMyLjQ2MyAyNDUuNjgzIDEzMS44OTUgMjMxLjEwNiAxMzEuMDE3QzIzMS4xMDYgMTMxLjAxNyAyMTkuNjIzIDEzMi41ODEgMjE1LjczNSAxMzIuOTVaIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjQuODczMzIiLz4KPC9zdmc+Cg=="); background-size: contain; background-repeat: no-repeat; background-position: center; } /* ============================================================ Rewards Page — Gradient Backgrounds ============================================================ Add these rules to underdogs-custom.css They make "How it works" and "You Deserve Rewards" blend into each other with a warm → cool → white gradient flow. ============================================================ */ /* "How it works" (Smile.io section) — gradient from its warm cream (#faf8f7) at the top to the cooler gray (#f7f7f7) at the bottom, so it blends into "You Deserve Rewards" */ [id*="smile_landing_page_how_it_works"] > div > section { background: linear-gradient(to bottom, #faf8f7, #f7f7f7) !important; } /* Also keep the Shopify section-background layer consistent */ [id*="1771195799f4cb71e4"] .section-background { background: linear-gradient(to bottom, #faf8f7, #f7f7f7) !important; } /* ────────────────────────────────────────── 15. Account Icon — Show & Replace ────────────────────────────────────────── */ /* Show account button in header (overrides the blanket hide rule) */ /* Specificity must beat .header [class*="account"] (0,2,0) */ .header anchored-popover-component.account-popover { display: inline-flex !important; } .header .account-button.header-actions__action { display: inline-flex !important; align-items: center; justify-content: center; } .header .account-button__icon { display: inline-flex !important; align-items: center; justify-content: center; width: 24px; height: 24px; } /* Hide the default person SVG */ .header .account-button__icon svg { display: none !important; } /* Show custom Underdogs icon (heavier weight) — logged-out state */ .header .account-button__icon::before { content: ''; display: block; width: 24px; height: 24px; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yNDguMDc2IDMyLjEyMDFDMzc3LjYwOSAyNy43NTQ5IDQ4Ni4xNTYgMTI5LjIyNSA0OTAuNTE5IDI1OC43NThDNDk0Ljg4NCAzODguMjkzIDM5My40MTEgNDk2LjgzOCAyNjMuODc5IDUwMS4xOThDMTM0LjM0NiA1MDUuNTYxIDI1LjgwMzkgNDA0LjA5MyAyMS40NDAzIDI3NC41NjFDMTcuMDc2OCAxNDUuMDI5IDExOC41NDQgMzYuNDg1NCAyNDguMDc2IDMyLjEyMDFaTTEzMi45MzQgNDQwLjg0NkwxMzIuOTM1IDQwOC4xNzhDMTMyLjkzNCA0MDAuNzQzIDEzMi42OTEgMzkyLjM5MyAxMzMuNDY1IDM4NS4wNTNDMTM1LjY0IDM2NS43NjggMTQ0LjI5MyAzNDcuNzkzIDE1OC4wMSAzMzQuMDYzQzE3Mi4yODkgMzE5LjkxOCAxOTEuMDk3IDMxMS4yNTggMjExLjEyOSAzMDkuNjA2QzIxNy42MzkgMzA5LjA1MSAyMjYuMzk3IDMwOS4yOTggMjMzLjA3NiAzMDkuMjk4TDI2Ny42MjkgMzA5LjMxMUwyODYuNzQ2IDMwOS4zMDNDMjkxLjQ5NiAzMDkuMzA2IDI5Ni41ODQgMzA5LjIxOCAzMDEuMzAxIDMwOS42NDZDMzIxLjI1OSAzMTEuNDM4IDMzOS45NTQgMzIwLjE4MSAzNTQuMTI0IDMzNC4zNDZDMzYwLjU0OSAzNDAuNzkxIDM2NS45MDkgMzQ4LjIxNiAzNzAuMDA2IDM1Ni4zNDFDMzc4Ljc2NCAzNzMuNzE4IDM3OS4wOTEgMzg2LjE4OCAzNzkuMDg2IDQwNC45ODhMMzc5LjA3NiA0MjguNjMzQzM3OS4wNzYgNDMyLjQ1NiAzNzguOTU5IDQzNy4wMzEgMzc5LjE4NCA0NDAuNzk2QzQyNS43NzEgNDA3LjgxMyA0NTcuMjExIDM1Ny41NDggNDY2LjQ4MSAzMDEuMjIzQzQ3NS42NDQgMjQ1LjIyNyA0NjIuMTM0IDE4Ny44ODcgNDI4LjkzNiAxNDEuODcxQzM5NS45MzYgOTYuMTQ0MSAzNDYuMTU2IDY1LjM2MjYgMjkwLjUwNCA1Ni4yNzE2QzI3My43MjYgNTMuNTY1OSAyNjEuMzAxIDUzLjQwOTEgMjQ0LjM5NyA1My44NzExQzIzNS42MTIgNTQuMTYxNiAyMjQuMjc2IDU1LjcyOTEgMjE1LjcxOCA1Ny4zNTk4QzE3MS4xODUgNjUuODI5MSAxMzAuNTI1IDg4LjMxMjEgOTkuNjc0NyAxMjEuNTI2QzYxLjU3NTcgMTYyLjU4NSA0MS4xNDE0IDIxNi45NzMgNDIuNzc4NCAyNzIuOTYxQzQ0LjQ2OTcgMzMwLjU1MSA2OS4zNzg0IDM4NS4wMDggMTExLjg0IDQyMy45NTFDMTE4LjQ3NSA0MzAuMDYxIDEyNS41MjIgNDM1LjcwNiAxMzIuOTM0IDQ0MC44NDZaTTE1NC4xODkgNDUzLjkwM0MxOTIuODU4IDQ4MC41MzEgMjQ2LjA0MyA0ODQuNDc4IDI5MS40MzkgNDc3LjgyNkMyOTEuNDc2IDQ3Ny44MTggMjkxLjUxNCA0NzcuODExIDI5MS41NTEgNDc3LjgwM0MzMTIuMDcxIDQ3NC40MjMgMzMyLjE3NiA0NjguNzY4IDM1MC40MzQgNDU4LjYyMUMzNTIuMjA5IDQ1Ny42MzMgMzU2LjI1OSA0NTUuODk2IDM1Ny4zMDQgNDU0LjE4NkMzNTguMjA0IDQ1Mi43MTYgMzU3LjkwMSA0MDAuNDUxIDM1Ny43NzQgMzk0LjgzNkMzNTcuNzA0IDM5Mi4yMjMgMzU3LjUyNiAzODkuNjE2IDM1Ny4yNDYgMzg3LjAxOEMzNTYuNTUxIDM4MC45NzggMzU0Ljk2OSAzNzUuMDc2IDM1Mi41NTEgMzY5LjQ5OEMzNDUuNzY2IDM1My43MTggMzMyLjk0NiAzNDEuMzExIDMxNi45NTEgMzM1LjA0M0MzMTEuNDc0IDMzMi45MjYgMzA1LjcyNiAzMzEuNTg4IDI5OS44NzQgMzMxLjA3M0MyOTYuMDI5IDMzMC42OTggMjkxLjIxNCAzMzAuODAxIDI4Ny4zMDEgMzMwLjgwMUwyNjguNTcxIDMzMC44MTFDMjUxLjc2OSAzMzAuODIzIDIzNC4yNCAzMzAuNTUxIDIxNy41MDMgMzMwLjg2OEMxODMuOTkyIDMzMS41OTEgMTU2LjkzIDM1Ni4yMTggMTU0LjQyMSAzOTAuMTkxQzE1My44MjYgMzk4LjI1MSAxNTQuMTk4IDQwNy4wMTEgMTU0LjIwMiA0MTUuMTIxTDE1NC4xODkgNDUzLjkwM1oiIGZpbGw9ImJsYWNrIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEwIi8+CjxwYXRoIGQ9Ik0yNTUuNjQxIDEyMS42ODhDMzA0Ljk4NCAxMjEuNTAzIDM0NS4xNDEgMTYxLjM0MyAzNDUuMzQ0IDIxMC42ODdDMzQ1LjU0OSAyNjAuMDMgMzA1LjcyMSAzMDAuMjAyIDI1Ni4zNzkgMzAwLjQyMkMyMDcuMDEgMzAwLjY0NCAxNjYuODE0IDI2MC43OTMgMTY2LjYxIDIxMS40MjRDMTY2LjQwNyAxNjIuMDU1IDIwNi4yNzMgMTIxLjg3NCAyNTUuNjQxIDEyMS42ODhaTTI1Ni44NzkgMjc5LjA0OUMyOTQuMzg0IDI3OC41NTIgMzI0LjQwNCAyNDcuNzc5IDMyMy45NjkgMjEwLjI3M0MzMjMuNTM2IDE3Mi43NjcgMjkyLjgxNCAxNDIuNjk3IDI1NS4zMDYgMTQzLjA2N0MyMTcuNzExIDE0My40MzkgMTg3LjU1MyAxNzQuMjUxIDE4Ny45ODggMjExLjg0NkMxODguNDIyIDI0OS40NDEgMjE5LjI4NSAyNzkuNTQ3IDI1Ni44NzkgMjc5LjA0OVoiIGZpbGw9ImJsYWNrIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEwIi8+CjxwYXRoIGQ9Ik0yNjUuMzggMTM2LjkyMkMyNTAuMDczIDEzMS4yMTcgMjM1LjQzNCAxMjkuNDI1IDIyMy41NDQgMTI5Ljc4OUMyMTcuNzMgMTI5LjkzOSAyMDUuMDI4IDEzNy42NjYgMTk5LjUgMTM5TDE5MS4wMDEgMTQ0LjQ5OUMxODkuNjEgMTQ3Ljk2NyAxODQuMDA2IDE0My43MTggMTg1Ljk4OSAxNDcuMzEzQzE4Ni4xMzIgMTQ3LjkwNSAxODUuNDYyIDE2My42MjYgMTg1Ljk4OSAxNjMuNDk5QzIxNi43MzggMTU3LjAxNyAyNDIuODg1IDE1Ny41ODIgMjYyLjUwMSAxNjUuNDk5QzI5MC40NTMgMTc5Ljc0MiAzMjYuOTY3IDE5NC40MSAzNDEuNTAxIDIwNC45OTlDMzQxLjI3MSAxOTUuOTY4IDM0MC4yMyAxODkuNjU4IDMzNi40MTYgMTc2LjE2N0MzMzUuMDc4IDE3NS4yMzggMzM0LjA3NCAxNzQuNTQgMzMyLjY2MyAxNzMuMzE0QzI5Ni45OTMgMTQ5LjAyNyAyODEuODA5IDE0Mi42NjggMjY1LjMwOSAxMzYuNjI1TDI2NS4zOCAxMzYuOTIyWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTI1MyAxNTUuNDk1QzIzOC4yNyAxNTIuMTU0IDIyOS4zMDQgMTU0LjA1NiAyMTggMTU1LjQ5NUMyMTIuNDcyIDE1Ni4xNzYgMjAzLjAzNiAxNTguODIgMTk3LjgxMyAxNjAuNDdMMTg0LjYzNCAxNjQuNjMyQzE4My40MSAxNjcuNjgyIDE4My4wODUgMTcwLjk4MSAxODUuMDc1IDE3My44MTZDMTg1LjIyOCAxNzQuMyAxODQuOTYgMTc1LjE4NCAxODUuNDU3IDE3NS4wMjdDMjE0LjUzIDE2Ni42NDQgMjMzLjk0NCAxNjYuNjM5IDI2MC43MDQgMTc2LjAzNkMyODcuNzExIDE4NS4zNTQgMzI1LjA4NiAyMDguNDQ4IDMzOS4yMiAyMTUuOTcxQzMzOC43NDIgMjA4LjM5NiAzNDMuMjM3IDIwMi40ODYgMzM5LjIyIDE5MS41QzMzNy45MiAxOTAuODQ2IDMzNy42MDkgMTc5LjUgMzI1IDE3OS41QzI4MiAxNjAuNDcgMjY5IDE1OC41IDI2MC4yNDYgMTU3LjI2N0wyNTMgMTU1LjQ5NVoiIGZpbGw9IiNCRjIxMjciLz4KPHBhdGggZD0iTTIxOC42NjEgMTQ0LjEwNUMyMzQuNjYxIDE0MC4wNDYgMjUzLjQ5NiAxNDUuMDg4IDI2NC4yMDkgMTQ3LjAzNkMyNzAuMjY4IDE0OC4xOTkgMjkwLjg2IDE1NS4wMDUgMjk5LjIyNyAxNTguMDM5QzMxMC4yMiAxNjIuMTI0IDMxOC41MiAxNjUuODYyIDMyMy41IDE3MEMzMjQuOTA2IDE3OS42MSAzMjggMTc5LjUgMzI5LjUgMTk0LjVDMzE2LjI4MSAxODYuODA1IDMwNy44MzcgMTg0LjQxMiAyODIuNSAxNzQuMzkxQzI1Ny4xNjMgMTY0LjM2OSAyMTcuOTczIDE2NS4xNDggMTg5LjI0MSAxNzEuNjk5QzE4OC43NDkgMTcxLjgyNCAxODkuMDY2IDE3MS4wMDggMTg4Ljk0OCAxNzAuNTQ2QzE4My42NTUgMTYyLjA2OCAxOTIuNjcxIDE1Mi4xNyAyMTYuOTM4IDE0NC41NDJDMjE3LjY3NiAxNDQuMzU0IDIxOC40MTUgMTQ0LjE2NyAyMTkuMTUzIDE0My45OE0yMTUuNzM1IDEzMi45NUMyMTEuODQ3IDEzMy4zMiAyMDYuODIxIDEzNC4yMDYgMjA1LjgzOCAxMzQuNDU1QzE4NS45NDMgMTQwLjcyOSAxODEuMDU4IDE0OC43MzQgMTc3LjAxIDE1OC41OTlDMTc0Ljg2MiAxNjMuNTYyIDE3NC44NjEgMTY4LjcxOSAxNzYuODI4IDE3My4zNzVMMTc2LjU0NSAxNzYuMzk0TDE4MC45MTYgMTgwLjE5NkMxODMuODM0IDE4Mi40MDEgMTg3LjQ0NCAxODMuMjA0IDE5MS4xOTUgMTgyLjQ5OEMyMTcuNzEgMTc2LjUwNyAyNTQuODE0IDE3NS43NjggMjc3LjUyNiAxODQuNzM3QzI5Ni40NTMgMTkyLjIxMSAzMDYuMDg1IDE5NS4wNTkgMzIyLjUyNyAyMDUuMTI5QzMyNy4yMTQgMjA4LjExMiAzMzggMjE0IDM0NS41IDIxOC41QzM0NyAyMTQuNSAzNDcuNSAyMTEgMzQ4LjUgMjA1LjVDMzQ5LjUgMjAwIDM0NyAxOTQuNSAzNDcgMTk0LjVDMzQ0LjA1NyAxODMuMjMxIDM0NS44OTIgMTkxLjc2MyAzNDQgMTgxLjVDMzQzLjA5MyAxNzYuNTc5IDM0Mi4wMTUgMTczLjA2MSAzNDEuNSAxNzBDMzQxLjUgMTcwIDM0MC43NTcgMTY3LjUgMzQwLjUgMTY2LjVDMzM5LjIxNCAxNjEuNSAzNDAuMjE5IDE2NS4yNTkgMzM5LjUgMTYyLjVDMzM4Ljc4MSAxNTkuNzQxIDMxNi4xMDggMTUyLjI4NCAzMDMuNjUgMTQ3LjU4N0MyOTYuNDQyIDE0NC45OTcgMjc0LjMyOCAxMzcuMzQ5IDI2Ni42MTUgMTM1Ljg2OEwyNjEuOTA0IDEzNC44NTNDMjUwLjAzMSAxMzIuNDYzIDI0NS42ODMgMTMxLjg5NSAyMzEuMTA2IDEzMS4wMTdDMjMxLjEwNiAxMzEuMDE3IDIxOS42MjMgMTMyLjU4MSAyMTUuNzM1IDEzMi45NVoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0yMTguNjYxIDE0NC4xMDVDMjM0LjY2MSAxNDAuMDQ2IDI1My40OTYgMTQ1LjA4OCAyNjQuMjA5IDE0Ny4wMzZDMjcwLjI2OCAxNDguMTk5IDI5MC44NiAxNTUuMDA1IDI5OS4yMjcgMTU4LjAzOUMzMTAuMjIgMTYyLjEyNCAzMTguNTIgMTY1Ljg2MiAzMjMuNSAxNzBDMzI0LjkwNiAxNzkuNjEgMzI4IDE3OS41IDMyOS41IDE5NC41QzMxNi4yODEgMTg2LjgwNSAzMDcuODM3IDE4NC40MTIgMjgyLjUgMTc0LjM5MUMyNTcuMTYzIDE2NC4zNjkgMjE3Ljk3MyAxNjUuMTQ4IDE4OS4yNDEgMTcxLjY5OUMxODguNzQ5IDE3MS44MjQgMTg5LjA2NiAxNzEuMDA4IDE4OC45NDggMTcwLjU0NkMxODMuNjU1IDE2Mi4wNjggMTkyLjY3MSAxNTIuMTcgMjE2LjkzOCAxNDQuNTQyQzIxNy42NzYgMTQ0LjM1NCAyMTguNDE1IDE0NC4xNjcgMjE5LjE1MyAxNDMuOThNMjE1LjczNSAxMzIuOTVDMjExLjg0NyAxMzMuMzIgMjA2LjgyMSAxMzQuMjA2IDIwNS44MzggMTM0LjQ1NUMxODUuOTQzIDE0MC43MjkgMTgxLjA1OCAxNDguNzM0IDE3Ny4wMSAxNTguNTk5QzE3NC44NjIgMTYzLjU2MiAxNzQuODYxIDE2OC43MTkgMTc2LjgyOCAxNzMuMzc1TDE3Ni41NDUgMTc2LjM5NEwxODAuOTE2IDE4MC4xOTZDMTgzLjgzNCAxODIuNDAxIDE4Ny40NDQgMTgzLjIwNCAxOTEuMTk1IDE4Mi40OThDMjE3LjcxIDE3Ni41MDcgMjU0LjgxNCAxNzUuNzY4IDI3Ny41MjYgMTg0LjczN0MyOTYuNDUzIDE5Mi4yMTEgMzA2LjA4NSAxOTUuMDU5IDMyMi41MjcgMjA1LjEyOUMzMjcuMjE0IDIwOC4xMTIgMzM4IDIxNCAzNDUuNSAyMTguNUMzNDcgMjE0LjUgMzQ3LjUgMjExIDM0OC41IDIwNS41QzM0OS41IDIwMCAzNDcgMTk0LjUgMzQ3IDE5NC41QzM0NC4wNTcgMTgzLjIzMSAzNDUuODkyIDE5MS43NjMgMzQ0IDE4MS41QzM0My4wOTMgMTc2LjU3OSAzNDIuMDE1IDE3My4wNjEgMzQxLjUgMTcwQzM0MS41IDE3MCAzNDAuNzU3IDE2Ny41IDM0MC41IDE2Ni41QzMzOS4yMTQgMTYxLjUgMzQwLjIxOSAxNjUuMjU5IDMzOS41IDE2Mi41QzMzOC43ODEgMTU5Ljc0MSAzMTYuMTA4IDE1Mi4yODQgMzAzLjY1IDE0Ny41ODdDMjk2LjQ0MiAxNDQuOTk3IDI3NC4zMjggMTM3LjM0OSAyNjYuNjE1IDEzNS44NjhMMjYxLjkwNCAxMzQuODUzQzI1MC4wMzEgMTMyLjQ2MyAyNDUuNjgzIDEzMS44OTUgMjMxLjEwNiAxMzEuMDE3QzIzMS4xMDYgMTMxLjAxNyAyMTkuNjIzIDEzMi41ODEgMjE1LjczNSAxMzIuOTVaIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjQuODczMzIiLz4KPC9zdmc+Cg=="); background-size: contain; background-repeat: no-repeat; background-position: center; } /* ── Logged-in state: Horizon swaps __icon for __avatar ── */ /* Hide the avatar circle (letter initial) and show the same Underdogs icon */ .header .account-button__avatar { display: inline-flex !important; align-items: center; justify-content: center; width: 24px; height: 24px; /* Hide the avatar letter */ font-size: 0 !important; color: transparent !important; background: none !important; border-radius: 0 !important; } .header .account-button__avatar::before { content: ''; display: block; width: 24px; height: 24px; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yNDguMDc2IDMyLjEyMDFDMzc3LjYwOSAyNy43NTQ5IDQ4Ni4xNTYgMTI5LjIyNSA0OTAuNTE5IDI1OC43NThDNDk0Ljg4NCAzODguMjkzIDM5My40MTEgNDk2LjgzOCAyNjMuODc5IDUwMS4xOThDMTM0LjM0NiA1MDUuNTYxIDI1LjgwMzkgNDA0LjA5MyAyMS40NDAzIDI3NC41NjFDMTcuMDc2OCAxNDUuMDI5IDExOC41NDQgMzYuNDg1NCAyNDguMDc2IDMyLjEyMDFaTTEzMi45MzQgNDQwLjg0NkwxMzIuOTM1IDQwOC4xNzhDMTMyLjkzNCA0MDAuNzQzIDEzMi42OTEgMzkyLjM5MyAxMzMuNDY1IDM4NS4wNTNDMTM1LjY0IDM2NS43NjggMTQ0LjI5MyAzNDcuNzkzIDE1OC4wMSAzMzQuMDYzQzE3Mi4yODkgMzE5LjkxOCAxOTEuMDk3IDMxMS4yNTggMjExLjEyOSAzMDkuNjA2QzIxNy42MzkgMzA5LjA1MSAyMjYuMzk3IDMwOS4yOTggMjMzLjA3NiAzMDkuMjk4TDI2Ny42MjkgMzA5LjMxMUwyODYuNzQ2IDMwOS4zMDNDMjkxLjQ5NiAzMDkuMzA2IDI5Ni41ODQgMzA5LjIxOCAzMDEuMzAxIDMwOS42NDZDMzIxLjI1OSAzMTEuNDM4IDMzOS45NTQgMzIwLjE4MSAzNTQuMTI0IDMzNC4zNDZDMzYwLjU0OSAzNDAuNzkxIDM2NS45MDkgMzQ4LjIxNiAzNzAuMDA2IDM1Ni4zNDFDMzc4Ljc2NCAzNzMuNzE4IDM3OS4wOTEgMzg2LjE4OCAzNzkuMDg2IDQwNC45ODhMMzc5LjA3NiA0MjguNjMzQzM3OS4wNzYgNDMyLjQ1NiAzNzguOTU5IDQzNy4wMzEgMzc5LjE4NCA0NDAuNzk2QzQyNS43NzEgNDA3LjgxMyA0NTcuMjExIDM1Ny41NDggNDY2LjQ4MSAzMDEuMjIzQzQ3NS42NDQgMjQ1LjIyNyA0NjIuMTM0IDE4Ny44ODcgNDI4LjkzNiAxNDEuODcxQzM5NS45MzYgOTYuMTQ0MSAzNDYuMTU2IDY1LjM2MjYgMjkwLjUwNCA1Ni4yNzE2QzI3My43MjYgNTMuNTY1OSAyNjEuMzAxIDUzLjQwOTEgMjQ0LjM5NyA1My44NzExQzIzNS42MTIgNTQuMTYxNiAyMjQuMjc2IDU1LjcyOTEgMjE1LjcxOCA1Ny4zNTk4QzE3MS4xODUgNjUuODI5MSAxMzAuNTI1IDg4LjMxMjEgOTkuNjc0NyAxMjEuNTI2QzYxLjU3NTcgMTYyLjU4NSA0MS4xNDE0IDIxNi45NzMgNDIuNzc4NCAyNzIuOTYxQzQ0LjQ2OTcgMzMwLjU1MSA2OS4zNzg0IDM4NS4wMDggMTExLjg0IDQyMy45NTFDMTE4LjQ3NSA0MzAuMDYxIDEyNS41MjIgNDM1LjcwNiAxMzIuOTM0IDQ0MC44NDZaTTE1NC4xODkgNDUzLjkwM0MxOTIuODU4IDQ4MC41MzEgMjQ2LjA0MyA0ODQuNDc4IDI5MS40MzkgNDc3LjgyNkMyOTEuNDc2IDQ3Ny44MTggMjkxLjUxNCA0NzcuODExIDI5MS41NTEgNDc3LjgwM0MzMTIuMDcxIDQ3NC40MjMgMzMyLjE3NiA0NjguNzY4IDM1MC40MzQgNDU4LjYyMUMzNTIuMjA5IDQ1Ny42MzMgMzU2LjI1OSA0NTUuODk2IDM1Ny4zMDQgNDU0LjE4NkMzNTguMjA0IDQ1Mi43MTYgMzU3LjkwMSA0MDAuNDUxIDM1Ny43NzQgMzk0LjgzNkMzNTcuNzA0IDM5Mi4yMjMgMzU3LjUyNiAzODkuNjE2IDM1Ny4yNDYgMzg3LjAxOEMzNTYuNTUxIDM4MC45NzggMzU0Ljk2OSAzNzUuMDc2IDM1Mi41NTEgMzY5LjQ5OEMzNDUuNzY2IDM1My43MTggMzMyLjk0NiAzNDEuMzExIDMxNi45NTEgMzM1LjA0M0MzMTEuNDc0IDMzMi45MjYgMzA1LjcyNiAzMzEuNTg4IDI5OS44NzQgMzMxLjA3M0MyOTYuMDI5IDMzMC42OTggMjkxLjIxNCAzMzAuODAxIDI4Ny4zMDEgMzMwLjgwMUwyNjguNTcxIDMzMC44MTFDMjUxLjc2OSAzMzAuODIzIDIzNC4yNCAzMzAuNTUxIDIxNy41MDMgMzMwLjg2OEMxODMuOTkyIDMzMS41OTEgMTU2LjkzIDM1Ni4yMTggMTU0LjQyMSAzOTAuMTkxQzE1My44MjYgMzk4LjI1MSAxNTQuMTk4IDQwNy4wMTEgMTU0LjIwMiA0MTUuMTIxTDE1NC4xODkgNDUzLjkwM1oiIGZpbGw9ImJsYWNrIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEwIi8+CjxwYXRoIGQ9Ik0yNTUuNjQxIDEyMS42ODhDMzA0Ljk4NCAxMjEuNTAzIDM0NS4xNDEgMTYxLjM0MyAzNDUuMzQ0IDIxMC42ODdDMzQ1LjU0OSAyNjAuMDMgMzA1LjcyMSAzMDAuMjAyIDI1Ni4zNzkgMzAwLjQyMkMyMDcuMDEgMzAwLjY0NCAxNjYuODE0IDI2MC43OTMgMTY2LjYxIDIxMS40MjRDMTY2LjQwNyAxNjIuMDU1IDIwNi4yNzMgMTIxLjg3NCAyNTUuNjQxIDEyMS42ODhaTTI1Ni44NzkgMjc5LjA0OUMyOTQuMzg0IDI3OC41NTIgMzI0LjQwNCAyNDcuNzc5IDMyMy45NjkgMjEwLjI3M0MzMjMuNTM2IDE3Mi43NjcgMjkyLjgxNCAxNDIuNjk3IDI1NS4zMDYgMTQzLjA2N0MyMTcuNzExIDE0My40MzkgMTg3LjU1MyAxNzQuMjUxIDE4Ny45ODggMjExLjg0NkMxODguNDIyIDI0OS40NDEgMjE5LjI4NSAyNzkuNTQ3IDI1Ni44NzkgMjc5LjA0OVoiIGZpbGw9ImJsYWNrIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEwIi8+CjxwYXRoIGQ9Ik0yNjUuMzggMTM2LjkyMkMyNTAuMDczIDEzMS4yMTcgMjM1LjQzNCAxMjkuNDI1IDIyMy41NDQgMTI5Ljc4OUMyMTcuNzMgMTI5LjkzOSAyMDUuMDI4IDEzNy42NjYgMTk5LjUgMTM5TDE5MS4wMDEgMTQ0LjQ5OUMxODkuNjEgMTQ3Ljk2NyAxODQuMDA2IDE0My43MTggMTg1Ljk4OSAxNDcuMzEzQzE4Ni4xMzIgMTQ3LjkwNSAxODUuNDYyIDE2My42MjYgMTg1Ljk4OSAxNjMuNDk5QzIxNi43MzggMTU3LjAxNyAyNDIuODg1IDE1Ny41ODIgMjYyLjUwMSAxNjUuNDk5QzI5MC40NTMgMTc5Ljc0MiAzMjYuOTY3IDE5NC40MSAzNDEuNTAxIDIwNC45OTlDMzQxLjI3MSAxOTUuOTY4IDM0MC4yMyAxODkuNjU4IDMzNi40MTYgMTc2LjE2N0MzMzUuMDc4IDE3NS4yMzggMzM0LjA3NCAxNzQuNTQgMzMyLjY2MyAxNzMuMzE0QzI5Ni45OTMgMTQ5LjAyNyAyODEuODA5IDE0Mi42NjggMjY1LjMwOSAxMzYuNjI1TDI2NS4zOCAxMzYuOTIyWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTI1MyAxNTUuNDk1QzIzOC4yNyAxNTIuMTU0IDIyOS4zMDQgMTU0LjA1NiAyMTggMTU1LjQ5NUMyMTIuNDcyIDE1Ni4xNzYgMjAzLjAzNiAxNTguODIgMTk3LjgxMyAxNjAuNDdMMTg0LjYzNCAxNjQuNjMyQzE4My40MSAxNjcuNjgyIDE4My4wODUgMTcwLjk4MSAxODUuMDc1IDE3My44MTZDMTg1LjIyOCAxNzQuMyAxODQuOTYgMTc1LjE4NCAxODUuNDU3IDE3NS4wMjdDMjE0LjUzIDE2Ni42NDQgMjMzLjk0NCAxNjYuNjM5IDI2MC43MDQgMTc2LjAzNkMyODcuNzExIDE4NS4zNTQgMzI1LjA4NiAyMDguNDQ4IDMzOS4yMiAyMTUuOTcxQzMzOC43NDIgMjA4LjM5NiAzNDMuMjM3IDIwMi40ODYgMzM5LjIyIDE5MS41QzMzNy45MiAxOTAuODQ2IDMzNy42MDkgMTc5LjUgMzI1IDE3OS41QzI4MiAxNjAuNDcgMjY5IDE1OC41IDI2MC4yNDYgMTU3LjI2N0wyNTMgMTU1LjQ5NVoiIGZpbGw9IiNCRjIxMjciLz4KPHBhdGggZD0iTTIxOC42NjEgMTQ0LjEwNUMyMzQuNjYxIDE0MC4wNDYgMjUzLjQ5NiAxNDUuMDg4IDI2NC4yMDkgMTQ3LjAzNkMyNzAuMjY4IDE0OC4xOTkgMjkwLjg2IDE1NS4wMDUgMjk5LjIyNyAxNTguMDM5QzMxMC4yMiAxNjIuMTI0IDMxOC41MiAxNjUuODYyIDMyMy41IDE3MEMzMjQuOTA2IDE3OS42MSAzMjggMTc5LjUgMzI5LjUgMTk0LjVDMzE2LjI4MSAxODYuODA1IDMwNy44MzcgMTg0LjQxMiAyODIuNSAxNzQuMzkxQzI1Ny4xNjMgMTY0LjM2OSAyMTcuOTczIDE2NS4xNDggMTg5LjI0MSAxNzEuNjk5QzE4OC43NDkgMTcxLjgyNCAxODkuMDY2IDE3MS4wMDggMTg4Ljk0OCAxNzAuNTQ2QzE4My42NTUgMTYyLjA2OCAxOTIuNjcxIDE1Mi4xNyAyMTYuOTM4IDE0NC41NDJDMjE3LjY3NiAxNDQuMzU0IDIxOC40MTUgMTQ0LjE2NyAyMTkuMTUzIDE0My45OE0yMTUuNzM1IDEzMi45NUMyMTEuODQ3IDEzMy4zMiAyMDYuODIxIDEzNC4yMDYgMjA1LjgzOCAxMzQuNDU1QzE4NS45NDMgMTQwLjcyOSAxODEuMDU4IDE0OC43MzQgMTc3LjAxIDE1OC41OTlDMTc0Ljg2MiAxNjMuNTYyIDE3NC44NjEgMTY4LjcxOSAxNzYuODI4IDE3My4zNzVMMTc2LjU0NSAxNzYuMzk0TDE4MC45MTYgMTgwLjE5NkMxODMuODM0IDE4Mi40MDEgMTg3LjQ0NCAxODMuMjA0IDE5MS4xOTUgMTgyLjQ5OEMyMTcuNzEgMTc2LjUwNyAyNTQuODE0IDE3NS43NjggMjc3LjUyNiAxODQuNzM3QzI5Ni40NTMgMTkyLjIxMSAzMDYuMDg1IDE5NS4wNTkgMzIyLjUyNyAyMDUuMTI5QzMyNy4yMTQgMjA4LjExMiAzMzggMjE0IDM0NS41IDIxOC41QzM0NyAyMTQuNSAzNDcuNSAyMTEgMzQ4LjUgMjA1LjVDMzQ5LjUgMjAwIDM0NyAxOTQuNSAzNDcgMTk0LjVDMzQ0LjA1NyAxODMuMjMxIDM0NS44OTIgMTkxLjc2MyAzNDQgMTgxLjVDMzQzLjA5MyAxNzYuNTc5IDM0Mi4wMTUgMTczLjA2MSAzNDEuNSAxNzBDMzQxLjUgMTcwIDM0MC43NTcgMTY3LjUgMzQwLjUgMTY2LjVDMzM5LjIxNCAxNjEuNSAzNDAuMjE5IDE2NS4yNTkgMzM5LjUgMTYyLjVDMzM4Ljc4MSAxNTkuNzQxIDMxNi4xMDggMTUyLjI4NCAzMDMuNjUgMTQ3LjU4N0MyOTYuNDQyIDE0NC45OTcgMjc0LjMyOCAxMzcuMzQ5IDI2Ni42MTUgMTM1Ljg2OEwyNjEuOTA0IDEzNC44NTNDMjUwLjAzMSAxMzIuNDYzIDI0NS42ODMgMTMxLjg5NSAyMzEuMTA2IDEzMS4wMTdDMjMxLjEwNiAxMzEuMDE3IDIxOS42MjMgMTMyLjU4MSAyMTUuNzM1IDEzMi45NVoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0yMTguNjYxIDE0NC4xMDVDMjM0LjY2MSAxNDAuMDQ2IDI1My40OTYgMTQ1LjA4OCAyNjQuMjA5IDE0Ny4wMzZDMjcwLjI2OCAxNDguMTk5IDI5MC44NiAxNTUuMDA1IDI5OS4yMjcgMTU4LjAzOUMzMTAuMjIgMTYyLjEyNCAzMTguNTIgMTY1Ljg2MiAzMjMuNSAxNzBDMzI0LjkwNiAxNzkuNjEgMzI4IDE3OS41IDMyOS41IDE5NC41QzMxNi4yODEgMTg2LjgwNSAzMDcuODM3IDE4NC40MTIgMjgyLjUgMTc0LjM5MUMyNTcuMTYzIDE2NC4zNjkgMjE3Ljk3MyAxNjUuMTQ4IDE4OS4yNDEgMTcxLjY5OUMxODguNzQ5IDE3MS44MjQgMTg5LjA2NiAxNzEuMDA4IDE4OC45NDggMTcwLjU0NkMxODMuNjU1IDE2Mi4wNjggMTkyLjY3MSAxNTIuMTcgMjE2LjkzOCAxNDQuNTQyQzIxNy42NzYgMTQ0LjM1NCAyMTguNDE1IDE0NC4xNjcgMjE5LjE1MyAxNDMuOThNMjE1LjczNSAxMzIuOTVDMjExLjg0NyAxMzMuMzIgMjA2LjgyMSAxMzQuMjA2IDIwNS44MzggMTM0LjQ1NUMxODUuOTQzIDE0MC43MjkgMTgxLjA1OCAxNDguNzM0IDE3Ny4wMSAxNTguNTk5QzE3NC44NjIgMTYzLjU2MiAxNzQuODYxIDE2OC43MTkgMTc2LjgyOCAxNzMuMzc1TDE3Ni41NDUgMTc2LjM5NEwxODAuOTE2IDE4MC4xOTZDMTgzLjgzNCAxODIuNDAxIDE4Ny40NDQgMTgzLjIwNCAxOTEuMTk1IDE4Mi40OThDMjE3LjcxIDE3Ni41MDcgMjU0LjgxNCAxNzUuNzY4IDI3Ny41MjYgMTg0LjczN0MyOTYuNDUzIDE5Mi4yMTEgMzA2LjA4NSAxOTUuMDU5IDMyMi41MjcgMjA1LjEyOUMzMjcuMjE0IDIwOC4xMTIgMzM4IDIxNCAzNDUuNSAyMTguNUMzNDcgMjE0LjUgMzQ3LjUgMjExIDM0OC41IDIwNS41QzM0OS41IDIwMCAzNDcgMTk0LjUgMzQ3IDE5NC41QzM0NC4wNTcgMTgzLjIzMSAzNDUuODkyIDE5MS43NjMgMzQ0IDE4MS41QzM0My4wOTMgMTc2LjU3OSAzNDIuMDE1IDE3My4wNjEgMzQxLjUgMTcwQzM0MS41IDE3MCAzNDAuNzU3IDE2Ny41IDM0MC41IDE2Ni41QzMzOS4yMTQgMTYxLjUgMzQwLjIxOSAxNjUuMjU5IDMzOS41IDE2Mi41QzMzOC43ODEgMTU5Ljc0MSAzMTYuMTA4IDE1Mi4yODQgMzAzLjY1IDE0Ny41ODdDMjk2LjQ0MiAxNDQuOTk3IDI3NC4zMjggMTM3LjM0OSAyNjYuNjE1IDEzNS44NjhMMjYxLjkwNCAxMzQuODUzQzI1MC4wMzEgMTMyLjQ2MyAyNDUuNjgzIDEzMS44OTUgMjMxLjEwNiAxMzEuMDE3QzIzMS4xMDYgMTMxLjAxNyAyMTkuNjIzIDEzMi41ODEgMjE1LjczNSAxMzIuOTVaIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjQuODczMzIiLz4KPC9zdmc+Cg=="); background-size: contain; background-repeat: no-repeat; background-position: center; } ._1fragemzh,._1fragemzi:hover,._1fragemzj:focus,._1fragemzk:hover:focus { background-color: #e6b2b2 !important; color: var(--x-default-color-text) } #CustomProperties-\:r2\: > header > section > div > div > div > div > div > button > div > span:nth-child(1) > div > div { background-color: #e6b2b2 !important; }