/* ============================================================================
   AUX — HEADER AND FOOTER (site chrome)

   Self-contained: it does not extend the purchased theme's .main-header or
   .footer rules, so nothing in styles.css can reach in and override it. That is
   deliberate. The old header depended on theme rules that hid the whole
   horizontal menu below 1550px, which meant every laptop in the country was
   served a hamburger.

   Written with logical properties (inline-start/end, margin-inline, etc.) so the
   same rules lay out correctly under dir="rtl" and dir="ltr". The site is RTL;
   the English locales are not, and the chrome now works for both.

   Breakpoint: 1200px. Above it the nav is a horizontal bar, below it a drawer.
   The number is measured, not chosen: at 1024 the logo, six Persian nav labels,
   the search button and the catalogue call to action overflow the viewport by
   51px. 1200 is where the row fits. aux-chrome.js matches this value.
   ============================================================================ */

:root {
    --aux-red: #ed1c24;
    --aux-red-dark: #c61017;
    --aux-ink: #231f20;
    --aux-ink-soft: #3a3536;
    --aux-muted: #a3abb0;
    --aux-line: #e8e8e8;
    --aux-line-dark: rgba(255, 255, 255, 0.10);
    --aux-bg-soft: #f7f7f8;
    --aux-radius: 10px;
    --aux-header-h: 76px;
    --aux-shadow: 0 1px 0 rgba(35, 31, 32, 0.08);
    --aux-shadow-panel: 0 18px 44px rgba(35, 31, 32, 0.14);
}

/* Anchor targets must clear the sticky header, or every in-page link lands with
   its heading tucked underneath the bar. */
html {
    scroll-padding-top: calc(var(--aux-header-h) + 16px);
}

/* ============================================================================
   HEADER
   ============================================================================ */

.aux-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: var(--aux-shadow);
}

.aux-header a {
    text-decoration: none;
}

/* ── Utility bar ──────────────────────────────────────────────────────────── */

.aux-header__utility {
    display: none;
    background: var(--aux-ink);
    color: #fff;
    font-size: 13px;
    line-height: 1.6;
}

.aux-header__utility-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 38px;
}

.aux-header__claim {
    margin: 0;
    color: var(--aux-muted);
}

.aux-header__claim-brands {
    color: #fff;
}

.aux-header__utility-links {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aux-header__utility-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--aux-muted);
    transition: color 0.18s ease;
}

.aux-header__utility-link:hover,
.aux-header__utility-link:focus-visible {
    color: #fff;
}

.aux-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Main bar ─────────────────────────────────────────────────────────────── */

.aux-header__main-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--aux-header-h);
}

.aux-header__logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.aux-header__logo img {
    display: block;
    width: auto;
    height: 42px;
}

.aux-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
}

.aux-header__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--aux-line);
    border-radius: 50%;
    background: #fff;
    color: var(--aux-ink);
    transition: border-color 0.18s ease, color 0.18s ease;
}

.aux-header__icon-btn:hover,
.aux-header__icon-btn[aria-expanded="true"] {
    border-color: var(--aux-red);
    color: var(--aux-red);
}

.aux-header__cta {
    display: none;
}

/* The catalogue control is a Bootstrap dropdown. Pin it to the inline-end edge of
   the header so the panel opens inside the viewport under RTL, where Bootstrap's
   default start-aligned menu would otherwise hang off the screen. */
.aux-header__cta .dropdown-menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

/* ── Burger ───────────────────────────────────────────────────────────────── */

.aux-header__burger {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--aux-line);
    border-radius: var(--aux-radius);
    background: #fff;
}

.aux-header__burger-bars,
.aux-header__burger-bars::before,
.aux-header__burger-bars::after {
    position: absolute;
    inset-inline-start: 50%;
    width: 20px;
    height: 2px;
    margin-inline-start: -10px;
    background: var(--aux-ink);
    border-radius: 2px;
    transition: transform 0.22s ease, opacity 0.16s ease;
}

.aux-header__burger-bars {
    top: 50%;
    margin-top: -1px;
}

