/* ─────────────────────────────────────────────────────────────────
   Header popups + the trigger that opens them.

   Shared between the storefront home (index.blade.php) and the
   product page (product_page.blade.php). The CSS used to live as
   an inline <style> block inside index only, so the product page
   rendered the same popup HTML but with no styling — clicking the
   profile icon "opened" the popup invisibly and the icon itself
   was unstyled. Lifting it into a component file fixes both.

   Currently contains the profile popup + the .nav-profile-trigger
   button styling. The search popup styles still live inline inside
   index.blade.php and can move here later if the product page
   needs them too.
   ───────────────────────────────────────────────────────────────── */

/* ════════ Profile popup — matches the search-overlay aesthetic ════════ */
.store-profile-popup {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Max-safe z-index + isolation so the popup creates its own
       stacking context that no theme override can climb above. The
       merchant reported the side menu sidebar still covering the
       popup at tablet width after the previous 99000 bump — sealing
       this with isolation:isolate so the popup is in its own layer
       regardless of cascade order. */
    z-index: 2147483640;
    isolation: isolate;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    opacity: 0;
    transition: opacity 0.28s ease;
}
.store-profile-popup.is-open {
    display: flex !important;
    opacity: 1 !important;
    /* Re-assert the popup's stacking context here too — a `.is-open`
       class swap could theoretically pick up a stacking-context-killing
       rule from a theme; sealing the open state with isolation +
       position keeps the popup unconditionally above the side-menu
       sidebar at every viewport, including tablet. */
    z-index: 2147483640 !important;
    isolation: isolate;
    position: fixed !important;
    inset: 0 !important;
}
.store-profile-popup__close {
    position: absolute;
    top: 24px;
    inset-inline-end: 24px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.store-profile-popup__close:hover {
    background: rgba(255,255,255,0.22);
    transform: rotate(90deg);
}
/* Back button — sits next to the close button in the dark overlay
   when a sub-view (e.g. the login form) is showing inside the same
   card. Same chrome as the close button so they read as a pair. */
.store-profile-popup__back {
    position: absolute;
    top: 24px;
    /* close lives at inset-inline-end:24px (44px wide) — place back at
       24 + 44 + 12 = 80px so they sit side-by-side with a small gap. */
    inset-inline-end: 80px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, transform 0.2s;
}
.store-profile-popup__back:hover {
    background: rgba(255,255,255,0.22);
    transform: translateX(-2px);
}
[dir="rtl"] .store-profile-popup__back svg { transform: scaleX(-1); }
[dir="rtl"] .store-profile-popup__back:hover { transform: translateX(2px); }
.store-profile-popup__back[hidden] { display: none !important; }

/* View slot — main + auth share the same card; hidden attribute hides
   the inactive one. Inputs get a touch of breathing room over the
   default modal-body, since the auth view's content is denser. */
.store-profile-popup__view[hidden] { display: none !important; }

/* Loader — placeholder shown while the auth view's HTML is fetching.
   Single soft pulsing line so it reads as "loading" without committing
   to a layout that might mismatch the incoming content. */
.store-profile-popup__loader {
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0.05) 100%);
    background-size: 200% 100%;
    animation: profile-loader-pulse 1.2s ease-in-out infinite;
    margin: 20px auto;
    max-width: 60%;
}
@keyframes profile-loader-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
html[data-scheme="dark"] .store-profile-popup__loader {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 100%);
}

/* When the login HTML is injected inside the welcome popup card, strip
   its own card chrome — the parent .store-profile-popup__card already
   provides the white surface, padding, radius, shadow. Without this,
   the user would see a card-inside-a-card with doubled padding. */
