/*
 * component-modal-fix.css
 *
 * The Shopify "Dawn" theme this site was converted from normally ships a
 * component-modal.css file that hides the contents of every native
 * <details>-based modal (search flyout, cart drawer, quick-add, etc.)
 * until the <details> is opened. That file does not exist anywhere in
 * this project's public/assets/vendor/css folder.
 *
 * Without it, base.css's ".modal__content { display: flex; ... }" rule
 * (an ordinary author-level rule) overrides the browser's own default
 * behavior of hiding non-summary children of a closed <details>, so
 * every modal (most visibly the header search flyout) rendered open,
 * unstyled and full-size on every page load.
 *
 * This file restores the missing "closed by default" behavior. It only
 * takes effect while a <details> does NOT have the open attribute;
 * base.css's own "details[open] > .search-modal { opacity: 1; ... }"
 * (and equivalent rules) still control the opened/animated state.
 */

details:not([open]) > .modal__content {
    display: none;
}

details:not([open]) .modal-overlay {
    display: none;
}

/*
 * Positioning is another piece the missing component-modal.css would have
 * supplied. base.css's ".modal__content" rule uses "position: absolute;
 * inset: 0", which sizes the panel to whatever positioned ancestor it
 * happens to land inside -- for the header search flyout that's
 * ".header-wrapper" (position: relative in base.css), which is only as
 * tall as the header bar itself (~60px). The result: clicking the search
 * icon "opened" the dialog (the <details> got its open attribute, the
 * close button and overflow-hidden all fired correctly) but the panel
 * rendered as a sliver clipped to the header's own height, with no visible
 * input field -- indistinguishable from the icon doing nothing. Same
 * problem for every other .modal__content dialog (product quick-add,
 * size-chart popups, etc.), whatever ancestor they happen to nest under.
 * Forcing position: fixed makes every one of these dialogs size against
 * the viewport itself, regardless of ancestor, matching how the real Dawn
 * theme's search/quick-add modals actually render full-screen.
 */
.modal__content {
    position: fixed;
}

/*
 * .header__sticky-search
 *
 * Separate issue, same root cause (a piece of the original Dawn theme
 * missing from this conversion). The real Dawn theme's sticky header
 * shows a compact "mini search bar" (.header__sticky-search) in place
 * of the shrunk logo once the visitor scrolls down -- but that requires
 * a sticky-header.js custom element (defines <sticky-header>, adds a
 * "shrink" class on scroll) which does not exist anywhere in this
 * project's public/assets/vendor/js folder, and no CSS ships to keep
 * this element hidden until that scroll state is reached either.
 *
 * Without either piece, <sticky-header> renders as an unknown/undefined
 * custom element and .header__sticky-search rendered as a plain,
 * unstyled block-level <form> with full-size default SVG icons --
 * pushed into the normal page flow on every load, not just on scroll.
 *
 * Until the sticky/shrink behavior is (re)built, the correct default
 * state is hidden -- exactly like the real theme before you scroll.
 */

.header__sticky-search {
    display: none;
}