.aux-header__burger-bars::before,
.aux-header__burger-bars::after {
    content: "";
    inset-inline-start: 0;
    margin-inline-start: 0;
}

.aux-header__burger-bars::before {
    top: -6px;
}

.aux-header__burger-bars::after {
    top: 6px;
}

.aux-header__burger[aria-expanded="true"] .aux-header__burger-bars {
    background: transparent;
}

.aux-header__burger[aria-expanded="true"] .aux-header__burger-bars::before {
    transform: translateY(6px) rotate(45deg);
}

.aux-header__burger[aria-expanded="true"] .aux-header__burger-bars::after {
    transform: translateY(-6px) rotate(-45deg);
}

/* ── Search panel ─────────────────────────────────────────────────────────── */

.aux-header__search {
    border-top: 1px solid var(--aux-line);
    background: var(--aux-bg-soft);
    padding: 14px 0;
}

.aux-search {
    display: flex;
    gap: 8px;
}

.aux-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding-inline: 16px;
    border: 1px solid var(--aux-line);
    border-radius: 999px;
    background: #fff;
    font-size: 15px;
    color: var(--aux-ink);
}

.aux-search__input:focus {
    outline: none;
    border-color: var(--aux-red);
    box-shadow: 0 0 0 3px rgba(237, 28, 36, 0.12);
}

.aux-search__submit {
    flex: 0 0 auto;
    height: 46px;
    padding-inline: 26px;
    border: 0;
    border-radius: 999px;
    background: var(--aux-red);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    transition: background-color 0.18s ease;
}

.aux-search__submit:hover {
    background: var(--aux-red-dark);
}

/* ============================================================================
   NAVIGATION — drawer below 1200px
   ============================================================================ */

.aux-nav {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    z-index: 1010;
    display: flex;
    flex-direction: column;
    width: min(92vw, 360px);
    height: 100%;
    background: #fff;
    /* visibility, not display: it keeps the closed drawer out of the tab order
       while still allowing the transform to animate. */
    visibility: hidden;
    /* The drawer is anchored to the inline-end edge, so hiding it means pushing it
       further toward that edge — which is +X under LTR and -X under RTL. Writing
       the sign as a variable keeps one rule correct in both directions; a literal
       translateX(100%) would slide the RTL drawer across the viewport instead of
       off it. */
    transform: translateX(var(--aux-drawer-hidden, 100%));
    /* As with the dropdown panels: visibility flips, it does not transition. */
    transition: transform 0.28s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
}

[dir="rtl"] {
    --aux-drawer-hidden: -100%;
}

body.aux-nav-open .aux-nav {
    visibility: visible;
    transform: translateX(0);
}

.aux-nav__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1005;
    background: rgba(35, 31, 32, 0.5);
    opacity: 0;
    transition: opacity 0.28s ease;
}

body.aux-nav-open .aux-nav__backdrop {
    opacity: 1;
}

.aux-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--aux-line);
}

.aux-nav__head-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--aux-ink);
}

.aux-nav__close {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--aux-line);
    border-radius: 50%;
    background: #fff;
    font-size: 22px;
    line-height: 1;
    color: var(--aux-ink);
}

.aux-nav__close:hover {
    border-color: var(--aux-red);
    color: var(--aux-red);
}

.aux-nav__list {
    margin: 0;
    padding: 8px 0;
    list-style: none;
}

.aux-nav__item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--aux-line);
}

.aux-nav__link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border: 0;
    background: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--aux-ink);
    text-align: start;
    transition: color 0.18s ease;
}

.aux-nav__link:hover,
.aux-nav__item.is-active > .aux-nav__link {
    color: var(--aux-red);
}

.aux-nav__link[aria-current="page"] {
    color: var(--aux-red);
}

/* The arrow is its own control so the parent link stays followable. */
.aux-nav__toggle {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    padding: 0;
    margin-inline-end: 8px;
    border: 0;
    border-radius: 50%;
    background: none;
}

