/*
 * Nager storefront theme
 * Loaded after the legacy 'elegant' stylesheets, so it wins on equal specificity.
 * Colours come from the layout (:root --nager-primary / --nager-accent); everything here uses
 * logical properties so Arabic (RTL) and English (LTR) share one set of rules.
 */

/* ---------- Fonts (IBM Plex Sans Arabic, SIL OFL 1.1, see fonts/OFL.txt) ---------- */
@font-face {
    font-family: "Nager Sans";
    src: url("../fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Nager Sans";
    src: url("../fonts/ibm-plex-sans-arabic-600.woff2") format("woff2");
    font-weight: 500 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Nager Sans";
    src: url("../fonts/ibm-plex-sans-arabic-700.woff2") format("woff2");
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
    --nager-primary: #1f2937;
    --nager-accent: #f59e0b;
    --nager-accent-ink: #92400e; /* accent used for text on white: 7:1 contrast */
    --nager-on-primary: #ffffff;
    --nager-on-accent: #111827;

    --nager-bg: #ffffff;
    --nager-surface: #f8fafc;
    --nager-surface-2: #f1f5f9;
    --nager-border: #e5e7eb;
    --nager-text: #111827;
    --nager-muted: #4b5563;
    --nager-success: #15803d;
    --nager-danger: #b91c1c;

    --nager-font: "Nager Sans", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
    --nager-radius: 12px;
    --nager-radius-sm: 8px;
    --nager-shadow: 0 1px 2px rgb(17 24 39 / 6%), 0 4px 12px rgb(17 24 39 / 6%);
    --nager-shadow-lg: 0 12px 32px rgb(17 24 39 / 16%);
    --nager-container: 1320px;
    --nager-gutter: 16px;
    --nager-topbar-h: 36px;
    --nager-header-h: 72px;
    --nager-bottom-nav-h: 64px;
    --nager-focus: 0 0 0 3px rgb(245 158 11 / 55%);

}

/* Pages that are not rebuilt yet read these legacy variables; custom.js writes the store colours inline,
   so !important is needed to keep every page on the same palette. */
:root {
    --primary-color: var(--nager-primary) !important;
    --secondary-color: #111827 !important;
    --link-active-color: var(--nager-primary) !important;
    --link-hover-color: var(--nager-accent-ink) !important;
}

/* legacy pages use .container-fluid edge to edge; give them the same width as the new header/footer */
.nager-main .container-fluid {
    max-width: var(--nager-container);
    margin-inline: auto;
    padding-inline: var(--nager-gutter);
}

/* ---------- Base ---------- */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
body,
button,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.btn {
    font-family: var(--nager-font);
}
body {
    font-size: 15px;
    line-height: 1.6;
    color: var(--nager-text);
    background: var(--nager-bg);
    text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
    color: var(--nager-text);
}
a {
    color: inherit;
}
img {
    max-width: 100%;
}
:focus-visible {
    outline: none;
    box-shadow: var(--nager-focus);
    border-radius: 6px;
}
.nager-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    white-space: nowrap;
}
.nager-container {
    width: 100%;
    max-width: var(--nager-container);
    margin-inline: auto;
    padding-inline: var(--nager-gutter);
}
.nager-flip {
    display: inline-block;
}
[dir="rtl"] .nager-flip {
    transform: scaleX(-1);
}
.nager-icon {
    width: 22px;
    height: 22px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* the old full-page loader: keep the element (JS toggles it) but make it quiet */
.loading-state.screen {
    background: var(--nager-bg);
}
.loading-state .loader .dot {
    background: var(--nager-accent);
}

/* ---------- Buttons / badges shared ---------- */
.nager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--nager-radius-sm);
    background: var(--nager-accent);
    color: var(--nager-on-accent);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s;
}
.nager-btn:hover {
    filter: brightness(0.95);
    color: var(--nager-on-accent);
}

/* ---------- Top bar ---------- */
.nager-topbar {
    background: var(--nager-primary);
    color: var(--nager-on-primary);
    font-size: 13px;
    min-height: var(--nager-topbar-h);
}
.nager-topbar .nager-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--nager-topbar-h);
}
.nager-topbar a {
    color: inherit;
    text-decoration: none;
}
.nager-topbar__phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    direction: ltr; /* keep +249... readable in RTL */
}
.nager-topbar__phone .nager-icon {
    width: 16px;
    height: 16px;
}
.nager-topbar__note {
    flex: 1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nager-topbar__tools {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ---------- Dropdowns (language, currency, account) ---------- */
.nager-dd {
    position: relative;
}
.nager-dd__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.nager-dd__btn:hover {
    background: rgb(255 255 255 / 12%);
}
.nager-dd__btn .nager-icon {
    width: 14px;
    height: 14px;
}
.nager-dd__panel {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 6px);
    z-index: 1100;
    min-width: 180px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--nager-bg);
    color: var(--nager-text);
    border: 1px solid var(--nager-border);
    border-radius: var(--nager-radius);
    box-shadow: var(--nager-shadow-lg);
    display: none;
}
.nager-dd.is-open > .nager-dd__panel {
    display: block;
}
.nager-dd__panel li {
    margin: 0;
}
.nager-dd__panel a,
.nager-dd__panel .nager-dd__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}
.nager-dd__panel a:hover,
.nager-dd__panel .nager-dd__item:hover,
.nager-dd__panel .is-current {
    background: var(--nager-surface-2);
}
.nager-dd__panel .is-current {
    font-weight: 600;
}

/* text wordmark shown while no logo file has been uploaded */
.nager-wordmark {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--nager-primary);
}
.nager-wordmark::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-inline-start: 4px;
    border-radius: 50%;
    background: var(--nager-accent);
}
.nager-footer .nager-wordmark {
    color: #fff;
}

/* ---------- Header ---------- */
/* Livewire needs one root element; let its children behave as if the wrapper did not exist (keeps sticky working) */
.nager-header-wrap {
    display: contents;
}
.nager-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--nager-bg);
    border-bottom: 1px solid var(--nager-border);
}
.nager-header.is-stuck {
    box-shadow: var(--nager-shadow);
}
.nager-header__main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: var(--nager-header-h);
}
.nager-logo {
    display: inline-flex;
    align-items: center;
    flex: none;
    text-decoration: none;
}
.nager-logo img {
    display: block;
    height: 44px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
}
.nager-search {
    flex: 1;
    display: flex;
    min-width: 0;
    border: 2px solid var(--nager-accent);
    border-radius: var(--nager-radius-sm);
    overflow: hidden;
    background: var(--nager-bg);
}
.nager-search input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 15px;
    color: var(--nager-text);
}
.nager-search input::placeholder {
    color: #6b7280;
}
.nager-search button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    border: 0;
    background: var(--nager-accent);
    color: var(--nager-on-accent);
    cursor: pointer;
}
.nager-search:focus-within {
    box-shadow: var(--nager-focus);
}
.nager-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
}
.nager-action {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 48px;
    min-height: 48px;
    padding: 4px 8px;
    border: 0;
    border-radius: var(--nager-radius-sm);
    background: transparent;
    color: var(--nager-text);
    font: inherit;
    font-size: 12px;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}
.nager-action:hover {
    background: var(--nager-surface-2);
    color: var(--nager-text);
}
.nager-badge {
    position: absolute;
    top: 2px;
    inset-inline-end: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--nager-accent);
    color: var(--nager-on-accent);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.nager-menu-btn {
    display: none;
}

