.casablanca-drawer {
    position: fixed;
    top: 0;
    inset-inline-start: 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;
}

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

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

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

.drawer-content {
    position: absolute;
    top: 0;
    inset-inline-start: 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);
    will-change: transform;
}

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

.drawer-header {
    background-color: var(--casablanca-c-drawer-header, var(--casablanca-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;
}

.drawer-close svg {
    width: var(--casablanca-icon-size-2xl);
    height: var(--casablanca-icon-size-2xl);
}

/* ── Navigation drawer header: same ground as the panel ────────────────
 *
 * The base rules above paint the header `var(--casablanca-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(--casablanca-text-primary, #111827);
}

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

.menu-drawer .drawer-close {
    color: var(--casablanca-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(--casablanca-text-primary, #111827);
    background: #fff;
    border: 1px solid var(--casablanca-border, #e5e7eb);
    border-radius: calc(var(--casablanca-radius, 5px) * 1.2); /* 6px at the default — Corner Radius */
}

/* Smaller hint text only: the field itself must stay 16px (iOS zoom). */
.drawer-search .search-field::placeholder {
    color: #9ca3af;
    font-size: 13px;
}

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

.drawer-search .search-submit {
    inset-inline-start: 10px;
    color: var(--casablanca-text-secondary, #6b7280);
}

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

/* Compact results in the narrow drawer (the header bar keeps its sizes). */
.drawer-search .search-result-item {
    gap: 10px;
    padding: 6px 8px;
}

.drawer-search .result-image {
    width: 44px;
    height: 44px;
}

.drawer-search .result-info {
    gap: 2px;
    min-width: 0;
}

.drawer-search .result-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.drawer-search .result-price ins,
.drawer-search .result-price > .amount,
.drawer-search .result-price ins .amount {
    font-size: 12px;
}

.drawer-search .result-price del {
    font-size: 10px;
}

.drawer-search .view-all-results {
    font-size: 11px;
}

.drawer-search .no-results {
    font-size: 12px;
}

/* 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;
}

.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 {
    color: var(--casablanca-c-drawer-accent, var(--casablanca-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;
}

.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;
}

/* ── Drawer account link (mobile only) ────────────────────────────────
 *
 * Replaces the header's .action-account icon on mobile. Sits directly
 * below the navigation links with the same padding, font, weight and
 * border as .mobile-menu li a — it is a visual peer, not a card. */
.drawer-account-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: #000;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    border-bottom: 1px solid #f0f0f0;
}
.drawer-account-link:focus {
    color: var(--casablanca-c-drawer-accent, var(--casablanca-brand, #531628));
}
.drawer-account-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.drawer-account-icon svg {
    width: var(--casablanca-icon-size-xl);
    height: var(--casablanca-icon-size-xl);
    color: var(--casablanca-c-drawer-accent, var(--casablanca-brand));
}
/* Hidden on desktop — the header keeps its own .action-account there. */
@media (min-width: 1024px) {
    .drawer-account-link {
        display: none;
    }
}

/* ── 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. --casablanca-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.
 *
 * --casablanca-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(--casablanca-scroll-lock-top, 0px);
    inset-inline-start: 0;
    width: 100%;
    padding-inline-end: var(--casablanca-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;
}