/* ZHIYAR custom storefront header — RTL, Amazon-style layout, glassmorphism to match the body. */

/* Astra's default header is fully replaced by #zhiyar-header below. */
#masthead {
    display: none !important;
}

#zhiyar-header {
    --zh-top-h: 91px;
    --zh-ctrl-h: 50px;
    --zh-radius: 10px;
    direction: rtl;
    position: sticky;
    top: 0;
    /* Was 9999 — tied exactly with two other fixed/full-screen overlays on
       the site (the single-product sticky buy-bar and the stories full-
       screen viewer, both also 9999), so whichever happened to render later
       in the DOM won stacking ties and could paint over the header's own
       open category panel. Raised well above every other z-index in use
       sitewide so the header (and anything that opens inside it, like the
       category tree) reliably renders in front of ordinary page content.
       The one deliberate exception is .zhiyar-story-viewer, a genuine
       full-screen modal that should still cover the header when open — see
       its own z-index in zhiyar-stories.css, explicitly kept above this. */
    z-index: 99999;
    font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Row 1: logo / search / account / cart (frosted glass) ---------- */

.zhiyar-header-top {
    height: var(--zh-top-h);
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.68) 0%, rgba(250, 247, 240, 0.46) 100%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: box-shadow 0.25s ease, background 0.25s ease;
}

.zhiyar-header-top::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(201, 160, 84, 0.7) 18%, rgba(201, 160, 84, 0.7) 82%, transparent);
}

#zhiyar-header.is-scrolled .zhiyar-header-top {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.86) 0%, rgba(250, 247, 240, 0.72) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 26px rgba(13, 31, 23, 0.14);
}

.zhiyar-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr minmax(280px, 640px) 1fr;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
}

.zhiyar-logo {
    justify-self: start;
    flex: 0 0 210px;
    width: 210px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.zhiyar-logo img {
    width: auto;
    height: 68px;
    object-fit: contain;
    display: block;
}

/* Search — fixed height, matches the icon-button grid below */

#zhiyar-header .zhiyar-search {
    justify-self: stretch;
    display: flex;
    align-items: center;
    height: var(--zh-ctrl-h);
    border-radius: var(--zh-radius);
    padding: 4px;
    background: rgba(250, 247, 240, 0.4) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(201, 160, 84, 0.28);
    box-shadow: inset 0 1px 2px rgba(13, 31, 23, 0.05);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

#zhiyar-header .zhiyar-search:focus-within {
    border-color: var(--ast-global-color-2, #1a3d2e);
    box-shadow: 0 0 0 3px rgba(26, 61, 46, 0.18);
}

#zhiyar-header .zhiyar-search-cat-wrap {
    position: relative;
    flex: 0 0 132px;
    height: 100%;
    border-left: 1px solid rgba(26, 61, 46, 0.18);
}

#zhiyar-header .zhiyar-search-cat-trigger {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--ast-global-color-3, #12241c);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 0 14px;
    cursor: pointer;
}

#zhiyar-header .zhiyar-search-cat-trigger:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 2px var(--ast-global-color-2, #1a3d2e) !important;
    border-radius: 6px;
}

#zhiyar-header .zhiyar-search-cat-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#zhiyar-header .zhiyar-search-cat-chevron {
    flex: none;
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
}

#zhiyar-header .zhiyar-search-cat-trigger[aria-expanded="true"] .zhiyar-search-cat-chevron {
    transform: rotate(180deg);
}

/* The open panel — fully custom, so it can actually be glassy/rounded (native <select> popups can't be). */
#zhiyar-header .zhiyar-search-cat-list {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 200px;
    max-height: 340px;
    overflow-y: auto;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.85) 0%, rgba(250, 247, 240, 0.78) 100%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(201, 160, 84, 0.3);
    border-radius: 16px;
    box-shadow: 0 18px 40px -12px rgba(13, 31, 23, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    z-index: 20;
}

/* Leaf options — the "همه دسته‌ها" reset AND every subcategory link inside a
   parent's expanded tree both use this class, so they look identical
   whether they're a plain <li> (reset option) or an <a href> (real
   subcategory link, see zhiyar_search_category_tree() in zhiyar-header.php). */
#zhiyar-header .zhiyar-cat-option {
    display: block;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--ast-global-color-3, #12241c);
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

#zhiyar-header .zhiyar-cat-option:hover {
    background: rgba(201, 160, 84, 0.16);
    color: var(--ast-global-color-3, #12241c) !important;
}