.store-profile-popup__view[data-profile-view="auth"] .customer-login-popup,
.store-profile-popup__view[data-profile-view="auth"] .customer-login-popup__card {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}
.store-profile-popup__card {
    max-width: 460px;
    width: 100%;
    background: #fff;
    border-radius: 22px;
    padding: 36px 28px 28px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
    animation: profile-pop-in 0.42s cubic-bezier(0.22,0.61,0.36,1) both;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
@keyframes profile-pop-in {
    from { transform: translateY(20px) scale(0.96); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Head */
.store-profile-popup__head {
    text-align: center;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 22px;
}
.store-profile-popup__avatar {
    width: 84px; height: 84px;
    margin: 0 auto 14px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #111 0%, #3a3a3a 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}
.store-profile-popup__avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.store-profile-popup__avatar-letter {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}
.store-profile-popup__hero-icon {
    width: 76px; height: 76px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #111;
    border: 1px solid rgba(0,0,0,0.06);
}
.store-profile-popup__name {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: #0e1015;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.store-profile-popup__email {
    margin: 6px 0 0;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
}

/* Actions */
.store-profile-popup__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.store-profile-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    background: #fafaf9;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    cursor: pointer;
    text-align: start;
    text-decoration: none;
    color: #0e1015;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.store-profile-tile:hover {
    background: #f3f4f6;
    border-color: rgba(0,0,0,0.12);
    transform: translateY(-1px);
    text-decoration: none;
    color: #0e1015;
}
.store-profile-tile:active { transform: translateY(0); }
.store-profile-tile__icon {
    width: 40px; height: 40px;
    border-radius: 11px;
    background: #fff;
    color: #111;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.06);
}
.store-profile-tile__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.store-profile-tile__label {
    font-size: 14.5px;
    font-weight: 600;
    color: #0e1015;
    letter-spacing: -0.005em;
    line-height: 1.25;
}
.store-profile-tile__hint {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.3;
}
.store-profile-tile__chev {
    color: #9ca3af;
    flex-shrink: 0;
    display: inline-flex;
    transition: transform 0.15s, color 0.15s;
}
[dir="rtl"] .store-profile-tile__chev { transform: scaleX(-1); }
.store-profile-tile:hover .store-profile-tile__chev {
    color: #111;
    transform: translateX(2px);
}
[dir="rtl"] .store-profile-tile:hover .store-profile-tile__chev {
    transform: scaleX(-1) translateX(2px);
}

/* Primary CTA (logged-out: Sign in) — same dark filled style as the cart
   primary button so the visual language is consistent across the storefront. */
.store-profile-tile.store-profile-tile--primary {
    background: #0e1015;
    border-color: #0e1015;
    color: #fff;
}
.store-profile-tile.store-profile-tile--primary:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}
.store-profile-tile.store-profile-tile--primary .store-profile-tile__icon {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.14);
    color: #fff;
}
.store-profile-tile.store-profile-tile--primary .store-profile-tile__label,
.store-profile-tile.store-profile-tile--primary .store-profile-tile__hint,
.store-profile-tile.store-profile-tile--primary .store-profile-tile__chev {
    color: #fff;
}
.store-profile-tile.store-profile-tile--primary .store-profile-tile__hint {
    color: rgba(255,255,255,0.65);
}

/* Danger (logout) — red accent on the icon, hover reveals the destructive intent */
.store-profile-tile.store-profile-tile--danger { margin-top: 4px; }
.store-profile-tile.store-profile-tile--danger .store-profile-tile__icon {
    color: #dc2626;
    background: #fef2f2;
    border-color: #fecaca;
}
.store-profile-tile.store-profile-tile--danger:hover {
    background: #fef2f2;
    border-color: #fecaca;
}
.store-profile-tile.store-profile-tile--danger:hover .store-profile-tile__label {
    color: #b91c1c;
}

/* ════════ Customer login popup — uses the welcome popup's class system
   (.store-profile-popup__head + .store-profile-tile) so the head, hero
   icon, CTA tile, and dark-scheme overrides all come for free. Only the
   form fields are net-new and styled here to fit the same aesthetic. ════════ */
#commonModal:has(.customer-login-popup) .modal-content {
    background: transparent;
    border: 0;
    box-shadow: none;
}
#commonModal:has(.customer-login-popup) .modal-header { display: none; }
.customer-login-popup {
    padding: 0;
    background: transparent;
}
.customer-login-popup__card {
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    border-radius: 22px;
    padding: 36px 28px 28px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.18);
}
.customer-login-popup__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 8px;
}
.customer-login-popup__field {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
}
.customer-login-popup__field-icon {
    position: absolute;
    top: 50%;
    inset-inline-start: 14px;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    display: inline-flex;
}
.customer-login-popup__input.customer-login-popup__input {
    width: 100%;
    padding: 13px 14px 13px 42px;
    background: #fafaf9;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    font: inherit;
    font-size: 14.5px;
    color: #0e1015;
    transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
    outline: none;
    box-shadow: none;
    height: auto;
}
[dir="rtl"] .customer-login-popup__input.customer-login-popup__input {
    padding: 13px 42px 13px 14px;
}
.customer-login-popup__input::placeholder { color: #9ca3af; }
.customer-login-popup__input:focus {
    background: #fff;
    border-color: #0e1015;
    box-shadow: 0 0 0 3px rgba(14,16,21,0.08);
}
.customer-login-popup__field:focus-within .customer-login-popup__field-icon {
    color: #0e1015;
}
.customer-login-popup__error {
    color: #dc2626;
    font-size: 12px;
    margin: -4px 2px 4px;
    text-align: start;
}
/* The submit tile sits flush against the field stack — give it a bit
   more breathing room than the inputs above so it visually anchors
   the form. */
.customer-login-popup__submit { margin-top: 6px; cursor: pointer; }
/* Submit tile is a <button>, not <a> — make sure baseline button styles
   (background:none, padding, alignment) don't override the .store-profile-tile
   look. */
button.customer-login-popup__submit {
    font: inherit;
    text-align: start;
}
.customer-login-popup__register { margin-top: 4px; }

/* Dark scheme — input parity with the welcome popup tiles. */
html[data-scheme="dark"] .customer-login-popup__card {
    background: #15151b;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(255, 255, 255, 0.04);
}
html[data-scheme="dark"] .customer-login-popup__input.customer-login-popup__input {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: #e8ecf4;
}
html[data-scheme="dark"] .customer-login-popup__input::placeholder { color: rgba(255, 255, 255, 0.4); }
html[data-scheme="dark"] .customer-login-popup__input:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: #e8ecf4;
    box-shadow: 0 0 0 3px rgba(232, 236, 244, 0.12);
}
html[data-scheme="dark"] .customer-login-popup__field-icon { color: rgba(255, 255, 255, 0.45); }
html[data-scheme="dark"] .customer-login-popup__field:focus-within .customer-login-popup__field-icon {
    color: #e8ecf4;
}

