/** * FabricLab Header Icons Widget Styles * @version 3.1.0 * * CHANGELOG v3.1.0: * - Fix: Buttons/footer no longer overflow rounded corners on mobile * Added box-sizing, overflow:hidden on teleported dropdown, * proper padding constraints on footer elements * * CHANGELOG v3.0.0: * - NEW: Teleported dropdown styles (.fl-dropdown-teleported) * Dropdown is moved to by JS on tablet/mobile to escape * header stacking context - this is the definitive z-index fix */ /* Header Icons Container */ .fl-header-icons-wrapper { position: relative !important; } .fl-header-icons { display: flex !important; align-items: center !important; gap: 16px !important; } /* Icon Base */ .fl-header-icon { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; padding: 10px !important; border-radius: 10px !important; transition: background-color 0.2s ease !important; text-decoration: none !important; color: inherit !important; background: transparent !important; border: none !important; box-shadow: none !important; } .fl-header-icon:hover { background-color: #f3f4f6 !important; } .fl-header-icon svg { width: 24px !important; height: 24px !important; stroke: #1f2937 !important; transition: stroke 0.2s ease !important; flex-shrink: 0 !important; fill: none !important; } .fl-header-icon:hover svg { stroke: #f97316 !important; } /* Cart Highlighted */ .fl-cart-trigger.fl-cart-highlighted { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important; padding: 12px 14px !important; box-shadow: 0 4px 15px rgba(249, 115, 22, 0.35) !important; transition: all 0.25s ease !important; border: none !important; } .fl-cart-trigger.fl-cart-highlighted:hover { background: linear-gradient(135deg, #ea580c 0%, #dc2626 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 25px rgba(249, 115, 22, 0.45) !important; } .fl-cart-trigger.fl-cart-highlighted svg { stroke: #fff !important; fill: none !important; } .fl-cart-trigger.fl-cart-highlighted .fl-badge { background: #fff !important; color: #f97316 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; } /* Badge */ .fl-badge { position: absolute !important; top: 2px !important; right: 2px !important; display: flex !important; align-items: center !important; justify-content: center !important; min-width: 20px !important; height: 20px !important; padding: 0 6px !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1 !important; color: #fff !important; background: linear-gradient(135deg, #f97316 0%, #ec4899 100%) !important; border-radius: 50px !important; transform: translate(30%, -30%) !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.2s, transform 0.2s !important; border: none !important; box-shadow: none !important; } .fl-badge.has-items, .fl-badge[data-count]:not([data-count="0"]) { opacity: 1 !important; visibility: visible !important; } /* ================================================================ DROPDOWN - Desktop (default, >1024px) ================================================================ */ .fl-dropdown { position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important; z-index: 1000 !important; min-width: 320px !important; background: #fff !important; border-radius: 16px !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04) !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(-8px) !important; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s !important; pointer-events: none !important; } .fl-dropdown::before { content: '' !important; position: absolute !important; top: -8px !important; right: 20px !important; width: 16px !important; height: 16px !important; background: #fff !important; transform: rotate(45deg) !important; border-radius: 4px 0 0 0 !important; box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.03) !important; } .fl-header-icon::after { content: '' !important; position: absolute !important; top: 100% !important; left: -30px !important; right: -30px !important; height: 25px !important; background: transparent !important; pointer-events: none !important; } /* Desktop: open on hover AND .is-active */ .fl-header-icon:hover .fl-dropdown, .fl-header-icon:focus-within .fl-dropdown, .fl-header-icon.is-active .fl-dropdown, .fl-dropdown:hover { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; pointer-events: auto !important; transition-delay: 0s !important; } .fl-dropdown-header { padding: 18px 24px !important; border-bottom: 1px solid #e5e7eb !important; } .fl-dropdown-title { font-size: 13px !important; font-weight: 700 !important; color: #1f2937 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; } /* Mini cart discount info icon — preserve inline group color from PHP */ .fl-mini-cart-discount-info svg, .fl-cart-trigger.fl-cart-highlighted .fl-mini-cart-discount-info svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; } /* MINI CART */ .fl-cart-dropdown { width: 400px !important; max-height: 500px !important; } .fl-mini-cart-content { display: flex !important; flex-direction: column !important; max-height: 480px !important; overflow: hidden !important; } .fl-mini-cart-empty { padding: 50px 24px !important; text-align: center !important; } .fl-empty-cart-icon { width: 80px !important; height: 80px !important; stroke: #9ca3af !important; margin-bottom: 20px !important; opacity: 0.6 !important; } .fl-mini-cart-empty p { margin: 0 0 24px !important; color: #6b7280 !important; font-size: 15px !important; } .fl-mini-cart-items { flex: 1 !important; overflow-y: auto !important; padding: 12px 0 !important; min-height: 0 !important; } .fl-mini-cart-item { display: flex !important; align-items: center !important; gap: 0 !important; padding: 0 !important; position: relative !important; transition: background-color 0.15s !important; } .fl-mini-cart-item:hover { background-color: #f9fafb !important; } .fl-mini-cart-item-link { display: flex !important; align-items: flex-start !important; gap: 14px !important; padding: 14px 44px 14px 24px !important; flex: 1 !important; text-decoration: none !important; color: inherit !important; min-width: 0 !important; } .fl-mini-cart-item-link:hover { text-decoration: none !important; } .fl-mini-cart-item-image { flex-shrink: 0 !important; width: 68px !important; height: 68px !important; border-radius: 10px !important; overflow: hidden !important; background: #f3f4f6 !important; border: 1px solid #e5e7eb !important; } .fl-mini-cart-item-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .fl-mini-cart-item-details { flex: 1 !important; min-width: 0 !important; text-align: left !important; } .fl-mini-cart-item-title { font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; margin-bottom: 6px !important; color: #1f2937 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-align: left !important; } .fl-mini-cart-item-link:hover .fl-mini-cart-item-title { color: #f97316 !important; } .fl-mini-cart-item-meta { font-size: 13px !important; color: #6b7280 !important; text-align: left !important; } .fl-mini-cart-item-qty { color: #6b7280 !important; } .fl-mini-cart-item-price { font-weight: 600 !important; color: #1f2937 !important; } /* Remove button */ .fl-mini-cart-remove { position: absolute !important; right: 14px !important; top: 50% !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 26px !important; height: 26px !important; padding: 0 !important; background: #d6d9df !important; border: none !important; border-radius: 50% !important; cursor: pointer !important; transition: background-color 0.15s !important; z-index: 2 !important; opacity: 1 !important; visibility: visible !important; } .fl-mini-cart-remove:hover { background-color: rgba(239, 68, 68, 0.15) !important; } .fl-mini-cart-remove svg { width: 14px !important; height: 14px !important; stroke: #ffffff !important; } .fl-mini-cart-remove:hover svg { stroke: #ef4444 !important; } .fl-mini-cart-footer { flex-shrink: 0 !important; padding: 20px 24px !important; border-top: 1px solid #e5e7eb !important; background: #f9fafb !important; border-radius: 0 0 16px 16px !important; } .fl-mini-cart-subtotal { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 18px !important; } .fl-subtotal-label { font-size: 15px !important; font-weight: 500 !important; color: #6b7280 !important; } .fl-subtotal-value { font-size: 22px !important; font-weight: 700 !important; color: #1f2937 !important; } .fl-btn-checkout { width: 100% !important; padding: 16px 24px !important; font-size: 15px !important; font-weight: 600 !important; gap: 10px !important; box-sizing: border-box !important; } .fl-btn-checkout svg { width: 18px !important; height: 18px !important; stroke: currentColor !important; transition: transform 0.2s !important; } .fl-btn-checkout:hover svg { transform: translateX(4px) !important; } /* ACCOUNT DROPDOWN */ .fl-account-dropdown { width: 320px !important; } .fl-account-header { display: flex !important; align-items: center !important; gap: 14px !important; padding: 22px 24px !important; background: linear-gradient(135deg, #f97316, #ec4899) !important; border-radius: 16px 16px 0 0 !important; } .fl-account-avatar { flex-shrink: 0 !important; width: 52px !important; height: 52px !important; border-radius: 50% !important; overflow: hidden !important; border: 3px solid rgba(255, 255, 255, 0.3) !important; } .fl-account-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .fl-account-info { flex: 1 !important; min-width: 0 !important; } .fl-account-name { display: block !important; font-size: 16px !important; font-weight: 600 !important; color: #fff !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .fl-account-email { display: block !important; font-size: 13px !important; color: rgba(255, 255, 255, 0.8) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .fl-account-nav { padding: 10px 0 !important; } .fl-account-nav-item { display: flex !important; align-items: center !important; gap: 14px !important; padding: 13px 24px !important; color: #1f2937 !important; text-decoration: none !important; font-size: 14px !important; font-weight: 500 !important; transition: background-color 0.15s, color 0.15s !important; } .fl-account-nav-item:hover { background-color: #f9fafb !important; color: #f97316 !important; } .fl-account-nav-item svg { width: 20px !important; height: 20px !important; stroke: currentColor !important; flex-shrink: 0 !important; } .fl-account-footer { padding: 14px 24px !important; border-top: 1px solid #e5e7eb !important; } .fl-logout-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; padding: 12px 18px !important; font-size: 14px !important; font-weight: 500 !important; color: #6b7280 !important; text-decoration: none !important; background: #f3f4f6 !important; border-radius: 10px !important; transition: background-color 0.15s, color 0.15s !important; box-sizing: border-box !important; } .fl-logout-btn:hover { background-color: rgba(239, 68, 68, 0.1) !important; color: #ef4444 !important; } .fl-logout-btn svg { width: 18px !important; height: 18px !important; stroke: currentColor !important; } /* Guest State */ .fl-account-guest { padding: 36px 28px !important; text-align: center !important; } .fl-guest-icon svg { width: 64px !important; height: 64px !important; stroke: #9ca3af !important; margin-bottom: 18px !important; opacity: 0.6 !important; } .fl-guest-text { margin: 0 0 24px !important; font-size: 14px !important; color: #6b7280 !important; line-height: 1.6 !important; } .fl-guest-register { margin: 18px 0 0 !important; font-size: 13px !important; color: #6b7280 !important; } .fl-guest-register a { color: #f97316 !important; text-decoration: none !important; font-weight: 600 !important; } .fl-guest-register a:hover { text-decoration: underline !important; } /* SEARCH OVERLAY */ .fl-search-overlay { position: fixed !important; inset: 0 !important; z-index: 999999 !important; display: flex !important; align-items: center !important; justify-content: center !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.35s ease, visibility 0.35s ease !important; } .fl-search-overlay.is-active { opacity: 1 !important; visibility: visible !important; } .fl-search-backdrop { position: absolute !important; inset: 0 !important; background: linear-gradient(135deg, rgba(190, 100, 120, 0.3), rgba(200, 120, 60, 0.3)) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; } .fl-search-container { position: relative !important; width: 100% !important; max-width: 760px !important; margin: 0 24px !important; background: #fff !important; border-radius: 16px !important; box-shadow: 0 30px 100px rgba(0, 0, 0, 0.3) !important; transform: translateY(-40px) scale(0.92) !important; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; overflow: hidden !important; } .fl-search-overlay.is-active .fl-search-container { transform: translateY(0) scale(1) !important; } .fl-search-close { position: absolute !important; top: 24px !important; right: 24px !important; z-index: 10 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 48px !important; padding: 0 !important; background: #f3f4f6 !important; border: none !important; border-radius: 50% !important; cursor: pointer !important; transition: background-color 0.2s, transform 0.35s !important; } .fl-search-close:hover { background-color: rgba(239, 68, 68, 0.1) !important; transform: rotate(90deg) !important; } .fl-search-close svg { width: 24px !important; height: 24px !important; stroke: #1f2937 !important; } .fl-search-close:hover svg { stroke: #ef4444 !important; } .fl-search-header { padding: 40px 40px 0 !important; text-align: center !important; } .fl-search-title { margin: 0 !important; font-size: 32px !important; font-weight: 800 !important; color: #1f2937 !important; letter-spacing: -1px !important; } .fl-search-box { padding: 28px 40px 24px !important; } .fl-search-input-wrap { position: relative !important; display: flex !important; align-items: center !important; } .fl-search-icon { position: absolute !important; left: 28px !important; width: 32px !important; height: 32px !important; stroke: #9ca3af !important; pointer-events: none !important; transition: stroke 0.2s !important; } .fl-search-input-wrap:focus-within .fl-search-icon { stroke: #f97316 !important; } .fl-search-input { width: 100% !important; padding: 26px 70px 26px 78px !important; font-size: 22px !important; font-family: inherit !important; font-weight: 500 !important; color: #1f2937 !important; background: #f3f4f6 !important; border: 3px solid transparent !important; border-radius: 20px !important; outline: none !important; transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s !important; box-sizing: border-box !important; } .fl-search-input::placeholder { color: #9ca3af !important; font-weight: 400 !important; } .fl-search-input:focus { border-color: #f97316 !important; background: #fff !important; box-shadow: 0 0 0 5px rgba(249, 115, 22, 0.12) !important; } .fl-search-hint { margin: 14px 0 0 !important; font-size: 14px !important; color: #9ca3af !important; text-align: center !important; } .fl-search-spinner { position: absolute !important; right: 28px !important; width: 32px !important; height: 32px !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.2s !important; } .fl-search-spinner.is-loading { opacity: 1 !important; visibility: visible !important; } .fl-search-spinner svg { width: 32px !important; height: 32px !important; stroke: #f97316 !important; animation: fl-spin 1s linear infinite !important; } @keyframes fl-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Search Results — Tile Grid */ .fl-search-results { overflow-y: auto !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } .fl-search-results::-webkit-scrollbar { display: none !important; } .fl-search-results:empty { display: none !important; } .fl-search-results-list { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; padding: 20px 40px !important; border-top: 1px solid #e5e7eb !important; } .fl-search-result-item { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 12px !important; text-decoration: none !important; border-radius: 12px !important; transition: background-color 0.15s, transform 0.15s !important; } .fl-search-result-item:hover { background-color: #f9fafb !important; transform: translateY(-2px) !important; } .fl-search-result-image { width: 100% !important; aspect-ratio: 1 !important; border-radius: 12px !important; overflow: hidden !important; background: #f3f4f6 !important; border: 1px solid #e5e7eb !important; margin-bottom: 10px !important; } .fl-search-result-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .fl-search-result-title { font-size: 13px !important; font-weight: 600 !important; color: #1f2937 !important; margin-bottom: 4px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; line-height: 1.3 !important; } .fl-search-result-price { font-size: 13px !important; color: #f97316 !important; font-weight: 700 !important; } .fl-search-show-all { padding: 16px 40px 20px !important; text-align: center !important; border-top: 1px solid #e5e7eb !important; } .fl-search-show-all-link { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 12px 28px !important; font-size: 15px !important; font-weight: 600 !important; color: #fff !important; background: linear-gradient(135deg, #f97316, #ea580c) !important; border-radius: 50px !important; text-decoration: none !important; transition: all 0.2s !important; } .fl-search-show-all-link:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4) !important; color: #fff !important; } .fl-search-show-all-link svg { transition: transform 0.2s !important; stroke: #fff !important; } .fl-search-show-all-link:hover svg { transform: translateX(3px) !important; } .fl-search-no-results { padding: 48px 40px !important; text-align: center !important; color: #6b7280 !important; font-size: 15px !important; border-top: 1px solid #e5e7eb !important; } /* Tags Cloud */ .fl-tags-cloud { padding: 28px 40px 36px !important; border-top: 1px solid #e5e7eb !important; background: linear-gradient(180deg, #f9fafb 0%, #fff 100%) !important; text-align: center !important; } .fl-tags-title { margin: 0 0 18px !important; font-size: 12px !important; font-weight: 700 !important; color: #9ca3af !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; } .fl-tags-list { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; justify-content: center !important; } .fl-tag { display: inline-flex !important; align-items: center !important; padding: 12px 22px !important; font-size: 14px !important; font-weight: 600 !important; color: #1f2937 !important; background: #fff !important; border: 2px solid #e5e7eb !important; border-radius: 50px !important; text-decoration: none !important; transition: all 0.2s !important; } .fl-tag:hover { color: #fff !important; background: linear-gradient(135deg, #f97316, #ec4899) !important; border-color: transparent !important; transform: translateY(-3px) !important; box-shadow: 0 8px 25px rgba(249, 115, 22, 0.4) !important; } /* BUTTONS */ .fl-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 14px 24px !important; font-size: 14px !important; font-weight: 600 !important; font-family: inherit !important; text-decoration: none !important; border-radius: 12px !important; border: none !important; cursor: pointer !important; transition: all 0.2s !important; box-sizing: border-box !important; } .fl-btn-primary { color: #fff !important; background: linear-gradient(135deg, #f97316, #ea580c) !important; } .fl-btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 25px rgba(249, 115, 22, 0.4) !important; color: #fff !important; } .fl-btn-secondary { color: #1f2937 !important; background: #fff !important; border: 2px solid #e5e7eb !important; } .fl-btn-secondary:hover { border-color: #f97316 !important; color: #f97316 !important; } .fl-btn-full { width: 100% !important; } /* ================================================================ MOBILE DROPDOWN BACKDROP (injected by JS) ================================================================ */ .fl-dropdown-backdrop { position: fixed !important; inset: 0 !important; z-index: 999998 !important; background: rgba(0, 0, 0, 0.5) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.3s ease, visibility 0.3s ease !important; pointer-events: none !important; } .fl-dropdown-backdrop.is-visible { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ================================================================ TELEPORTED DROPDOWN (appended to by JS on <=1024px) This is the key fix: dropdown escapes header stacking context by being a direct child of . ================================================================ */ .fl-dropdown-teleported { position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100vw !important; min-width: 100vw !important; max-width: 100vw !important; max-height: 85vh !important; border-radius: 28px 28px 0 0 !important; z-index: 999999 !important; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15) !important; background: #fff !important; overflow: hidden !important; /* Hidden by default, shown when .fl-dropdown-visible is added */ opacity: 0 !important; visibility: hidden !important; transform: translateY(100%) !important; pointer-events: none !important; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s !important; } .fl-dropdown-teleported::before { display: none !important; } .fl-dropdown-teleported.fl-dropdown-visible { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; pointer-events: auto !important; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s !important; transition-delay: 0s !important; } /* Teleported dropdown overrides for cart and account widths */ .fl-dropdown-teleported.fl-cart-dropdown, .fl-dropdown-teleported.fl-account-dropdown { width: 100vw !important; max-width: 100vw !important; max-height: 85vh !important; } /* Teleported account header radius */ .fl-dropdown-teleported .fl-account-header { border-radius: 28px 28px 0 0 !important; } /* Teleported: ensure all children respect box-sizing */ .fl-dropdown-teleported *, .fl-dropdown-teleported *::before, .fl-dropdown-teleported *::after { box-sizing: border-box !important; } /* Teleported mini cart layout */ .fl-dropdown-teleported .fl-mini-cart-content { display: flex !important; flex-direction: column !important; max-height: calc(85vh - 60px) !important; height: auto !important; overflow: hidden !important; } .fl-dropdown-teleported .fl-mini-cart-items { flex: 1 !important; overflow-y: auto !important; padding: 8px 0 !important; min-height: 0 !important; max-height: none !important; -webkit-overflow-scrolling: touch !important; } .fl-dropdown-teleported .fl-mini-cart-item { display: flex !important; flex-direction: row !important; align-items: center !important; padding: 0 !important; position: relative !important; border-bottom: 1px solid #f3f4f6 !important; } .fl-dropdown-teleported .fl-mini-cart-item-link { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 14px !important; padding: 14px 48px 14px 20px !important; flex: 1 !important; min-width: 0 !important; } .fl-dropdown-teleported .fl-mini-cart-item-image { width: 60px !important; height: 60px !important; flex-shrink: 0 !important; border-radius: 10px !important; } .fl-dropdown-teleported .fl-mini-cart-item-details { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; text-align: left !important; } .fl-dropdown-teleported .fl-mini-cart-item-title { font-size: 14px !important; line-height: 1.3 !important; margin-bottom: 0 !important; -webkit-line-clamp: 2 !important; text-align: left !important; } .fl-dropdown-teleported .fl-mini-cart-item-meta { font-size: 13px !important; display: flex !important; flex-wrap: wrap !important; gap: 4px !important; text-align: left !important; } .fl-dropdown-teleported .fl-mini-cart-remove { position: absolute !important; right: 14px !important; top: 50% !important; transform: translateY(-50%) !important; width: 28px !important; height: 28px !important; z-index: 5 !important; } .fl-dropdown-teleported .fl-mini-cart-remove svg { width: 14px !important; height: 14px !important; } .fl-dropdown-teleported .fl-mini-cart-footer { flex-shrink: 0 !important; padding: 18px 20px calc(env(safe-area-inset-bottom, 16px) + 18px) !important; border-top: 1px solid #e5e7eb !important; background: #f9fafb !important; border-radius: 0 !important; } .fl-dropdown-teleported .fl-mini-cart-subtotal { margin-bottom: 14px !important; } .fl-dropdown-teleported .fl-subtotal-value { font-size: 20px !important; } .fl-dropdown-teleported .fl-btn-checkout { width: 100% !important; max-width: 100% !important; padding: 14px 20px !important; font-size: 15px !important; box-sizing: border-box !important; } .fl-dropdown-teleported .fl-mini-cart-empty { padding: 40px 20px !important; } .fl-dropdown-teleported .fl-empty-cart-icon { width: 64px !important; height: 64px !important; } /* Teleported account footer */ .fl-dropdown-teleported .fl-account-footer { padding: 14px 20px calc(env(safe-area-inset-bottom, 16px) + 14px) !important; } .fl-dropdown-teleported .fl-account-nav-item { padding: 13px 20px !important; } .fl-dropdown-teleported .fl-logout-btn { box-sizing: border-box !important; } /* Guest state in teleported dropdown */ .fl-dropdown-teleported .fl-account-guest { padding: 36px 20px !important; } .fl-dropdown-teleported .fl-btn-primary, .fl-dropdown-teleported .fl-btn-secondary { box-sizing: border-box !important; max-width: 100% !important; } /* ================================================================ RESPONSIVE - Tablet + Mobile (max-width: 1024px) Dropdowns inside header are hidden (they get teleported to body) ================================================================ */ @media (max-width: 1024px) { /* Kill ALL dropdown visibility inside header icons. The dropdown has been teleported to , so these are just safety overrides for the original (now empty) location. */ .fl-header-icon .fl-dropdown, .fl-header-icon:hover .fl-dropdown, .fl-header-icon:focus-within .fl-dropdown, .fl-header-icon.is-active .fl-dropdown, .fl-dropdown:hover { opacity: 0 !important; visibility: hidden !important; transform: translateY(100%) !important; pointer-events: none !important; } /* Disable hover bridge on tablet/mobile */ .fl-header-icon::after { display: none !important; } } /* ================================================================ RESPONSIVE - Phone only overrides (max-width: 768px) ================================================================ */ @media (max-width: 768px) { .fl-dropdown-teleported .fl-mini-cart-item-link { gap: 12px !important; padding: 12px 44px 12px 16px !important; } .fl-dropdown-teleported .fl-mini-cart-item-image { width: 56px !important; height: 56px !important; border-radius: 8px !important; } .fl-dropdown-teleported .fl-mini-cart-item-title { font-size: 13px !important; } .fl-dropdown-teleported .fl-mini-cart-item-meta { font-size: 12px !important; } .fl-dropdown-teleported .fl-mini-cart-footer { padding: 16px 16px calc(env(safe-area-inset-bottom, 16px) + 16px) !important; } .fl-dropdown-teleported .fl-btn-checkout { padding: 14px 16px !important; font-size: 14px !important; } .fl-dropdown-teleported .fl-mini-cart-empty { padding: 40px 16px !important; } .fl-dropdown-teleported .fl-empty-cart-icon { width: 60px !important; height: 60px !important; } /* Account dropdown mobile */ .fl-dropdown-teleported .fl-account-footer { padding: 14px 16px calc(env(safe-area-inset-bottom, 16px) + 14px) !important; } .fl-dropdown-teleported .fl-account-nav-item { padding: 13px 16px !important; } .fl-dropdown-teleported .fl-account-guest { padding: 30px 16px !important; } /* Search Mobile */ .fl-search-overlay { padding-top: 0 !important; } .fl-search-container { max-width: 100% !important; margin: 0 !important; height: 100vh !important; border-radius: 0 !important; } .fl-search-title { font-size: 26px !important; } .fl-search-input { font-size: 18px !important; padding: 22px 60px 22px 64px !important; } .fl-search-icon { width: 26px !important; height: 26px !important; left: 22px !important; } .fl-search-results { max-height: calc(100vh - 340px) !important; } .fl-search-results-list { grid-template-columns: repeat(3, 1fr) !important; padding: 16px 20px !important; gap: 12px !important; } .fl-search-result-item { padding: 8px !important; } .fl-search-result-image { border-radius: 10px !important; } .fl-search-show-all { padding: 14px 20px 16px !important; } } /* SCROLLBAR */ .fl-mini-cart-items::-webkit-scrollbar, .fl-search-results::-webkit-scrollbar { width: 10px !important; } .fl-mini-cart-items::-webkit-scrollbar-track, .fl-search-results::-webkit-scrollbar-track { background: #f3f4f6 !important; border-radius: 5px !important; } .fl-mini-cart-items::-webkit-scrollbar-thumb, .fl-search-results::-webkit-scrollbar-thumb { background: #d1d5db !important; border-radius: 5px !important; } .fl-mini-cart-items::-webkit-scrollbar-thumb:hover, .fl-search-results::-webkit-scrollbar-thumb:hover { background: #9ca3af !important; } /* ACCESSIBILITY */ .fl-header-icon:focus { outline: 2px solid #f97316 !important; outline-offset: 2px !important; } .fl-header-icon:focus:not(:focus-visible) { outline: none !important; } .fl-header-icon:focus-visible { outline: 2px solid #f97316 !important; outline-offset: 2px !important; }