#zhiyar-header .zhiyar-cat-option.is-selected {
    background: var(--ast-global-color-2, #1a3d2e);
    color: var(--ast-global-color-4, #f5f0e6) !important;
    font-weight: 600;
}

/* ---------------------------------------------------------------------
 * Parent category (tree branch) — a toggle chevron + a link to that whole
 * category's products, with its subcategories collapsed underneath until
 * the chevron is clicked.
 * ------------------------------------------------------------------- */
#zhiyar-header .zhiyar-cat-parent {
    margin-top: 2px;
}

#zhiyar-header .zhiyar-cat-parent + .zhiyar-cat-parent {
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid rgba(26, 61, 46, 0.08);
}

#zhiyar-header .zhiyar-cat-parent-row {
    display: flex;
    align-items: center;
    gap: 2px;
}

#zhiyar-header .zhiyar-cat-parent-toggle {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0;
    border-radius: 7px;
    color: rgba(18, 36, 28, 0.55);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.2s ease, color 0.15s ease;
}

#zhiyar-header .zhiyar-cat-parent-toggle:hover {
    background: rgba(201, 160, 84, 0.16);
    color: var(--ast-global-color-3, #12241c);
}

#zhiyar-header .zhiyar-cat-parent-toggle svg {
    width: 15px;
    height: 15px;
    /* Chevron points left (◂) at rest — reads as "expand toward the tree
       indent," which in RTL is the same direction the nested list itself
       is indented from. Rotates flat (▾) once expanded. */
    transition: transform 0.2s ease;
}

#zhiyar-header .zhiyar-cat-parent.is-expanded .zhiyar-cat-parent-toggle svg {
    transform: rotate(-90deg);
}

#zhiyar-header .zhiyar-cat-parent-label {
    flex: 1 1 auto;
    padding: 8px 6px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ast-global-color-2, #1a3d2e);
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.15s ease;
}

#zhiyar-header .zhiyar-cat-parent-label:hover {
    background: rgba(201, 160, 84, 0.16);
    color: var(--ast-global-color-2, #1a3d2e) !important;
}

/* Nested subcategory tree — indented from the right (RTL) with a thin
   vertical connector line, the standard "tree diagram" visual cue. */
#zhiyar-header .zhiyar-cat-children {
    margin: 2px 0 4px;
    padding: 2px 0 2px 0;
    padding-inline-end: 19px;
    border-inline-end: 1px dashed rgba(201, 160, 84, 0.45);
    margin-inline-end: 13px;
    list-style: none;
}

#zhiyar-header .zhiyar-cat-children .zhiyar-cat-option {
    font-size: 13px;
    color: rgba(18, 36, 28, 0.85);
}

#zhiyar-header .zhiyar-search-input-wrap {
    position: relative;
    flex: 1 1 auto;
    height: 100%;
    display: flex;
    align-items: center;
}

#zhiyar-header .zhiyar-search-input {
    width: 100%;
    height: 100%;
    border: none !important;
    padding: 0 40px 0 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ast-global-color-3, #12241c);
    background: transparent !important;
    box-shadow: none !important;
    min-width: 0;
}

#zhiyar-header .zhiyar-search-input::placeholder {
    color: rgba(18, 36, 28, 0.55);
}

#zhiyar-header .zhiyar-search-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Once there's actual text, let the field pick up a soft tint of the brand palette. */
#zhiyar-header .zhiyar-search-input:not(:placeholder-shown) {
    background: rgba(201, 160, 84, 0.1) !important;
    border-radius: 8px;
}

/* Chrome/Edge autofill forces its own (often blue/yellow) background — override it
   with an inset shadow the size of the field, the standard defeat for this bug. */
#zhiyar-header .zhiyar-search-input:-webkit-autofill,
#zhiyar-header .zhiyar-search-input:-webkit-autofill:hover,
#zhiyar-header .zhiyar-search-input:-webkit-autofill:focus,
#zhiyar-header .zhiyar-search-input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--ast-global-color-3, #12241c) !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(201, 160, 84, 0.14) inset !important;
    box-shadow: 0 0 0 1000px rgba(201, 160, 84, 0.14) inset !important;
    caret-color: var(--ast-global-color-2, #1a3d2e);
    transition: background-color 5000s ease-in-out 0s;
}