@media (max-width: 640px) {
    .customer-login-popup__card { padding: 28px 20px 22px; border-radius: 18px; }
}

/* ════════ Profile trigger button — same visual weight as cart/search ════════ */
.nav-profile-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    margin: 0 4px !important;
    background: rgba(0,0,0,0.05) !important;
    border: 1px solid rgba(0,0,0,0.07) !important;
    color: var(--text, #1a1a1a) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    flex-shrink: 0;
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s, transform .15s !important;
    line-height: 1;
}
.nav-profile-trigger:hover {
    background: rgba(0,0,0,0.08) !important;
    border-color: rgba(0,0,0,0.12) !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}
.nav-profile-trigger:active { transform: translateY(0); }
.nav-profile-trigger svg { width: 20px; height: 20px; }
/* Subtle dot when the customer is signed in, so the merchant can see
   the auth state at a glance — same idea as Amazon/Apple do in their nav. */
.nav-profile-trigger.is-auth {
    position: relative;
}
.nav-profile-trigger.is-auth::after {
    content: '';
    position: absolute;
    top: 7px;
    inset-inline-end: 7px;
    width: 8px; height: 8px;
    background: #16a34a;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
}

/* Respect body.icon-shape-* (matches cart/search rounding). */
body.icon-shape-rounded .nav-profile-trigger { border-radius: 12px !important; }
body.icon-shape-square  .nav-profile-trigger { border-radius: 4px !important; }
body.icon-shape-flat    .nav-profile-trigger {
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 0 !important;
}

@media (max-width: 640px) {
    .store-profile-popup { padding: 16px; }
    .store-profile-popup__card { padding: 28px 20px 22px; border-radius: 18px; }
    .store-profile-popup__avatar { width: 72px; height: 72px; }
    .store-profile-popup__name { font-size: 17px; }
}

/* ════════ Dark scheme ════════
   When the merchant picks 'כהה' in the builder, html[data-scheme="dark"]
   is set. The popup card, tiles, borders, and text all need an explicit
   dark counterpart — the light defaults above hardcode #fff / #fafaf9
   / #0e1015, none of which adapt on their own. */
