/* What the storefront's scripts rely on, whatever a site's design looks like: menus open and close,
   the phone menu folds away, tabs switch, an element marked hidden stays hidden, and a menu entry
   meant for one kind of screen shows only there. This file always loads before the theme, so a
   site that replaces the theme with its own (public/theme/theme.css) keeps all of it. Only showing
   and hiding lives here; how anything looks belongs to the theme. */

[hidden] { display: none !important; }

/* Simple dropdowns: shut until hovered, focused, or opened by the script (.is-open). */
.main-nav .submenu { display: none; }
.nav-item:hover > .submenu,
.nav-item:focus-within > .submenu,
.nav-item.is-open > .submenu { display: block; }

/* Mega-menu panels: the script marks the navigation [data-enhanced] once it has taken over. */
.menu-panel { display: none; }
.nav-item.is-open > .menu-panel { display: grid; }
.main-nav:not([data-enhanced]) .nav-item:hover > .menu-panel,
.main-nav:not([data-enhanced]) .nav-item:focus-within > .menu-panel { display: grid; }

.menu-toggle { display: none; }

/* Phone: the menu button opens the whole navigation, and entries open on a tap rather than a hover. */
@media (max-width: 900px) {
    .menu-toggle { display: inline-flex; }
    .main-nav { display: none; }
    .main-nav.is-open { display: block; }
    .nav-item:hover > .submenu,
    .nav-item:focus-within > .submenu { display: none; }
    .nav-item.is-open > .submenu { display: block; }
    .main-nav:not([data-enhanced]) .nav-item:hover > .menu-panel { display: none; }
    .main-nav:not([data-enhanced]) .nav-item:focus-within > .menu-panel { display: grid; }
}

/* Menu entries meant for one kind of screen (MenuItem::devices); the navigation switches at 901 px. */
@media (min-width: 901px) {
    .nav-item--only-mobile,
    .menu-entry--only-mobile { display: none !important; }
}
@media (max-width: 900px) {
    .nav-item--only-desktop,
    .menu-entry--only-desktop { display: none !important; }
}

/* Tabs inside page copy (the legacy pages' Bootstrap tabs). */
.cms-content .tab-content > .tab-pane { display: none; }
.cms-content .tab-content > .tab-pane.active { display: block; }

/* Scroll-in animation, as the legacy storefront did it (deferred animation). An element marked
   .deferred-animation waits out of sight and fades into place as it scrolls into view; the script in
   storefront.js moves it through .da-added, .da-applied and .da-completed. Nothing is hidden unless
   the layout's head script has switched it on (html.da-on): never without IntersectionObserver, never
   for a visitor who asks the system to reduce motion, never if the storefront script does not load. */
@media not print { .da-on .deferred-animation { opacity: 0; } }
@media (max-width: 767.9px) { .da-on .deferred-animation.no-mobile-animation { opacity: initial; } }
:not(.da-completed)[class*="da-fade"] { opacity: 0; transition-property: opacity, transform; }
:not(.da-completed)[class*="da-fade"].da-applied { opacity: 1; transform: translate(0); }
:not(.da-completed).da-fade-up { transform: translateY(30px); }
:not(.da-completed).da-fade-up-2x { transform: translateY(60px); }
:not(.da-completed).da-fade-up-3x { transform: translateY(90px); }
:not(.da-completed).da-fade-up-4x { transform: translateY(120px); }
:not(.da-completed).da-fade-down { transform: translateY(-30px); }
:not(.da-completed).da-fade-down-2x { transform: translateY(-60px); }
:not(.da-completed).da-fade-down-3x { transform: translateY(-90px); }
:not(.da-completed).da-fade-down-4x { transform: translateY(-120px); }
:not(.da-completed).da-fade-left { transform: translateX(30px); }
:not(.da-completed).da-fade-left-2x { transform: translateX(60px); }
:not(.da-completed).da-fade-left-3x { transform: translateX(90px); }
:not(.da-completed).da-fade-left-4x { transform: translateX(120px); }
:not(.da-completed).da-fade-right { transform: translateX(-30px); }
:not(.da-completed).da-fade-right-2x { transform: translateX(-60px); }
:not(.da-completed).da-fade-right-3x { transform: translateX(-90px); }
:not(.da-completed).da-fade-right-4x { transform: translateX(-120px); }
:not(.da-completed).da-easing-ease-in-quad { transition-timing-function: cubic-bezier(.55, .085, .68, .53); }
:not(.da-completed).da-easing-ease-out-quad { transition-timing-function: cubic-bezier(.25, .46, .45, .94); }
:not(.da-completed).da-easing-ease-in-out-quad { transition-timing-function: cubic-bezier(.455, .03, .515, .955); }
:not(.da-completed).da-duration-100 { transition-duration: 0.1s; animation-duration: 0.1s; }
:not(.da-completed).da-duration-200 { transition-duration: 0.2s; animation-duration: 0.2s; }
:not(.da-completed).da-duration-300 { transition-duration: 0.3s; animation-duration: 0.3s; }
:not(.da-completed).da-duration-400 { transition-duration: 0.4s; animation-duration: 0.4s; }
:not(.da-completed).da-duration-500 { transition-duration: 0.5s; animation-duration: 0.5s; }
:not(.da-completed).da-duration-600 { transition-duration: 0.6s; animation-duration: 0.6s; }
:not(.da-completed).da-duration-700 { transition-duration: 0.7s; animation-duration: 0.7s; }
:not(.da-completed).da-duration-800 { transition-duration: 0.8s; animation-duration: 0.8s; }
:not(.da-completed).da-duration-900 { transition-duration: 0.9s; animation-duration: 0.9s; }
:not(.da-completed).da-duration-1000 { transition-duration: 1s; animation-duration: 1s; }
:not(.da-completed).da-duration-1100 { transition-duration: 1.1s; animation-duration: 1.1s; }
:not(.da-completed).da-duration-1200 { transition-duration: 1.2s; animation-duration: 1.2s; }
:not(.da-completed).da-duration-1300 { transition-duration: 1.3s; animation-duration: 1.3s; }
:not(.da-completed).da-duration-1400 { transition-duration: 1.4s; animation-duration: 1.4s; }
:not(.da-completed).da-duration-1500 { transition-duration: 1.5s; animation-duration: 1.5s; }
:not(.da-completed).da-duration-1600 { transition-duration: 1.6s; animation-duration: 1.6s; }
:not(.da-completed).da-duration-1700 { transition-duration: 1.7s; animation-duration: 1.7s; }
:not(.da-completed).da-duration-1800 { transition-duration: 1.8s; animation-duration: 1.8s; }
:not(.da-completed).da-duration-1900 { transition-duration: 1.9s; animation-duration: 1.9s; }
:not(.da-completed).da-duration-2000 { transition-duration: 2s; animation-duration: 2s; }