.opsim-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* height:100% first as the fallback, then the dynamic viewport unit for
       browsers that have it: on mobile Safari and Chrome the URL bar
       collapsing changes the visible height, and 100dvh tracks it, so the
       panel is never cut off behind the browser chrome. A browser that does
       not know dvh simply ignores the second declaration. */
    height: 100%;
    height: 100dvh;
    z-index: 100001;
    visibility: hidden;
    transition: visibility 0.3s ease;
}

.opsim-drawer.is-active {
    visibility: visible;
}

.drawer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.opsim-drawer.is-active .drawer-overlay {
    opacity: 1;
}

.drawer-content {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    width: 80%;
    max-width: 350px;
    height: 100%;
    height: 100dvh;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    will-change: transform;
}

.opsim-drawer.is-active .drawer-content {
    transform: translateX(0);
}

.drawer-header {
    background-color: var(--opsim-brand, #531628);
    color: #fff;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}

.drawer-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.drawer-close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.drawer-close:hover {
    opacity: 0.8;
}

.drawer-close svg {
    width: 20px;
    height: 20px;
}

/* ── Navigation drawer header: same ground as the panel ────────────────
 *
 * The base rules above paint the header `var(--opsim-brand)` with white on
 * top. On this store the brand is #000000, so the nav drawer opened with a
 * black bar above a white menu. These three rules drop that band so the header
 * sits on the same #fff as `.drawer-content`, matching the cart and categories
 * drawers, which already use a white header with dark text.
 *
 * Scoped to `.menu-drawer` on purpose: `.drawer-header`, `.drawer-title` and
 * `.drawer-close` are the SHARED base for all three drawers, and editing them
 * unscoped would reach into components this change has nothing to do with.
 *
 * Only the colours change. Layout, padding, height, font size/weight,
 * transform, letter-spacing, the close button's hover and the icon size all
 * still come from the base rules above — the foreground has to move with the
 * background or the title and the X would be white on white.
 */
.menu-drawer .drawer-header {
    background-color: #fff;
    /* The base rule sets `color: #fff` for the dark bar. Reset it here too, so
       anything added to this header later inherits readable ink rather than
       arriving invisible. */
    color: var(--opsim-text-primary, #111827);
}

.menu-drawer .drawer-title {
    color: var(--opsim-text-primary, #111827);
}

.menu-drawer .drawer-close {
    color: var(--opsim-text-primary, #111827);
}

/* ── Drawer search (mobile/tablet) ──────────────────────────────────────
 *
 * Reuses the header bar's .header-search-form / .search-field / .search-submit
 * / .search-close rules from main-header.css; only what differs is set here.
 * The results popup is the header's own #search-results-dropdown, which
 * search.js moves in after this form while it is in use, so it opens over the
 * menu links inside the drawer instead of behind the overlay. */
.drawer-search {
    position: relative;
    flex-shrink: 0;
    padding: 4px 20px 14px;
    border-bottom: 1px solid #f0f0f0;
}

.drawer-search .search-field {
    height: 42px;
    padding: 0 40px 0 42px;
    font-size: 16px; /* iOS Safari zooms into any field under 16px. */
    color: var(--opsim-text-primary, #111827);
    background: #fff;
    border: 1px solid var(--opsim-border, #e5e7eb);
    border-radius: 6px;
}

.drawer-search .search-field::placeholder {
    color: #9ca3af;
}

.drawer-search .search-field:focus {
    border-color: var(--opsim-text-primary, #111827);
}

.drawer-search .search-submit {
    left: 10px; /* 24px target; the icon stays where the 20px box centred it. */
    color: var(--opsim-text-secondary, #6b7280);
}

.drawer-search .search-results-dropdown {
    position: absolute;
    top: calc(100% - 6px);
    left: 20px;
    right: 20px;
    width: auto;
    max-height: calc(100dvh - 150px);
    overscroll-behavior: contain;
}

/* The header bar is the only search on desktop. */
@media (min-width: 1024px) {
    .drawer-search {
        display: none;
    }
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    /* Stops a flick that reaches the end of the drawer's list from scrolling
       the page behind it (Chrome, Edge, Firefox; harmlessly ignored on older
       Safari, where the fixed body already prevents it). */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0;
}

.mobile-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu li {
    border-bottom: 1px solid #f0f0f0;
}

.mobile-menu li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    color: #000;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.mobile-menu li.menu-item-has-children > a::after {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 9L12 15L5 9' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}

.mobile-menu li.current-menu-item > a,
.mobile-menu li a:hover {
    color: var(--opsim-brand, #531628);
}

.mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #fcfcfc;
    display: none; 
}

.mobile-menu li.is-open > ul {
    display: block; 
}

.mobile-menu li.menu-item-has-children > a::after {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 9L12 15L5 9' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    transition: transform 0.3s ease;
}

.mobile-menu li.is-open > a::after {
    transform: rotate(180deg);
}

.mobile-menu ul li {
    border-bottom: 1px solid #f5f5f5;
}

.mobile-menu ul li:last-child {
    border-bottom: none;
}

.mobile-menu ul li a {
    padding: 10px 20px 10px 40px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: none;
}

.mobile-menu ul li a:hover {
    color: var(--opsim-brand);
}

/* ── Background scroll lock ────────────────────────────────────────────
 *
 * Driven by assets/js/modules/scroll-lock.js, which publishes the two custom
 * properties below. Read that file's header for the full story; the short
 * version is that this rule used to be:
 *
 *     html.drawer-open, body.drawer-open { overflow: hidden; height: 100%; }
 *
 * `overflow: hidden` removes the scrollbar, which makes the viewport ~15px
 * WIDER on every browser with classic scrollbars. The whole page reflowed
 * underneath the drawer — on a product page the 45% gallery column and its
 * width:100% image visibly resized — and snapped back on close. `height: 100%`
 * additionally discarded the scroll position, and on iOS Safari the rule did
 * not lock anything at all.
 *
 * position: fixed is the only technique iOS honours. --opsim-scroll-lock-top
 * is the negative scroll offset, so the same content stays under the viewport,
 * and the JS scrolls back to it on release.
 *
 * --opsim-scrollbar-width puts back exactly the gutter that fixing the body
 * removes, so THE DOCUMENT'S CONTENT WIDTH DOES NOT CHANGE. It is 0 wherever
 * scrollbars are overlays (every phone, macOS by default), where this whole
 * compensation is correctly a no-op. Global box-sizing: border-box (base.css)
 * is what makes the padding shrink the content box rather than grow the body.
 *
 * <html> is deliberately NOT targeted any more — locking the scrolling element
 * is what caused the reflow. */
body.drawer-open {
    position: fixed;
    top: var(--opsim-scroll-lock-top, 0px);
    left: 0;
    width: 100%;
    padding-right: var(--opsim-scrollbar-width, 0px);
    /* A phone can still rubber-band the fixed body; this keeps the gesture in
       the drawer instead of chaining out to the page behind it. */
    overscroll-behavior: none;
}