html[data-scheme="dark"] .store-profile-popup__card {
    background: #15151b;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(255, 255, 255, 0.04);
}
html[data-scheme="dark"] .store-profile-popup__head {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
html[data-scheme="dark"] .store-profile-popup__name { color: #e8ecf4; }
html[data-scheme="dark"] .store-profile-popup__email { color: #9ca3af; }
html[data-scheme="dark"] .store-profile-popup__avatar {
    background: linear-gradient(135deg, #2a2a33 0%, #4a4a52 100%);
}
html[data-scheme="dark"] .store-profile-popup__hero-icon {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
    color: #e8ecf4;
}
html[data-scheme="dark"] .store-profile-popup__close {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.18);
    color: #e8ecf4;
}
html[data-scheme="dark"] .store-profile-popup__close:hover {
    background: rgba(255, 255, 255, 0.18);
}
/* Tiles — neutral surface, light text, hover lifts to a brighter tint. */
html[data-scheme="dark"] .store-profile-tile {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
    color: #e8ecf4;
}
html[data-scheme="dark"] .store-profile-tile:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: #e8ecf4;
}
html[data-scheme="dark"] .store-profile-tile__icon {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    color: #e8ecf4;
}
html[data-scheme="dark"] .store-profile-tile__label { color: #e8ecf4; }
html[data-scheme="dark"] .store-profile-tile__hint  { color: #9ca3af; }
html[data-scheme="dark"] .store-profile-tile__chev  { color: #6b7280; }
html[data-scheme="dark"] .store-profile-tile:hover .store-profile-tile__chev {
    color: #e8ecf4;
}
/* Primary CTA stays a filled button — but use a lighter fill so it
   still pops against the dark card. */
html[data-scheme="dark"] .store-profile-tile.store-profile-tile--primary {
    background: #e8ecf4;
    border-color: #e8ecf4;
    color: #0e1015;
}
html[data-scheme="dark"] .store-profile-tile.store-profile-tile--primary:hover {
    background: #fff;
    border-color: #fff;
    color: #0e1015;
}
html[data-scheme="dark"] .store-profile-tile.store-profile-tile--primary .store-profile-tile__icon {
    background: rgba(0, 0, 0, 0.10);
    border-color: rgba(0, 0, 0, 0.12);
    color: #0e1015;
}
html[data-scheme="dark"] .store-profile-tile.store-profile-tile--primary .store-profile-tile__label,
html[data-scheme="dark"] .store-profile-tile.store-profile-tile--primary .store-profile-tile__chev {
    color: #0e1015;
}
html[data-scheme="dark"] .store-profile-tile.store-profile-tile--primary .store-profile-tile__hint {
    color: rgba(0, 0, 0, 0.55);
}
/* Danger (logout) — desaturate the red but keep the destructive cue. */
html[data-scheme="dark"] .store-profile-tile.store-profile-tile--danger .store-profile-tile__icon {
    color: #f87171;
    background: rgba(248, 113, 113, 0.10);
    border-color: rgba(248, 113, 113, 0.20);
}
html[data-scheme="dark"] .store-profile-tile.store-profile-tile--danger:hover {
    background: rgba(248, 113, 113, 0.08);
    border-color: rgba(248, 113, 113, 0.25);
}
html[data-scheme="dark"] .store-profile-tile.store-profile-tile--danger:hover .store-profile-tile__label {
    color: #fca5a5;
}

/* ════════════════════════════════════════════════════════════════════
   STORE MENU DRAWER + minimal/boutique hamburger button
   Markup lives in resources/views/storefront/components/_store_menu_drawer.blade.php
   and is included from BOTH index.blade.php and product_page.blade.php.
   Previously these styles were inline inside index.blade.php, so the
   drawer rendered but had no styling on the product page.
   ════════════════════════════════════════════════════════════════════ */
/* Anchored with explicit physical left/right so legacy theme files'
   @media (max-width:991px) blocks for .main-menu can't accidentally
   nudge the drawer off the edge on tablets. translate3d() forces GPU
   compositing for deterministic transform behaviour, and the z-index
   is bumped past Bootstrap modals so the drawer always wins the
   stacking war. See the inline copy in storefront/index.blade.php for
   the longer comment explaining the tablet bug this fixes. */
.store-menu-drawer {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 320px;
    max-width: 86vw;
    background: var(--surface, #fff);
    z-index: 99999 !important;
    box-shadow: 8px 0 32px rgba(0,0,0,0.18);
    transform: translate3d(-110%, 0, 0);
    transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    will-change: transform;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
[dir="rtl"] .store-menu-drawer {
    left: auto !important;
    right: 0 !important;
    transform: translate3d(110%, 0, 0);
    box-shadow: -8px 0 32px rgba(0,0,0,0.18);
}
body.menu-open .store-menu-drawer,
.store-menu-drawer[aria-hidden="false"] {
    transform: translate3d(0, 0, 0) !important;
}
.store-menu-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.store-menu-drawer__title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.55);
}
.store-menu-drawer__close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.04);
    border: none;
    color: var(--text, #1a1a1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.store-menu-drawer__close:hover { background: rgba(0,0,0,0.1); transform: rotate(90deg); }
.store-menu-drawer__nav { flex: 1; overflow-y: auto; padding: 8px; }
.store-menu-drawer__nav ul { list-style: none; margin: 0; padding: 0; }
.store-menu-drawer__nav > ul > li { border-radius: 8px; overflow: hidden; }
.store-menu-drawer__nav > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text, #1a1a1a);
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.12s, color 0.12s;
    cursor: pointer;
}
.store-menu-drawer__nav > ul > li > a:hover,
.store-menu-drawer__nav > ul > li > a.active {
    background: rgba(0,0,0,0.04);
    color: var(--primary-color, #111);
    text-decoration: none;
}
.smd-sub-toggle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: rgba(0,0,0,0.45);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, transform 0.18s;
    flex-shrink: 0;
}
.smd-sub-toggle:hover { background: rgba(0,0,0,0.06); }
.store-menu-drawer__nav > ul > li.is-open .smd-sub-toggle { transform: rotate(180deg); }
.smd-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-inline-start: 14px;
}
.store-menu-drawer__nav > ul > li.is-open .smd-sub { max-height: 600px; }
.smd-sub li { list-style: none; }
.smd-sub a {
    display: block;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(0,0,0,0.6);
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
}
.smd-sub a:hover {
    background: rgba(0,0,0,0.03);
    color: var(--primary-color, #111);
    text-decoration: none;
}

.store-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1290;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}
body.menu-open .store-menu-backdrop { opacity: 1; pointer-events: auto; }
body.menu-open { overflow: hidden; }

/* Minimal + Boutique header hamburger — three-line icon that morphs
   into an X when body.menu-open. Shared selector .minimal__menu-btn
   so the boutique variant can reuse it without duplicating. */
.minimal__menu-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s;
}
.minimal__menu-btn:hover { background: rgba(0,0,0,0.05); }
.minimal__menu-btn span {
    width: 20px;
    height: 2px;
    background: var(--text, #1a1a1a);
    border-radius: 2px;
    transition: transform 0.22s, opacity 0.18s;
}
body.menu-open .minimal__menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .minimal__menu-btn span:nth-child(2) { opacity: 0; }
body.menu-open .minimal__menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Dark scheme — the drawer surface + text + dividers + backdrop. */
html[data-scheme="dark"] .store-menu-drawer {
    background: #15151b;
    box-shadow: 8px 0 32px rgba(0,0,0,0.55);
}
[dir="rtl"] html[data-scheme="dark"] .store-menu-drawer,
html[data-scheme="dark"] [dir="rtl"] .store-menu-drawer {
    box-shadow: -8px 0 32px rgba(0,0,0,0.55);
}
html[data-scheme="dark"] .store-menu-drawer__head { border-bottom-color: rgba(255,255,255,0.08); }
html[data-scheme="dark"] .store-menu-drawer__title { color: rgba(255,255,255,0.55); }
html[data-scheme="dark"] .store-menu-drawer__close {
    background: rgba(255,255,255,0.08);
    color: #e8ecf4;
}
html[data-scheme="dark"] .store-menu-drawer__close:hover { background: rgba(255,255,255,0.14); }
html[data-scheme="dark"] .store-menu-drawer__nav > ul > li > a { color: #e8ecf4; }
html[data-scheme="dark"] .store-menu-drawer__nav > ul > li > a:hover,
html[data-scheme="dark"] .store-menu-drawer__nav > ul > li > a.active {
    background: rgba(255,255,255,0.06);
    color: #fff;
}
html[data-scheme="dark"] .smd-sub a { color: rgba(255,255,255,0.65); }
html[data-scheme="dark"] .smd-sub a:hover { background: rgba(255,255,255,0.06); color: #fff; }
html[data-scheme="dark"] .smd-sub-toggle { color: rgba(255,255,255,0.55); }
html[data-scheme="dark"] .minimal__menu-btn:hover { background: rgba(255,255,255,0.06); }
html[data-scheme="dark"] .minimal__menu-btn span { background: #e8ecf4; }

/* ════════════════════════════════════════════════════════════════════
   STORE SEARCH POPUP — overlay variant
   The overlay popup is what the boutique + topbar header variants open
   regardless of the merchant's chosen search style. The CSS for the
   dropdown / row variants still lives inline in storefront/index since
   they only render on the home page; the overlay needs to be available
   on the product page too, hence the cross-file move.
   ════════════════════════════════════════════════════════════════════ */
.store-search-popup { display: none; }
.store-search-popup.is-open { display: block; }

.store-search-popup--overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Max-safe z-index + isolation — same treatment as the profile
       popup. The merchant reported the side menu sidebar still
       covering the search overlay at tablet width even after the
       99000 bump; sealing with isolation:isolate so the popup
       creates its own stacking context. */
    z-index: 2147483640;
    isolation: isolate;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    opacity: 0;
    transition: opacity 0.28s ease;
}
.store-search-popup--overlay.is-open {
    display: flex;
    opacity: 1;
}
.store-search-popup--overlay .store-search-popup__close {
    position: absolute;
    top: 24px;
    inset-inline-end: 24px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.store-search-popup--overlay .store-search-popup__close:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: rotate(90deg);
}
.store-search-popup--overlay .store-search-popup__inner {
    max-width: 720px;
    width: 100%;
    background: #fff;
    border-radius: 16px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    animation: search-overlay-in 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes search-overlay-in {
    from { transform: translateY(20px) scale(0.96); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
.store-search-popup--overlay .store-search-popup__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 19px;
    color: #111;
    padding: 12px 0;
}
.store-search-popup--overlay .store-search-popup__input::placeholder { color: rgba(0, 0, 0, 0.4); }
.store-search-popup--overlay .store-search-popup__icon { color: #6b7280; }
.store-search-popup--overlay .store-search-popup__cat {
    appearance: none;
    -webkit-appearance: none;
    background-color: rgba(0, 0, 0, 0.05);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 11px 11px;
    border: none;
    border-radius: 999px;
    color: #111;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    max-width: 160px;
    padding: 9px 28px 9px 14px;
}
[dir="rtl"] .store-search-popup--overlay .store-search-popup__cat {
    background-position: left 12px center;
    padding: 9px 14px 9px 28px;
}
/* Body lock — open popup prevents page scroll. The JS adds is-open
   class to the popup; the body lock is set inline (overflow:hidden)
   in openStoreSearch() but the rule below keeps it sticky after CSS
   re-flow events. */
body:has(.store-search-popup--overlay.is-open) { overflow: hidden; }

/* Dark scheme */
html[data-scheme="dark"] .store-search-popup--overlay .store-search-popup__inner {
    background: #15151b;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(255, 255, 255, 0.05);
}
html[data-scheme="dark"] .store-search-popup--overlay .store-search-popup__input { color: #e8ecf4; }
html[data-scheme="dark"] .store-search-popup--overlay .store-search-popup__input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
html[data-scheme="dark"] .store-search-popup--overlay .store-search-popup__icon { color: rgba(255, 255, 255, 0.55); }
html[data-scheme="dark"] .store-search-popup--overlay .store-search-popup__cat {
    background-color: rgba(255, 255, 255, 0.08);
    color: #e8ecf4;
}

@media (max-width: 600px) {
    .store-search-popup--overlay .store-search-popup__input { font-size: 16px; }
    .store-search-popup--overlay .store-search-popup__inner { padding: 10px 14px; gap: 10px; }
    .store-search-popup--overlay .store-search-popup__close { top: 16px; inset-inline-end: 16px; width: 40px; height: 40px; }
}