/* Minimal FOUC guard — link in or top of header before app.css loads. */ body { font-size: 1.125rem; line-height: 1.75rem; color: rgb(75 85 99 / var(--tw-text-opacity, 1)); } html:not(.app-ready) #app, html:not(.app-ready) #mobile-header-app { opacity: 0; } html.app-ready #app, html.app-ready #mobile-header-app { opacity: 1; } .material-symbol-icon { display: inline-block; width: 1em; height: 1em; max-width: 1.5rem; max-height: 1.5rem; line-height: 1; vertical-align: -0.125em; flex-shrink: 0; } header nav svg, .mobile-bottom-nav__icon svg { width: 1.375rem; height: 1.375rem; max-width: 1.5rem; max-height: 1.5rem; flex-shrink: 0; } details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; } img, svg { max-width: 100%; height: auto; } /* Date picker (hero cart + buy flow) — loaded in so it applies before JS chunks */ .hero-shopping-cart { overflow: visible; } .shopping-cart-datepicker-wrap { position: relative; overflow: visible; } .custom-datepicker, .custom-datepicker.v-date-picker { width: 20.5rem !important; min-width: 20.5rem !important; max-width: calc(100vw - 2rem) !important; background: #fff !important; border-radius: 0.75rem !important; border: 1px solid #e5e7eb !important; padding: 0.875rem 0.75rem 1rem !important; box-shadow: 0 4px 24px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06) !important; font-family: inherit !important; } .buy-datepicker-backdrop { touch-action: none; z-index: 100 !important; } .buy-datepicker-popover--mobile.custom-datepicker, .buy-datepicker-popover--mobile.custom-datepicker.v-date-picker { pointer-events: auto; z-index: 101 !important; } .hero-shopping-cart-root--datepicker-open .hero-cart-continue { position: relative; z-index: 1; } .buy-datepicker-popover, .buy-datepicker-popover--mobile { max-height: min(70vh, 320px); overflow-y: auto; } .custom-datepicker .v-picker, .custom-datepicker .v-picker__body, .custom-datepicker .v-date-picker-month, .custom-datepicker .v-date-picker-month__content, .custom-datepicker .v-date-picker-controls { width: auto !important; max-width: none !important; background: #fff !important; padding: 0 !important; } .custom-datepicker .v-date-picker-month__days { min-width: 18.5rem; } .custom-datepicker .v-picker__header-wrapper, .custom-datepicker .v-picker-title, .custom-datepicker .v-picker__header, .custom-datepicker .v-date-picker__title { display: none !important; } .custom-datepicker .v-date-picker-controls { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.5rem !important; padding: 0 0.125rem 0.625rem !important; min-height: 2.5rem !important; height: auto !important; overflow: visible !important; } .custom-datepicker .v-date-picker-controls__month, .custom-datepicker .v-date-picker-controls__year { display: flex !important; align-items: center !important; justify-content: center !important; flex: 1 1 0 !important; gap: 0.125rem !important; min-width: 0 !important; overflow: visible !important; } .custom-datepicker .v-date-picker-controls__only-month-btn, .custom-datepicker .v-date-picker-controls__only-year-btn, .custom-datepicker .v-date-picker-controls__month-btn, .custom-datepicker .v-date-picker-controls__year-btn { font-size: 0.875rem !important; font-weight: 600 !important; color: #333 !important; letter-spacing: 0 !important; text-transform: none !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; min-width: 0 !important; min-height: 1.75rem !important; height: 1.75rem !important; padding: 0 0.25rem !important; } .custom-datepicker .v-date-picker-controls__only-month-btn .v-btn__content, .custom-datepicker .v-date-picker-controls__only-year-btn .v-btn__content, .custom-datepicker .v-date-picker-controls__month-btn .v-btn__content, .custom-datepicker .v-date-picker-controls__year-btn .v-btn__content { color: #333 !important; } .custom-datepicker .v-date-picker-controls__only-month-btn.v-btn--active, .custom-datepicker .v-date-picker-controls__only-year-btn.v-btn--active, .custom-datepicker .v-date-picker-controls__only-month-btn.v-btn--selected, .custom-datepicker .v-date-picker-controls__only-year-btn.v-btn--selected { background: transparent !important; color: #333 !important; } .custom-datepicker .v-date-picker-controls .v-btn--icon { color: #999 !important; background: transparent !important; width: 1.5rem !important; height: 1.5rem !important; min-width: 1.5rem !important; flex-shrink: 0 !important; } .custom-datepicker .v-date-picker-controls .v-btn--icon .v-icon { font-size: 1.25rem !important; color: #999 !important; opacity: 1 !important; } .custom-datepicker .v-date-picker-controls__only-month-btn > .v-btn__append .v-icon, .custom-datepicker .v-date-picker-controls__only-year-btn > .v-btn__append .v-icon, .custom-datepicker .v-date-picker-controls__month-btn > .v-btn__append .v-icon, .custom-datepicker .v-date-picker-controls__year-btn > .v-btn__append .v-icon { font-size: 1.125rem !important; color: #666 !important; margin-inline-start: 0.125rem !important; } .custom-datepicker .v-date-picker-month__weekday { color: #666 !important; font-size: 0.6875rem !important; font-weight: 500 !important; height: 1.5rem !important; } .custom-datepicker .v-date-picker-month__day { height: 2rem !important; } .custom-datepicker .v-date-picker-month__day-btn { font-size: 0.8125rem !important; font-weight: 400 !important; color: #333 !important; width: 2rem !important; height: 2rem !important; min-width: 2rem !important; border-radius: 9999px !important; } .custom-datepicker .v-date-picker-month__day--disabled .v-date-picker-month__day-btn, .custom-datepicker .v-date-picker-month__day-btn.v-btn--disabled { color: #ccc !important; opacity: 1 !important; } .custom-datepicker .v-date-picker-month__day--selected .v-date-picker-month__day-btn, .custom-datepicker .v-date-picker-month__day-btn.v-btn--selected, .custom-datepicker .v-date-picker-month__day-btn.v-btn--active { background: #222 !important; color: #fff !important; } .custom-datepicker .v-date-picker-month__day--adjacent { visibility: hidden !important; pointer-events: none !important; } @media (max-width: 767px) { .buy-datepicker-popover--mobile.custom-datepicker, .buy-datepicker-popover--mobile.custom-datepicker.v-date-picker { position: fixed !important; left: 50% !important; top: 36% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; margin: 0 !important; width: min(calc(100vw - 2rem), 20.5rem) !important; min-width: min(calc(100vw - 2rem), 20.5rem) !important; max-width: calc(100vw - 2rem) !important; z-index: 101 !important; } .buy-datepicker-backdrop { z-index: 100 !important; } .custom-datepicker.v-date-picker, .custom-datepicker.buy-datepicker-popover { width: min(calc(100vw - 2rem), 20.5rem) !important; max-width: calc(100vw - 2rem) !important; } } @media (min-width: 768px) { .shopping-cart-datepicker-wrap .custom-datepicker.v-date-picker, .shopping-cart-datepicker-wrap .custom-datepicker.buy-datepicker-popover { left: inherit !important; right: 0 !important; width: auto !important; min-width: max-content !important; max-width: max-content !important; } }