.aux-nav__chevron {
    display: inline-block;
    width: 8px;
    height: 8px;
    /* Physical sides, not logical ones. A chevron that means "this opens
       downwards" points down in both directions; with border-inline-end it
       flipped under RTL and rendered as a left-pointing arrow. */
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    color: var(--aux-ink-soft);
}

.aux-nav__link--button {
    justify-content: space-between;
}

[aria-expanded="true"] > .aux-nav__chevron,
[aria-expanded="true"] .aux-nav__chevron {
    transform: rotate(-135deg);
    color: var(--aux-red);
}

.aux-nav__panel {
    flex: 1 0 100%;
    display: none;
    background: var(--aux-bg-soft);
}

.aux-nav__item.is-open > .aux-nav__panel {
    display: block;
}

.aux-nav__sublist {
    margin: 0;
    padding: 6px 0;
    list-style: none;
}

.aux-nav__sublink {
    display: block;
    padding: 11px 34px;
    font-size: 14px;
    color: var(--aux-ink-soft);
    transition: color 0.18s ease;
}

.aux-nav__sublink:hover,
.aux-nav__sublink[aria-current="page"] {
    color: var(--aux-red);
}

.aux-nav__subitem--all .aux-nav__sublink {
    font-weight: 700;
    color: var(--aux-ink);
}

.aux-nav__panel-aside {
    display: none;
}

.aux-nav__drawer-foot {
    margin-top: auto;
    padding: 20px;
    border-top: 1px solid var(--aux-line);
    background: var(--aux-bg-soft);
}