/* category / link bar */
.nager-nav {
    border-top: 1px solid var(--nager-border);
    background: var(--nager-surface);
}
.nager-nav .nager-container {
    display: flex;
    align-items: stretch;
    gap: 4px;
    height: 46px;
}
.nager-nav a,
.nager-nav .nager-cats__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--nager-text);
    font-family: var(--nager-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.nager-nav .nager-cats {
    display: flex;
    align-items: stretch;
}
.nager-nav .nager-cats .nager-icon {
    width: 18px;
    height: 18px;
}
.nager-nav a:hover,
.nager-nav .nager-cats__btn:hover {
    color: var(--nager-accent-ink);
}
.nager-nav a[aria-current="page"] {
    color: var(--nager-accent-ink);
    box-shadow: inset 0 -3px 0 var(--nager-accent);
}
.nager-cats {
    position: relative;
}
.nager-cats__btn {
    background: var(--nager-primary) !important;
    color: var(--nager-on-primary) !important;
    font-weight: 600 !important;
}
.nager-cats .nager-dd__panel {
    inset-inline-start: 0;
    inset-inline-end: auto;
    min-width: 260px;
    max-height: 70vh;
    overflow: auto;
}

/* ---------- Mobile menu drawer ---------- */
.nager-drawer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
}
.nager-drawer.is-open {
    display: block;
}
.nager-drawer__scrim {
    position: absolute;
    inset: 0;
    background: rgb(17 24 39 / 55%);
}
.nager-drawer__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(86vw, 340px);
    overflow: auto;
    background: var(--nager-bg);
    box-shadow: var(--nager-shadow-lg);
    padding: 16px;
}
.nager-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.nager-drawer__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.nager-drawer__list a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 8px;
    border-bottom: 1px solid var(--nager-border);
    font-weight: 500;
    text-decoration: none;
}
.nager-drawer__group {
    margin: 16px 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--nager-muted);
}
.nager-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.nager-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--nager-border);
    border-radius: 999px;
    background: var(--nager-bg);
    color: var(--nager-text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.nager-chip.is-current {
    border-color: var(--nager-accent);
    background: rgb(245 158 11 / 14%);
    font-weight: 600;
}

/* ---------- Footer ---------- */
.nager-footer {
    margin-top: 48px;
    background: var(--nager-primary);
    color: #e5e7eb;
}
.nager-footer a {
    color: #e5e7eb;
    text-decoration: none;
}
.nager-footer a:hover {
    color: var(--nager-accent);
    text-decoration: underline;
}
.nager-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 32px;
    padding-block: 40px 24px;
}
.nager-footer h2 {
    margin: 0 0 14px;
    font-size: 16px;
    color: #ffffff;
}
.nager-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.nager-footer li {
    margin: 0 0 8px;
}
.nager-footer__brand img {
    display: block;
    height: 44px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    margin-bottom: 12px;
    border-radius: 6px;
}
.nager-footer__about {
    margin: 0 0 12px;
    max-width: 38ch;
    color: #d1d5db;
}
.nager-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.nager-footer__contact .nager-icon {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    color: var(--nager-accent);
}
.nager-footer__ltr {
    direction: ltr;
    unicode-bidi: embed;
}
.nager-pay {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.nager-pay span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: 999px;
    font-size: 13px;
}
.nager-footer__bottom {
    border-top: 1px solid rgb(255 255 255 / 14%);
    padding-block: 16px;
    font-size: 13px;
    color: #cbd5e1;
}
.nager-footer__bottom .nager-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* ---------- Mobile bottom navigation ---------- */
.nager-bottom-nav {
    display: none;
}

/* floating buttons that already exist in the footer markup */
.sticky-btn-box {
    inset-inline-end: 16px;
    inset-inline-start: auto;
}

/* ---------- Mini cart drawer ---------- */
.nager-btn--ghost {
    background: transparent;
    border: 2px solid var(--nager-primary);
    color: var(--nager-primary);
}
.nager-btn--ghost:hover {
    background: var(--nager-primary);
    color: var(--nager-on-primary);
}
.nager-btn.disabled,
.nager-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}
.nager-mc {
    width: min(420px, 94vw);
    display: flex;
    flex-direction: column;
    background: var(--nager-bg);
}
.nager-mc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 8px 16px;
    padding-inline: 16px 8px;
    border-bottom: 1px solid var(--nager-border);
}
.nager-mc__title {
    margin: 0;
    font-size: 17px;
}
.nager-mc__host {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.nager-mc__body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding-inline: 16px;
}
.nager-mc__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.nager-mc__item {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--nager-border);
}
.nager-mc__img img {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--nager-surface-2);
}
.nager-mc__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nager-mc__name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 600;
    color: var(--nager-text);
    text-decoration: none;
}
.nager-mc__variant {
    font-size: 13px;
    color: var(--nager-muted);
}
.nager-mc__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.nager-mc__price del {
    font-size: 13px;
    color: var(--nager-muted);
}
.nager-mc__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
}
.nager-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--nager-border);
    border-radius: 8px;
    overflow: hidden;
}
.nager-qty .qtyBtn {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: var(--nager-surface);
    color: var(--nager-text);
    cursor: pointer;
}
.nager-qty .qty {
    width: 48px;
    height: 36px;
    padding: 0;
    border: 0;
    background: #fff;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
}
.nager-qty .qty::-webkit-outer-spin-button,
.nager-qty .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.nager-mc__remove {
    display: inline-flex;
    padding: 8px;
    border-radius: 8px;
    color: var(--nager-danger);
}
.nager-mc__remove:hover {
    background: #fef2f2;
}
.nager-mc__foot {
    padding: 16px;
    border-top: 1px solid var(--nager-border);
    background: var(--nager-bg);
}
.nager-mc__total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 17px;
}
.nager-mc__agree {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--nager-muted);
}
.nager-mc__agree input {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--nager-primary);
}
.nager-mc__agree a {
    text-decoration: underline;
}
.nager-mc__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}
.nager-mc__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: auto;
    padding: 32px 24px;
    text-align: center;
}
.nager-mc__empty p {
    margin: 0;
    color: var(--nager-muted);
}

/* beat the legacy .qtyField / .qtyBtn rules and keep prices reading left-to-right in both languages */
.nager-mc .nager-qty.qtyField {
    position: static;
    display: inline-flex;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    float: none;
}
.nager-mc .nager-qty .qtyBtn {
    float: none;
    font-size: 0;
    line-height: 1;
}
.nager-mc .nager-qty .qty {
    float: none;
    min-width: 48px;
    box-shadow: none;
}
.nager-mc__price,
.nager-mc__total strong {
    direction: ltr;
    unicode-bidi: isolate;
}
[dir="rtl"] .nager-mc__price {
    justify-content: flex-end;
}
.nager-mc__info {
    text-align: start;
}

/* ---------- Search drawer ---------- */
.nager-sd {
    height: auto;
    max-height: 88vh;
    padding-block: 12px 24px;
    overflow: auto;
    font-family: var(--nager-font);
}
.nager-sd__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.nager-sd__head h2 {
    margin: 0;
    font-size: 18px;
}
.nager-sd__trending {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 14px 0 4px;
    color: var(--nager-muted);
}
.nager-sd__all {
    padding: 8px 0;
    border: 0;
    background: none;
    color: var(--nager-accent-ink);
    font: inherit;
    cursor: pointer;
}
.nager-sd__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.nager-sd__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border: 1px solid var(--nager-border);
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
}
.nager-sd__item:hover {
    background: var(--nager-surface);
}
.nager-sd__item img {
    flex: none;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
}
.nager-sd__item small {
    display: block;
    color: var(--nager-muted);
}
.nager-sd__empty {
    padding: 16px;
    text-align: center;
    color: var(--nager-muted);
}

/* ---------- Backdrop behind drawers and modals: light, no blur ---------- */
.offcanvas-backdrop,
.modal-backdrop {
    background-color: #111827 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.offcanvas-backdrop.show,
.modal-backdrop.show {
    opacity: 0.28 !important;
}


/* ================= Phase 2: catalogue ================= */
.nager-main { min-height: 50vh; }
.nager-section { margin-block: 32px; }
.nager-arrow { transform: rotate(-90deg); }
[dir="rtl"] .nager-arrow { transform: rotate(90deg); }

/* page head + breadcrumbs */
.nager-pagehead { background: var(--nager-surface); border-bottom: 1px solid var(--nager-border); padding-block: 12px; }
.nager-pagehead__title { margin: 6px 0 0; font-size: 26px; }
.nager-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14px; color: var(--nager-muted); }
.nager-crumbs a { color: var(--nager-muted); text-decoration: none; }
.nager-crumbs a:hover { color: var(--nager-accent-ink); text-decoration: underline; }
.nager-crumbs span { color: var(--nager-text); font-weight: 600; }
.nager-crumbs .nager-icon { width: 14px; height: 14px; transform: rotate(-90deg); }
[dir="rtl"] .nager-crumbs .nager-icon { transform: rotate(90deg); }