/* Search "button" is now just the magnifying-glass icon, floated inside the input — no button block/background. */
#zhiyar-header .zhiyar-search-submit {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    flex: none;
    border: none !important;
    border-radius: 50%;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ast-global-color-2, #1a3d2e);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease, transform 0.15s ease;
}

#zhiyar-header .zhiyar-search-submit:hover {
    color: var(--ast-global-color-0, #c9a054);
}

#zhiyar-header .zhiyar-search-submit:active {
    transform: translateY(-50%) scale(0.9);
}

#zhiyar-header .zhiyar-search-submit:focus-visible {
    outline: 2px solid var(--ast-global-color-0, #c9a054) !important;
    outline-offset: 2px;
}

#zhiyar-header .zhiyar-search-submit svg {
    width: 19px;
    height: 19px;
    color: currentColor;
    filter: none;
}

/* Account / cart — fixed 40px glass icon-buttons */

.zhiyar-header-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
}

.zhiyar-action {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 6px;
    border-radius: var(--zh-radius);
    color: var(--ast-global-color-2, #1a3d2e);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.zhiyar-action:hover {
    background: rgba(255, 255, 255, 0.45);
}

.zhiyar-icon-circle {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 2px 6px rgba(13, 31, 23, 0.10);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.zhiyar-action:hover .zhiyar-icon-circle {
    background: rgba(255, 255, 255, 0.88);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 8px 16px rgba(13, 31, 23, 0.16), 0 0 0 1px rgba(201, 160, 84, 0.4);
}

.zhiyar-action:focus-visible .zhiyar-icon-circle {
    outline: 2px solid var(--ast-global-color-0, #c9a054);
    outline-offset: 2px;
}

.zhiyar-icon-circle svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.8;
    display: block;
}

.zhiyar-action-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.zhiyar-action-text small {
    font-size: 11px;
    color: #5a6b62;
}

.zhiyar-action-text strong {
    font-size: 13px;
    font-weight: 700;
}

.zhiyar-cart-count {
    position: absolute;
    top: -3px;
    right: -3px;
    background: linear-gradient(160deg, var(--ast-global-color-0, #c9a054), var(--ast-global-color-1, #a9813f));
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    min-width: 17px;
    height: 17px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 0 0 2px rgba(250, 247, 240, 0.9);
}

/* ---------- Responsive ---------- */
/* Site-wide 3-tier breakpoints: desktop = default (>=992px), tablet =
   max-width:991px, mobile = max-width:599px (mobile block cascades on top
   of the tablet block, so a phone gets tablet rules plus these overrides). */

@media (max-width: 991px) {
    #zhiyar-header {
        --zh-top-h: auto;
    }

    .zhiyar-header-top {
        height: auto;
        padding: 8px 0;
    }

    .zhiyar-header-inner {
        display: flex;
        flex-wrap: wrap;
        height: auto;
        padding: 0 14px;
        gap: 10px;
    }

    .zhiyar-logo {
        flex: 0 0 128px;
        width: 128px;
        height: 40px;
    }

    .zhiyar-logo img {
        max-height: 32px;
    }

    .zhiyar-header-actions {
        order: 2;
        margin-right: auto;
        height: auto;
    }

    .zhiyar-search {
        order: 3;
        flex: 1 1 100%;
        width: auto;
    }

    .zhiyar-action-text {
        display: none;
    }

    .zhiyar-icon-circle {
        width: 38px;
        height: 38px;
    }
}

/* Real phones: trim further so the sticky header eats as little vertical
   space as possible, leaving more of the screen for actual product content. */
@media (max-width: 599px) {
    .zhiyar-header-top {
        padding: 6px 0;
    }

    .zhiyar-header-inner {
        padding: 0 10px;
        gap: 6px;
    }

    .zhiyar-logo {
        flex: 0 0 100px;
        width: 100px;
        height: 34px;
    }

    .zhiyar-logo img {
        max-height: 26px;
    }

    .zhiyar-header-actions {
        gap: 2px;
    }

    .zhiyar-icon-circle {
        width: 34px;
        height: 34px;
    }

    .zhiyar-icon-circle svg {
        width: 17px;
        height: 17px;
    }

    #zhiyar-header .zhiyar-search {
        height: 42px;
    }

    .zhiyar-search-cat-wrap {
        display: none;
    }

    #zhiyar-header .zhiyar-search-input {
        font-size: 13px;
    }
}