/* ═════════════════════════════════════════════════════════════════════
   SIDE-LAYOUT SIDEBAR — refined desktop design.

   This file rides ON TOP of the baseline rules in custom.css
   (`body.layout-side .main-menu` etc.) and replaces the heavier
   defaults with a more intentional, boutique-style aesthetic.

   What changed vs. the baseline:
   • Active state is no longer a solid primary-color fill — it's a soft
     tinted background + a 3px inline-start accent bar in the merchant's
     brand color. Reads as "current page" without shouting.
   • Hover gets a smooth cubic-bezier transition + a tiny chevron reveal.
   • Brand block at the top has real breathing room + a faint divider.
   • The search/profile/cart action row is wrapped in a soft pill so it
     reads as one element instead of three floating icons.
   • The `.title-category` heading (hidden in the baseline) comes back as
     a designed micro-heading above the categories list.
   • Sub-category indentation uses a thin guide line via ::before
     instead of the ASCII └ character.
   • Every change has a paired `html[data-scheme="dark"]` override.

   All selectors use logical properties (`inset-inline-*`,
   `border-inline-*`, `padding-inline-*`) so RTL Just Works.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Sidebar shell — slightly more breathing room ── */
body.layout-side .main-menu {
    /* Widen by 20px so categories no longer feel pinched, especially
       with longer Hebrew labels. Existing 260px stayed for years; bump
       to 280px now that the design needs a bit more horizontal space. */
    width: 280px !important;
}
body.layout-side .app-content { margin-right: 280px !important; }
[dir="ltr"] body.layout-side .app-content { margin-right: 0 !important; margin-left: 280px !important; }