/* section headers */
.nager-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.nager-sechead h2 { margin: 0; font-size: 22px; }
.nager-sechead p { margin: 2px 0 0; color: var(--nager-muted); }
.nager-sechead__more { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--nager-accent-ink); font-weight: 600; text-decoration: none; }
.nager-sechead__more:hover { text-decoration: underline; }
.nager-sechead__more .nager-icon { width: 18px; height: 18px; }

/* service strip */
.nager-services ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.nager-services li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--nager-surface); border: 1px solid var(--nager-border); border-radius: var(--nager-radius); }
.nager-services .nager-icon { width: 30px; height: 30px; color: var(--nager-accent-ink); }
.nager-services strong { display: block; line-height: 1.3; }
.nager-services span { display: block; font-size: 13px; color: var(--nager-muted); line-height: 1.4; }

/* carousel */
.nager-carousel { position: relative; }
.nager-carousel__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-block: 4px; }
.nager-carousel__track::-webkit-scrollbar { display: none; }
.nager-carousel__item { flex: none; scroll-snap-align: start; }
.nager-carousel__item--card { width: calc((100% - 48px) / 4); }
.nager-carousel__item--tile { width: calc((100% - 80px) / 6); }
.nager-carousel__nav { position: absolute; top: 50%; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 1px solid var(--nager-border); border-radius: 50%; background: #fff; color: var(--nager-text); box-shadow: var(--nager-shadow); cursor: pointer; }
.nager-carousel__nav.is-prev { inset-inline-start: -14px; }
.nager-carousel__nav.is-next { inset-inline-end: -14px; }
.nager-carousel__nav[hidden] { display: none; }
.nager-carousel__nav.is-prev .nager-icon { transform: rotate(90deg); }
.nager-carousel__nav.is-next .nager-icon { transform: rotate(-90deg); }
[dir="rtl"] .nager-carousel__nav.is-prev .nager-icon { transform: rotate(-90deg); }
[dir="rtl"] .nager-carousel__nav.is-next .nager-icon { transform: rotate(90deg); }
.nager-carousel__dots { position: absolute; inset-inline: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.nager-carousel__dots i { width: 8px; height: 8px; border-radius: 99px; background: rgb(255 255 255 / 65%); transition: width 0.2s; }
.nager-carousel__dots i.is-active { width: 22px; background: #fff; }

/* hero */
.nager-hero-wrap { margin-top: 16px; }
.nager-hero .nager-carousel__track { gap: 0; border-radius: 16px; }
.nager-hero__slide { flex: 0 0 100%; scroll-snap-align: start; }
.nager-hero__slide a, .nager-hero__slide img { display: block; width: 100%; }
.nager-hero__slide img { aspect-ratio: 2 / 1; max-height: 520px; object-fit: cover; }
.nager-hero .nager-carousel__nav.is-prev { inset-inline-start: 12px; }
.nager-hero .nager-carousel__nav.is-next { inset-inline-end: 12px; }

/* tiles (categories, brands) */
.nager-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; text-decoration: none; color: var(--nager-text); }
.nager-tile__img { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--nager-radius); background: var(--nager-surface-2); border: 1px solid var(--nager-border); }
.nager-tile__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s; }
.nager-tile:hover .nager-tile__img img { transform: scale(1.05); }
.nager-tile:hover .nager-tile__name { color: var(--nager-accent-ink); }
.nager-tile__name { font-weight: 600; line-height: 1.3; }
.nager-tile--brand .nager-tile__img { background: #fff; }
.nager-tile--brand .nager-tile__img img { object-fit: contain; padding: 12px; }
.nager-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px 16px; }
.nager-banner-row { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: stretch; }
.nager-banner-row__img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--nager-radius); }
.nager-banner-row .nager-carousel { min-width: 0; }
.nager-banner-row .nager-carousel__item--card { width: calc((100% - 32px) / 3); }