.aux-nav__drawer-contact {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.aux-nav__drawer-contact li + li {
    margin-top: 6px;
}

.aux-nav__drawer-contact a {
    color: var(--aux-ink-soft);
}

/* ============================================================================
   NAVIGATION — horizontal bar from 1200px
   ============================================================================ */

@media (min-width: 1200px) {

    .aux-header__utility {
        display: block;
    }

    .aux-header__burger,
    .aux-nav__head,
    .aux-nav__drawer-foot,
    .aux-nav__backdrop {
        display: none !important;
    }

    .aux-header__cta {
        display: block;
    }

    .aux-nav {
        position: static;
        flex-direction: row;
        width: auto;
        height: auto;
        margin-inline-start: 28px;
        background: none;
        visibility: visible;
        transform: none;
        overflow: visible;
        transition: none;
    }

    .aux-nav__list {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0;
    }

    .aux-nav__item {
        border-bottom: 0;
        flex-wrap: nowrap;
    }

    .aux-nav__link {
        gap: 6px;
        padding: 26px 12px;
        font-size: 15px;
        white-space: nowrap;
    }

    /* Current-section underline. Drawn on a pseudo-element so it does not shift
       the text baseline the way a real border would.

       The link, not the list item, is the containing block. The mega item is
       position:static so its panel can span the header, and without this the
       underline resolved against the header too and painted as a red rule across
       the full width of the page. */
    .aux-nav__item > .aux-nav__link {
        position: relative;
    }

    .aux-nav__item > .aux-nav__link::after {
        content: "";
        position: absolute;
        inset-inline: 12px;
        bottom: 18px;
        height: 2px;
        background: var(--aux-red);
        transform: scaleX(0);
        /* `inline-start` is not a transform-origin keyword — it was silently
           dropped, leaving the default. Centre is what that default was and what
           reads correctly in both directions, so it is now stated. */
        transform-origin: center;
        transition: transform 0.2s ease;
    }

    .aux-nav__item.is-active > .aux-nav__link::after,
    .aux-nav__item:hover > .aux-nav__link::after {
        transform: scaleX(1);
    }

    .aux-nav__toggle {
        width: 22px;
        height: 22px;
        margin-inline-start: -6px;
        margin-inline-end: 0;
    }

    .aux-nav__toggle .aux-nav__chevron {
        width: 6px;
        height: 6px;
    }

    /* Dropdown panel.

       Closed means display:none, not opacity:0 + visibility:hidden. The latter
       looked correct in every measurement — getComputedStyle reported opacity 1,
       visibility visible, a correct box, a correct grid, and elementFromPoint
       returned the panel's own links — while the panel painted nothing at all,
       in headless and in a real Chrome window alike. Setting a magenta
       background inline did not make it appear; only forcing opacity and
       visibility inline together did. Whatever the engine was doing with that
       pair, display toggling is unambiguous, and it is what the drawer accordion
       below this breakpoint has been doing correctly all along.

       The fade is an animation rather than a transition, because animations run
       on an element that has just become displayed and transitions do not. */
    .aux-nav__panel {
        position: absolute;
        top: 100%;
        inset-inline-start: 0;
        z-index: 20;
        display: none;
        min-width: 250px;
        padding: 10px 0;
        border-radius: var(--aux-radius);
        background: #fff;
        box-shadow: var(--aux-shadow-panel);
    }

    .aux-nav__item.is-open > .aux-nav__panel {
        animation: aux-panel-in 0.18s ease both;
    }
}

@keyframes aux-panel-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 1200px) {

    .aux-nav__sublink {
        padding: 9px 20px;
        white-space: nowrap;
    }

    .aux-nav__sublink:hover {
        background: var(--aux-bg-soft);
    }

    /* Mega panel: category list plus a catalogue call to action. */
    .aux-nav__item.is-mega {
        position: static;
    }

    /* Both selectors, because the drawer's accordion rule
       `.aux-nav__item.is-open > .aux-nav__panel { display: block }` lives outside
       this media query and outweighs a single class. Without the longer selector
       the mega panel stayed display:block and the catalogue aside stacked under
       the category list instead of sitting beside it. */
    /* Geometry only. `display` is deliberately absent: stating it here applied to
       the closed panel too and left the mega menu permanently open. */
    .aux-nav__panel--mega {
        inset-inline: 0;
        grid-template-columns: 1fr 260px;
        gap: 24px;
        padding: 24px;
    }

    /* Three classes, so it outweighs the drawer's
       `.aux-nav__item.is-open > .aux-nav__panel { display: block }`, which lives
       outside this media query and would otherwise stack the catalogue aside
       under the category list instead of beside it. */
    .aux-nav__item.is-open > .aux-nav__panel--mega {
        display: grid;
    }

    .aux-nav__panel--mega .aux-nav__sublist {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2px 20px;
        padding: 0;
    }

    .aux-nav__panel--mega .aux-nav__sublink {
        padding: 9px 12px;
        border-radius: 8px;
        white-space: normal;
    }

    .aux-nav__panel--mega .aux-nav__subitem--all {
        grid-column: 1 / -1;
    }

    .aux-nav__panel-aside {
        display: block;
        padding: 20px;
        border-radius: var(--aux-radius);
        background: var(--aux-bg-soft);
    }

    .aux-nav__panel-title {
        margin: 0 0 6px;
        font-size: 15px;
        font-weight: 700;
        color: var(--aux-ink);
    }

    .aux-nav__panel-text {
        margin: 0 0 14px;
        font-size: 13px;
        line-height: 1.8;
        color: var(--aux-ink-soft);
    }

    .aux-nav__panel-cta {
        display: inline-block;
        padding: 10px 18px;
        border-radius: 999px;
        background: var(--aux-red);
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        transition: background-color 0.18s ease;
    }

    .aux-nav__panel-cta:hover {
        background: var(--aux-red-dark);
        color: #fff;
    }

    /* The search panel opens as a dropdown rather than pushing the page down. */
    .aux-header__search {
        position: absolute;
        inset-inline: 0;
        top: 100%;
        box-shadow: var(--aux-shadow-panel);
    }
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.aux-footer {
    background: var(--aux-ink);
    color: var(--aux-muted);
    font-size: 14px;
    line-height: 1.9;
}

.aux-footer a {
    color: var(--aux-muted);
    text-decoration: none;
    transition: color 0.18s ease;
}

.aux-footer a:hover,
.aux-footer a:focus-visible,
.aux-footer a[aria-current="page"] {
    color: #fff;
}

/* ── Brand strip ──────────────────────────────────────────────────────────── */

.aux-footer__top {
    padding: 34px 0;
    border-bottom: 1px solid var(--aux-line-dark);
}

.aux-footer__top-inner {
    display: grid;
    gap: 18px;
}

.aux-footer__logo img {
    width: auto;
    height: 44px;
}

.aux-footer__intro {
    max-width: 62ch;
    margin: 0;
}

.aux-footer__social {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.aux-footer__social-label {
    color: #fff;
    font-size: 13px;
}

.aux-footer__social-list {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aux-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--aux-line-dark);
    border-radius: 50%;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.aux-footer__social-link:hover {
    background: var(--aux-red);
    border-color: var(--aux-red);
}

/* ── Columns ──────────────────────────────────────────────────────────────── */

.aux-footer__body {
    padding: 12px 0 8px;
}

.aux-footer__grid {
    display: grid;
    gap: 0;
}

.aux-footer__col {
    border-bottom: 1px solid var(--aux-line-dark);
}

.aux-footer__heading {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
}

.aux-footer__heading-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 16px 0;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    text-align: start;
}

.aux-footer__chevron {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--aux-muted);
    border-bottom: 2px solid var(--aux-muted);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.aux-footer__heading-btn[aria-expanded="true"] .aux-footer__chevron {
    transform: rotate(-135deg);
}

.aux-footer__panel {
    padding-bottom: 18px;
}

.aux-footer__panel[hidden] {
    display: none;
}

.aux-footer__links,
.aux-footer__contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.aux-footer__links li + li {
    margin-top: 2px;
}

.aux-footer__contact li + li {
    margin-top: 12px;
}

.aux-footer__contact-label {
    display: block;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.aux-footer__address {
    margin: 0;
    font-style: normal;
}

.aux-footer__brands {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--aux-line-dark);
    font-size: 13px;
}

.aux-footer__brands-label {
    display: block;
    color: #fff;
    font-weight: 600;
}

.aux-footer__cta {
    margin-top: 18px;
    padding: 16px;
    border-radius: var(--aux-radius);
    background: rgba(255, 255, 255, 0.05);
}

.aux-footer__cta-text {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.8;
}

.aux-footer__cta-btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--aux-red);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.aux-footer__cta-btn:hover {
    background: var(--aux-red-dark);
    color: #fff;
}