/* ── Brand block — real spacing + a faint bottom rule ── */
body.layout-side .main-menu .navbar-hader {
    padding: 24px 22px 18px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
body.layout-side .main-menu .nav_tab_img {
    max-width: 170px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body.layout-side .main-menu .navbar-brand:hover .nav_tab_img {
    transform: scale(1.02);
}

/* ── Action row — soft pill container that groups the icons ── */
body.layout-side .side-menu-actions {
    padding: 14px 18px 10px !important;
}
body.layout-side .side-menu-actions__row {
    gap: 6px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.035);
    border-radius: 999px;
    transition: background 0.15s;
}
body.layout-side .side-menu-actions__row:hover {
    background: rgba(0, 0, 0, 0.055);
}
/* Inline search input — when it takes its own row, drop the pill bg so
   it doesn't double up with the input's own border. */
body.layout-side .side-menu-actions__row > .search-input,
body.layout-side .side-menu-actions__row > .store-search-form {
    margin-bottom: 6px;
}
body.layout-side .side-menu-actions__row:has(> .search-input),
body.layout-side .side-menu-actions__row:has(> .store-search-form) {
    background: transparent;
    padding: 0;
    border-radius: 0;
    flex-wrap: wrap;
}

/* ── Section heading suppressed everywhere.
   An earlier revision of this file re-enabled `.title-category` as a
   designed micro-heading above the side menu's category list. Merchant
   feedback: the label took meaningful vertical space and pushed the
   first category down on every side variant (full / floating / glass /
   editorial). Keep it hidden — the categories list is self-describing
   inside the sidebar, no eyebrow needed.

   The editorial variant in custom.css ships its own `display: block`
   rule with higher specificity than the generic side-layout selector,
   so we list it explicitly here. Equal specificity + later in the
   cascade (this file loads AFTER custom.css) makes the !important
   hide win for editorial too. */
body.layout-side .main-menu .title-category,
body.layout-side .main-menu-content .title-category,
body.layout-side.side-variant-editorial .main-menu .title-category {
    display: none !important;
}

/* ── Category list — generous padding around the rail ── */
body.layout-side .main-menu .navigation,
body.layout-side .main-menu .navigation.main.pro_category {
    padding: 0 12px !important;
    gap: 1px;
}

/* ── Category links — refined typography + soft hover + intentional
       active state with inline-start accent bar (no solid fill). ── */
body.layout-side .main-menu .custom-list-group-item {
    position: relative;
    padding: 10px 14px !important;
    border-radius: 10px;
    font-size: 14px !important;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: #1a1a1a !important;
    transition:
        background 0.18s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.18s,
        transform 0.18s;
}
body.layout-side .main-menu .custom-list-group-item:hover {
    background: rgba(0, 0, 0, 0.045) !important;
    color: var(--primary-color, #0e1015) !important;
}
/* Active — accent bar + soft tinted bg, NOT a solid primary fill. The
   3px inline-start bar uses the merchant's brand color so the page
   identity still reads, and the text picks up the same color. */
body.layout-side .main-menu .custom-list-group-item.active {
    background: rgba(0, 0, 0, 0.045) !important;
    color: var(--primary-color, #0e1015) !important;
    font-weight: 600;
}
body.layout-side .main-menu .custom-list-group-item.active::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary-color, #0e1015);
}
[dir="rtl"] body.layout-side .main-menu .custom-list-group-item.active::before {
    border-radius: 3px 0 0 3px;
}

/* ── Sub-category indentation — thin guide line via ::before instead
       of the └ character (which renders inconsistently across fonts). ── */
body.layout-side .main-menu .sub-nav-list {
    position: relative;
    padding-inline-start: 18px !important;
    margin-block: 2px 6px !important;
}
body.layout-side .main-menu .sub-nav-list::before {
    content: "";
    position: absolute;
    inset-inline-start: 8px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: rgba(0, 0, 0, 0.08);
}
body.layout-side .main-menu .sub-cat-link {
    padding: 7px 12px !important;
    font-size: 13px !important;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.62) !important;
}
body.layout-side .main-menu .sub-cat-link:hover {
    color: var(--primary-color, #0e1015) !important;
    background: rgba(0, 0, 0, 0.03) !important;
}
/* Hide the legacy └ ASCII guide — kept in markup for back-compat but
   the ::before line above is the new visual cue. */
body.layout-side .main-menu .sub-cat-link > span:first-child {
    display: none !important;
}

/* ── Sub-toggle button — smooth rotate on expand ── */
body.layout-side .main-menu .sub-toggle-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    transition: background 0.15s;
}
body.layout-side .main-menu .sub-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}
body.layout-side .main-menu .sub-toggle-btn .sub-toggle-icon {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body.layout-side .main-menu .nav-item.is-open > div > .sub-toggle-btn .sub-toggle-icon {
    transform: rotate(180deg);
}

/* ── Divider — refined slim rule with horizontal margin ── */
body.layout-side .main-menu .nav-item--divider {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    margin: 12px 12px 8px;
    list-style: none;
    padding: 0;
    height: 0;
}
body.layout-side .main-menu .nav-item--divider span {
    display: none;
}

/* ── Side-menu-extra (Blog / blog posts / Contact us) — refine the
       icon pill so it feels like a deliberate UI element. ── */
body.layout-side .main-menu .side-menu-extra__link {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.layout-side .main-menu .side-menu-extra__icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
    color: #1a1a1a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
body.layout-side .main-menu .side-menu-extra__link:hover .side-menu-extra__icon {
    background: var(--primary-color, #0e1015);
    color: #fff;
}

/* ═════════════════════════════════════════════════════════════════════
   DARK SCHEME — pair every tone above with a dark-mode override so the
   sidebar looks intentional, not broken, when `data-scheme="dark"`.
   ═════════════════════════════════════════════════════════════════════ */
html[data-scheme="dark"] body.layout-side .main-menu .navbar-hader {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
html[data-scheme="dark"] body.layout-side .side-menu-actions__row {
    background: rgba(255, 255, 255, 0.04);
}
html[data-scheme="dark"] body.layout-side .side-menu-actions__row:hover {
    background: rgba(255, 255, 255, 0.07);
}
html[data-scheme="dark"] body.layout-side .side-menu-actions__row:has(> .search-input),
html[data-scheme="dark"] body.layout-side .side-menu-actions__row:has(> .store-search-form) {
    background: transparent;
}
html[data-scheme="dark"] body.layout-side .main-menu-content .title-category {
    color: rgba(255, 255, 255, 0.42) !important;
}
html[data-scheme="dark"] body.layout-side .main-menu .custom-list-group-item {
    color: #e8ecf4 !important;
}
html[data-scheme="dark"] body.layout-side .main-menu .custom-list-group-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--primary-color, #fff) !important;
}
html[data-scheme="dark"] body.layout-side .main-menu .custom-list-group-item.active {
    background: rgba(255, 255, 255, 0.07) !important;
    color: var(--primary-color, #fff) !important;
}
html[data-scheme="dark"] body.layout-side .main-menu .sub-nav-list::before {
    background: rgba(255, 255, 255, 0.10);
}
html[data-scheme="dark"] body.layout-side .main-menu .sub-cat-link {
    color: rgba(255, 255, 255, 0.62) !important;
}
html[data-scheme="dark"] body.layout-side .main-menu .sub-cat-link:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--primary-color, #fff) !important;
}
html[data-scheme="dark"] body.layout-side .main-menu .sub-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.07);
}
html[data-scheme="dark"] body.layout-side .main-menu .nav-item--divider {
    border-top-color: rgba(255, 255, 255, 0.08);
}
html[data-scheme="dark"] body.layout-side .main-menu .side-menu-extra__icon {
    background: rgba(255, 255, 255, 0.06);
    color: #e8ecf4;
}
html[data-scheme="dark"] body.layout-side .main-menu .side-menu-extra__link:hover .side-menu-extra__icon {
    background: var(--primary-color, #fff);
    color: #0e1015;
}

/* ═════════════════════════════════════════════════════════════════════
   Inline search input inside the side menu.

   When the merchant picks header layout=side AND search variant=inline,
   the `.search-input.store-search-form` is included inside the
   `.side-menu-actions__row`. The baseline rules in custom.css gave it a
   36px pill, but:
     • the category <select> (.store-search-cat) survived when the
       merchant flipped search.categories=on, eating half the row and
       breaking the rounded pill look;
     • the live-suggestions dropdown (.store-search-results) layered
       under the categories list below, since both rely on z-index
       inside the same scrolling .main-menu container.

   Cleaner styling pass — overrides the custom.css block with matching
   specificity + later in cascade so this wins. RTL is handled via
   logical inset / padding properties. Dark scheme parity at the end.
   ═════════════════════════════════════════════════════════════════════ */
body.layout-side .side-menu-actions__row > .search-input,
body.layout-side .side-menu-actions__row > .store-search-form {
    /* Drop the bottom margin — the action row's flex gap (8px) already
       separates the input from the icon chips that flow on the row
       below. The legacy 8px margin was double-spacing the gap. */
    margin: 0 0 6px !important;
    /* Neutralise legacy theme rules that target bare `.search-input`
       (the original site-wide header search bar) — `style-*.css` files
       still carry `margin-left: 70-80px`, `right: 1.5rem`, `width: 80%`
       from the pre-inline-storefront era. Without these resets the side
       menu's inline pill gets shoved sideways, exactly the off-centre
       layout the merchant flagged. Width/left/right/inset wiped here,
       inner input below. */
    left: auto !important;
    right: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    width: auto !important;
    max-width: none !important;
    /* `position: relative` is needed for the absolutely-positioned
       suggestions dropdown to anchor against the form, not the
       sidebar root. */
    position: relative;
}
/* Inner input — same neutralising pass: the theme files set
   `.search-input input { margin-right: 40px; width: 215px; ... }` etc.
   Strip those so our pill rule below is the only thing sizing the
   field. */
body.layout-side .side-menu-actions__row > .search-input input,
body.layout-side .side-menu-actions__row > .search-input #search,
body.layout-side .side-menu-actions__row > .store-search-form input,
body.layout-side .side-menu-actions__row > .store-search-form #search {
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
}
/* When search.categories is on, the form has both an input and a
   <select> as siblings. In a narrow sidebar (~280 px) they can't sit
   inline without crushing each other, so flip the form to a vertical
   stack: input on top, full-width cat select beneath. The select gets
   the same pill chrome as the input so they read as one component.

   Scoped to `search-variant-inline` deliberately: the universal hide
   rule in custom.css (`body:not(.search-variant-inline)
   .search-input.store-search-form { display: none !important }`) had
   only 0,3,1 specificity and was being out-ranked by the earlier
   `body.layout-side …` selector at 0,4,1, so on the side layout the
   inline form leaked through in row / dropdown / overlay variants too.
   Adding the variant class to the selector keeps our specificity tie
   only when the inline variant is actually selected, so other variants
   fall back to the hide rule and the action column collapses to just
   the cart + profile chips above the categories list. */
/* Drive the flex-column stack off the body class instead of the form's
   `.has-cats` so the live toggle in the builder
   (search.categories on/off → body class flip search-cats-{on,off})
   reshapes the form without needing a reload. The form's `.has-cats`
   class is only set on the server when the merchant's saved
   setting is on AND the store has categories; the body class is the
   live source of truth. */
body.layout-side.search-variant-inline.search-cats-on .side-menu-actions__row > .search-input,
body.layout-side.search-variant-inline.search-cats-on .side-menu-actions__row > .store-search-form {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
}
body.layout-side .side-menu-actions__row > .search-input .store-search-cat,
body.layout-side .side-menu-actions__row > .store-search-form .store-search-cat {
    /* components/header.css positions this select absolutely as a
       leading chip INSIDE the input (top:50%; inset-inline-start:6px;
       max-width:120px). That model assumes a wide horizontal nav
       search; inside the 280-px sidebar it just overlaps the input
       and looks broken. Force it back into normal flow so the
       .has-cats flex-column layout actually stacks it beneath the
       input as a full-width pill. */
    position: static !important;
    transform: none !important;
    top: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    max-width: none !important;
    width: 100% !important;
    height: 34px !important;
    padding: 0 32px 0 14px !important;
    margin: 0 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    background-color: rgba(0, 0, 0, 0.04) !important;
    /* Keep header.css's chevron SVG, just move it to the trailing
       edge so the chip reads as a dropdown. background-image inherits
       from header.css. */
    background-position: left 12px center !important;
    background-size: 10px 10px !important;
    background-repeat: no-repeat !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 999px !important;
    color: #0e1015 !important;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
[dir="rtl"] body.layout-side .side-menu-actions__row > .search-input .store-search-cat,
[dir="rtl"] body.layout-side .side-menu-actions__row > .store-search-form .store-search-cat {
    padding: 0 14px 0 32px !important;
    background-position: left 12px center !important;
}
body.layout-side .side-menu-actions__row > .search-input .store-search-cat:hover,
body.layout-side .side-menu-actions__row > .store-search-form .store-search-cat:hover {
    background-color: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.10) !important;
}
body.layout-side .side-menu-actions__row > .search-input .store-search-cat:focus,
body.layout-side .side-menu-actions__row > .store-search-form .store-search-cat:focus {
    background-color: #fff !important;
    border-color: var(--primary-color, #0e1015) !important;
    outline: none !important;
}
/* Input pill — refresh the chrome so it matches the rest of the
   side-menu polish (rounded action row, soft tinted surface, primary-
   color focus ring). 38px height aligns with the icon chips on the
   row below for a consistent visual rhythm. */
body.layout-side .side-menu-actions__row > .search-input input,
body.layout-side .side-menu-actions__row > .search-input #search,
body.layout-side .side-menu-actions__row > .store-search-form input,
body.layout-side .side-menu-actions__row > .store-search-form #search {
    height: 38px !important;
    padding-inline-start: 38px !important;
    padding-inline-end:   14px !important;
    padding-block: 0 !important;
    width: 100% !important;
    font-size: 13.5px !important;
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 999px !important;
    color: #0e1015 !important;
    margin: 0 !important;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
body.layout-side .side-menu-actions__row > .search-input input::placeholder,
body.layout-side .side-menu-actions__row > .store-search-form input::placeholder {
    color: #9ca3af;
}
body.layout-side .side-menu-actions__row > .search-input input:focus,
body.layout-side .side-menu-actions__row > .store-search-form input:focus {
    background: #fff !important;
    border-color: var(--primary-color, #0e1015) !important;
    box-shadow: 0 0 0 3px rgba(14, 16, 21, 0.06) !important;
    outline: none !important;
}
/* Search icon — vertically centered inside the input pill, on the
   logical inline-start so RTL and LTR both land on the right edge
   visually. */
body.layout-side .side-menu-actions__row > .search-input .search-icon,
body.layout-side .side-menu-actions__row > .store-search-form .search-icon {
    position: absolute !important;
    top: 19px !important;          /* half of the 38px input pill — anchors the icon
                                       to the input's vertical centre even when the
                                       form is .has-cats and stacks a select beneath,
                                       making the form taller than the input alone. */
    inset-inline-start: 12px !important;
    inset-inline-end: auto !important;
    transform: translateY(-50%) !important;
    color: #6b7280 !important;
    line-height: 1 !important;
    pointer-events: none;
    z-index: 1;
    /* Force a fixed glyph size so the theme's circular icon-chip
       styles (style-card-body.css gives every `.search-icon` a
       42×42 pill in the top layout) can't bleed in here. */
    width: 18px !important;
    height: 18px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body.layout-side .side-menu-actions__row > .search-input .search-icon svg,
body.layout-side .side-menu-actions__row > .store-search-form .search-icon svg,
body.layout-side .side-menu-actions__row > .search-input .search-icon img,
body.layout-side .side-menu-actions__row > .store-search-form .search-icon img {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
}
body.layout-side .side-menu-actions__row > .search-input:focus-within .search-icon,
body.layout-side .side-menu-actions__row > .store-search-form:focus-within .search-icon {
    color: var(--primary-color, #0e1015) !important;
}
/* Live-suggestions dropdown — sits below the input with a soft
   shadow that lifts it above the categories list. z-index beats the
   navigation rows; max-height keeps very long result lists from
   overflowing the menu chrome. */
body.layout-side .side-menu-actions__row > .search-input .store-search-results,
body.layout-side .side-menu-actions__row > .store-search-form .store-search-results {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: 0;
    width: 100%;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
    z-index: 50;
}

/* Dark scheme — soft white-on-dark surfaces matching the rest of the
   refreshed side menu. */
html[data-scheme="dark"] body.layout-side .side-menu-actions__row > .search-input input,
html[data-scheme="dark"] body.layout-side .side-menu-actions__row > .store-search-form input,
html[data-scheme="dark"] body.layout-side .side-menu-actions__row > .search-input #search,
html[data-scheme="dark"] body.layout-side .side-menu-actions__row > .store-search-form #search {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e8ecf4 !important;
}
html[data-scheme="dark"] body.layout-side .side-menu-actions__row > .search-input input::placeholder,
html[data-scheme="dark"] body.layout-side .side-menu-actions__row > .store-search-form input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}
html[data-scheme="dark"] body.layout-side .side-menu-actions__row > .search-input input:focus,
html[data-scheme="dark"] body.layout-side .side-menu-actions__row > .store-search-form input:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--primary-color, #fff) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
}
html[data-scheme="dark"] body.layout-side .side-menu-actions__row > .search-input .store-search-results,
html[data-scheme="dark"] body.layout-side .side-menu-actions__row > .store-search-form .store-search-results {
    background: #15151b;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}