/* product card */
.nager-card { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--nager-border); border-radius: var(--nager-radius); overflow: hidden; transition: box-shadow 0.2s, border-color 0.2s; }
.nager-card:hover { border-color: #d1d5db; box-shadow: var(--nager-shadow); }
.nager-card.is-unavailable .nager-card__media, .nager-card.is-unavailable .nager-card__body { opacity: 0.45; }
.nager-card__off { position: absolute; inset-inline: 0; top: 40%; z-index: 3; padding: 6px; background: var(--nager-primary); color: #fff; text-align: center; font-weight: 600; }
.nager-card__media { position: relative; background: var(--nager-surface-2); }
.nager-card__img { display: block; }
.nager-card__img img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.nager-card__labels { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.nager-label { direction: ltr; unicode-bidi: isolate; padding: 2px 8px; border-radius: 6px; background: var(--nager-primary); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.5; }
.nager-label.is-sale { background: var(--nager-danger); }
.nager-label.is-best { background: var(--nager-accent); color: var(--nager-on-accent); }
.nager-card__tools { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; display: flex; flex-direction: column; gap: 6px; }
.nager-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--nager-text); box-shadow: var(--nager-shadow); cursor: pointer; }
.nager-icon-btn:hover { color: var(--nager-accent-ink); }
.nager-icon-btn.is-on { color: var(--nager-danger); }
.nager-icon-btn .nager-icon { width: 18px; height: 18px; }
@media (hover: hover) {
    .nager-card__tools .quick-view-modal, .nager-card__tools .add-compare { opacity: 0; transform: translateX(4px); transition: opacity 0.15s, transform 0.15s; }
    .nager-card:hover .nager-card__tools .quick-view-modal, .nager-card:hover .nager-card__tools .add-compare, .nager-card:focus-within .nager-card__tools .quick-view-modal, .nager-card:focus-within .nager-card__tools .add-compare { opacity: 1; transform: none; }
}
@media (hover: none) { .nager-card__tools .add-compare { display: none; } }
.nager-card__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 12px; }
.nager-card__brand { font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--nager-muted); text-decoration: none; }
.nager-card__name { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
.nager-card__name a { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--nager-text); text-decoration: none; min-height: 2.8em; }
.nager-card__name a:hover { color: var(--nager-accent-ink); }
.nager-card__rating { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--nager-muted); }
.nager-stars { display: inline-block; width: 80px; height: 16px; direction: ltr; background: linear-gradient(90deg, #f59e0b var(--r, 0%), #d1d5db var(--r, 0%)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m8 1.2 2 4.2 4.6.6-3.4 3.2.9 4.6L8 11.5l-4.1 2.3.9-4.6L1.4 6l4.6-.6z'/%3E%3C/svg%3E") 0 0 / 16px 16px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m8 1.2 2 4.2 4.6.6-3.4 3.2.9 4.6L8 11.5l-4.1 2.3.9-4.6L1.4 6l4.6-.6z'/%3E%3C/svg%3E") 0 0 / 16px 16px repeat-x; }
.nager-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: auto; direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .nager-card__price { justify-content: flex-end; }
.nager-card__price strong { font-size: 18px; color: var(--nager-text); }
.nager-card__price del { font-size: 13px; color: var(--nager-muted); }
.nager-card__from { font-size: 12px; color: var(--nager-muted); }
.nager-card__cta-wrap { margin-top: 6px; }
.nager-card__cta { width: 100%; min-height: 42px; background: var(--nager-primary); color: var(--nager-on-primary); }
.nager-card__cta:hover { color: var(--nager-on-primary); background: #111827; filter: none; }
.nager-card__cta .nager-icon { width: 18px; height: 18px; }

/* grid + list mode */
.nager-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.nager-grid > div { min-width: 0; }
.nager-grid.is-list { grid-template-columns: 1fr; }
.nager-grid.is-list .nager-card { flex-direction: row; }
.nager-grid.is-list .nager-card__media { width: 220px; flex: none; }
.nager-grid.is-list .nager-card__body { justify-content: center; }
.nager-grid.is-list .nager-card__price { margin-top: 4px; }
.nager-grid.is-list .nager-card__cta-wrap { max-width: 220px; }

/* listing layout */
.nager-layout { display: block; margin-block: 20px; }
.nager-layout.has-filters { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.nager-search-title { padding-block: 16px 0; }
.nager-search-title h1 { margin: 0; font-size: 24px; }
.nager-search-title p { margin: 2px 0 0; color: var(--nager-muted); }
.nager-subcats { margin-bottom: 20px; }
.nager-filters { position: sticky; top: 140px; max-height: calc(100vh - 160px); overflow: auto; padding: 16px; background: #fff; border: 1px solid var(--nager-border); border-radius: var(--nager-radius); }
.nager-filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 16px; }
.nager-filters__head .nager-action { display: none; }
.nager-filters__scrim { display: none; }
.nager-fbox { padding-block: 10px; border-top: 1px solid var(--nager-border); }
.nager-fbox summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.nager-fbox summary::-webkit-details-marker { display: none; }
.nager-fbox summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--nager-muted); }
.nager-fbox[open] summary::after { content: "\2212"; }
.nager-checks { margin: 8px 0 0; padding: 0; list-style: none; max-height: 220px; overflow: auto; }
.nager-check { display: flex; align-items: center; gap: 8px; padding-block: 5px; }
.nager-check input { width: 18px; height: 18px; flex: none; accent-color: var(--nager-primary); }
.nager-check label { cursor: pointer; }
.nager-price-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.nager-price-row input { flex: 1; min-width: 0; height: 38px; padding: 0 8px; border: 1px solid var(--nager-border); border-radius: 8px; background: var(--nager-surface); font-size: 13px; direction: ltr; text-align: center; }
.nager-filters__actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--nager-border); }
.nager-filters__actions .nager-btn { flex: 1; }
.nager-btn--sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.nager-filters .ui-slider { direction: ltr; position: relative; height: 6px; margin: 18px 10px 10px; border: 0; border-radius: 99px; background: var(--nager-border); }
.nager-filters .ui-slider-range { position: absolute; height: 100%; border-radius: 99px; background: var(--nager-accent); }
.nager-filters .ui-slider-handle { position: absolute; top: -7px; width: 20px; height: 20px; margin-left: -10px; border: 3px solid var(--nager-primary); border-radius: 50%; background: #fff; cursor: grab; outline: none; }
.nager-filters .ui-slider-handle:focus-visible { box-shadow: var(--nager-focus); }

.nager-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 16px; }
.nager-toolbar__count { color: var(--nager-muted); font-size: 14px; }
.nager-toolbar__tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.nager-filter-open { display: none; }
.nager-seg { display: inline-flex; border: 1px solid var(--nager-border); border-radius: 8px; overflow: hidden; }
.nager-seg a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--nager-muted); }
.nager-seg a.is-on { background: var(--nager-primary); color: #fff; }
.nager-seg .nager-icon { width: 18px; height: 18px; }
.nager-select { height: 38px; padding: 0 12px; border: 1px solid var(--nager-border); border-radius: 8px; background: #fff; color: var(--nager-text); font-size: 14px; }

.nager-pagination { margin-top: 28px; }
.nager-pagination nav > div:first-child { display: none; }
.nager-pagination nav > div:last-child { display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; }
.nager-pagination .small, .nager-pagination p { margin: 0; font-size: 13px; color: var(--nager-muted); }
.nager-pagination .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nager-pagination .page-link { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--nager-border); border-radius: 8px; background: #fff; color: var(--nager-text); text-decoration: none; font-weight: 600; }
.nager-pagination .page-link:hover { border-color: var(--nager-primary); }
.nager-pagination .active .page-link { background: var(--nager-primary); border-color: var(--nager-primary); color: #fff; }
.nager-pagination .disabled .page-link { opacity: 0.4; pointer-events: none; }
[dir="rtl"] .nager-pagination .pagination li:first-child .page-link, [dir="rtl"] .nager-pagination .pagination li:last-child .page-link { transform: scaleX(-1); }

.nager-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 56px 16px; text-align: center; }
.nager-empty .nager-icon { width: 56px; height: 56px; color: var(--nager-muted); }
.nager-empty h2 { margin: 0; font-size: 20px; }

@media (max-width: 1199.98px) {
    .nager-carousel__item--card { width: calc((100% - 32px) / 3); }
    .nager-carousel__item--tile { width: calc((100% - 48px) / 4); }
    .nager-services ul { grid-template-columns: repeat(2, 1fr); }
    .nager-banner-row { grid-template-columns: 1fr; }
    .nager-banner-row__img { max-height: 220px; }
}
@media (max-width: 991.98px) {
    .nager-layout.has-filters { display: block; }
    .nager-filter-open { display: inline-flex; }
    .nager-filters { position: fixed; z-index: 1250; inset-block: 0; inset-inline-start: 0; width: min(88vw, 340px); max-height: none; border: 0; border-radius: 0; transform: translateX(-105%); transition: transform 0.25s; }
    [dir="rtl"] .nager-filters { transform: translateX(105%); }
    .nager-filters.is-open { transform: none; }
    .nager-filters__head .nager-action { display: inline-flex; }
    .nager-filters__scrim { position: fixed; z-index: 1240; inset: 0; background: #111827; opacity: 0; pointer-events: none; transition: opacity 0.25s; display: block; }
    .nager-filters.is-open + .nager-filters__scrim { opacity: 0.28; pointer-events: auto; }
    .nager-toolbar__tools { flex-wrap: wrap; }
}
@media (max-width: 767.98px) {
    .nager-section { margin-block: 24px; }
    .nager-sechead h2 { font-size: 19px; }
    .nager-carousel__item--card { width: 46%; }
    .nager-carousel__item--tile { width: 30%; }
    .nager-banner-row .nager-carousel__item--card { width: 46%; }
    .nager-carousel__nav { display: none; }
    .nager-hero__slide img { aspect-ratio: 16 / 9; }
    .nager-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .nager-grid.is-list { grid-template-columns: 1fr; }
    .nager-grid.is-list .nager-card__media { width: 130px; }
    .nager-card__body { padding: 10px; }
    .nager-card__name { font-size: 14px; }
    .nager-card__price strong { font-size: 16px; }
    .nager-services ul { grid-template-columns: 1fr 1fr; gap: 8px; }
    .nager-services li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; }
    .nager-toolbar { gap: 10px 8px; }
    .nager-toolbar__count { order: 2; flex: 1; text-align: end; font-size: 13px; }
    .nager-toolbar__tools { order: 3; display: grid; grid-template-columns: auto 76px 1fr; gap: 8px; width: 100%; margin-inline-start: 0; }
    .nager-toolbar__tools .nager-select { width: 100%; min-width: 0; }
    .nager-pagehead__title { font-size: 22px; }
}


/* overrides for legacy rules that also match these elements */
.nager-seg .list_view { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--nager-muted); cursor: pointer; }
.nager-seg .list_view.is-on { background: var(--nager-primary); color: #fff; }
.nager-seg .list_view:focus-visible { box-shadow: var(--nager-focus); }
.nager-select { -webkit-appearance: none; appearance: none; min-width: 72px; padding-inline: 12px 34px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; cursor: pointer; }
[dir="rtl"] .nager-select { padding-inline: 34px 12px; background-position: left 10px center; }
.nager-price-row { flex-wrap: wrap; }
.nager-price-row input { flex: 1 1 100%; }
.nager-price-row .nager-btn { flex: 1 1 100%; }
.nager-filters .ui-slider .ui-slider-range { background: var(--nager-accent) !important; }
.nager-filters .ui-slider { background: var(--nager-border) !important; }


/* ================= Phase 3+: restyle of the shared legacy building blocks =================
   Pages that keep their original markup (product page, cart, checkout, account, orders, auth) inherit the new look
   from these rules. Scoped to .nager-main / .modal / .offcanvas so the header, footer and admin are unaffected. */
.nager-main .btn, .modal .btn, .offcanvas .btn { font-family: var(--nager-font); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; min-height: 44px; padding: 8px 20px; border-radius: var(--nager-radius-sm); line-height: 1.3; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.nager-main .btn-primary, .modal .btn-primary, .offcanvas .btn-primary { background: var(--nager-primary); border: 2px solid var(--nager-primary); color: #fff; }
.nager-main .btn-primary:hover, .modal .btn-primary:hover { background: #111827; border-color: #111827; color: #fff; }
.nager-main .btn-secondary, .modal .btn-secondary, .offcanvas .btn-secondary { background: var(--nager-accent); border: 2px solid var(--nager-accent); color: var(--nager-on-accent); }
.nager-main .btn-secondary:hover, .modal .btn-secondary:hover { background: #d97706; border-color: #d97706; color: var(--nager-on-accent); }
.nager-main .btn-outline-primary, .nager-main .btn-outline-secondary, .nager-main .btn-light, .nager-main .btn-gray { background: #fff; border: 2px solid var(--nager-border); color: var(--nager-text); }
.nager-main .btn-outline-primary:hover, .nager-main .btn-outline-secondary:hover, .nager-main .btn-light:hover, .nager-main .btn-gray:hover { border-color: var(--nager-primary); background: var(--nager-surface); color: var(--nager-text); }
.nager-main .btn-sm, .modal .btn-sm { min-height: 36px; padding: 4px 14px; font-size: 14px; }
.nager-main .btn-lg { min-height: 52px; font-size: 16px; }
.nager-main .btn:disabled, .nager-main .btn.disabled { opacity: 0.5; }

.nager-main .form-control, .nager-main .form-select, .modal .form-control, .modal .form-select,
.nager-main input[type="text"], .nager-main input[type="email"], .nager-main input[type="tel"], .nager-main input[type="password"],
.nager-main input[type="number"], .nager-main input[type="search"], .nager-main textarea, .nager-main select {
    font-family: var(--nager-font); font-size: 15px; color: var(--nager-text); background-color: #fff; border: 1px solid #cbd5e1; border-radius: var(--nager-radius-sm); padding: 10px 14px; min-height: 44px; box-shadow: none; line-height: 1.4;
}
.nager-main textarea { min-height: 96px; }
.nager-main .form-control:focus, .nager-main .form-select:focus, .nager-main input:focus, .nager-main textarea:focus, .nager-main select:focus,
.modal .form-control:focus { border-color: var(--nager-accent); box-shadow: var(--nager-focus); outline: 0; }
.nager-main label, .modal label { font-size: 14px; font-weight: 600; color: var(--nager-text); }
.nager-main .form-group, .nager-main .mb-3 > label + * { margin-top: 4px; }
.nager-main input[type="checkbox"], .nager-main input[type="radio"] { accent-color: var(--nager-primary); width: 18px; height: 18px; min-height: 0; padding: 0; }
.nager-main .text-danger, .nager-main .error { color: var(--nager-danger) !important; }

.nager-main .nav-tabs, .nager-main .product-tabs, .nager-main .tabs-listing .nav { display: flex; flex-wrap: wrap; gap: 4px; border: 0; border-bottom: 1px solid var(--nager-border); margin-bottom: 20px; padding: 0; list-style: none; }
.nager-main .nav-tabs .nav-link, .nager-main .nav-tabs li a, .nager-main .tabs li a { padding: 12px 18px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--nager-muted); font-weight: 600; text-decoration: none; border-radius: 0; }
.nager-main .nav-tabs .nav-link.active, .nager-main .nav-tabs li.active a, .nager-main .tabs li.active a, .nager-main .nav-tabs li a.active { color: var(--nager-text); border-bottom-color: var(--nager-accent); background: none; }

.nager-main .table, .nager-main table { width: 100%; border-collapse: collapse; font-size: 14px; }
.nager-main .table th, .nager-main table th { background: var(--nager-surface); color: var(--nager-muted); font-weight: 700; text-transform: none; letter-spacing: 0; padding: 12px; border-bottom: 1px solid var(--nager-border); text-align: start; white-space: nowrap; }
.nager-main .table td, .nager-main table td { padding: 12px; border-bottom: 1px solid var(--nager-border); vertical-align: middle; }
.nager-main .table-responsive { overflow-x: auto; border: 1px solid var(--nager-border); border-radius: var(--nager-radius); }
.nager-main .badge { border-radius: 999px; padding: 4px 10px; font-weight: 600; font-size: 12px; }
.nager-main .card, .nager-main .box, .nager-main .cart-box, .nager-main .order-box { border: 1px solid var(--nager-border); border-radius: var(--nager-radius); background: #fff; }
.nager-main .alert { border-radius: var(--nager-radius-sm); }
.modal-content { border: 0; border-radius: var(--nager-radius); box-shadow: var(--nager-shadow-lg); font-family: var(--nager-font); }
.modal-header { border-bottom: 1px solid var(--nager-border); }
.nager-main hr { border-color: var(--nager-border); opacity: 1; }
.nager-main a:not(.btn):not(.nager-btn):not(.nager-card__cta) { color: inherit; }
.nager-main .text-link, .nager-main .text-underline { color: var(--nager-accent-ink); }

/* legacy page header / breadcrumbs (pages that still render their own) */
.nager-main .page-header { background: var(--nager-surface); border-bottom: 1px solid var(--nager-border); padding: 12px 0; margin: 0 0 20px; text-align: start !important; }
.nager-main .page-header .row, .nager-main .page-header [class*="col-"] { display: block; padding: 0; margin: 0; width: auto; }
.nager-main .page-header .page-title h1 { margin: 6px 0 0; font-size: 26px; }
.nager-main .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--nager-muted); }
.nager-main .breadcrumbs a { color: var(--nager-muted); text-decoration: none; }
.nager-main .breadcrumbs .main-title { color: var(--nager-text); font-weight: 600; }
.nager-main .breadcrumbs ion-icon { font-size: 14px; vertical-align: middle; }
[dir="rtl"] .nager-main .breadcrumbs ion-icon { transform: scaleX(-1); }

/* product page */
.nager-main .product-single { padding-block: 8px 24px; }
.nager-main .product-main-title { font-size: 28px; line-height: 1.3; text-transform: none; }
.nager-main .product-single .product-price { direction: ltr; unicode-bidi: isolate; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 8px 0 14px; }
[dir="rtl"] .nager-main .product-single .product-price { justify-content: flex-end; }
.nager-main .product-single .product-price .price { font-size: 28px; font-weight: 700; color: var(--nager-text); }
.nager-main .product-single .product-price .old-price { font-size: 17px; font-weight: 400; color: var(--nager-muted); text-decoration: line-through; }
.nager-main .discount-sup { display: inline-block; direction: ltr; unicode-bidi: isolate; padding: 2px 8px; border-radius: 6px; background: var(--nager-danger); color: #fff !important; font-size: 13px; font-weight: 700; }
.nager-main .product-sku, .nager-main .product-type { color: var(--nager-muted); }
.nager-main .product-sku .text { color: var(--nager-text); margin-inline-start: 6px; }
.nager-main .product-action { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-block: 20px; }
.nager-main .product-action .btn { flex: 1 1 160px; }
.nager-main .product-action .product-form-quantity { order: -1; }
.nager-main .qtyField { display: inline-flex; align-items: center; border: 1px solid var(--nager-border); border-radius: 8px; overflow: hidden; background: #fff; height: 44px; width: auto; }
.nager-main .qtyField .qtyBtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 44px; padding: 0; border: 0; background: var(--nager-surface); color: var(--nager-text); cursor: pointer; position: static; font-size: 18px; }
.nager-main .qtyField input.qty { width: 54px; height: 44px; padding: 0; border: 0; border-radius: 0; text-align: center; font-weight: 600; min-height: 0; -moz-appearance: textfield; }
.nager-main .product-thumb, .nager-main .product-thumb-vertical { max-width: 100%; }
.nager-main .zoompro-wrap img { border-radius: var(--nager-radius); max-width: 100%; height: auto; }
.nager-main .variants-size { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 0; margin: 0; list-style: none; }
.nager-main .swatch { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px !important; border: 1px solid var(--nager-border); border-radius: 8px; cursor: pointer; font-weight: 600; background: #fff; }
.nager-main .swatch.active, .nager-main .swatch:has(input:checked) { border-color: var(--nager-primary); background: var(--nager-primary); color: #fff; }
.nager-main .social-sharing .shareon a { border-radius: 8px; }
.nager-main .product-not-available { padding: 10px; background: #fef2f2; color: var(--nager-danger); border-radius: 8px; margin-bottom: 12px; text-align: center; }


.nager-main .product-nav { display: none; }
.nager-main .qtyField:not(.nager-qty) .qtyBtn ion-icon { display: none; }
.nager-main .qtyField:not(.nager-qty) .qtyBtn::before { content: "+"; font-size: 20px; line-height: 1; font-weight: 600; }
.nager-main .qtyField:not(.nager-qty) .qtyBtn.minus::before { content: "\2212"; }

/* ---- auth pages (login, register, password recovery): one centred card ---- */
.nager-main .login-register { padding: 24px 0 56px; }
.nager-main .login-register > .row { display: flex; justify-content: center; margin: 0; }
.nager-main .login-register [class*="col-"] { flex: 0 0 auto; width: 100% !important; max-width: 480px; margin-inline: auto !important; padding: 0 !important; float: none; }
.nager-main .login-register .inner { height: auto !important; padding: 28px; background: #fff; border: 1px solid var(--nager-border); border-radius: 16px; box-shadow: var(--nager-shadow); }
.nager-main .login-register h2, .nager-main .login-register .fs-4 { font-size: 24px !important; }
.nager-main .login-register .form-group { margin-bottom: 14px; padding: 0; }
.nager-main .login-register .btn { width: 100%; }
.nager-main .login-register .form-row { margin: 0; }
.nager-main .login-register .iti { width: 100%; }
.nager-main .login-register .iti input[type="tel"] { direction: ltr; text-align: start; }
[dir="rtl"] .nager-main .login-register .iti input[type="tel"] { text-align: right; }
.nager-main .login-register .social-login a, .nager-main .login-register .btn-social { width: auto; min-width: 130px; }
.nager-main input[type="submit"], .nager-main input[type="button"], .nager-main button[type="submit"] { font-family: var(--nager-font); font-size: 16px; font-weight: 600; cursor: pointer; }
.nager-main .login-register .form-group { position: relative; }
.nager-main .login-register .eye-icon { position: absolute; left: auto; right: auto; inset-inline-end: 14px; top: calc(50% - 10px); font-size: 20px; color: var(--nager-muted); cursor: pointer; }
.nager-main .login-register input[type="password"] { padding-inline-end: 46px; }
.nager-main .login-divide { display: flex; align-items: center; gap: 12px; margin: 20px 0 12px; color: var(--nager-muted); }
.nager-main .login-divide::before, .nager-main .login-divide::after { content: ""; flex: 1; height: 1px; background: var(--nager-border); }
.nager-main .login-divide span { background: none; padding: 0; }
.nager-main .login-social { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.nager-main .login-social .social-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 8px; color: #fff !important; text-decoration: none; font-weight: 600; flex: 1 1 140px; }
@media (max-width: 767.98px) {
    .nager-main .product-main-title { font-size: 22px; }
    .nager-main .product-single .product-price .price { font-size: 24px; }
    .nager-main .product-action .btn { flex-basis: 100%; }
}


/* ================= content pages (about, policies, FAQ, contact) ================= */
.nager-narrow { max-width: 860px; }
.nager-prose { max-width: 820px; margin-inline: auto; padding: 24px; background: #fff; border: 1px solid var(--nager-border); border-radius: var(--nager-radius); line-height: 1.8; font-size: 16px; }
.nager-prose h1, .nager-prose h2, .nager-prose h3 { margin: 0 0 12px; line-height: 1.3; }
.nager-prose h2 { font-size: 24px; }
.nager-prose h3 { font-size: 19px; margin-top: 20px; }
.nager-prose p, .nager-prose ul, .nager-prose ol { margin: 0 0 14px; }
.nager-prose ul, .nager-prose ol { padding-inline-start: 22px; }
.nager-prose hr { margin: 28px 0; }
.nager-prose a { color: var(--nager-accent-ink); text-decoration: underline; }
.nager-prose img { height: auto; border-radius: 8px; }
.nager-faq-title { margin: 0 0 16px; font-size: 26px; text-align: center; }
.nager-faq-search { position: relative; max-width: 560px; margin: 0 auto 24px; }
.nager-faq-search .nager-search__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; background: var(--nager-accent); color: var(--nager-on-accent); }
.nager-faq__item { background: #fff; border: 1px solid var(--nager-border); border-radius: var(--nager-radius); margin-bottom: 10px; }
.nager-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; cursor: pointer; font-weight: 700; list-style: none; }
.nager-faq__item summary::-webkit-details-marker { display: none; }
.nager-faq__item summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--nager-muted); flex: none; }
.nager-faq__item[open] summary::after { content: "\2212"; }
.nager-faq__item[open] { border-color: var(--nager-accent); }
.nager-faq__a { padding: 0 18px 18px; color: var(--nager-muted); line-height: 1.8; }
.nager-empty-note { text-align: center; color: var(--nager-muted); padding: 24px; }
.nager-contact { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.nager-contact__form, .nager-contact__info { background: #fff; border: 1px solid var(--nager-border); border-radius: var(--nager-radius); padding: 24px; }
.nager-contact__form h2, .nager-contact__info h3 { margin: 0 0 16px; font-size: 22px; }
.nager-contact__info h3 { font-size: 18px; }
.nager-contact__info ul { margin: 0; padding: 0; list-style: none; }
.nager-contact__info li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.nager-contact__info .nager-icon { width: 20px; height: 20px; margin-top: 2px; color: var(--nager-accent-ink); }
.nager-contact__text { margin-top: 16px; padding: 0; border: 0; font-size: 14px; }
.nager-form { display: grid; gap: 14px; }
.nager-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nager-form label { display: block; margin-bottom: 4px; }
.nager-form .form-control { width: 100%; }
.nager-form .text-danger { margin: 4px 0 0; font-size: 13px; }
@media (max-width: 767.98px) {
    .nager-contact { grid-template-columns: 1fr; }
    .nager-form__row { grid-template-columns: 1fr; }
    .nager-prose { padding: 16px; font-size: 15px; }
}


/* legacy swiper rows (related products etc.) now hold nager cards: equal heights */
.nager-main .swiper-wrapper { align-items: stretch; }
.nager-main .swiper-slide { height: auto !important; }
.nager-main .swiper-slide > .nager-card { height: 100%; }
/* floating chat / scroll-to-top buttons */
.sticky-btn-box .chat-btn { background: var(--nager-primary) !important; color: #fff !important; border-radius: 50% !important; box-shadow: var(--nager-shadow-lg); }
.sticky-btn-box #site-scroll { background: #fff; color: var(--nager-text); border: 1px solid var(--nager-border); border-radius: 50%; box-shadow: var(--nager-shadow); }


/* checkout */
.nager-main .payment-accordion .form-check { padding: 12px 14px; border: 1px solid var(--nager-border); border-radius: var(--nager-radius-sm); background: #fff; }
.nager-main .payment-accordion .form-check:has(input:checked) { border-color: var(--nager-accent); box-shadow: 0 0 0 1px var(--nager-accent); }
.nager-main .payment-accordion .form-check-label { flex: 1; cursor: pointer; gap: 10px; }
.nager-main .payment-image img { max-height: 32px; width: auto; }
.nager-pay-label { font-weight: 600; }


/* quick view modal: readable price and links */
#quickview_modal .product-price { direction: ltr; unicode-bidi: isolate; display: flex; gap: 8px; align-items: baseline; }
#quickview_modal .product-price .price, #quickview_modal .product-price span { color: var(--nager-text) !important; font-size: 26px; font-weight: 700; opacity: 1 !important; }
#quickview_modal .product-price .old-price { color: var(--nager-muted) !important; font-size: 16px; font-weight: 400; text-decoration: line-through; }
#quickview_modal a:not(.btn):not(.nager-btn) { color: var(--nager-accent-ink); }
#quickview_modal .text-muted, .modal .text-muted { color: var(--nager-muted) !important; }
#quickview_modal .product-review, #quickview_modal .product-review * { opacity: 1; }

/* ---------- Existing offcanvas drawers (mini cart, search): light restyle ---------- */
#minicart-drawer,
#search-drawer {
    font-family: var(--nager-font);
    border: 0;
    box-shadow: var(--nager-shadow-lg);
}
#minicart-drawer .btn,
#search-drawer .btn {
    border-radius: var(--nager-radius-sm);
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    :root {
        --nager-header-h: 60px;
    }
    body {
        padding-bottom: calc(var(--nager-bottom-nav-h) + env(safe-area-inset-bottom));
    }
    .nager-topbar {
        display: none;
    }
    .nager-nav {
        display: none;
    }
    .nager-menu-btn {
        display: inline-flex;
    }
    .nager-header__main {
        flex-wrap: wrap;
        gap: 8px 8px;
        padding-block: 8px;
        min-height: 0;
    }
    .nager-logo {
        margin-inline-end: auto;
    }
    .nager-logo img {
        height: 36px;
        max-width: 130px;
    }
    .nager-search {
        order: 5;
        flex: 1 1 100%;
    }
    .nager-actions .nager-action__label,
    .nager-actions .nager-hide-mobile {
        display: none;
    }
    .nager-action {
        min-width: 44px;
        min-height: 44px;
    }
    .nager-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
    .nager-bottom-nav {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1040;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        height: calc(var(--nager-bottom-nav-h) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--nager-bg);
        border-top: 1px solid var(--nager-border);
        box-shadow: 0 -4px 16px rgb(17 24 39 / 8%);
    }
    .nager-bottom-nav a,
    .nager-bottom-nav button {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        border: 0;
        background: transparent;
        color: var(--nager-muted);
        font: inherit;
        font-size: 11px;
        text-decoration: none;
        cursor: pointer;
    }
    .nager-bottom-nav [aria-current="page"] {
        color: var(--nager-accent-ink);
        font-weight: 700;
    }
    .nager-bottom-nav .nager-badge {
        top: 4px;
        inset-inline-end: calc(50% - 22px);
    }
    .sticky-btn-box {
        bottom: calc(var(--nager-bottom-nav-h) + 16px);
    }
}
@media (max-width: 575.98px) {
    .nager-footer__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .nager-footer__bottom .nager-container {
        justify-content: center;
        text-align: center;
    }
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    * {
        transition: none !important;
        animation-duration: 0.01ms !important;
    }
}

/* wide tables scroll inside their own box on narrow screens instead of making the page scroll sideways */
@media (max-width: 767.98px) {
    .nager-main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* rows of filter pills / tabs wrap instead of widening the page */
.nager-main .orders-card > .d-flex, .nager-main .dashboard-content .d-flex.gap-3 { flex-wrap: wrap; }

/* ---------- RTL mirror for the legacy (Bootstrap 5.1 LTR) utilities used by un-rebuilt pages ---------- */
[dir="rtl"] .ms-0{margin-left:0!important;margin-right:0!important}
[dir="rtl"] .me-0{margin-right:0!important;margin-left:0!important}
[dir="rtl"] .ps-0{padding-left:0!important;padding-right:0!important}
[dir="rtl"] .pe-0{padding-right:0!important;padding-left:0!important}
[dir="rtl"] .ms-1{margin-left:0!important;margin-right:.25rem!important}
[dir="rtl"] .me-1{margin-right:0!important;margin-left:.25rem!important}
[dir="rtl"] .ps-1{padding-left:0!important;padding-right:.25rem!important}
[dir="rtl"] .pe-1{padding-right:0!important;padding-left:.25rem!important}
[dir="rtl"] .ms-2{margin-left:0!important;margin-right:.5rem!important}
[dir="rtl"] .me-2{margin-right:0!important;margin-left:.5rem!important}
[dir="rtl"] .ps-2{padding-left:0!important;padding-right:.5rem!important}
[dir="rtl"] .pe-2{padding-right:0!important;padding-left:.5rem!important}
[dir="rtl"] .ms-3{margin-left:0!important;margin-right:1rem!important}
[dir="rtl"] .me-3{margin-right:0!important;margin-left:1rem!important}
[dir="rtl"] .ps-3{padding-left:0!important;padding-right:1rem!important}
[dir="rtl"] .pe-3{padding-right:0!important;padding-left:1rem!important}
[dir="rtl"] .ms-4{margin-left:0!important;margin-right:1.5rem!important}
[dir="rtl"] .me-4{margin-right:0!important;margin-left:1.5rem!important}
[dir="rtl"] .ps-4{padding-left:0!important;padding-right:1.5rem!important}
[dir="rtl"] .pe-4{padding-right:0!important;padding-left:1.5rem!important}
[dir="rtl"] .ms-5{margin-left:0!important;margin-right:3rem!important}
[dir="rtl"] .me-5{margin-right:0!important;margin-left:3rem!important}
[dir="rtl"] .ps-5{padding-left:0!important;padding-right:3rem!important}
[dir="rtl"] .pe-5{padding-right:0!important;padding-left:3rem!important}
[dir="rtl"] .ms-auto{margin-left:0!important;margin-right:auto!important}
[dir="rtl"] .me-auto{margin-right:0!important;margin-left:auto!important}
[dir="rtl"] .text-start{text-align:right!important}
[dir="rtl"] .text-end{text-align:left!important}
[dir="rtl"] .float-start{float:right!important}
[dir="rtl"] .float-end{float:left!important}
@media (min-width: 768px) {
[dir="rtl"] .ms-md-0{margin-left:0!important;margin-right:0!important}
[dir="rtl"] .me-md-0{margin-right:0!important;margin-left:0!important}
[dir="rtl"] .ps-md-0{padding-left:0!important;padding-right:0!important}
[dir="rtl"] .pe-md-0{padding-right:0!important;padding-left:0!important}
[dir="rtl"] .ms-md-1{margin-left:0!important;margin-right:.25rem!important}
[dir="rtl"] .me-md-1{margin-right:0!important;margin-left:.25rem!important}
[dir="rtl"] .ps-md-1{padding-left:0!important;padding-right:.25rem!important}
[dir="rtl"] .pe-md-1{padding-right:0!important;padding-left:.25rem!important}
[dir="rtl"] .ms-md-2{margin-left:0!important;margin-right:.5rem!important}
[dir="rtl"] .me-md-2{margin-right:0!important;margin-left:.5rem!important}
[dir="rtl"] .ps-md-2{padding-left:0!important;padding-right:.5rem!important}
[dir="rtl"] .pe-md-2{padding-right:0!important;padding-left:.5rem!important}
[dir="rtl"] .ms-md-3{margin-left:0!important;margin-right:1rem!important}
[dir="rtl"] .me-md-3{margin-right:0!important;margin-left:1rem!important}
[dir="rtl"] .ps-md-3{padding-left:0!important;padding-right:1rem!important}
[dir="rtl"] .pe-md-3{padding-right:0!important;padding-left:1rem!important}
[dir="rtl"] .ms-md-4{margin-left:0!important;margin-right:1.5rem!important}
[dir="rtl"] .me-md-4{margin-right:0!important;margin-left:1.5rem!important}
[dir="rtl"] .ps-md-4{padding-left:0!important;padding-right:1.5rem!important}
[dir="rtl"] .pe-md-4{padding-right:0!important;padding-left:1.5rem!important}
[dir="rtl"] .ms-md-5{margin-left:0!important;margin-right:3rem!important}
[dir="rtl"] .me-md-5{margin-right:0!important;margin-left:3rem!important}
[dir="rtl"] .ps-md-5{padding-left:0!important;padding-right:3rem!important}
[dir="rtl"] .pe-md-5{padding-right:0!important;padding-left:3rem!important}
[dir="rtl"] .ms-md-auto{margin-left:0!important;margin-right:auto!important}
[dir="rtl"] .me-md-auto{margin-right:0!important;margin-left:auto!important}
[dir="rtl"] .text-md-start{text-align:right!important}
[dir="rtl"] .text-md-end{text-align:left!important}
[dir="rtl"] .float-md-start{float:right!important}
[dir="rtl"] .float-md-end{float:left!important}
}
@media (min-width: 992px) {
[dir="rtl"] .ms-lg-0{margin-left:0!important;margin-right:0!important}
[dir="rtl"] .me-lg-0{margin-right:0!important;margin-left:0!important}
[dir="rtl"] .ps-lg-0{padding-left:0!important;padding-right:0!important}
[dir="rtl"] .pe-lg-0{padding-right:0!important;padding-left:0!important}
[dir="rtl"] .ms-lg-1{margin-left:0!important;margin-right:.25rem!important}
[dir="rtl"] .me-lg-1{margin-right:0!important;margin-left:.25rem!important}
[dir="rtl"] .ps-lg-1{padding-left:0!important;padding-right:.25rem!important}
[dir="rtl"] .pe-lg-1{padding-right:0!important;padding-left:.25rem!important}
[dir="rtl"] .ms-lg-2{margin-left:0!important;margin-right:.5rem!important}
[dir="rtl"] .me-lg-2{margin-right:0!important;margin-left:.5rem!important}
[dir="rtl"] .ps-lg-2{padding-left:0!important;padding-right:.5rem!important}
[dir="rtl"] .pe-lg-2{padding-right:0!important;padding-left:.5rem!important}
[dir="rtl"] .ms-lg-3{margin-left:0!important;margin-right:1rem!important}
[dir="rtl"] .me-lg-3{margin-right:0!important;margin-left:1rem!important}
[dir="rtl"] .ps-lg-3{padding-left:0!important;padding-right:1rem!important}
[dir="rtl"] .pe-lg-3{padding-right:0!important;padding-left:1rem!important}
[dir="rtl"] .ms-lg-4{margin-left:0!important;margin-right:1.5rem!important}
[dir="rtl"] .me-lg-4{margin-right:0!important;margin-left:1.5rem!important}
[dir="rtl"] .ps-lg-4{padding-left:0!important;padding-right:1.5rem!important}
[dir="rtl"] .pe-lg-4{padding-right:0!important;padding-left:1.5rem!important}
[dir="rtl"] .ms-lg-5{margin-left:0!important;margin-right:3rem!important}
[dir="rtl"] .me-lg-5{margin-right:0!important;margin-left:3rem!important}
[dir="rtl"] .ps-lg-5{padding-left:0!important;padding-right:3rem!important}
[dir="rtl"] .pe-lg-5{padding-right:0!important;padding-left:3rem!important}
[dir="rtl"] .ms-lg-auto{margin-left:0!important;margin-right:auto!important}
[dir="rtl"] .me-lg-auto{margin-right:0!important;margin-left:auto!important}
[dir="rtl"] .text-lg-start{text-align:right!important}
[dir="rtl"] .text-lg-end{text-align:left!important}
[dir="rtl"] .float-lg-start{float:right!important}
[dir="rtl"] .float-lg-end{float:left!important}
}
[dir="rtl"] .text-left{text-align:right!important}
[dir="rtl"] .text-right{text-align:left!important}
[dir="rtl"] .start-0{left:auto!important;right:0!important}
[dir="rtl"] .end-0{right:auto!important;left:0!important}
[dir="rtl"] .start-50{left:auto!important;right:50%!important}
[dir="rtl"] .end-50{right:auto!important;left:50%!important}
[dir="rtl"] .start-100{left:auto!important;right:100%!important}
[dir="rtl"] .end-100{right:auto!important;left:100%!important}
[dir="rtl"] .border-start{border-left:0!important;border-right:1px solid #dee2e6!important}
[dir="rtl"] .border-end{border-right:0!important;border-left:1px solid #dee2e6!important}
[dir="rtl"] .rounded-start{border-radius:0 .25rem .25rem 0!important}
[dir="rtl"] .rounded-end{border-radius:.25rem 0 0 .25rem!important}
[dir="rtl"] .offcanvas-start{left:auto;right:0;border-right:0;border-left:1px solid rgba(0,0,0,.2);transform:translateX(100%)}
[dir="rtl"] .offcanvas-end{right:auto;left:0;border-left:0;border-right:1px solid rgba(0,0,0,.2);transform:translateX(-100%)}
[dir="rtl"] .offcanvas.show{transform:none}
[dir="rtl"] .dropdown-menu-end{right:auto;left:0}
[dir="rtl"] .modal-header .btn-close{margin:-.5rem auto -.5rem -.5rem}
[dir="rtl"] .list-inline-item:not(:last-child){margin-right:0;margin-left:.5rem}
[dir="rtl"] .breadcrumb-item+.breadcrumb-item{padding-right:.5rem;padding-left:0}
[dir="rtl"] .breadcrumb-item+.breadcrumb-item::before{float:right;padding-right:0;padding-left:.5rem}
[dir="rtl"] input[type="tel"],[dir="rtl"] input[type="email"],[dir="rtl"] input[type="url"]{direction:ltr;text-align:right}

/* ---------- marketplace: sellers ---------- */
.nager-card__seller { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; color: var(--nager-muted); text-decoration: none; }
.nager-card__seller span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nager-card__seller .nager-icon { width: 14px; height: 14px; flex: none; }
.nager-card__seller:hover { color: var(--nager-accent-ink); }

.nager-tile--seller .nager-tile__img { border-radius: 50%; background: #fff; }
.nager-tile--seller .nager-tile__img img { object-fit: contain; padding: 10px; }
.nager-tile--seller .nager-card__rating { justify-content: center; }
.nager-tiles--sellers { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

.nager-shop { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; padding: 20px; border: 1px solid var(--nager-border); border-radius: var(--nager-radius); background: var(--nager-surface); }
.nager-shop__logo { flex: none; width: 96px; height: 96px; border-radius: 50%; border: 1px solid var(--nager-border); background: #fff; object-fit: contain; padding: 8px; }
.nager-shop__info { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.nager-shop__meta { margin: 0; font-weight: 600; }
.nager-shop__desc { margin: 0; color: var(--nager-muted); overflow-wrap: anywhere; }

.nager-sell { display: flex; align-items: center; gap: 20px; margin-top: 32px; padding: 24px; border-radius: var(--nager-radius); background: var(--nager-primary); color: var(--nager-on-primary); }
.nager-sell > .nager-icon { flex: none; width: 44px; height: 44px; color: var(--nager-accent); }
.nager-sell__text { flex: 1; min-width: 0; }
.nager-sell__text h2 { margin: 0 0 4px; font-size: 20px; color: inherit; }
.nager-sell__text p { margin: 0; opacity: 0.85; }
.nager-sell .nager-btn { flex: none; }

/* product page (legacy markup): the "sold by" line becomes a seller box */
.nager .freeShipMsg:has(.seller-icon) { padding: 12px 14px; border: 1px solid var(--nager-border); border-radius: var(--nager-radius-sm); background: var(--nager-surface); }
.nager .freeShipMsg .seller-icon { color: var(--nager-accent-ink); }
.nager .freeShipMsg:has(.seller-icon) a { color: var(--nager-text); text-decoration: none; }
.nager .freeShipMsg:has(.seller-icon) a:hover { color: var(--nager-accent-ink); text-decoration: underline; }

@media (max-width: 575.98px) {
    .nager-shop { flex-direction: column; text-align: center; }
    .nager-shop .nager-card__rating { justify-content: center; }
    .nager-sell { flex-direction: column; text-align: center; }
    .nager-sell .nager-btn { width: 100%; }
}