/* ── Bottom bar ───────────────────────────────────────────────────────────── */

.aux-footer__bottom {
    border-top: 1px solid var(--aux-line-dark);
    padding: 20px 0;
}

.aux-footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}

.aux-footer__copy,
.aux-footer__legal {
    margin: 0;
}

@media (min-width: 768px) {

    .aux-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 36px;
    }

    /* Desktop shows every column open; aux-chrome.js drops the buttons out of the
       tab order at this width so the headings read as headings, not controls. */
    .aux-footer__col {
        border-bottom: 0;
        padding-block: 26px 8px;
    }

    .aux-footer__heading-btn {
        padding: 0 0 14px;
        cursor: default;
    }

    .aux-footer__chevron {
        display: none;
    }

    .aux-footer__panel[hidden] {
        display: block;
    }
}

@media (min-width: 1200px) {

    .aux-footer__top {
        padding: 42px 0;
    }

    .aux-footer__top-inner {
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 28px;
    }

    .aux-footer__grid {
        grid-template-columns: 1.35fr 1fr 1fr 1.15fr;
        gap: 0 32px;
    }

    .aux-footer__body {
        padding: 10px 0 26px;
    }
}

/* ============================================================================
   Shared
   ============================================================================ */

.aux-header button,
.aux-footer button {
    cursor: pointer;
}

.aux-header :focus-visible,
.aux-footer :focus-visible {
    outline: 2px solid var(--aux-red);
    outline-offset: 2px;
    border-radius: 4px;
}

.aux-footer :focus-visible {
    outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .aux-nav,
    .aux-nav__panel,
    .aux-nav__backdrop,
    .aux-nav__chevron,
    .aux-footer__chevron,
    .aux-header__burger-bars,
    .aux-header__burger-bars::before,
    .aux-header__burger-bars::after,
    .aux-nav__item > .aux-nav__link::after {
        transition: none;
    }
}